This article explains how to configure the Node-red nodes to display the Catchpoint’s test data on the Node-red world map.
We suggest first reading the guide to install node-red on your system.
The setup consists of three main steps.
- Generate the Rest API token and convert it to base64.
- Pull the nodes’ information.
- Set up an endpoint to which the Catchpoint data will be pushed. Map the test data to the node’s information and send it to the world map.
Generate the Rest API token and convert it to base64
The configuration of each node is as shown below
REST API
Credentials
(Make sure that you specify your own Key and Secret)
Headers
Body
Token
Base64
Pull the nodes’ information
Timestamp
Bearer
Nodes
Parse Response
This function node consists the JS code given below to parse the nodes’ JSON, extract the node’s name, latitude, and longitude and then store it as a global variable to use it on the next step
var map = []; for (j = 0; j < msg.payload.items.length; j++) { if (msg.payload.items[j].coordinates) { map.push({ 'name' : msg.payload.items[j].name, 'lat' : msg.payload.items[j].coordinates.latitude, 'lon' : msg.payload.items[j].coordinates.longitude }) } } msg.payload = map; global.set("map", map); delete msg.payload.items; return msg;
Set up Endpoint
The last step is to set up an endpoint to which the Catchpoint data will be pushed, map the test data to the node’s information and send it to the world map.
By default Node-RED is accessible via port 1880. If you are testing it locally, you’d need a way to generate a valid endpoint to specify in the Catchpoint’s portal since specifying localhost:1880, Catchpoint won’t know to which system the data has to be pushed.
We can make use of tools like ngrok to achieve ithis.
Endpoint
Go to the Catchpoint portal and specify the generated endpoint as shown below.
Json Parse
The purpose of the function node is to extract the relevant/required information form the test data and map it with the node’s information generated on the previous step and then push it to the world map.
Here is a sample code:
var map= global.get('map'); var details; for(var i=0;i<map.length;i++) { if(msg.payload.NodeName==map[i].name) { details={ 'Test Name': msg.payload.TestDetail.Name, 'name': msg.payload.NodeName, 'lat': map[i].lat, 'lon': map[i].lon, 'Response': msg.payload.Summary.Timing.Total, 'DNS':msg.payload.Summary.Timing.Dns, 'icon': 'fa-map-marker' }; } } msg.payload=details; return msg;
On successful deployment, you will see the data as shown below.
By default, ctrl-shift-m will load the map in a new tab.
The above configuration can also be imported via clipboard using the attached JSON.
- Go to Import > Clipboard.
- Paste the JSON.
