Add support for table based controls

* if a node table has `controls` they will be rendered in a row
* controls need the to be of the same structure as node-level controls
* control errors are not shown

client/app/scripts/components/node-details.js

@@ -206,7 +206,7 @@ export class NodeDetails extends React.Component {
                       <Warning text={getTruncationText(table.truncationCount)} />
                     </span>}
                   </div>
-                  <NodeDetailsLabels rows={table.rows}
+                  <NodeDetailsLabels rows={table.rows} controls={table.controls}
                     matches={nodeMatches.get('tables')} />
                 </div>
               );

client/app/scripts/components/node-details/node-details-labels.js

@@ -1,7 +1,9 @@
 import React from 'react';
 import { Map as makeMap } from 'immutable';
+import sortBy from 'lodash/sortBy';
 
 import MatchedText from '../matched-text';
+import NodeDetailsControlButton from './node-details-control-button';
 import ShowMore from '../show-more';
 
 export default class NodeDetailsLabels extends React.Component {
@@ -13,6 +15,7 @@ export default class NodeDetailsLabels extends React.Component {
       limit: this.DEFAULT_LIMIT,
     };
     this.handleLimitClick = this.handleLimitClick.bind(this);
+    this.renderControls = this.renderControls.bind(this);
   }
 
   handleLimitClick() {
@@ -20,8 +23,17 @@ export default class NodeDetailsLabels extends React.Component {
     this.setState({limit});
   }
 
+  renderControls(controls) {
+    return (
+      <div className="node-details-labels-controls">
+        {sortBy(controls, 'rank').map(control => <NodeDetailsControlButton
+          nodeId={control.nodeId} control={control} key={control.id} />)}
+      </div>
+    );
+  }
+
   render() {
-    const { matches = makeMap() } = this.props;
+    const { controls, matches = makeMap() } = this.props;
     let rows = this.props.rows;
     let notShown = 0;
     const limited = rows && this.state.limit > 0 && rows.length > this.state.limit;
@@ -37,6 +49,7 @@ export default class NodeDetailsLabels extends React.Component {
 
     return (
       <div className="node-details-labels">
+        {controls && this.renderControls(controls)}
         {rows.map(field => (<div className="node-details-labels-field" key={field.id}>
             <div className="node-details-labels-field-label truncate" title={field.label}
               key={field.id}>

client/app/styles/main.less

@@ -696,22 +696,7 @@ h2 {
     }
 
     .node-control-button {
-      .btn-opacity;
-      padding: 6px;
-      margin-left: 2px;
-      font-size: 110%;
       color: @white;
-      cursor: pointer;
-      border: 1px solid rgba(255, 255, 255, 0);
-      border-radius: 10%;
-      &:hover {
-        border-color: rgba(255, 255, 255, 0.6);
-      }
-      &-pending, &-pending:hover {
-        opacity: 0.2;
-        border-color: rgba(255, 255, 255, 0);
-        cursor: not-allowed;
-      }
     }
 
     &-spinner {
@@ -848,6 +833,10 @@ h2 {
   }
 
   &-labels {
+    &-controls {
+      margin-left: -4px;
+    }
+
     &-field {
       display: flex;
       align-items: baseline;
@@ -958,6 +947,25 @@ h2 {
   }
 }
 
+.node-control-button {
+  .btn-opacity;
+  padding: 6px;
+  margin-left: 2px;
+  font-size: 110%;
+  color: @text-secondary-color;
+  cursor: pointer;
+  border: 1px solid rgba(255, 255, 255, 0);
+  border-radius: 10%;
+  &:hover {
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  &-pending, &-pending:hover {
+    opacity: 0.2;
+    border-color: rgba(255, 255, 255, 0);
+    cursor: not-allowed;
+  }
+}
+
 .terminal {
 
   &-app {