feat(alerting): working on alert state filters for alert list

pkg/models/alert.go

@@ -13,12 +13,13 @@ const (
 	AlertStatePending        AlertStateType = "pending"
 	AlertStateExeuctionError AlertStateType = "exeuction_error"
 	AlertStatePaused         AlertStateType = "paused"
-	AlertStateFiring         AlertStateType = "firing"
+	AlertStateCritical       AlertStateType = "critical"
+	AlertStateWarning        AlertStateType = "warning"
 	AlertStateOK             AlertStateType = "ok"
 )
 
 func (s AlertStateType) IsValid() bool {
-	return s == AlertStatePending || s == AlertStateFiring || s == AlertStateOK
+	return s == AlertStateOK || s == AlertStatePending || s == AlertStateExeuctionError || s == AlertStatePaused || s == AlertStateCritical || s == AlertStateWarning
 }
 
 const (

pkg/services/alerting/result_handler.go

@@ -35,7 +35,7 @@ func (handler *DefaultResultHandler) Handle(ctx *EvalContext) {
 		ctx.Rule.State = m.AlertStateExeuctionError
 		exeuctionError = ctx.Error.Error()
 	} else if ctx.Firing {
-		ctx.Rule.State = m.AlertStateFiring
+		ctx.Rule.State = m.AlertStateType(ctx.Rule.Severity)
 	} else {
 		ctx.Rule.State = m.AlertStateOK
 	}

pkg/services/sqlstore/alert.go

@@ -3,7 +3,6 @@ package sqlstore
 import (
 	"bytes"
 	"fmt"
-	"strings"
 	"time"
 
 	"github.com/go-xorm/xorm"
@@ -76,18 +75,19 @@ func HandleAlertsQuery(query *m.GetAlertsQuery) error {
 		params = append(params, query.PanelId)
 	}
 
-	if len(query.State) > 0 {
+	if len(query.State) > 0 && query.State[0] != "ALL" {
 		sql.WriteString(` AND (`)
 		for i, v := range query.State {
 			if i > 0 {
 				sql.WriteString(" OR ")
 			}
 			sql.WriteString("state = ? ")
-			params = append(params, strings.ToUpper(v))
+			params = append(params, v)
 		}
 		sql.WriteString(")")
 	}
 
+	sqlog.Error(sql.String(), "params", params)
 	alerts := make([]*m.Alert, 0)
 	if err := x.Sql(sql.String(), params...).Find(&alerts); err != nil {
 		return err

public/app/features/alerting/alert_def.ts

@@ -46,28 +46,44 @@ var severityLevels = {
   'warning': {text: 'WARNING', iconClass: 'icon-gf icon-gf-warning', stateClass: 'alert-state-warning'},
 };
 
-function getStateDisplayModel(state, severity) {
-  var model = {
-    text: 'OK',
-    iconClass: 'icon-gf icon-gf-online',
-    stateClass: 'alert-state-ok'
-  };
-
-  if (state === 'firing') {
-    model.text = severityLevels[severity].text;
-    model.iconClass = severityLevels[severity].iconClass;
-    model.stateClass = severityLevels[severity].stateClass;
-  } else if (state === 'pending') {
-    model.text = "PENDING";
-    model.iconClass = "fa fa-question";
-    model.stateClass = "alert-state-pending";
-  } else if (state === 'paused') {
-    model.text = "PAUSED";
-    model.iconClass = "fa fa-pause";
-    model.stateClass = "alert-state-paused";
+function getStateDisplayModel(state) {
+  switch (state) {
+    case 'ok': {
+      return {
+        text: 'OK',
+        iconClass: 'icon-gf icon-gf-online',
+        stateClass: 'alert-state-ok'
+      };
+    }
+    case 'critical': {
+      return {
+        text: 'CRITICAL',
+        iconClass: 'icon-gf icon-gf-critical',
+        stateClass: 'alert-state-critical'
+      };
+     }
+     case 'warning': {
+      return {
+        text: 'WARNING',
+        iconClass: 'icon-gf icon-gf-warning',
+        stateClass: 'alert-state-warning'
+      };
+     }
+     case 'pending': {
+      return {
+        text: 'PENDING',
+        iconClass: "fa fa-question",
+        stateClass: 'alert-state-warning'
+      };
+     }
+     case 'paused': {
+      return {
+        text: 'paused',
+        iconClass: "fa fa-pause",
+        stateClass: 'alert-state-paused'
+      };
+     }
   }
-
-  return model;
 }
 
 export default {

public/app/features/alerting/alert_list_ctrl.ts

@@ -9,35 +9,34 @@ import alertDef from './alert_def';
 export class AlertListCtrl {
 
   alerts: any;
+  stateFilters = [
+    {text: 'All', value: null},
+    {text: 'OK', value: 'ok'},
+    {text: 'Pending', value: 'pending'},
+    {text: 'Warning', value: 'warning'},
+    {text: 'Critical', value: 'critical'},
+    {text: 'Execution Error', value: 'execution_error'},
+  ];
+
   filters = {
-    state: 'OK'
+    state: 'ALL'
   };
 
   /** @ngInject */
-  constructor(private backendSrv, private $route) {
-    _.each($route.current.params.state, state => {
-      this.filters[state.toLowerCase()] = true;
-    });
-
+  constructor(private backendSrv, private $location) {
+    var params = $location.search();
+    this.filters.state = params.state || null;
     this.loadAlerts();
   }
 
-  updateFilter() {
-    var stats = [];
-    this.$route.current.params.state = stats;
-    this.$route.updateParams();
+  filtersChanged() {
+    this.$location.search(this.filters);
   }
 
   loadAlerts() {
-    var stats = [];
-
-    var params = {
-      state: stats
-    };
-
-    this.backendSrv.get('/api/alerts', params).then(result => {
+    this.backendSrv.get('/api/alerts', this.filters).then(result => {
       this.alerts = _.map(result, alert => {
-        alert.stateModel = alertDef.getStateDisplayModel(alert.state, alert.severity);
+        alert.stateModel = alertDef.getStateDisplayModel(alert.state);
         alert.newStateDateAgo = moment(alert.newStateDate).fromNow().replace(" ago", "");
         return alert;
       });

public/app/features/alerting/partials/alert_list.html

@@ -11,7 +11,7 @@
       <div class="gf-form">
         <label class="gf-form-label">Filter by state</label>
         <div class="gf-form-select-wrapper width-13">
-          <select class="gf-form-input" ng-model="ctrl.filters.state" ng-options="f for f in ['OK', 'Warning', 'Critical']" ng-change="ctrl.severityChanged()">
+          <select class="gf-form-input" ng-model="ctrl.filters.state" ng-options="f.value as f.text for f in ctrl.stateFilters" ng-change="ctrl.filtersChanged()">
           </select>
         </div>
       </div>

public/app/plugins/panel/graph/threshold_manager.ts

@@ -201,35 +201,36 @@ export class ThresholdManager {
         }
       }
 
+      var fillColor, lineColor;
       switch (threshold.colorMode) {
         case 'critical': {
-          threshold.fillColor = 'rgba(234, 112, 112, 0.12)';
-          threshold.lineColor = 'rgba(237, 46, 24, 0.60)';
+          fillColor = 'rgba(234, 112, 112, 0.12)';
+          lineColor = 'rgba(237, 46, 24, 0.60)';
           break;
         }
         case 'warning': {
-          threshold.fillColor = 'rgba(235, 138, 14, 0.12)';
-          threshold.lineColor = 'rgba(247, 149, 32, 0.60)';
+          fillColor = 'rgba(235, 138, 14, 0.12)';
+          lineColor = 'rgba(247, 149, 32, 0.60)';
           break;
         }
         case 'ok': {
-          threshold.fillColor = 'rgba(11, 237, 50, 0.090)';
-          threshold.lineColor = 'rgba(6,163,69, 0.60)';
+          fillColor = 'rgba(11, 237, 50, 0.090)';
+          lineColor = 'rgba(6,163,69, 0.60)';
           break;
         }
         case 'custom': {
-          threshold.fillColor = threshold.fillColor;
-          threshold.lineColor = threshold.lineColor;
+          fillColor = threshold.fillColor;
+          lineColor = threshold.lineColor;
           break;
         }
       }
 
       // fill
       if (threshold.fill) {
-        options.grid.markings.push({yaxis: {from: threshold.value, to: limit}, color: threshold.fillColor});
+        options.grid.markings.push({yaxis: {from: threshold.value, to: limit}, color: fillColor});
       }
       if (threshold.line) {
-        options.grid.markings.push({yaxis: {from: threshold.value, to: threshold.value}, color: threshold.lineColor});
+        options.grid.markings.push({yaxis: {from: threshold.value, to: threshold.value}, color: lineColor});
       }
     }
   }