Add in progress bars for jobs
Also tweak style to fit large sets of jobs better. Change-Id: I692a149a7d02a36c7f2fb481b18dd79d9da16f1b
This commit is contained in:
parent
668700bb1a
commit
6b1a218649
|
@ -3,6 +3,7 @@
|
||||||
// Copyright 2012 OpenStack Foundation
|
// Copyright 2012 OpenStack Foundation
|
||||||
// Copyright 2013 Timo Tijhof
|
// Copyright 2013 Timo Tijhof
|
||||||
// Copyright 2013 Wikimedia Foundation
|
// Copyright 2013 Wikimedia Foundation
|
||||||
|
// Copyright 2014 Rackspace Australia
|
||||||
//
|
//
|
||||||
// Licensed under the Apache License, Version 2.0 (the "License"); you may
|
// 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
|
// not use this file except in compliance with the License. You may obtain
|
||||||
|
@ -97,6 +98,107 @@
|
||||||
},
|
},
|
||||||
|
|
||||||
format: {
|
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) {
|
change: function (change) {
|
||||||
if (change.id.length === 40) {
|
if (change.id.length === 40) {
|
||||||
change.id = change.id.substr(0, 7);
|
change.id = change.id.substr(0, 7);
|
||||||
|
@ -119,56 +221,14 @@
|
||||||
$change_header.append($id_span.addClass('zuul-change-id'));
|
$change_header.append($id_span.addClass('zuul-change-id'));
|
||||||
$html.append($change_header);
|
$html.append($change_header);
|
||||||
|
|
||||||
var $list = $('<ul />');
|
var $list = $('<ul />')
|
||||||
$list.addClass('list-group');
|
.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');
|
.addClass('list-group-item')
|
||||||
$item.addClass('zuul-change-job');
|
.addClass('zuul-change-job')
|
||||||
|
.append(zuul.format.job(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;
|
|
||||||
}
|
|
||||||
|
|
||||||
$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);
|
|
||||||
$list.append($item);
|
$list.append($item);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -195,8 +255,9 @@
|
||||||
if (pipeline.change_queues.length > 1 &&
|
if (pipeline.change_queues.length > 1 &&
|
||||||
headNum === 0) {
|
headNum === 0) {
|
||||||
var name = changeQueue.name;
|
var name = changeQueue.name;
|
||||||
if (name.length > 32) {
|
var short_name = name;
|
||||||
short_name = name.substr(0, 32) + '...';
|
if (short_name.length > 32) {
|
||||||
|
short_name = short_name.substr(0, 32) + '...';
|
||||||
}
|
}
|
||||||
$html.append(
|
$html.append(
|
||||||
$('<p />')
|
$('<p />')
|
||||||
|
|
|
@ -22,11 +22,17 @@ 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-result,
|
|
||||||
.zuul-change-id {
|
.zuul-change-id {
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.zuul-result {
|
||||||
|
float: right;
|
||||||
|
width: 70px;
|
||||||
|
height: 15px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.zuul-spinner,
|
.zuul-spinner,
|
||||||
.zuul-spinner:hover {
|
.zuul-spinner:hover {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
@ -41,6 +47,11 @@ under the License.
|
||||||
transition-duration: 0.4s;
|
transition-duration: 0.4s;
|
||||||
cursor: progress;
|
cursor: progress;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.zuul-change-job {
|
||||||
|
padding: 5px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
Loading…
Reference in New Issue