Review feedback + fiddling w/ the columns widths a little more.

client/app/scripts/charts/nodes-chart.js

@@ -350,7 +350,7 @@ class NodesChart extends React.Component {
     const zoomFactor = Math.min(xFactor, yFactor);
     let zoomScale = this.state.scale;
 
-    if (!state.hasZoomed && zoomFactor > 0 && zoomFactor < 1) {
+    if (this.zoom && !state.hasZoomed && zoomFactor > 0 && zoomFactor < 1) {
       zoomScale = zoomFactor;
       // saving in d3's behavior cache
       this.zoom.scale(zoomFactor);

client/app/scripts/charts/nodes-grid.js

@@ -4,8 +4,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { List as makeList, Map as makeMap } from 'immutable';
 import NodeDetailsTable from '../components/node-details/node-details-table';
-import { clickNode, sortOrderChanged, clickPauseUpdate,
-  clickResumeUpdate } from '../actions/app-actions';
+import { clickNode, sortOrderChanged } from '../actions/app-actions';
 
 import { getNodeColor } from '../utils/color-utils';
 
@@ -49,7 +48,7 @@ function getColumns(nodes) {
     .toList()
     .sortBy(m => m.get('label'));
 
-  return relativesColumns.concat(metadataColumns.concat(metricColumns)).toJS();
+  return relativesColumns.concat(metadataColumns, metricColumns).toJS();
 }
 
 
@@ -110,7 +109,7 @@ class NodesGrid extends React.Component {
     };
 
     const detailsData = {
-      label: this.props.topology && this.props.topology.get('fullName'),
+      label: this.props.currentTopology && this.props.currentTopology.get('fullName'),
       id: '',
       nodes: nodes
         .toList()
@@ -126,7 +125,7 @@ class NodesGrid extends React.Component {
           className={className}
           renderIdCell={renderIdCell}
           tbodyStyle={tbodyStyle}
-          topologyId={this.props.topologyId}
+          topologyId={this.props.currentTopologyId}
           onSortChange={this.onSortChange}
           onClickRow={this.onClickRow}
           sortBy={gridSortBy}
@@ -141,7 +140,20 @@ class NodesGrid extends React.Component {
 }
 
 
+function mapStateToProps(state) {
+  return {
+    gridSortBy: state.get('gridSortBy'),
+    gridSortedDesc: state.get('gridSortedDesc'),
+    currentTopology: state.get('currentTopology'),
+    currentTopologyId: state.get('currentTopologyId'),
+    searchNodeMatches: state.getIn(['searchNodeMatches', state.get('currentTopologyId')]),
+    searchQuery: state.get('searchQuery'),
+    selectedNodeId: state.get('selectedNodeId')
+  };
+}
+
+
 export default connect(
-  () => ({}),
-  { clickNode, sortOrderChanged, clickPauseUpdate, clickResumeUpdate }
+  mapStateToProps,
+  { clickNode, sortOrderChanged }
 )(NodesGrid);

client/app/scripts/components/app.js

@@ -87,7 +87,7 @@ class App extends React.Component {
         dispatch(pinNextMetric(-1));
       } else if (char === '>') {
         dispatch(pinNextMetric(1));
-      } else if (char === 't') {
+      } else if (char === 't' || char === 'g') {
         dispatch(toggleGridMode());
       } else if (char === 'q') {
         dispatch(unpinMetric());
@@ -131,8 +131,8 @@ class App extends React.Component {
         <Sidebar classNames={gridMode ? 'sidebar-gridmode' : ''}>
           {showingMetricsSelector && !gridMode && <MetricSelector />}
           {showingNetworkSelector && !gridMode && <NetworkSelector />}
-          <Status />
           <GridModeSelector />
+          <Status />
           <TopologyOptions />
         </Sidebar>
 

client/app/scripts/components/grid-mode-selector.js

@@ -41,7 +41,7 @@ class GridModeSelector extends React.Component {
     return (
       <div className="grid-mode-selector">
         <div className="grid-mode-selector-wrapper">
-          {this.renderItem('fa fa-share-alt', 'Visualization', !gridMode, this.disableGridMode)}
+          {this.renderItem('fa fa-share-alt', 'Graph', !gridMode, this.disableGridMode)}
           {this.renderItem('fa fa-table', 'Table', gridMode, this.enableGridMode)}
         </div>
       </div>

client/app/scripts/components/help-panel.js

@@ -4,8 +4,8 @@ const GENERAL_SHORTCUTS = [
   {key: 'esc', label: 'Close active panel'},
   {key: '/', label: 'Activate search field'},
   {key: '?', label: 'Toggle shortcut menu'},
-  {key: 't', label: 'Activate Table mode'},
-  {key: 'v', label: 'Activate Visualization mode'},
+  {key: 't', label: 'Toggle Table mode'},
+  {key: 'g', label: 'Toggle Graph mode'},
 ];
 
 const CANVAS_METRIC_SHORTCUTS = [

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

@@ -68,6 +68,11 @@ export default class NodeDetailsTableRow extends React.Component {
   constructor(props, context) {
     super(props, context);
 
+    //
+    // We watch how far the mouse moves when click on a row, move to much and we assume that the
+    // user is selecting some data in the row. In this case don't trigger the onClick event which
+    // is most likely a details panel popping open.
+    //
     this.mouseDragOrigin = [0, 0];
 
     this.storeLabelRef = this.storeLabelRef.bind(this);

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

@@ -10,24 +10,28 @@ function isNumberField(field) {
   return field.dataType && field.dataType === 'number';
 }
 
+const CW = {
+  S: '44px',
+  M: '80px',
+  L: '140px',
+  XL: '170px',
+};
 
 const COLUMN_WIDTHS = {
-  port: '44px',
   count: '70px',
-  process_cpu_usage_percent: '80px',
-  threads: '80px',
-  process_memory_usage_bytes: '80px',
-  docker_cpu_total_usage: '80px',
-  docker_memory_usage: '80px',
+  docker_container_created: CW.L,
+  docker_container_restart_count: CW.M,
+  docker_container_state_human: CW.XL,
   docker_container_uptime: '85px',
-  docker_container_restart_count: '80px',
-  docker_container_ips: '80px',
-  // 27 Jul 16 11:33 UTC
-  docker_container_created: '140px',
-  docker_container_state_human: '170px',
-  open_files_count: '80px',
-  ppid: '80px',
-  pid: '80px',
+  docker_cpu_total_usage: CW.M,
+  docker_memory_usage: CW.M,
+  open_files_count: CW.M,
+  pid: CW.M,
+  port: '44px',
+  ppid: CW.M,
+  process_cpu_usage_percent: CW.M,
+  process_memory_usage_bytes: CW.M,
+  threads: CW.M,
 };
 
 
@@ -110,8 +114,6 @@ function getColumnsWidths(headers) {
         return '50%';
       } else if (headers.length > 3 && headers.length <= 5) {
         return '33%';
-      } else if (headers.length > 5) {
-        return '20%';
       }
     }
 

client/app/scripts/components/nodes.js

@@ -85,15 +85,7 @@ class Nodes extends React.Component {
           <NodesGrid {...this.state}
             nodeSize="24"
             nodes={nodes}
-            topology={this.props.currentTopology}
-            topologyId={this.props.currentTopologyId}
             margins={CANVAS_MARGINS}
-            layoutPrecision={layoutPrecision}
-            selectedNodeId={selectedNodeId}
-            gridSortBy={gridSortBy}
-            gridSortedDesc={gridSortedDesc}
-            searchNodeMatches={searchNodeMatches}
-            searchQuery={searchQuery}
           /> :
          <NodesChart {...this.state}
            nodes={nodes}
@@ -122,17 +114,9 @@ function mapStateToProps(state) {
     nodesLoaded: state.get('nodesLoaded'),
     topologies: state.get('topologies'),
     topologiesLoaded: state.get('topologiesLoaded'),
-    gridSortBy: state.get('gridSortBy'),
-    gridSortedDesc: state.get('gridSortedDesc'),
-    nodes: state.get('nodes').filter(node => !node.get('filtered')),
-    currentTopology: state.get('currentTopology'),
-    currentTopologyId: state.get('currentTopologyId'),
-    topologyEmpty: isTopologyEmpty(state),
     topology: state.get('currentTopology'),
-    highlightedNodeIds: state.get('highlightedNodeIds')
-    searchNodeMatches: state.getIn(['searchNodeMatches', state.get('currentTopologyId')]),
-    searchQuery: state.get('searchQuery'),
-    selectedNodeId: state.get('selectedNodeId')
+    nodes: state.get('nodes').filter(node => !node.get('filtered')),
+    topologyEmpty: isTopologyEmpty(state),
   };
 }
 

client/app/scripts/reducers/root.js

@@ -640,7 +640,7 @@ export function rootReducer(state = initialState, action) {
         selectedNodeId: action.state.selectedNodeId,
         pinnedMetricType: action.state.pinnedMetricType
       });
-      state = state.set('gridMode', action.state.mode === 'grid');
+      state = state.set('gridMode', action.state.topologyViewMode === 'grid');
       if (action.state.gridSortBy) {
         state = state.set('gridSortBy', action.state.gridSortBy);
       }

client/app/scripts/utils/router-utils.js

@@ -39,7 +39,7 @@ export function getUrlState(state) {
 
   const urlState = {
     controlPipe: cp ? cp.toJS() : null,
-    mode: state.get('gridMode') ? 'grid' : 'topo',
+    topologyViewMode: state.get('gridMode') ? 'grid' : 'topo',
     nodeDetails: nodeDetails.toJS(),
     pinnedMetricType: state.get('pinnedMetricType'),
     pinnedSearches: state.get('pinnedSearches').toJS(),

client/app/styles/main.less

@@ -15,7 +15,6 @@
 /* weave company colours */
 @weave-gray-blue: rgb(85,105,145);
 @weave-blue: rgb(0,210,255);
-@weave-blue-transparent: rgb(0,210,255, 0.1);
 @weave-orange: rgb(255,75,25);
 @weave-charcoal-blue: rgb(50,50,75); // #32324B