Accepted Answer

Votes:

9

PRTG and Grafana - Creating A Scalable Dashboard

Attention

Unfortunately, the development of the plugin has ceased to continue, please consider this guide outdated as it simply might not be compatible with new PRTG or Grafana versions. The last commit was made a year ago, so you might run into inconsistencies.

Update 01/2020
Seemingly, the author of the update started to work on it again to fix most quirks. From some testing, I can say that it actually works again now :) Please make sure that you follow the instructions on the Github page and that the time and date format of the user account [within PRTG] is configured as
MM/DD/YYYY HH:MM:SS (AM/PM), otherwise it may not work properly.

Introduction

With large displays becoming more affordable, dashboards in IT departments are using higher resolutions and are placed in prominent places within the office or building. This leads to some issues with the current implementation of Maps in PRTG. The map objects are modifiable to a certain extent, but their modification is somewhat tedious and may lead to unforeseen results in other areas of PRTG.

Within Tech Support, we have gone through various iterations of the dashboard within our office. We started with Maps in PRTG, which at some point were hard to read from a distance. We came up with a custom CodeIgniter application that was readable, but hard to maintain or extend. Adding a new sensor to the overview or a new clock item took quite some time. It worked, but other departments wanted the new dashboard as well, with different metrics and features, of course.

At this point, the application would no longer scale properly. So we tested a few applications and ended up sticking with Grafana due to its extendability, ease of use, and administration.

For our Tech Support Dashboard, we also use MySQL to retrieve current traffic information, public transport information, and motivational quotes from our customers. The dashboard also shows several clocks for scheduling remote sessions, counters for internal metrics, late shift coverage, and system availability.

Dashboard Example

Another example is our meeting room dashboard that shows if a meeting room is occupied and if there are any upcoming appointments.

This is just the tip of the iceberg. There's much more that you can do with Grafana because it's not limited to retrieving values from PRTG.

Grafana Installation

Grafana is available as a Windows binary, so this is probably the easiest way to install. Of course, there are also other ways of installing it, including Docker. It's explained thoroughly there, so we won't cover the process in this article in further detail.

PRTG Plugin Installation And Configuration

Install the Latest Version of the Plugin

Before you start Grafana for the first time, navigate to <Grafana Installation Directory>/bin and execute the following command to install the plugin that will allow communication with PRTG: grafana-cli plugins install jasonlashua-prtg-datasource If the installation was successful, the output should look like this:

installing jasonlashua-prtg-datasource @ 4.0.3
from url: https://grafana.com/api/plugins/jasonlashua-prtg-datasource/versions/4.0.3/download
into: ../data/plugins

[32m✔[0m Installed jasonlashua-prtg-datasource successfully

Restart grafana after installing plugins . <service grafana-server restart>

After restarting Grafana, the data source should be available.

Adding Your PRTG Server as a Data Source

Start Grafana and navigate to Data Sources and click +Add data source. Configure as follows:

Click Save & Test and you should see something like this:

Successful PRTG connection

Restart the Grafana service. Otherwise, reading from PRTG may not work.

Congratulations, Grafana is now configured to read values from PRTG!

Note: There are several other settings to configure within Grafana (different users, TLS, ports, etc.) that are not covered by this article. Please refer to Grafana's documentation for further configuration information.

Creating Your First Dashboard

Navigate to Dashboards and click +New. You have several options for displaying the values. For now, only Graph, Singlestat, and Table, since these are compatible with the PRTG plugin. Dashboards use a row/column-based layout that allows you to easily move objects and add new rows.

Singlestat Panel

This panel shows you a sensor's value or message. Let's say you want to display a certain value of a channel and make it turn red, yellow, or green when certain thresholds are exceeded. Simply create a new Singlestat panel and configure it as follows:

Singlestat General Tab Click here for original image

Singlestat Metrics Tab Click here for original image

Now, you can enter something in Group, Host, Sensor, or Channel, or use the dropdown menus to see a list of available items in the corresponding category, similar to this example:

Singlestat Metrics Dropdowns

This will allow you to filter for the correct object. Now click the Options tab.

Singlestat Options Tab Click here for original image

Under Coloring, configure the Thresholds accordingly to match the sensor limits. You can also make other settings, for example, change the font sizes.

Graphs

Graph Example

In terms of layout, graphs in Grafana are similar to graphs in PRTG. The settings are basically the same as for the Singlestat object. There are more options for configuring the graph, for example, axes and legend. You can also add multiple sensors to the graph, just like in the Sensor Factory Sensor. Simply click the Add Query button to add additional sensor channels.

You can also modify the time range covered by the graph. You can also zoom in on areas, simply by selecting the area. See Grafana's Graph Panel Documentation for more information.

Table Panel

Table Example

If you have used PRTG Maps, you're probably familiar with these kinds of tables. You can also set them up in Grafana via the Table panel. Configure the Metrics tab as follows:

URI	table.json
Query String	content=sensors&columns=device,sensor,status,message,downtimesince&filter_status=4&filter_status=5

This will display the sensors that are currently in a Warning or Down status. Configure the Options tab as follows:

Table Options Tab Click here for original image

Table Column Styles Tab Click here for original image

The other columns can be styles as well. This is useful if you need custom headers. The rows will be colored according to their state now.

FAQ

Question	Why do the values shown in Grafana not match with PRTG?
Answer	Check the timing in the top right. Set the quick range to Last 5 Minutes. Make sure that the Value Stat is set to Current, as it defaults to Average

Question	Can I have map rotation just like in PRTG?
Answer	Please check Grafana's Playlist feature: http://docs.grafana.org/reference/playlist/

Question	Can the threshold colors be modified?
Answer	Yes, but they have to be changed for each panel. Click the panel and then the "burger" menu. Click Panel JSON to modify the source of the panel. Search for the colors and replace them with "rgba(180, 204, 56, 0.99)", "rgba(255, 203, 5, 0.99)", "rgba(215, 25, 32, 0.99)"

Question	How does the weekday indicator work? I can't find anything like it...
Answer	It uses an invisible text panel with the mode set to HTML with the JavaScript code at the bottom of the page. It will set the weekday text of today (see Examples) to green

Question	Is there a Kiosk mode in Grafana so that the menu is hidden?
Answer	Sure, simply add &kiosk to the URL of your dashboard. It will hide all control elements.

Question	Can the refresh rate be changed via the URL?
Answer	You can control this by changing &refresh=1m within the URL. Simply change the number to what you prefer.

This FAQ will be extended as more questions come in.

Notes

Thanks to Jason Lashua for this awesome plugin!
If you have any issues with the plugin or Grafana, please check out the corresponding Git repositories.

Examples

Weekday Code

<h3 id='weekdayThursday' style='font-weight:bold; text-align:center'>Thursday</h3>

JavaScript Code for Weekday Highlighting

<script type='text/javascript'>
function refresh() {
 // weekday highlightning
switch((new Date).getDay()){case 0:day="weekdaySunday";break;case 1:day="weekdayMonday";break;case 2:day="weekdayTuesday";break;case 3:day="weekdayWednesday";break;case 4:day="weekdayThursday";break;case 5:day="weekdayFriday";break;case 6:day="weekdaySaturday"}document.getElementById(day).style.color="#b4cc38";
}
</script°

What is this?

Top Tags

Are there alternatives to maps?

2

9