From 6b1a218649cfebac5ebc9266296c54f84003b4b8 Mon Sep 17 00:00:00 2001
From: Joshua Hesketh <josh@nitrotech.org>
Date: Fri, 21 Mar 2014 14:40:04 +1100
Subject: [PATCH] Add in progress bars for jobs

Also tweak style to fit large sets of jobs better.

Change-Id: I692a149a7d02a36c7f2fb481b18dd79d9da16f1b
---
 etc/status/public_html/app.js     | 163 ++++++++++++++++++++----------
 etc/status/public_html/index.html |  13 ++-
 2 files changed, 124 insertions(+), 52 deletions(-)

diff --git a/etc/status/public_html/app.js b/etc/status/public_html/app.js
index 16195e8e31..f8e6af282e 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 0c51ee75a4..c3bcf00486 100644
--- a/etc/status/public_html/index.html
+++ b/etc/status/public_html/index.html
@@ -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>