knightss27 / grafana-network-weathermap

A fully featured and customizable network weathermap plugin for Grafana (9.0+).

Grafana Network Weathermap Plugin

This plugin brings customizeable and modern looking network weathermaps to Grafana. The design remains similar to the well known PHP Network Weathermap, while allowing for interoperability with Grafana and easy customization.

Link to the WIKI! or install the latest version. There are a lot of customization options for the weathermap, so it's recommended that you read over the wiki (at least at a glance) to best understand how to use it!

You can also download the latest version from Github directly.

Other examples:

grafana-network-weathermap's Issues

IEC vs SI units for data rate

Hi,

it looks like 8373e2a changed the default data rate units from SI (Gbps etc.) to IEC (Gibps etc.) This is a surprising choice. I think network data rates use SI everywhere, and Wikipedia seems to agree. My 100G links are now marked with 93.1 Gibps, which seems rather silly. I see this can be overridden per link, but that's a lot of work and I'd much rather change the default. I don't see a way to do that currently, though.

Would it be possible to change the default units to SI and/or make the default configurable?

Thanks for your work on this very useful plugin.

The arrow part of the link are not visible

Describe the problem
I have a small issue with weathermap: the arrow part of the links are not visible
I can see the Connection but, at place of the arrows, I only see a blank part

I have tried to play with all arrows parameters but I never see the arrow part of links

Screenshots

VERSIONS:

• Browser: Chromium and Firefox (last version)
• Grafana: 9.1.2
• Plugin: 0.3.1
• Datasources: Prometheus

Development Status

Hey there, if you're reading this and using the weathermap, thanks!

In what is both a fortunate and unfortunate series of timings, Grafana ended up approving this to their community page while I am traveling without consistent access both to the internet and my computer for developing this project.

I write this to explain why likely all enhancement issues will remain untouched until early August. Otherwise, any serious bugs will be dealt with as fast as possible.

You can expect there to be a fairly large update with all reasonably implementable enhancement issues when I return home. I am happy to take PRs for enhancements as well, though these will not be reviewed until then as well, but it may mean things get implemented even faster.

-Seth

Ability to add port details as a label to a link

The plugin is fantastic and i've used it widely over the last few weeks, however it would be hugely beneficial to add a label to the A and Z side of each link to denote the physical port.

Names with Prometheus should be Grafana's

Describe the problem
When fetching data from Prometheus, the names are taken directly from Prometheus, showing only the labels.
I'm using 0.3.2 (manual installation). With version 0.3.1 I couldn't use bandwidth queries at all (it displayed just "No Label").

To Reproduce
Steps to reproduce the behavior (if possible):
Use a Prometheus server.

Expected behavior
It would better use Grafana's naming system, meaning the series name (A,B etc) or Grafana's labeling system for Prometheus (as performed by Duagram plugin for example).

Screenshots
The first query (out of two), that has a unique legend name and a unique series name:

How the two queries appear in the plugin's select box:

VERSIONS! (please complete the following information):

• Browser Chrome
• Grafana Version 9.2.0
• Plugin Version 0.3.2

Unable to add pictures into existing icon list

Unable to add new icons
I would like to add new pictures into the existing icon folders but when files copied to cisco icon folder and grafana-server restarted, the weathermap plugin cannot be loaded.
I tested to copied png and svg and same behavior.

Expected behavior
I'm excepting to see the picture into the icon list

Screenshots

VERSIONS

