From f8de8ba8b325cc0bf0ec54c9de2b95af0705215f Mon Sep 17 00:00:00 2001
From: Sean Dague <sean.dague@samsung.com>
Date: Mon, 25 Nov 2013 14:12:20 -0500
Subject: [PATCH] create a jobwrapper span to address long job names spillover

Really long job names like gate-tempest-devstack-vm-neutron-large-ops
end up having a really negative effect on the zuul status page as
it pushes their status bar down into the next row, making it really
confusing about what's going on.

Fix this through making a jobwrapper class which is display: table,
so it is at least clear what goes with what. Longer term we may
want to do something more clever about overflows, but this at least
removes some confusion.

Change-Id: I1e6130724e59748cbf88996120a377498de26a36
---
 modules/openstack_project/files/zuul/status.html | 6 +++++-
 modules/openstack_project/files/zuul/status.js   | 4 ++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/modules/openstack_project/files/zuul/status.html b/modules/openstack_project/files/zuul/status.html
index f74c9c173f..57fc8d8c62 100644
--- a/modules/openstack_project/files/zuul/status.html
+++ b/modules/openstack_project/files/zuul/status.html
@@ -91,6 +91,10 @@ td.tree {
 .change > .header > .time {
     float: right;
 }
+.jobwrapper {
+    display: table;
+    width: 100%;
+}
 .job {
     display: block;
     line-height: 1.5;
@@ -242,7 +246,7 @@ progress[aria-valuenow]:before  {
       Queue lengths: <span id="trigger_event_queue_length"></span> events,
       <span id="result_event_queue_length"></span> results.
       &nbsp;&nbsp;&nbsp;&nbsp;
-      Filter projects: 
+      Filter projects:
       <span class="projects_filter_container">
         <input type="text" id="projects_filter" />
         <!--
diff --git a/modules/openstack_project/files/zuul/status.js b/modules/openstack_project/files/zuul/status.js
index 86eb10e281..a9861c5190 100644
--- a/modules/openstack_project/files/zuul/status.js
+++ b/modules/openstack_project/files/zuul/status.js
@@ -269,7 +269,7 @@ function format_change(change, change_queue) {
         } else if (result == 'UNSTABLE') {
             result_class += " result_unstable";
         }
-        html += '<span class="job">';
+        html += '<span class="jobwrapper"><span class="job">';
         if (job['url'] !== null) {
             html += '<a href="'+job['url']+'">';
         }
@@ -287,7 +287,7 @@ function format_change(change, change_queue) {
         if (job['voting'] == false) {
             html += ' (non-voting)';
         }
-        html += '</span>';
+        html += '</span></span>';
     });
 
     html += '</div></div></td></tr>';