openstack-health/app/views/home.html

148 lines
7.4 KiB
HTML

<header class="bs-header">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">
OpenStack Health
<small>
is a dashboard for visualizing test results of OpenStack CI jobs.
</small>
</h1>
<crumb-menu show-group-key="true"
show-resolution="true"
show-period="true"></crumb-menu>
<loading-indicator></loading-indicator>
<fresh-check></fresh-check>
</div>
</div>
</div>
</header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading panel-controls">
<h3 class="panel-title">Total Jobs</h3>
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-search"></i></div>
<input type="text" class="form-control"
placeholder="Search for {{ home.groupKey }}"
ng-model="home.searchProject"
ng-model-options="{debounce: 250}"
ng-change="home.onSearchChange()">
</div>
</div>
<div class="panel-body">
<chart-line data="home.chartData" width="100%" height="250"
tick-format-x="d"></chart-line>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading panel-controls">
<h3 class="panel-title">Job Failure Rate</h3>
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-search"></i></div>
<input type="text" class="form-control"
placeholder="Search for {{ home.groupKey }}"
ng-model="home.searchProject"
ng-model-options="{debounce: 250}"
ng-change="home.onSearchChange()">
</div>
</div>
<div class="panel-body">
<chart-line data="home.chartDataRate" width="100%" height="250"
force-y="[0,1]" tick-format-x="%"></chart-line>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Failed Tests in Last 10 Failed Runs</h3>
</div>
<div class="table-responsive">
<uib-accordion close-others="false">
<div ng-repeat="(key, value) in home.recentRuns">
<uib-accordion-group
template-url="accordion-group-run.html"
heading="{{ key }}"
is-open="false">
<table table-sort data="value"
class="table table-hover default-cols">
<thead>
<tr>
<th sort-field="test_id">Test ID</th>
<th sort-field="start_time">Start Time</th>
<th sort-default sort-field="stop_time">Stop Time</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(k, v) in value">
<td><a ui-sref="test({ testId: v.test_id })"}>
{{ v.test_id }}</a>
</td>
<td>{{ v.start_time | date:'M/d/yyyy HH:mm' }}</td>
<td>{{ v.stop_time | date:'M/d/yyyy HH:mm' }}</td>
</tr>
</tbody>
</table>
</uib-accordion-group>
</div>
</uib-accordion>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default table-responsive">
<div class="panel-heading panel-controls">
<h3 class="panel-title">{{home.groupKey | replace:'_':' ' | camelcase}} Status</h3>
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-search"></i></div>
<input type="text" class="form-control"
placeholder="Search for {{ home.groupKey }}"
ng-model="home.searchProject"
ng-model-options="{debounce: 250}"
ng-change="home.onSearchChange()">
</div>
</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">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 | regex:'name':home.searchProject"
ng-class="p.failRate | ctxcls">
<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 uib-tooltip-html="p.tooltip" tooltip-placement="top" tooltip-animation="false">
<chart-gauge-horizontal value="1 - p.failRate"
width="300"
height="20"></chart-gauge-horizontal>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>