• Browser: chrome
• Grafana Version [e.g. v8.3.0 (914fcedb7]
• Plugin Version [e.g. 0.3.1]
• Additional Versions (i.e. datasource: Prometheus)

LAG interface / Expression support

Thank you so much for this project, its awesome!

A great additional feature would be a way to display traffic on aggregate interfaces.

When querying a LAG interface, snmp reports no traffic. So to show LAG traffic in a Time Series panel, I need to query individual interfaces then use an expression like "queryA + queryB" to get the aggregate traffic of the member interfaces.

Currently, Network Weathermap panel only allows for selecting a query to display traffic for a node. If we were able to select an expression, then we could display LAG interface traffic in the map. Which would be terrific!

network weathermap lag
.

Links attached to icon

First thank you for this plugin

I am using phpWeathermap since a long time, and I'm very happy to see that there is an implementation of it into Grafana.
However, I see maybe something which is missing about the link connection.
It will be nice to have the capability to attach a link to the icon.

Thank you very much,

Zid

Detailed usage examples

Is your feature request related to a problem? Please describe.
I am new to grafana and have been tasked with quickly finding a good way of visualising nodes and their traffic, I found it a bit tricky to get the panel to work and I was not sure which data source to use.

Describe the solution/feature you'd like
An example or two clearly showing how to use the plugin including a datasource

Not able to define different usage for each links

Problem
I am planning to create this weathermap, example i am taking four nodes and creating two links between them, example from node a to node b and from node c to node d.

then i have elasticsearh index which contains information of outBps and InBps then i create a query which will pull outBps and InBps for each link,

so when i am trying to select this created query on the right side panel of A side and Z side it is not able to differentiate between these query and eventually gives me the same output

Expected behavior
i should be able to select different usage from the queries of different links

like this how is this achievable

VERSIONS! (please complete the following information):

• Browser [firefox]
• Grafana Version [8.5.11]
• Plugin Version [0.3.3]
• Additional (Elasticsearch is being used as a data source)

so please help screen shot is attached, Thank you

Add a way to manage the status value mappings

Is your feature request related to a problem? Please describe.
I have setup my dashboard using a Prometheus SNMP Exporter that gets data from my Mikrotik router. Mikrotik, as always, does things its own way and the value mappings for interface status are not 0 = DOWN and 1 and higher = UP.
It uses these value mappings:
1 -> UP
2 -> DOWN
3 -> Testing
4 -> Unknown
5 -> Dormant
6 -> Not present
7 -> lowerLayerDown

This causes all devices to appear as UP even when the interface is down.

Describe the solution/feature you'd like
What I would like to be implemented is an option to map values (per node) to the correct status and color and make the weathermap show the correct status, possibly even the possibility to have more than two different statuses.
Basically something the value mappings option present in other panel plugins:

Add multiple tooltips for links (errors/discard)

Add tooltip for errors/discard, it is possible to do on the same tooltip-graph using the right Y-axis with its scale.

Link bandwidth visualizations.

Hi,

thanks for grafana-network-weathermap, very much appreciated!

One feature we'd love to see in it is improving visibility of the link bandwidth. We have a somewhat heterogenous network with link speeds ranging from 1Gbps to 100Gbps, so obviously the same percentage of link usage can mean very different data streams for us.

I'm thinking of making faster links appear as thicker arrows, and slower ones as thinner. I suppose the scale could be configured globally, ideally showing up as a separate legend item like the current traffic load color map.

If that's too much, even making link arrow width configurable per link would allow tuning these manually for the most important links.

Is this something you'd be willing to consider and/or review PRs for?

Interface Number on the Link

Is your feature request related to a problem? Please describe.
I have been using this plugin in our Grafana for over 6 weeks now, and I like it. Created a few dashboards for the links between our routers, switches and firewalls. Shared it with the team and they have been loving it :-)

Describe the solution/feature you'd like
One feature that would be really helpful is to have the ability to have the link name appear when we hover the mouse over the link.
I think a label on the link could be an option as well (details that one could enter).
Currently we see the usage, throughput, available bandwidth on it. When there are multiple links from a device presented it's difficult to tell which interface is being referred to on the link.

Additional context
Screen shot of a part of the dashboard attached.

Add physical link status option

It would be great if we could show physical link status like with the DOWN red border of a node, but for a link. If the physical link was DOWN the link arrow would show as red border

How about automation / templating

In the first place, thank you for this plugin, I can definitely say that this is a great contribution to Grafana.

When having many different parts of network ( lets say 500 just to have a number ) with different numbers of elements ( raging from 20 to 50 ) its a little tedious to add each Node then setting it up etc... It would be nice to have, to configure one node then when adding the others to have a template option of some sorts ( maybe same for links ....).

