Implement table sorting for time

Author: Trent Willis

app/components/slow-node-times.js

@@ -27,6 +27,8 @@ function nodeTime(node) {
 export default Ember.Component.extend({
   graph: inject.service(),
 
+  sortDescending: true,
+
   nodes: computed('data', 'filter', 'pluginNameFilter', 'groupByPluginName', function() {
     let data = this.get('data');
     if (!data) { return []; }
@@ -74,12 +76,17 @@ export default Ember.Component.extend({
       }
     }
 
-    let sortedNodes = nodes
-        .sort((a, b) => {
-          return b._stats.time.plugin - a._stats.time.plugin;
-        });
+    return nodes;
+  }),
 
-    return sortedNodes;
+  sortedNodes: computed('nodes', 'sortDescending', function() {
+    return this.get('nodes').sort((a, b) => {
+      if (this.get('sortDescending')) {
+        return b._stats.time.plugin - a._stats.time.plugin;
+      } else {
+        return a._stats.time.plugin - b._stats.time.plugin;
+      }
+    });
   }),
 
   totalTime: computed('nodes', function() {
@@ -103,6 +110,10 @@ export default Ember.Component.extend({
         let shown = get(node, 'showDetails');
         set(node, 'showDetails', !shown);
       }
+    },
+
+    toggleTime() {
+      this.toggleProperty('sortDescending');
     }
   }
 });

app/styles/app.css

@@ -50,6 +50,14 @@ body {
   left: 0;
 }
 
+.nodes-table_header tr:hover {
+  background-color: initial;
+}
+
+.nodes-table_toggle {
+  color: inherit;
+}
+
 .table-row:hover {
   cursor: pointer;
 }

app/templates/components/slow-node-times.hbs

@@ -21,16 +21,19 @@
   </div>
 </div>
 
-<table class="table is-striped">
-  <thead>
+<table class="nodes-table table is-striped">
+  <thead class="nodes-table_header">
     <tr>
       <td style="width: 65%">Description</td>
       <td>{{if groupByPluginName "Count" "Plugin Name"}}</td>
-      <td>Time (ms)</td>
+      <td>
+        <a href="#" class="nodes-table_toggle" {{action "toggleTime"}}>Time (ms) <i class="fa fa-caret-{{if sortDescending 'down' 'up'}}"></i></a>
+      </td>
     </tr>
   </thead>
+
   <tbody>
-    {{#each nodes as |node|}}
+    {{#each sortedNodes as |node|}}
       <tr class="table-row" {{action 'toggleDetailsForNode' node}}>
         <td>{{node.label.name}}</td>
         <td>{{node.label.broccoliPluginName}}</td>