Raven: My Custom Theme (Templates) for Munin

Posted by jeremyclarke on February 19, 2011 · design · General

This post is about Munin and the custom theme I built for it, Raven.

Click here to skip to the download and installation instructions if you just want the theme »

Click here if “Load average” means nothing to you.

What is Munin and why am I bothering with it?

Munin is a program you install on servers to track their resource usage and application performance on a minute-by-minute basis and present you with graphs giving tons of detail about it’s status over time (each report can be viewed for daily, weekly, etc.) It has lots of core and community-built plugins to track different server applications and different aspects of a server’s health.

The basic idea is that you install a ‘node’ on each server you want to keep track of, then one ‘master’ that queries the nodes and generates the graphs for you. I’ve had it recommended to me by pro sysadmins a few times in the past but was intimidated by the complexity of installation and the inscrutability of the resulting graphs, which depend on you having pre-existing knowledge of the command-line tools who’s output they aggregate. Oh, my iostat is up… um… what do I do about that?

The best guide to understanding and installing Munin I found was this great set of articles on the Slicehost blog. They are intended for Slicehost customers, but seem to apply pretty well to anyone using the Linux distrubutions they cover.

The problem with Munin and it’s Theme ecosystem

So I got it running and am trying to figure out how to read the information it presents but there’s a problem: It’s woefully, sinfully and abysmally ugly. The web pages output by munin are not just composed on 90’s style tables, they are ugly tables, with tiny text and wasteful spacing.

It seems the sysadmin crowd just doesn’t care about these things, because even though there is a really easy system for modifying and restyling the underlying HTML and CSS there is only one alternate template available on the whole internet! You can find it here in the Munin docs but it is almost as ugly as the default and the way you install it is completely counterintuitive and under-explained. On the bright side it has some really useful javascript features that the default doesn’t, if you can get it to work that is.

FWIW I don’t even know how to refer to this. The files themselves are called ‘templates’ in various places on the Munin site, but IMHO the package as a whole should be called a “theme”, at least that’s how we do things in WordPress land. I tried to use both in this post so people find this post, but I’ll call it ‘theme’ from now on.

My Munin Theme: Raven

Screenshot of Raven theme

Screenshot of Raven. Click to enlarge. Compare with screenshot of alt-default theme.

My answer to this problem is a new theme based on the javascript-enabled alternative from the Munin site. I call it Raven because Munin is named after a Raven ally of Odin, Norse king of the gods. Essentially it’s just the default theme with 80% of the ugly removed and a grey and white facelift. There is still a lot of work that could be done to actually fix all the ugly-ass HTML, but I want to see if this gains any traction before putting in the time.

Features of Raven compared to the default theme:

  • Javascript-enabled so the various sections of the ‘overview’ page are in tabs at the top instead of one never-ending page. (this is the most important usability improvement)
  • Larger text all over to actually use up all the empty space created by the unavoidably-large graph images.
  • Reduced unneeded spacing and <hr> tags that just added noise.
  • Calm light-grey colors and rounded corners to soothe your mind while you toil over server performance.
  • Readme/installation instructions in the .zip file.

Download Raven theme

munin_templates_raven_0.1.zip

If I get good feedback about this I’ll post it on the official Munin Wiki, but for now you can grab the zip file above. Please take a look at the contents and read the README-INSTRUCTIONS.txt file before installing the theme.

Installation Instructions

The README-INSTRUCTIONS.txt file contains all the information you need to use Raven, including detailed instructions with background information about the locations you need to upload files to. Here is the summarized instructions so you can get a sense of how simple installation is:

  • Upload the “templates_raven” directory from this zip file into your Munin config directory (i.e. same directory that munin.conf is in, probably /etc/munin/)
  • Upload the ‘raven-htmldir-files’ directory from this zip file into your Munin HTML directory (where the public HTML is served from).
  • Edit your “munin.conf” file on the master and change the “tmpldir” property to reference the new “templates_raven” directory in your Munin config directory instead of the default “templates”.
  • Wait 5 minutes for the Munin master to refresh itself and reload.

Feedback? Thanks? Bugfixes?