Tried to add a new dashboard via JSON ( exported an already created dashboard ) and tried to add new nodes but a wild import error occurred after, I suspect that it has something to do with the id's of the nodes. It would be great if when the value is put to "null" then a new ID would be auto-generated. If this could work, and if the right data is available, all the network dashboards could be auto-generated. Any manual draw topology will change relatively fast and the graphs will not follow the changes fast enough :).

NOTE: If it helps you, I can send you any testing feedback on any features of the plugin

Thank you !

Ability to turn off zoom

This plugin is something I've been looking for, for a long time, and is amazing. Thank you!

I would very much like it if you had a toggle that would turn off the zoom functionality. I don't find it particularly useful, and it's quite annoying when it captures my mouse wheel when scrolling through some weathermaps.

No Name in Query

Hello,

I wanted to test your plugin tonight.
I use https://github.com/sni/grafana-pnp-datasource as data source.
Apparently there is no name there in the DataFrame, which is probably why the query selection only says "No label".

Maybe you can integrate the refId as an alternative name?

Timestamp customization

First of all, thanks for the plugin.

Is your feature request related to a problem? Please describe.
When using the plugin, a timestamp is quite statically rendered in the bottom right of the Grafana Panel.

Describe the solution/feature you'd like
A setting that can disable this timestamp. This is my main request, I am mostly asked by colleagues.
Additionally it'd be nice, but less of an issue, if you could change the way the timestamp is displayed (MM/TT/YYYY vs DD. MM. YYYY)

Thanks

Nils

Shrinking sliders!!!

The sliders shrink very small on newer Grafana versions! To be swiftly fixed!

Link Query only list measurement name in drop down? ( flux query )

I have a flux query:

from(bucket: "snmp") |> range(start: v.timeRangeStart, stop: v.timerangestop) |> filter(fn: (r) => r["_measurement"] == "Cisco") |> aggregatewindow(every: v.windowperiod, fn: last, createEmpty: false)

which work fine for a default timeseries, but when selecting weathermap visualisation, adding two nodes A and B then under links again selecting Node a <> Node B in the query dropdown all i get it multiple Cisco listed so impossible to select the correct link

Do I need to format the flux output somehow i can use the map() function to changes the field names

Thanks

Make threshold color pickers more visible

Hi!

Great plugin! This is missing in zabbix which we use so i was thrilled to se this.

Running Grafana 9.1.3 and plugin 0.3.1

However, i seem to have a bit of a problem as i cant get the colors on links to work.
Not sure if this is grafana issue or plugin..

I cant set the colors. My list of thresholds looks like this.

and the list looks like this

and i cant set the colors..

Is this bug or am i doing something wrong?

Thanks!

Host status

Hi,

Many thanks for this plugin.
I used Network WeatherMap for long, and now migrating the dashboards to Grafana, i was very happy to find the Grafana version

Having the link status is very good, but having the host status directly on the map could be a good improvment.

I use LibreNMS as network monitoring tool, and the API let us know the status of the hosts : 1 = UP / 0 = DOWN.

If we can change the color of the nodes depending on their status, this plugins will be the best one for network admins :-)

Allow multiple links between two nodes with different path

Is your feature request related to a problem? Please describe.
When using multiple link, you could use side anchor point drop down box to avoid overriding links, but as long as you got many links, it won't work.

