Instantly share code, notes, and snippets.

Embed
What would you like to do?
Using Jenkins JSON API to display an alert on your team dashboard, more http://gadelkareem.com/2016/06/29/using-jenkins-json-api-display-alert-build-fails/
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment