How to Create an Automated Custom Web Site that Displays API Performance Data

For your company to succeed, your API-based product must provide maximal performance and uptime to your customers. In order to provide this, you need to monitor the APIs (both internal and external) that are critical for your product’s customer experience.

This series of posts illustrates how you can create a custom automated web site that constantly provides the latest information about API performance for an individual API that’s critical for your product. The first post described How to Use cron and curl to Regularly Download API Performance Data. The second post described How to Use Python to Extract JSON API Performance Data. The third post described How to Use MatPlotLib to Display API Performance Data.

In this post, I describe how to bring all of this together in order to create a constantly-updated web page that your entire team, including management, can observe at any moment to review the recent performance of an API.

Creating a Constantly-Updated Web Page

The first post describes how to create a timed job that is executed at a selectable cadence (perhaps every hour, minute, or even second) to download API performance data in JSON format. The second post presents a Python program that reads the JSON into a Python dictionary. The third post uses the Python MatPlotLib library to read the data from the Python dictionary and produce a plot like this:

This plot shows the total milliseconds between the monitor’s request sent to the API and the receipt of the response (Y axis) over the past week by hour (X axis). The selected Y scale in the example is logarithmic (this can be edited in MatPlotLib). On this plot, response times above 100 milliseconds are easily identified. That might be a critical performance limit for your application with respect to your customers’ expectations. MatPlotLib provides immense flexibility for you to create plots that will identify critical response issues for your own product.

The image above is a PNG file. To make a constantly-updated web page, we need to write HTML that embeds the PNG image and updates automatically as new API performance becomes available and new PNG images are generated. Here is an example of HTML that accomplishes this:

The body section displays the latest image that was produced by MatPlotLib. The head section defines the title that is displayed on the web browser window.

But the head section also includes the meta http-equiv line. This tells the user’s browser to refresh the page every 60 seconds. That is, the user’s local web browser will automatically reload the page content every minute. So, whenever a new API performance PNG image becomes available as a result of the batch processing that is producing the images, the web page will be automatically updated with no user interaction required.

Conclusion

This technique provides the capability for displaying critical API status views that can be observed at any time by any member of your company in an automated manner. The same technique could be replicated for any number of your critical APIs. The results could easily be agglomerated into a single summary web page suitable for managers.

Meanwhile, the status page could be created such that the developer team could easily click to review the lower-level details of recent anomalous performance in a particular API.

–Kevin Farnham