Add better details display...

Author: Robert Jackson

app/components/slow-node-times.js

@@ -1,8 +1,9 @@
 import Ember from 'ember';
 
 const {
+  get,
+  set,
   computed,
-  getOwner,
   inject
 } = Ember;
 
@@ -91,11 +92,16 @@ export default Ember.Component.extend({
 
   actions: {
     'focus-node'(node) {
+      this.get('graph').selectNode(node);
+    },
+
+    toggleDetailsForNode(node) {
       if (node.groupedByPluginName) {
         this.set('groupByPluginName', false);
         this.set('pluginNameFilter', node.label.name);
       } else {
-        this.get('graph').selectNode(node);
+        let shown = get(node, 'showDetails');
+        set(node, 'showDetails', !shown);
       }
     }
   }

app/helpers/includes.js

@@ -0,0 +1,5 @@
+import Ember from 'ember';
+
+export default Ember.Helper.helper(function([haystack, needle]) {
+  return haystack && haystack.includes && haystack.includes(needle);
+});

app/helpers/stats-iterator.js

@@ -0,0 +1,11 @@
+import Ember from 'ember';
+
+export default Ember.Helper.helper(function([node]) {
+  let stats = {};
+
+  for (let [name, value] of node.statsIterator()) {
+    stats[name] = value;
+  }
+
+  return stats;
+});

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

@@ -8,23 +8,46 @@
       <td style="width: 65%">Description</td>
       <td>{{if groupByPluginName "Count" "Plugin Name"}}</td>
       <td>Time (ms)</td>
-      <td>&nbsp;</td>
     </tr>
   </thead>
   <tbody>
     {{#each nodes as |node|}}
-      <tr>
+      <tr {{action 'toggleDetailsForNode' node}}>
         <td>{{node.label.name}}</td>
         <td>{{node.label.broccoliPluginName}}</td>
         <td>{{ns-to-ms node._stats.time.plugin}}</td>
-        <td>
-          <button {{action 'focus-node' node}}>Show Graph</button></td>
       </tr>
+      {{#if node.showDetails}}
+        <tr>
+          <td colspan="3">
+            <div class="card">
+              <header class="card-header">
+                <p class="card-header-title">
+                  Node Stats
+                </p>
+              </header>
+              <div class="card-content">
+                {{#each-in (stats-iterator node) as |stat value|}}
+                  <div>
+                    <strong>{{stat}}</strong>:
+                    {{#if (includes stat 'time')}}
+                      {{ns-to-ms value}}ms
+                    {{else}}
+                      {{value}}
+                    {{/if}}
+                  </div>
+                {{/each-in}}
+              </div>
+            </div>
+            <button class="button" {{action 'focus-node' node}}>Show Graph</button>
+          </td>
+        </tr>
+      {{/if}}
     {{/each}}
   </tbody>
   <tfoot>
     <tr>
-      <td colspan=3 class="has-text-right">Total</td>
+      <td colspan=2 class="has-text-right">Total</td>
       <td>{{ns-to-ms totalTime}}</td>
     </tr>
   </tfoot>