updated node table display to fix width, set headers to bold, fix footer total positioning. Converted text entry for pluginNameFilter to a <select>, since plugin names are known when nodes are known.

Author: dcombslinkedin

app/components/slow-node-times.js

@@ -50,22 +50,14 @@ export default Ember.Component.extend({
     let pluginNameFilter = this.get('pluginNameFilter');
     if (pluginNameFilter) {
       nodes = nodes.filter((node) => {
-        if (!node.label.broccoliNode) { return false; }
-        if (node.label.broccoliPluginName !== pluginNameFilter) { return false; }
-
-        return true;
+        return (node.label.broccoliNode &&
+                node.label.broccoliPluginName &&
+                pluginNameFilter === node.label.broccoliPluginName);
       });
     }
 
     let groupByPluginName = this.get('groupByPluginName');
     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.plugin;
-        memo[pluginName].count++;
-        return memo;
-      }, {})
 
       nodes = [];
       for (let pluginName in pluginNameMap) {
@@ -82,6 +74,27 @@ export default Ember.Component.extend({
     return nodes;
   }).readOnly(),
 
+  pluginNameMap: computed('nodes', function() {
+    let nodes = this.get('nodes');
+    return nodes.reduce((memo, node) => {
+      let pluginName = node.label.broccoliPluginName;
+      memo[pluginName] = memo[pluginName] || { count: 0, time: 0 };
+      memo[pluginName].time += node._stats.time.plugin;
+      memo[pluginName].count++;
+      return memo;
+    }, {});
+  }).readOnly(),
+
+  pluginNames: computed('pluginNameMap', function() {
+    var keys = Object.keys(this.get('pluginNameMap'));
+    var undefIndex = keys.indexOf('undefined');
+    if (undefIndex >= 0) {
+      keys.splice(undefIndex, 1);
+    }
+    keys.sort();
+    return keys;
+  }).readOnly(),
+
   sortedNodes: computed('nodes', 'sortDescending', function() {
     let sortDescending = this.get('sortDescending');
     return this.get('nodes').sort((a, b) => {
@@ -118,6 +131,10 @@ export default Ember.Component.extend({
 
     toggleTime() {
       this.toggleProperty('sortDescending');
+    },
+
+    selectFilter(value) {
+      this.set('pluginNameFilter', (value === 'clearFilter' ? undefined : value));
     }
   }
 });

app/styles/app.css

@@ -72,6 +72,15 @@ body > [class="ember-view"],
   border-bottom: 1px solid #eee;
 }
 
+.nodes-controls select {
+  font-size: 1rem;
+}
+
+.nodes-table {
+    width:100%;
+    table-layout: fixed;
+}
+
 .nodes-table_header tr:hover {
   background-color: initial;
 }
@@ -80,6 +89,19 @@ body > [class="ember-view"],
   color: inherit;
 }
 
+.nodes-table th:nth-child(1) {
+  text-align: left;
+  width: 60%;
+}
+.nodes-table th:nth-child(2) {
+  text-align: left;
+  width: 30%;
+}
+.nodes-table th:nth-child(3) {
+  text-align: right;
+  width: 10%;
+}
+
 .table-row:hover {
   cursor: pointer;
 }
@@ -88,3 +110,10 @@ body > [class="ember-view"],
   text-align: right;
   font-family: "Lucida Console", Monaco, monospace;
 }
+
+.nodes-table thead th,
+.nodes-table tfoot td {
+  font-weight: bold;
+}
+
+

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

@@ -2,9 +2,17 @@
   <div class="level-left">
     <div class="level-item">
       <p class="control has-addons">
-        {{input class="input" value=pluginNameFilter placeholder="Filter by plugin name..."}}
-
-        <button class="button is-primary {{if (not pluginNameFilter) 'is-disabled'}}" {{action (action (mut pluginNameFilter) '')}}>Clear</button>
+        <select onchange={{action "selectFilter" value="target.value"}}>
+           {{#unless pluginNameFilter}}
+             <option disabled selected> - Filter by Plugin Name - </option>
+           {{/unless}}
+           {{#each pluginNames as |pluginName|}}
+             <option value="{{pluginName}}">{{pluginName}}</option>
+           {{/each}}
+           {{#if pluginNameFilter}}
+             <option value="clearFilter">Clear Filter</option>
+           {{/if}}
+        </select>        
       </p>
     </div>
 
@@ -22,11 +30,11 @@
 <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 class="td-time">
+      <th>Description</th>
+      <th>{{if groupByPluginName "Count" "Plugin Name"}}</th>
+      <th class="td-time">
         <a href="#" class="nodes-table_toggle" {{action "toggleTime"}}>Time (ms) <i class="fa fa-caret-{{if sortDescending 'down' 'up'}}"></i></a>
-      </td>
+      </th>
     </tr>
   </thead>
 
@@ -71,8 +79,7 @@
   </tbody>
   <tfoot>
     <tr>
-      <td colspan=2 class="has-text-right">Total</td>
-      <td>{{ns-to-ms totalTime}}</td>
+      <td colspan="3" class="td-time">Total: {{ns-to-ms totalTime}}</td>
     </tr>
   </tfoot>
 </table>