TFS Build light with jQuery

We use TFS for our builds. These include release builds, continuous integration builds and regression test build. We want to have a simple build light to keep an eye on the status of all definitions. This is why we use the REST APIs and a simple jquery enabled html page to show the status: Green (all is fine) – Blue (build in progress) – Red (drop everything we need to fix this)

The code below is all there is. We host this on our development webserver.

    <!— —>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Javascript libraries -->
    <script src=“"></script>

    <script type="text/javascript">
      /* Put the scripts here */
 /* Get the build status for the last build of the definition */
 function GetBuildStatus(id) {
    type: 'GET',
    url: ''+id+'&$top=1&api-version=2.0',
    headers: { 'Authorization': 'Basic YOUR_BASE64_ENCRYPTED_TOKEN'},
    success: function (status) {
      if (status.value[0].result == 'succeeded') {
        console.log('green - ' + status.value[0].result + ' - ' + status.value[0].buildNumber);
      else if (status.value[0].status == 'inProgress') {
        console.log('blue - ' + status.value[0].status + ' - ' + status.value[0].buildNumber);
        $(document).data('status', status.value[0].status);
      else {
        console.log('red - ' + status.value[0].result + ' - ' + status.value[0].buildNumber);
        $(document).data('status', status.value[0].result);
    error: function (response, status, error) {
      status = 'error';

/* Get the build status for definition 199,200,201 */
function GetBuildSatussen() {

/* Change the body color based on the status */
function CheckBuildStatussen() {
  var status = $(document).data('status');
  if (status == 'succeeded')
$('body').css('background-color', 'green !important');
  else if (status == 'inProgress')
$('body').css('background-color', 'blue !important');
$('body').css('background-color', 'red !important');

$(document).ready(function () {
  /* Get the build status every minute */
  setInterval(GetBuildSatussen, 60000);
  /* Set the body color every 2 seconds */
  setInterval(CheckBuildStatussen, 2000);

Replace the fabrikam url with your TFS and the basic header with your base64 encoded token. You can get the build definition id’s from /_apis/build/builds?api-version=2.0. See references for details.

When the HTML document is loaded the buildstatus is fetched for initial color of the page. On interval of one minute the buildstatus is fetched and on interval of 2 seconds the body color is set to the corresponding statuscolor.


About erictummers

Working in a DevOps team is the best thing that happened to me. I like challenges and sharing the solutions with others. On my blog I’ll mostly post about my work, but expect an occasional home project, productivity tip and tooling review.
This entry was posted in Development, Tooling and tagged , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.