Update zuul's status page to bootstrap 3.1.1
Also utilise bootstrap's components more for display.
Change-Id: I7c89a5cda2cdb9f4b3e1d473f7d7792840e9fd61
diff --git a/etc/status/fetch-dependencies.sh b/etc/status/fetch-dependencies.sh
index f224557..a5dddff 100755
--- a/etc/status/fetch-dependencies.sh
+++ b/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
diff --git a/etc/status/public_html/app.js b/etc/status/public_html/app.js
index 0780346..d752149 100644
--- a/etc/status/public_html/app.js
+++ b/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);
diff --git a/etc/status/public_html/index.html b/etc/status/public_html/index.html
index d09f44f..0c51ee7 100644
--- a/etc/status/public_html/index.html
+++ b/etc/status/public_html/index.html
@@ -22,109 +22,25 @@
<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,
-.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-on,
+ .zuul-spinner-on:hover {
+ opacity: 1;
+ transition-duration: 0.4s;
+ cursor: progress;
+ }
</style>
</head>
<body>
diff --git a/etc/status/public_html/status-basic.json-sample b/etc/status/public_html/status-basic.json-sample
index c88e5b7..63745a3 100644
--- a/etc/status/public_html/status-basic.json-sample
+++ b/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",