Update eslint dependencies

client/.eslintrc

@@ -36,5 +36,8 @@
     "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,
   }
 }

client/app/scripts/actions/app-actions.js

@@ -778,6 +778,7 @@ export function resetLocalViewState() {
   return (dispatch) => {
     dispatch({type: ActionTypes.RESET_LOCAL_VIEW_STATE});
     storageSet('scopeViewState', '');
+    // eslint-disable-next-line prefer-destructuring
     window.location.href = window.location.href.split('#')[0];
   };
 }

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({})
     }
@@ -184,7 +188,8 @@ describe('NodesLayout', () => {
   it('lays out initial nodeset in a rectangle', () => {
     const result = NodesLayout.doLayout(
       nodeSets.initial4.nodes,
-      nodeSets.initial4.edges);
+      nodeSets.initial4.edges
+    );
     // console.log('initial', result.get('nodes'));
     nodes = result.nodes.toJS();
 
@@ -199,7 +204,8 @@ describe('NodesLayout', () => {
   it('keeps nodes in rectangle after removing one edge', () => {
     let result = NodesLayout.doLayout(
       nodeSets.initial4.nodes,
-      nodeSets.initial4.edges);
+      nodeSets.initial4.edges
+    );
 
     options.cachedLayout = result;
     options.nodeCache = options.nodeCache.merge(result.nodes);
@@ -221,7 +227,8 @@ describe('NodesLayout', () => {
   it('keeps nodes in rectangle after removed edge reappears', () => {
     let result = NodesLayout.doLayout(
       nodeSets.initial4.nodes,
-      nodeSets.initial4.edges);
+      nodeSets.initial4.edges
+    );
 
     coords = getNodeCoordinates(result.nodes);
     options.cachedLayout = result;
@@ -252,7 +259,8 @@ describe('NodesLayout', () => {
   it('keeps nodes in rectangle after node disappears', () => {
     let result = NodesLayout.doLayout(
       nodeSets.initial4.nodes,
-      nodeSets.initial4.edges);
+      nodeSets.initial4.edges
+    );
 
     options.cachedLayout = result;
     options.nodeCache = options.nodeCache.merge(result.nodes);
@@ -273,7 +281,8 @@ describe('NodesLayout', () => {
   it('keeps nodes in rectangle after removed node reappears', () => {
     let result = NodesLayout.doLayout(
       nodeSets.initial4.nodes,
-      nodeSets.initial4.edges);
+      nodeSets.initial4.edges
+    );
 
     nodes = result.nodes.toJS();
 
@@ -313,7 +322,8 @@ describe('NodesLayout', () => {
   it('renders single nodes in a square', () => {
     const result = NodesLayout.doLayout(
       nodeSets.single3.nodes,
-      nodeSets.single3.edges);
+      nodeSets.single3.edges
+    );
 
     nodes = result.nodes.toJS();
 
@@ -404,7 +414,8 @@ describe('NodesLayout', () => {
     expect(NodesLayout.hasNewNodesOfExistingRank(
       nodeSets.rank6.nodes,
       nodeSets.rank6.edges,
-      result.nodes)).toBeTruthy();
+      result.nodes
+    )).toBeTruthy();
 
     result = NodesLayout.doLayout(
       nodeSets.rank6.nodes,

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) {
@@ -81,9 +83,14 @@ export default class EdgeContainer extends React.PureComponent {
       // 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.
       <Motion style={{ interpolatedThickness: weakSpring(thickness), ...waypointsMap.toJS() }}>
-        {({ interpolatedThickness, ...interpolatedWaypoints}) => transformedEdge(
-          forwardedProps, waypointsMapToArray(fromJS(interpolatedWaypoints)), interpolatedThickness
-        )}
+        {
+          ({ interpolatedThickness, ...interpolatedWaypoints}) =>
+            transformedEdge(
+              forwardedProps,
+              waypointsMapToArray(fromJS(interpolatedWaypoints)),
+              interpolatedThickness
+            )
+        }
       </Motion>
     );
   }

client/app/scripts/charts/edge.js

@@ -6,21 +6,23 @@ import { enterEdge, leaveEdge } from '../actions/app-actions';
 import { encodeIdAttribute, decodeIdAttribute } from '../utils/dom-utils';
 
 class Edge extends React.Component {
-
   constructor(props, context) {
     super(props, context);
     this.handleMouseEnter = this.handleMouseEnter.bind(this);
     this.handleMouseLeave = this.handleMouseLeave.bind(this);
   }
 
   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 });
 
     return (
       <g
-        id={encodeIdAttribute(id)} className={className}
+        id={encodeIdAttribute(id)}
+        className={className}
         onMouseEnter={this.handleMouseEnter}
         onMouseLeave={this.handleMouseLeave}
       >

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

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) };

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);

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

@@ -196,9 +196,14 @@ class NodesChartElements extends React.Component {
     const scale = (this.props.selectedScale || 1) * 100000;
     return (
       <rect
-        className={className} key="nodes-chart-overlay"
-        transform={`scale(${scale})`} fill="#fff"
-        x={-1} y={-1} width={2} height={2}
+        className={className}
+        key="nodes-chart-overlay"
+        transform={`scale(${scale})`}
+        fill="#fff"
+        x={-1}
+        y={-1}
+        width={2}
+        height={2}
       />
     );
   }
@@ -277,6 +282,4 @@ function mapStateToProps(state) {
   };
 }
 
-export default connect(
-  mapStateToProps
-)(NodesChartElements);
+export default connect(mapStateToProps)(NodesChartElements);

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

@@ -1,8 +1,9 @@
 import React from 'react';
 import classnames from 'classnames';
 
-export default function NodesError({children, faIconClass, hidden,
-                                   mainClassName = 'nodes-chart-error'}) {
+const NodesError = ({
+  children, faIconClass, hidden, mainClassName = 'nodes-chart-error'
+}) => {
   const className = classnames(mainClassName, {
     hide: hidden
   });
@@ -18,4 +19,6 @@ export default function NodesError({children, faIconClass, hidden,
       {children}
     </div>
   );
-}
+};
+
+export default NodesError;

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 = {
@@ -79,7 +81,6 @@ function renderIdCell({ rank, label, labelMinor, pseudo }) {
 
 
 class NodesGrid extends React.Component {
-
   constructor(props, context) {
     super(props, context);
 
@@ -101,8 +102,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,

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

@@ -88,7 +88,7 @@ function layoutSingleNodes(layout, opts) {
   const graphWidth = layout.graphWidth || layout.width;
   const aspectRatio = graphHeight ? graphWidth / graphHeight : 1;
 
-  let nodes = layout.nodes;
+  let { nodes } = layout;
 
   // 0-degree nodes
   const singleNodes = nodes.filter(node => node.get('degree') === 0);

client/app/scripts/components/__tests__/node-details-test.js

@@ -19,28 +19,31 @@ describe('NodeDetails', () => {
   });
 
   it('shows n/a when node was not found', () => {
-    const c = TestUtils.renderIntoDocument(
+    const c = TestUtils.renderIntoDocument((
       <Provider store={configureStore()}>
         <NodeDetails notFound />
       </Provider>
+    ));
+    const notFound = TestUtils.findRenderedDOMComponentWithClass(
+      c,
+      'node-details-header-notavailable'
     );
-    const notFound = TestUtils.findRenderedDOMComponentWithClass(c,
-      'node-details-header-notavailable');
     expect(notFound).toBeDefined();
   });
 
   it('show label of node with title', () => {
     nodes = nodes.set(nodeId, Immutable.fromJS({id: nodeId}));
     details = {label: 'Node 1'};
-    const c = TestUtils.renderIntoDocument(
+    const c = TestUtils.renderIntoDocument((
       <Provider store={configureStore()}>
         <NodeDetails
           nodes={nodes}
           topologyId="containers"
-          nodeId={nodeId} details={details}
-        />
+          nodeId={nodeId}
+          details={details}
+          />
       </Provider>
-    );
+    ));
 
     const title = TestUtils.findRenderedDOMComponentWithClass(c, 'node-details-header-label');
     expect(title.title).toBe('Node 1');

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;
@@ -192,9 +194,11 @@ class App extends React.Component {
             <TimeTravel />
             <div className="selectors">
               <div className="logo">
-                {!isIframe && <svg width="100%" height="100%" viewBox="0 0 1089 217">
-                  <Logo />
-                </svg>}
+                {!isIframe &&
+                  <svg width="100%" height="100%" viewBox="0 0 1089 217">
+                    <Logo />
+                  </svg>
+                }
               </div>
               <Search />
               <Topologies />
@@ -243,6 +247,4 @@ function mapStateToProps(state) {
   };
 }
 
-export default connect(
-  mapStateToProps
-)(App);
+export default connect(mapStateToProps)(App);

client/app/scripts/components/cloud-link.js

@@ -21,7 +21,7 @@ const CloudLink = ({ alwaysShow, ...props }) => (
   <CloudFeature alwaysShow={alwaysShow}>
     <LinkWrapper {...props} />
   </CloudFeature>
-    );
+);
 
 class LinkWrapper extends React.Component {
   constructor(props, context) {
@@ -44,7 +44,7 @@ class LinkWrapper extends React.Component {
     if (router && href[0] === '/') {
       router.push(href);
     } else {
-      location.href = href;
+      window.location.href = href;
     }
   }