Obviously this is my first attempt at a Munin theme and there is not a lot of other examples to emulate, so I may have done something horribly wrong. If you have questions or comments please use the comment form below to let me know about them.

I will try to get back to you ASAP but be warned: I am not going to support your Munin problems for you. I am sharing this theme to give back to the community, but if your problem is complicated I may not be able to help.

Thanks in advance to anyone brave enough to try out the theme and leave feedback!

Posted by jeremyclarke on · design · General

28 Comments

  1. Dougal Campbell

    Works fine for me! I’m liking the tabbed interface.

    Thanks for sharing!

    February 23rd, 2011 at 3:20 pm

  2. Alex

    Your template is missing a lot of required files.

    You need a logo.png, logo-h.png, and a favicon.ico

    I used the ones from the standard template, but alas that did not work either. I get a near blank page when I load the munin page in a browser.

    March 5th, 2011 at 9:04 pm

  3. jeremyclarke

    Hi alex, glad you found my theme and sorry it didn’t work for you. Do you know where i can find a list of required files? I built it based on munin 1.2.3 so if you are using a new version that could be part of the problem.

    I dont see why missing images would make the whole site not work, so I bet it’s not the images that are breaking it for you. Which install method did you use? Did you ever change you minion templates successfully before?

    March 6th, 2011 at 9:45 am

  4. Jovito Royeca

    Didn’t work for me either.

    I copied logo.png, logo-h.png, favicon.ico and the partial directory from the original tmpldir, but no luck.

    I’m using Munin 1.4.5_3; Freebsd 8.1 amd64; Apache 2.2.17

    March 9th, 2011 at 11:10 am

  5. jeremyclarke

    Alex and Jovito, did you guys watch the page loading with the ‘net’ tab in Firebug? Maybe there is a file that isn’t loading.

    More likely it’s an issue with more recent versions of Munin and Dougal (the only person who’s confirmed it works so far) is using the same old version as me (which is also the version you get by default with CentOS5 YUM repo).

    March 10th, 2011 at 9:44 am

  6. Kim

    I believe that the template variables have changed in the more recent versions of Munin.

    Comparing the default templates to yours I notice that the main loop loops through GROUPS not DOMAIN

    March 11th, 2011 at 3:38 am

  7. Kim

    For those interested I have modified jeremyclarkes excellent templates to work with munin 1.4.5:
    http://www.mediafire.com/?9afki76162p7801

    March 14th, 2011 at 3:02 am

  8. Kim

    Tried installing on a new machine and noticed a few errors.
    New version with fixes:
    http://www.mediafire.com/?84hhj9xq8v8jpx8

    Note: I haven’t changed the comparison templates.

    March 14th, 2011 at 6:19 am

  9. Harmony

    Hello,

    I just installed the Kim’s version but Blank Page with :

    cp: cannot stat `/etc/munin/raven/templates_raven/style.css’: No such file or directory
    cp: cannot stat `/etc/munin/raven/templates_raven/logo.png’: No such file or directory

    I edited a bit the templates to include style.css ( copied form raven.css ) and logo.png but still have a strange page x)
    http://img40.imageshack.us/i/capturedcran20110410140.png/

    Seems that things are not included.

    April 10th, 2011 at 8:08 am

  10. Shauna

    I love the theme, and glad someone finally took some time to make one that doesn’t look like it hasn’t been updated since 1998.

    I picked up Kim’s version (since I’m running 1.4.4) and still had a little trouble at first. It turns out that it seems to be hardcoded somewhere to look for style.css, favicon.ico, logo.png, and logo-h.png and fails if even one of those files are missing. So, I copied raven.css and renamed the copy to style.css, copied munin-logo-305×80.png to logo.png, then copied the other files from the default.

    You can download a more “complete” version of Kim’s from my site: http://shaunagordon.com/blog/munin-theme-raven/

    April 18th, 2011 at 1:54 pm

  11. Shauna

    Also, do you happen to know if it’s possible to see stats by a smaller unit than day (such as hour)?

    April 18th, 2011 at 1:57 pm

  12. John

    Hi,

    This looks great but I noticed the day/week/month/year comparison pages are broken. Did you ever get that working?

    April 25th, 2011 at 12:28 am

  13. Harmony

    Hi

    My Munin server is running with the 1.2.6-10~lenny2 version. Any idea to get it work with ? :)

    Thanks

    April 26th, 2011 at 4:52 pm

  14. Shauna

    John – What version of Munin are you running? Also, what appears “broken” about them? Those pages appear fine to me on 1.4.4.

    April 28th, 2011 at 7:55 am

  15. cyrilb

    Hi,

    I confirm, the Kim’s version fix works for me. Munin version 1.4.3; thanks!

    June 26th, 2011 at 11:52 am

  16. Matt

    Thanks to your work here, along with Kim’s and Shauna’s tweaks, I’ve now a much nicer looking munin page. I do wish there were more options for templates though.

    Anyone think a munin template website would help with the lack of templates? I do have the server for it and php/mysql/html experience.

    July 13th, 2011 at 2:41 am

  17. BeZazz

    I was wondering if anyone has a copy of Shauna’s they could upload best I can tell the domain expired like 24 hours agao :/

    July 14th, 2011 at 4:02 am

  18. Eric

    Anyone have a template for 2.0?

    August 8th, 2011 at 12:20 pm

  19. Yashpal Singh S

    I tried the theme and followed the instructions provided. Bt munin is still using the default theme. Im new to munin and right now im jus trying munin using localhost.I used the zip file provided by shauna

    March 7th, 2012 at 6:10 am

  20. Chris

    jer, no-worky w/ munin 1.4.5.
    Big logo appears, but the bottom section never does… Dangit! I can’t stand how ugly it is either. I’ll try to debug it when I can.

    April 16th, 2012 at 2:59 am

  21. jeremyclarke

    Chris, are you using Shauna’s version? It seems like several people have confirmed it works with 1.4.4, so you’re saying that 1.4.5 breaks it?

    I still haven’t set up a 1.4.x testbed but was going to post Shauna’s package on this site for people using it. If it won’t work for the latest version maybe it’s not worth it.

    April 17th, 2012 at 11:17 am

  22. Chris

    jer, I think I’m using yours – I can give Shauna’s version a try and report back though. Please host it here – the link above is horked.

    April 17th, 2012 at 12:48 pm

  23. chris

    Jer, all good. My bad. I was looking ay the wrong link. works great – Thanks so much for creating this (and to Shauna for making it work with the latest version). If you have not pushed this upstream, you really should. They should make this the default theme.

    Regards,
    -C

    April 18th, 2012 at 9:51 pm

  24. xuedi

    Nice theme … haha: “Click here if “Load average” means nothing to you.” awesome ^^

    June 7th, 2012 at 1:19 pm

  25. Steve Lacey

    Shauna’s version working great for me on Munin 1.4.6, she’s moved her blog, the correct URL for her referenced post and working link to her updated version of the theme is at http://blog.shaunagordon.com/2011/04/jeremy-clarke-made-nice-sleek.html

    Ta!

    June 16th, 2012 at 9:01 am

  26. Onilton Maciel

    I made some changes to make it work better in my 1.4.6 munin setup. If anyone is interest, you can get the theme here.

    The main change is that comparisons are working now.

    https://github.com/oniltonmaciel/munin-theme

    September 16th, 2012 at 2:54 am

  27. alex

    Hi, I liked your template when I was using 1.4.6. I’ve updated to 2.0.6 now, and even though now you get to see what section you want in an easier way, I was wondering if you had any plans to update your template to the newer version?

    I found a custom source of the 2.0.6 there: https://launchpad.net/~olasd/+archive/munin

    Easier to install than to build it manually :)

    October 2nd, 2012 at 8:21 am

  28. vinay dhyani

    Hello Team,

    I have registered new domain as well as got the hosting server. i have uploaded source code under the public_html folder but my home page not coming when i run site on url. its redirect to ‘Munin Overview’ page. what should i do to render my home page?.

    March 29th, 2013 at 8:25 am

Add new comment (email only seen by Jeremy)