Implementing an Effective Build Dashboard (for Hudson) (Part 3)

Not really part of the dashboard configuration but more of a cool thing I thought I’d share the underlying layers (hardware, OS etc) behind our monitor.

I decided to go with full portability and hands free start-up, I did this as follows:

  1. Installed Puppy Linux on a 2gb USB stick.
  2. Installed Firefox 3.x (needed for the Autohide extension).
  3. Installed Autohide extension (auto hides parts of Firefox and forces full screen on start-up).
  4. Found an old derelict PC and plugged it in, started up, configured the video display (once off on start-up).
  5. Configured the build monitor as per previous posts.
  6. Changed the start-up of Puppy Linux to auto start Firefox.

And there you go:

Build monitor, on a steeeck!
Build monitor, on a stick.

Implementing an Effective Build Dashboard (for Hudson) (Part 2)

This is a follow on of my previous post and details how to implement the code available in the original post by Fabio Parera here, together with the modifications I made for our environment. I suggest you look at the original post first though to understand the extra stuff that I did not implement (I removed “expected duration” and “pinging servers”).

  • To start, modify Hudson to generate a code coverage percentage file, in our environment (.NET) we used NCover and NUnit but adapting your tools to do the same shouldn’t be a problem, the concept is simple:
  1. Generate the coverage percentage file(s). See this post on setting up NCover and Nunit in Hudson
  2. Extract the percentage from the file(s) and put into a single file in the root of your project. This is now accessible as http://<ci-server>/jobs/<project>/<coverage-percentage-file> after every build.

  • You need to install the Greasemonkey Add-on for Firefox for the script to work, do that now. After you’ve installed, you need to modify Firefox’s config and set greasemonkey.fileIsGreaseable to true:
    • Open up Firefox and open up the page about:config (type it in the link box).
    • Find the greasemonkey.fileIsGreaseable setting and, if it’s not set to true, double click it to set it.
  • Now extract the contents of this file to a working folder. Please note that this code is neither pretty nor up to date but is completely functional, feel free to modify at will.
  • Edit build-dashboard-radiator.html. Each project is defined in a section like this:

Create a section like this for each project you want to monitor, changing the href to your projects base directory.

  • (Optional) Edit build-dashboard-radiator.css and modify the style-sheet so it’s suitable for your display, the sizes for the fonts are located towards the end of the script. The current sizes are great for a 40″ screen.
  • Edit build-dashboard-radiator.user.js
    • Change coverage_minimum to whatever value you want, anything more than this will be displayed as green, less, red.
    • Find the section that looks like this:

you need to link the names of commiters to your project(s) to pictures, do this here. The names are what’s extracted from the version control system you use and should be set by every team member before checking code in. To find out what it is in Hudson, find a build and have a look at the json object generated from it, you can find it here (look for the value of “fullName”):

http://<server>/hudson/job/<project>/lastBuild/api/json

Note: This is, in fact, the source for all the information in the script, if you’re thinking of extending the monitor this is the first place to look for information on your build. Another place to look would be

http://<server>/hudson/job/<project>/api/json

which lists information related to the project as a whole (not build specific). Also, you can substiture lastbuild in the previous link for any build number.

  • Next, after you’ve saved all your changes, open Firefox and load the html file. Drag and drop the js file into the browser and this should now install if you have Greasemonkey installed correctly

You’ll know it’s installed correctly if you see this in your status bar

That should be it, hit refresh on your browser and bask in a cool dashboard monitor.

I’d like to thank the original poster (Fabio Parera), and of course all the people he thanks, for linking this awesome monitor, it was exactly what I was looking for and I hope it turns out that way for you too. Let me know how it goes and if you can think of any way of improving it.

Implementing an Effective Build Dashboard (for Hudson) (Part 1)

Information radiators are one of the core building blocks of any agile environment, you should never hide or feel the need to hide anything you’re doing. Information radiators encourage (or at least they should) a feeling of pride in teams allowing them to show off what they’re doing. They should be freely accessible for everyone to see what’s going on and share in the joy of what’s being created. They also encourage (if used correctly) good behaviour in teams: no-one likes public shame.

In line with this and following on my post of setting up a Continuous Integration environment with Hudson and .NET I decided to go about putting in place an effective Build Dashboard. For me an effective dashboard (or information radiator) is one that gives as much relevant information as possible with the least amount of effort to read. So, lots of flash, none of the boring stuff, easily accessible by as many people as possible.

Of the various methods out there I went for displaying information on a big screen, this gives you both the high visibility and the information all in one. Some of the other methods like lights and sound are nice, but limited in some way.

In our environment Hudson is our CI tool of choice and it has a pretty nice built in default dashboard:

.. which works great at short distance but not really great at long distance. There are also lot of plugins available to customize this dashboard and make it better viewable but none of them appealed to me as fit for purpose.

Looking around I finally found a post by Fabio Pereira that looked promising. Essentially the monitor is an HTML page with backing style sheet and javascript to extract information from your CI Server (like Hudson, using it’s API facilities). The standard one that he supplies in his blog looks like this (sorry for the bad quality of the pic) (when implemented in our environment):

Dashboard Version 1

For each project is should the following:

  • Name of project.
  • Build result (green for passed, red for failed, orange for building).
  • Time since last build.
  • How long the last build took.

I made the following modifications:

  • Added in a unit test coverage percentage (with colors indicating above/below agreed minimum).
  • Changed the font size based on how long ago the project last built. In other words, old projects shrink, lots of tiny font projects = not much being done.
  • Added a picture displaying who checked in code that triggered the build. Encourage responsibility for what’s done.
  • Added a color (yellow) to indicate an unstable (but not failed) build.

And now it looks like this:

Dashboard Version 2

Also, it’s strategically located:

Location of Dashboard

In the end it turned out to be pretty effective. It was fully automated, highly visible, everyone (team and customer) had access to it and could see it clearly and understand at a glance what was happening on each project. Broken builds and low unit test coverage are quickly exposed and no activity on projects can be seen quite clearly. Only thing I need to figure out now is how not to burn the image into the screen (no screensaver :) ) but I guess if there’s enough churn on a project that shouldn’t happen, more motivation to continuously check in and build I guess…

As usual I’m always looking for ways to improve so feedback is more than welcome. Can you think of ways to improve what I’ve done?

In part 2 of this I’ll got through the code behind this dashboard and try and explain it a little so that implementing it becomes easier, I’ll also attach the actual code (not pretty, but effective nevertheless 🙂 )