Make the badge clickable

Clicking the badge will toggle select / deselect all values, for easy flipping labels when an alert contains large number of labels

assets/static/base.css

@@ -413,6 +413,9 @@ table.table.silence-label-selects > tbody > tr > td {
 .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

@@ -6,7 +6,7 @@
     <% _.each(Alerts.SortMapByKey(labels), function(label) { %>
       <tr>
         <td align="center">
-          <span class="badge select-label-badge">
+          <span class="badge select-label-badge" title="Click to select / deselect all values" data-toggle="tooltip">
             <%- Object.keys(label.value).length %>
           </span>
         </td>