From 4863b60280db05e235960119a1caf925cd1c7c95 Mon Sep 17 00:00:00 2001
From: Joshua Hesketh <josh@nitrotech.org>
Date: Fri, 21 Mar 2014 14:19:06 +1100
Subject: [PATCH] Update zuul's status page to bootstrap 3.1.1

Also utilise bootstrap's components more for display.

Change-Id: I7c89a5cda2cdb9f4b3e1d473f7d7792840e9fd61
---
 etc/status/fetch-dependencies.sh              |   8 +-
 etc/status/public_html/app.js                 |  70 ++++++-----
 etc/status/public_html/index.html             | 118 +++---------------
 .../public_html/status-basic.json-sample      |   2 +-
 4 files changed, 64 insertions(+), 134 deletions(-)

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