Ability to select specific CI results

This change adds ability to see only selected rows (by clicking on them),
to get more illustrative view of a specific CI robot by comparing its
results with some Jenkins job, for example.

Change-Id: I34ab24e1eb7f989d131025ac9cf9dac70fc3fe76

ciwatch/static/compare.js

@@ -0,0 +1,20 @@
+$(document).ready(function () {
+  $("td.ci-name").parent().click(function () {
+    $(this).toggleClass("selected");
+  });
+
+  $("#select-button").click(function () {
+    if ($(this).hasClass("active")) {
+      $("tr:hidden,tbody:hidden").show();
+      $(this).color = "";
+      $(this).html("Select");
+    } else {
+      $("tr:not(.selected):has(td.ci-name)").hide();
+      $("tbody:not(:has(.selected),:not(:has(td.ci-name)))").hide();
+      $(".selected").removeClass("selected");
+
+      $(this).html("Unselect");
+    }
+  });
+});
+

ciwatch/static/style.css

@@ -6,6 +6,10 @@ table.table {
   background-color: #EEE;
 }
 
+.selected {
+  background-color: #EEF;
+}
+
 .failure {
   color: #C00;
   font-weight: bold;

ciwatch/templates/_usage.html.jinja

@@ -5,3 +5,6 @@
         Click the icons to view relevant logs.
         Newest results are shown furthest to the left.
       </p>
+      <p> 
+        To view specific CI results, click on the row/(s) and click 'select' button.
+      </p>

ciwatch/templates/project.html.jinja

@@ -40,6 +40,7 @@
 
       <button id="verified-1-button" class="btn btn-default" type="button" data-toggle="button">Highlight Jenkins -1 votes</button>
       <button id="verified1-button" class="btn btn-default" type="button" data-toggle="button">Highlight Jenkins +1 votes</button>
+      <button id="select-button" class="btn btn-default" type="button" data-toggle="button">Select</button>
     </div>
 
     <div class="table">
@@ -57,21 +58,22 @@
         {% endfor %}
 
         <tbody>
-
           <tr>
             <td>Patch Set</td>
             {% for patch_set in patch_sets %}
             <td style="text-align:center;">
               <a href="https://review.openstack.org/#/c/{{ "/".join(patch_set.ref.split("/")[-2:]) }}"
-                 data-toggle="popover" data-html="true" data-placement="bottom" title="Commit Message" 
+                 data-toggle="popover" data-html="true" data-placement="bottom" title="Commit Message"
                  data-content="{{ patch_set.commit_message|nl2br }}">
                 <span class="fa fa-external-link"></span>
               </a>
             </td>
             {% endfor %}
           </tr>
+        </tbody>
 
-          {% for owner, results in user_results.iteritems() %}
+        {% for owner, results in user_results.iteritems() %}
+        <tbody>
           <tr class="ci-user"><td colspan="{{ patch_sets|length + 1}}" class="ci-user">{{ owner.name }}</td></tr>
           {% for ci in results %}
           <tr>
@@ -96,8 +98,8 @@
           </tr>
           {% endfor %}
           <tr class="blank-row"></tr>
-          {% endfor %}
         </tbody>
+        {% endfor %}
       </table>
     </div>
 
@@ -105,6 +107,7 @@
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
     <script src="{{ url_for('static', filename='hover.js') }}"></script>
     <script src="{{ url_for('static', filename='verified.js') }}"></script>
+    <script src="{{ url_for('static', filename='compare.js') }}"></script>
 
   </body>
 </html>