From e8313d3c7a81c3b23a91e509d57291abb5bd433c Mon Sep 17 00:00:00 2001 From: kenneth Date: Sat, 16 Sep 2023 16:51:38 +0800 Subject: [PATCH] Updated index.md --- docs/index.md | 51 +++++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 41 insertions(+), 10 deletions(-) diff --git a/docs/index.md b/docs/index.md index fa77564..d97a5bc 100644 --- a/docs/index.md +++ b/docs/index.md @@ -6,19 +6,21 @@ By: Kenneth Acar Garcia This solution originated from the concept of dynamically rendering a network topology from a network source-of-truth data source, coupled with an interactive GUI. This interface offers the flexibility to present essential network statistics either for individual devices or specific links. +![Sample Diagram](https://raw.githubusercontent.com/kagarcia1618/ntaac/main/images/default_topology.png){ align=left } + ## Pre-Requisite | No. | Application | Version | |:----:|:-------------------------------:|:-------:| -| 1. | NetBox | 3.5.6 | -| 2. | Grafana | 9.5.2 | -| 3. | Gitlab | 16.3.0 | -| 4. | Grafana Plugin - Apache ECharts | 5.1.0 | +| 1. | [NetBox](https://github.com/netbox-community/netbox) | 3.5.6 | +| 2. | [Grafana](https://grafana.com/) | 9.5.2 | +| 3. | [Gitlab](https://about.gitlab.com/) | 16.3.0 | +| 4. | [Grafana Plugin - Apache ECharts](https://grafana.com/grafana/plugins/volkovlabs-echarts-panel/) | 5.1.0 | -### NetBox +### [NetBox]() -- NetBox as the network source-of-truth will host the necessary data for individual devices and specific links which includes the following details but not limited to hostname, interface name and role. -- NetBox's custom script will function as dataset generator in JSON format below. This dataset will then be committed into a local gitlab repository using python via API either manually or triggered by a device record change in NetBox. +- NetBox as the network source-of-truth will host the necessary data for devices and links which includes the following details but not limited to hostname, interface name and role. +- NetBox's custom script will function as dataset generator in JSON format. This dataset will then be committed into a local gitlab repository using python via API either manually or triggered by a device record change in NetBox. The dataset currently contains the following records: @@ -39,7 +41,7 @@ This solution originated from the concept of dynamically rendering a network top - URL - optional field that will provide URL redirection feature once you click the link from the network topology GUI - Iframe - optional field that will provide embedded iframe visual once you hover over the link from the network topology GUI - Please refer to this [link](https://github.com/kagarcia1618/ntaac) for the example NetBox custom script that generates this JSON dataset for Apache Echart's consumption. + Please refer to this [link](https://github.com/kagarcia1618/ntaac/blob/main/contrib/nb_json_generator.py) for the example NetBox custom script that generates this JSON dataset for Apache Echart's consumption. ### Grafana @@ -58,11 +60,40 @@ This solution originated from the concept of dynamically rendering a network top - Gitlab will be used here as the repository of generated dataset in JSON format by the NetBox Custom Script - JSON format dataset will then be fetched by Apache Echarts grafana plugin to dynamically render the network topology with interactive GUI -Please refer to this [link](https://github.com/kagarcia1618/ntaac) for the example JSON format generated dataset. + Please refer to this [link](https://github.com/kagarcia1618/ntaac/blob/main/contrib/network_topology_as_a_code.json) for the example JSON format generated dataset. ### Grafana Plugin - Apache Echarts - Apache Echarts is the key component that consolidates the pieces of information from NetBox, Grafana and Gitlab that renders a dynamic network topology from the JSON format data - Apache Echarts has a parameter named `Function` that contains the code in javascript languange for ingesting the JSON format data from Gitlab repository. -Please refer to this [link](https://github.com/kagarcia1618/ntaac) for the example javascript function for grafana echarts plugin. \ No newline at end of file + Please refer to this [link](https://github.com/kagarcia1618/ntaac/blob/main/contrib/echarts_function.js) for the example javascript function for grafana echarts plugin. + +## Node OnHover Event + +Hovering the mouse pointer to the node will show an embedded iframe display from reference Grafana dashboard panel for resources utilization statistics. + +![Sample Diagram](https://raw.githubusercontent.com/kagarcia1618/ntaac/main/images/node_onhover.png){ align=left } + +## Node OnClick Event + +Clicking the mouse pointer on the node will open a new browser page display from reference Grafana dashboard for that device. + +![Sample Diagram](https://raw.githubusercontent.com/kagarcia1618/ntaac/main/images/node_onclick.png){ align=left } + +## Link OnHover Event + +Hovering the mouse pointer to the node will show an embedded iframe display from reference Grafana dashboard panel for interface utilization statistics. + +![Sample Diagram](https://raw.githubusercontent.com/kagarcia1618/ntaac/main/images/link_onhover.png){ align=left } + +## Link OnClick Event + +Clicking the mouse pointer on the link will open a new browser page display from reference Grafana dashboard for that interface link utilization statistics. + +![Sample Diagram](https://raw.githubusercontent.com/kagarcia1618/ntaac/main/images/link_onclick.png){ align=left } + +## Credits + +- The reference Grafana dashboard screenshots, link and iframe URL were all obtained from publicly available website of [Internet2](https://snapp-portal.net.internet2.edu/). +- The reference network device icons were all obtained from [ecceman/affinity](https://github.com/ecceman/affinity) github page. \ No newline at end of file