changed to filter by keyup with debounce

app/vmalert/static/js/custom.js

@@ -17,16 +17,28 @@ function toggleByID(id) {
     }
 }
 
-function filter(){
-    if($('#groups').is(':checked')){
-        filterGroups();
-    }else{
-        filterRules();
-    }
-}
+//http://davidwalsh.name/javascript-debounce-function
+function debounce(func, wait, immediate) {
+    var timeout;
+    return function() {
+        var context = this, args = arguments;
+        var later = function() {
+            timeout = null;
+            if (!immediate) func.apply(context, args);
+        };
+        var callNow = immediate && !timeout;
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+        if (callNow) func.apply(context, args);
+    };
+};
 
-function filterGroups(){
-    $(".group-heading").show()
+$('#filter').on("keyup", (debounce(function(){
+    console.log("type")
+    filter();
+},500)));
+
+function filter(){
     $(".rule-table").removeClass('show');
     $(".rule").show();
     
@@ -35,52 +47,61 @@ function filterGroups(){
         return
     }
 
+    $(".group-heading").hide()
+
+    filterRuleByName();
+    filterRuleByLabels();
+    filterGroupsByName();
+}
+
+function filterGroupsByName(){
     $( ".group-heading" ).each(function() {
         var groupName = $(this).attr('data-group-name');
         var filter = $("#filter").val()
 
-        if (groupName.indexOf(filter) < 0){
-            let id = $(this).attr('data-bs-target')
-            $("div[id='"+id+"'").removeClass('show');
-            $(this).hide();
-        }else{
+        if (groupName.indexOf(filter) >= 0){
+            let target = $(this).attr("data-bs-target");
+            
             $(this).show();
+            $("div[id='"+target+"'] .rule").show();
         }
     });
 }
 
-function filterRules(){
-    $(".group-heading").show()
-    $(".rule-table").removeClass('show');
-    $(".rule").show();
-
-    if($("#filter").val().length === 0){
-        return
-    }
-
+function filterRuleByName(){
     $( ".rule" ).each(function() {
         var ruleName = $(this).attr("data-rule-name");
         var filter = $("#filter").val()
-        let target = $(this).attr('data-bs-target')
-
+        
         if (ruleName.indexOf(filter) < 0){
             $(this).hide();
         }else{
+            let target = $(this).attr('data-bs-target')
+
             $("div[id='rules-"+target+"'").addClass('show');
+            $("div[data-bs-target='rules-"+target+"'").show();
             $(this).show();
         }
-    });
+    });  
+}
 
-    $( ".rule-table" ).each(function() {
-        let c = $( ".row", this ).filter(function() {
-            return $(this).is(":visible")
-        }).length;
-        if (c === 0) {
-            let target = $(this).attr('id')
-            $("div[data-bs-target='"+target+"'").removeClass('show');
-            $("div[data-bs-target='"+target+"'").hide()
+function filterRuleByLabels(){
+    $( ".rule" ).each(function() {
+        let filter = $("#filter").val()
+        
+        let matches = $( ".label", this ).filter(function() {
+            let label = $(this).text();
+            return label.indexOf(filter) >= 0;
+        }).length; 
+
+        if (matches > 0){
+            let target = $(this).attr('data-bs-target')
+
+            $("div[id='rules-"+target+"'").addClass('show');
+            $("div[data-bs-target='rules-"+target+"'").show();
+            $(this).show();
         }
-    });
+    }); 
 }
 
 $(document).ready(function () {

app/vmalert/web.qtpl

@@ -75,14 +75,7 @@ btn-primary
          <a class="btn btn-primary" role="button" onclick="expandAll()">Expand All</a>
          <a class="btn {%= buttonActive(filter, "unhealthy") %}" role="button" onclick="location.href='?filter=unhealthy'" title="Show only rules with errors">Unhealthy</a>
          <a class="btn {%= buttonActive(filter, "noMatch") %}" role="button" onclick="location.href='?filter=noMatch'" title="Show only rules matching no time series during last evaluation">NoMatch</a>
-         <p>
-          <input id="filter" class="input-group" role="input"></input>
-            <a class="btn btn-primary" role="button" onclick="filter()">Filter</a>
-            <form>
-              <input type="radio" name="filterType" id="groups" role="input" checked>By Group Name</input>
-              <input type="radio" name="filterType" id="rules" role="input">By Rule Name</input>
-            </form>
-        </p>
+         <input id="filter" class="input-group" role="input"></input>
         {%  if len(groups) > 0 %}
             {% for _, g := range groups  %}
                   <div
@@ -142,7 +135,7 @@ btn-primary
                                         <div class="col-12 mb-2">
                                             {% if len(r.Labels) > 0 %} <b>Labels:</b>{% endif %}
                                             {% for k, v := range r.Labels %}
-                                                    <span class="ms-1 badge bg-primary">{%s k %}={%s v %}</span>
+                                                    <span class="ms-1 badge bg-primary label">{%s k %}={%s v %}</span>
                                             {% endfor %}
                                         </div>
                                         {% if r.LastError != "" %}