Browse Source

Update zuul's status page to bootstrap 3.1.1

Also utilise bootstrap's components more for display.

Change-Id: I7c89a5cda2cdb9f4b3e1d473f7d7792840e9fd61
changes/13/82013/4
Joshua Hesketh 8 years ago
parent
commit
4863b60280
  1. 8
      etc/status/fetch-dependencies.sh
  2. 70
      etc/status/public_html/app.js
  3. 122
      etc/status/public_html/index.html
  4. 2
      etc/status/public_html/status-basic.json-sample

8
etc/status/fetch-dependencies.sh

@ -1,9 +1,15 @@
#!/bin/bash
BASE_DIR=$(cd $(dirname $0); pwd)
echo "Destination: $BASE_DIR/public_html"
echo "Fetching jquery.min.js..."
curl --silent http://code.jquery.com/jquery.min.js > $BASE_DIR/public_html/jquery.min.js
echo "Fetching jquery-visibility.min.js..."
curl --silent https://raw.github.com/mathiasbynens/jquery-visibility/master/jquery-visibility.min.js > $BASE_DIR/public_html/jquery-visibility.min.js
echo "Fetching bootstrap..."
curl --silent http://twitter.github.io/bootstrap/assets/bootstrap.zip > bootstrap.zip && unzip -q -o bootstrap.zip -d $BASE_DIR/public_html/ && rm bootstrap.zip
curl -L --silent https://github.com/twbs/bootstrap/releases/download/v3.1.1/bootstrap-3.1.1-dist.zip > bootstrap.zip
unzip -q -o bootstrap.zip -d $BASE_DIR/public_html/
mv $BASE_DIR/public_html/bootstrap-3.1.1-dist $BASE_DIR/public_html/bootstrap
rm bootstrap.zip

70
etc/status/public_html/app.js

