Add ability to group by plugin name...

Author: Robert Jackson

app/components/slow-node-times.js

@@ -31,9 +31,10 @@ export default Ember.Component.extend({
 
   filter: filterForBroccoliNodes,
 
-  nodes: computed('data', 'filter', 'pluginNameFilter', function() {
+  nodes: computed('data', 'filter', 'pluginNameFilter', 'groupByPluginName', function() {
     let data = this.get('data');
     let filter = this.get('filter');
+    let groupByPluginName = this.get('groupByPluginName');
     if (!data) { return []; }
 
     let nodes = data.nodes;
@@ -42,6 +43,26 @@ export default Ember.Component.extend({
       nodes = filter(nodes, this);
     }
 
+    if (groupByPluginName) {
+      let pluginNameMap = nodes.reduce((memo, node) => {
+        let pluginName = node.label.broccoliPluginName;
+        memo[pluginName] = memo[pluginName] || { count: 0, time: 0 };
+        memo[pluginName].time += node.stats.time.self;
+        memo[pluginName].count++;
+        return memo;
+      }, {})
+
+      nodes = [];
+      for (let pluginName in pluginNameMap) {
+        nodes.push({
+          label: { name: pluginName, broccoliPluginName: pluginNameMap[pluginName].count },
+          stats: {
+            time: { self: pluginNameMap[pluginName].time}
+          }
+        });
+      }
+    }
+
     let addonNodes = nodes
         .sort((a, b) => {
           return b.stats.time.self - a.stats.time.self;

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

@@ -6,15 +6,29 @@
 
 {{#if (eq filterType 'broccoli-node')}}
   {{input value=pluginNameFilter placeholder="Filter by plugin name..."}}
+  <label>Group by Plugin Name{{input type="checkbox" checked=groupByPluginName}}</label>
   <button {{action (action (mut pluginNameFilter) '')}}>Clear</button>
 {{/if}}
 
 
-<ul>
-  {{#each nodes as |node|}}
-    <li>{{node.label.name}} - {{ns-to-ms node.stats.time.self}}</li>
-  {{/each}}
-</ul>
+<table>
+  <thead>
+    <tr>
+      <td>Annotation</td>
+      <td>Additional Details</td>
+      <td>Time</td>
+    </tr>
+  </thead>
+  <tbody>
+    {{#each nodes as |node|}}
+      <tr>
+        <td>{{node.label.name}}</td>
+        <td>{{node.label.broccoliPluginName}}</td>
+        <td>{{ns-to-ms node.stats.time.self}}</td>
+      </tr>
+    {{/each}}
+  </tbody>
+</table>
 
 <div>
   Total: {{ns-to-ms totalTime}}