From ace48891b26445274a5058c4b5fed58c483aa603 Mon Sep 17 00:00:00 2001
From: Joshua Hesketh <josh@nitrotech.org>
Date: Sat, 22 Mar 2014 17:18:31 +1100
Subject: [PATCH] Add a filter box to status.html

Allows filtering on the changeid, pipeline or project name similar to
infra's status page

Change-Id: I3f4c5b2de8654f67f5534f4b1e7c44bb5c4cf9e8
---
 etc/status/public_html/app.js | 152 ++++++++++++++++++++++++++++++++--
 1 file changed, 143 insertions(+), 9 deletions(-)

diff --git a/etc/status/public_html/app.js b/etc/status/public_html/app.js
index a397121ff5..22c1ed7ba1 100644
--- a/etc/status/public_html/app.js
+++ b/etc/status/public_html/app.js
@@ -21,6 +21,7 @@
     var $container, $msg, $indicator, $queueInfo, $queueEventsNum,
         $queueResultsNum, $pipelines, $jq;
     var xhr, zuul,
+        current_filter = '',
         demo = location.search.match(/[?&]demo=([^?&]*)/),
         source_url = location.search.match(/[?&]source_url=([^?&]*)/),
         source = demo ?
@@ -28,6 +29,24 @@
             'status.json';
         source = source_url ? source_url[1] : source;
 
+    function set_cookie(name, value) {
+        document.cookie = name + "=" + value + "; path=/";
+    }
+
+    function read_cookie(name, default_value) {
+        var nameEQ = name + "=";
+        var ca = document.cookie.split(';');
+        for(var i=0;i < ca.length;i++) {
+            var c = ca[i];
+            while (c.charAt(0) == ' ') c = c.substring(1, c.length);
+            if (c.indexOf(nameEQ) == 0) {
+                return c.substring(nameEQ.length, c.length);
+            }
+        }
+        return default_value;
+    }
+
+
     zuul = {
         enabled: true,
         collapsed_exceptions: [],
@@ -281,10 +300,13 @@
                     .append($change_progress_row_left)
                     .append($change_progress_row_right)
 
+                $project_span = $('<span />')
+                    .addClass('change_project')
+                    .text(change.project);
+
                 $left = $('<div />')
                     .addClass('col-xs-8')
-                    .html(change.project + '<br />')
-                    .append($change_progress_row);
+                    .append($project_span, $('<br />'), $change_progress_row);
 
                 remaining_time = zuul.format.time(change.remaining_time, true);
                 enqueue_time = zuul.format.enqueue_time(change.enqueue_time);
@@ -333,7 +355,6 @@
                     .append(zuul.format.change_list(change.jobs));
 
                 $header.click(zuul.toggle_patchset);
-                zuul.display_patchset($panel);
                 return $panel;
             },
 
@@ -371,12 +392,68 @@
                             );
                         }
                         $.each(changes, function (changeNum, change) {
-                            $html.append(zuul.format.change_panel(change))
+                            var $panel = zuul.format.change_panel(change);
+                            $html.append($panel)
+                            zuul.display_patchset($panel);
                         });
                     });
                 });
                 return $html;
