add filter by group or rule name to vmalert ui

app/vmalert/static/js/custom.js

@@ -1,8 +1,10 @@
 function expandAll() {
+    $(".group-heading").show()
     $('.collapse').addClass('show');
 }
 
 function collapseAll() {
+    $(".group-heading").show()
     $('.collapse').removeClass('show');
 }
 
@@ -15,6 +17,72 @@ function toggleByID(id) {
     }
 }
 
+function filter(){
+    if($('#groups').is(':checked')){
+        filterGroups();
+    }else{
+        filterRules();
+    }
+}
+
+function filterGroups(){
+    $(".group-heading").show()
+    $(".rule-table").removeClass('show');
+    $(".rule").show();
+    
+    if($("#filter").val().length === 0){
+        $(".group-heading").show()
+        return
+    }
+
+    $( ".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{
+            $(this).show();
+        }
+    });
+}
+
+function filterRules(){
+    $(".group-heading").show()
+    $(".rule-table").removeClass('show');
+    $(".rule").show();
+
+    if($("#filter").val().length === 0){
+        return
+    }
+
+    $( ".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{
+            $("div[id='rules-"+target+"'").addClass('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()
+        }
+    });
+}
+
 $(document).ready(function () {
     $(".group-heading a").click(function (e) {
         e.stopPropagation(); // prevent collapse logic on link click

app/vmalert/web.qtpl

@@ -75,10 +75,18 @@ 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>
         {%  if len(groups) > 0 %}
             {% for _, g := range groups  %}
                   <div
-                    class="group-heading{% if rNotOk[g.ID] > 0 %} alert-danger{%endif%}" data-bs-target="rules-{%s g.ID %}">
+                    class="group-heading{% if rNotOk[g.ID] > 0 %} alert-danger{%endif%}" data-bs-target="rules-{%s g.ID %}" data-group-name="{%s g.Name %}">
                     <span class="anchor" id="group-{%s g.ID %}"></span>
                     <a href="#group-{%s g.ID %}">{%s g.Name %}{% if g.Type != "prometheus" %} ({%s g.Type %}){% endif %} (every {%f.0 g.Interval %}s) #</a>
                      {% if rNotOk[g.ID] > 0 %}<span class="badge bg-danger" title="Number of rules with status Error">{%d rNotOk[g.ID] %}</span> {% endif %}
@@ -100,7 +108,7 @@ btn-primary
                         </div>
                     {% endif %}
                 </div>
-                <div class="collapse" id="rules-{%s g.ID %}">
+                <div class="collapse rule-table" id="rules-{%s g.ID %}">
                     <table class="table table-striped table-hover table-sm">
                         <thead>
                             <tr>
@@ -111,7 +119,7 @@ btn-primary
                         </thead>
                         <tbody>
                         {% for _, r := range g.Rules %}
-                            <tr{% if r.LastError != "" %} class="alert-danger"{% endif %}>
+                            <tr class="rule{% if r.LastError != "" %} alert-danger{% endif %}" data-rule-name="{%s r.Name %}" data-bs-target="{%s g.ID %}">
                                 <td>
                                     <div class="row">
                                         <div class="col-12 mb-2">