Merge "Update zuul's status page to bootstrap 3.1.1"
This commit is contained in:
commit
5855e99230
|
@ -1,9 +1,15 @@
|
||||||
#!/bin/bash
|
#!/bin/bash
|
||||||
BASE_DIR=$(cd $(dirname $0); pwd)
|
BASE_DIR=$(cd $(dirname $0); pwd)
|
||||||
echo "Destination: $BASE_DIR/public_html"
|
echo "Destination: $BASE_DIR/public_html"
|
||||||
|
|
||||||
echo "Fetching jquery.min.js..."
|
echo "Fetching jquery.min.js..."
|
||||||
curl --silent http://code.jquery.com/jquery.min.js > $BASE_DIR/public_html/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..."
|
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
|
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..."
|
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.
|
// under the License.
|
||||||
|
|
||||||
(function ($) {
|
(function ($) {
|
||||||
var $container, $msg, $msgWrap, $indicator, $queueInfo, $queueEventsNum,
|
var $container, $msg, $indicator, $queueInfo, $queueEventsNum,
|
||||||
$queueResultsNum, $pipelines, $jq;
|
$queueResultsNum, $pipelines, $jq;
|
||||||
var xhr, zuul,
|
var xhr, zuul,
|
||||||
demo = location.search.match(/[?&]demo=([^?&]*)/),
|
demo = location.search.match(/[?&]demo=([^?&]*)/),
|
||||||
|
@ -50,11 +50,12 @@
|
||||||
xhr = $.getJSON(source)
|
xhr = $.getJSON(source)
|
||||||
.done(function (data) {
|
.done(function (data) {
|
||||||
if ('message' in data) {
|
if ('message' in data) {
|
||||||
|
$msg.removeClass('alert-danger').addClass('alert-info');
|
||||||
$msg.text(data.message);
|
$msg.text(data.message);
|
||||||
$msgWrap.removeClass('zuul-msg-wrap-off');
|
$msg.show();
|
||||||
} else {
|
} else {
|
||||||
$msg.empty();
|
$msg.empty();
|
||||||
$msgWrap.addClass('zuul-msg-wrap-off');
|
$msg.hide();
|
||||||
}
|
}
|
||||||
|
|
||||||
if ('zuul_version' in data) {
|
if ('zuul_version' in data) {
|
||||||
|
@ -100,10 +101,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
var $html = $('<div />')
|
var $html = $('<div />')
|
||||||
.addClass('well well-small zuul-change')
|
.addClass('panel panel-default zuul-change')
|
||||||
var $list = $('<ul />').addClass('nav nav-list');
|
|
||||||
var $first_item = $('<li />').text(change.project)
|
var $change_header = $('<div />').text(change.project);
|
||||||
.addClass('nav-header');
|
$change_header.addClass('panel-heading');
|
||||||
|
|
||||||
if (change.url !== null) {
|
if (change.url !== null) {
|
||||||
var $id_span = $('<span />').append(
|
var $id_span = $('<span />').append(
|
||||||
|
@ -113,11 +114,25 @@
|
||||||
else {
|
else {
|
||||||
var $id_span = $('<span />').text(change.id);
|
var $id_span = $('<span />').text(change.id);
|
||||||
}
|
}
|
||||||
$first_item.append($id_span.addClass('zuul-change-id'));
|
$change_header.append($id_span.addClass('zuul-change-id'));
|
||||||
$list.append($first_item);
|
$html.append($change_header);
|
||||||
|
|
||||||
|
var $list = $('<ul />');
|
||||||
|
$list.addClass('list-group');
|
||||||
$.each(change.jobs, function (i, job) {
|
$.each(change.jobs, function (i, job) {
|
||||||
var $item = $('<li />');
|
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;
|
var result = job.result ? job.result.toLowerCase() : null;
|
||||||
if (result === null) {
|
if (result === null) {
|
||||||
|
@ -128,27 +143,21 @@
|
||||||
resultClass = ' label-success';
|
resultClass = ' label-success';
|
||||||
break;
|
break;
|
||||||
case 'failure':
|
case 'failure':
|
||||||
resultClass = ' label-important';
|
resultClass = ' label-danger';
|
||||||
break;
|
break;
|
||||||
case 'lost':
|
|
||||||
case 'unstable':
|
case 'unstable':
|
||||||
resultClass = ' label-warning';
|
resultClass = ' label-warning';
|
||||||
break;
|
break;
|
||||||
|
case 'in progress':
|
||||||
|
case 'queued':
|
||||||
|
case 'lost':
|
||||||
|
resultClass = ' label-default';
|
||||||
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
$item.addClass('zuul-change-job');
|
$job_line.append(
|
||||||
if (job.url !== null) {
|
$('<span />').addClass('zuul-result label').
|
||||||
$job_line = $('<a href="' + job.url + '" />').
|
addClass(resultClass).text(result)
|
||||||
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)
|
|
||||||
);
|
);
|
||||||
|
|
||||||
if (job.voting === false) {
|
if (job.voting === false) {
|
||||||
|
@ -167,7 +176,7 @@
|
||||||
|
|
||||||
pipeline: function (pipeline) {
|
pipeline: function (pipeline) {
|
||||||
var $html = $('<div />')
|
var $html = $('<div />')
|
||||||
.addClass('zuul-pipeline span4')
|
.addClass('zuul-pipeline col-md-4')
|
||||||
.append($('<h3 />').text(pipeline.name));
|
.append($('<h3 />').text(pipeline.name));
|
||||||
|
|
||||||
if (typeof pipeline.description === 'string') {
|
if (typeof pipeline.description === 'string') {
|
||||||
|
@ -245,11 +254,10 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
$(function ($) {
|
$(function ($) {
|
||||||
$msg = $('<div class="zuul-msg alert alert-error"></div>');
|
$msg = $('<div />').addClass('alert').hide();
|
||||||
$msgWrap = $msg.wrap('<div class="zuul-msg-wrap zuul-msg-wrap-off">' +
|
$indicator = $('<button class="btn pull-right zuul-spinner">updating '
|
||||||
'</div>').parent();
|
+ '<span class="glyphicon glyphicon-refresh"></span>'
|
||||||
$indicator = $('<span class="btn pull-right zuul-spinner">updating ' +
|
+ '</button>');
|
||||||
'<i class="icon-refresh"></i></span>');
|
|
||||||
$queueInfo = $('<p>Queue lengths: <span>0</span> events, ' +
|
$queueInfo = $('<p>Queue lengths: <span>0</span> events, ' +
|
||||||
'<span>0</span> results.</p>');
|
'<span>0</span> results.</p>');
|
||||||
$queueEventsNum = $queueInfo.find('span').eq(0);
|
$queueEventsNum = $queueInfo.find('span').eq(0);
|
||||||
|
@ -260,7 +268,7 @@
|
||||||
$lastReconf = $('<p>Last reconfigured: ' +
|
$lastReconf = $('<p>Last reconfigured: ' +
|
||||||
'<span id="last-reconfigured-span"></span></p>');
|
'<span id="last-reconfigured-span"></span></p>');
|
||||||
|
|
||||||
$container = $('#zuul-container').append($msgWrap, $indicator,
|
$container = $('#zuul-container').append($msg, $indicator,
|
||||||
$queueInfo, $pipelines,
|
$queueInfo, $pipelines,
|
||||||
$zuulVersion, $lastReconf);
|
$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.min.css">
|
||||||
<link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.min.css">
|
<link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.min.css">
|
||||||
<style>
|
<style>
|
||||||
.zuul-container {
|
.zuul-result,
|
||||||
transition-property: opacity, background-color;
|
.zuul-change-id {
|
||||||
transition-duration: 1s;
|
float: right;
|
||||||
transition-timing-function: ease-in-out;
|
}
|
||||||
clear: both;
|
|
||||||
opacity: 0;
|
|
||||||
cursor: progress;
|
|
||||||
min-height: 400px;
|
|
||||||
background-color: #f8ffaa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.zuul-container-ready {
|
.zuul-spinner,
|
||||||
opacity: 1;
|
.zuul-spinner:hover {
|
||||||
cursor: auto;
|
opacity: 0;
|
||||||
background-color: #fff;
|
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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"last_reconfigured": 1389381756000,
|
"last_reconfigured": 1389381756000,
|
||||||
"message": "Example error message",
|
"message": "Example info message",
|
||||||
"pipelines": [
|
"pipelines": [
|
||||||
{
|
{
|
||||||
"name": "test",
|
"name": "test",
|
||||||
|
|
Loading…
Reference in New Issue