HCFPN Dashboard
When I first started working with 5f03 LLC I was tasked with creating a dashboard that would better visualize device status data and metrics collected by backend services like nagios for the Public-sector clients we served. Not only did I create user experience better than the default one Nagios provided, but it also provided much clearer insight into the health of the our client's networks. This allowed our clients, and 5f03 to reduce the time it took to respond to potential problems by six hours.
Dashboard Design/Development
The first version of the dashboard was developed using both frontend and backend technologies such as:
However, Version 2.0 (the current version) uses a more refined and minimalistic design. As the introduction of JSON apis implemented into Nagios has made it possible to create a dashboard that is frontend centric. Completely cutting out the backend layer (and python along with) needed for this service to run smootly. The technolgies include newer versions of React and NextJS. However, new ones have been introduced include:
- TailwindCSS (in favor of UIKit and SCSS)
- Tanstack-Query (in favor of Socket.IO)
- Zustand (global state management)
- and Zitadel (in favor of Keycloak)
The changes in tech listed above have not only simplified the codebase for this project, but also allowed me to give the dashboard a much needed facelift, a more minimalistic user experience, and enhanced security for end users.
While the web app for the dashboard looks great on desktop browsers, to looks just as good on mobile! The whole was originally designed to mobile-first, and responsive from the ground up. The newer version of the provides a more polished user experience.
The web service itself runs on a metro area network that is capable of scaling to any size through a multi-tenancy model. All which is also built on top of different TCP/IP services, and routing protocols such as OSPF.