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
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
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
ProxyPassMatch exception so that Apache would know were to find the new
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 ;-)