{"id":13582810,"url":"https://github.com/esnet/grafana-esnet-networkmap-panel","last_synced_at":"2025-04-30T11:33:31.510Z","repository":{"id":45103154,"uuid":"395746468","full_name":"esnet/grafana-esnet-networkmap-panel","owner":"esnet","description":"A geographic bidirectional network map based on d3 and leaflet ","archived":false,"fork":false,"pushed_at":"2024-12-19T23:10:14.000Z","size":31981,"stargazers_count":16,"open_issues_count":3,"forks_count":1,"subscribers_count":30,"default_branch":"main","last_synced_at":"2025-04-06T01:41:18.853Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/esnet.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-08-13T17:58:29.000Z","updated_at":"2025-03-27T02:57:52.000Z","dependencies_parsed_at":"2023-10-17T03:11:55.536Z","dependency_job_id":"eb82e364-5a16-400d-afdc-c767892ef5f1","html_url":"https://github.com/esnet/grafana-esnet-networkmap-panel","commit_stats":{"total_commits":376,"total_committers":4,"mean_commits":94.0,"dds":0.2021276595744681,"last_synced_commit":"ff27e448c9edeb0dc07a842ab8ed22c4d4ce3cda"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/esnet%2Fgrafana-esnet-networkmap-panel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/esnet%2Fgrafana-esnet-networkmap-panel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/esnet%2Fgrafana-esnet-networkmap-panel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/esnet%2Fgrafana-esnet-networkmap-panel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/esnet","download_url":"https://codeload.github.com/esnet/grafana-esnet-networkmap-panel/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251691637,"owners_count":21628360,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T15:03:02.714Z","updated_at":"2025-04-30T11:33:31.470Z","avatar_url":"https://github.com/esnet.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"[![Build Status](https://api.travis-ci.com/esnet/grafana-esnet-networkmap-panel.svg?branch=main)](https://app.travis-ci.com/github/esnet/grafana-esnet-networkmap-panel)\n\n![Network Map Screenshot](https://raw.githubusercontent.com/esnet/grafana-esnet-networkmap-panel/v3.0.0/src/img/networkmap.png \"Network Map Screenshot\")\n\nFor setting up in Grafana with an example: See [Introductory Tutorial](#introductory-tutorial)\nFor development: See [Development Notes](https://github.com/esnet/grafana-esnet-networkmap-panel/blob/main/docs/development.md)\n\n# Network Map Panel\n\nThis panel displays a network topology.\n\nThe topology can be either geographically referenced against a geographic tileset, or purely logical.\n\nThe plugin will plot traffic information on the network topology, showing bi-directional traffic flow between nodes.\n\n## Table of Contents\n\n[Dashboard JSON](#Dashboard-JSON)\n\n[Introductory Tutorial](#Introductory-Tutorial)\n\n## Dashboard JSON\n\nThe Introductory Tutorial below is complete, but lengthy. In an effort to get to a demonstration state a bit more quickly, try using this Grafana Dashboard JSON snippet:\n\n[Dashboard JSON Snippet](https://github.com/esnet/grafana-esnet-networkmap-panel/blob/v2.0.1/demonstration/dashboard.json)\n\n## Introductory Tutorial\n\nThis (rather lengthy) tutorial will help you set up and color a map topology, and as a bonus step, show how it can be integrated with other plugins in your Grafana dashboard.\n\n### Setup:\n\nIn a couple of places in this tutorial, we'll refer to this Google sheet:\n\nhttps://docs.google.com/spreadsheets/d/1K_nZcu4yzPXBuOR3nO8NkbSCxMnvWtu37H9cGagkQgc/edit#gid=0\n\nThis Google sheet contains a set of mocked network data traffic that's always up to date for the last 7 days.\n\nIt also contains an example topology that will be used while setting up the Network Map Panel.\n\n### Open Grafana\n\n### 1. Setup a Google Sheets Data Source\n\n- If not yet selected, click the tab labeled Data Sources.\n\n- Click the Add New Data Source button.\n\n- Type in Google Sheet in the search bar.\n\n- Install the Google Sheet data source.\n\n- Click the [Create a Google Sheets data source] button\n\n- Get a Google Sheets API key (Google this if you don't have one)\n\n- Input your Google Sheets API key into the \"API Key\" input\n\n- Click [Test + Save]\n\n### 2. Setup a Test Dashboard\n\n- Create a new Dashboard\n\n- Save your dashboard as \"Test Dashboard\"\n\n### 3. Add the Network Map Panel\n\n- Click [Add Visualization]\n\n- In the visualization selector at the top right of the screen, search for and select \"Network Map Panel\"\n\n- You'll now see a blank network map visualization\n\n### 4. Set up the Visualization\n\n- Now let's configure the options for the panel. There are many options.\n\n### 5. Set up the Data Source Query\n\n- At the bottom of the screen, select \"Google Sheets\"\n\n- Into the Spreadsheet ID blank, enter \"1K_nZcu4yzPXBuOR3nO8NkbSCxMnvWtu37H9cGagkQgc\"\n\n- Leave \"Range\" blank\n\n- Leave Cache Time set to 5m\n\n- Turn \"Use Time Filter\" on\n\n### 6. Create Dashboard Variables\n\n- Near the top right, select the Gear icon: \"Dashboard settings\"\n\n- From the list at left, select \"Variables\"\n\n- Click [Add Variable]\n\n- From \"Select Variable Type,\" select \"Text box\"\n\n- Enter \"source\" into the \"name\" field\n\n- At the top right, click [Save Dashboard]\n\n- From the list at left, select \"Variables\"\n\n- Click [Add Variable]\n\n- From \"Select Variable Type,\" select \"Text box\"\n\n- Enter \"destination\" into the \"name\" field\n\n- At the top right, click [Save Dashboard]\n\n- At the top right, click [Close]\n\n### 7. Configure the Visualization\n\n- Now we'll enter all of the options that make the Network Map Panel render a full network visualization.\nFollow the list below to enter all of the various options to enter a topology and link it with the spreadsheet data.\n\n#### 8. Visualization Options\n\n**Map Initial View Strategy**\n\nThis option designates how the viewport for the map will be set on map load. There are 3 strategies:\n- Specify Static Center, No zoom on resize\n- Specify Lat/Lng Viewport, Zoom to fit on resize\n- Set Map Center from Variables, No zoom on resize\n\nFor our demo, we'll select \"Specify Static Center, No zoom on resize\"\n\nThis will give us an initial static center an zoom that reasonably fits the USA into the viewport.\n\n**Map Background Color**\n\nThis option sets the map background color using the built-in Grafana color picker. We'll leave this one alone.\n\n**Geographic Tileset**\n\nThis renders the geographic tileset layer for the map. Select \"USGS Satellite Imagery\" for this introduction\n\n**Political Boundary Tileset**\n\nThis will render political boundaries onto the map. Select \"Toner Political Boundaries\" for this demo.\n\n**Political Label Tileset**\n\nPolitical labels will label each political boundary. Select \"[No Political Labels]\" for this introduction.\n\n**Show View Controls**\n\nThis will optionally hide and show the zoom controls in the map panel. Leave this set to \"on\"\n\n**Enable Map Scrolling on Drag**\n\nThis enables allowing the end user to scroll the viewport. Leave this set to \"on\"\n\n**Enable Map Editing**\n\nThis optionally disables the built-in topology editor. Leave this set to \"on\"\n\n**Enable Node Selection Animations**\n\nThis optionally disables node selection animations. Leave this set to \"on\"\n\n**Enable Edge Traffic Direction Animations**\n\nThis optionally disables edge selection animations. Leave this set to \"on\"\n\n**Layer 1 on**\n\nThis optionally hides Layer 1 of the topology information. Leave this set to \"on\"\n\n**Fetch Layer 1 JSON from URL**\n\nThis will optionally fetch Layer 1's JSON topology from a URL instead of the provided text area. Leave this set to \"off\"\n\n**Layer 1 Map Data (JSON)**\n\nFrom the Google Sheet at https://docs.google.com/spreadsheets/d/1K_nZcu4yzPXBuOR3nO8NkbSCxMnvWtu37H9cGagkQgc/edit#gid=0, click the tab for the sheet named \"Topology\" along the bottom of the viewport and paste in the content in the most upper-left cell (A1).\n\n**Layer 1 Default Color**\n\nLeave this set to gray. It will help to show when we've correctly associated edge metadata.\n\n**Layer 1 Endpoint Identifier**\n\nThis input specifies the attribute of \"endpoint_identifiers\" prop of each of the \"edges\" objects in your JSON topology. Each \"endpoint_identifiers\" entry in the JSON should have a key matching the value specified in this text box (although the assigned JSON value is an array of node names of length two, does not matter). The value for Grafana here should be left as the default \"names\".\n\n**Layer 1 Node Highlight Color**\n\nWhen your metrics data shows a match for a particular node, it will be highlighted this color. Set this to medium blue (\"blue\") for this introduction.\n\n**Layer 1 Node Size**\n\nThis changes the diameter of the nodes in this topology layer. Leave this set to the default, 5.\n\n**Layer 1 Edge Width**\n\nThis changes the width of all of the edges in this topology layer. Leave it set to the default, 3.\n\n**Layer 1 Edge Offset**\n\nThis changes the space between the edges in this topology layer. Leave it set to the default, 3.\n\n**Layer 2 on**\n\nThis will show another topology layer. Leave it set to \"off\" for now.\n\n**Layer 3 on**\n\nThis will show another topology layer. Leave it set to \"off\" for now.\n\n**Layer 1 Source Field Label**\n\nThis will change the \"From:\" label in the edge tooltips. Leave it set to \"From:\"\n\n**Layer 1 Source Field**\n\nThis will specify the field from the query that we want to map to our edges. Choose \"src\" from the drop-down.\n\n**Layer 1 Destination Field Label**\n\nThis will change the \"To:\" label in the edge tooltips. Leave it set to \"To:\"\n\n**Layer 1 Destination Field**\n\nThis will specify the field from the query that we want to map to our destination. Choose \"dst\" from the drop-down.\n\n**Layer 1 Data Field Label**\n\nThis will change the \"Volume:\" label in the edge tooltips. Leave it set to \"Volume:\"\n\n**Layer 1 Inbound Value Field**\n\nThis will change the field from your query that represents traffic from the A end to the Z end of each edge. Select \"in_bits\" from the drop down.\n\n**Layer 1 Outbound Value Field**\n\nThis will change the field from your query that represents traffic from the Z end to the A end of each edge. Select \"out_bits\" from the drop down.\n\n**Binding: Node Layer 1**\n\nThis will change the dashboard variable that is set when a node is selected. The default of \"node\" is fine for this introduction.\n\n**Binding: Edge \"Source\" Layer 1**\n\nThis will change the dashboard variable that is set to the edge 'source' when an edge is selected. Set this to \"source\".\n\n**Binding: Edge \"Destination\" Layer 1**\n\nThis will change the dashboard variable that is set to the edge 'destination' when an edge is selected. Set this to \"destination\".\n\n**Show map sidebar**\n\nThis shows and hides the sidebar at the right side of the map. Set this to \"off\" for this introduction.\n\n**Show Map Legend**\n\nThis shows and hides the map legend. Set this to \"on\" for this introduction.\n\n**Legend Items per Column**\n\nThis is the maximum number of legend entries per legend column. Leave this set to the default, 3, for this introduction.\n\n**Legend Position**\n\nThis sets the position of the legend. Leave this set to the default, \"Bottom Left\" for this introduction.\n\n**Legend Default Behavior**\n\nThis sets whether the legend is minimized or visible at page load time. Leave this set to the default, \"visible\" for this introduction.\n\n**Unit**\n\nThis sets the units in a variety of places, including the legend and tooltips. Choose Data Rate \u003e Bits / sec (SI)\n\n**Decimals**\n\nLeave this set to \"auto\"\n\n**Color Scheme**\n\nThis should be set to \"From thresholds (by value)\"\n\n**Thresholds**\n\nThis will set the color thresholds for different rates for your map. Add these entries:\n\n- 1e10 (10 Gb/s)\n- 5e10 (50 Gb/s)\n- 1e11 (100 Gb/s)\n- 4e11 (400 Gb/s)\n- 8e11 (800 Gb/s)\n\nYou should see edges appropriately colored.\n\n### Save your Dashboard\n\n#### 9. Bonus: Dashboard Interaction via Variables\n\n- Click [Apply]\n\nYou should now be looking at the main dashboard view. Let's add another panel:\n\n- Click [Add]\n\n- Select \"Visualization\" from the drop-down menu\n\n- Select \"Time Series\" from the visualization drop down at the top right.\n\n**Query**\n\n- Select \"Google Sheets\" as the data source.\n\n- Enter \"1K_nZcu4yzPXBuOR3nO8NkbSCxMnvWtu37H9cGagkQgc\" as the spreadsheet ID\n\n- Enter \"$source--$destination\" as the Range\n\n- Check \"Use time filter\"\n\n**Transform**\n\n- Select \"Group by\"\n\n- src: Ignored\n\n- dst: Ignored\n\n- datetime: Group By\n\n- in_bits: Calculate: Total\n\n- out_bits: Calculate: Total\n\n**Visualization Options**\n\n- Select Data Rate \u003e Bits / Sec (SI) from the Unit pull-down\n\n### Save your Dashboard\n\nYou should now have a dashboard that visualizes a point-in-time snapshot of your network traffic, along with a line graph that shows the network traffic over the the selected Grafana time range.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fesnet%2Fgrafana-esnet-networkmap-panel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fesnet%2Fgrafana-esnet-networkmap-panel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fesnet%2Fgrafana-esnet-networkmap-panel/lists"}