openstack
/
openstack-health
Code Issues Proposed changes

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
This commit is contained in:
Tim 2016-02-23 12:19:04 -07:00
parent 972e247b32
commit 6313378460
4 changed files with 66 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/js/directives/chart-bar-horizontal.js
View File

@ -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') {

31
app/styles/_openstack-health.scss Normal file
View File

@ -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;
}
}
}

3
app/styles/main.scss
View File

@ -6,4 +6,5 @@
@import 'nv.d3';
@import 'header';
@import 'footer';
@import 'breadcrumbs'
@import 'breadcrumbs';
@import 'openstack-health';

64
app/views/home.html
View File

@ -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>