-            }
+            },
+
+            filter_form_group: function(default_text) {
+                // Update the filter form with a clear button if required
+
+                var $label = $('<label />')
+                    .addClass('control-label')
+                    .attr('for', 'filter_string')
+                    .text('Filters')
+                    .css('padding-right', '0.5em');
+
+                var $input = $('<input />')
+                    .attr('type', 'text')
+                    .attr('id', 'filter_string')
+                    .addClass('form-control')
+                    .attr('title',
+                          'project(s), pipeline(s) or review(s) comma ' +
+                          'separated')
+                    .attr('value', default_text);
+
+                $input.change(zuul.handle_filter_change);
+
+                var $clear_icon = $('<span />')
+                    .addClass('form-control-feedback')
+                    .addClass('glyphicon glyphicon-remove-circle')
+                    .attr('id', 'filter_form_clear_box')
+                    .attr('title', 'clear filter')
+                    .css('cursor', 'pointer');
+
+                $clear_icon.click(function() {
+                    $('#filter_string').val('').change();
+                });
+
+                if (default_text == '') {
+                    $clear_icon.hide();
+                }
+
+                var $form_group = $('<div />')
+                    .addClass('form-group has-feedback')
+                    .append($label, $input, $clear_icon);
+                return $form_group;
+            },
+
+            filter_form: function() {
+                // Build the filter form filling anything from cookies
+
+                $filter_form = $('<form />')
+                    .attr('role', 'form')
+                    .addClass('form-inline')
+                    .submit(zuul.handle_filter_change);
+
+                $filter_form.append(zuul.format.filter_form_group(
+                    current_filter));
+                return $filter_form;
+            },
         },
 
         emit: function () {
@@ -410,8 +487,11 @@
             }
         },
 
-        display_patchset: function($panel) {
-            // Determine if to show or hide the patchset when loaded
+        display_patchset: function($panel, animate) {
+            // Determine if to show or hide the patchset and/or the results
+            // when loaded
+
+            // See if we should hide the body/results
             var $body = $panel.children(':not(.patchset-header)');
             var collapsed_index = zuul.collapsed_exceptions.indexOf(
                 $panel.attr('id'));
@@ -424,9 +504,59 @@
                 // Currently an exception
                 // Do nothing more (will display)
             }
+
+            // Check if we should hide the whole panel
+            var panel_project = $panel.find('.change_project').text()
+                .toLowerCase();
+            var panel_pipeline = $panel.parents('.zuul-pipeline')
+                .children('h3').text().toLowerCase();
+            var panel_change = $panel.attr('id');
+            if (current_filter != '') {
+                show_panel = false;
+                filter = current_filter.trim().split(/[\s,]+/);
+                $.each(filter, function(index, f_val) {
+                    if (f_val != '') {
+                        f_val = f_val.toLowerCase();
+                        if (panel_project.indexOf(f_val) != '-1' ||
+                            panel_pipeline.indexOf(f_val) != '-1' ||
+                            panel_change.indexOf(f_val) != '-1') {
+                            show_panel = true;
+                        }
+                    }
+                });
+                if (show_panel == true) {
+                    $panel.show(animate);
+                }
+                else {
+                    $panel.hide(animate);
+                }
+            }
+            else {
+                $panel.show(animate);
+            }
+        },
+
+        handle_filter_change: function(e) {
+            // Update the filter and save it to a cookie
+            current_filter = $('#filter_string').val();
+            set_cookie('zuul_filter_string', current_filter);
+            if (current_filter == '') {
+                $('#filter_form_clear_box').hide();
+            }
+            else {
+                $('#filter_form_clear_box').show();
+            }
+
+            $('.zuul-change').each(function(index, obj) {
+                $panel = $(obj);
+                zuul.display_patchset($panel, 200);
+            })
+            return false;
         },
     };
 
+    current_filter = read_cookie('zuul_filter_string', current_filter);
+
     $jq = $(zuul);
 
     $jq.on('update-start', function () {
@@ -460,6 +590,9 @@
                        '<span>0</span> results.</p>');
         $queueEventsNum = $queueInfo.find('span').eq(0);
         $queueResultsNum = $queueEventsNum.next();
+
+        $filter_form = zuul.format.filter_form();
+
         $pipelines = $('<div class="row"></div>');
         $zuulVersion = $('<p>Zuul version: <span id="zuul-version-span">' +
                          '</span></p>');
@@ -467,8 +600,9 @@
                         '<span id="last-reconfigured-span"></span></p>');
 
         $container = $('#zuul-container').append($msg, $indicator,
-                                                 $queueInfo, $pipelines,
-                                                 $zuulVersion, $lastReconf);
+                                                 $queueInfo, $filter_form,
+                                                 $pipelines, $zuulVersion,
+                                                 $lastReconf);
 
         zuul.schedule();