Add button to toggle annotation visibility

If user make annotation hidden by default, then render a button that allows to show it per label

assets/static/alerts.js

@@ -33,6 +33,7 @@ AlertGroup.prototype.Added = function() {
     var elem = $("#" + this.id);
     ui.setupGroupTooltips(elem);
     ui.setupGroupLinkHover(elem);
+    ui.setupGroupAnnotationToggles(elem);
 };
 
 AlertGroup.prototype.Update = function() {

assets/static/templates.js

@@ -36,8 +36,9 @@ var templates = {},
         silenceFormFatal: "#silence-form-fatal",
         silenceFormLoading: "#silence-form-loading",
 
-        // label button
+        // alert partials
         buttonLabel: "#label-button-filter",
+        alertAnnotation: "#alert-annotation",
 
         // alert group
         alertGroup: "#alert-group",

assets/static/ui.js

@@ -75,6 +75,28 @@ function setupGroupTooltips(groupElem) {
     });
 }
 
+function setupGroupAnnotationToggles(groupElem) {
+    $(groupElem).on("click", "[data-toggle=toggle-hidden-annotation]", function() {
+        var alert = $(this).parent();
+        var icon = $(this).find("i.fa");
+        var showingHidden = icon.hasClass("fa-search-minus");
+        if (showingHidden) {
+            // we're currently showing hidden annotations, so the action is to hide them
+            icon.removeClass("fa-search-minus").addClass("fa-search-plus");
+            $.each(alert.find(".hidden-annotation"), function(i, annotation){
+                $(annotation).addClass("hidden");
+            });
+        } else {
+            // we're currently hiding hidden annotations, so the action is to show them
+            icon.removeClass("fa-search-plus").addClass("fa-search-minus");
+            $.each(alert.find(".hidden-annotation"), function(i, annotation){
+                $(annotation).removeClass("hidden");
+            });
+        }
+    });
+}
+
 exports.setupModal = setupModal;
 exports.setupGroupTooltips = setupGroupTooltips;
 exports.setupGroupLinkHover = setupGroupLinkHover;
+exports.setupGroupAnnotationToggles = setupGroupAnnotationToggles;

assets/templates/alertgroup.html

@@ -27,20 +27,20 @@
 </script>
 
 <script type="application/json" id="alert-group-annotations">
+  <% var hiddenCount = 0 %>
   <% _.each(alert.annotations, function(annotation) { %>
     <% if (annotation.isLink === false) { %>
-      <div class="well well-sm annotation-well">
-        <i class="fa fa-info-circle text-muted" title="<%- annotation.name %>" data-toggle="tooltip" data-placement="top"/>
-        <% if (annotation.value) { %>
-          <%= linkify(_.escape(annotation.value)) %>
-        <% } else { %>
-          <span class="text-muted">
-            [ missing annotation value ]
-          </span>
-        <% } %>
-      </div>
+      <% if (annotation.visible === false) { hiddenCount++ } %>
+      <%= renderTemplate('alertAnnotation', {annotation: annotation}) %>
     <% } %>
   <% }) %>
+  <% if (hiddenCount) { %>
+    <span class="label label-default label-list cursor-pointer"
+          data-toggle="toggle-hidden-annotation"
+          type="button">
+        <i class="fa fa-search-plus" title="Toggle hidden annotations" data-toggle="tooltip" data-placement="top" />
+    </span>
+  <% } %>
   <% _.each(alert.annotations, function(annotation) { %>
     <% if (annotation.isLink) { %>
       <a class="label label-list label-default"
@@ -312,3 +312,14 @@
     <%- label.text %>
   </<%= elem %>>
 </script>
+
+<script type="application/json" id="alert-annotation">
+<% var cls = "" %>
+<% if (annotation.visible === false) { %>
+  <% cls = "hidden hidden-annotation" %>
+<% } %>
+<div class="well well-sm annotation-well <%- cls %>">
+  <i class="fa fa-info-circle text-muted" title="<%- annotation.name %>" data-toggle="tooltip" data-placement="top"/>
+  <%= linkify(_.escape(annotation.value)) %>
+</div>
+</script>