diff --git a/client/app/scripts/charts/nodes-chart.js b/client/app/scripts/charts/nodes-chart.js
index 943395b83..19f949190 100644
--- a/client/app/scripts/charts/nodes-chart.js
+++ b/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);
diff --git a/client/app/scripts/charts/nodes-grid.js b/client/app/scripts/charts/nodes-grid.js
index a97e7a98d..94f652033 100644
--- a/client/app/scripts/charts/nodes-grid.js
+++ b/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);
diff --git a/client/app/scripts/components/app.js b/client/app/scripts/components/app.js
index 518026649..2e24fe8f4 100644
--- a/client/app/scripts/components/app.js
+++ b/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 {
{showingMetricsSelector && !gridMode && }
{showingNetworkSelector && !gridMode && }
-
+
diff --git a/client/app/scripts/components/grid-mode-selector.js b/client/app/scripts/components/grid-mode-selector.js
index 4bdc1723d..e27d849ee 100644
--- a/client/app/scripts/components/grid-mode-selector.js
+++ b/client/app/scripts/components/grid-mode-selector.js
@@ -41,7 +41,7 @@ class GridModeSelector extends React.Component {
return (
- {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)}
diff --git a/client/app/scripts/components/help-panel.js b/client/app/scripts/components/help-panel.js
index 417127064..45f24e9f2 100644
--- a/client/app/scripts/components/help-panel.js
+++ b/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 = [
diff --git a/client/app/scripts/components/node-details/node-details-table-row.js b/client/app/scripts/components/node-details/node-details-table-row.js
index 25f40d6b0..7948450a1 100644
--- a/client/app/scripts/components/node-details/node-details-table-row.js
+++ b/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);
diff --git a/client/app/scripts/components/node-details/node-details-table.js b/client/app/scripts/components/node-details/node-details-table.js
index d8bfc32ff..b8b450399 100644
--- a/client/app/scripts/components/node-details/node-details-table.js
+++ b/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%';
}
}
diff --git a/client/app/scripts/components/nodes.js b/client/app/scripts/components/nodes.js
index cac1b184b..826cfeaf8 100644
--- a/client/app/scripts/components/nodes.js
+++ b/client/app/scripts/components/nodes.js
@@ -85,15 +85,7 @@ class Nodes extends React.Component {
:
!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),
};
}
diff --git a/client/app/scripts/reducers/root.js b/client/app/scripts/reducers/root.js
index e69a3b511..ba9ef0dce 100644
--- a/client/app/scripts/reducers/root.js
+++ b/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);
}
diff --git a/client/app/scripts/utils/router-utils.js b/client/app/scripts/utils/router-utils.js
index 86bef1cb1..c69a1f627 100644
--- a/client/app/scripts/utils/router-utils.js
+++ b/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(),
diff --git a/client/app/styles/main.less b/client/app/styles/main.less
index e58463a9e..92ed77cb9 100644
--- a/client/app/styles/main.less
+++ b/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