feat(alerting): add support for multiple state in ui

public/app/features/alerts/alerts_ctrl.ts

@@ -9,17 +9,44 @@ import alertDef from './alert_def';
 export class AlertPageCtrl {
 
   alerts: any;
-  stateFilters = [ 'Ok', 'Warn', 'Critical', 'Acknowledged' ];
-  stateFilter = 'Warn';
+  filter = {
+    ok: false,
+    warn: false,
+    critical: false,
+    acknowleged: false
+  };
 
   /** @ngInject */
-  constructor(private backendSrv) {
+  constructor(private backendSrv, private $route) {
+    _.each($route.current.params.state, state => {
+      this.filter[state.toLowerCase()] = true;
+    });
+
     this.loadAlerts();
   }
 
+  updateFilter() {
+    var stats = [];
+
+    this.filter.ok && stats.push('Ok');
+    this.filter.warn && stats.push('Warn');
+    this.filter.critical && stats.push('critical');
+    this.filter.acknowleged && stats.push('acknowleged');
+
+    this.$route.current.params.state = stats;
+    this.$route.updateParams();
+  }
+
   loadAlerts() {
+    var stats = [];
+
+    this.filter.ok && stats.push('Ok');
+    this.filter.warn && stats.push('Warn');
+    this.filter.critical && stats.push('critical');
+    this.filter.acknowleged && stats.push('acknowleged');
+
     var params = {
-      state: this.stateFilter
+      state: stats
     };
 
     this.backendSrv.get('/api/alerts/rules', params).then(result => {

public/app/features/alerts/partials/alerts_page.html

@@ -4,8 +4,11 @@
 <div class="page-container" >
 	<div class="page-header">
 		<h1>Alerts</h1>
-		<div class="gf-form-select-wrapper max-width-10">
-			<select class="gf-form-input" ng-model="ctrl.stateFilter" ng-change="ctrl.loadAlerts()" ng-options="filter as filter for filter in ctrl.stateFilters"></select>
+		<div class="gf-form-inline">
+			<gf-form-switch class="gf-form" label="Ok" label-class="width-5" checked="ctrl.filter.ok" on-change="ctrl.updateFilter()"></gf-form-switch>
+			<gf-form-switch class="gf-form" label="Warn" label-class="width-5" checked="ctrl.filter.warn" on-change="ctrl.updateFilter()"></gf-form-switch>
+			<gf-form-switch class="gf-form" label="Critical" label-class="width-5" checked="ctrl.filter.critical" on-change="ctrl.updateFilter()"></gf-form-switch>
+			<gf-form-switch class="gf-form" label="Acknowleged" label-class="width-7" checked="ctrl.filter.acknowleged" on-change="ctrl.updateFilter()"></gf-form-switch>
 		</div>
 	</div>