From 6313378460a560e0278e7cd7e2571a77d94b1cfc Mon Sep 17 00:00:00 2001
From: Tim <timothy.jas.buckley@hpe.com>
Date: Tue, 23 Feb 2016 12:19:04 -0700
Subject: [PATCH] Improve status table CSS.

This adds several small improvements to the CSS for the status table
on the homepage. The table itself is now seamlessly enclosed in the
outer panel, and the bar chart column is now capped at 300px with
empty space to the side removed. Additionally, the chart is hidden
on small and extra-small layouts to prevent the table from overflowing
when there isn't enough space for it to fit.

Change-Id: Id17419e381d3a4e18caf10c4a2c96ad152c28963
---
 app/js/directives/chart-bar-horizontal.js |  4 +-
 app/styles/_openstack-health.scss         | 31 +++++++++++
 app/styles/main.scss                      |  3 +-
 app/views/home.html                       | 64 +++++++++++------------
 4 files changed, 66 insertions(+), 36 deletions(-)
 create mode 100644 app/styles/_openstack-health.scss

diff --git a/app/js/directives/chart-bar-horizontal.js b/app/js/directives/chart-bar-horizontal.js
index 3f4df4ef..6036bf44 100644
--- a/app/js/directives/chart-bar-horizontal.js
+++ b/app/js/directives/chart-bar-horizontal.js
@@ -25,7 +25,9 @@ function chartBarHorizontal() {
 
     var svg = d3.select(el[0]).append('svg')
       .attr('width', attrs.width)
-      .attr('height', attrs.height);
+      .attr('height', attrs.height)
+      .style('width', attrs.width + 'px')
+      .style('height', attrs.height + 'px');
 
     var update = function(data) {
       if (typeof data === 'undefined') {
diff --git a/app/styles/_openstack-health.scss b/app/styles/_openstack-health.scss
new file mode 100644
index 00000000..2dbfa603
--- /dev/null
+++ b/app/styles/_openstack-health.scss
@@ -0,0 +1,31 @@
+table.status-table {
+    width: 100%;
+    overflow: auto;
+
+    thead {
+        white-space: nowrap;
+
+        th[sort-field="name"] {
+            width: 100%;
+        }
+
+        th:not(:first-child) {
+            min-width: 75px;
+        }
+
+        th:last-child {
+            @extend .hidden-xs;
+            @extend .hidden-sm;
+
+            min-width: 300px;
+            max-width: 300px;
+        }
+    }
+
+    tbody {
+        td:last-child {
+            @extend .hidden-xs;
+            @extend .hidden-sm;
+        }
+    }
+}
diff --git a/app/styles/main.scss b/app/styles/main.scss
index 473cfeac..ded9a196 100644
--- a/app/styles/main.scss
+++ b/app/styles/main.scss
@@ -6,4 +6,5 @@
 @import 'nv.d3';
 @import 'header';
 @import 'footer';
-@import 'breadcrumbs'
+@import 'breadcrumbs';
+@import 'openstack-health';
diff --git a/app/views/home.html b/app/views/home.html
index d68dd0d1..d04bddcf 100644
--- a/app/views/home.html
+++ b/app/views/home.html
@@ -55,40 +55,36 @@
                 <div class="panel-heading">
                     <h3 class="panel-title">Project status</h3>
                 </div>
-                <div class="panel-body">
-                    <table table-sort class="table table-hover" data="home.projects">
-                        <thead>
-                            <tr>
-                                <th field="number" class="text-center">#</th>
-                                <th sort-field="name" class="text-center">Project Name</a></th>
-                                <th sort-field="passes" class="text-center">Passes</th>
-                                <th sort-field="failures" class="text-center">Failures</th>
-                                <th sort-field="passRate" class="text-center">% Passes</th>
-                                <th sort-default sort-field="failRate" class="text-center">% Failures</th>
-                                <th field="barGraph" class="text-center" style="min-width:320px">Bar Graph</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr table-ref="table" ng-repeat="p in home.projects | filter:home.searchProject"
-                             ng-class="p.failRate > 0.15 ? 'danger' : p.failRate > 0.08 ? 'warning' : p.failRate > 0 ? 'info' : 'success'">
-                                <td class="text-right">{{$index+1}}</td>
-                                <td class="text-left">
-                                  <a ui-sref="groupedRuns({ runMetadataKey: home.groupKey, name: p.name })">{{p.name}}</a>
-                                </td>
-                                <td class="text-right">{{p.passes|number}}</td>
-                                <td class="text-right">{{p.failures|number}}</td>
-                                <td class="text-right">{{p.passRate*100|number:2}}</td>
-                                <td class="text-right">{{p.failRate*100|number:2}}</td>
-                                <td>
-                                  <div id="chart">
-                                    <chart-bar-horizontal data="p.data" height="20">
-                                    </chart-bar-horizontal>
-                                  </div>
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
+                <table table-sort class="table table-hover status-table" data="home.projects">
+                    <thead>
+                        <tr>
+                            <th field="number" class="text-center">#</th>
+                            <th sort-field="name" class="text-center">Project Name</a></th>
+                            <th sort-field="passes" class="text-center">Passes</th>
+                            <th sort-field="failures" class="text-center">Failures</th>
+                            <th sort-field="passRate" class="text-center">% Passes</th>
+                            <th sort-default sort-field="failRate" class="text-center">% Failures</th>
+                            <th class="text-center">Bar Graph</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr table-ref="table" ng-repeat="p in home.projects | filter:home.searchProject"
+                         ng-class="p.failRate > 0.15 ? 'danger' : p.failRate > 0.08 ? 'warning' : p.failRate > 0 ? 'info' : 'success'">
+                            <td class="text-right">{{$index+1}}</td>
+                            <td class="text-left">
+                              <a ui-sref="groupedRuns({ runMetadataKey: home.groupKey, name: p.name })">{{p.name}}</a>
+                            </td>
+                            <td class="text-right">{{p.passes|number}}</td>
+                            <td class="text-right">{{p.failures|number}}</td>
+                            <td class="text-right">{{p.passRate*100|number:2}}</td>
+                            <td class="text-right">{{p.failRate*100|number:2}}</td>
+                            <td>
+                                <chart-bar-horizontal data="p.data" width="300" height="20">
+                                </chart-bar-horizontal>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
             </div>
         </div>
     </div>