Build Status Badge for TFS and Visual Studio Online

With the new Markdown support in Visual Studio Online you can easily create a great project Wiki with information relevant to your team. One nice thing to have there is the build status(es), which for instance the AppVeyor build system provides as a small image – a build badge. Here’s how that could look in a Wiki page:

image 

Adding the build badge is done by simply including an image element in the Markdown page:

image

I really like how easy it is to create mashups of different services to visualize data for the team using Markdown.

As for the build badge I think this is something that would be nice to have included in the product, if you think so too, vote on the following UserVoice suggestion:

image

But until that eventually happens we can always solve it ourselves. So what is needed to do this? It’s actually really simple, just write a service that looks up the build status and returns an image containing the badge.

In this example I’ve solved it by implementing a standard ASP.NET MVC application. I’ve used a controller that accepts a team project and build definition name as query string arguments:

http://<server>/build/badge?teamProject=<team-project>&buildDefinition=<build-definition>

for example;

http: //s-labtfs.cloudapp.net:9000/build/badge?teamProject=FeaturesInc&buildDefinition=FeaturesInc.CI

This request will return a .png image like this:

image

Ok, so how did I do this? Let’s look at the code.

To make it easy to generate the badge I’ve created 150×30 px images to draw the image. The Images folder contains a couple of images like the one below, which we’ll then draw the status text on.

image

The code to generate a badge image is implemented as a MVC controller action. The code below gets the details from the latest build, draws the badge image and finally returns it as an image/png stream as the result:

image

GetBadgeDetails is a small helper function to give us the data to render on the badge image:

image

Finally the DrawRoundedRectangle renders the bounding rectangle for the badge:

image

To get the build data we need a couple of references to TFS:

  • Microsoft.TeamFoundation.Build.Client.dll
  • Microsoft.TeamFoundation.Client.dll

The code to get the TFS build details is as simple as this:

image

That’s all. Build and deploy to your favorite IIS server and you’re ready to start serving build badges for your team!

Download the complete sample here.

One thought on “Build Status Badge for TFS and Visual Studio Online”

Leave a Reply

Your email address will not be published. Required fields are marked *