From 272b9a5d6ad27e39baf9a160ce6fe5cfb5866ee4 Mon Sep 17 00:00:00 2001 From: guyfedwards Date: Wed, 9 Jan 2019 11:31:58 +0000 Subject: [PATCH] add eslint sort-keys rule and run codemod --- client/.eslintrc | 13 +- client/app/scripts/actions/app-actions.js | 156 ++++++++-------- .../charts/__tests__/nodes-layout-test.js | 106 +++++------ client/app/scripts/charts/edge-container.js | 9 +- client/app/scripts/charts/node-container.js | 10 +- .../scripts/charts/nodes-chart-elements.js | 24 +-- client/app/scripts/charts/nodes-grid.js | 22 +-- client/app/scripts/charts/nodes-layout.js | 18 +- client/app/scripts/components/app.js | 24 +-- .../app/scripts/components/cloud-feature.js | 8 +- .../app/scripts/components/debug-toolbar.js | 30 +-- client/app/scripts/components/details-card.js | 2 +- .../scripts/components/embedded-terminal.js | 2 +- client/app/scripts/components/footer.js | 6 +- client/app/scripts/components/help-panel.js | 24 +-- .../components/metric-selector-item.js | 6 +- .../components/network-selector-item.js | 6 +- .../scripts/components/networks-selector.js | 4 +- client/app/scripts/components/node-details.js | 4 +- .../__tests__/node-details-table-test.js | 12 +- .../node-details-control-button.js | 4 +- .../node-details-health-link-item.js | 2 +- .../node-details/node-details-table-row.js | 6 +- .../node-details/node-details-table.js | 9 +- .../app/scripts/components/nodes-resources.js | 2 +- .../node-resources-layer-topology.js | 2 +- .../node-resources-metric-box.js | 6 +- client/app/scripts/components/nodes.js | 6 +- client/app/scripts/components/search.js | 16 +- client/app/scripts/components/sparkline.js | 28 +-- client/app/scripts/components/terminal-app.js | 6 +- client/app/scripts/components/terminal.js | 10 +- client/app/scripts/components/time-control.js | 14 +- .../scripts/components/time-travel-wrapper.js | 2 +- client/app/scripts/components/topologies.js | 10 +- .../scripts/components/topology-options.js | 16 +- .../components/troubleshooting-menu.js | 4 +- .../scripts/components/view-mode-button.js | 4 +- .../scripts/components/view-mode-selector.js | 6 +- .../app/scripts/components/zoomable-canvas.js | 22 +-- client/app/scripts/constants/resources.js | 6 +- client/app/scripts/constants/styles.js | 37 ++-- client/app/scripts/contrast-compiler.js | 2 +- client/app/scripts/decorators/node.js | 14 +- client/app/scripts/hoc/metric-feeder.js | 10 +- .../scripts/reducers/__tests__/root-test.js | 174 +++++++++--------- client/app/scripts/reducers/root.js | 38 ++-- .../selectors/__tests__/search-test.js | 30 +-- client/app/scripts/selectors/canvas.js | 2 +- .../app/scripts/selectors/graph-view/graph.js | 4 +- .../scripts/selectors/graph-view/layout.js | 2 +- .../app/scripts/selectors/graph-view/zoom.js | 14 +- client/app/scripts/selectors/node-networks.js | 2 +- .../scripts/selectors/resource-view/zoom.js | 14 +- .../utils/__tests__/search-utils-test.js | 34 ++-- .../utils/__tests__/topology-utils-test.js | 52 +++--- .../app/scripts/utils/data-generator-utils.js | 38 ++-- client/app/scripts/utils/file-utils.js | 10 +- client/app/scripts/utils/layouter-utils.js | 2 +- client/app/scripts/utils/metric-utils.js | 6 +- .../app/scripts/utils/node-details-utils.js | 4 +- client/app/scripts/utils/router-utils.js | 8 +- client/app/scripts/utils/search-utils.js | 16 +- client/app/scripts/utils/storage-utils.js | 8 +- client/app/scripts/utils/string-utils.js | 8 +- client/app/scripts/utils/transform-utils.js | 8 +- client/app/scripts/utils/web-api-utils.js | 112 +++++------ client/server.js | 6 +- 68 files changed, 667 insertions(+), 655 deletions(-) diff --git a/client/.eslintrc b/client/.eslintrc index e622effa6..519fa3361 100644 --- a/client/.eslintrc +++ b/client/.eslintrc @@ -7,9 +7,17 @@ "node": true }, "rules": { - "no-debugger" : 1, + "no-debugger": 1, "comma-dangle": 0, "global-require": 0, + "sort-keys": [ + "error", + "asc", + { + "caseSensitive": false, + "natural": true + } + ], "import/no-extraneous-dependencies": [ "error", { @@ -36,8 +44,7 @@ "react/prefer-stateless-function": 0, "react/sort-comp": 0, "react/prop-types": 0, - "jsx-a11y/click-events-have-key-events": 0, - "jsx-a11y/mouse-events-have-key-events": 0, + "jsx-a11y/mouse-events-have-key-events": 0 } } diff --git a/client/app/scripts/actions/app-actions.js b/client/app/scripts/actions/app-actions.js index 698250fdd..880525fe0 100644 --- a/client/app/scripts/actions/app-actions.js +++ b/client/app/scripts/actions/app-actions.js @@ -62,9 +62,9 @@ export function toggleHelp() { export function sortOrderChanged(sortedBy, sortedDesc) { return (dispatch, getState) => { dispatch({ - type: ActionTypes.SORT_ORDER_CHANGED, sortedBy, - sortedDesc + sortedDesc, + type: ActionTypes.SORT_ORDER_CHANGED }); updateRoute(getState); }; @@ -90,16 +90,16 @@ export function showNetworks(visible) { export function selectNetwork(networkId) { return { - type: ActionTypes.SELECT_NETWORK, - networkId + networkId, + type: ActionTypes.SELECT_NETWORK }; } export function pinNetwork(networkId) { return (dispatch, getState) => { dispatch({ - type: ActionTypes.PIN_NETWORK, networkId, + type: ActionTypes.PIN_NETWORK, }); updateRoute(getState); @@ -109,8 +109,8 @@ export function pinNetwork(networkId) { export function unpinNetwork(networkId) { return (dispatch, getState) => { dispatch({ - type: ActionTypes.UNPIN_NETWORK, networkId, + type: ActionTypes.UNPIN_NETWORK, }); updateRoute(getState); @@ -124,8 +124,8 @@ export function unpinNetwork(networkId) { export function hoverMetric(metricType) { return { - type: ActionTypes.HOVER_METRIC, metricType, + type: ActionTypes.HOVER_METRIC, }; } @@ -138,8 +138,8 @@ export function unhoverMetric() { export function pinMetric(metricType) { return (dispatch, getState) => { dispatch({ - type: ActionTypes.PIN_METRIC, metricType, + type: ActionTypes.PIN_METRIC, }); updateRoute(getState); }; @@ -174,9 +174,9 @@ export function pinPreviousMetric() { export function updateSearch(searchQuery = '', pinnedSearches = []) { return (dispatch, getState) => { dispatch({ - type: ActionTypes.UPDATE_SEARCH, pinnedSearches, searchQuery, + type: ActionTypes.UPDATE_SEARCH, }); updateRoute(getState); }; @@ -204,11 +204,11 @@ export function blurSearch() { export function changeTopologyOption(option, value, topologyId, addOrRemove) { return (dispatch, getState) => { dispatch({ - type: ActionTypes.CHANGE_TOPOLOGY_OPTION, - topologyId, + addOrRemove, option, - value, - addOrRemove + topologyId, + type: ActionTypes.CHANGE_TOPOLOGY_OPTION, + value }); updateRoute(getState); // update all request workers with new options @@ -229,8 +229,8 @@ export function clickBackground() { export function clickCloseDetails(nodeId) { return (dispatch, getState) => { dispatch({ - type: ActionTypes.CLICK_CLOSE_DETAILS, - nodeId + nodeId, + type: ActionTypes.CLICK_CLOSE_DETAILS }); // Pull the most recent details for the next details panel that comes into focus. getNodeDetails(getState, dispatch); @@ -241,8 +241,8 @@ export function clickCloseDetails(nodeId) { export function closeTerminal(pipeId) { return (dispatch, getState) => { dispatch({ - type: ActionTypes.CLOSE_TERMINAL, - pipeId + pipeId, + type: ActionTypes.CLOSE_TERMINAL }); updateRoute(getState); }; @@ -250,23 +250,23 @@ export function closeTerminal(pipeId) { export function clickDownloadGraph() { return (dispatch) => { - dispatch({ type: ActionTypes.SET_EXPORTING_GRAPH, exporting: true }); + dispatch({ exporting: true, type: ActionTypes.SET_EXPORTING_GRAPH }); saveGraph(); - dispatch({ type: ActionTypes.SET_EXPORTING_GRAPH, exporting: false }); + dispatch({ exporting: false, type: ActionTypes.SET_EXPORTING_GRAPH }); }; } export function clickForceRelayout() { return (dispatch) => { dispatch({ - type: ActionTypes.CLICK_FORCE_RELAYOUT, - forceRelayout: true + forceRelayout: true, + type: ActionTypes.CLICK_FORCE_RELAYOUT }); // fire only once, reset after dispatch setTimeout(() => { dispatch({ - type: ActionTypes.CLICK_FORCE_RELAYOUT, - forceRelayout: false + forceRelayout: false, + type: ActionTypes.CLICK_FORCE_RELAYOUT }); }, 100); }; @@ -274,7 +274,7 @@ export function clickForceRelayout() { export function setViewportDimensions(width, height) { return (dispatch) => { - dispatch({ type: ActionTypes.SET_VIEWPORT_DIMENSIONS, width, height }); + dispatch({ height, type: ActionTypes.SET_VIEWPORT_DIMENSIONS, width }); }; } @@ -320,11 +320,11 @@ export function setResourceView() { export function clickNode(nodeId, label, origin, topologyId = null) { return (dispatch, getState) => { dispatch({ - type: ActionTypes.CLICK_NODE, - origin, label, nodeId, + origin, topologyId, + type: ActionTypes.CLICK_NODE, }); updateRoute(getState); getNodeDetails(getState, dispatch); @@ -349,11 +349,11 @@ export function pauseTimeAtNow() { export function clickRelative(nodeId, topologyId, label, origin) { return (dispatch, getState) => { dispatch({ - type: ActionTypes.CLICK_RELATIVE, label, - origin, nodeId, - topologyId + origin, + topologyId, + type: ActionTypes.CLICK_RELATIVE }); updateRoute(getState); getNodeDetails(getState, dispatch); @@ -376,9 +376,9 @@ function updateTopology(dispatch, getState) { export function clickShowTopologyForNode(topologyId, nodeId) { return (dispatch, getState) => { dispatch({ - type: ActionTypes.CLICK_SHOW_TOPOLOGY_FOR_NODE, + nodeId, topologyId, - nodeId + type: ActionTypes.CLICK_SHOW_TOPOLOGY_FOR_NODE }); updateTopology(dispatch, getState); }; @@ -387,8 +387,8 @@ export function clickShowTopologyForNode(topologyId, nodeId) { export function clickTopology(topologyId) { return (dispatch, getState) => { dispatch({ - type: ActionTypes.CLICK_TOPOLOGY, - topologyId + topologyId, + type: ActionTypes.CLICK_TOPOLOGY }); updateTopology(dispatch, getState); }; @@ -410,8 +410,8 @@ export function openWebsocket() { export function clearControlError(nodeId) { return { - type: ActionTypes.CLEAR_CONTROL_ERROR, - nodeId + nodeId, + type: ActionTypes.CLEAR_CONTROL_ERROR }; } @@ -424,9 +424,9 @@ export function closeWebsocket() { export function doControl(nodeId, control) { return (dispatch) => { dispatch({ - type: ActionTypes.DO_CONTROL, + control, nodeId, - control + type: ActionTypes.DO_CONTROL }); doControlRequest(nodeId, control, dispatch); }; @@ -434,15 +434,15 @@ export function doControl(nodeId, control) { export function enterEdge(edgeId) { return { - type: ActionTypes.ENTER_EDGE, - edgeId + edgeId, + type: ActionTypes.ENTER_EDGE }; } export function enterNode(nodeId) { return { - type: ActionTypes.ENTER_NODE, - nodeId + nodeId, + type: ActionTypes.ENTER_NODE }; } @@ -452,8 +452,8 @@ export function hitEsc() { const controlPipe = state.get('controlPipes').last(); if (controlPipe && controlPipe.get('status') === 'PIPE_DELETED') { dispatch({ - type: ActionTypes.CLOSE_TERMINAL, - pipeId: controlPipe.get('id') + pipeId: controlPipe.get('id'), + type: ActionTypes.CLOSE_TERMINAL }); updateRoute(getState); } else if (state.get('showingHelp')) { @@ -467,38 +467,38 @@ export function hitEsc() { export function leaveEdge(edgeId) { return { - type: ActionTypes.LEAVE_EDGE, - edgeId + edgeId, + type: ActionTypes.LEAVE_EDGE }; } export function leaveNode(nodeId) { return { - type: ActionTypes.LEAVE_NODE, - nodeId + nodeId, + type: ActionTypes.LEAVE_NODE }; } export function receiveControlError(nodeId, err) { return { - type: ActionTypes.DO_CONTROL_ERROR, + error: err, nodeId, - error: err + type: ActionTypes.DO_CONTROL_ERROR }; } export function receiveControlSuccess(nodeId) { return { - type: ActionTypes.DO_CONTROL_SUCCESS, - nodeId + nodeId, + type: ActionTypes.DO_CONTROL_SUCCESS }; } export function receiveNodeDetails(details, requestTimestamp) { return { - type: ActionTypes.RECEIVE_NODE_DETAILS, + details, requestTimestamp, - details + type: ActionTypes.RECEIVE_NODE_DETAILS }; } @@ -521,8 +521,8 @@ export function receiveNodesDelta(delta) { const hasChanges = delta.add || delta.update || delta.remove || delta.reset; if (hasChanges) { dispatch({ - type: ActionTypes.RECEIVE_NODES_DELTA, - delta + delta, + type: ActionTypes.RECEIVE_NODES_DELTA }); } } @@ -548,16 +548,16 @@ export function resumeTime() { export function receiveNodes(nodes) { return { - type: ActionTypes.RECEIVE_NODES, nodes, + type: ActionTypes.RECEIVE_NODES, }; } export function jumpToTime(timestamp) { return (dispatch, getState) => { dispatch({ - type: ActionTypes.JUMP_TO_TIME, timestamp, + type: ActionTypes.JUMP_TO_TIME, }); updateRoute(getState); getTopologies(getState, dispatch); @@ -575,9 +575,9 @@ export function jumpToTime(timestamp) { export function receiveNodesForTopology(nodes, topologyId) { return { - type: ActionTypes.RECEIVE_NODES_FOR_TOPOLOGY, nodes, - topologyId + topologyId, + type: ActionTypes.RECEIVE_NODES_FOR_TOPOLOGY }; } @@ -585,8 +585,8 @@ export function receiveTopologies(topologies) { return (dispatch, getState) => { const firstLoad = !getState().get('topologiesLoaded'); dispatch({ - type: ActionTypes.RECEIVE_TOPOLOGIES, - topologies + topologies, + type: ActionTypes.RECEIVE_TOPOLOGIES }); getNodes(getState, dispatch); // Populate search matches on first load @@ -604,12 +604,12 @@ export function receiveApiDetails(apiDetails) { const pausedAt = getState().get('pausedAt'); dispatch({ - type: ActionTypes.RECEIVE_API_DETAILS, capabilities: fromJS(apiDetails.capabilities || {}), hostname: apiDetails.hostname, - version: apiDetails.version, newVersion: apiDetails.newVersion, plugins: apiDetails.plugins, + type: ActionTypes.RECEIVE_API_DETAILS, + version: apiDetails.version, }); // On initial load either start time travelling at the pausedAt timestamp @@ -631,8 +631,8 @@ export function receiveApiDetails(apiDetails) { export function receiveControlNodeRemoved(nodeId) { return (dispatch, getState) => { dispatch({ - type: ActionTypes.RECEIVE_CONTROL_NODE_REMOVED, - nodeId + nodeId, + type: ActionTypes.RECEIVE_CONTROL_NODE_REMOVED }); updateRoute(getState); }; @@ -641,10 +641,10 @@ export function receiveControlNodeRemoved(nodeId) { export function receiveControlPipeFromParams(pipeId, rawTty, resizeTtyControl) { // TODO add nodeId return { - type: ActionTypes.RECEIVE_CONTROL_PIPE, pipeId, rawTty, - resizeTtyControl + resizeTtyControl, + type: ActionTypes.RECEIVE_CONTROL_PIPE }; } @@ -664,12 +664,12 @@ export function receiveControlPipe(pipeId, nodeId, rawTty, resizeTtyControl, con } dispatch({ - type: ActionTypes.RECEIVE_CONTROL_PIPE, + control, nodeId, pipeId, rawTty, resizeTtyControl, - control + type: ActionTypes.RECEIVE_CONTROL_PIPE }); updateRoute(getState); @@ -678,9 +678,9 @@ export function receiveControlPipe(pipeId, nodeId, rawTty, resizeTtyControl, con export function receiveControlPipeStatus(pipeId, status) { return { - type: ActionTypes.RECEIVE_CONTROL_PIPE_STATUS, pipeId, - status + status, + type: ActionTypes.RECEIVE_CONTROL_PIPE_STATUS }; } @@ -693,9 +693,9 @@ export function receiveError(errorUrl) { export function receiveNotFound(nodeId, requestTimestamp) { return { - type: ActionTypes.RECEIVE_NOT_FOUND, - requestTimestamp, nodeId, + requestTimestamp, + type: ActionTypes.RECEIVE_NOT_FOUND, }; } @@ -703,8 +703,8 @@ export function setContrastMode(enabled) { return (dispatch) => { loadTheme(enabled ? 'contrast' : 'normal'); dispatch({ - type: ActionTypes.TOGGLE_CONTRAST_MODE, enabled, + type: ActionTypes.TOGGLE_CONTRAST_MODE, }); }; } @@ -781,14 +781,14 @@ export function shutdown() { export function setMonitorState(monitor) { return { - type: ActionTypes.MONITOR_STATE, - monitor + monitor, + type: ActionTypes.MONITOR_STATE }; } export function setStoreViewState(storeViewState) { return { - type: ActionTypes.SET_STORE_VIEW_STATE, - storeViewState + storeViewState, + type: ActionTypes.SET_STORE_VIEW_STATE }; } diff --git a/client/app/scripts/charts/__tests__/nodes-layout-test.js b/client/app/scripts/charts/__tests__/nodes-layout-test.js index b9ff15601..7c73f5411 100644 --- a/client/app/scripts/charts/__tests__/nodes-layout-test.js +++ b/client/app/scripts/charts/__tests__/nodes-layout-test.js @@ -25,32 +25,55 @@ describe('NodesLayout', () => { const nodeSets = { initial4: { + edges: fromJS({ + [edge('n1', 'n3')]: {id: edge('n1', 'n3'), source: 'n1', target: 'n3'}, + [edge('n1', 'n4')]: {id: edge('n1', 'n4'), source: 'n1', target: 'n4'}, + [edge('n2', 'n4')]: {id: edge('n2', 'n4'), source: 'n2', target: 'n4'} + }), nodes: fromJS({ n1: {id: 'n1'}, n2: {id: 'n2'}, n3: {id: 'n3'}, n4: {id: 'n4'} - }), + }) + }, + layoutProps: { + edges: fromJS({}), + nodes: fromJS({ + n1: { + id: 'n1', label: 'lold', labelMinor: 'lmold', rank: 'rold' + }, + }) + }, + layoutProps2: { + edges: fromJS({}), + nodes: fromJS({ + n1: { + id: 'n1', label: 'lnew', labelMinor: 'lmnew', rank: 'rnew', x: 111, y: 109 + }, + }) + }, + rank4: { edges: fromJS({ [edge('n1', 'n3')]: {id: edge('n1', 'n3'), source: 'n1', target: 'n3'}, [edge('n1', 'n4')]: {id: edge('n1', 'n4'), source: 'n1', target: 'n4'}, [edge('n2', 'n4')]: {id: edge('n2', 'n4'), source: 'n2', target: 'n4'} - }) - }, - rank4: { + }), nodes: fromJS({ n1: {id: 'n1', rank: 'A'}, n2: {id: 'n2', rank: 'A'}, n3: {id: 'n3', rank: 'B'}, n4: {id: 'n4', rank: 'B'} - }), - edges: fromJS({ - [edge('n1', 'n3')]: {id: edge('n1', 'n3'), source: 'n1', target: 'n3'}, - [edge('n1', 'n4')]: {id: edge('n1', 'n4'), source: 'n1', target: 'n4'}, - [edge('n2', 'n4')]: {id: edge('n2', 'n4'), source: 'n2', target: 'n4'} }) }, rank6: { + edges: fromJS({ + [edge('n1', 'n3')]: {id: edge('n1', 'n3'), source: 'n1', target: 'n3'}, + [edge('n1', 'n4')]: {id: edge('n1', 'n4'), source: 'n1', target: 'n4'}, + [edge('n1', 'n5')]: {id: edge('n1', 'n5'), source: 'n1', target: 'n5'}, + [edge('n2', 'n4')]: {id: edge('n2', 'n4'), source: 'n2', target: 'n4'}, + [edge('n2', 'n6')]: {id: edge('n2', 'n6'), source: 'n2', target: 'n6'}, + }), nodes: fromJS({ n1: {id: 'n1', rank: 'A'}, n2: {id: 'n2', rank: 'A'}, @@ -58,68 +81,64 @@ describe('NodesLayout', () => { n4: {id: 'n4', rank: 'B'}, n5: {id: 'n5', rank: 'A'}, n6: {id: 'n6', rank: 'B'}, - }), - edges: fromJS({ - [edge('n1', 'n3')]: {id: edge('n1', 'n3'), source: 'n1', target: 'n3'}, - [edge('n1', 'n4')]: {id: edge('n1', 'n4'), source: 'n1', target: 'n4'}, - [edge('n1', 'n5')]: {id: edge('n1', 'n5'), source: 'n1', target: 'n5'}, - [edge('n2', 'n4')]: {id: edge('n2', 'n4'), source: 'n2', target: 'n4'}, - [edge('n2', 'n6')]: {id: edge('n2', 'n6'), source: 'n2', target: 'n6'}, }) }, removeEdge24: { + edges: fromJS({ + [edge('n1', 'n3')]: {id: edge('n1', 'n3'), source: 'n1', target: 'n3'}, + [edge('n1', 'n4')]: {id: edge('n1', 'n4'), source: 'n1', target: 'n4'} + }), nodes: fromJS({ n1: {id: 'n1'}, n2: {id: 'n2'}, n3: {id: 'n3'}, n4: {id: 'n4'} - }), - edges: fromJS({ - [edge('n1', 'n3')]: {id: edge('n1', 'n3'), source: 'n1', target: 'n3'}, - [edge('n1', 'n4')]: {id: edge('n1', 'n4'), source: 'n1', target: 'n4'} }) }, removeNode2: { + edges: fromJS({ + [edge('n1', 'n3')]: {id: edge('n1', 'n3'), source: 'n1', target: 'n3'}, + [edge('n1', 'n4')]: {id: edge('n1', 'n4'), source: 'n1', target: 'n4'} + }), nodes: fromJS({ n1: {id: 'n1'}, n3: {id: 'n3'}, n4: {id: 'n4'} - }), - edges: fromJS({ - [edge('n1', 'n3')]: {id: edge('n1', 'n3'), source: 'n1', target: 'n3'}, - [edge('n1', 'n4')]: {id: edge('n1', 'n4'), source: 'n1', target: 'n4'} }) }, removeNode23: { + edges: fromJS({ + [edge('n1', 'n4')]: {id: edge('n1', 'n4'), source: 'n1', target: 'n4'} + }), nodes: fromJS({ n1: {id: 'n1'}, n4: {id: 'n4'} - }), - edges: fromJS({ - [edge('n1', 'n4')]: {id: edge('n1', 'n4'), source: 'n1', target: 'n4'} }) }, single3: { + edges: fromJS({}), nodes: fromJS({ n1: {id: 'n1'}, n2: {id: 'n2'}, n3: {id: 'n3'} - }), - edges: fromJS({}) + }) }, singlePortrait: { + edges: fromJS({ + [edge('n1', 'n4')]: {id: edge('n1', 'n4'), source: 'n1', target: 'n4'} + }), nodes: fromJS({ n1: {id: 'n1'}, n2: {id: 'n2'}, n3: {id: 'n3'}, n4: {id: 'n4'}, n5: {id: 'n5'} - }), - edges: fromJS({ - [edge('n1', 'n4')]: {id: edge('n1', 'n4'), source: 'n1', target: 'n4'} }) }, singlePortrait6: { + edges: fromJS({ + [edge('n1', 'n4')]: {id: edge('n1', 'n4'), source: 'n1', target: 'n4'} + }), nodes: fromJS({ n1: {id: 'n1'}, n2: {id: 'n2'}, @@ -127,26 +146,7 @@ describe('NodesLayout', () => { n4: {id: 'n4'}, n5: {id: 'n5'}, n6: {id: 'n6'} - }), - edges: fromJS({ - [edge('n1', 'n4')]: {id: edge('n1', 'n4'), source: 'n1', target: 'n4'} }) - }, - layoutProps: { - nodes: fromJS({ - n1: { - id: 'n1', label: 'lold', labelMinor: 'lmold', rank: 'rold' - }, - }), - edges: fromJS({}) - }, - layoutProps2: { - nodes: fromJS({ - n1: { - id: 'n1', label: 'lnew', labelMinor: 'lmnew', rank: 'rnew', x: 111, y: 109 - }, - }), - edges: fromJS({}) } }; @@ -155,8 +155,8 @@ describe('NodesLayout', () => { window.localStorage.clear(); options = { - nodeCache: makeMap(), - edgeCache: makeMap() + edgeCache: makeMap(), + nodeCache: makeMap() }; }); diff --git a/client/app/scripts/charts/edge-container.js b/client/app/scripts/charts/edge-container.js index c410097a7..2ad0f8199 100644 --- a/client/app/scripts/charts/edge-container.js +++ b/client/app/scripts/charts/edge-container.js @@ -48,8 +48,8 @@ export default class EdgeContainer extends React.PureComponent { super(props, context); this.state = { - waypointsMap: makeMap(), thickness: 1, + waypointsMap: makeMap(), }; } @@ -83,9 +83,12 @@ export default class EdgeContainer extends React.PureComponent { return ( // For the Motion interpolation to work, the waypoints need to be in a map format like // { x0: 11, y0: 22, x1: 33, y1: 44 } that we convert to the array format when rendering. - + { - ({ interpolatedThickness, ...interpolatedWaypoints}) => + ({ interpolatedThickness, ...interpolatedWaypoints }) => transformedEdge( forwardedProps, waypointsMapToArray(fromJS(interpolatedWaypoints)), diff --git a/client/app/scripts/charts/node-container.js b/client/app/scripts/charts/node-container.js index fa0dce2f2..636412465 100644 --- a/client/app/scripts/charts/node-container.js +++ b/client/app/scripts/charts/node-container.js @@ -24,8 +24,8 @@ class NodeContainer extends React.Component { ev.stopPropagation(); trackAnalyticsEvent('scope.node.click', { layout: GRAPH_VIEW_MODE, - topologyId: this.props.currentTopology.get('id'), parentTopologyId: this.props.currentTopology.get('parentId'), + topologyId: this.props.currentTopology.get('id'), }); this.props.clickNode(nodeId, this.props.label, this.ref.getBoundingClientRect()); }; @@ -90,11 +90,11 @@ class NodeContainer extends React.Component { function mapStateToProps(state) { return { - searchTerms: [state.get('searchQuery')], - exportingGraph: state.get('exportingGraph'), - showingNetworks: state.get('showingNetworks'), - currentTopology: state.get('currentTopology'), contrastMode: state.get('contrastMode'), + currentTopology: state.get('currentTopology'), + exportingGraph: state.get('exportingGraph'), + searchTerms: [state.get('searchQuery')], + showingNetworks: state.get('showingNetworks'), }; } diff --git a/client/app/scripts/charts/nodes-chart-elements.js b/client/app/scripts/charts/nodes-chart-elements.js index adfba2646..52c3e3b1f 100644 --- a/client/app/scripts/charts/nodes-chart-elements.js +++ b/client/app/scripts/charts/nodes-chart-elements.js @@ -247,7 +247,7 @@ class NodesChartElements extends React.Component { const orderedElements = makeList([ edges.get(BLURRED_EDGES_LAYER, makeList()), nodes.get(BLURRED_NODES_LAYER, makeList()), - fromJS([{ isOverlay: true, isActive: !!nodes.get(BLURRED_NODES_LAYER) }]), + fromJS([{ isActive: !!nodes.get(BLURRED_NODES_LAYER), isOverlay: true }]), edges.get(NORMAL_EDGES_LAYER, makeList()), nodes.get(NORMAL_NODES_LAYER, makeList()), edges.get(HIGHLIGHTED_EDGES_LAYER, makeList()), @@ -267,24 +267,24 @@ class NodesChartElements extends React.Component { function mapStateToProps(state) { return { + contrastMode: state.get('contrastMode'), hasSelectedNode: hasSelectedNodeFn(state), - layoutNodes: layoutNodesSelector(state), - layoutEdges: layoutEdgesSelector(state), - isAnimated: !graphExceedsComplexityThreshSelector(state), - highlightedNodeIds: highlightedNodeIdsSelector(state), highlightedEdgeIds: highlightedEdgeIdsSelector(state), - selectedNetworkNodesIds: selectedNetworkNodesIdsSelector(state), - searchNodeMatches: searchNodeMatchesSelector(state), + highlightedNodeIds: highlightedNodeIdsSelector(state), + isAnimated: !graphExceedsComplexityThreshSelector(state), + layoutEdges: layoutEdgesSelector(state), + layoutNodes: layoutNodesSelector(state), + mouseOverEdgeId: state.get('mouseOverEdgeId'), + mouseOverNodeId: state.get('mouseOverNodeId'), neighborsOfSelectedNode: getAdjacentNodes(state), - nodeNetworks: nodeNetworksSelector(state), nodeMetric: nodeMetricSelector(state), - selectedScale: selectedScaleSelector(state), + nodeNetworks: nodeNetworksSelector(state), + searchNodeMatches: searchNodeMatchesSelector(state), searchQuery: state.get('searchQuery'), selectedNetwork: state.get('selectedNetwork'), + selectedNetworkNodesIds: selectedNetworkNodesIdsSelector(state), selectedNodeId: state.get('selectedNodeId'), - mouseOverNodeId: state.get('mouseOverNodeId'), - mouseOverEdgeId: state.get('mouseOverEdgeId'), - contrastMode: state.get('contrastMode'), + selectedScale: selectedScaleSelector(state), }; } diff --git a/client/app/scripts/charts/nodes-grid.js b/client/app/scripts/charts/nodes-grid.js index 7acc54586..ffaa8126a 100644 --- a/client/app/scripts/charts/nodes-grid.js +++ b/client/app/scripts/charts/nodes-grid.js @@ -44,7 +44,7 @@ function getColumns(nodes, topologies) { .flatMap((n) => { const metrics = (n.get('metrics') || makeList()) .filter(m => !m.get('valueEmpty')) - .map(m => makeMap({ id: m.get('id'), label: m.get('label'), dataType: 'number' })); + .map(m => makeMap({ dataType: 'number', id: m.get('id'), label: m.get('label') })); return metrics; }) .toSet() @@ -55,7 +55,7 @@ function getColumns(nodes, topologies) { .toList() .flatMap((n) => { const metadata = (n.get('metadata') || makeList()) - .map(m => makeMap({ id: m.get('id'), label: m.get('label'), dataType: m.get('dataType') })); + .map(m => makeMap({ dataType: m.get('dataType'), id: m.get('id'), label: m.get('label') })); return metadata; }) .toSet() @@ -87,7 +87,7 @@ function renderIdCell({ return (
-
+
@@ -108,8 +108,8 @@ class NodesGrid extends React.Component { onClickRow(ev, node) { trackAnalyticsEvent('scope.node.click', { layout: TABLE_VIEW_MODE, - topologyId: this.props.currentTopology.get('id'), parentTopologyId: this.props.currentTopology.get('parentId'), + topologyId: this.props.currentTopology.get('id'), }); this.props.clickNode(node.id, node.label, ev.target.getBoundingClientRect()); } @@ -141,13 +141,13 @@ class NodesGrid extends React.Component { }; const detailsData = { - label: this.props.currentTopology && this.props.currentTopology.get('fullName'), + columns: getColumns(nodes, topologies), id: '', + label: this.props.currentTopology && this.props.currentTopology.get('fullName'), nodes: nodes .toList() .filter(n => !(searchQuery && searchNodeMatches.get(n.get('id'), makeMap()).isEmpty())) - .toJS(), - columns: getColumns(nodes, topologies) + .toJS() }; return ( @@ -174,16 +174,16 @@ class NodesGrid extends React.Component { function mapStateToProps(state) { return { - nodes: shownNodesSelector(state), - gridSortedBy: state.get('gridSortedBy'), - gridSortedDesc: state.get('gridSortedDesc'), currentTopology: state.get('currentTopology'), currentTopologyId: state.get('currentTopologyId'), + gridSortedBy: state.get('gridSortedBy'), + gridSortedDesc: state.get('gridSortedDesc'), + nodes: shownNodesSelector(state), searchNodeMatches: searchNodeMatchesSelector(state), searchQuery: state.get('searchQuery'), selectedNodeId: state.get('selectedNodeId'), - windowHeight: windowHeightSelector(state), topologies: state.get('topologies'), + windowHeight: windowHeightSelector(state), }; } diff --git a/client/app/scripts/charts/nodes-layout.js b/client/app/scripts/charts/nodes-layout.js index 7ec58a084..2d0d7321c 100644 --- a/client/app/scripts/charts/nodes-layout.js +++ b/client/app/scripts/charts/nodes-layout.js @@ -14,7 +14,7 @@ import { uniformSelect } from '../utils/array-utils'; const log = debug('scope:nodes-layout'); const topologyCaches = {}; -export const DEFAULT_MARGINS = { top: 0, left: 0 }; +export const DEFAULT_MARGINS = { left: 0, top: 0 }; // Pretend the nodes are bigger than they are so that the edges would not enter // them under a high curvature which would cause arrow heads to be misplaced. const NODE_SIZE_FACTOR = 1.5 * NODE_BASE_SIZE; @@ -180,8 +180,8 @@ function runLayoutEngine(graph, imNodes, imEdges, opts) { const gNodeId = graphNodeId(node.get('id')); if (!graph.hasNode(gNodeId)) { graph.setNode(gNodeId, { - width: nodeWidth, - height: nodeHeight + height: nodeHeight, + width: nodeWidth }); } }); @@ -235,12 +235,12 @@ function runLayoutEngine(graph, imNodes, imEdges, opts) { const { width, height } = graph.graph(); let layout = { - graphWidth: width, + edges, graphHeight: height, - width, + graphWidth: width, height, nodes, - edges + width }; // layout the single nodes @@ -388,7 +388,7 @@ function hasSameEndpoints(cachedEdge, nodes) { * @return {Object} layout clone */ function cloneLayout(layout, nodes, edges) { - const clone = Object.assign({}, layout, {nodes, edges}); + const clone = Object.assign({}, layout, {edges, nodes}); return clone; } @@ -433,9 +433,9 @@ export function doLayout(immNodes, immEdges, opts) { // one engine and node and edge caches per topology, to keep renderings similar if (options.noCache || !topologyCaches[cacheId]) { topologyCaches[cacheId] = { - nodeCache: makeMap(), edgeCache: makeMap(), - graph: new dagre.graphlib.Graph({}) + graph: new dagre.graphlib.Graph({}), + nodeCache: makeMap() }; } diff --git a/client/app/scripts/components/app.js b/client/app/scripts/components/app.js index f1c22c056..f32129a8f 100644 --- a/client/app/scripts/components/app.js +++ b/client/app/scripts/components/app.js @@ -171,8 +171,8 @@ class App extends React.Component { trackEvent(eventName, additionalProps = {}) { trackAnalyticsEvent(eventName, { layout: this.props.topologyViewMode, - topologyId: this.props.currentTopology.get('id'), parentTopologyId: this.props.currentTopology.get('parentId'), + topologyId: this.props.currentTopology.get('id'), ...additionalProps, }); } @@ -249,39 +249,39 @@ class App extends React.Component { function mapStateToProps(state) { return { currentTopology: state.get('currentTopology'), + isGraphViewMode: isGraphViewModeSelector(state), isResourceViewMode: isResourceViewModeSelector(state), isTableViewMode: isTableViewModeSelector(state), - isGraphViewMode: isGraphViewModeSelector(state), pinnedMetricType: state.get('pinnedMetricType'), routeSet: state.get('routeSet'), searchFocused: state.get('searchFocused'), searchQuery: state.get('searchQuery'), showingDetails: state.get('nodeDetails').size > 0, showingHelp: state.get('showingHelp'), - showingTroubleshootingMenu: state.get('showingTroubleshootingMenu'), showingNetworkSelector: availableNetworksSelector(state).count() > 0, showingTerminal: state.get('controlPipes').size > 0, - topologyViewMode: state.get('topologyViewMode'), + showingTroubleshootingMenu: state.get('showingTroubleshootingMenu'), timeTravelSupported: timeTravelSupportedSelector(state), timeTravelTransitioning: state.get('timeTravelTransitioning'), + topologyViewMode: state.get('topologyViewMode'), urlState: getUrlState(state) }; } App.propTypes = { - renderTimeTravel: PropTypes.func, - renderNodeDetailsExtras: PropTypes.func, - onRouteChange: PropTypes.func, - monitor: PropTypes.bool, disableStoreViewState: PropTypes.bool, + monitor: PropTypes.bool, + onRouteChange: PropTypes.func, + renderNodeDetailsExtras: PropTypes.func, + renderTimeTravel: PropTypes.func, }; App.defaultProps = { - renderTimeTravel: () => , - renderNodeDetailsExtras: () => null, - onRouteChange: () => null, - monitor: false, disableStoreViewState: false, + monitor: false, + onRouteChange: () => null, + renderNodeDetailsExtras: () => null, + renderTimeTravel: () => , }; export default connect(mapStateToProps)(App); diff --git a/client/app/scripts/components/cloud-feature.js b/client/app/scripts/components/cloud-feature.js index 61f4ada49..0708a37ef 100644 --- a/client/app/scripts/components/cloud-feature.js +++ b/client/app/scripts/components/cloud-feature.js @@ -27,14 +27,14 @@ class CloudFeature extends React.Component { } CloudFeature.contextTypes = { - store: PropTypes.object.isRequired, router: PropTypes.object, - serviceStore: PropTypes.object + serviceStore: PropTypes.object, + store: PropTypes.object.isRequired }; CloudFeature.childContextTypes = { - store: PropTypes.object, - router: PropTypes.object + router: PropTypes.object, + store: PropTypes.object }; export default connect()(CloudFeature); diff --git a/client/app/scripts/components/debug-toolbar.js b/client/app/scripts/components/debug-toolbar.js index b8ad2fddb..fa71ffb80 100644 --- a/client/app/scripts/components/debug-toolbar.js +++ b/client/app/scripts/components/debug-toolbar.js @@ -17,7 +17,7 @@ const STACK_VARIANTS = [false, true]; const METRIC_FILLS = [0, 0.1, 50, 99.9, 100]; const NETWORKS = [ 'be', 'fe', 'zb', 'db', 're', 'gh', 'jk', 'lol', 'nw' -].map(n => ({id: n, label: n, colorKey: n})); +].map(n => ({colorKey: n, id: n, label: n})); const INTERNET = 'the-internet'; const LOREM = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor @@ -30,10 +30,10 @@ const sampleArray = (collection, n = 4) => sampleSize(collection, random(n)); const log = debug('scope:debug-panel'); const shapeTypes = { - square: ['Process', 'Processes'], - hexagon: ['Container', 'Containers'], + circle: ['Host', 'Hosts'], heptagon: ['Pod', 'Pods'], - circle: ['Host', 'Hosts'] + hexagon: ['Container', 'Containers'], + square: ['Process', 'Processes'] }; @@ -44,15 +44,15 @@ const LABEL_PREFIXES = range('A'.charCodeAt(), 'Z'.charCodeAt() + 1) const deltaAdd = (name, adjacency = [], shape = 'circle', stack = false, networks = NETWORKS) => ({ adjacency, controls: {}, - shape, - stack, id: name, label: name, labelMinor: name, latest: {}, + networks, origins: [], rank: name, - networks + shape, + stack }); @@ -127,8 +127,8 @@ function disableLog() { function setAppState(fn) { return (dispatch) => { dispatch({ - type: ActionTypes.DEBUG_TOOLBAR_INTERFERING, - fn + fn, + type: ActionTypes.DEBUG_TOOLBAR_INTERFERING }); }; } @@ -220,11 +220,11 @@ class DebugToolbar extends React.Component { const nodeNames = ns.keySeq().toJS(); this.asyncDispatch(receiveNodesDelta({ add: this.createRandomNodes(7), - update: sampleArray(nodeNames).map(n => ({ - id: n, - adjacency: sampleArray(nodeNames), - }), nodeNames.length), remove: this.randomExistingNode(), + update: sampleArray(nodeNames).map(n => ({ + adjacency: sampleArray(nodeNames), + id: n, + }), nodeNames.length), })); } @@ -249,7 +249,7 @@ class DebugToolbar extends React.Component { setTimeout(() => { this.asyncDispatch(receiveNodesDelta({ add: [{ - id: INTERNET, label: INTERNET, pseudo: true, labelMinor: 'Outgoing packets', shape: 'cloud' + id: INTERNET, label: INTERNET, labelMinor: 'Outgoing packets', pseudo: true, shape: 'cloud' }] })); }, 0); @@ -357,8 +357,8 @@ class DebugToolbar extends React.Component { function mapStateToProps(state) { return { - nodes: state.get('nodes'), availableMetrics: availableMetricsSelector(state), + nodes: state.get('nodes'), }; } diff --git a/client/app/scripts/components/details-card.js b/client/app/scripts/components/details-card.js index 31974fa98..7e2d7f27f 100644 --- a/client/app/scripts/components/details-card.js +++ b/client/app/scripts/components/details-card.js @@ -49,8 +49,8 @@ class DetailsCard extends React.Component { } } const style = { - transform, left: showingTerminal ? MARGINS.right : null, + transform, width: showingTerminal ? null : WIDTH }; return ( diff --git a/client/app/scripts/components/embedded-terminal.js b/client/app/scripts/components/embedded-terminal.js index 45477725c..734a3c2bc 100644 --- a/client/app/scripts/components/embedded-terminal.js +++ b/client/app/scripts/components/embedded-terminal.js @@ -9,8 +9,8 @@ class EmeddedTerminal extends React.Component { constructor(props, context) { super(props, context); this.state = { - mounted: null, animated: null, + mounted: null, }; this.handleTransitionEnd = this.handleTransitionEnd.bind(this); diff --git a/client/app/scripts/components/footer.js b/client/app/scripts/components/footer.js index be88826f5..f3f3f028a 100644 --- a/client/app/scripts/components/footer.js +++ b/client/app/scripts/components/footer.js @@ -99,11 +99,11 @@ class Footer extends React.Component { function mapStateToProps(state) { return { + contrastMode: state.get('contrastMode'), hostname: state.get('hostname'), topologyViewMode: state.get('topologyViewMode'), version: state.get('version'), versionUpdate: state.get('versionUpdate'), - contrastMode: state.get('contrastMode'), }; } @@ -112,8 +112,8 @@ export default connect( { clickDownloadGraph, clickForceRelayout, + setContrastMode, toggleHelp, - toggleTroubleshootingMenu, - setContrastMode + toggleTroubleshootingMenu } )(Footer); diff --git a/client/app/scripts/components/help-panel.js b/client/app/scripts/components/help-panel.js index 5eed4aa88..445b8a4a4 100644 --- a/client/app/scripts/components/help-panel.js +++ b/client/app/scripts/components/help-panel.js @@ -51,31 +51,31 @@ function renderShortcutPanel() { const BASIC_SEARCHES = [ - {term: 'foo', label: 'All fields for foo'}, + {label: 'All fields for foo', term: 'foo'}, { - term: 'pid: 12345', - label: Any field matching pid for the value 12345 + label: Any field matching pid for the value 12345, + term: 'pid: 12345' }, ]; const REGEX_SEARCHES = [ { - term: 'foo|bar', - label: 'All fields for foo or bar' + label: 'All fields for foo or bar', + term: 'foo|bar' }, { - term: 'command: foo(bar|baz)', - label: command field for foobar or foobaz + label: command field for foobar or foobaz, + term: 'command: foo(bar|baz)' }, ]; const METRIC_SEARCHES = [ - {term: 'cpu > 4%', label: CPU greater than 4%}, + {label: CPU greater than 4%, term: 'cpu > 4%'}, { - term: 'memory < 10mb', - label: Memory less than 10 megabytes + label: Memory less than 10 megabytes, + term: 'memory < 10mb' }, ]; @@ -187,8 +187,8 @@ function HelpPanel({ function mapStateToProps(state) { return { canvasMargins: canvasMarginsSelector(state), - searchableFields: searchableFieldsSelector(state), - currentTopologyName: state.getIn(['currentTopology', 'fullName']) + currentTopologyName: state.getIn(['currentTopology', 'fullName']), + searchableFields: searchableFieldsSelector(state) }; } diff --git a/client/app/scripts/components/metric-selector-item.js b/client/app/scripts/components/metric-selector-item.js index 8cc6a81d8..d19861586 100644 --- a/client/app/scripts/components/metric-selector-item.js +++ b/client/app/scripts/components/metric-selector-item.js @@ -17,10 +17,10 @@ class MetricSelectorItem extends React.Component { trackEvent(eventName) { trackAnalyticsEvent(eventName, { - metricType: this.props.metric.get('label'), layout: this.props.topologyViewMode, - topologyId: this.props.currentTopology.get('id'), + metricType: this.props.metric.get('label'), parentTopologyId: this.props.currentTopology.get('parentId'), + topologyId: this.props.currentTopology.get('id'), }); } @@ -66,10 +66,10 @@ class MetricSelectorItem extends React.Component { function mapStateToProps(state) { return { - topologyViewMode: state.get('topologyViewMode'), currentTopology: state.get('currentTopology'), pinnedMetricType: state.get('pinnedMetricType'), selectedMetricType: selectedMetricTypeSelector(state), + topologyViewMode: state.get('topologyViewMode'), }; } diff --git a/client/app/scripts/components/network-selector-item.js b/client/app/scripts/components/network-selector-item.js index 0413fba8f..056bc3d59 100644 --- a/client/app/scripts/components/network-selector-item.js +++ b/client/app/scripts/components/network-selector-item.js @@ -57,12 +57,12 @@ class NetworkSelectorItem extends React.Component { function mapStateToProps(state) { return { - selectedNetwork: state.get('selectedNetwork'), - pinnedNetwork: state.get('pinnedNetwork') + pinnedNetwork: state.get('pinnedNetwork'), + selectedNetwork: state.get('selectedNetwork') }; } export default connect( mapStateToProps, - { selectNetwork, pinNetwork, unpinNetwork } + { pinNetwork, selectNetwork, unpinNetwork } )(NetworkSelectorItem); diff --git a/client/app/scripts/components/networks-selector.js b/client/app/scripts/components/networks-selector.js index d8d45617a..f8b4c61e6 100644 --- a/client/app/scripts/components/networks-selector.js +++ b/client/app/scripts/components/networks-selector.js @@ -52,8 +52,8 @@ class NetworkSelector extends React.Component { function mapStateToProps(state) { return { availableNetworks: availableNetworksSelector(state), - showingNetworks: state.get('showingNetworks'), - pinnedNetwork: state.get('pinnedNetwork') + pinnedNetwork: state.get('pinnedNetwork'), + showingNetworks: state.get('showingNetworks') }; } diff --git a/client/app/scripts/components/node-details.js b/client/app/scripts/components/node-details.js index b6892de93..50dc20d1a 100644 --- a/client/app/scripts/components/node-details.js +++ b/client/app/scripts/components/node-details.js @@ -247,7 +247,7 @@ class NodeDetails extends React.Component { return null; })} - {this.props.renderNodeDetailsExtras({ topologyId, details })} + {this.props.renderNodeDetailsExtras({ details, topologyId })}
@@ -300,10 +300,10 @@ NodeDetails.defaultProps = { function mapStateToProps(state, ownProps) { const currentTopologyId = state.get('currentTopologyId'); return { - transitioning: state.get('pausedAt') !== ownProps.timestamp, nodeMatches: state.getIn(['searchNodeMatches', currentTopologyId, ownProps.id]), nodes: state.get('nodes'), selectedNodeId: state.get('selectedNodeId'), + transitioning: state.get('pausedAt') !== ownProps.timestamp, }; } diff --git a/client/app/scripts/components/node-details/__tests__/node-details-table-test.js b/client/app/scripts/components/node-details/__tests__/node-details-table-test.js index b117dee24..760dbf7bb 100644 --- a/client/app/scripts/components/node-details/__tests__/node-details-table-test.js +++ b/client/app/scripts/components/node-details/__tests__/node-details-table-test.js @@ -13,9 +13,9 @@ describe('NodeDetailsTable', () => { beforeEach(() => { columns = [ - { id: 'kubernetes_ip', label: 'IP', dataType: 'ip' }, + { dataType: 'ip', id: 'kubernetes_ip', label: 'IP' }, { id: 'kubernetes_namespace', label: 'Namespace' }, - { id: 'uptime', label: 'Uptime', dataType: 'duration' }, + { dataType: 'duration', id: 'uptime', label: 'Uptime' }, ]; nodes = [ { @@ -24,7 +24,7 @@ describe('NodeDetailsTable', () => { { id: 'kubernetes_ip', label: 'IP', value: '10.244.253.24' }, { id: 'kubernetes_namespace', label: 'Namespace', value: '1111' }, { - id: 'uptime', dataType: 'duration', label: 'Uptime', value: '1' + dataType: 'duration', id: 'uptime', label: 'Uptime', value: '1' }, ] }, { @@ -33,7 +33,7 @@ describe('NodeDetailsTable', () => { { id: 'kubernetes_ip', label: 'IP', value: '10.244.253.4' }, { id: 'kubernetes_namespace', label: 'Namespace', value: '12' }, { - id: 'uptime', dataType: 'duration', label: 'Uptime', value: '4' + dataType: 'duration', id: 'uptime', label: 'Uptime', value: '4' }, ] }, { @@ -42,7 +42,7 @@ describe('NodeDetailsTable', () => { { id: 'kubernetes_ip', label: 'IP', value: '10.44.253.255' }, { id: 'kubernetes_namespace', label: 'Namespace', value: '5' }, { - id: 'uptime', dataType: 'duration', label: 'Uptime', value: '30' + dataType: 'duration', id: 'uptime', label: 'Uptime', value: '30' }, ] }, { @@ -51,7 +51,7 @@ describe('NodeDetailsTable', () => { { id: 'kubernetes_ip', label: 'IP', value: '10.244.253.100' }, { id: 'kubernetes_namespace', label: 'Namespace', value: '00000' }, { - id: 'uptime', dataType: 'duration', label: 'Uptime', value: '22222' + dataType: 'duration', id: 'uptime', label: 'Uptime', value: '22222' }, ] }, diff --git a/client/app/scripts/components/node-details/node-details-control-button.js b/client/app/scripts/components/node-details/node-details-control-button.js index 32e0cb7ad..f40d3d879 100644 --- a/client/app/scripts/components/node-details/node-details-control-button.js +++ b/client/app/scripts/components/node-details/node-details-control-button.js @@ -14,9 +14,9 @@ class NodeDetailsControlButton extends React.Component { render() { const { icon, human } = this.props.control; const className = classNames('tour-step-anchor node-control-button', icon, { - 'node-control-button-pending': this.props.pending, // Old Agent / plugins don't include the 'fa ' prefix, so provide it if they don't. - fa: icon.startsWith('fa-') + fa: icon.startsWith('fa-'), + 'node-control-button-pending': this.props.pending }); return ( diff --git a/client/app/scripts/components/node-details/node-details-health-link-item.js b/client/app/scripts/components/node-details/node-details-health-link-item.js index 696d26bc5..54ae18b24 100644 --- a/client/app/scripts/components/node-details/node-details-health-link-item.js +++ b/client/app/scripts/components/node-details/node-details-health-link-item.js @@ -94,8 +94,8 @@ class NodeDetailsHealthLinkItem extends React.Component { function mapStateToProps(state) { return { - pausedAt: state.get('pausedAt'), monitor: state.get('monitor'), + pausedAt: state.get('pausedAt'), }; } 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 217a14440..15553d4a9 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 @@ -25,9 +25,9 @@ function getValuesForNode(node) { const relativesByTopologyId = mapValues(byTopologyId, (relatives, topologyId) => ({ id: topologyId, label: topologyId, + relatives, value: relatives.map(relative => relative.label).join(', '), valueType: 'relatives', - relatives, })); values = { @@ -170,8 +170,8 @@ export default class NodeDetailsTableRow extends React.Component { const nodeId = node[nodeIdKey]; const className = classNames('tour-step-anchor node-details-table-node', { - selected: this.props.selected, focused: this.state.focused, + selected: this.props.selected, }); return ( @@ -182,7 +182,7 @@ export default class NodeDetailsTableRow extends React.Component { onMouseLeave={this.onMouseLeave} className={className}> - {this.props.renderIdCell(Object.assign(node, {topologyId, nodeId}))} + {this.props.renderIdCell(Object.assign(node, {nodeId, topologyId}))} {values} 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 bb5ca3307..d235541d4 100644 --- a/client/app/scripts/components/node-details/node-details-table.js +++ b/client/app/scripts/components/node-details/node-details-table.js @@ -135,8 +135,8 @@ class NodeDetailsTable extends React.Component { this.state = { limit: props.limit, - sortedDesc: this.props.sortedDesc, - sortedBy: this.props.sortedBy + sortedBy: this.props.sortedBy, + sortedDesc: this.props.sortedDesc }; this.focusState = {}; @@ -305,11 +305,12 @@ class NodeDetailsTable extends React.Component { NodeDetailsTable.defaultProps = { - nodeIdKey: 'id', // key to identify a node in a row (used for topology links) limit: NODE_DETAILS_DATA_ROWS_DEFAULT_LIMIT, + // key to identify a node in a row (used for topology links) + nodeIdKey: 'id', onSortChange: () => {}, - sortedDesc: null, sortedBy: null, + sortedDesc: null, }; function mapStateToProps(state) { diff --git a/client/app/scripts/components/nodes-resources.js b/client/app/scripts/components/nodes-resources.js index af889a3b9..3aec7040e 100644 --- a/client/app/scripts/components/nodes-resources.js +++ b/client/app/scripts/components/nodes-resources.js @@ -55,8 +55,8 @@ class NodesResources extends React.Component { function mapStateToProps(state) { return { - selectedNodeId: state.get('selectedNodeId'), layersTopologyIds: layersTopologyIdsSelector(state), + selectedNodeId: state.get('selectedNodeId'), }; } diff --git a/client/app/scripts/components/nodes-resources/node-resources-layer-topology.js b/client/app/scripts/components/nodes-resources/node-resources-layer-topology.js index 852070385..a3c91a323 100644 --- a/client/app/scripts/components/nodes-resources/node-resources-layer-topology.js +++ b/client/app/scripts/components/nodes-resources/node-resources-layer-topology.js @@ -15,8 +15,8 @@ export default class NodeResourcesLayerTopology extends React.Component { // vertical position and height of the resource boxes. const verticalTransform = pick(this.props.transform, ['translateY', 'scaleY']); const { width, height, y } = applyTransform(verticalTransform, { - width: RESOURCES_LAYER_TITLE_WIDTH, height: RESOURCES_LAYER_HEIGHT, + width: RESOURCES_LAYER_TITLE_WIDTH, y: this.props.verticalPosition, }); diff --git a/client/app/scripts/components/nodes-resources/node-resources-metric-box.js b/client/app/scripts/components/nodes-resources/node-resources-metric-box.js index 67304bfaa..161257e1b 100644 --- a/client/app/scripts/components/nodes-resources/node-resources-metric-box.js +++ b/client/app/scripts/components/nodes-resources/node-resources-metric-box.js @@ -42,8 +42,8 @@ const transformedDimensions = (props) => { // Update the horizontal transform with trimmed values. return { - width: xEnd - xStart, height, + width: xEnd - xStart, x: xStart, y, }; @@ -87,10 +87,10 @@ class NodeResourcesMetricBox extends React.Component { } = this.state; const translateY = height * (1 - relativeHeight); return { - transform: `translate(0, ${translateY})`, + height: height * relativeHeight, opacity: this.props.contrastMode ? 1 : 0.85, stroke: this.props.contrastMode ? 'black' : 'white', - height: height * relativeHeight, + transform: `translate(0, ${translateY})`, width, x, y, diff --git a/client/app/scripts/components/nodes.js b/client/app/scripts/components/nodes.js index fde0e04f1..e7ec56c52 100644 --- a/client/app/scripts/components/nodes.js +++ b/client/app/scripts/components/nodes.js @@ -80,15 +80,15 @@ class Nodes extends React.Component { function mapStateToProps(state) { return { + currentTopology: state.get('currentTopology'), isGraphViewMode: isGraphViewModeSelector(state), - isTableViewMode: isTableViewModeSelector(state), isResourceViewMode: isResourceViewModeSelector(state), - topologyNodeCountZero: isTopologyNodeCountZero(state), + isTableViewMode: isTableViewModeSelector(state), nodesDisplayEmpty: isNodesDisplayEmpty(state), nodesLoaded: nodesLoadedSelector(state), - currentTopology: state.get('currentTopology'), topologies: state.get('topologies'), topologiesLoaded: state.get('topologiesLoaded'), + topologyNodeCountZero: isTopologyNodeCountZero(state), }; } diff --git a/client/app/scripts/components/search.js b/client/app/scripts/components/search.js index 90d0dc0d3..193da8801 100644 --- a/client/app/scripts/components/search.js +++ b/client/app/scripts/components/search.js @@ -82,8 +82,8 @@ class SearchComponent extends React.Component { handleChange = (searchQuery, pinnedSearches) => { trackAnalyticsEvent('scope.search.query.change', { layout: this.props.topologyViewMode, - topologyId: this.props.currentTopology.get('id'), parentTopologyId: this.props.currentTopology.get('parentId'), + topologyId: this.props.currentTopology.get('id'), }); this.props.updateSearch(searchQuery, pinnedSearches); } @@ -121,19 +121,19 @@ class SearchComponent extends React.Component { export default connect( state => ({ - searchHint: getHint(state.get('nodes')), - searchFocused: state.get('searchFocused'), - topologyViewMode: state.get('topologyViewMode'), + currentTopology: state.get('currentTopology'), isResourceViewMode: isResourceViewModeSelector(state), isTopologyEmpty: isTopologyNodeCountZero(state), - currentTopology: state.get('currentTopology'), - topologiesLoaded: state.get('topologiesLoaded'), pinnedSearches: state.get('pinnedSearches').toJS(), - searchQuery: state.get('searchQuery'), + searchFocused: state.get('searchFocused'), + searchHint: getHint(state.get('nodes')), searchMatchesCount: searchMatchCountByTopologySelector(state) .reduce((count, topologyMatchCount) => count + topologyMatchCount, 0), + searchQuery: state.get('searchQuery'), + topologiesLoaded: state.get('topologiesLoaded'), + topologyViewMode: state.get('topologyViewMode'), }), { - blurSearch, focusSearch, updateSearch, toggleHelp + blurSearch, focusSearch, toggleHelp, updateSearch } )(SearchComponent); diff --git a/client/app/scripts/components/sparkline.js b/client/app/scripts/components/sparkline.js index 2fc767a53..9ac381a61 100644 --- a/client/app/scripts/components/sparkline.js +++ b/client/app/scripts/components/sparkline.js @@ -76,7 +76,7 @@ export default class Sparkline extends React.Component { `${data.length} samples, min: ${min}, max: ${max}, mean: ${mean}`; return { - title, lastX, lastY, data + data, lastX, lastY, title }; } @@ -88,13 +88,13 @@ export default class Sparkline extends React.Component { this.y.domain([0, 1]); return { - title: '', - lastX: this.x(last), - lastY: this.y(0), data: [ {date: first, value: 0}, {date: last, value: 0}, ], + lastX: this.x(last), + lastY: this.y(0), + title: '', }; } @@ -138,23 +138,23 @@ export default class Sparkline extends React.Component { } Sparkline.propTypes = { - width: PropTypes.number, + circleRadius: PropTypes.number, + data: PropTypes.arrayOf(PropTypes.object), height: PropTypes.number, + hoverColor: PropTypes.string, + hovered: PropTypes.bool, strokeColor: PropTypes.string, strokeWidth: PropTypes.number, - hoverColor: PropTypes.string, - circleRadius: PropTypes.number, - hovered: PropTypes.bool, - data: PropTypes.arrayOf(PropTypes.object), + width: PropTypes.number, }; Sparkline.defaultProps = { - width: 80, + circleRadius: 1.75, + data: [], height: 24, + hoverColor: '#7d7da8', + hovered: false, strokeColor: '#7d7da8', strokeWidth: 0.5, - hoverColor: '#7d7da8', - circleRadius: 1.75, - hovered: false, - data: [], + width: 80, }; diff --git a/client/app/scripts/components/terminal-app.js b/client/app/scripts/components/terminal-app.js index 4875eb561..98484f6ef 100644 --- a/client/app/scripts/components/terminal-app.js +++ b/client/app/scripts/components/terminal-app.js @@ -18,9 +18,9 @@ class TerminalApp extends React.Component { ); this.state = { + statusBarColor: params.statusBarColor, title: params.title, - titleBarColor: params.titleBarColor, - statusBarColor: params.statusBarColor + titleBarColor: params.titleBarColor }; this.onKeyUp = this.onKeyUp.bind(this); @@ -70,5 +70,5 @@ function mapStateToProps(state) { export default connect( mapStateToProps, - { receiveControlPipeFromParams, hitEsc } + { hitEsc, receiveControlPipeFromParams } )(TerminalApp); diff --git a/client/app/scripts/components/terminal.js b/client/app/scripts/components/terminal.js index 8ac1f8c3c..5e8d874d9 100644 --- a/client/app/scripts/components/terminal.js +++ b/client/app/scripts/components/terminal.js @@ -37,11 +37,11 @@ function openNewWindow(url, bcr, minWidth = 200) { const popoutWindowToolbarHeight = 51; // TODO replace this stuff w/ looking up bounding box. const windowOptions = { - width: Math.max(minWidth, bcr.width), height: bcr.height - popoutWindowToolbarHeight, left: screenLeft + bcr.left, - top: screenTop + (window.outerHeight - window.innerHeight) + bcr.top, location: 'no', + top: screenTop + (window.outerHeight - window.innerHeight) + bcr.top, + width: Math.max(minWidth, bcr.width), }; const windowOptionsString = Object.keys(windowOptions) @@ -60,10 +60,10 @@ class Terminal extends React.Component { this.resizeTimeout = null; this.state = { + cols: DEFAULT_COLS, connected: false, detached: false, rows: DEFAULT_ROWS, - cols: DEFAULT_COLS, }; this.handleCloseClick = this.handleCloseClick.bind(this); @@ -146,6 +146,8 @@ class Terminal extends React.Component { mountTerminal() { Term.applyAddon(fit); this.term = new Term({ + convertEol: !this.props.pipe.get('raw'), + cursorBlink: true, // // Some linux systems fail to render 'monospace' on `` correctly: // https://github.com/xtermjs/xterm.js/issues/1170 @@ -155,8 +157,6 @@ class Terminal extends React.Component { fontFamily: '"Roboto Mono", "Courier New", "Courier", monospace', // `theme.fontSizes.tiny` (`"12px"`) is a string and we need an int here. fontSize: 12, - convertEol: !this.props.pipe.get('raw'), - cursorBlink: true, scrollback: 10000, }); diff --git a/client/app/scripts/components/time-control.js b/client/app/scripts/components/time-control.js index f6799e6b2..59593447e 100644 --- a/client/app/scripts/components/time-control.js +++ b/client/app/scripts/components/time-control.js @@ -17,9 +17,9 @@ class TimeControl extends React.Component { const { currentTopology } = this.props; return { layout: this.props.topologyViewMode, - topologyId: currentTopology && currentTopology.get('id'), parentTopologyId: currentTopology && currentTopology.get('parentId'), - ...data + topologyId: currentTopology && currentTopology.get('id'), + ...data, }; } @@ -76,19 +76,19 @@ class TimeControl extends React.Component { function mapStateToProps(state) { return { - isPaused: isPausedSelector(state), - timeTravelSupported: timeTravelSupportedSelector(state), - topologyViewMode: state.get('topologyViewMode'), - topologiesLoaded: state.get('topologiesLoaded'), currentTopology: state.get('currentTopology'), + isPaused: isPausedSelector(state), pausedAt: state.get('pausedAt'), + timeTravelSupported: timeTravelSupportedSelector(state), + topologiesLoaded: state.get('topologiesLoaded'), + topologyViewMode: state.get('topologyViewMode'), }; } export default connect( mapStateToProps, { - resumeTime, pauseTimeAtNow, + resumeTime, } )(TimeControl); diff --git a/client/app/scripts/components/time-travel-wrapper.js b/client/app/scripts/components/time-travel-wrapper.js index bacc058e5..ee749ece4 100644 --- a/client/app/scripts/components/time-travel-wrapper.js +++ b/client/app/scripts/components/time-travel-wrapper.js @@ -36,6 +36,6 @@ function mapStateToProps(state) { export default connect( mapStateToProps, { - jumpToTime, resumeTime, pauseTimeAtNow + jumpToTime, pauseTimeAtNow, resumeTime }, )(TimeTravelWrapper); diff --git a/client/app/scripts/components/topologies.js b/client/app/scripts/components/topologies.js index 4bc65ef89..aa74286c3 100644 --- a/client/app/scripts/components/topologies.js +++ b/client/app/scripts/components/topologies.js @@ -23,8 +23,8 @@ class Topologies extends React.Component { onTopologyClick = (ev, topology) => { ev.preventDefault(); trackAnalyticsEvent('scope.topology.selector.click', { - topologyId: topology.get('id'), parentTopologyId: topology.get('parentId'), + topologyId: topology.get('id'), }); this.props.clickTopology(ev.currentTarget.getAttribute('rel')); } @@ -35,9 +35,9 @@ class Topologies extends React.Component { const searchMatchCount = this.props.searchMatchCountByTopology.get(topologyId) || 0; const title = basicTopologyInfo(subTopology, searchMatchCount); const className = classnames(`topologies-sub-item topologies-item-${topologyId}`, { + 'topologies-sub-item-active': isActive, // Don't show matches in the resource view as searching is not supported there yet. 'topologies-sub-item-matched': !this.props.isResourceViewMode && searchMatchCount, - 'topologies-sub-item-active': isActive, }); return ( @@ -59,9 +59,9 @@ class Topologies extends React.Component { const isActive = topology === this.props.currentTopology; const searchMatchCount = this.props.searchMatchCountByTopology.get(topology.get('id')) || 0; const className = classnames(`tour-step-anchor topologies-item-main topologies-item-${topologyId}`, { + 'topologies-item-main-active': isActive, // Don't show matches in the resource view as searching is not supported there yet. 'topologies-item-main-matched': !this.props.isResourceViewMode && searchMatchCount, - 'topologies-item-main-active': isActive, }); const title = basicTopologyInfo(topology, searchMatchCount); @@ -95,10 +95,10 @@ class Topologies extends React.Component { function mapStateToProps(state) { return { - topologies: state.get('topologies'), currentTopology: state.get('currentTopology'), - searchMatchCountByTopology: searchMatchCountByTopologySelector(state), isResourceViewMode: isResourceViewModeSelector(state), + searchMatchCountByTopology: searchMatchCountByTopologySelector(state), + topologies: state.get('topologies'), }; } diff --git a/client/app/scripts/components/topology-options.js b/client/app/scripts/components/topology-options.js index 046eff2d6..c15509eaf 100644 --- a/client/app/scripts/components/topology-options.js +++ b/client/app/scripts/components/topology-options.js @@ -20,11 +20,11 @@ class TopologyOptions extends React.Component { trackOptionClick(optionId, nextOptions) { trackAnalyticsEvent('scope.topology.option.click', { - optionId, - value: nextOptions, layout: this.props.topologyViewMode, - topologyId: this.props.currentTopology.get('id'), + optionId, parentTopologyId: this.props.currentTopology.get('parentId'), + topologyId: this.props.currentTopology.get('id'), + value: nextOptions, }); } @@ -95,8 +95,8 @@ class TopologyOptions extends React.Component { } const noneItem = makeMap({ - value: '', - label: option.get('noneLabel') + label: option.get('noneLabel'), + value: '' }); return (
@@ -137,11 +137,11 @@ class TopologyOptions extends React.Component { function mapStateToProps(state) { return { - options: getCurrentTopologyOptions(state), - topologyViewMode: state.get('topologyViewMode'), + activeOptions: activeTopologyOptionsSelector(state), currentTopology: state.get('currentTopology'), currentTopologyId: state.get('currentTopologyId'), - activeOptions: activeTopologyOptionsSelector(state) + options: getCurrentTopologyOptions(state), + topologyViewMode: state.get('topologyViewMode') }; } diff --git a/client/app/scripts/components/troubleshooting-menu.js b/client/app/scripts/components/troubleshooting-menu.js index 7204fdafa..54c88e8ab 100644 --- a/client/app/scripts/components/troubleshooting-menu.js +++ b/client/app/scripts/components/troubleshooting-menu.js @@ -91,7 +91,7 @@ class DebugMenu extends React.Component { } export default connect(null, { - toggleTroubleshootingMenu, + clickDownloadGraph, resetLocalViewState, - clickDownloadGraph + toggleTroubleshootingMenu })(DebugMenu); diff --git a/client/app/scripts/components/view-mode-button.js b/client/app/scripts/components/view-mode-button.js index 99e703b68..166800801 100644 --- a/client/app/scripts/components/view-mode-button.js +++ b/client/app/scripts/components/view-mode-button.js @@ -15,8 +15,8 @@ class ViewModeButton extends React.Component { handleClick() { trackAnalyticsEvent('scope.layout.selector.click', { layout: this.props.viewMode, - topologyId: this.props.currentTopology.get('id'), parentTopologyId: this.props.currentTopology.get('parentId'), + topologyId: this.props.currentTopology.get('id'), }); this.props.onClick(); } @@ -44,8 +44,8 @@ class ViewModeButton extends React.Component { function mapStateToProps(state) { return { - topologyViewMode: state.get('topologyViewMode'), currentTopology: state.get('currentTopology'), + topologyViewMode: state.get('topologyViewMode'), }; } diff --git a/client/app/scripts/components/view-mode-selector.js b/client/app/scripts/components/view-mode-selector.js index b34ec16b0..370564719 100644 --- a/client/app/scripts/components/view-mode-selector.js +++ b/client/app/scripts/components/view-mode-selector.js @@ -55,15 +55,15 @@ class ViewModeSelector extends React.Component { function mapStateToProps(state) { return { - isResourceViewMode: isResourceViewModeSelector(state), + currentTopology: state.get('currentTopology'), hasResourceView: resourceViewAvailableSelector(state), + isResourceViewMode: isResourceViewModeSelector(state), showingMetricsSelector: availableMetricsSelector(state).count() > 0, topologyViewMode: state.get('topologyViewMode'), - currentTopology: state.get('currentTopology'), }; } export default connect( mapStateToProps, - { setGraphView, setTableView, setResourceView } + { setGraphView, setResourceView, setTableView } )(ViewModeSelector); diff --git a/client/app/scripts/components/zoomable-canvas.js b/client/app/scripts/components/zoomable-canvas.js index 6e12a3ea1..4d34fbdd6 100644 --- a/client/app/scripts/components/zoomable-canvas.js +++ b/client/app/scripts/components/zoomable-canvas.js @@ -28,17 +28,17 @@ class ZoomableCanvas extends React.Component { super(props, context); this.state = { - isPanning: false, - contentMinX: 0, contentMaxX: 0, - contentMinY: 0, contentMaxY: 0, - translateX: 0, - translateY: 0, - minScale: 1, + contentMinX: 0, + contentMinY: 0, + isPanning: false, maxScale: 1, + minScale: 1, scaleX: 1, scaleY: 1, + translateX: 0, + translateY: 0, }; this.debouncedCacheZoom = debounce(this.cacheZoom.bind(this), ZOOM_CACHE_DEBOUNCE_INTERVAL); @@ -264,13 +264,13 @@ class ZoomableCanvas extends React.Component { function mapStateToProps(state, props) { return { - width: canvasWidthSelector(state), - height: canvasHeightSelector(state), canvasMargins: canvasMarginsSelector(state), - layoutZoomState: props.zoomStateSelector(state), - layoutLimits: props.limitsSelector(state), - layoutId: JSON.stringify(activeTopologyZoomCacheKeyPathSelector(state)), forceRelayout: state.get('forceRelayout'), + height: canvasHeightSelector(state), + layoutId: JSON.stringify(activeTopologyZoomCacheKeyPathSelector(state)), + layoutLimits: props.limitsSelector(state), + layoutZoomState: props.zoomStateSelector(state), + width: canvasWidthSelector(state), }; } diff --git a/client/app/scripts/constants/resources.js b/client/app/scripts/constants/resources.js index 848be6ad5..336cca383 100644 --- a/client/app/scripts/constants/resources.js +++ b/client/app/scripts/constants/resources.js @@ -10,8 +10,8 @@ export const TOPOLOGIES_WITH_CAPACITY = ['hosts']; // the same layers for all the topologies, because their number is small, but later on // we might be interested in fully customizing the layers' hierarchy per topology. export const RESOURCE_VIEW_LAYERS = { - hosts: ['hosts', 'containers', 'processes'], containers: ['hosts', 'containers', 'processes'], + hosts: ['hosts', 'containers', 'processes'], processes: ['hosts', 'containers', 'processes'], }; @@ -22,6 +22,6 @@ export const RESOURCE_VIEW_LAYERS = { // the nodes for all the layers have been loaded, so we'd need to change the routing logic // since the requirement is that one these is always pinned in the resource view. export const RESOURCE_VIEW_METRICS = [ - { label: 'CPU', id: 'host_cpu_usage_percent' }, - { label: 'Memory', id: 'host_mem_usage_bytes' }, + { id: 'host_cpu_usage_percent', label: 'CPU' }, + { id: 'host_mem_usage_bytes', label: 'Memory' }, ]; diff --git a/client/app/scripts/constants/styles.js b/client/app/scripts/constants/styles.js index 44ed5c54f..8e8c88ba8 100644 --- a/client/app/scripts/constants/styles.js +++ b/client/app/scripts/constants/styles.js @@ -4,9 +4,9 @@ import { GRAPH_VIEW_MODE, RESOURCE_VIEW_MODE } from './naming'; export const DETAILS_PANEL_WIDTH = 420; export const DETAILS_PANEL_OFFSET = 8; export const DETAILS_PANEL_MARGINS = { - top: 24, bottom: 48, - right: 36 + right: 36, + top: 24 }; // Resource view @@ -52,54 +52,55 @@ export const EDGE_WAYPOINTS_CAP = 10; export const CANVAS_MARGINS = { [GRAPH_VIEW_MODE]: { - top: 220, left: 80, right: 80, bottom: 150 + bottom: 150, left: 80, right: 80, top: 220 }, [RESOURCE_VIEW_MODE]: { - top: 200, left: 210, right: 40, bottom: 150 + bottom: 150, left: 210, right: 40, top: 200 }, }; // Node details table constants export const NODE_DETAILS_TABLE_CW = { - XS: '32px', + L: '85px', + M: '70px', // 6 chars wide with our current font choices, (pids can be 6, ports only 5). S: '56px', - M: '70px', - L: '85px', XL: '120px', + XS: '32px', XXL: '140px', XXXL: '170px', }; export const NODE_DETAILS_TABLE_COLUMN_WIDTHS = { - count: NODE_DETAILS_TABLE_CW.XS, container: NODE_DETAILS_TABLE_CW.XS, + count: NODE_DETAILS_TABLE_CW.XS, docker_container_created: NODE_DETAILS_TABLE_CW.XXXL, docker_container_restart_count: NODE_DETAILS_TABLE_CW.M, docker_container_state_human: NODE_DETAILS_TABLE_CW.XXXL, docker_container_uptime: NODE_DETAILS_TABLE_CW.L, docker_cpu_total_usage: NODE_DETAILS_TABLE_CW.M, docker_memory_usage: NODE_DETAILS_TABLE_CW.M, - open_files_count: NODE_DETAILS_TABLE_CW.M, - pid: NODE_DETAILS_TABLE_CW.S, - port: NODE_DETAILS_TABLE_CW.S, - ppid: NODE_DETAILS_TABLE_CW.M, // Label "Parent PID" needs more space - process_cpu_usage_percent: NODE_DETAILS_TABLE_CW.M, - process_memory_usage_bytes: NODE_DETAILS_TABLE_CW.M, - threads: NODE_DETAILS_TABLE_CW.M, - // e.g. details panel > pods kubernetes_ip: NODE_DETAILS_TABLE_CW.XL, kubernetes_state: NODE_DETAILS_TABLE_CW.M, + open_files_count: NODE_DETAILS_TABLE_CW.M, + pid: NODE_DETAILS_TABLE_CW.S, + port: NODE_DETAILS_TABLE_CW.S, + // Label "Parent PID" needs more space + ppid: NODE_DETAILS_TABLE_CW.M, + process_cpu_usage_percent: NODE_DETAILS_TABLE_CW.M, + + process_memory_usage_bytes: NODE_DETAILS_TABLE_CW.M, + threads: NODE_DETAILS_TABLE_CW.M, // weave connections weave_connection_connection: NODE_DETAILS_TABLE_CW.XXL, - weave_connection_state: NODE_DETAILS_TABLE_CW.L, weave_connection_info: NODE_DETAILS_TABLE_CW.XL, + weave_connection_state: NODE_DETAILS_TABLE_CW.L, }; export const NODE_DETAILS_TABLE_XS_LABEL = { - count: '#', // TODO: consider changing the name of this field on the BE container: '#', + count: '#', }; diff --git a/client/app/scripts/contrast-compiler.js b/client/app/scripts/contrast-compiler.js index 631eb731b..c1b4139fc 100644 --- a/client/app/scripts/contrast-compiler.js +++ b/client/app/scripts/contrast-compiler.js @@ -21,7 +21,7 @@ module.exports = class ContrastStyleCompiler { const contrast = findAsset(css, 'contrast-theme'); const normal = findAsset(css, 'style-app'); // Convert to JSON string so they can be parsed into a window variable - const themes = JSON.stringify({ normal, contrast, publicPath }); + const themes = JSON.stringify({ contrast, normal, publicPath }); // Append a script to the end of to evaluate before the other scripts are loaded. const script = ``; const [head, end] = htmlPluginData.html.split(''); diff --git a/client/app/scripts/decorators/node.js b/client/app/scripts/decorators/node.js index e87b5c167..2126605c0 100644 --- a/client/app/scripts/decorators/node.js +++ b/client/app/scripts/decorators/node.js @@ -19,7 +19,7 @@ export function nodeResourceBoxDecorator(node) { metricSummary.get('absoluteConsumption'); const height = RESOURCES_LAYER_HEIGHT; - return node.merge(makeMap({ width, height })); + return node.merge(makeMap({ height, width })); } // Decorates the node with the summary info of its metric of a fixed type. @@ -41,15 +41,15 @@ export function nodeMetricSummaryDecoratorByType(metricType, showCapacity, scale const format = metric.get('format'); return node.set('metricSummary', makeMap({ - showCapacity, - type: metricType, - humanizedTotalCapacity: formatMetricSvg(totalCapacity, defaultMetric), + absoluteConsumption, + format, humanizedAbsoluteConsumption: formatMetricSvg(absoluteConsumption, defaultMetric), humanizedRelativeConsumption: formatMetricSvg(100 * relativeConsumption, percentMetric), - totalCapacity, - absoluteConsumption, + humanizedTotalCapacity: formatMetricSvg(totalCapacity, defaultMetric), relativeConsumption, - format, + showCapacity, + totalCapacity, + type: metricType, })); }; } diff --git a/client/app/scripts/hoc/metric-feeder.js b/client/app/scripts/hoc/metric-feeder.js index f845d1f24..e77929439 100644 --- a/client/app/scripts/hoc/metric-feeder.js +++ b/client/app/scripts/hoc/metric-feeder.js @@ -22,7 +22,7 @@ const WINDOW_LENGTH = 60; * Samples have to be of type `[{date: String, value: Number}, ...]`. * This component also keeps a historic max of all samples it sees over time. */ -export default ComposedComponent => class extends React.Component { +export default ComposedComponent => (class extends React.Component { constructor(props, context) { super(props, context); @@ -140,7 +140,7 @@ export default ComposedComponent => class extends React.Component { const dateFilter = d => d.date > movingFirstDate && d.date <= movingLastDate; const samples = buffer - .map((v, k) => ({value: v, date: +parseDate(k)})) + .map((v, k) => ({date: +parseDate(k), value: v})) .toIndexedSeq() .toJS() .filter(dateFilter); @@ -149,11 +149,11 @@ export default ComposedComponent => class extends React.Component { const slidingWindow = { first: movingFirstDate, last: movingLastDate, - value: lastValue, + max, samples, - max + value: lastValue }; return ; } -}; +}); diff --git a/client/app/scripts/reducers/__tests__/root-test.js b/client/app/scripts/reducers/__tests__/root-test.js index 39d820232..3bf0b151b 100644 --- a/client/app/scripts/reducers/__tests__/root-test.js +++ b/client/app/scripts/reducers/__tests__/root-test.js @@ -21,44 +21,44 @@ describe('RootReducer', () => { const NODE_SET = { n1: { - id: 'n1', adjacency: ['n1', 'n2'], filtered: false, + id: 'n1', }, n2: { - id: 'n2', filtered: false, + id: 'n2', } }; const topologies = [ { - hide_if_empty: true, - name: 'Processes', - rank: 1, - sub_topologies: [], - url: '/api/topology/processes', fullName: 'Processes', + hide_if_empty: true, id: 'processes', + name: 'Processes', options: [ { defaultValue: 'hide', id: 'unconnected', - selectType: 'one', options: [ { label: 'Unconnected nodes hidden', value: 'hide' } - ] + ], + selectType: 'one' } ], + rank: 1, stats: { edge_count: 379, filtered_nodes: 214, node_count: 320, nonpseudo_node_count: 320 - } + }, + sub_topologies: [], + url: '/api/topology/processes' }, { hide_if_empty: true, @@ -67,7 +67,6 @@ describe('RootReducer', () => { { defaultValue: 'default', id: 'namespace', - selectType: 'many', options: [ { label: 'monitoring', @@ -81,7 +80,8 @@ describe('RootReducer', () => { label: 'All Namespaces', value: 'all' } - ] + ], + selectType: 'many' }, { defaultValue: 'hide', @@ -113,7 +113,6 @@ describe('RootReducer', () => { { defaultValue: 'default', id: 'namespace', - selectType: 'many', options: [ { label: 'monitoring', @@ -127,7 +126,8 @@ describe('RootReducer', () => { label: 'All Namespaces', value: 'all' } - ] + ], + selectType: 'many' } ], rank: 0, @@ -147,53 +147,53 @@ describe('RootReducer', () => { // actions const ChangeTopologyOptionAction = { - type: ActionTypes.CHANGE_TOPOLOGY_OPTION, - topologyId: 'topo1', option: 'option1', + topologyId: 'topo1', + type: ActionTypes.CHANGE_TOPOLOGY_OPTION, value: ['on'] }; const ChangeTopologyOptionAction2 = { - type: ActionTypes.CHANGE_TOPOLOGY_OPTION, - topologyId: 'topo1', option: 'option1', + topologyId: 'topo1', + type: ActionTypes.CHANGE_TOPOLOGY_OPTION, value: ['off'] }; const ClickNodeAction = { - type: ActionTypes.CLICK_NODE, - nodeId: 'n1' + nodeId: 'n1', + type: ActionTypes.CLICK_NODE }; const ClickNode2Action = { - type: ActionTypes.CLICK_NODE, - nodeId: 'n2' + nodeId: 'n2', + type: ActionTypes.CLICK_NODE }; const ClickRelativeAction = { - type: ActionTypes.CLICK_RELATIVE, - nodeId: 'rel1' + nodeId: 'rel1', + type: ActionTypes.CLICK_RELATIVE }; const ClickShowTopologyForNodeAction = { - type: ActionTypes.CLICK_SHOW_TOPOLOGY_FOR_NODE, + nodeId: 'rel1', topologyId: 'topo2', - nodeId: 'rel1' + type: ActionTypes.CLICK_SHOW_TOPOLOGY_FOR_NODE }; const ClickSubTopologyAction = { - type: ActionTypes.CLICK_TOPOLOGY, - topologyId: 'topo1-grouped' + topologyId: 'topo1-grouped', + type: ActionTypes.CLICK_TOPOLOGY }; const ClickTopologyAction = { - type: ActionTypes.CLICK_TOPOLOGY, - topologyId: 'topo1' + topologyId: 'topo1', + type: ActionTypes.CLICK_TOPOLOGY }; const ClickTopology2Action = { - type: ActionTypes.CLICK_TOPOLOGY, - topologyId: 'topo2' + topologyId: 'topo2', + type: ActionTypes.CLICK_TOPOLOGY }; const CloseWebsocketAction = { @@ -209,36 +209,34 @@ describe('RootReducer', () => { }; const ReceiveNodesDeltaAction = { - type: ActionTypes.RECEIVE_NODES_DELTA, delta: { add: [{ - id: 'n1', - adjacency: ['n1', 'n2'] + adjacency: ['n1', 'n2'], + id: 'n1' }, { id: 'n2' }] - } + }, + type: ActionTypes.RECEIVE_NODES_DELTA }; const ReceiveNodesDeltaUpdateAction = { - type: ActionTypes.RECEIVE_NODES_DELTA, delta: { + remove: ['n2'], update: [{ - id: 'n1', - adjacency: ['n1'] - }], - remove: ['n2'] - } + adjacency: ['n1'], + id: 'n1' + }] + }, + type: ActionTypes.RECEIVE_NODES_DELTA }; const ReceiveTopologiesAction = { - type: ActionTypes.RECEIVE_TOPOLOGIES, topologies: [{ - url: '/topo1', name: 'Topo1', options: [{ - id: 'option1', defaultValue: 'off', + id: 'option1', options: [ {value: 'on'}, {value: 'off'} @@ -248,47 +246,49 @@ describe('RootReducer', () => { node_count: 1 }, sub_topologies: [{ - url: '/topo1-grouped', - name: 'topo 1 grouped' - }] + name: 'topo 1 grouped', + url: '/topo1-grouped' + }], + url: '/topo1' }, { - url: '/topo2', name: 'Topo2', stats: { node_count: 0 }, sub_topologies: [{ - url: '/topo2-sub', - name: 'topo 2 sub' - }] - }] + name: 'topo 2 sub', + url: '/topo2-sub' + }], + url: '/topo2' + }], + type: ActionTypes.RECEIVE_TOPOLOGIES }; const ReceiveTopologiesHiddenAction = { - type: ActionTypes.RECEIVE_TOPOLOGIES, topologies: [{ - url: '/topo1', name: 'Topo1', stats: { node_count: 1 - } + }, + url: '/topo1' }, { hide_if_empty: true, - url: '/topo2', name: 'Topo2', - stats: { node_count: 0, filtered_nodes: 0 }, + stats: { filtered_nodes: 0, node_count: 0 }, sub_topologies: [{ - url: '/topo2-sub', - name: 'topo 2 sub', hide_if_empty: true, - stats: { node_count: 0, filtered_nodes: 0 }, - }] - }] + name: 'topo 2 sub', + stats: { filtered_nodes: 0, node_count: 0 }, + url: '/topo2-sub', + }], + url: '/topo2' + }], + type: ActionTypes.RECEIVE_TOPOLOGIES }; const RouteAction = { - type: ActionTypes.ROUTE_TOPOLOGY, - state: {} + state: {}, + type: ActionTypes.ROUTE_TOPOLOGY }; const ChangeInstanceAction = { @@ -320,13 +320,13 @@ describe('RootReducer', () => { expect(nextState.get('currentTopology').get('url')).toBe('/topo1'); expect(nextState.get('currentTopology').get('options').first().get('id')).toEqual('option1'); expect(nextState.getIn(['currentTopology', 'options']).toJS()).toEqual([{ - id: 'option1', defaultValue: 'off', - selectType: 'one', + id: 'option1', options: [ { value: 'on'}, { value: 'off'} - ] + ], + selectType: 'one' }]); }); @@ -377,20 +377,20 @@ describe('RootReducer', () => { it('adds/removes a topology option', () => { const addAction = { - type: ActionTypes.CHANGE_TOPOLOGY_OPTION, - topologyId: 'services', option: 'namespace', + topologyId: 'services', + type: ActionTypes.CHANGE_TOPOLOGY_OPTION, value: ['default', 'scope'], }; const removeAction = { - type: ActionTypes.CHANGE_TOPOLOGY_OPTION, - topologyId: 'services', option: 'namespace', + topologyId: 'services', + type: ActionTypes.CHANGE_TOPOLOGY_OPTION, value: ['default'] }; let nextState = initialState; - nextState = reducer(nextState, { type: ActionTypes.RECEIVE_TOPOLOGIES, topologies}); - nextState = reducer(nextState, { type: ActionTypes.CLICK_TOPOLOGY, topologyId: 'services' }); + nextState = reducer(nextState, { topologies, type: ActionTypes.RECEIVE_TOPOLOGIES}); + nextState = reducer(nextState, { topologyId: 'services', type: ActionTypes.CLICK_TOPOLOGY }); nextState = reducer(nextState, addAction); expect(activeTopologyOptionsSelector(nextState).toJS()).toEqual({ namespace: ['default', 'scope'], @@ -405,8 +405,8 @@ describe('RootReducer', () => { it('sets topology options from route', () => { RouteAction.state = { - topologyId: 'topo1', selectedNodeId: null, + topologyId: 'topo1', topologyOptions: {topo1: {option1: 'on'}} }; @@ -424,8 +424,8 @@ describe('RootReducer', () => { it('uses default topology options from route', () => { RouteAction.state = { - topologyId: 'topo1', selectedNodeId: null, + topologyId: 'topo1', topologyOptions: null }; let nextState = initialState; @@ -485,7 +485,7 @@ describe('RootReducer', () => { expect(getUrlState(nextState).selectedNodeId).toEqual('n1'); // go back in browsing - RouteAction.state = {topologyId: 'topo1', selectedNodeId: null}; + RouteAction.state = {selectedNodeId: null, topologyId: 'topo1'}; nextState = reducer(nextState, RouteAction); expect(nextState.get('selectedNodeId')).toBeNull(); expect(nextState.get('nodes').toJS()).toEqual(NODE_SET); @@ -587,7 +587,7 @@ describe('RootReducer', () => { it('keeps hidden topology visible if sub_topology selected', () => { let nextState = initialState; nextState = reducer(nextState, ReceiveTopologiesAction); - nextState = reducer(nextState, { type: ActionTypes.CLICK_TOPOLOGY, topologyId: 'topo2-sub' }); + nextState = reducer(nextState, { topologyId: 'topo2-sub', type: ActionTypes.CLICK_TOPOLOGY }); nextState = reducer(nextState, ReceiveTopologiesHiddenAction); expect(nextState.get('currentTopologyId')).toEqual('topo2-sub'); expect(nextState.get('topologies').toJS().length).toEqual(2); @@ -689,22 +689,22 @@ describe('RootReducer', () => { it('cleans up old adjacencies', () => { // Add some nodes const action1 = { - type: ActionTypes.RECEIVE_NODES_DELTA, - delta: { add: [{ id: 'n1' }, { id: 'n2' }] } + delta: { add: [{ id: 'n1' }, { id: 'n2' }] }, + type: ActionTypes.RECEIVE_NODES_DELTA }; // Show nodes as connected const action2 = { - type: ActionTypes.RECEIVE_NODES_DELTA, delta: { - update: [{ id: 'n1', adjacency: ['n2'] }] - } + update: [{ adjacency: ['n2'], id: 'n1' }] + }, + type: ActionTypes.RECEIVE_NODES_DELTA }; // Remove the connection const action3 = { - type: ActionTypes.RECEIVE_NODES_DELTA, delta: { update: [{ id: 'n1' }] - } + }, + type: ActionTypes.RECEIVE_NODES_DELTA }; let nextState = reducer(initialState, action1); nextState = reducer(nextState, action2); @@ -722,8 +722,8 @@ describe('RootReducer', () => { }); it('highlights bidirectional edges', () => { const action = { - type: ActionTypes.ENTER_EDGE, - edgeId: constructEdgeId('abc123', 'def456') + edgeId: constructEdgeId('abc123', 'def456'), + type: ActionTypes.ENTER_EDGE }; const nextState = reducer(initialState, action); expect(highlightedEdgeIdsSelector(nextState).toJS()).toEqual([ diff --git a/client/app/scripts/reducers/root.js b/client/app/scripts/reducers/root.js index 37c4fb1e7..a69ddc7f2 100644 --- a/client/app/scripts/reducers/root.js +++ b/client/app/scripts/reducers/root.js @@ -59,24 +59,26 @@ export const initialState = makeMap({ mouseOverNodeId: null, nodeDetails: makeOrderedMap(), // nodeId -> details nodes: makeOrderedMap(), // nodeId -> node - nodesLoaded: false, // nodes cache, infrequently updated, used for search & resource view - nodesByTopology: makeMap(), // topologyId -> nodes + // topologyId -> nodes + nodesByTopology: makeMap(), + nodesLoaded: false, // class of metric, e.g. 'cpu', rather than 'host_cpu' or 'process_cpu'. // allows us to keep the same metric "type" selected when the topology changes. pausedAt: null, pinnedMetricType: null, pinnedNetwork: null, + // list of node filters + pinnedSearches: makeList(), plugins: makeList(), - pinnedSearches: makeList(), // list of node filters routeSet: false, searchFocused: false, searchQuery: '', selectedNetwork: null, selectedNodeId: null, showingHelp: false, - showingTroubleshootingMenu: false, showingNetworks: false, + showingTroubleshootingMenu: false, storeViewState: true, timeTravelTransitioning: false, topologies: makeList(), @@ -87,7 +89,7 @@ export const initialState = makeMap({ version: null, versionUpdate: null, // Set some initial numerical values to prevent NaN in case of edgy race conditions. - viewport: makeMap({ width: 0, height: 0 }), + viewport: makeMap({ height: 0, width: 0 }), websocketClosed: false, zoomCache: makeMap(), }); @@ -242,8 +244,8 @@ export function rootReducer(state = initialState, action) { case ActionTypes.SET_VIEWPORT_DIMENSIONS: { return state.mergeIn(['viewport'], { - width: action.width, height: action.height, + width: action.width, }); } @@ -309,8 +311,8 @@ export function rootReducer(state = initialState, action) { { id: action.nodeId, label: action.label, - topologyId: action.topologyId || state.get('currentTopologyId'), origin, + topologyId: action.topologyId || state.get('currentTopologyId'), } ); state = state.set('selectedNodeId', action.nodeId); @@ -465,8 +467,8 @@ export function rootReducer(state = initialState, action) { case ActionTypes.DO_CONTROL: { return state.setIn(['controlStatus', action.nodeId], makeMap({ - pending: true, - error: null + error: null, + pending: true })); } @@ -488,14 +490,14 @@ export function rootReducer(state = initialState, action) { case ActionTypes.DO_CONTROL_ERROR: { return state.setIn(['controlStatus', action.nodeId], makeMap({ - pending: false, - error: action.error + error: action.error, + pending: false })); } case ActionTypes.DO_CONTROL_SUCCESS: { return state.setIn(['controlStatus', action.nodeId], makeMap({ - pending: false, - error: null + error: null, + pending: false })); } @@ -511,11 +513,11 @@ export function rootReducer(state = initialState, action) { case ActionTypes.RECEIVE_CONTROL_PIPE: { return state.setIn(['controlPipes', action.pipeId], makeOrderedMap({ + control: action.control, id: action.pipeId, nodeId: action.nodeId, raw: action.rawTty, - resizeTtyControl: action.resizeTtyControl, - control: action.control + resizeTtyControl: action.resizeTtyControl })); } @@ -546,9 +548,9 @@ export function rootReducer(state = initialState, action) { if (state.hasIn(['nodeDetails', action.details.id])) { state = state.updateIn(['nodeDetails', action.details.id], obj => ({ ...obj, + details: action.details, notFound: false, timestamp: action.requestTimestamp, - details: action.details, })); } return state; @@ -623,8 +625,8 @@ export function rootReducer(state = initialState, action) { if (state.hasIn(['nodeDetails', action.nodeId])) { state = state.updateIn(['nodeDetails', action.nodeId], obj => ({ ...obj, - timestamp: action.requestTimestamp, notFound: true, + timestamp: action.requestTimestamp, })); } return state; @@ -674,8 +676,8 @@ export function rootReducer(state = initialState, action) { } state = setTopology(state, action.state.topologyId); state = state.merge({ - selectedNodeId: action.state.selectedNodeId, pinnedMetricType: action.state.pinnedMetricType, + selectedNodeId: action.state.selectedNodeId, }); if (action.state.topologyOptions) { const options = getDefaultTopologyOptions(state).mergeDeep(action.state.topologyOptions); diff --git a/client/app/scripts/selectors/__tests__/search-test.js b/client/app/scripts/selectors/__tests__/search-test.js index e825d5528..27d206f24 100644 --- a/client/app/scripts/selectors/__tests__/search-test.js +++ b/client/app/scripts/selectors/__tests__/search-test.js @@ -29,23 +29,21 @@ describe('Search selectors', () => { }], tables: [{ id: 'metric1', - type: 'property-list', rows: [{ - id: 'label1', entries: { label: 'Label 1', value: 'Label Value 1' - } + }, + id: 'label1' }, { - id: 'label2', entries: { label: 'Label 2', value: 'Label Value 2' - } - }] + }, + id: 'label2' + }], + type: 'property-list' }, { - id: 'metric2', - type: 'multicolumn-table', columns: [{ id: 'a', label: 'A' @@ -53,28 +51,30 @@ describe('Search selectors', () => { id: 'c', label: 'C' }], + id: 'metric2', rows: [{ - id: 'row1', entries: { a: 'xxxa', b: 'yyya', c: 'zzz1' - } + }, + id: 'row1' }, { - id: 'row2', entries: { a: 'yyyb', b: 'xxxb', c: 'zzz2' - } + }, + id: 'row2' }, { - id: 'row3', entries: { a: 'Value 1', b: 'Value 2', c: 'Value 3' - } - }] + }, + id: 'row3' + }], + type: 'multicolumn-table' }], }, }) diff --git a/client/app/scripts/selectors/canvas.js b/client/app/scripts/selectors/canvas.js index 9e61aff08..98b779ffa 100644 --- a/client/app/scripts/selectors/canvas.js +++ b/client/app/scripts/selectors/canvas.js @@ -23,7 +23,7 @@ export const canvasMarginsSelector = createSelector( state => state.get('topologyViewMode'), ], viewMode => CANVAS_MARGINS[viewMode] || { - top: 0, left: 0, right: 0, bottom: 0 + bottom: 0, left: 0, right: 0, top: 0 } ); diff --git a/client/app/scripts/selectors/graph-view/graph.js b/client/app/scripts/selectors/graph-view/graph.js index 0d7600aff..952bec743 100644 --- a/client/app/scripts/selectors/graph-view/graph.js +++ b/client/app/scripts/selectors/graph-view/graph.js @@ -14,9 +14,9 @@ const log = debug('scope:nodes-chart'); const layoutOptionsSelector = createStructuredSelector({ forceRelayout: state => state.get('forceRelayout'), + height: canvasHeightSelector, topologyId: state => state.get('currentTopologyId'), topologyOptions: activeTopologyOptionsSelector, - height: canvasHeightSelector, width: canvasWidthSelector, }); @@ -43,8 +43,8 @@ const graphLayoutSelector = createSelector( // If the graph is empty, skip computing the layout. if (nodes.size === 0) { return { - nodes: makeMap(), edges: makeMap(), + nodes: makeMap(), }; } diff --git a/client/app/scripts/selectors/graph-view/layout.js b/client/app/scripts/selectors/graph-view/layout.js index 176324f25..1ff28b1bc 100644 --- a/client/app/scripts/selectors/graph-view/layout.js +++ b/client/app/scripts/selectors/graph-view/layout.js @@ -99,7 +99,7 @@ const circularLayoutScalarsSelector = createSelector( const circularRadius = viewportExpanse / radiusDensity(circularNodesCount) / scale; const circularInnerAngle = (2 * Math.PI) / circularNodesCount; - return { selectedScale, circularRadius, circularInnerAngle }; + return { circularInnerAngle, circularRadius, selectedScale }; } ); diff --git a/client/app/scripts/selectors/graph-view/zoom.js b/client/app/scripts/selectors/graph-view/zoom.js index 3b2164c22..7ed6cba48 100644 --- a/client/app/scripts/selectors/graph-view/zoom.js +++ b/client/app/scripts/selectors/graph-view/zoom.js @@ -23,7 +23,7 @@ const graphBoundingRectangleSelector = createSelector( const yMax = graphNodes.map(n => n.get('y') + NODE_BASE_SIZE).max(); return makeMap({ - xMin, yMin, xMax, yMax + xMax, xMin, yMax, yMin }); } ); @@ -54,10 +54,10 @@ export const graphDefaultZoomSelector = createSelector( const translateY = ((height - ((yMax + yMin) * scale)) / 2) + canvasMargins.top; return makeMap({ - translateX, - translateY, scaleX: scale, scaleY: scale, + translateX, + translateY, }); } ); @@ -74,12 +74,12 @@ export const graphLimitsSelector = createSelector( } = boundingRectangle.toJS(); return makeMap({ - minScale: MIN_SCALE, - maxScale: MAX_SCALE, - contentMinX: xMin, contentMaxX: xMax, - contentMinY: yMin, contentMaxY: yMax, + contentMinX: xMin, + contentMinY: yMin, + maxScale: MAX_SCALE, + minScale: MIN_SCALE, }); } ); diff --git a/client/app/scripts/selectors/node-networks.js b/client/app/scripts/selectors/node-networks.js index 0654cd10d..953c2d153 100644 --- a/client/app/scripts/selectors/node-networks.js +++ b/client/app/scripts/selectors/node-networks.js @@ -17,7 +17,7 @@ export const nodeNetworksSelector = createMapSelector( const networkValues = networks.has('value') ? networks.get('value').split(', ') : []; return fromJS(networkValues.map(network => ({ - id: network, label: network, colorKey: network + colorKey: network, id: network, label: network }))); } ); diff --git a/client/app/scripts/selectors/resource-view/zoom.js b/client/app/scripts/selectors/resource-view/zoom.js index 58a7616b4..9df1f9f7b 100644 --- a/client/app/scripts/selectors/resource-view/zoom.js +++ b/client/app/scripts/selectors/resource-view/zoom.js @@ -33,7 +33,7 @@ const resourceNodesBoundingRectangleSelector = createSelector( const yMax = verticalPositions.toList().max() + RESOURCES_LAYER_HEIGHT; return makeMap({ - xMin, xMax, yMin, yMax + xMax, xMin, yMax, yMin }); } ); @@ -62,10 +62,10 @@ export const resourcesDefaultZoomSelector = createSelector( const translateY = ((height - ((yMax + yMin) * scaleY)) / 2) + canvasMargins.top; return makeMap({ - translateX, - translateY, scaleX, scaleY, + translateX, + translateY, }); } ); @@ -85,14 +85,14 @@ export const resourcesLimitsSelector = createSelector( } = boundingRectangle.toJS(); return makeMap({ + contentMaxX: xMax, + contentMaxY: yMax, + contentMinX: xMin, + contentMinY: yMin, // Maximal zoom is such that the smallest box takes the whole canvas. maxScale: width / minNodeWidth, // Minimal zoom is equivalent to the initial one, where the whole layout matches the canvas. minScale: defaultZoom.get('scaleX'), - contentMinX: xMin, - contentMaxX: xMax, - contentMinY: yMin, - contentMaxY: yMax, }); } ); diff --git a/client/app/scripts/utils/__tests__/search-utils-test.js b/client/app/scripts/utils/__tests__/search-utils-test.js index 61d09ff9e..6b26b3052 100644 --- a/client/app/scripts/utils/__tests__/search-utils-test.js +++ b/client/app/scripts/utils/__tests__/search-utils-test.js @@ -29,23 +29,21 @@ describe('SearchUtils', () => { }], tables: [{ id: 'metric1', - type: 'property-list', rows: [{ - id: 'label1', entries: { label: 'Label 1', value: 'Label Value 1' - } + }, + id: 'label1' }, { - id: 'label2', entries: { label: 'Label 2', value: 'Label Value 2' - } - }] + }, + id: 'label2' + }], + type: 'property-list' }, { - id: 'metric2', - type: 'multicolumn-table', columns: [{ id: 'a', label: 'A' @@ -53,28 +51,30 @@ describe('SearchUtils', () => { id: 'c', label: 'C' }], + id: 'metric2', rows: [{ - id: 'row1', entries: { a: 'xxxa', b: 'yyya', c: 'zzz1' - } + }, + id: 'row1' }, { - id: 'row2', entries: { a: 'yyyb', b: 'xxxb', c: 'zzz2' - } + }, + id: 'row2' }, { - id: 'row3', entries: { a: 'Value 1', b: 'Value 2', c: 'Value 3' - } - }] + }, + id: 'row3' + }], + type: 'multicolumn-table' }], }, }) @@ -245,7 +245,7 @@ describe('SearchUtils', () => { expect(fun('prefix:text')).toEqual({prefix: 'prefix', query: 'text'}); expect(fun(':text')).toEqual(null); expect(fun('text:')).toEqual(null); - expect(fun('cpu > 1')).toEqual({metric: 'cpu', value: 1, comp: 'gt'}); + expect(fun('cpu > 1')).toEqual({comp: 'gt', metric: 'cpu', value: 1}); expect(fun('cpu >')).toEqual(null); }); }); @@ -292,7 +292,7 @@ describe('SearchUtils', () => { it('should match on a metric field', () => { const nodes = nodeSets.someNodes; - const matches = fun(nodes, {metric: 'metric1', value: 1, comp: 'eq'}); + const matches = fun(nodes, {comp: 'eq', metric: 'metric1', value: 1}); expect(matches.size).toEqual(1); expect(matches.getIn(['n1', 'metrics', 'metric1']).metric).toBeTruthy(); }); diff --git a/client/app/scripts/utils/__tests__/topology-utils-test.js b/client/app/scripts/utils/__tests__/topology-utils-test.js index 2e11bb22c..506878bf7 100644 --- a/client/app/scripts/utils/__tests__/topology-utils-test.js +++ b/client/app/scripts/utils/__tests__/topology-utils-test.js @@ -6,68 +6,68 @@ describe('TopologyUtils', () => { const nodeSets = { initial4: { - nodes: fromJS({ - n1: {id: 'n1'}, - n2: {id: 'n2'}, - n3: {id: 'n3'}, - n4: {id: 'n4'} - }), edges: fromJS({ 'n1-n3': {id: 'n1-n3', source: 'n1', target: 'n3'}, 'n1-n4': {id: 'n1-n4', source: 'n1', target: 'n4'}, 'n2-n4': {id: 'n2-n4', source: 'n2', target: 'n4'} - }) - }, - removeEdge24: { + }), nodes: fromJS({ n1: {id: 'n1'}, n2: {id: 'n2'}, n3: {id: 'n3'}, n4: {id: 'n4'} - }), + }) + }, + removeEdge24: { edges: fromJS({ 'n1-n3': {id: 'n1-n3', source: 'n1', target: 'n3'}, 'n1-n4': {id: 'n1-n4', source: 'n1', target: 'n4'} + }), + nodes: fromJS({ + n1: {id: 'n1'}, + n2: {id: 'n2'}, + n3: {id: 'n3'}, + n4: {id: 'n4'} }) }, removeNode2: { + edges: fromJS({ + 'n1-n3': {id: 'n1-n3', source: 'n1', target: 'n3'}, + 'n1-n4': {id: 'n1-n4', source: 'n1', target: 'n4'} + }), nodes: fromJS({ n1: {id: 'n1'}, n3: {id: 'n3'}, n4: {id: 'n4'} - }), - edges: fromJS({ - 'n1-n3': {id: 'n1-n3', source: 'n1', target: 'n3'}, - 'n1-n4': {id: 'n1-n4', source: 'n1', target: 'n4'} }) }, removeNode23: { + edges: fromJS({ + 'n1-n4': {id: 'n1-n4', source: 'n1', target: 'n4'} + }), nodes: fromJS({ n1: {id: 'n1'}, n4: {id: 'n4'} - }), - edges: fromJS({ - 'n1-n4': {id: 'n1-n4', source: 'n1', target: 'n4'} }) }, single3: { + edges: fromJS({}), nodes: fromJS({ n1: {id: 'n1'}, n2: {id: 'n2'}, n3: {id: 'n3'} - }), - edges: fromJS({}) + }) }, singlePortrait: { + edges: fromJS({ + 'n1-n4': {id: 'n1-n4', source: 'n1', target: 'n4'} + }), nodes: fromJS({ n1: {id: 'n1'}, n2: {id: 'n2'}, n3: {id: 'n3'}, n4: {id: 'n4'}, n5: {id: 'n5'} - }), - edges: fromJS({ - 'n1-n4': {id: 'n1-n4', source: 'n1', target: 'n4'} }) } }; @@ -120,10 +120,10 @@ describe('TopologyUtils', () => { describe('filterHiddenTopologies', () => { it('should filter out empty topos that set hide_if_empty=true', () => { const topos = [ - {id: 'a', hide_if_empty: true, stats: {node_count: 0, filtered_nodes: 0}}, - {id: 'b', hide_if_empty: true, stats: {node_count: 1, filtered_nodes: 0}}, - {id: 'c', hide_if_empty: true, stats: {node_count: 0, filtered_nodes: 1}}, - {id: 'd', hide_if_empty: false, stats: {node_count: 0, filtered_nodes: 0}} + {hide_if_empty: true, id: 'a', stats: {filtered_nodes: 0, node_count: 0}}, + {hide_if_empty: true, id: 'b', stats: {filtered_nodes: 0, node_count: 1}}, + {hide_if_empty: true, id: 'c', stats: {filtered_nodes: 1, node_count: 0}}, + {hide_if_empty: false, id: 'd', stats: {filtered_nodes: 0, node_count: 0}} ]; const res = TopologyUtils.filterHiddenTopologies(topos); diff --git a/client/app/scripts/utils/data-generator-utils.js b/client/app/scripts/utils/data-generator-utils.js index 8ecd10b20..e440b9a2d 100644 --- a/client/app/scripts/utils/data-generator-utils.js +++ b/client/app/scripts/utils/data-generator-utils.js @@ -46,8 +46,8 @@ export const METRIC_LABELS = { host_cpu_usage_percent: 'CPU', host_mem_usage_bytes: 'Memory', load1: 'Load 1', - load15: 'Load 15', load5: 'Load 5', + load15: 'Load 15', open_files_count: 'Open files', process_cpu_usage_percent: 'CPU', process_memory_usage_bytes: 'Memory' @@ -60,42 +60,42 @@ export function label(m) { const memoryMetric = (node, name, max = 1024 * 1024 * 1024) => ({ - samples: [{value: getNextValue([node.id, name], max)}], - max + max, + samples: [{value: getNextValue([node.id, name], max)}] }); const cpuMetric = (node, name, max = 100) => ({ - samples: [{value: getNextValue([node.id, name], max)}], - max + max, + samples: [{value: getNextValue([node.id, name], max)}] }); const fileMetric = (node, name, max = 1000) => ({ - samples: [{value: getNextValue([node.id, name], max)}], - max + max, + samples: [{value: getNextValue([node.id, name], max)}] }); const loadMetric = (node, name, max = 10) => ({ - samples: [{value: getNextValue([node.id, name], max)}], - max + max, + samples: [{value: getNextValue([node.id, name], max)}] }); const metrics = { - // process - square: { - process_cpu_usage_percent: cpuMetric, - process_memory_usage_bytes: memoryMetric, - open_files_count: fileMetric + // host + circle: { + host_cpu_usage_percent: cpuMetric, + host_mem_usage_bytes: memoryMetric, + load5: loadMetric }, // container hexagon: { docker_cpu_total_usage: cpuMetric, docker_memory_usage: memoryMetric }, - // host - circle: { - load5: loadMetric, - host_cpu_usage_percent: cpuMetric, - host_mem_usage_bytes: memoryMetric + // process + square: { + open_files_count: fileMetric, + process_cpu_usage_percent: cpuMetric, + process_memory_usage_bytes: memoryMetric } }; diff --git a/client/app/scripts/utils/file-utils.js b/client/app/scripts/utils/file-utils.js index 545b52f65..0a7002a2c 100644 --- a/client/app/scripts/utils/file-utils.js +++ b/client/app/scripts/utils/file-utils.js @@ -3,15 +3,15 @@ import { each } from 'lodash'; const doctype = ''; const prefix = { - xmlns: 'http://www.w3.org/2000/xmlns/', + svg: 'http://www.w3.org/2000/svg', xlink: 'http://www.w3.org/1999/xlink', - svg: 'http://www.w3.org/2000/svg' + xmlns: 'http://www.w3.org/2000/xmlns/' }; const cssSkipValues = { - auto: true, '0px 0px': true, - visible: true, - pointer: true + auto: true, + pointer: true, + visible: true }; function setInlineStyles(svg, target, emptySvgDeclarationComputed) { diff --git a/client/app/scripts/utils/layouter-utils.js b/client/app/scripts/utils/layouter-utils.js index cbae050f3..b640a8373 100644 --- a/client/app/scripts/utils/layouter-utils.js +++ b/client/app/scripts/utils/layouter-utils.js @@ -27,7 +27,7 @@ export function initEdgesFromNodes(nodes) { // directionality into account when calculating the layout. const edgeId = constructEdgeId(source, target); const edge = makeMap({ - id: edgeId, value: 1, source, target + id: edgeId, source, target, value: 1 }); edges = edges.set(edgeId, edge); } diff --git a/client/app/scripts/utils/metric-utils.js b/client/app/scripts/utils/metric-utils.js index f30f6cabc..8bdad12c2 100644 --- a/client/app/scripts/utils/metric-utils.js +++ b/client/app/scripts/utils/metric-utils.js @@ -23,7 +23,7 @@ const loadScale = scaleLog().domain([0.01, 100]).range([0, 1]); export function getMetricValue(metric) { if (!metric) { - return { height: 0, value: null, formattedValue: 'n/a' }; + return { formattedValue: 'n/a', height: 0, value: null }; } const m = metric.toJS(); const { value } = m; @@ -44,9 +44,9 @@ export function getMetricValue(metric) { } return { - height: displayedValue, + formattedValue: formatMetricSvg(value, m), hasMetric: value !== null, - formattedValue: formatMetricSvg(value, m) + height: displayedValue }; } diff --git a/client/app/scripts/utils/node-details-utils.js b/client/app/scripts/utils/node-details-utils.js index a4979d873..7a3975cfb 100644 --- a/client/app/scripts/utils/node-details-utils.js +++ b/client/app/scripts/utils/node-details-utils.js @@ -33,9 +33,9 @@ export function defaultSortDesc(header) { export function getTableColumnsStyles(headers) { return headers.map(header => ({ + textAlign: isNumber(header) ? 'right' : 'left', // More beauty hacking, ports and counts can only get // so big, free up WS for other longer fields like IPs! - width: NODE_DETAILS_TABLE_COLUMN_WIDTHS[header.id], - textAlign: isNumber(header) ? 'right' : 'left' + width: NODE_DETAILS_TABLE_COLUMN_WIDTHS[header.id] })); } diff --git a/client/app/scripts/utils/router-utils.js b/client/app/scripts/utils/router-utils.js index fc4425327..58f376ffa 100644 --- a/client/app/scripts/utils/router-utils.js +++ b/client/app/scripts/utils/router-utils.js @@ -87,19 +87,19 @@ export function getUrlState(state) { ); const urlState = { + contrastMode: state.get('contrastMode'), controlPipe: cp ? cp.toJS() : null, + gridSortedBy: state.get('gridSortedBy'), + gridSortedDesc: state.get('gridSortedDesc'), nodeDetails: nodeDetails.toJS(), pausedAt: state.get('pausedAt'), - topologyViewMode: state.get('topologyViewMode'), pinnedMetricType: state.get('pinnedMetricType'), pinnedSearches: state.get('pinnedSearches').toJS(), searchQuery: state.get('searchQuery'), selectedNodeId: state.get('selectedNodeId'), - gridSortedBy: state.get('gridSortedBy'), - gridSortedDesc: state.get('gridSortedDesc'), topologyId: state.get('currentTopologyId'), topologyOptions: topologyOptionsDiff, - contrastMode: state.get('contrastMode'), + topologyViewMode: state.get('topologyViewMode'), }; if (state.get('showingNetworks')) { diff --git a/client/app/scripts/utils/search-utils.js b/client/app/scripts/utils/search-utils.js index 80c98593d..b9528a1e6 100644 --- a/client/app/scripts/utils/search-utils.js +++ b/client/app/scripts/utils/search-utils.js @@ -12,8 +12,8 @@ const SEARCH_FIELDS = makeMap({ const COMPARISONS = makeMap({ '<': 'lt', - '>': 'gt', - '=': 'eq' + '=': 'eq', + '>': 'gt' }); const COMPARISONS_REGEX = new RegExp(`[${COMPARISONS.keySeq().toJS().join('')}]`); @@ -75,7 +75,7 @@ function findNodeMatch(nodeMatches, keyPath, text, query, prefix, label, truncat nodeMatches = nodeMatches.setIn( keyPath, { - text, label, start: index, length: firstMatch.length, truncate + label, length: firstMatch.length, start: index, text, truncate } ); } @@ -227,8 +227,8 @@ export function parseQuery(query) { query = prefixQuery[1].trim(); if (prefix && query) { return { - query, - prefix + prefix, + query }; } } else if (COMPARISONS_REGEX.test(query)) { @@ -241,9 +241,9 @@ export function parseQuery(query) { const metric = comparisonQuery[0].trim(); if (!window.isNaN(value) && metric) { comparison = { + comp, metric, - value, - comp + value }; return false; // dont look further } @@ -329,8 +329,8 @@ export const testable = { applyPinnedSearches, findNodeMatch, findNodeMatchMetric, - matchPrefix, makeRegExp, + matchPrefix, parseQuery, parseValue, searchTopology, diff --git a/client/app/scripts/utils/storage-utils.js b/client/app/scripts/utils/storage-utils.js index 61908660b..45bd293e5 100644 --- a/client/app/scripts/utils/storage-utils.js +++ b/client/app/scripts/utils/storage-utils.js @@ -3,16 +3,16 @@ import debug from 'debug'; const log = debug('scope:storage-utils'); export const localSessionStorage = { + clear() { + window.sessionStorage.clear(); + window.localStorage.clear(); + }, getItem(k) { return window.sessionStorage.getItem(k) || window.localStorage.getItem(k); }, setItem(k, v) { window.sessionStorage.setItem(k, v); window.localStorage.setItem(k, v); - }, - clear() { - window.sessionStorage.clear(); - window.localStorage.clear(); } }; diff --git a/client/app/scripts/utils/string-utils.js b/client/app/scripts/utils/string-utils.js index 65788be56..497338e2e 100644 --- a/client/app/scripts/utils/string-utils.js +++ b/client/app/scripts/utils/string-utils.js @@ -109,8 +109,8 @@ export function formatDataType(field, referenceTimestamp = null) { datetime(timestampString) { const timestamp = moment(timestampString); return { - value: timestamp.from(referenceTimestamp ? moment(referenceTimestamp) : moment()), - title: timestamp.utc().toISOString() + title: timestamp.utc().toISOString(), + value: timestamp.from(referenceTimestamp ? moment(referenceTimestamp) : moment()) }; }, duration(durationSecondsString) { @@ -118,13 +118,13 @@ export function formatDataType(field, referenceTimestamp = null) { const humanizedDuration = humanizedRoundedDownDuration(duration); return { - value: humanizedDuration, title: humanizedDuration, + value: humanizedDuration, }; }, }; const format = formatters[field.dataType]; return format ? format(field.value) - : { value: field.value, title: field.value }; + : { title: field.value, value: field.value }; } diff --git a/client/app/scripts/utils/transform-utils.js b/client/app/scripts/utils/transform-utils.js index 68d572115..c0bce5d5b 100644 --- a/client/app/scripts/utils/transform-utils.js +++ b/client/app/scripts/utils/transform-utils.js @@ -7,10 +7,10 @@ const applyScaleY = ({ scaleY = 1 }, height) => height * scaleY; export const applyTransform = (transform, { width = 0, height = 0, x, y }) => ({ + height: applyScaleY(transform, height), + width: applyScaleX(transform, width), x: applyTranslateX(transform, x), y: applyTranslateY(transform, y), - width: applyScaleX(transform, width), - height: applyScaleY(transform, height), }); @@ -22,10 +22,10 @@ const inverseScaleY = ({ scaleY = 1 }, height) => height / scaleY; export const inverseTransform = (transform, { width = 0, height = 0, x, y }) => ({ + height: inverseScaleY(transform, height), + width: inverseScaleX(transform, width), x: inverseTranslateX(transform, x), y: inverseTranslateY(transform, y), - width: inverseScaleX(transform, width), - height: inverseScaleY(transform, height), }); diff --git a/client/app/scripts/utils/web-api-utils.js b/client/app/scripts/utils/web-api-utils.js index ffe3edbe4..7cbd1ff13 100644 --- a/client/app/scripts/utils/web-api-utils.js +++ b/client/app/scripts/utils/web-api-utils.js @@ -213,14 +213,14 @@ function getNodesOnce(getState, dispatch) { const optionsQuery = buildUrlQuery(topologyOptions, state); const url = `${getApiPath()}${topologyUrl}?${optionsQuery}`; doRequest({ - url, - success: (res) => { - dispatch(receiveNodes(res.nodes)); - }, error: (req) => { log(`Error in nodes request: ${req.responseText}`); dispatch(receiveError(url)); - } + }, + success: (res) => { + dispatch(receiveNodes(res.nodes)); + }, + url }); } @@ -249,15 +249,6 @@ function pollTopologies(getState, dispatch, initialPoll = false) { // NOTE: getState is called every time to make sure the up-to-date state is used. const url = topologiesUrl(getState()); doRequest({ - url, - success: (res) => { - if (continuePolling && !isPausedSelector(getState())) { - dispatch(receiveTopologies(res)); - topologyTimer = setTimeout(() => { - pollTopologies(getState, dispatch); - }, TOPOLOGY_REFRESH_INTERVAL); - } - }, error: (req) => { log(`Error in topology request: ${req.responseText}`); dispatch(receiveError(url)); @@ -267,21 +258,30 @@ function pollTopologies(getState, dispatch, initialPoll = false) { pollTopologies(getState, dispatch); }, TOPOLOGY_REFRESH_INTERVAL); } - } + }, + success: (res) => { + if (continuePolling && !isPausedSelector(getState())) { + dispatch(receiveTopologies(res)); + topologyTimer = setTimeout(() => { + pollTopologies(getState, dispatch); + }, TOPOLOGY_REFRESH_INTERVAL); + } + }, + url }); } function getTopologiesOnce(getState, dispatch) { const url = topologiesUrl(getState()); doRequest({ - url, - success: (res) => { - dispatch(receiveTopologies(res)); - }, error: (req) => { log(`Error in topology request: ${req.responseText}`); dispatch(receiveError(url)); - } + }, + success: (res) => { + dispatch(receiveTopologies(res)); + }, + url }); } @@ -323,13 +323,6 @@ export function getNodeDetails(getState, dispatch) { const url = urlComponents.join(''); doRequest({ - url, - success: (res) => { - // make sure node is still selected - if (nodeMap.has(res.node.id)) { - dispatch(receiveNodeDetails(res.node, requestTimestamp)); - } - }, error: (err) => { log(`Error in node details request: ${err.responseText}`); // dont treat missing node as error @@ -338,7 +331,14 @@ export function getNodeDetails(getState, dispatch) { } else { dispatch(receiveError(topologyUrl)); } - } + }, + success: (res) => { + // make sure node is still selected + if (nodeMap.has(res.node.id)) { + dispatch(receiveNodeDetails(res.node, requestTimestamp)); + } + }, + url }); } else if (obj) { log('No details or url found for ', obj); @@ -366,15 +366,6 @@ export function getApiDetails(dispatch) { clearTimeout(apiDetailsTimer); const url = `${getApiPath()}/api`; doRequest({ - url, - success: (res) => { - dispatch(receiveApiDetails(res)); - if (continuePolling) { - apiDetailsTimer = setTimeout(() => { - getApiDetails(dispatch); - }, API_REFRESH_INTERVAL); - } - }, error: (req) => { log(`Error in api details request: ${req.responseText}`); receiveError(url); @@ -383,7 +374,16 @@ export function getApiDetails(dispatch) { getApiDetails(dispatch); }, API_REFRESH_INTERVAL / 2); } - } + }, + success: (res) => { + dispatch(receiveApiDetails(res)); + if (continuePolling) { + apiDetailsTimer = setTimeout(() => { + getApiDetails(dispatch); + }, API_REFRESH_INTERVAL); + } + }, + url }); } @@ -392,15 +392,20 @@ export function doControlRequest(nodeId, control, dispatch) { const url = `${getApiPath()}/api/control/${encodeURIComponent(control.probeId)}/` + `${encodeURIComponent(control.nodeId)}/${control.id}`; doRequest({ + error: (err) => { + dispatch(receiveControlError(nodeId, err.response)); + controlErrorTimer = setTimeout(() => { + dispatch(clearControlError(nodeId)); + }, 10000); + }, method: 'POST', - url, success: (res) => { dispatch(receiveControlSuccess(nodeId)); if (res) { if (res.pipe) { dispatch(blurSearch()); const resizeTtyControl = res.resize_tty_control && - {id: res.resize_tty_control, probeId: control.probeId, nodeId: control.nodeId}; + {id: res.resize_tty_control, nodeId: control.nodeId, probeId: control.probeId}; dispatch(receiveControlPipe( res.pipe, nodeId, @@ -414,12 +419,7 @@ export function doControlRequest(nodeId, control, dispatch) { } } }, - error: (err) => { - dispatch(receiveControlError(nodeId, err.response)); - controlErrorTimer = setTimeout(() => { - dispatch(clearControlError(nodeId)); - }, 10000); - } + url }); } @@ -429,9 +429,9 @@ export function doResizeTty(pipeId, control, cols, rows) { + `${encodeURIComponent(control.nodeId)}/${control.id}`; return doRequest({ + data: JSON.stringify({height: rows.toString(), pipeID: pipeId, width: cols.toString()}), method: 'POST', url, - data: JSON.stringify({pipeID: pipeId, width: cols.toString(), height: rows.toString()}), }) .fail((err) => { log(`Error resizing pipe: ${err}`); @@ -442,15 +442,15 @@ export function doResizeTty(pipeId, control, cols, rows) { export function deletePipe(pipeId, dispatch) { const url = `${getApiPath()}/api/pipe/${encodeURIComponent(pipeId)}`; doRequest({ - method: 'DELETE', - url, - success: () => { - log('Closed the pipe!'); - }, error: (err) => { log(`Error closing pipe:${err}`); dispatch(receiveError(url)); - } + }, + method: 'DELETE', + success: () => { + log('Closed the pipe!'); + }, + url }); } @@ -458,8 +458,6 @@ export function deletePipe(pipeId, dispatch) { export function getPipeStatus(pipeId, dispatch) { const url = `${getApiPath()}/api/pipe/${encodeURIComponent(pipeId)}/check`; doRequest({ - method: 'GET', - url, complete: (res) => { const status = { 204: 'PIPE_ALIVE', @@ -472,7 +470,9 @@ export function getPipeStatus(pipeId, dispatch) { } dispatch(receiveControlPipeStatus(pipeId, status)); - } + }, + method: 'GET', + url }); } diff --git a/client/server.js b/client/server.js index 4855bc1b5..34d85fea2 100644 --- a/client/server.js +++ b/client/server.js @@ -16,8 +16,8 @@ const BACKEND_HOST = process.env.BACKEND_HOST || 'localhost'; */ const backendProxy = httpProxy.createProxy({ - ws: true, target: `http://${BACKEND_HOST}:4040`, + ws: true, }); backendProxy.on('error', err => console.error('Proxy error', err)); app.all('/api*', backendProxy.web.bind(backendProxy)); @@ -49,10 +49,8 @@ if (process.env.NODE_ENV !== 'production') { const compiler = webpack(config); app.use(webpackMiddleware(compiler, { - // required - publicPath: config.output.publicPath, - // options noInfo: true, + publicPath: config.output.publicPath, // required stats: 'errors-only', }));