Update zuul's status page to bootstrap 3.1.1
Also utilise bootstrap's components more for display. Change-Id: I7c89a5cda2cdb9f4b3e1d473f7d7792840e9fd61
This commit is contained in:
Joshua Hesketh
parent
298c4913eb
commit
4863b60280
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
|
|
|
|||
|
|
@ -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-result,
|
||||
.zuul-change-id {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.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-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>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"last_reconfigured": 1389381756000,
|
||||
"message": "Example error message",
|
||||
"message": "Example info message",
|
||||
"pipelines": [
|
||||
{
|
||||
"name": "test",
|
||||
|
|
|
|||
Loading…
Reference in New Issue