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