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:
Adding the build badge is done by simply including an image element in the Markdown page:
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:
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:
This request will return a .png image like this:
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.
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:
GetBadgeDetails is a small helper function to give us the data to render on the badge image:
Finally the DrawRoundedRectangle renders the bounding rectangle for the badge:
To get the build data we need a couple of references to TFS:
The code to get the TFS build details is as simple as this:
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.