From 2fcbdb7e16cf0da88a8d79c451a6123a7356fead Mon Sep 17 00:00:00 2001 From: Filip Barl Date: Tue, 17 Oct 2017 17:39:02 +0200 Subject: [PATCH] Applied autofix for object-curly-newline rule. --- client/.eslintrc | 1 - .../charts/__tests__/nodes-layout-test.js | 8 ++++++-- client/app/scripts/charts/edge-container.js | 4 +++- client/app/scripts/charts/edge.js | 4 +++- client/app/scripts/charts/node-container.js | 4 +++- client/app/scripts/charts/node-shapes.js | 4 +++- client/app/scripts/charts/node.js | 6 ++++-- client/app/scripts/charts/nodes-error.js | 4 +++- client/app/scripts/charts/nodes-grid.js | 10 +++++++--- client/app/scripts/components/app.js | 6 ++++-- client/app/scripts/components/debug-toolbar.js | 4 +++- client/app/scripts/components/footer.js | 4 +++- client/app/scripts/components/help-panel.js | 4 +++- client/app/scripts/components/matched-text.js | 4 +++- client/app/scripts/components/node-details.js | 4 +++- .../node-details/node-details-controls.js | 4 +++- .../node-details-health-link-item.js | 4 +++- .../node-details-table-node-metric-link.js | 4 +++- .../node-details/node-details-table-row.js | 4 +++- .../node-details/node-details-table.js | 6 ++++-- .../nodes-resources/node-resources-layer.js | 4 +++- .../node-resources-metric-box-info.js | 6 ++++-- .../node-resources-metric-box.js | 12 +++++++++--- client/app/scripts/components/nodes.js | 6 ++++-- client/app/scripts/components/plugins.js | 4 +++- client/app/scripts/components/search.js | 10 +++++++--- client/app/scripts/components/show-more.js | 4 +++- client/app/scripts/components/sparkline.js | 4 +++- client/app/scripts/components/status.js | 4 +++- client/app/scripts/components/time-control.js | 6 ++++-- .../app/scripts/components/zoomable-canvas.js | 18 +++++++++++++----- client/app/scripts/constants/styles.js | 12 +++++++++--- .../scripts/reducers/__tests__/root-test.js | 6 ++++-- client/app/scripts/reducers/root.js | 6 ++++-- client/app/scripts/selectors/canvas.js | 4 +++- .../app/scripts/selectors/graph-view/layout.js | 4 +++- .../app/scripts/selectors/graph-view/zoom.js | 12 +++++++++--- .../scripts/selectors/resource-view/zoom.js | 12 +++++++++--- .../utils/__tests__/layouter-utils-test.js | 16 ++++++++++++---- .../scripts/utils/__tests__/math-utils-test.js | 12 +++++++++--- .../utils/__tests__/search-utils-test.js | 4 +++- client/app/scripts/utils/layouter-utils.js | 4 +++- client/app/scripts/utils/node-shape-utils.js | 4 +++- client/app/scripts/utils/search-utils.js | 8 ++++++-- client/app/scripts/utils/transform-utils.js | 12 +++++++++--- 45 files changed, 209 insertions(+), 78 deletions(-) diff --git a/client/.eslintrc b/client/.eslintrc index 3e77c7463..aff00d73f 100644 --- a/client/.eslintrc +++ b/client/.eslintrc @@ -40,7 +40,6 @@ "jsx-a11y/click-events-have-key-events": 0, "jsx-a11y/mouse-events-have-key-events": 0, - "object-curly-newline": 0, "padded-blocks": 0, "prefer-destructuring": 0, "react/default-props-match-prop-types": 0, diff --git a/client/app/scripts/charts/__tests__/nodes-layout-test.js b/client/app/scripts/charts/__tests__/nodes-layout-test.js index ddf83d182..b9ff15601 100644 --- a/client/app/scripts/charts/__tests__/nodes-layout-test.js +++ b/client/app/scripts/charts/__tests__/nodes-layout-test.js @@ -134,13 +134,17 @@ describe('NodesLayout', () => { }, layoutProps: { nodes: fromJS({ - n1: {id: 'n1', label: 'lold', labelMinor: 'lmold', rank: 'rold'}, + 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}, + n1: { + id: 'n1', label: 'lnew', labelMinor: 'lmnew', rank: 'rnew', x: 111, y: 109 + }, }), edges: fromJS({}) } diff --git a/client/app/scripts/charts/edge-container.js b/client/app/scripts/charts/edge-container.js index 8c9b5fb50..49e391d97 100644 --- a/client/app/scripts/charts/edge-container.js +++ b/client/app/scripts/charts/edge-container.js @@ -70,7 +70,9 @@ export default class EdgeContainer extends React.PureComponent { } render() { - const { isAnimated, waypoints, scale, ...forwardedProps } = this.props; + const { + isAnimated, waypoints, scale, ...forwardedProps + } = this.props; const { thickness, waypointsMap } = this.state; if (!isAnimated) { diff --git a/client/app/scripts/charts/edge.js b/client/app/scripts/charts/edge.js index 276f2aa09..86bbd3b2f 100644 --- a/client/app/scripts/charts/edge.js +++ b/client/app/scripts/charts/edge.js @@ -14,7 +14,9 @@ class Edge extends React.Component { } render() { - const { id, path, highlighted, focused, thickness, source, target } = this.props; + const { + id, path, highlighted, focused, thickness, source, target + } = this.props; const shouldRenderMarker = (focused || highlighted) && (source !== target); const className = classNames('edge', { highlighted }); diff --git a/client/app/scripts/charts/node-container.js b/client/app/scripts/charts/node-container.js index 2d8198233..f8d9c389a 100644 --- a/client/app/scripts/charts/node-container.js +++ b/client/app/scripts/charts/node-container.js @@ -13,7 +13,9 @@ const transformedNode = (otherProps, { x, y, k }) => ( export default class NodeContainer extends React.PureComponent { render() { - const { dx, dy, isAnimated, scale, ...forwardedProps } = this.props; + const { + dx, dy, isAnimated, scale, ...forwardedProps + } = this.props; if (!isAnimated) { // Show static node for optimized rendering diff --git a/client/app/scripts/charts/node-shapes.js b/client/app/scripts/charts/node-shapes.js index 42d7b3e3d..2fb22e832 100644 --- a/client/app/scripts/charts/node-shapes.js +++ b/client/app/scripts/charts/node-shapes.js @@ -23,7 +23,9 @@ import { import { encodeIdAttribute } from '../utils/dom-utils'; -function NodeShape(shapeType, shapeElement, shapeProps, { id, highlighted, color, metric }) { +function NodeShape(shapeType, shapeElement, shapeProps, { + id, highlighted, color, metric +}) { const { height, hasMetric, formattedValue } = getMetricValue(metric); const className = classNames('shape', `shape-${shapeType}`, { metrics: hasMetric }); const metricStyle = { fill: getMetricColor(metric) }; diff --git a/client/app/scripts/charts/node.js b/client/app/scripts/charts/node.js index b18664585..34583ce81 100644 --- a/client/app/scripts/charts/node.js +++ b/client/app/scripts/charts/node.js @@ -103,8 +103,10 @@ class Node extends React.Component { } render() { - const { focused, highlighted, networks, pseudo, rank, label, transform, - exportingGraph, showingNetworks, stack, id, metric } = this.props; + const { + focused, highlighted, networks, pseudo, rank, label, transform, + exportingGraph, showingNetworks, stack, id, metric + } = this.props; const { hovered } = this.state; const color = getNodeColor(rank, label, pseudo); diff --git a/client/app/scripts/charts/nodes-error.js b/client/app/scripts/charts/nodes-error.js index 69b495193..5cfa6ab1a 100644 --- a/client/app/scripts/charts/nodes-error.js +++ b/client/app/scripts/charts/nodes-error.js @@ -1,7 +1,9 @@ import React from 'react'; import classnames from 'classnames'; -const NodesError = ({ children, faIconClass, hidden, mainClassName = 'nodes-chart-error'}) => { +const NodesError = ({ + children, faIconClass, hidden, mainClassName = 'nodes-chart-error' +}) => { const className = classnames(mainClassName, { hide: hidden }); diff --git a/client/app/scripts/charts/nodes-grid.js b/client/app/scripts/charts/nodes-grid.js index aae3abf3f..4b583284b 100644 --- a/client/app/scripts/charts/nodes-grid.js +++ b/client/app/scripts/charts/nodes-grid.js @@ -58,7 +58,9 @@ function getColumns(nodes) { } -function renderIdCell({ rank, label, labelMinor, pseudo }) { +function renderIdCell({ + rank, label, labelMinor, pseudo +}) { const showSubLabel = Boolean(pseudo) && labelMinor; const title = showSubLabel ? `${label} (${labelMinor})` : label; const iconStyle = { @@ -101,8 +103,10 @@ class NodesGrid extends React.Component { } render() { - const { nodes, height, gridSortedBy, gridSortedDesc, canvasMargins, - searchNodeMatches, searchQuery } = this.props; + const { + nodes, height, gridSortedBy, gridSortedDesc, canvasMargins, + searchNodeMatches, searchQuery + } = this.props; const cmpStyle = { height, marginTop: canvasMargins.top, diff --git a/client/app/scripts/components/app.js b/client/app/scripts/components/app.js index 6f8b6ee05..08f2f1fe6 100644 --- a/client/app/scripts/components/app.js +++ b/client/app/scripts/components/app.js @@ -170,9 +170,11 @@ class App extends React.Component { } render() { - const { isTableViewMode, isGraphViewMode, isResourceViewMode, showingDetails, + const { + isTableViewMode, isGraphViewMode, isResourceViewMode, showingDetails, showingHelp, showingNetworkSelector, showingTroubleshootingMenu, - timeTravelTransitioning, showingTimeTravel } = this.props; + timeTravelTransitioning, showingTimeTravel + } = this.props; const className = classNames('scope-app', { 'time-travel-open': showingTimeTravel }); const isIframe = window !== window.top; diff --git a/client/app/scripts/components/debug-toolbar.js b/client/app/scripts/components/debug-toolbar.js index 536a710a1..9681d8279 100644 --- a/client/app/scripts/components/debug-toolbar.js +++ b/client/app/scripts/components/debug-toolbar.js @@ -265,7 +265,9 @@ class DebugToolbar extends React.Component { addInternetNode() { setTimeout(() => { this.asyncDispatch(receiveNodesDelta({ - add: [{id: INTERNET, label: INTERNET, pseudo: true, labelMinor: 'Outgoing packets', shape: 'cloud'}] + add: [{ + id: INTERNET, label: INTERNET, pseudo: true, labelMinor: 'Outgoing packets', shape: 'cloud' + }] })); }, 0); } diff --git a/client/app/scripts/components/footer.js b/client/app/scripts/components/footer.js index a7a37a5c3..595c2bd78 100644 --- a/client/app/scripts/components/footer.js +++ b/client/app/scripts/components/footer.js @@ -34,7 +34,9 @@ class Footer extends React.Component { } render() { - const { hostname, version, versionUpdate, contrastMode } = this.props; + const { + hostname, version, versionUpdate, contrastMode + } = this.props; const otherContrastModeTitle = contrastMode ? 'Switch to normal contrast' : 'Switch to high contrast'; diff --git a/client/app/scripts/components/help-panel.js b/client/app/scripts/components/help-panel.js index 12b243f53..8510ee6a9 100644 --- a/client/app/scripts/components/help-panel.js +++ b/client/app/scripts/components/help-panel.js @@ -150,7 +150,9 @@ function renderFieldsPanel(currentTopologyName, searchableFields) { } -function HelpPanel({ currentTopologyName, searchableFields, onClickClose, canvasMargins }) { +function HelpPanel({ + currentTopologyName, searchableFields, onClickClose, canvasMargins +}) { return (
diff --git a/client/app/scripts/components/matched-text.js b/client/app/scripts/components/matched-text.js index 60d50e681..368af639e 100644 --- a/client/app/scripts/components/matched-text.js +++ b/client/app/scripts/components/matched-text.js @@ -80,7 +80,9 @@ function truncateChunks(chunks, text, maxLength) { */ export default class MatchedText extends React.PureComponent { render() { - const { match, text, truncate, maxLength } = this.props; + const { + match, text, truncate, maxLength + } = this.props; const showFullValue = !truncate || (match && (match.start + match.length) > truncate); const displayText = showFullValue ? text : text.slice(0, truncate); diff --git a/client/app/scripts/components/node-details.js b/client/app/scripts/components/node-details.js index 1e8114126..fad4a2a3f 100644 --- a/client/app/scripts/components/node-details.js +++ b/client/app/scripts/components/node-details.js @@ -158,7 +158,9 @@ class NodeDetails extends React.Component { } renderDetails() { - const { details, nodeControlStatus, nodeMatches = makeMap(), topologyId } = this.props; + const { + details, nodeControlStatus, nodeMatches = makeMap(), topologyId + } = this.props; const showControls = details.controls && details.controls.length > 0; const nodeColor = getNodeColorDark(details.rank, details.label, details.pseudo); const {error, pending} = nodeControlStatus ? nodeControlStatus.toJS() : {}; diff --git a/client/app/scripts/components/node-details/node-details-controls.js b/client/app/scripts/components/node-details/node-details-controls.js index 9c6d828c7..4604512de 100644 --- a/client/app/scripts/components/node-details/node-details-controls.js +++ b/client/app/scripts/components/node-details/node-details-controls.js @@ -3,7 +3,9 @@ import { sortBy } from 'lodash'; import NodeDetailsControlButton from './node-details-control-button'; -export default function NodeDetailsControls({controls, error, nodeId, pending}) { +export default function NodeDetailsControls({ + controls, error, nodeId, pending +}) { let spinnerClassName = 'fa fa-circle-o-notch fa-spin'; if (pending) { spinnerClassName += ' node-details-controls-spinner'; 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 45a45b4fd..6757dd61e 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 @@ -63,7 +63,9 @@ class NodeDetailsHealthLinkItem extends React.Component { } render() { - const { id, url, pausedAt, ...props } = this.props; + const { + id, url, pausedAt, ...props + } = this.props; const metricColor = getMetricColor(id); const labelColor = this.state.hovered && !props.valueEmpty && darkenColor(metricColor); diff --git a/client/app/scripts/components/node-details/node-details-table-node-metric-link.js b/client/app/scripts/components/node-details/node-details-table-node-metric-link.js index 2b6251867..3749fce82 100644 --- a/client/app/scripts/components/node-details/node-details-table-node-metric-link.js +++ b/client/app/scripts/components/node-details/node-details-table-node-metric-link.js @@ -17,7 +17,9 @@ class NodeDetailsTableNodeMetricLink extends React.Component { } render() { - const { url, style, value, valueEmpty } = this.props; + const { + url, style, value, valueEmpty + } = this.props; return ( h.id === sortedBy); diff --git a/client/app/scripts/components/nodes-resources/node-resources-layer.js b/client/app/scripts/components/nodes-resources/node-resources-layer.js index cb4eacc63..96a47f7aa 100644 --- a/client/app/scripts/components/nodes-resources/node-resources-layer.js +++ b/client/app/scripts/components/nodes-resources/node-resources-layer.js @@ -12,7 +12,9 @@ import { class NodesResourcesLayer extends React.Component { render() { - const { layerVerticalPosition, topologyId, transform, layoutNodes } = this.props; + const { + layerVerticalPosition, topologyId, transform, layoutNodes + } = this.props; return ( diff --git a/client/app/scripts/components/nodes-resources/node-resources-metric-box-info.js b/client/app/scripts/components/nodes-resources/node-resources-metric-box-info.js index e2bbfb5a6..b4e405080 100644 --- a/client/app/scripts/components/nodes-resources/node-resources-metric-box-info.js +++ b/client/app/scripts/components/nodes-resources/node-resources-metric-box-info.js @@ -3,8 +3,10 @@ import React from 'react'; export default class NodeResourcesMetricBoxInfo extends React.Component { humanizedMetricInfo() { - const { humanizedTotalCapacity, humanizedAbsoluteConsumption, - humanizedRelativeConsumption, showCapacity, format } = this.props.metricSummary.toJS(); + const { + humanizedTotalCapacity, humanizedAbsoluteConsumption, + humanizedRelativeConsumption, showCapacity, format + } = this.props.metricSummary.toJS(); const showExtendedInfo = showCapacity && format !== 'percent'; return ( 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 fa48632db..dfde7eccf 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 @@ -28,7 +28,9 @@ import { // down to this component, so a lot of stuff gets rerendered/recalculated on every zoom action. // On the other hand, this enables us to easily leave out the nodes that are not in the viewport. const transformedDimensions = (props) => { - const { width, height, x, y } = applyTransform(props.transform, props); + const { + width, height, x, y + } = applyTransform(props.transform, props); // Trim the beginning of the resource box just after the layer topology // name to the left and the viewport width to the right. That enables us @@ -79,7 +81,9 @@ class NodeResourcesMetricBox extends React.Component { } defaultRectProps(relativeHeight = 1) { - const { x, y, width, height } = this.state; + const { + x, y, width, height + } = this.state; const translateY = height * (1 - relativeHeight); return { transform: `translate(0, ${translateY})`, @@ -94,7 +98,9 @@ class NodeResourcesMetricBox extends React.Component { render() { const { x, y, width } = this.state; - const { id, selectedNodeId, label, color, metricSummary } = this.props; + const { + id, selectedNodeId, label, color, metricSummary + } = this.props; const { showCapacity, relativeConsumption, type } = metricSummary.toJS(); const opacity = (selectedNodeId && selectedNodeId !== id) ? 0.35 : 1; diff --git a/client/app/scripts/components/nodes.js b/client/app/scripts/components/nodes.js index 591829c01..e5933858c 100644 --- a/client/app/scripts/components/nodes.js +++ b/client/app/scripts/components/nodes.js @@ -52,8 +52,10 @@ class Nodes extends React.Component { } render() { - const { topologiesLoaded, nodesLoaded, topologies, currentTopology, isGraphViewMode, - isTableViewMode, isResourceViewMode } = this.props; + const { + topologiesLoaded, nodesLoaded, topologies, currentTopology, isGraphViewMode, + isTableViewMode, isResourceViewMode + } = this.props; // TODO: Rename view mode components. return ( diff --git a/client/app/scripts/components/plugins.js b/client/app/scripts/components/plugins.js index d5edd3d84..b5e6bd1d7 100644 --- a/client/app/scripts/components/plugins.js +++ b/client/app/scripts/components/plugins.js @@ -5,7 +5,9 @@ import classNames from 'classnames'; import Tooltip from './tooltip'; -const Plugin = ({id, label, description, status}) => { +const Plugin = ({ + id, label, description, status +}) => { const error = status !== 'ok'; const className = classNames({ error }); const tip = (Description: {description}
Status: {status}); diff --git a/client/app/scripts/components/search.js b/client/app/scripts/components/search.js index 9641473c6..1965b4216 100644 --- a/client/app/scripts/components/search.js +++ b/client/app/scripts/components/search.js @@ -126,8 +126,10 @@ class Search extends React.Component { } render() { - const { nodes, pinnedSearches, searchFocused, searchMatchCountByTopology, - isResourceViewMode, searchQuery, topologiesLoaded, inputId = 'search' } = this.props; + const { + nodes, pinnedSearches, searchFocused, searchMatchCountByTopology, + isResourceViewMode, searchQuery, topologiesLoaded, inputId = 'search' + } = this.props; const hidden = !topologiesLoaded || isResourceViewMode; const disabled = this.props.isTopologyNodeCountZero && !hidden; const matchCount = searchMatchCountByTopology @@ -188,5 +190,7 @@ export default connect( searchQuery: state.get('searchQuery'), searchMatchCountByTopology: searchMatchCountByTopologySelector(state), }), - { blurSearch, doSearch, focusSearch, pinSearch, toggleHelp } + { + blurSearch, doSearch, focusSearch, pinSearch, toggleHelp + } )(Search); diff --git a/client/app/scripts/components/show-more.js b/client/app/scripts/components/show-more.js index e22f97abc..15868ef62 100644 --- a/client/app/scripts/components/show-more.js +++ b/client/app/scripts/components/show-more.js @@ -12,7 +12,9 @@ export default class ShowMore extends React.PureComponent { } render() { - const { collection, notShown, expanded, hideNumber } = this.props; + const { + collection, notShown, expanded, hideNumber + } = this.props; const showLimitAction = collection && (expanded || notShown > 0); const limitActionText = !hideNumber && !expanded && notShown > 0 ? `+${notShown}` : ''; const limitActionIcon = !expanded && notShown > 0 ? 'fa fa-caret-down' : 'fa fa-caret-up'; diff --git a/client/app/scripts/components/sparkline.js b/client/app/scripts/components/sparkline.js index 898bd5f41..154d7ba6f 100644 --- a/client/app/scripts/components/sparkline.js +++ b/client/app/scripts/components/sparkline.js @@ -75,7 +75,9 @@ export default class Sparkline extends React.Component { const title = `Last ${Math.round((lastDate - firstDate) / 1000)} seconds, ` + `${data.length} samples, min: ${min}, max: ${max}, mean: ${mean}`; - return {title, lastX, lastY, data}; + return { + title, lastX, lastY, data + }; } getEmptyGraphData() { diff --git a/client/app/scripts/components/status.js b/client/app/scripts/components/status.js index 3a0b11288..b331fbbc4 100644 --- a/client/app/scripts/components/status.js +++ b/client/app/scripts/components/status.js @@ -6,7 +6,9 @@ import { isPausedSelector } from '../selectors/time-travel'; class Status extends React.Component { render() { - const { errorUrl, topologiesLoaded, filteredNodeCount, topology, websocketClosed } = this.props; + const { + errorUrl, topologiesLoaded, filteredNodeCount, topology, websocketClosed + } = this.props; let title = ''; let text = 'Trying to reconnect...'; diff --git a/client/app/scripts/components/time-control.js b/client/app/scripts/components/time-control.js index 62edd37ae..9e33c3e7c 100644 --- a/client/app/scripts/components/time-control.js +++ b/client/app/scripts/components/time-control.js @@ -61,8 +61,10 @@ class TimeControl extends React.Component { } render() { - const { showingTimeTravel, pausedAt, timeTravelTransitioning, topologiesLoaded, - hasHistoricReports } = this.props; + const { + showingTimeTravel, pausedAt, timeTravelTransitioning, topologiesLoaded, + hasHistoricReports + } = this.props; const isPausedNow = pausedAt && !showingTimeTravel; const isTimeTravelling = showingTimeTravel; diff --git a/client/app/scripts/components/zoomable-canvas.js b/client/app/scripts/components/zoomable-canvas.js index 12dee90d5..0a4f9fbcb 100644 --- a/client/app/scripts/components/zoomable-canvas.js +++ b/client/app/scripts/components/zoomable-canvas.js @@ -88,7 +88,9 @@ class ZoomableCanvas extends React.Component { handleZoomControlAction(scale) { // Get the center of the SVG and zoom around it. - const { top, bottom, left, right } = this.svg.node().getBoundingClientRect(); + const { + top, bottom, left, right + } = this.svg.node().getBoundingClientRect(); const centerOfCanvas = { x: (left + right) / 2, y: (top + bottom) / 2, @@ -164,7 +166,8 @@ class ZoomableCanvas extends React.Component { handlePan() { let state = this.state; // Apply the translation respecting the boundaries. - state = this.clampedTranslation({ ...state, + state = this.clampedTranslation({ + ...state, translateX: this.state.translateX + d3Event.dx, translateY: this.state.translateY + d3Event.dy, }); @@ -185,8 +188,12 @@ class ZoomableCanvas extends React.Component { } clampedTranslation(state) { - const { width, height, canvasMargins, boundContent, layoutLimits } = this.props; - const { contentMinX, contentMaxX, contentMinY, contentMaxY } = layoutLimits.toJS(); + const { + width, height, canvasMargins, boundContent, layoutLimits + } = this.props; + const { + contentMinX, contentMaxX, contentMinY, contentMaxY + } = layoutLimits.toJS(); if (boundContent) { // If the content is required to be bounded in any way, the translation will @@ -239,7 +246,8 @@ class ZoomableCanvas extends React.Component { // translation limits). Adapted from: // https://github.com/d3/d3-zoom/blob/807f02c7a5fe496fbd08cc3417b62905a8ce95fa/src/zoom.js#L251 const inversePosition = inverseTransform(this.state, position); - state = this.clampedTranslation({ ...state, + state = this.clampedTranslation({ + ...state, translateX: position.x - (inversePosition.x * scaleX), translateY: position.y - (inversePosition.y * scaleY), }); diff --git a/client/app/scripts/constants/styles.js b/client/app/scripts/constants/styles.js index 9d312ac9c..54781bacd 100644 --- a/client/app/scripts/constants/styles.js +++ b/client/app/scripts/constants/styles.js @@ -38,9 +38,15 @@ export const NODE_BASE_SIZE = 100; export const EDGE_WAYPOINTS_CAP = 10; export const CANVAS_MARGINS = { - [GRAPH_VIEW_MODE]: { top: 160, left: 80, right: 80, bottom: 150 }, - [TABLE_VIEW_MODE]: { top: 220, left: 40, right: 40, bottom: 30 }, - [RESOURCE_VIEW_MODE]: { top: 140, left: 210, right: 40, bottom: 150 }, + [GRAPH_VIEW_MODE]: { + top: 160, left: 80, right: 80, bottom: 150 + }, + [TABLE_VIEW_MODE]: { + top: 220, left: 40, right: 40, bottom: 30 + }, + [RESOURCE_VIEW_MODE]: { + top: 140, left: 210, right: 40, bottom: 150 + }, }; // Node details table constants diff --git a/client/app/scripts/reducers/__tests__/root-test.js b/client/app/scripts/reducers/__tests__/root-test.js index 831f464a2..99cb27b92 100644 --- a/client/app/scripts/reducers/__tests__/root-test.js +++ b/client/app/scripts/reducers/__tests__/root-test.js @@ -427,7 +427,8 @@ describe('RootReducer', () => { RouteAction.state = { topologyId: 'topo1', selectedNodeId: null, - topologyOptions: {topo1: {option1: 'on'}}}; + topologyOptions: {topo1: {option1: 'on'}} + }; let nextState = initialState; nextState = reducer(nextState, RouteAction); @@ -445,7 +446,8 @@ describe('RootReducer', () => { RouteAction.state = { topologyId: 'topo1', selectedNodeId: null, - topologyOptions: null}; + topologyOptions: null + }; let nextState = initialState; nextState = reducer(nextState, RouteAction); nextState = reducer(nextState, ReceiveTopologiesAction); diff --git a/client/app/scripts/reducers/root.js b/client/app/scripts/reducers/root.js index 6b0804af0..c669fa6dc 100644 --- a/client/app/scripts/reducers/root.js +++ b/client/app/scripts/reducers/root.js @@ -560,7 +560,8 @@ export function rootReducer(state = initialState, action) { // disregard if node is not selected anymore if (state.hasIn(['nodeDetails', action.details.id])) { - state = state.updateIn(['nodeDetails', action.details.id], obj => ({ ...obj, + state = state.updateIn(['nodeDetails', action.details.id], obj => ({ + ...obj, notFound: false, timestamp: action.requestTimestamp, details: action.details, @@ -636,7 +637,8 @@ export function rootReducer(state = initialState, action) { case ActionTypes.RECEIVE_NOT_FOUND: { if (state.hasIn(['nodeDetails', action.nodeId])) { - state = state.updateIn(['nodeDetails', action.nodeId], obj => ({ ...obj, + state = state.updateIn(['nodeDetails', action.nodeId], obj => ({ + ...obj, timestamp: action.requestTimestamp, notFound: true, })); diff --git a/client/app/scripts/selectors/canvas.js b/client/app/scripts/selectors/canvas.js index 4cd864d3c..39854af4e 100644 --- a/client/app/scripts/selectors/canvas.js +++ b/client/app/scripts/selectors/canvas.js @@ -11,7 +11,9 @@ export const canvasMarginsSelector = createSelector( [ state => state.get('topologyViewMode'), ], - viewMode => CANVAS_MARGINS[viewMode] || { top: 0, left: 0, right: 0, bottom: 0 } + viewMode => CANVAS_MARGINS[viewMode] || { + top: 0, left: 0, right: 0, bottom: 0 + } ); export const canvasWidthSelector = createSelector( diff --git a/client/app/scripts/selectors/graph-view/layout.js b/client/app/scripts/selectors/graph-view/layout.js index 399564f5a..176324f25 100644 --- a/client/app/scripts/selectors/graph-view/layout.js +++ b/client/app/scripts/selectors/graph-view/layout.js @@ -28,7 +28,9 @@ const translationToViewportCenterSelector = createSelector( graphZoomStateSelector, ], (centerX, centerY, zoomState) => { - const { scaleX, scaleY, translateX, translateY } = zoomState.toJS(); + const { + scaleX, scaleY, translateX, translateY + } = zoomState.toJS(); return { x: (-translateX + centerX) / scaleX, y: (-translateY + centerY) / scaleY, diff --git a/client/app/scripts/selectors/graph-view/zoom.js b/client/app/scripts/selectors/graph-view/zoom.js index c9fcee219..3b2164c22 100644 --- a/client/app/scripts/selectors/graph-view/zoom.js +++ b/client/app/scripts/selectors/graph-view/zoom.js @@ -22,7 +22,9 @@ const graphBoundingRectangleSelector = createSelector( const xMax = graphNodes.map(n => n.get('x') + NODE_BASE_SIZE).max(); const yMax = graphNodes.map(n => n.get('y') + NODE_BASE_SIZE).max(); - return makeMap({ xMin, yMin, xMax, yMax }); + return makeMap({ + xMin, yMin, xMax, yMax + }); } ); @@ -37,7 +39,9 @@ export const graphDefaultZoomSelector = createSelector( (boundingRectangle, canvasMargins, width, height) => { if (!boundingRectangle) return makeMap(); - const { xMin, xMax, yMin, yMax } = boundingRectangle.toJS(); + const { + xMin, xMax, yMin, yMax + } = boundingRectangle.toJS(); const xFactor = width / (xMax - xMin); const yFactor = height / (yMax - yMin); @@ -65,7 +69,9 @@ export const graphLimitsSelector = createSelector( (boundingRectangle) => { if (!boundingRectangle) return makeMap(); - const { xMin, xMax, yMin, yMax } = boundingRectangle.toJS(); + const { + xMin, xMax, yMin, yMax + } = boundingRectangle.toJS(); return makeMap({ minScale: MIN_SCALE, diff --git a/client/app/scripts/selectors/resource-view/zoom.js b/client/app/scripts/selectors/resource-view/zoom.js index 41c1bb8e4..58a7616b4 100644 --- a/client/app/scripts/selectors/resource-view/zoom.js +++ b/client/app/scripts/selectors/resource-view/zoom.js @@ -32,7 +32,9 @@ const resourceNodesBoundingRectangleSelector = createSelector( const xMax = flattenedNodes.map(n => n.get('offset') + n.get('width')).max(); const yMax = verticalPositions.toList().max() + RESOURCES_LAYER_HEIGHT; - return makeMap({ xMin, xMax, yMin, yMax }); + return makeMap({ + xMin, xMax, yMin, yMax + }); } ); @@ -47,7 +49,9 @@ export const resourcesDefaultZoomSelector = createSelector( (boundingRectangle, canvasMargins, width, height) => { if (!boundingRectangle) return makeMap(); - const { xMin, xMax, yMin, yMax } = boundingRectangle.toJS(); + const { + xMin, xMax, yMin, yMax + } = boundingRectangle.toJS(); // The default scale takes all the available horizontal space and 70% of the vertical space. const scaleX = (width / (xMax - xMin)) * 1.0; @@ -76,7 +80,9 @@ export const resourcesLimitsSelector = createSelector( (defaultZoom, boundingRectangle, minNodeWidth, width) => { if (defaultZoom.isEmpty()) return makeMap(); - const { xMin, xMax, yMin, yMax } = boundingRectangle.toJS(); + const { + xMin, xMax, yMin, yMax + } = boundingRectangle.toJS(); return makeMap({ // Maximal zoom is such that the smallest box takes the whole canvas. diff --git a/client/app/scripts/utils/__tests__/layouter-utils-test.js b/client/app/scripts/utils/__tests__/layouter-utils-test.js index e0ed8fc2d..1edc11dd3 100644 --- a/client/app/scripts/utils/__tests__/layouter-utils-test.js +++ b/client/app/scripts/utils/__tests__/layouter-utils-test.js @@ -15,10 +15,18 @@ describe('LayouterUtils', () => { c: {} }); expect(initEdgesFromNodes(input).toJS()).toEqual({ - [edge('a', 'b')]: { id: edge('a', 'b'), source: 'a', target: 'b', value: 1 }, - [edge('a', 'c')]: { id: edge('a', 'c'), source: 'a', target: 'c', value: 1 }, - [edge('b', 'a')]: { id: edge('b', 'a'), source: 'b', target: 'a', value: 1 }, - [edge('b', 'b')]: { id: edge('b', 'b'), source: 'b', target: 'b', value: 1 }, + [edge('a', 'b')]: { + id: edge('a', 'b'), source: 'a', target: 'b', value: 1 + }, + [edge('a', 'c')]: { + id: edge('a', 'c'), source: 'a', target: 'c', value: 1 + }, + [edge('b', 'a')]: { + id: edge('b', 'a'), source: 'b', target: 'a', value: 1 + }, + [edge('b', 'b')]: { + id: edge('b', 'b'), source: 'b', target: 'b', value: 1 + }, }); }); }); diff --git a/client/app/scripts/utils/__tests__/math-utils-test.js b/client/app/scripts/utils/__tests__/math-utils-test.js index 70481c039..7faa160ef 100644 --- a/client/app/scripts/utils/__tests__/math-utils-test.js +++ b/client/app/scripts/utils/__tests__/math-utils-test.js @@ -37,9 +37,15 @@ describe('MathUtils', () => { expect(f(fromJS({...entryA, ...entryB}))).toBe(30); expect(f(fromJS({...entryA, ...entryC}))).toBe(40); expect(f(fromJS({...entryB, ...entryC}))).toBe(50); - expect(f(fromJS({...entryA, ...entryB, ...entryC, ...entryD}))).toBe(30); - expect(f(fromJS({...entryA, ...entryB, ...entryC, ...entryD, ...entryE}))).toBe(1); - expect(f(fromJS({...entryA, ...entryB, ...entryC, ...entryD, ...entryF}))).toBe(0); + expect(f(fromJS({ + ...entryA, ...entryB, ...entryC, ...entryD + }))).toBe(30); + expect(f(fromJS({ + ...entryA, ...entryB, ...entryC, ...entryD, ...entryE + }))).toBe(1); + expect(f(fromJS({ + ...entryA, ...entryB, ...entryC, ...entryD, ...entryF + }))).toBe(0); }); }); }); diff --git a/client/app/scripts/utils/__tests__/search-utils-test.js b/client/app/scripts/utils/__tests__/search-utils-test.js index affaf9cec..61d09ff9e 100644 --- a/client/app/scripts/utils/__tests__/search-utils-test.js +++ b/client/app/scripts/utils/__tests__/search-utils-test.js @@ -140,7 +140,9 @@ describe('SearchUtils', () => { ); expect(matches.size).toBe(1); expect(matches.getIn(['node1', 'field1'])).toBeDefined(); - const {text, label, start, length} = matches.getIn(['node1', 'field1']); + const { + text, label, start, length + } = matches.getIn(['node1', 'field1']); expect(text).toBe('samevalue'); expect(label).toBe('some label'); expect(start).toBe(0); diff --git a/client/app/scripts/utils/layouter-utils.js b/client/app/scripts/utils/layouter-utils.js index a3a5ce523..cbae050f3 100644 --- a/client/app/scripts/utils/layouter-utils.js +++ b/client/app/scripts/utils/layouter-utils.js @@ -26,7 +26,9 @@ export function initEdgesFromNodes(nodes) { // The direction source->target is important since dagre takes // directionality into account when calculating the layout. const edgeId = constructEdgeId(source, target); - const edge = makeMap({ id: edgeId, value: 1, source, target }); + const edge = makeMap({ + id: edgeId, value: 1, source, target + }); edges = edges.set(edgeId, edge); } }); diff --git a/client/app/scripts/utils/node-shape-utils.js b/client/app/scripts/utils/node-shape-utils.js index 1f3f4c255..77f36e305 100644 --- a/client/app/scripts/utils/node-shape-utils.js +++ b/client/app/scripts/utils/node-shape-utils.js @@ -22,7 +22,9 @@ function curvedUnitPolygonPath(n) { export const circleShapeProps = { r: 1 }; export const triangleShapeProps = { d: curvedUnitPolygonPath(3) }; -export const squareShapeProps = { width: 1.8, height: 1.8, rx: 0.4, ry: 0.4, x: -0.9, y: -0.9 }; +export const squareShapeProps = { + width: 1.8, height: 1.8, rx: 0.4, ry: 0.4, x: -0.9, y: -0.9 +}; export const pentagonShapeProps = { d: curvedUnitPolygonPath(5) }; export const hexagonShapeProps = { d: curvedUnitPolygonPath(6) }; export const heptagonShapeProps = { d: curvedUnitPolygonPath(7) }; diff --git a/client/app/scripts/utils/search-utils.js b/client/app/scripts/utils/search-utils.js index c6dad9219..80c98593d 100644 --- a/client/app/scripts/utils/search-utils.js +++ b/client/app/scripts/utils/search-utils.js @@ -74,7 +74,9 @@ function findNodeMatch(nodeMatches, keyPath, text, query, prefix, label, truncat const index = text.search(queryRe); nodeMatches = nodeMatches.setIn( keyPath, - {text, label, start: index, length: firstMatch.length, truncate} + { + text, label, start: index, length: firstMatch.length, truncate + } ); } } @@ -121,7 +123,9 @@ function findNodeMatchMetric(nodeMatches, keyPath, fieldValue, fieldLabel, metri return nodeMatches; } -export function searchNode(node, { prefix, query, metric, comp, value }) { +export function searchNode(node, { + prefix, query, metric, comp, value +}) { let nodeMatches = makeMap(); if (query) { diff --git a/client/app/scripts/utils/transform-utils.js b/client/app/scripts/utils/transform-utils.js index cc1834dd6..68d572115 100644 --- a/client/app/scripts/utils/transform-utils.js +++ b/client/app/scripts/utils/transform-utils.js @@ -4,7 +4,9 @@ const applyTranslateY = ({ scaleY = 1, translateY = 0 }, y) => (y * scaleY) + tr const applyScaleX = ({ scaleX = 1 }, width) => width * scaleX; const applyScaleY = ({ scaleY = 1 }, height) => height * scaleY; -export const applyTransform = (transform, { width = 0, height = 0, x, y }) => ({ +export const applyTransform = (transform, { + width = 0, height = 0, x, y +}) => ({ x: applyTranslateX(transform, x), y: applyTranslateY(transform, y), width: applyScaleX(transform, width), @@ -17,7 +19,9 @@ const inverseTranslateY = ({ scaleY = 1, translateY = 0 }, y) => (y - translateY const inverseScaleX = ({ scaleX = 1 }, width) => width / scaleX; const inverseScaleY = ({ scaleY = 1 }, height) => height / scaleY; -export const inverseTransform = (transform, { width = 0, height = 0, x, y }) => ({ +export const inverseTransform = (transform, { + width = 0, height = 0, x, y +}) => ({ x: inverseTranslateX(transform, x), y: inverseTranslateY(transform, y), width: inverseScaleX(transform, width), @@ -25,6 +29,8 @@ export const inverseTransform = (transform, { width = 0, height = 0, x, y }) => }); -export const transformToString = ({ translateX = 0, translateY = 0, scaleX = 1, scaleY = 1 }) => ( +export const transformToString = ({ + translateX = 0, translateY = 0, scaleX = 1, scaleY = 1 +}) => ( `translate(${translateX},${translateY}) scale(${scaleX},${scaleY})` );