Theming Monit

Monit is a great open-source process supervision tool that has extensive functionality like manual or automatic maintenance and repair. It's also surprisingly lightweight, needing about 10MB of RAM and 25MB of disk space.

That being said, the vanilla web interface can look quite outdated for today's standards and it's not easily configurable, requiring source code modification or some way of manipulating the page before sending it (we'll be trying both of these methods).

I went ahead and made a light and dark theme using the second method. The files used for the themes are linked at the end.

Original

Light

Dark

Theming by recompiling

In case you installed Monit by source, the quickest and most inflexible way of changing the theme would be by modifying the source code and then recompiling.

To do that, just edit the src/http/cervlet.c file, change the style and then type:

./bootstrap
./configure
make
make install

Sadly, this is inconvenient, especially if you installed it with your package manager or in case you want to tweak the style.

Theming by string substitution

A more flexible way of theming Monit would be substituting specific strings in the response body. In case you are using Nginx, this can be achieved with nginx_substitutions_filter, a filter module that does just that.

First, check if you have the module available

nginx -V

This will spill out your configuration options. If you have it installed you'll se something like --add-dynamic-module=/build/nginx-Cjs4TR/nginx-1.14.2/debian/modules/http-subs-filter, otherwise install it. For Debian and Ubuntu you can use:

apt install libnginx-mod-http-subs-filter

Monit has a single inline style block that we want to replace. To substitute the style block, you use the subs_filter directive in your server/location block like so:

subs_filter '<style type="text/css">.*</style>' '<style> your-new-css-here </style>' r;

This is going to match the pattern in the first argument and replace it with the string from the second. The flag at the end is to treat the pattern as a regular expression. The new style block can be very lengthy, so you may want to put all this in a file and then use the include directive.

In your config file you should have something like this:

location /monit/ {
    rewrite ^/monit/(.*) /$1 break;
    proxy_ignore_client_abort on;
    proxy_pass   http://127.0.0.1:2812;
    proxy_set_header Host $host;

    proxy_set_header Accept-Encoding "";
    include /var/www/monit/css.conf;

    auth_basic "Restricted";
    auth_basic_user_file /etc/nginx/.htpasswd;
    error_log    /var/log/nginx/auth.error.log;
}

Note the proxy_set_header Accept-Encoding ""; line, it's important!

Now everything is set and monitoring should look a lot better.

Dark theme

Light theme