feat(alertlist): adds sorting on state

closes #6676

public/app/features/alerting/alert_def.ts

@@ -20,6 +20,14 @@ var conditionTypes = [
   {text: 'Query', value: 'query'},
 ];
 
+var alertStateSortScore = {
+  alerting: 1,
+  no_data: 2,
+  pending: 3,
+  ok: 4,
+  paused: 5,
+};
+
 var evalFunctions = [
   {text: 'IS ABOVE', value: 'gt'},
   {text: 'IS BELOW', value: 'lt'},
@@ -129,4 +137,5 @@ export default {
   reducerTypes: reducerTypes,
   createReducerPart: createReducerPart,
   joinEvalMatches: joinEvalMatches,
+  alertStateSortScore: alertStateSortScore,
 };

public/app/plugins/panel/alertlist/editor.html

@@ -11,6 +11,12 @@
       <span class="gf-form-label width-8">Max items</span>
       <input type="text" class="gf-form-input max-width-15" ng-model="ctrl.panel.limit" ng-change="ctrl.onRender()" />
     </div>
+    <div class="gf-form" ng-show="ctrl.panel.show === 'current'">
+      <span class="gf-form-label width-8">Sort order</span>
+      <div class="gf-form-select-wrapper max-width-15">
+        <select class="gf-form-input" ng-model="ctrl.panel.sortOrder" ng-options="f.value as f.text for f in ctrl.sortOrderOptions" ng-change="ctrl.onRender()"></select>
+      </div>
+    </div>
     <gf-form-switch class="gf-form" label="Alerts from this dashboard" label-class="width-18" checked="ctrl.panel.onlyAlertsOnDashboard" on-change="ctrl.updateStateFilter()"></gf-form-switch>
   </div>
   <div class="section gf-form-group">

public/app/plugins/panel/alertlist/module.ts

@@ -17,6 +17,12 @@ class AlertListPanel extends PanelCtrl {
     {text: 'Recent state changes', value: 'changes'}
   ];
 
+  sortOrderOptions = [
+    {text: 'Alphabetical (asc)', value: 1},
+    {text: 'Alphabetical (desc)', value: 2},
+    {text: 'Importance', value: 3},
+  ];
+
   contentHeight: string;
   stateFilter: any = {};
   currentAlerts: any = [];
@@ -26,10 +32,10 @@ class AlertListPanel extends PanelCtrl {
     show: 'current',
     limit: 10,
     stateFilter: [],
-    onlyAlertsOnDashboard: false
+    onlyAlertsOnDashboard: false,
+    sortOrder: 1
   };
 
-
   /** @ngInject */
   constructor($scope, $injector, private $location, private backendSrv, private timeSrv, private templateSrv) {
     super($scope, $injector);
@@ -44,6 +50,19 @@ class AlertListPanel extends PanelCtrl {
     }
   }
 
+  sortResult(alerts) {
+    if (this.panel.sortOrder === 3) {
+      return _.sortBy(alerts, a => { return alertDef.alertStateSortScore[a.state]; });
+    }
+
+    var result = _.sortBy(alerts, a => { return a.name.toLowerCase();});
+    if (this.panel.sortOrder === 2) {
+      result.reverse();
+    }
+
+    return result;
+  }
+
   updateStateFilter() {
     var result = [];
 
@@ -104,11 +123,11 @@ class AlertListPanel extends PanelCtrl {
 
     this.backendSrv.get(`/api/alerts`, params)
       .then(res => {
-        this.currentAlerts = _.map(res, al => {
+        this.currentAlerts = this.sortResult(_.map(res, al => {
           al.stateModel = alertDef.getStateDisplayModel(al.state);
           al.newStateDateAgo = moment(al.newStateDate).fromNow().replace(" ago", "");
           return al;
-        });
+        }));
       });
   }