zuul
/
zuul
Code Issues Proposed changes
Browse Source

Add in progress bars for jobs 

Also tweak style to fit large sets of jobs better.

Change-Id: I692a149a7d02a36c7f2fb481b18dd79d9da16f1b
changes/15/82015/8
Joshua Hesketh 8 years ago
parent
668700bb1a
commit
6b1a218649
2 changed files with 124 additions and 52 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 163
      etc/status/public_html/app.js
  2. 13
      etc/status/public_html/index.html

163
etc/status/public_html/app.js
Unescape View File

@ -3,6 +3,7 @@
// Copyright 2012 OpenStack Foundation
// Copyright 2013 Timo Tijhof
// Copyright 2013 Wikimedia Foundation
// Copyright 2014 Rackspace Australia
//
// 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
@ -97,6 +98,107 @@
},
format: {
job: function(job) {
if (job.url !== null) {
$job_line = $('<a href="' + job.url + '" />');
}
else{
$job_line = $('<span />');
}
$job_line.text(job.name)
.append(zuul.format.job_status(job));
if (job.voting === false) {
$job_line.append(
$(' <small />').text(' (non-voting)')
);
}
return $job_line;
},
job_status: function(job) {
var result = job.result ? job.result.toLowerCase() : null;
if (result === null) {
result = job.url ? 'in progress' : 'queued';
}
if (result == 'in progress') {
return zuul.format.progress_bar(job.elapsed_time,
job.remaining_time);
}
else {
return zuul.format.status_label(result);
}
},
status_label: function(result) {
$status = $('<span />');
$status.addClass('zuul-result label');
switch (result) {
case 'success':
$status.addClass('label-success');
break;
case 'failure':
$status.addClass('label-danger');
break;
case 'unstable':
$status.addClass('label-warning');
break;
case 'in progress':
case 'queued':
case 'lost':
$status.addClass('label-default');
break;
}
$status.text(result);
return $status;
},
progress_bar: function(elapsed_time, remaining_time) {
var progress_percent = 100 * (elapsed_time / (elapsed_time +
remaining_time));
var $bar_inner = $('<div />')
.addClass('progress-bar')
.attr('role', 'progressbar')
.attr('aria-valuenow', 'progressbar')
.attr('aria-valuemin', progress_percent)
.attr('aria-valuemin', '0')
.attr('aria-valuemax', '100')
.css('width', progress_percent + '%');
var $bar_outter = $('<div />')
.addClass('progress zuul-result')
.append($bar_inner);
return $bar_outter;
},
time: function(ms, words) {
if (typeof(words) === 'undefined') words = false;
var seconds = (+ms)/1000;
var minutes = Math.floor(seconds/60);
var hours = Math.floor(minutes/60);
seconds = Math.floor(seconds % 60);
minutes = Math.floor(minutes % 60);
r = '';
if (words) {
if (hours) {
r += hours;
r += ' hr ';
}
r += minutes + ' min';
} else {
if (hours < 10) r += '0';
r += hours + ':';
if (minutes < 10) r += '0';
r += minutes + ':';
if (seconds < 10) r += '0';
r += seconds;
}
return r;
},
change: function (change) {
if (change.id.length === 40) {
change.id = change.id.substr(0, 7);
@ -119,56 +221,14 @@
$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) {
result = job.url ? 'in progress' : 'queued';
}
switch (result) {
case 'success':
resultClass = ' label-success';
break;
case 'failure':
resultClass = ' label-danger';
break;
case 'unstable':
resultClass = ' label-warning';
break;
case 'in progress':
case 'queued':
case 'lost':
resultClass = ' label-default';
break;
}
var $list = $('<ul />')
.addClass('list-group');
$job_line.append(
$('<span />').addClass('zuul-result label').
addClass(resultClass).text(result)
);
if (job.voting === false) {
$job_line.append(
$(' <span />').addClass('muted').
text(' (non-voting)')
);
}
$item.append($job_line);
$.each(change.jobs, function (i, job) {
var $item = $('<li />')
.addClass('list-group-item')
.addClass('zuul-change-job')
.append(zuul.format.job(job));
$list.append($item);
});
@ -195,8 +255,9 @@
if (pipeline.change_queues.length > 1 &&
headNum === 0) {
var name = changeQueue.name;
if (name.length > 32) {
short_name = name.substr(0, 32) + '...';
var short_name = name;
if (short_name.length > 32) {
short_name = short_name.substr(0, 32) + '...';
}
$html.append(
$('<p />')

13
etc/status/public_html/index.html
Unescape View File

@ -22,11 +22,17 @@ under the License.
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.min.css">
<style>
.zuul-result,
.zuul-change-id {
float: right;
}
.zuul-result {
float: right;
width: 70px;
height: 15px;
margin: 0;
}
.zuul-spinner,
.zuul-spinner:hover {
opacity: 0;
@ -41,6 +47,11 @@ under the License.
transition-duration: 0.4s;
cursor: progress;
}
.zuul-change-job {
padding: 5px 10px;
}
</style>
</head>
<body>

Write Preview
Loading…
Cancel
Save