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.
.NET Development by Eric 