Tabify the eval page

The different types of types (new, removed, newly failing, and so
on) now each have their own tab.

src/root/jobset-eval.tt

@@ -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 %]
+  <div id="tabs-now-fail" class="tab-pane">
-      <tr><th class="subheader" colspan="6"><strong>Queued</strong> jobs</th></tr>
+    [% INCLUDE renderSome builds=nowFail %]
-      [% INCLUDE renderSome builds=unfinished %]
+  </div>
-    [% END %]
 
-    [% IF new.size > 0 %]
+  <div id="tabs-now-succeed" class="tab-pane">
-      <tr><th class="subheader" colspan="6"><strong>New</strong> jobs</th></tr>
+    [% INCLUDE renderSome builds=nowSucceed %]
+  </div>
+
+  <div id="tabs-new" class="tab-pane">
     [% INCLUDE renderSome builds=new %]
-    [% END %]
+  </div>
 
-    [% IF removed.size > 0 %]
+  <div id="tabs-removed" class="tab-pane">
-      <tr><th class="subheader" colspan="6"><strong>Removed</strong> jobs</th></tr>
+    <table class="table table-striped table-condensed clickable-rows">
-      [% size = removed.size; max = full ? size : 30; %]
+      <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>[% INCLUDE renderJobName project=project.name jobset=jobset.name job=j.job %]</td>
-          <td colspan="2">[% INCLUDE renderJobName project=project.name jobset=jobset.name job=j.job %]</td>
+            <td><tt>[% j.system %]</tt></td>
-          <td colspan="2"><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>
+          <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 %]
         [% END %]
+      </tbody>
+    </table>
+  </div>
 
-    [% IF nowFail.size > 0 %]
+  <div id="tabs-still-fail" class="tab-pane">
-      <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>
     [% INCLUDE renderSome builds=stillFail %]
-    [% END %]
+  </div>
 
-    [% IF stillSucceed.size > 0 %]
+  <div id="tabs-still-succeed" class="tab-pane">
-      <tr><th class="subheader" colspan="6">Jobs that still <strong>succeed</strong></th></tr>
     [% INCLUDE renderSome builds=stillSucceed %]
-    [% END %]
+  </div>
-
-    [% 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 id="tabs-unfinished" class="tab-pane">
+    [% INCLUDE renderSome builds=unfinished %]
   </div>
 
   <div id="tabs-inputs" class="tab-pane">

src/root/static/js/common.js

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