From 66d34bff33a9a676f22d06cf09a46aec0d0951b8 Mon Sep 17 00:00:00 2001
From: Evgeny Antyshev <eantyshev@virtuozzo.com>
Date: Sat, 30 Jan 2016 12:09:05 +0000
Subject: [PATCH] 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            | 20 ++++++++++++++++++++
 ciwatch/static/style.css             |  4 ++++
 ciwatch/templates/_usage.html.jinja  |  3 +++
 ciwatch/templates/project.html.jinja | 11 +++++++----
 4 files changed, 34 insertions(+), 4 deletions(-)
 create mode 100644 ciwatch/static/compare.js

diff --git a/ciwatch/static/compare.js b/ciwatch/static/compare.js
new file mode 100644
index 0000000..e8f9adb
--- /dev/null
+++ b/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");
+    }
+  });
+});
+
diff --git a/ciwatch/static/style.css b/ciwatch/static/style.css
index 42a9461..f9ad87f 100644
--- a/ciwatch/static/style.css
+++ b/ciwatch/static/style.css
@@ -6,6 +6,10 @@ table.table {
   background-color: #EEE;
 }
 
+.selected {
+  background-color: #EEF;
+}
+
 .failure {
   color: #C00;
   font-weight: bold;
diff --git a/ciwatch/templates/_usage.html.jinja b/ciwatch/templates/_usage.html.jinja
index ea95e55..de1c44a 100644
--- a/ciwatch/templates/_usage.html.jinja
+++ b/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>
diff --git a/ciwatch/templates/project.html.jinja b/ciwatch/templates/project.html.jinja
index fed371f..919cb28 100644
--- a/ciwatch/templates/project.html.jinja
+++ b/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>