Tabify the eval page

The different types of types (new, removed, newly failing, and so
on) now each have their own tab.
This commit is contained in:
Eelco Dolstra 2013-08-28 17:06:08 +02:00
parent 07747b7e88
commit 2f7071ee9d
2 changed files with 90 additions and 77 deletions

View file

@ -27,85 +27,92 @@ c.uri_for(c.controller('JobsetEval').action_for('view'),
<div class="alert">Couldn't find an evaluation to compare to.</div>
[% END %]
<ul class="nav nav-tabs">
<li class="active"><a href="#tabs-status" data-toggle="tab">Job status</a></li>
<li><a href="#tabs-inputs" data-toggle="tab">Inputs</a></li>
</ul>
<div class="tab-content">
<div id="tabs-status" class="tab-pane active">
<form class="form-search">
<input name="filter" type="text" class="input-large search-query" placeholder="Search jobs by name..." [% HTML.attributes(value => filter) %]/>
<input name="compare" type="hidden" [% HTML.attributes(value => otherEval.id) %]/>
<input name="full" type="hidden" [% HTML.attributes(value => full) %]/>
</form>
<ul class="nav nav-tabs">
[% IF nowFail.size > 0 %]
<li><a href="#tabs-now-fail" data-toggle="tab"><span class="text-warning">Newly-failing jobs</span></a></li>
[% END %]
[% IF nowSucceed.size > 0 %]
<li><a href="#tabs-now-succeed" data-toggle="tab"><span class="text-success">Newly-succeeding jobs</span></a></li>
[% END %]
[% IF new.size > 0 %]
<li><a href="#tabs-new" data-toggle="tab">New jobs</a></li>
[% END %]
[% IF removed.size > 0 %]
<li><a href="#tabs-removed" data-toggle="tab">Removed jobs</a></li>
[% END %]
[% IF stillFail.size > 0 %]
<li><a href="#tabs-still-fail" data-toggle="tab">Still-failing jobs</a></li>
[% END %]
[% IF stillSucceed.size > 0 %]
<li><a href="#tabs-still-succeed" data-toggle="tab">Still-succeeding jobs</a></li>
[% END %]
[% IF unfinished.size > 0 %]
<li><a href="#tabs-unfinished" data-toggle="tab">Queued jobs</a></li>
[% END %]
<li><a href="#tabs-inputs" data-toggle="tab">Inputs</a></li>
</ul>
[% BLOCK renderSome %]
[% size = builds.size; max = full ? size : 30; %]
[% INCLUDE renderBuildListHeader unsortable=1 %]
[% size = builds.size; max = full ? size : 250; %]
[% INCLUDE renderBuildListBody builds=builds.slice(0, (size > max ? max : size) - 1)
hideProjectName=1 hideJobsetName=1 %]
[% IF size > max; params = c.req.params; params.full = 1 %]
<tr><td class="centered" colspan="6"><a href="[% c.uri_for(c.controller('JobsetEval').action_for('view'), [eval.id], params) %]"><em>([% size - max %] more builds omitted)</em></a></td></tr>
[% END %]
[% INCLUDE renderBuildListFooter %]
[% END %]
[% INCLUDE renderBuildListHeader unsortable=1 %]
<div class="tab-content">
[% IF unfinished.size > 0 %]
<tr><th class="subheader" colspan="6"><strong>Queued</strong> jobs</th></tr>
[% INCLUDE renderSome builds=unfinished %]
[% END %]
<div id="tabs-now-fail" class="tab-pane">
[% INCLUDE renderSome builds=nowFail %]
</div>
[% IF new.size > 0 %]
<tr><th class="subheader" colspan="6"><strong>New</strong> jobs</th></tr>
<div id="tabs-now-succeed" class="tab-pane">
[% INCLUDE renderSome builds=nowSucceed %]
</div>
<div id="tabs-new" class="tab-pane">
[% INCLUDE renderSome builds=new %]
[% END %]
</div>
[% IF removed.size > 0 %]
<tr><th class="subheader" colspan="6"><strong>Removed</strong> jobs</th></tr>
[% size = removed.size; max = full ? size : 30; %]
<div id="tabs-removed" class="tab-pane">
<table class="table table-striped table-condensed clickable-rows">
<thead>
<tr><th>Job</th><th>System</th></tr>
</thead>
<tbody>
[% size = removed.size; max = full ? size : 250; %]
[% FOREACH j IN removed.slice(0,(size > max ? max : size) - 1) %]
<tr>
<td colspan="2"></td>
<td colspan="2">[% INCLUDE renderJobName project=project.name jobset=jobset.name job=j.job %]</td>
<td colspan="2"><tt>[% j.system %]</tt></td>
<td>[% INCLUDE renderJobName project=project.name jobset=jobset.name job=j.job %]</td>
<td><tt>[% j.system %]</tt></td>
</tr>
[% END %]
[% IF size > max; params = c.req.params; params.full = 1 %]
<tr><td class="centered" colspan="6"><a href="[% c.uri_for(c.controller('JobsetEval').action_for('view'), [eval.id], params) %]"><em>([% size - max %] more jobs omitted)</em></a></td></tr>
[% END %]
<tr><td class="centered" colspan="2"><a href="[% c.uri_for(c.controller('JobsetEval').action_for('view'), [eval.id], params) %]"><em>([% size - max %] more jobs omitted)</em></a></td></tr>
[% END %]
</tbody>
</table>
</div>
[% IF nowFail.size > 0 %]
<tr><th class="subheader" colspan="6">Jobs that now <strong>fail</strong></th></tr>
[% INCLUDE renderSome builds=nowFail %]
[% END %]
[% IF nowSucceed.size > 0 %]
<tr><th class="subheader" colspan="6">Jobs that now <strong>succeed</strong></th></tr>
[% INCLUDE renderSome builds=nowSucceed %]
[% END %]
[% IF stillFail.size > 0 %]
<tr><th class="subheader" colspan="6">Jobs that still <strong>fail</strong></th></tr>
<div id="tabs-still-fail" class="tab-pane">
[% INCLUDE renderSome builds=stillFail %]
[% END %]
</div>
[% IF stillSucceed.size > 0 %]
<tr><th class="subheader" colspan="6">Jobs that still <strong>succeed</strong></th></tr>
<div id="tabs-still-succeed" class="tab-pane">
[% INCLUDE renderSome builds=stillSucceed %]
[% END %]
[% INCLUDE renderBuildListFooter %]
[% IF c.user_exists %]
<p>
<a class="btn" href="[% c.uri_for(c.controller('JobsetEval').action_for('release'), [eval.id]) %]">Release</a>
</p>
[% END %]
</div>
<div id="tabs-unfinished" class="tab-pane">
[% INCLUDE renderSome builds=unfinished %]
</div>
<div id="tabs-inputs" class="tab-pane">

View file

@ -50,6 +50,17 @@ $(document).ready(function() {
$(".hydra-popover").popover({});
$(function() {
if (window.location.hash) {
$(".nav-tabs a[href='" + window.location.hash + "']").tab('show');
}
/* If no tab is active, show the first one. */
$(".nav-tabs").each(function() {
if ($("li.active", this).length > 0) return;
$("a", $("li", this).first()).tab('show');
});
/* Ensure that pressing the back button on another page
navigates back to the previously selected tab on this
page. */
@ -58,10 +69,5 @@ $(document).ready(function() {
var id = e.target.toString().match(pattern)[0];
history.replaceState(null, "", id);
});
$(function() {
if (window.location.hash) {
$(".nav a[href='" + window.location.hash + "']").tab('show');
}
})
});