Server Status Page

May 2020

Context

I developed a status page that was a monitoring solution for complex services. It was built with a Bootstrap CSS frontend and SVG graphics, and used Flask and Jinja templates to generate the content. The system was designed to regularly ping the services being monitored and measure their response time. This data was then stored on a temporary database and used to create visualizations and provide an overview of the status of each service on the page.

Realisation

The first step was to decide on the tools and technologies to use. After giving a spin in Python Flask, I began working on the backend code to fetch data from each of the services and calculate the response times.

Jinja templates

In my status page project, I used Jinja templates to generate the HTML content of the page dynamically based on the data fetched from the pinged services. The Jinja templates contain placeholders for the dynamic content, which are replaced with the actual values at runtime.

Jinja templates where saved as separate files in the project directory and contain the HTML code with placeholders for the dynamic content. When the Flask application receives a request for the status page, it uses the appropriate Jinja template to generate the HTML content for the page by using the uptime metrics.

That way, every requests to the page would provide an up to date metrics data. The issue was that people staying on the page won’t receive updates…

API Polling

To provide users with up-to-date information while they were staying on the status page for a long time, I implemented a solution using jQuery AJAX and a REST endpoint with Flask. The idea was to use polling to fetch new data from the backend every 5 minutes and then update the page dynamically using JavaScript without requiring the user to refresh the page.

I first created a Flask REST route that would return the latest data from the backend as a JSON object. Then, I used jQuery’s $.ajax() method to periodically poll the REST endpoint for new data. When new data was returned from the server, I parsed the JSON response and updated the page with the new information.

This approach had several advantages :

• It reduced the server load by only fetching new data when necessary.
• It provided users with the most up-to-date information without requiring them to refresh the page manually.
• It created a more seamless user experience overall, making the status page more engaging and easier to use.

Frontend design

Next, I worked on the frontend design, creating the visualizations and implementing the Bootstrap and SVG components.

Bootstrap is an extremely powerful front-end framework that helped me build a responsive webpage quickly and efficiently. With a wealth of pre-built components, such as grids, typography, forms, and icons, I was able to easily structure and style my page without having to worry about the nitty-gritty details of CSS and HTML. Bootstrap also comes with a host of built-in classes for handling responsiveness, which allowed my webpage to look great on any device, whether it be a desktop, ore tablet.

By using a CSS framework with built-in components like Bootstrap, I was able to focus more on crafting a great user experience, rather than getting bogged down in the technical details of website design.

Conclusion

The status page is a powerful tool that made monitoring complex services much easier. It allowed users to see the status of all monitored services in a single place, and the visualizations made it easy to quickly identify any issues.

Additionally, the ability to publish updates to a webhook and compute uptime made the system even more valuable for ensuring the reliability of the monitored services. I subscribed it to my instant messenger and got realtime information about downtimes and high response time from servers, saving me time and helping being more reactive.