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.

<html>
  <head>
    <!— https://stackoverflow.com/a/35439531 —>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Javascript libraries -->
    <script src=“https://code.jquery.com/jquery-2.2.4.min.js"></script>
  </head>

  <body>
    <script type="text/javascript">
      /* Put the scripts here */
    </script>
  </body>
</html>
 /* Get the build status for the last build of the definition */
 function GetBuildStatus(id) {
  $.ajax({
    type: 'GET',
    url: 'http://fabrikam-fiber-inc.visualstudio.com/DefaultCollection/Fabrikam-Fiber-Git/_apis/build/builds/?definitions='+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) {
      console.log(error);
      status = 'error';
    }
   });
}

/* Get the build status for definition 199,200,201 */
function GetBuildSatussen() {
  $(document).data('status','succeeded');
  GetBuildStatus(199);
  GetBuildStatus(200);
  GetBuildStatus(201);
}

/* 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');
  else
$('body').css('background-color', 'red !important');
}

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

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.

References

About erictummers

My work as a recruited developer changes almost every month. 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:

WordPress.com Logo

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

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s