Add in progress bars for jobs
Also tweak style to fit large sets of jobs better.
Change-Id: I692a149a7d02a36c7f2fb481b18dd79d9da16f1b
diff --git a/etc/status/public_html/app.js b/etc/status/public_html/app.js
index 16195e8..f8e6af2 100644
--- a/etc/status/public_html/app.js
+++ b/etc/status/public_html/app.js
@@ -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');
+ var $list = $('<ul />')
+ .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;
- }
-
- $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);
+ 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 />')
diff --git a/etc/status/public_html/index.html b/etc/status/public_html/index.html
index 0c51ee7..c3bcf00 100644
--- a/etc/status/public_html/index.html
+++ b/etc/status/public_html/index.html
@@ -22,11 +22,17 @@
<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 @@
transition-duration: 0.4s;
cursor: progress;
}
+
+ .zuul-change-job {
+ padding: 5px 10px;
+ }
+
</style>
</head>
<body>