Network Weathermap Panel Plugin

Hi everyone,

A while back I noticed that there are very few “modern” implementations of a network weathermap. The most well known, and original, network weathermap is written using PHP and is not easily integrated into any other pieces of software (especially when it comes to feeding in data). After working on a D3.js based network weathermap, I realized that integrating it into Grafana would make it much easier to connect with existing data, and likely put the visualization in the most useful place (i.e. on an existing metrics dashboard, and not a whole separate site!).

With this in mind, I built a network weathermap panel plugin for Grafana (see the example image below)! The visualization itself is built of entirely SVG components, controlled by my own logic (after I got annoyed trying to get D3 to work for me). This means that on top of doing the basic job of taking in bandwidth data and displaying it, you can also customize it in many different ways. I thought I would share it here to get some feedback and also spread the word.

I am currently waiting for the plugin to be processed by Grafana so it can be signed as a community plugin, but until then feel free to try it out by downloading it from the Github releases here. You can also just play around with it by cloning and building the docker-compose image here which will launch a new Grafana instance where there is a Prometheus data source feeding bandwidth data into an existing layout. I have also been working on making sure it is easy to set up, so feel free to read the getting started guide on the wiki.

The plugin is built to work on Grafana 8.0+, though my testing has not been particularly extensive. Please let me know if you find any bugs, preferably by creating an issue on the Github, but it’d be great if you respond here too! I’m also happy to help answer any questions about setting the plugin up.

Cheers!
Seth

Plugin Github:

Another example:

2 Likes