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:
parent
68bdcd7f09
commit
8ae50e3575
|
@ -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>
|
|
@ -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">↑</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;
|
||||
}
|
||||
});
|
||||
|
||||
});
|
Loading…
Reference in New Issue