Describe the solution/feature you'd like
It could be good to implement the VIA network weathermap feature (https://www.network-weathermap.com/manual/0.98/pages/config-reference.html#LINK_VIA).

Additional context
Add any other context or screenshots about the feature request here.

Unable to see new queries in dropdown

Thanks in advance for building this, I've used PHP Weathermap in the past and it's nice to have something in Grafana with an InfluxDB backend.

The bug I'm encountering is additional queries are not showing up in the Links A Side / Z Side Dropdown
Tested in both Chrome and Firefox (and in private browser tabs)

Example Screenshot:
Query A (ESX1-DATA-OUT) shows
Query B (ESX1-DATA-IN) shows
Query C (ESX2-DATA-OUT) doesn't show

Traffic diagram customization and node display enhancements.

My English is not good, but I'm really happy to see this weathermap plugin appear.
But I have some function hope you can help increase

1. the icon for traffic load can be moved？and define the name? and define the 0.x threshold
2. And upload my own background and icon not svg
3. Can the node just show the value not just in link
4. Can the link can turn?
   

Map breaks when a query does not work

Describe the problem
When a router is down and the query fails to retrieve data, the map crashes.
The issue #40 seems to address the same problem.

To Reproduce
To replicate this behavior is as easy as to add a link connected to a "broken" query.

Expected behavior
When a router or a link is unavailable, the map should remain functioning with the links with broken queries painted black.

Screenshots

**VERSIONS! **

• Browser chrome and firefox
• Grafana Version 9.3.1
• Plugin Version 0.3.5
• Influxdb v2

link speed "undefined"

Describe the problem
I have a grafana installation v8.6.5
My data coming from OpenNMS with the Helm Plugin.
In a Graph Daschboard everything works fine.
Now to my Issue.
I create a query like this:

and create a second query like this

I attach the query B to the Link .

After it i get an undefined message in the link.

As described in your FAQ's i saved the dashboard and reloaded the site. I also load the site in a private tab. But that not fixed the issue.

I have an test enviorment where it works fine. the only difference is the node attribute.
here it is
DCN_Router:abcgdl1
on the otherenviorment it is
DCN_Router:1661954035842

That means that the ForignID is different.
But that is the only thing what differs.

Thanks for your help.

Last value 0 being showed as n/a

We have a homebuilt SNMP collector storing the information in a InfluBD and I use queries to get the column with traffic information.

I notice that when I have my last value received being 0, the connection shows as n/a, as the image below shows:

If I check on the table view I have the expected value, being 0 (zero)

• Browser chrome
• Grafana Version v9.4.3
• Plugin Version 0.3.5
• Additional Versions
• • InfluxDB

Node-specific dashboard links, open dashboard links in new tab

As mentioned in title

Link tooltip almost unreadable

Hi @knightss27 ,

Thanks for the very useful plugin. I have set up a weathermap for my network and am facing an issue with the tooltips for the links. As you can see from the attached image, the text/background color combination is making it really hard to read the text. I couldn't find any way to change this setting, am I missing something?

Javascript TypeError: "r.startsWith is not a function"

Hi,
I'm trying this plugin on my own Grafana install. I installed it via CLI, directly unzipping the latest release into the plugins dir and enabling the "allow unsigned" option in the config file.
Now I am able to create an empty weathermap and add some nodes to it, but whenever i click on the dropdown lists "Nodes" or "Links" in the right column I get this error

An unexpected error happened
TypeError: r.startsWith is not a function

and a long list of paths of .js files follows.
This does not happen if the dropdown lists are empty, but as soon as there is an element (usually the default "Test Label") the error occurs and I get stuck until I refresh the page and lose all the changes.

I don't think this is a bug strictly of this plugin, it seems to me that it is something in Grafana that this plugin triggers, but it never happened to me before, so I ask here if someone else noticed this behaviour.

My Grafana is version 8.3.6 and Grafana-Network-Weathermap is version 0.0.9

Thank you

Marco

No clear option for link queries

As stated in title (already exists for Node status queries, but not for regular link queries).

Automatically create charts for links

Hello, while creating the map, I noticed that after hovering the cursor over the link, the link bandwidth graph is displayed. Is there a way to automate it so that I can automatically create a link to the Time Series chart? Currently, with 100 currently monitored ports, it is quite tedious to create as many as 100 charts manually and then configure the links manually.

Somehow these graphs are already created automatically, maybe you just need to share them.

Thank you!

Links Side Query not working

Hello,

After some time Side Query stop working.
I cannot no more select the correct query and only wide option is shown.

Link with 0 bps presenting an old value

Describe the problem
When a link between two routers is down, it should present a black line (0 bps), but it is presenting a value like a query as "Last Not Null value".

To Reproduce
Create a link that has traffic and then shutdown the interface or empty the utilization to have 0 bps in it.

Expected behavior
When the link between two routers is down, it should present a black line (0 bps).

Screenshots

VERSIONS! :

• Browser: chrome, firefox
• Grafana Version 9.3.1
• Plugin Version 0.3.5
• Influxdb v2

Problem with empty data frame

Describe the problem
Hi @knightss27,

I use the Zabbix datasource and I have a problem when the query send an empty data frame.
I have a map with 50 queries and if only one of them is sending an empty data frame, it breaks the entire map and I have the error "a is undefined":

Having a query sending null values is normal and could happen as sometimes I have no value or my host or my interface does not exist in Zabbix yet. But it should not break the entire map.

Usually, when I have no value, the query send nothing (null or empty?). But I am using a specific function (to sum my series) that transform it into a data frame with no result and I think this is what is causing the problem.
Here is the example displaying the data in a table without and with the function I use. The second one fails in a network weathermap panel
OK in network weathermap panel (display 0 on link):

NOK in network weathermap panel (I have the error and cannot see the map in the panel)

To Reproduce
You can reproduce it with the Zabbix datasource as I showed in the screenshot, by putting a host or an interface that does not exists and using the sumseries function

Expected behavior
I expect the Network Weathermap panel not failing and display 0 or n/a if it is an empty data frame

Versions

• Grafana version 9.3.1
• Network Weathermap Plugin version 3.3
• Zabbix plugin version 4.2.10

Link side queries duplicates/merges when using SNMP ifInOctets and ifOutOctets

Describe the problem
Works as expected when working with queries from Netdata metrics that has their own dimension for received and sent. However when using SNMP where there is a different base query (ifInOctets vs ifOutOctets) the query link side suggester only shows the same result for both sides even with 2 queries.

Also I checked in the Explore to confirm both Datasets are not wide.

To Reproduce
Steps to reproduce the behavior (if possible):

1. Add SNMP datasource (e.g Prometheus SNMP exporter)
2. Query the data
3. Add nodes and links
4. Select query for link sides
5. See that it only shows duplicate

Expected behavior
Expected to get the similar approach as when using Netdata metrics.

Screenshots
If applicable, add screenshots to help explain your problem.

Dataset:

Bug:

How it should be:

VERSIONS! (please complete the following information):

• Browser Firefox
• Grafana Version 9.0.0
• Plugin Version 0.2.8
• Additional Versions Prometheus (With Prometheus SNMP exporter)

Additional context
Add any other context about the problem here.

Zabbix datasource gives "wide" as only option for queries

Hello,

All the Query that were previously working have disappeared.

In its place in all it says: WIDE

What can be causing this?

Visulization not listed Grafana 9.1.5 but plugin show installed

Running Docker Grafana 9.1.5 added GF_INSTALL_PLUGINS=knightss27-weathermap-panel, rebuild the container and checked under server admin/plugins and Network Weathermap shows as Installed (0.3.1), go to create new panel and Weathermap does not show under Visulizations?

Thanks

Throughput in percent

Hi,

Awesome work on this plugin. We are using it with Zabbix and it works nicely.

I have one request though.

Is it possible to add the possibility to display the throughput in percentage according the bandwidth ?
Also, to add the possibility to choose between the type of value to display on the link (throughput or throughput in percent or both)

We can see the range by looking at the color, but if we have a large scale (for example red for 80% to 100%), it would be interesting to check quickly by looking at the value in percent (81% is not the same as 99%).

Thanks

Unable to select more than one data query with Zabbix

Your recommendation:
"See the note on: Adding Data."

There is the following note:
"PLEASE NOTE: Queries with the exact same labels will be considered as such. If you have multiple queries and are unable to select the one that you want, double check to make sure it is labeled uniquely."

Please explain to me where can I check the uniqueness of an query.
There are no uniqueness marks on the panel. I only see the following options: duplicate, hide, delete.

File:

Zoom on map

Hi @knightss27,

I encounter some "difficulties" regarding the size of the viewbox, so here is a suggestion of enhancement.

From what I understand, I have to choices to size the map:

• I do not set any viewbox width or height and the map is "frozen" and does not resize while resizing the panel
• I set the size of the viewbox and it will resize while resizing the panel

The first one is great to control the size of the viewbox but is not ideal nor dynamic
The second one is more dynamic but when I build the network weathermap I have to think and make calculation of the map size according my drawing to display it correctly and fix the zoom correctly with the mouse while editing. Sometimes, according the size of the panel, the map is not always on the same place inside the panel (might move from left to center). Also, while being a read_only user, I cannot change the zoom level.

A suggestion would be to have the same configuration as the Geomap panel from Grafana:

• From a dashboard editor point of view, set coordinates, used to center the viewbox inside the panel
• From a dashboard editor point of view, set a Zoom level in the panel configuration
• From a user point of view, give the possiblity to also control the zoom level (with mouse or button displayed on the map) on the panel
• From a user point of view, give the possibility to move the map by drag and drop

That way, if I am just a viewer, I can resize the panel and keep consistent view , but I also can keep the same size but zoom in or out or move the map to see what I need.

What do you think of this ?

Link Tooltop Scaling & Timerange

Describe the problem
The tooltip graph for the link scales to the maximum bandwidth of the link, rather than the maximum bandwidth used over the time period. For links with low utilization, no detail can be ascertained.

Also, the tooltip graph time range is of the time period set in the dashboard (fine) however the data points taken to create the weathermap itself is from the start time. If I want the tooltip graph to show the last 24 hours then the weathermaps themselves show data from yesterday - rather than .

To Reproduce
Steps to reproduce the behavior (if possible):

1. Set time window for last 24 hours
2. Hover over a graph with low utilisation

Expected behavior
The tooltip graph should scale to the max bandwidth observed during the time window selected (as a regular time series graph does).

The weathermap link bandwidth/colour scale should be based on the last value in the time range, rather than the first.

Screenshots

For the last 6 hours to get a tooltip range that has some context, (it's currently 14:48), the weathermap itself is showing data from 08:48 this morning.

VERSIONS! (please complete the following information):

• Browser [e.g. chrome, safari]: Chrome
• Grafana Version [e.g. 8.0.0]: 8.5.3
• Plugin Version [e.g. 0.2.6]: 0.3.5
• Additional Versions (i.e. the datasource you are using with the weathermap):
  grafana-zabbix datasource.

Additional context
Add any other context about the problem here.

Decimals in Color Scale

I have re-worded my comment.

Since the color threshold scale is based on percentages, is it possible to have decimals (i.e.: 0.5%)?
If not, would there be an option to add thresholds based on bits/sec?

Add tooltips for nodes, loss, for example

Please add a tooltip for nodes that displays losses to the node.

Few missing features

First thank you for this plugin

I am missing few features from the original Weathermap

• Popup of the graph in "Dashboard Link" like OVERLIBGRAPH in the original Weathermap
• Link names that appear alongside the link like INCOMMENT/OUTCOMMENT in the original Weathermap

Other then that if you can increase the text box size for the numbers beside the bar based options like "Arrow Width" for example as it show only single digit so above 10 you don't see the number (I am using Chrome)

Clickable link from link.

Good morning!

While writing this feature request, I've noticed how overloaded the term link is!

One feature from the cacti weathermaps that I miss is the ability to hover over a link, and see the bandwidth graph for that link pop up.

I appreciate that this is unlikely to be feasible to implement in that way.

Would it be possible to make it so you click a link, and it takes you to a custom dashboard with the variables used to define that link? This way we could click through to a graph of the link.

Include latency as a metric in the same Weathermap

Is it possible to include an additional metric for each Links (i.e.: latency)?

uploading background or images

Hello,

I have the Weathermap running in a test environment and it works quite well.

One feature request would be the possibility of uploading custom backgrounds (other than solid colors) and also upload images onto the map itself (i.e.: a country flag for instance).

Let me know what you think.

Keep up the great work!