My first TeamCity build monitor

I'm quite surprised at the lack of decent TeamCity build monitors on the web. Maybe it's because TeamCity incorporate an email and tray notifier with the system but I always find them easy to ignore, easier to ignore than a mahossive build monitor screen at least.

After googling a few keywords around TeamCity build monitors I did find some that were plain overkill, while TeamCity itself comes with a status widget which gives you a pretty standard javascript output for each build.

The TeamCity status widget was interesting, unfortunately it was also really detailed and unappealing BUT it could be modified to display the information I was looking for - something visual that I could put on a screen telling the team when a build failed and if anyone was looking into it.

First of all I enabled the TeamCity status widget for a couple of builds:



Then I played about with some clever jQuery (more clever than I am) to make the page auto refresh whilst rejigging the layout to show only those things we were interested in. Now I've got some cool features to show off!

• Every 10 secs the build monitor refreshes itself getting the latest TeamCity build information.
• If all the builds are good the build information is hidden and a green background image is displayed.
• If a build fails the screen turns red and the failed build gets highlighted. Some of the build data was unnecessary so most of it is hidden away except for the project name and link back to TeamCity.
• Finally if (or when) someone is assigned to a broken build we go and get an avatar for that person from the images folder (the image filename takes the format teamcity username.jpg).

To use this build monitor with TeamCity enable the status widget for each project (under 'Edit configuration settings' > 'General settings') and correct the build_monitor.html file by replacing buildsrv2 with your build server and changing buildTypeId to your own project id. I'm checking 3 different TeamCity projects but you can add or delete as many as you want.

I've tried to make all this customisable so add your own images, styles or enhancements as you see fit. I nearly dived into JsUnit to see if it helps write better JS but that's another blog post. Any refactoring or comments welcome - Download my first TeamCity build monitor here (1.18MB).