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.