Add basic status HTML/JS.

A working example that can be customized for site use.

Change-Id: I6e6fdf245a55a767aa7e86486b6c47dae221f47b
Reviewed-on: https://review.openstack.org/19989
Approved: James E. Blair <corvus@inaugust.com>
Reviewed-by: James E. Blair <corvus@inaugust.com>
Tested-by: Jenkins
This commit is contained in:
James E. Blair 2013-01-17 15:32:22 -08:00 committed by Jenkins
parent 68bdcd7f09
commit 8ae50e3575
2 changed files with 239 additions and 0 deletions

87
etc/status.html Normal file
View File

@ -0,0 +1,87 @@
<!--
Copyright 2013 OpenStack Foundation
Licensed under the Apache License, Version 2.0 (the "License"); you may
not use this file except in compliance with the License. You may obtain
a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
License for the specific language governing permissions and limitations
under the License.
-->
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:py="http://genshi.edgewall.org/"
lang="en">
<head>
<style type="text/css">
#pipeline-container {
margin: 0 auto;
}
.change {
border: 1px solid;
margin-top: 10px;
padding: 2px;
}
.change > .header {
background: #cccccc;
color: black;
margin: -2px -2px 2px -2px;
padding: 4px;
}
.change > .header > .changeid {
float: right;
}
.job {
display: block;
}
.pipeline {
float: left;
width: 25em;
padding: 4px;
}
.pipeline > .header {
background: #0000cc;
color: white;
}
.arrow {
text-align: center;
font-size: 16pt;
line-height: 1.0;
}
.result_success {
color: #007f00;
}
.result_failure {
color: #cf2f19;
}
.result_unstable {
color: #e39f00;
}
</style>
<title>Zuul Status</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-visibility.min.js"></script>
<script type="text/javascript" src="jquery-graphite.js"></script>
<script type="text/javascript" src="status.js"></script>
</head>
<body>
<h1> Zuul Status </h1>
<div id="message-container">
<p id="message"/>
</div>
<div id="pipeline-container">
</div>
</body>
</html>

152
etc/status.js Normal file
View File

@ -0,0 +1,152 @@
// Copyright 2012 OpenStack Foundation
//
// Licensed under the Apache License, Version 2.0 (the "License"); you may
// not use this file except in compliance with the License. You may obtain
// a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
// License for the specific language governing permissions and limitations
// under the License.
window.zuul_enable_status_updates = true;
function format_pipeline(data) {
var html = '<div class="pipeline"><h3 class="subhead">'+
data['name']+'</h3>';
if (data['description'] != null) {
html += '<p>'+data['description']+'</p>';
}
$.each(data['change_queues'], function(change_queue_i, change_queue) {
$.each(change_queue['heads'], function(head_i, head) {
if (data['change_queues'].length > 1 && head_i == 0) {
html += '<div> Change queue: ';
var name = change_queue['name'];
html += '<a title="' + name + '">';
if (name.length > 32) {
name = name.substr(0,32) + '...';
}
html += name + '</a></div>'
}
$.each(head, function(change_i, change) {
if (change_i > 0) {
html += '<div class="arrow">&uarr;</div>'
}
html += format_change(change);
});
});
});
html += '</div>';
return html;
}
function format_change(change) {
var html = '<div class="change"><div class="header">';
html += '<span class="project">'+change['project']+'</span>';
var id = change['id'];
var url = change['url'];
if (id.length == 40) {
id = id.substr(0,7);
}
html += '<span class="changeid">';
if (url != null) {
html += '<a href="'+url+'">';
}
html += id;
if (url != null) {
html += '</a>';
}
html += '</span></div><div class="jobs">';
$.each(change['jobs'], function(i, job) {
result = job['result'];
var result_class = "result";
if (result == null) {
if (job['url'] != null) {
result = 'in progress';
} else {
result = 'queued';
}
} else if (result == 'SUCCESS') {
result_class += " result_success";
} else if (result == 'FAILURE') {
result_class += " result_failure";
} else if (result == 'LOST') {
result_class += " result_unstable";
} else if (result == 'UNSTABLE') {
result_class += " result_unstable";
}
html += '<span class="job">';
if (job['url'] != null) {
html += '<a href="'+job['url']+'">';
}
html += job['name'];
if (job['url'] != null) {
html += '</a>';
}
html += ': <span class="'+result_class+'">'+result+'</span>';
if (job['voting'] == false) {
html += ' (non-voting)';
}
html += '</span>';
});
html += '</div></div>';
return html;
}
function update_timeout() {
if (!window.zuul_enable_status_updates) {
setTimeout(update_timeout, 5000);
return;
}
update();
setTimeout(update_timeout, 5000);
}
function update() {
var html = '';
$.getJSON('/status.json', function(data) {
if ('message' in data) {
$("#message-container").attr('class', 'topMessage');
$("#message").html(data['message']);
} else {
$("#message-container").removeClass('topMessage');
$("#message").html('');
}
html += '<br style="clear:both"/>';
$.each(data['pipelines'], function(i, pipeline) {
html = html + format_pipeline(pipeline);
});
html += '<br style="clear:both"/>';
$("#pipeline-container").html(html);
});
}
$(function() {
update_timeout();
$(document).on({
'show.visibility': function() {
window.zuul_enable_status_updates = true;
update();
},
'hide.visibility': function() {
window.zuul_enable_status_updates = false;
}
});
});