Allow sorting alerts

client/app/components/index.js

@@ -18,3 +18,4 @@ export { default as rdTimeAgo } from './rd-time-ago';
 export { default as overlay } from './overlay';
 export { default as routeStatus } from './route-status';
 export { default as filters } from './filters';
+export { default as sortIcon } from './sort-icon';

client/app/components/sort-icon.js

@@ -0,0 +1,26 @@
+export default function (ngModule) {
+  ngModule.component('sortIcon', {
+    template: '<span ng-if="$ctrl.showIcon"><i class="fa fa-sort-{{$ctrl.icon}}"></i></span>',
+    bindings: {
+      column: '<',
+      sortColumn: '<',
+      reverse: '<',
+    },
+    controller() {
+      this.$onChanges = (changes) => {
+        ['column', 'sortColumn', 'reverse'].forEach((v) => {
+          if (v in changes) {
+            this[v] = changes[v].currentValue;
+          }
+        });
+
+        this.showIcon = false;
+
+        if (this.column === this.sortColumn) {
+          this.showIcon = true;
+          this.icon = this.reverse ? 'desc' : 'asc';
+        }
+      };
+    },
+  });
+}

client/app/pages/alerts-list/alerts-list.html

@@ -4,20 +4,20 @@
   </page-header>
 
   <div class="container">
-    <div class="container bg-white">
+    <div class="bg-white">
       <table class="table table-condensed table-hover">
         <thead>
         <tr>
-          <th>Name</th>
-          <th>Created By</th>
-          <th>State</th>
-          <th>Created At</th>
+          <th class="sortable-column" ng-click="$ctrl.alerts.orderBy('name')">Name <sort-icon column="'name'" sort-column="$ctrl.alerts.orderByField" reverse="$ctrl.alerts.orderByReverse"></sort-icon></th>
+          <th class="sortable-column" ng-click="$ctrl.alerts.orderBy('created_by')">Created By <sort-icon column="'created_by'" sort-column="$ctrl.alerts.orderByField" reverse="$ctrl.alerts.orderByReverse"></sort-icon></th>
+          <th class="sortable-column" ng-click="$ctrl.alerts.orderBy('state')">State <sort-icon column="'state'" sort-column="$ctrl.alerts.orderByField" reverse="$ctrl.alerts.orderByReverse"></sort-icon></th>
+          <th class="sortable-column" ng-click="$ctrl.alerts.orderBy('created_at')">Created By <sort-icon column="'created_at'" sort-column="$ctrl.alerts.orderByField" reverse="$ctrl.alerts.orderByReverse"></sort-icon></th>
         </tr>
         </thead>
         <tbody>
         <tr ng-repeat="row in $ctrl.alerts.getPageRows()">
           <td><a href="alerts/{{row.id}}">{{row.name}}</a></td>
-          <td>{{row.user.name}}</td>
+          <td>{{row.created_by}}</td>
           <td><span ng-class="row.class">{{row.state | uppercase}}</span> since <span am-time-ago="row.updated_at"></span></td>
           <td><span am-time-ago="row.created_at"></span></td>
         </tr>

client/app/pages/alerts-list/index.js

@@ -1,24 +1,26 @@
 import { Paginator } from '../../utils';
 import template from './alerts-list.html';
 
+const stateClass = {
+  ok: 'label label-success',
+  triggered: 'label label-danger',
+  unknown: 'label label-warning',
+};
+
 class AlertsListCtrl {
   constructor(Events, Alert) {
     Events.record('view', 'page', 'alerts');
 
     this.alerts = new Paginator([], { itemsPerPage: 20 });
-
     Alert.query((alerts) => {
-      const stateClass = {
-        ok: 'label label-success',
-        triggered: 'label label-danger',
-        unknown: 'label label-warning',
-      };
-
-      alerts.forEach((alert) => {
-        alert.class = stateClass[alert.state];
-      });
-
-      this.alerts.updateRows(alerts);
+      this.alerts.updateRows(alerts.map(alert => ({
+        name: alert.name,
+        state: alert.state,
+        class: stateClass[alert.state],
+        created_by: alert.user.name,
+        created_at: alert.created_at,
+        updated_at: alert.updated_at,
+      })));
     });
   }
 }

client/app/utils/paginator.js

@@ -1,8 +1,12 @@
+import { sortBy } from 'underscore';
+
 export default class Paginator {
   constructor(rows, { page = 1, itemsPerPage = 20, totalCount = undefined } = {}) {
     this.page = page;
     this.itemsPerPage = itemsPerPage;
     this.updateRows(rows, totalCount);
+    this.orderByField = undefined;
+    this.orderByReverse = false;
   }
 
   setPage(page) {
@@ -24,4 +28,20 @@ export default class Paginator {
       this.totalCount = 0;
     }
   }
+
+  orderBy(column) {
+    if (column === this.orderByField) {
+      this.orderByReverse = !this.orderByReverse;
+    } else {
+      this.orderByField = column;
+      this.orderByReverse = false;
+    }
+
+    if (this.orderByField) {
+      this.rows = sortBy(this.rows, this.orderByField);
+      if (this.orderByReverse) {
+        this.rows = this.rows.reverse();
+      }
+    }
+  }
 }