From a70a3ca5074b730c382ee8216cafee72ede931bb Mon Sep 17 00:00:00 2001 From: kenneth Date: Sat, 16 Sep 2023 15:58:48 +0800 Subject: [PATCH] Updated index.md --- docs/index.md | 130 ++------------------------------------------------ 1 file changed, 4 insertions(+), 126 deletions(-) diff --git a/docs/index.md b/docs/index.md index 80777d3..fa77564 100644 --- a/docs/index.md +++ b/docs/index.md @@ -35,68 +35,11 @@ This solution originated from the concept of dynamically rendering a network top - Links - Interface information containing the following details - Source - Source device hostname - - Source_int - Source device interface name - Target - Target device hostname - - Target_int - Target device interface name - 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 - ``` - { - "categories": [ - { - "name": "Role_A" - }, - { - "name": "Role_B" - },= - ], - "nodes": [ - { - "name": "Device_A", - "category": "Role_A", - "url": "https://grafana.local/d/.../device-utilization-dashboard/?orgId=X&var-hostname=Device_A&from=now-12h&to=now", - "iframe": "``" - }, - { - "name": "Device_B", - "category": "Role_B", - "url": "https://grafana.local/d/.../device-utilization-dashboard/?orgId=X&var-hostname=Device_B&from=now-12h&to=now", - "iframe": "``" }, - { - "name": "Device_C", - "category": "Role_B", - "url": "https://grafana.local/d/.../device-utilization-dashboard/?orgId=X&var-hostname=Device_C&from=now-12h&to=now", - "iframe": "``" } - ], - "links": [ - { - "source": "Device_A", - "source_int": "Gi0", - "target": "Device_B", - "target_int: "Gi0", - "url": "https://grafana.local/d/.../device-utilization-dashboard/?orgId=X&var-hostname=Device_A&var-name=Gi0&panelId=XX&from=now-12h&to=now", - "iframe": "``" - }, - { - "source": "Device_B", - "source_int": "Gi1", - "target": "Device_C", - "target_int: "Gi1", - "url": "https://grafana.local/d/.../device-utilization-dashboard/?orgId=X&var-hostname=Device_B&var-name=Gi1&panelId=XX&from=now-12h&to=now", - "iframe": "``" - }, - { - "source": "Device_A", - "source_int": "Gi1", - "target": "Device_C", - "target_int: "Gi0", - "url": "https://grafana.local/d/.../device-utilization-dashboard/?orgId=X&var-hostname=Device_A&var-name=Gi1&panelId=XX&from=now-12h&to=now", - "iframe": "``" - } - ] - } - ``` + 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. ### Grafana @@ -115,76 +58,11 @@ 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. + ### 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. - ``` - let graph; - - const gitRepoUrl = 'https://{FQDN or IP}/{Owner}/{Project Name}/-/raw/{Branch}/{Filename}.json'; - - function Get(Url) { - var Httpreq = new XMLHttpRequest(); // a new request - Httpreq.open("GET", Url, false); - Httpreq.send(); - return Httpreq.responseText; - } - - graph = JSON.parse(Get(gitRepoUrl)) - - echartsInstance.on("click", (params) => { - window.open( - params.data.url - ); - }); - - return { - tooltip: { - formatter: function (params) { - return params.data.iframe - } - }, - legend: [ - { - data: graph.categories.map(function (a) { - return a.name; - }) - } - ], - series: [ - { - name: 'Network Topology as a Code', - type: 'graph', - layout: 'force', - data: graph.nodes, - links: graph.links, - categories: graph.categories, - roam: true, - force: { - edgeLength: 150, - repulsion: 500, - friction: 0.2, - gravity: 0.25 - }, - label: { - show: true, - position: 'left', - formatter: '{b}', - }, - autoCurveness: true, - lineStyle: { - color: 'source', - }, - emphasis: { - focus: 'adjacency', - lineStyle: { - width: 10 - } - }, - draggable: true, - } - ] - }; - ``` \ No newline at end of file +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