Merge pull request #74 from cloudflare/silence-counters

Silence counters

assets/static/base.css

@@ -396,6 +396,18 @@ span.alert-group-link > a {
 .bootstrap-select > button {
   padding: 0;
 }
+.bootstrap-select > .dropdown-toggle {
+  padding-right: 6px;
+}
+table.silence-label-selects {
+  width: auto;
+}
+table.table.silence-label-selects > tbody > tr > td {
+  padding-left: 0;
+  padding-right: 4px;
+  padding-top: 0;
+  padding-bottom: 0;
+}
 .silence-label-select > .bs-caret {
   margin-left: -6px;
 }
@@ -404,6 +416,9 @@ span.alert-group-link > a {
 .silence-label-select:focus, .silence-label-picker:focus {
   color: inherit;
 }
+.select-label-badge {
+  cursor: pointer;
+}
 .bootstrap-select > .dropdown-menu > .dropdown-menu > li > a > .label {
   margin-right: 20px;
 }

assets/static/ui.js

@@ -206,6 +206,17 @@ var UI = (function(params) {
                     minDate: moment().subtract(1, 'minutes'),
                     sideBySide: true
                   });
+                  setupGroupTooltips(modal);
+                  $('.select-label-badge').on('click', function(e) {
+                    var select = $(this).parent().parent().find('select');
+                    if (select.selectpicker('val')) {
+                      // if there's anything selected deselect all
+                      select.selectpicker('deselectAll')
+                    } else {
+                      // else select all
+                      select.selectpicker('selectAll')
+                    }
+                  });
               }
             });
 

assets/templates/silence.html

@@ -2,26 +2,33 @@
 <div id="newSilenceAlert" class="alert alert-danger hidden" role="alert"></div>
 <form id="newSilenceForm">
   <label class="control-label">Labels to match</label>
-  <% _.each(Alerts.SortMapByKey(labels), function(label) { %>
-    <div>
-      <label>
-        <select class="selectpicker silence-label-picker"
-                data-label-key="<%= label.key %>"
-                data-style="silence-label-select"
-                <% if (Object.keys(label.value).length > 10) { %>data-live-search="true"<% } %>
-                <% if (Object.keys(label.value).length > 1) { %>data-actions-box="true"<% } %>
-                multiple>
-          <% _.each(Alerts.SortMapByKey(label.value), function(label_val) { %>
-              <option <% if (label_val.value.selected) { %>selected="selected"<% } %>
-                      value="<%= label_val.key %>"
-                      data-content="<span class='<%= label_val.value.attrs.class %>' style='<%= label_val.value.attrs.style %>'><%- label_val.value.attrs.text %></span>">
-                <%- label_val.value.attrs.text %>
-              </option>
-          <% }) %>
-        </select>
-    </label>
-  </div>
-  <% }) %>
+  <table class="table table-condensed silence-label-selects">
+    <% _.each(Alerts.SortMapByKey(labels), function(label) { %>
+      <tr>
+        <td align="center">
+          <span class="badge select-label-badge" title="Click to select / deselect all values" data-toggle="tooltip">
+            <%- Object.keys(label.value).length %>
+          </span>
+        </td>
+        <td>
+          <select class="selectpicker silence-label-picker"
+                  data-label-key="<%= label.key %>"
+                  data-style="silence-label-select"
+                  <% if (Object.keys(label.value).length > 10) { %>data-live-search="true"<% } %>
+                  <% if (Object.keys(label.value).length > 1) { %>data-actions-box="true"<% } %>
+                  multiple>
+            <% _.each(Alerts.SortMapByKey(label.value), function(label_val) { %>
+                <option <% if (label_val.value.selected) { %>selected="selected"<% } %>
+                        value="<%= label_val.key %>"
+                        data-content="<span class='<%= label_val.value.attrs.class %>' style='<%= label_val.value.attrs.style %>'><%- label_val.value.attrs.text %></span>">
+                  <%- label_val.value.attrs.text %>
+                </option>
+            <% }) %>
+          </select>
+        </td>
+      </tr>
+    <% }) %>
+  </table>
 
   <hr class="separator">