In my latest post, I’ve stated that one day I’d like to provide some kind of UI for the users, that would visualize what’s going on in their system that is being monitored by the Warden.
As you may have noticed, this special day has come quite fast.
In this post, I’ll present the first prototype of the web interface design (that took me just a couple of minutes to complete).
Let’s start with the screenshot (that’s all I have for now).
Warden Web Panel UI prototype
In this picture you can see (apparently, my English lessons didn’t go to waste) a dashboard that contains the most useful information about the current state of the monitored resources.
The charts (built with ChartJS) are being dynamically updated in a real time (for now it’s a very simple long-polling, but eventually I’ll use the SignalR). The main chart on top displays the current iteration status, where X axis is date & time and Y axis is the total number of active watchers.
You can see that there are 7 watchers that have been configured in my operating system, so when the graph is at its peak, it means that everything works just fine. On the other hand, when it’s less than 7, it means that some resource has just become unavailable.
The chart below (right corner) displays the current status of the available watchers in the latest iteration. Of course, shade of red means that there’s an issue. By clicking on the watcher label you can read its details that will be shown in the panel to the left.
I’m currently using the following technology stack for this project:
For now, I’m focusing on making this prototype work – I’ve already written some simplistic JavaScript code that needs to be cleaned up and reorganized.
And what about the next goals? I can think of at least a few:
- Secured access to the website (authentication for users and API key for monitoring application).
- Possibility to switch between many instances of the separate Wardens.
- More widgets, filters etc.
- “Dockerize“.
You may wonder how this UI works with the Warden which is merely a standalone library, not even an application? In order to achieve that, I’ve created a new type of integration for the HTTP API communication, that can be used by any API. It’s just an additional line of code while configuring the Warden that makes all the difference. The web interface can be completely separate from the core monitoring application. All you have to do to get it to work is:
- Configure the Warden by including the HTTP API integration with valid URL and run as simple Console Application or Windows Service.
- Start the web panel that shall receive POST requests from the Warden monitoring application.
I hope that you will find this project to be an a useful extension for your daily monitoring tasks. Just try to think of a very basic version of the service such as NewRelic or AppDynamics that you could run on your own.