ui: clarify alert state toggle via checkbox icon (#7936)

The current meaning of the alert firing/pending/inactive
toggle seems ambiguouos as #7460 demonstrates.
This commit adds a checkbox icon to clarify the
active state of the button.
Signed-off-by: NChristian Hoffmann <mail@hoffmann-christian.info>

web/ui/static/js/alerts.js

@@ -49,6 +49,11 @@ function init() {
   $("#alertFilters :input").change(function() {
         const target = $(this).attr("id");
         var shouldHide = $(this).parent().hasClass("active");
+        var checkClass = shouldHide ? 'unchecked' : 'check';
+        $(this).parent().find('i.glyphicon')
+          .removeClass("glyphicon-check")
+          .removeClass("glyphicon-unchecked")
+          .addClass("glyphicon-" + checkClass);
         if (target === "inactiveAlerts") {
             localStorage.setItem("hideInactiveAlerts", shouldHide);
             displayAlerts("alert-success", !shouldHide);

web/ui/templates/alerts.html

@@ -8,13 +8,13 @@
   <h1>Alerts</h1>
     <div id="alertFilters" class="btn-group btn-group-toggle" data-toggle="buttons">
         <label class="btn btn-primary active">
-            <input type="checkbox" name="alertFilters" id="inactiveAlerts" autocomplete="off"> Inactive ({{ .Counts.Inactive }})
+            <input type="checkbox" name="alertFilters" id="inactiveAlerts" autocomplete="off"> <i class="glyphicon glyphicon-check"></i> Inactive ({{ .Counts.Inactive }})
         </label>
         <label class="btn btn-primary active">
-            <input type="checkbox" name="alertFilters" id="pendingAlerts" autocomplete="off"> Pending ({{ .Counts.Pending }})
+            <input type="checkbox" name="alertFilters" id="pendingAlerts" autocomplete="off"> <i class="glyphicon glyphicon-check"></i> Pending ({{ .Counts.Pending }})
         </label>
         <label class="btn btn-primary active">
-            <input type="checkbox" name="alertFilters" id="firingAlerts" autocomplete="off"> Firing ({{ .Counts.Firing }})
+            <input type="checkbox" name="alertFilters" id="firingAlerts" autocomplete="off"> <i class="glyphicon glyphicon-check"></i> Firing ({{ .Counts.Firing }})
         </label>
         </br>
     </div>