Web Performance is a Journey, Not a Destination

Mehdi Daoudi

Subscribe to Mehdi Daoudi: eMailAlertsEmail Alerts
Get Mehdi Daoudi via: homepageHomepage mobileMobile rssRSS facebookFacebook twitterTwitter linkedinLinkedIn

Blog Feed Post

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:

http://blog.catchpoint.com/wp-content/uploads/2018/01/NR1-300x170.jpg 300w, http://blog.catchpoint.com/wp-content/uploads/2018/01/NR1-768x435.jpg 768w" sizes="(max-width: 640px) 100vw, 640px" />


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)

http://blog.catchpoint.com/wp-content/uploads/2018/01/NR2-300x22.jpg 300w, http://blog.catchpoint.com/wp-content/uploads/2018/01/NR2-768x57.jpg 768w" sizes="(max-width: 640px) 100vw, 640px" />

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:


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.

http://blog.catchpoint.com/wp-content/uploads/2018/01/NR3-300x16.jpg 300w, http://blog.catchpoint.com/wp-content/uploads/2018/01/NR3-768x41.jpg 768w" sizes="(max-width: 640px) 100vw, 640px" />


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

http://blog.catchpoint.com/wp-content/uploads/2018/01/NR4-300x170.jpg 300w, http://blog.catchpoint.com/wp-content/uploads/2018/01/NR4-768x435.jpg 768w, http://blog.catchpoint.com/wp-content/uploads/2018/01/NR4.jpg 1532w" sizes="(max-width: 640px) 100vw, 640px" />

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.

http://blog.catchpoint.com/wp-content/uploads/2018/01/NR5-300x217.jpg 300w, http://blog.catchpoint.com/wp-content/uploads/2018/01/NR5-768x556.jpg 768w, http://blog.catchpoint.com/wp-content/uploads/2018/01/NR5.jpg 1520w" sizes="(max-width: 640px) 100vw, 640px" />

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.

http://blog.catchpoint.com/wp-content/uploads/2018/01/NR6-300x110.jpg 300w, http://blog.catchpoint.com/wp-content/uploads/2018/01/NR6-768x281.jpg 768w" sizes="(max-width: 640px) 100vw, 640px" />

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.

The post How to BYO Status Page with our Node-RED Integration appeared first on Catchpoint's Blog - Web Performance Monitoring.

Read the original blog entry...

More Stories By Mehdi Daoudi

Catchpoint radically transforms the way businesses manage, monitor, and test the performance of online applications. Truly understand and improve user experience with clear visibility into complex, distributed online systems.

Founded in 2008 by four DoubleClick / Google executives with a passion for speed, reliability and overall better online experiences, Catchpoint has now become the most innovative provider of web performance testing and monitoring solutions. We are a team with expertise in designing, building, operating, scaling and monitoring highly transactional Internet services used by thousands of companies and impacting the experience of millions of users. Catchpoint is funded by top-tier venture capital firm, Battery Ventures, which has invested in category leaders such as Akamai, Omniture (Adobe Systems), Optimizely, Tealium, BazaarVoice, Marketo and many more.