Status Traffic Lights

As part of my role as a Systems Engineer with Safe Hosts Internet LLP, I was tasked with creating a central dashboard to act as a one-glance page to get a complete overview of the core statistics required to ensure smooth operations of the data centre facility. The specification for this project was to create a “traffic light” page which all staff members can view to see if there is anything which requires immediate or upcoming action.

For this system I chose to use a Laravel back-end due to my thorough understanding of how it works, and also I felt that it would be the best fit for the requirements. For the front-end I opted for Tailwind CSS, due to its flexibility with allowing you to use utilities to build pages, and also because it had a built in dark-mode functionality. This traffic light system would be used for both day and night shift worker so allowing users to select a dark mode was a necessity. For manipulating the DOM I chose to use jQuery as it's a library that I'm very familiar with and the requirements for the system was to have it in production as soon as possible. The Laravel back-end provided core functionalities such as user authentication and would allow me to build up the API for the front-end to talk to, for this I chose to use Laravel Sanctum.

The system itself was built to talk to a number of core internal systems, all communicating via their respective API. Any changes to any system would then be updated and displayed live on the traffic light status page, changing from green to amber or red depending on the sitatution. I had originally planned to make use of jQuery for the bulk of the DOM manipulation, however I decided to switch away from jQuery AJAX to Axios due to a number of limitations I found with jQuery AJAX and the way in which you had to include some additional setup for every AJAX call. Switching to Axios did away with all of these limitations which came with jQuery and as it's supported out of the box with Laravel, integration was extremely simple.

Behind the scenes the system would live test core network devices, checking the ping response between various routers, switches and network peers. This made use of a very simple ICMP ping and could very quickly highlight potential issues on the network much faster than other monitoring platforms which were in use. I also made use of PHP's SNMP module to live call, store and display temperature readings from various locations around the data centre facility. This could allow site staff to action temperatures where required if a particular location got too hot or cold.