Theming Monit with Apache ProxyPass

    

And suddenly, I felt like Monit Web interface was using too many pastel colors… Looking at the manpage, the HTML source and the source code, it was clear that it couldn’t be themed without a source modification and compilation ; and that’s not fun. But what’s fun is to rewrite the CSS on the fly so that stock-Monit just looks much better, to my eyes.

My Monit runs on localhost and is published by an Apache ProxyPass directive ; which supports live substitution. This is what I needed to replace the CSS.

Configure Apache for substitution

The apache-httpd-2.4.35 package from OpenBSD 6.4 ships with a module named substitute_module which

provides a mechanism to perform both regular expression and fixed string substitutions on response bodies.

Monit Web interface is composed of a single inline CSS block. The idea is to search for the <style type="text/css">...</style> definition and replace it with another one. In my case, I decided to reference an external CSS file that would be hosted in my DocumentRoot.

Apache publishes Monit using ProxyPass directives. For various reasons, I want the new CSS file to appears as if it came from the Monit path. So I had to add a ProxyPassMatch exception so that Apache would know were to find the new CSS file.

The relevant httpd.conf bits are:

(...)
LoadModule substitute_module /usr/local/lib/apache2/mod_substitute.so
(...)
Alias "/monit/monit.css" "/htdocs/monit.css"
ProxyPassMatch "^/monit/monit.css$" !
ProxyPass "/monit/" http://127.0.0.1:2812/
(...)
<Location "/monit/">
(...)
  <IfModule substitute_module>
    RequestHeader unset Accept-Encoding

    AddOutputFilterByType SUBSTITUTE text/html
    Substitute 's|<style type="text/css">.*</style>|    \
      <style type="text/css">@import "/monit/monit.css"</style>|'
  </IfModule>
</Location>
(...)

After an Apache reload, the old CSS code disappears in favor of my modification.

Theme Monit using CSS

Before modifying Apache, I grabbed the CSS definition from the generate Monit HTML page. Then I used it as a base to modify colors, fonts and spaces.

The original Monit looks like this:

The Arc Theme inspired Monit looks like this:

In case you want to apply it in 10 sec, here’s Monit Arc Theme - CSS ;-)