AlertListPanel: Add options to sort by Time(asc) and Time(desc) (#29764)

This also makes all the sortOrderOptions available when using
the "changes" showOption.

Resolves: #29156

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

@@ -12,7 +12,7 @@
       <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.onRefresh()" />
     </div>
-    <div class="gf-form" ng-show="ctrl.panel.show === 'current'">
+    <div class="gf-form">
       <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"

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

@@ -20,6 +20,8 @@ class AlertListPanel extends PanelCtrl {
     { text: 'Alphabetical (asc)', value: 1 },
     { text: 'Alphabetical (desc)', value: 2 },
     { text: 'Importance', value: 3 },
+    { text: 'Time (asc)', value: 4 },
+    { text: 'Time (desc)', value: 5 },
   ];
 
   stateFilter: any = {};
@@ -58,12 +60,20 @@ class AlertListPanel extends PanelCtrl {
     if (this.panel.sortOrder === 3) {
       return _.sortBy(alerts, a => {
         // @ts-ignore
-        return alertDef.alertStateSortScore[a.state];
+        return alertDef.alertStateSortScore[a.state || a.newState];
       });
+    } else if (this.panel.sortOrder === 4) {
+      return _.sortBy(alerts, a => {
+        return new Date(a.newStateDate || a.time);
+      });
+    } else if (this.panel.sortOrder === 5) {
+      return _.sortBy(alerts, a => {
+        return new Date(a.newStateDate || a.time);
+      }).reverse();
     }
 
     const result = _.sortBy(alerts, a => {
-      return a.name.toLowerCase();
+      return (a.name || a.alertName).toLowerCase();
     });
     if (this.panel.sortOrder === 2) {
       result.reverse();
@@ -124,12 +134,14 @@ class AlertListPanel extends PanelCtrl {
       getBackendSrv()
         .get('/api/annotations', params, `alert-list-get-state-changes-${this.panel.id}`)
         .then(data => {
-          this.alertHistory = _.map(data, al => {
-            al.time = this.dashboard.formatDate(al.time, 'MMM D, YYYY HH:mm:ss');
-            al.stateModel = alertDef.getStateDisplayModel(al.newState);
-            al.info = alertDef.getAlertAnnotationInfo(al);
-            return al;
-          });
+          this.alertHistory = this.sortResult(
+            _.map(data, al => {
+              al.time = this.dashboard.formatDate(al.time, 'MMM D, YYYY HH:mm:ss');
+              al.stateModel = alertDef.getStateDisplayModel(al.newState);
+              al.info = alertDef.getAlertAnnotationInfo(al);
+              return al;
+            })
+          );
 
           this.noAlertsMessage = this.alertHistory.length === 0 ? 'No alerts in current time range' : '';