How to BYO Status Page with our Node-RED Integration

In the second part of this blog series on using our integration with Node-RED, we will demonstrate how to build your own status page that can be used for public or internal purposes. A status page is a great and simple way to display the current status of key web platforms, APIs, etc. This exercise will exclusively use the Catchpoint REST API to pull data in order to populate a status page.

Tech how-tos are similar in many ways to following a recipe; it’s a step-by-step process that, if you follow the instructions properly, will give you the results you’re looking for. So, put your geek apron on and go get the following ingredients:

• 4oz large spoonful of Catchpoint REST API
• 2oz Node-RED
• 1oz Boostrap

In true recipe fashion, this is what the finished product will look like:

As we are using the REST API, we will need to authenticate and retrieve a token. The token only lives for 30 minutes so we will also need to refresh the token periodically. The Node-RED flow will need to:

• Refresh every 30 minutes
• Pass down a key and secret and configure headers as required by the REST API
• Send POST request to get token
• Retrieve token, base64 encode it, and set a global variable (helpful for other nodes that might use the REST API)

The next step is to create a ‘Favorite Chart’ in the Catchpoint Portal. This will contain the tests and metric(s) you wish to show on your status page. Creating a ‘Favorite Chart’ is also a very easy way to fetch data for multiple tests in a single REST API call. Once you have created the chart, you will need to take note of the chart ID. This can be done using the URL below:

https://portal.catchpoint.com/ui/Content/Charts/Performance.aspx?fav=118785

In Node-RED, we can now build out the status page itself. This all begins with a GET endpoint, to which we will pass down an authorization header including the base64 encoded token stored in the global variable.

Now, the REST API call for a favorite chart can be made using the chart ID e.g.

Next, parse the response ready for insertion into the HTML template and finally respond with a 200 response.

The following code for parsing the REST API response is just an example and not production ready. If you have any suggestions for improvement, please feel free to get in touch with your comments at Blog@catchpoint.com.

The HTML template I used was a basic Bootstrap template using a table to display the data; Node-RED uses Mustache for templating. The following snippet from the HTML template shows the insertion of the parsed data into a table setting colors for the buttons according to the metric value.

In my next blog post, I will show you how to use the Catchpoint Test Data Webhook and Node-RED to build out a Grafana dashboard.