Add toggle to hide non active alerts

web/ui/README.md

@@ -8,6 +8,7 @@ To make this work, add `-tags dev` to the `flags` entry in `.promu.yml`, and the
 
 This will serve all files from your local filesystem.
 This is for development purposes only.
+Prometheus needs to be started in `web/ui/` directory.
 
 After making changes to any file, run `make assets` before committing to update
 the generated inline version of the file.

web/ui/static/css/alerts.css

@@ -6,25 +6,25 @@
   display: none;
 }
 
-div.show-annotations {
+div.show-annotations, div.show-active {
   font-size: 0.8em;
   padding-top: 1em;
   padding-bottom: 1em;
 }
 
-div.show-annotations:hover {
+div.show-annotations:hover, div.show-active:hover {
   cursor: pointer;
 }
 
-div.show-annotations button {
+div.show-annotations button, div.show-active button {
   background-color: transparent;
   border: none;
   outline: none;
   padding: 0;
   color: inherit;
 }
 
-div.show-annotations.is-checked {
+div.show-annotations.is-checked, div.show-active.is-checked {
   color: #286090;
 }
 

web/ui/static/js/alerts.js

@@ -26,6 +26,57 @@ function init() {
         targetEl.removeClass('is-checked');
     }
   });
+
+  $("div.show-active").click(function() {
+    const targetEl = $('div.show-active');
+    const icon = $(targetEl).children('i');
+    const rootEl = document.querySelector('html body div table tbody').children;
+
+    if (icon.hasClass('glyphicon-unchecked')) {
+        $(".alert_active").show();
+        $(".alert_active_header").show();
+        $(targetEl).children('i').removeClass('glyphicon-unchecked').addClass('glyphicon-check');
+        targetEl.addClass('is-checked');
+
+        // disable all non active alerts
+        for (let curEl  of document.getElementsByClassName('alert-success')) {
+            curEl.style.display="none";
+        }
+        // check if we can disable groups
+        let emptyGroup = true
+        let rowToBeHidden = new Array();
+        let index = rootEl.length - 1;
+        // go from bottem to top to hidde last row
+        while (index >= 0) {
+            if (rootEl[index].className == "") {
+                if (emptyGroup) {
+                    rowToBeHidden.push(rootEl[index]);
+                }
+                emptyGroup = true;
+            } else {
+                if (rootEl[index].className != "alert_details" && rootEl[index].style.display != "none") {
+                    emptyGroup = false;
+                }
+            }
+            index = index - 1;
+        }
+        for (let curEl of rowToBeHidden) {
+            curEl.style.display = "none";
+        }
+    } else if (icon.hasClass('glyphicon-check')) {
+        $(".alert_active").hide();
+        $(".alert_active_header").hide();
+        $(targetEl).children('i').removeClass('glyphicon-check').addClass('glyphicon-unchecked');
+        targetEl.removeClass('is-checked');
+
+        // enable ALL hidden elements
+        for (let curEl of rootEl) {
+            if (curEl.className != "alert_details" && curEl.style.display == "none") {
+                curEl.style.display = "";
+            }
+        }
+    }
+  });
 }
 
 $(init);

web/ui/templates/alerts.html

@@ -10,6 +10,10 @@ <h1>Alerts</h1>
      <i class="glyphicon glyphicon-unchecked"></i>
        <button type="button" class="show-annotations" title="show annotations">Show annotations</button>
   </div>
+  <div class="show-active">
+     <i class="glyphicon glyphicon-unchecked"></i>
+       <button type="button" class="show-active" title="show only active alerts">Show only active alerts</button>
+  </div>
   <table class="table table-bordered table-collapsed">
     <tbody>
       {{$alertStateToRowClass := .AlertStateToRowClass}}