Add naive quick-filter/search

rwojsznis · Mar 6, 2018 · ef09299 · ef09299
1 parent e67d80f
commit ef09299
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 19 deletions.
diff --git a/lib/sidekiq/expected_failures/web.rb b/lib/sidekiq/expected_failures/web.rb
@@ -7,8 +7,12 @@ def self.registered(app)
         app.helpers do
           def link_to_details(job)
             data = []
-            job["args"].each_with_index { |argument, index| data << "data-#{index+1}='#{h argument.inspect}'" }
-            "<a href='#' #{data.join(' ')} title='#{job["worker"]}'>Details</a>"
+            search = ""
+            job["args"].each_with_index do |argument, index|
+              data << "data-#{index+1}='#{h argument.inspect}'"
+              search << h(argument.inspect)
+            end
+            "<a href='#' data-search='#{search.downcase}' #{data.join(' ')} title='#{job["worker"]}'>Details</a>"
           end
         end
 

diff --git a/web/assets/expected.js b/web/assets/expected.js
@@ -1,25 +1,52 @@
  $(function() {
   function mapDataAttributes(element) {
-    html = "";
+    var html = "";
     $.each(element.data(), function( key, value ) {
       html += "<tr><th>Argument #" + key + "</th><td>" + value + "</td></tr>";
     });
     return html;
   }
 
-  $('#expected tbody td:last-child > a').live('click', function(e){
+  window.addEventListener("keydown", function (event) {
+    if (event.keyCode === 114 || ((event.ctrlKey || event.metaKey) && event.keyCode === 70)) {
+      $('#search').toggleClass('hidden').focus();
+      event.preventDefault();
+    }
+  });
+
+  $('#search').live('keyup', function(event) {
+    var query = $(this).val().toLowerCase();
+    if (query.length) {
+      $('.search-warning').remove();
+      $('#expected tbody tr').each(function(index) {
+        if ($(this).find('[data-search*="' + query + '"]').length) {
+          $(this).show();
+        } else {
+          $(this).hide();
+        }
+      });
+
+      if (!($('#expected tbody tr:visible').length)) {
+        $('#expected tbody').append('<tr class="search-warning"><td colspan="5">Nothing found!</td></tr>');
+      }
+    } else {
+      $('#expected tbody tr').show();
+    }
+  });
+
+  $('#expected tbody td:last-child > a').live('click', function(event){
     $('#job-details .modal-body table tbody').html(mapDataAttributes($(this)));
     $('#job-details .modal-title').text($(this).attr('title'));
     $('#job-details').modal('show');
 
-    e.preventDefault();
+    event.preventDefault();
   });
 
-  $('#clear-jobs select').live('change', function(e){
+  $('#clear-jobs select').live('change', function(event) {
     $(this).parent('form').submit();
   });
 
-  $('#filter-jobs select').live('change', function(e){
+  $('#filter-jobs select').live('change', function(event) {
     location.href = $(this).val();
   });
  });
diff --git a/web/views/expected_failures.erb b/web/views/expected_failures.erb
@@ -3,9 +3,30 @@
 </script>
 
 <style type="text/css">
-.modal-dialog {
-  min-width: 85vw;
-}
+  @media screen and (min-width: 800px) {
+    .dl-horizontal dt {
+      width: 320px;
+    }
+
+    .dl-horizontal dd {
+      margin-left: 330px;
+    }
+  }
+
+  .modal-dialog {
+    min-width: 85vw;
+  }
+
+  .simple-search {
+    width: 100%;
+    margin-bottom: 10px;
+  }
+
+  .search-warning {
+    text-align: center;
+    font-weight: 700;
+    padding: 10px;
+  }
 </style>
 
 <h3>Expected failures log
@@ -86,6 +107,9 @@
 
   <%= erb :_paging, locals: { url: "#{root_path}expected_failures/day/#{@date}" } %>
 
+  <p class="clearfix"></p>
+  <input autocomplete="off" type="text" id="search" class="simple-search hidden" placeholder="Search visible results" />
+
   <table id="expected" class="queues table table-hover table-bordered table-striped table-white">
     <thead>
       <th>Datetime</th>
@@ -94,15 +118,17 @@
       <th>Queue</th>
       <th>Arguments</th>
     </thead>
-    <% @jobs.each do |job| %>
-      <tr>
-        <td><%= Time.parse(job['failed_at']).strftime('%m/%d/%Y %H:%M:%S') %></td>
-        <td><%= job["worker"] %></td>
-        <td><%= job["exception"] %> <small>(<%= job["error"]%>)</small></td>
-        <td><a href="<%= "#{root_path}/queues/#{job["queue"]}"%>"><%= job["queue"] %></a></td>
-        <td><%= link_to_details(job) %></td>
-      </tr>
-    <% end %>
+    <tbody>
+      <% @jobs.each do |job| %>
+        <tr>
+          <td><%= Time.parse(job['failed_at']).strftime('%m/%d/%Y %H:%M:%S') %></td>
+          <td><%= job["worker"] %></td>
+          <td><div data-search="<%= job['exception'].to_s.downcase %><%= h job["error"].to_s.downcase %>"><%= job["exception"] %> <small>(<%= h job["error"]%>)</small></div></td>
+          <td><a href="<%= "#{root_path}/queues/#{job["queue"]}"%>"><%= job["queue"] %></a></td>
+          <td><%= link_to_details(job) %></td>
+        </tr>
+      <% end %>
+    </tbody>
   </table>
 
   <%= erb :_paging, locals: { url: "#{root_path}expected_failures/day/#{@date}" } %>