From 966990018435320df39e338e9a948511060df4bb Mon Sep 17 00:00:00 2001
From: Sean Dague <sean.dague@samsung.com>
Date: Fri, 10 Jan 2014 10:55:13 -0500
Subject: [PATCH] provide time in queue in zuul ui

this change adds the time in the queue to the zuul ui, to make it
much easier to understand how backed up we are at the moment. A
judgment call is made that changes over 2hrs in queue get their
times turned yellow, and changes over 4hrs in the queue get their
times turned red.

this makes the header now 2 lines of output, and some padding
fixes were applied to make the compact version not have the ugly
white underbar in them.

For periodic jobs, we need to force a &nbsp; to get the block
layout to hold.

Change-Id: I7ca65b249aea65b2d93e2330d5f4ee20cdb913fd
---
 .../openstack_project/files/zuul/status.html  | 12 +++-
 .../openstack_project/files/zuul/status.js    | 61 +++++++++++++------
 2 files changed, 55 insertions(+), 18 deletions(-)

diff --git a/modules/openstack_project/files/zuul/status.html b/modules/openstack_project/files/zuul/status.html
index 7486afb4a8..310ddb2f03 100644
--- a/modules/openstack_project/files/zuul/status.html
+++ b/modules/openstack_project/files/zuul/status.html
@@ -85,7 +85,7 @@ td.tree {
 .change > .header {
     background: #E2ECEF;
     color: black;
-    margin: -2px -2px 2px -2px;
+    margin: -2px;
     padding: 4px;
 }
 .change > .header > .changeid {
@@ -97,6 +97,9 @@ td.tree {
 .change > .hover {
     background: #F3FDFF;
 }
+.jobs {
+    padding-top: 4px;
+}
 .jobwrapper {
     display: table;
     width: 100%;
@@ -111,12 +114,19 @@ td.tree {
 .result_success {
     color: #007f00;
 }
+
+.queue_bad,
 .result_failure {
     color: #cf2f19;
 }
+.queue_warn,
 .result_unstable {
     color: #e39f00;
 }
+.queue_good {
+    color: #888888;
+}
+
 #graph-container img {
     margin-left: 10px;
 }
diff --git a/modules/openstack_project/files/zuul/status.js b/modules/openstack_project/files/zuul/status.js
index 2602dcc2fb..0c22ec3218 100644
--- a/modules/openstack_project/files/zuul/status.js
+++ b/modules/openstack_project/files/zuul/status.js
@@ -16,6 +16,20 @@ window.zuul_enable_status_updates = true;
 window.zuul_filter = [];
 window.zuul_collapsed_exceptions = [];
 
+function format_enqueue_time(time) {
+    var hours = 60 * 60 * 1000;
+    var now = Date.now();
+    var delta = now - time;
+    var status = "queue_good";
+    var text = format_time(delta, true);
+    if (delta > (4 * hours)) {
+        status = "queue_bad";
+    } else if (delta > (2 * hours)) {
+        status = "queue_warn";
+    }
+    return '<span class="' + status + '">' + text + '</span>';
+}
+
 function format_time(ms, words) {
     if (ms == null) {
         return "unknown";
@@ -235,21 +249,6 @@ function format_change(change, change_queue) {
             'onmouseout="$(this).removeClass(\'hover\')">';
 
     html += '<span class="project">' + change['project'] + '</span>';
-    var id = change['id'];
-    var url = change['url'];
-    if (id !== null) {
-        if (id.length == 40) {
-            id = id.substr(0,7);
-        }
-        html += '<span class="changeid">';
-        if (url !== null) {
-            html += '<a href="'+url+'">';
-        }
-        html += id;
-        if (url !== null) {
-            html += '</a>';
-        }
-    }
 
     display = $('#expandByDefault').is(':checked');
     safe_change_id = safe_id(change['id']);
@@ -259,9 +258,37 @@ function format_change(change, change_queue) {
         display = !display;
     }
 
-    html += '</span><span class="time">';
+    html += '<span class="time">';
     html += format_time(change['remaining_time'], true);
-    html += '</span></div><div class="jobs"';
+    html += '</span><br/>';
+
+    // Row #2 of the header (change id and enqueue time)
+    html += '<span class="changeid"> ';
+    var id = change['id'];
+    var url = change['url'];
+    if (id !== null) {
+        if (id.length == 40) {
+            id = id.substr(0,7);
+        }
+        if (url !== null) {
+            html += '<a href="'+url+'">';
+        }
+        html += id;
+        if (url !== null) {
+            html += '</a>';
+        }
+    } else {
+        // if there is not changeset we still need forced content, otherwise
+        // the layout doesn't work
+        html += '&nbsp;';
+    }
+    html += '</span>';
+    html += '<span class="time">' + format_enqueue_time(change['enqueue_time']) + '</span>';
+
+    html += '</div>';
+
+    // Job listing from here down
+    html += '<div class="jobs"';
     if (display == false) {
         html += ' style="display: none;"'
     }