Better monitoring with Visumonit!

At Kalvad we monitor everything, we like to know that our services are up and running, it helps us sleep at night and wake up ready to face yet another day !

Monit

One of the tools we use is called Monit (https://mmonit.com/monit/), it allows us to have a simple overview of our systems. It's doing exactly what it is supposed to do and works great, the only issue we have with it, is the UI:

Visumonit

After some time, we expanded the number of services and customers, so we ended up with multiple tabs in our browsers or monitors at the office (Yes we have an alerting system automatically sending messages on slack, but still, dashboards are essentials). It became a bit harder to scale, so we started rewriting a new UI in our free time and it gave this result:

We called it Visumonit and are currently using it at the office.

• It's purely frontend, so you can deploy it anywhere easily - We added some notes on how to deploy on Netlify
• It's completely open source on Github
• It's simply using the XML feed that monit creates out of the box (no extra backend layer, proxy, etc)

On top of the UI being nicer and TV oriented (we wanted to have this running on some of our monitors at the office), we added a couple of features:

• There is a settings system where you can import or export your preferences
• You can import multiple monit URLs (support authentication)
• You can cycle automatically through each monit result every X seconds (great for TVs/monitors !).

The demo

If you want to have a quick look at it, you can play with our demo like so:

• Visit https://visumonit.10ten.com/
• Click on "Settings" on the top right
• In "URl to fetch..." enter https://visumonit.10ten.com/example/_status?format=xml.
• Press "Add" and close the Settings modal

We are not saving any data anywhere so if you want to enter your own monit feed on our demo website to try it out, don't worry, it's safe. But you might need to setup some CORS as described in the README.

A basic CORS configuration would be on NGiNX would be:

            add_header          'Access-Control-Allow-Origin' '*' always;
            add_header          'Access-Control-Allow-Credentials' 'true' always;
            add_header          'Access-Control-Allow-Methods' 'GET' always;
	    add_header          'Access-Control-Allow-Headers' 'access_token' always;

Contributing

This project has been developed using JavaScript, HTML 5 and SCSS and is always being improved in terms of UI/UX and features. Feel free to contribute to the project on Github by creating a pull request or reporting issues/enhancements through the Issues system, we will gladly review it !

If you need help with the monitoring system of your company, yalla, get in touch with us !