Overview
This Guide covers how you can support your website performance-monitoring strategy by building a custom dashboard using Grafana's popular open data-visualization platform, Grafana.
Pre-requisites
Node-RED will be used as the endpoint for the Test Data Webhook, and will parse and inject the payload into InfluxDB, which Grafana will then query to build the dashboard. Grafana supports a number of other data sources in addition to InfluxDB.
The Node-RED portion of this implementation is simple, and to make things even easier, you can grab a skeleton flow directly from GitHub and import this into Node-RED.
How to do it
Install the InfluxDB node in Node-RED. This is done by going to ‘manage palette,’ selecting the install tab, and searching for InfluxDB.
The imported flow creates an endpoint and an extract, transform, and load function into InfluxDB.
This will need to be updated to reflect your InfluxDB configuration. The node defaults to http://127.0.0.1:8086 and a database name of ‘Catchpoint.’
It is necessary that your Node-RED instance is a public endpoint so the Test Data Webhook can POST data.
InfluxDB and Grafana do not need to be publicly exposed.
A fresh installation of InfluxDB doesn’t have any databases, so you will need to create one. You’ll also need to connect to the InfluxDB instance and create a database:
You can now configure the Test Data Webhook to point to your new endpoint running in Node-RED, and the database will start to populate. The ETL flow in Node-RED will inject data into three new measurements, test_counter, test_byte, and test_timing.
The ETL function can easily be edited to suit your needs by including additional metrics beyond the ones already defined.
Log in into Grafana, and from the main menu, select Data Sources. Add a new data source and complete the details for your instance.
An example JSON schema for a dashboard is available on GitHub. Copy this to your clipboard. From the Dashboards menu, select the sub-menu item Import.’ Paste the contents of your clipboard into the Or paste JSON text area and click Load.
The dashboard will default to the name "Catchpoint", so just click Import to continue.
If you have data in InfluxDB, you will see the dashboard display data. The screenshot below is the example dashboard showing last seven days of data for a given test for all nodes.
If all is working well, you can do a direct comparison with data views from within the Catchpoint portal.