@ -17,7 +17,7 @@
// under the License.
(function ($) {
var $container, $msg, $msgWrap, $indicator, $queueInfo, $queueEventsNum,
var $container, $msg, $indicator, $queueInfo, $queueEventsNum,
$queueResultsNum, $pipelines, $jq;
var xhr, zuul,
demo = location.search.match(/[?&]demo=([^?&]*)/),
@ -50,11 +50,12 @@
xhr = $.getJSON(source)
.done(function (data) {
if ('message' in data) {
$msg.removeClass('alert-danger').addClass('alert-info');
$msg.text(data.message);
$msgWrap.removeClass('zuul-msg-wrap-off');
$msg.show();
} else {
$msg.empty();
$msgWrap.addClass('zuul-msg-wrap-off');
$msg.hide();
}
if ('zuul_version' in data) {
@ -100,10 +101,10 @@
}
var $html = $('<div />')
.addClass('well well-small zuul-change')
var $list = $('<ul />').addClass('nav nav-list');
var $first_item = $('<li />').text(change.project)
.addClass('nav-header');
.addClass('panel panel-default zuul-change')
var $change_header = $('<div />').text(change.project);
$change_header.addClass('panel-heading');
if (change.url !== null) {
var $id_span = $('<span />').append(
@ -113,11 +114,25 @@
else {
var $id_span = $('<span />').text(change.id);
}
$first_item.append($id_span.addClass('zuul-change-id'));
$list.append($first_item);
$change_header.append($id_span.addClass('zuul-change-id'));
$html.append($change_header);
var $list = $('<ul />');
$list.addClass('list-group');
$.each(change.jobs, function (i, job) {
var $item = $('<li />');
$item.addClass('list-group-item');
$item.addClass('zuul-change-job');
if (job.url !== null) {
$job_line = $('<a href="' + job.url + '" />').
addClass('zuul-change-job-link');
}
else{
$job_line = $('<span />').
addClass('zuul-change-job-link');
}
$job_line.text(job.name);
var result = job.result ? job.result.toLowerCase() : null;
if (result === null) {
@ -128,27 +143,21 @@
resultClass = ' label-success';
break;
case 'failure':
resultClass = ' label-important';
resultClass = ' label-danger';
break;
case 'lost':
case 'unstable':
resultClass = ' label-warning';
break;
case 'in progress':
case 'queued':
case 'lost':
resultClass = ' label-default';
break;
}
$item.addClass('zuul-change-job');
if (job.url !== null) {
$job_line = $('<a href="' + job.url + '" />').
addClass('zuul-change-job-link');
}
else{
$job_line = $('<span />').
addClass('zuul-change-job-link');
}
$job_line.text(job.name)
.append(
$('<span />').addClass('zuul-result label').
addClass(resultClass).text(result)
$job_line.append(
$('<span />').addClass('zuul-result label').
addClass(resultClass).text(result)
);
if (job.voting === false) {
@ -167,7 +176,7 @@
pipeline: function (pipeline) {
var $html = $('<div />')
.addClass('zuul-pipeline span4')
.addClass('zuul-pipeline col-md-4')
.append($('<h3 />').text(pipeline.name));
if (typeof pipeline.description === 'string') {
@ -245,11 +254,10 @@
});
$(function ($) {
$msg = $('<div class="zuul-msg alert alert-error"></div>');
$msgWrap = $msg.wrap('<div class="zuul-msg-wrap zuul-msg-wrap-off">' +
'</div>').parent();
$indicator = $('<span class="btn pull-right zuul-spinner">updating ' +
'<i class="icon-refresh"></i></span>');
$msg = $('<div />').addClass('alert').hide();
$indicator = $('<button class="btn pull-right zuul-spinner">updating '
+ '<span class="glyphicon glyphicon-refresh"></span>'
+ '</button>');
$queueInfo = $('<p>Queue lengths: <span>0</span> events, ' +
'<span>0</span> results.</p>');
$queueEventsNum = $queueInfo.find('span').eq(0);
@ -260,7 +268,7 @@
$lastReconf = $('<p>Last reconfigured: ' +
'<span id="last-reconfigured-span"></span></p>');
$container = $('#zuul-container').append($msgWrap, $indicator,
$container = $('#zuul-container').append($msg, $indicator,
$queueInfo, $pipelines,
$zuulVersion, $lastReconf);

122
etc/status/public_html/index.html

@ -22,109 +22,25 @@ under the License.
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.min.css">
<style>
.zuul-container {
transition-property: opacity, background-color;
transition-duration: 1s;
transition-timing-function: ease-in-out;
clear: both;
opacity: 0;
cursor: progress;
min-height: 400px;
background-color: #f8ffaa;
}
.zuul-container-ready {
opacity: 1;
cursor: auto;
background-color: #fff;
}
.zuul-spinner,
.zuul-spinner:hover {
opacity: 0;
transition: opacity 3s ease-out;
cursor: default;
pointer-events: none;
}
.zuul-spinner-on,
.zuul-spinner-on:hover {
opacity: 1;
transition-duration: 0.4s;
cursor: progress;
}
.zuul-change-arrow {
text-align: center;
font-size: 16pt;
line-height: 1.0;
}
.zuul-change-id {
text-transform: none;
}
.zuul-change-job a {
overflow: auto;
}
.zuul-result {
text-shadow: none;
font-weight: normal;
background-color: #E9E9E9;
color: #555;
}
.zuul-result.label-success {
background-color: #CDF0CD;
color: #468847;
}
.zuul-result.label-important {
background-color: #F1DBDA;
color: #B94A48;
}
.zuul-result.label-warning {
background-color: #F3E6D4;
color: #F89406;
}
.zuul-msg-wrap {
max-height: 150px;
overflow: hidden;
}
.zuul-container-ready .zuul-msg-wrap {
transition: max-height 1s ease-in;
}
.zuul-msg-wrap-off {
max-height: 0;
}
.zuul-msg p {
margin: 0;
}
/**
* Styles for Bootstrap only
* (remove when not using Bootstrap)
*/
.zuul-change-id {
float: right;
}
.zuul-change-job-link {
overflow: auto;
display: block;
}
.zuul-result {
float: right;
}
.zuul-result,
.zuul-change-id {
float: right;
}
.zuul-spinner,
.zuul-spinner:hover {
opacity: 0;
transition: opacity 3s ease-out;
cursor: default;
pointer-events: none;
}
.zuul-spinner-on,
.zuul-spinner-on:hover {
opacity: 1;
transition-duration: 0.4s;
cursor: progress;
}
</style>
</head>
<body>

2
etc/status/public_html/status-basic.json-sample

@ -1,6 +1,6 @@
{
"last_reconfigured": 1389381756000,
"message": "Example error message",
"message": "Example info message",
"pipelines": [
{
"name": "test",

Loading…
Cancel
Save