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