Development teams need to keep track of builds on Jenkins and sometimes an email alert is not flashy enough. Using this simple javascript on your team dashboard you can easily track failed builds and urge developers to fix it.
The script uses Jenkins JSON API with JSONP method to request the latest failed builds with author name and last commit that caused the failure. You will need to add the domain of the page where the request is sent to your “Jenkins” > “Configure Global Security” > “Domains from which to allow requests” configuration. Also the cookie from Jenkins is needed on the same browser so you will need to login to Jenkins from the same browser before running the script or proxy the request and use Basic Authorization using your API token to do the request.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tweets</title>
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript" src="http://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<style>
#jenkins, #jenkins .background {
z-index: 9999;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
font-family: serif;
}
#jenkins {
display: none;
background: rgba(249, 144, 144, 0.73);
}
#jenkins .background {
z-index: 10000;
animation: blinker 1s cubic-bezier(0, -0.36, 1, 1.39) infinite alternate;
background: linear-gradient(to bottom, rgb(255, 0, 0) 0%, rgb(255, 255, 255) 400%);
}
@keyframes blinker {
to {
opacity: 0;
}
}
#jenkins .center-block {
z-index: 10001;
width: 75%;
margin-top: 10%;
position: relative;
top: 0;
left: 0;
}
#jenkins .pull-left {
height: 358px;
width: 307px;
}
#jenkins h1 {
font-size: 50px;
font-weight: 700;
font-family: fantasy;
}
#jenkins-error {
font-size: 30px;
padding: 60px 0 0 350px;
}
</style>
</head>
<body>
<a class="twitter-timeline" href="https://twitter.com/gadelkareem">Tweets by gadelkareem</a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
<div id="jenkins">
<div class="background"></div>
<div class="center-block">
<img id="photo" src="http://gadelkareem.com/images/oops-jenkins.png" class="pull-left">
<div>
<h1>Oops!! <span class="author"></span> just put us on Fire!</h1>
<ul id="jenkins-error"></ul>
</div>
</div>
</div>
<script>
function jenkins() {
var baseUrl = "http://jenkins.company.example";
$.ajax({
url: baseUrl + "/api/json",
data: "depth=1&tree=jobs[displayName,lastBuild[result,timestamp,changeSet[items[msg,author[fullName]]]]]&jsonp=callBack",
jsonpCallback: "callBack",
dataType: 'jsonp',
success: function (json) {
var allJobs = json["jobs"],
currentTimestamp = moment().unix(),
nonSuccessfulJobs = allJobs.filter(function (job) {
return job["lastBuild"] != null && job["lastBuild"]["result"] == "FAILURE" && (currentTimestamp - (job["lastBuild"]["timestamp"] / 1000)) < 180 /* display for 3 min */;
});
if (nonSuccessfulJobs.length) {
console.log(nonSuccessfulJobs);
jenkinsError.empty();
$.each(nonSuccessfulJobs, function (index, value) {
var changeSet = value['lastBuild']['changeSet']['items'],
item = changeSet[changeSet.length - 1],
author = item && 'author' in item && 'fullName' in item['author'] ? item['author']['fullName'] : 'Someone';
$('.author').text(author);
jenkinsError.append(
"<li><strong>" + author + "</strong> just broke <strong>" + value["displayName"] + "</strong> while trying to <em>" + ( item && 'msg' in item ? item['msg'] : 'hmm.. not sure!') + '</em></li>');
});
jenkinsDiv.fadeIn();
}
else {
jenkinsDiv.fadeOut();
}
setTimeout(jenkins, 15000);
},
error: function (error) {
console.log(error);
}
});
}
var jenkinsDiv = $("#jenkins"), jenkinsError = $('#jenkins-error');
jenkinsDiv.on('click', function () {
$(this).hide();
});
jenkins();
</script>
</body>
</html>
Fork here
