Upgraded eslint, airbnb linting rules, and made trivial fixes

client/.eslintrc

@@ -12,6 +12,29 @@
     "react/jsx-closing-bracket-location": 0,
     "react/prefer-stateless-function": 0,
     "react/sort-comp": 0,
-    "react/prop-types": 0
+    "react/prop-types": 0,
+
+
+    "import/first": 0,
+    "import/prefer-default-export": 0,
+    "import/no-extraneous-dependencies": 0,
+    "import/no-named-as-default": 0,
+    "jsx-a11y/no-static-element-interactions": 0,
+    "jsx-a11y/label-has-for": 0,
+    "react/jsx-indent": 0,
+    "react/jsx-filename-extension": 0,
+    "react/jsx-first-prop-new-line": 0,
+    "react/jsx-no-target-blank": 0,
+    "react/no-find-dom-node": 0,
+    "react/no-string-refs": 0,
+    "react/self-closing-comp": 0,
+    "react/forbid-prop-types": 0,
+    "no-plusplus": 0,
+    "no-mixed-operators": 0,
+    "no-restricted-properties": 0,
+    "no-underscore-dangle": 0,
+    "arrow-parens": 0,
+    "class-methods-use-this": 0,
+    "global-require": 0,
   }
 }

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

@@ -39,7 +39,8 @@ export function sortOrderChanged(sortedBy, sortedDesc) {
   return (dispatch, getState) => {
     dispatch({
       type: ActionTypes.SORT_ORDER_CHANGED,
-      sortedBy, sortedDesc
+      sortedBy,
+      sortedDesc
     });
     updateRoute(getState);
   };

client/app/scripts/charts/node-shape-circle.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
-import {getMetricValue, getMetricColor, getClipPathDefinition} from '../utils/metric-utils.js';
-import {CANVAS_METRIC_FONT_SIZE} from '../constants/styles.js';
+import { getMetricValue, getMetricColor, getClipPathDefinition } from '../utils/metric-utils';
+import { CANVAS_METRIC_FONT_SIZE } from '../constants/styles';
 
 
 export default function NodeShapeCircle({id, highlighted, size, color, metric}) {

client/app/scripts/charts/node-shape-heptagon.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import classNames from 'classnames';
 import { line, curveCardinalClosed } from 'd3-shape';
-import { getMetricValue, getMetricColor, getClipPathDefinition } from '../utils/metric-utils.js';
-import { CANVAS_METRIC_FONT_SIZE } from '../constants/styles.js';
+import { getMetricValue, getMetricColor, getClipPathDefinition } from '../utils/metric-utils';
+import { CANVAS_METRIC_FONT_SIZE } from '../constants/styles';
 
 
 const spline = line()

client/app/scripts/charts/node-shape-hexagon.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import classNames from 'classnames';
 import { line, curveCardinalClosed } from 'd3-shape';
-import { getMetricValue, getMetricColor, getClipPathDefinition } from '../utils/metric-utils.js';
-import { CANVAS_METRIC_FONT_SIZE } from '../constants/styles.js';
+import { getMetricValue, getMetricColor, getClipPathDefinition } from '../utils/metric-utils';
+import { CANVAS_METRIC_FONT_SIZE } from '../constants/styles';
 
 
 const spline = line()

client/app/scripts/charts/node-shape-square.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
-import {getMetricValue, getMetricColor, getClipPathDefinition} from '../utils/metric-utils.js';
-import {CANVAS_METRIC_FONT_SIZE} from '../constants/styles.js';
+import { getMetricValue, getMetricColor, getClipPathDefinition } from '../utils/metric-utils';
+import { CANVAS_METRIC_FONT_SIZE } from '../constants/styles';
 
 
 export default function NodeShapeSquare({

client/app/scripts/components/app.js

@@ -3,13 +3,13 @@ import React from 'react';
 import { connect } from 'react-redux';
 
 import Logo from './logo';
-import Footer from './footer.js';
-import Sidebar from './sidebar.js';
+import Footer from './footer';
+import Sidebar from './sidebar';
 import HelpPanel from './help-panel';
 import Search from './search';
-import Status from './status.js';
-import Topologies from './topologies.js';
-import TopologyOptions from './topology-options.js';
+import Status from './status';
+import Topologies from './topologies';
+import TopologyOptions from './topology-options';
 import { getApiDetails, getTopologies } from '../utils/web-api-utils';
 import { focusSearch, pinNextMetric, hitBackspace, hitEnter, hitEsc, unpinMetric,
   selectMetric, toggleHelp, toggleGridMode } from '../actions/app-actions';
@@ -18,10 +18,8 @@ import Nodes from './nodes';
 import GridModeSelector from './grid-mode-selector';
 import MetricSelector from './metric-selector';
 import NetworkSelector from './networks-selector';
-import { getRouter } from '../utils/router-utils';
-import DebugToolbar, { showingDebugToolbar,
-  toggleDebugToolbar } from './debug-toolbar.js';
-import { getUrlState } from '../utils/router-utils';
+import DebugToolbar, { showingDebugToolbar, toggleDebugToolbar } from './debug-toolbar';
+import { getRouter, getUrlState } from '../utils/router-utils';
 import { getActiveTopologyOptions } from '../utils/topology-utils';
 
 const BACKSPACE_KEY_CODE = 8;

client/app/scripts/components/debug-toolbar.js

@@ -5,9 +5,7 @@ import { connect } from 'react-redux';
 import { sampleSize, sample, random, range, flattenDeep } from 'lodash';
 import { fromJS, Set as makeSet } from 'immutable';
 import { hsl } from 'd3-color';
-
 import debug from 'debug';
-const log = debug('scope:debug-panel');
 
 import ActionTypes from '../constants/action-types';
 import { receiveNodesDelta } from '../actions/app-actions';
@@ -29,7 +27,7 @@ voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occa
 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`;
 
 const sampleArray = (collection, n = 4) => sampleSize(collection, random(n));
-
+const log = debug('scope:debug-panel');
 
 const shapeTypes = {
   square: ['Process', 'Processes'],

client/app/scripts/components/footer.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import moment from 'moment';
 
-import Plugins from './plugins.js';
+import Plugins from './plugins';
 import { getUpdateBufferSize } from '../utils/update-buffer-utils';
 import { contrastModeUrl, isContrastMode } from '../utils/contrast-utils';
 import { clickDownloadGraph, clickForceRelayout, clickPauseUpdate,
@@ -106,6 +106,11 @@ function mapStateToProps(state) {
 
 export default connect(
   mapStateToProps,
-  { clickDownloadGraph, clickForceRelayout, clickPauseUpdate,
-    clickResumeUpdate, toggleHelp }
+  {
+    clickDownloadGraph,
+    clickForceRelayout,
+    clickPauseUpdate,
+    clickResumeUpdate,
+    toggleHelp
+  }
 )(Footer);

client/app/scripts/components/nodes.js

@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 import NodesChart from '../charts/nodes-chart';
 import NodesGrid from '../charts/nodes-grid';
 import NodesError from '../charts/nodes-error';
-import { DelayedShow } from '../utils/delayed-show';
+import DelayedShow from '../utils/delayed-show';
 import { Loading, getNodeType } from './loading';
 import { isTopologyEmpty } from '../utils/topology-utils';
 import { CANVAS_MARGINS } from '../constants/styles';
@@ -37,12 +37,12 @@ class Nodes extends React.Component {
       <NodesError faIconClass="fa-circle-thin" hidden={!show}>
         <div className="heading">Nothing to show. This can have any of these reasons:</div>
         <ul>
-          <li>We haven't received any reports from probes recently.
+          <li>We haven&apos;t received any reports from probes recently.
            Are the probes properly configured?</li>
-          <li>There are nodes, but they're currently hidden. Check the view options
+          <li>There are nodes, but they&apos;re currently hidden. Check the view options
            in the bottom-left if they allow for showing hidden nodes.</li>
-          <li>Containers view only: you're not running Docker,
-           or you don't have any containers.</li>
+          <li>Containers view only: you&apos;re not running Docker,
+           or you don&apos;t have any containers.</li>
         </ul>
       </NodesError>
     );

client/app/scripts/main.dev.js

@@ -11,8 +11,8 @@ import configureStore from './stores/configureStore.dev';
 import DevTools from './components/dev-tools';
 import Immutable from 'immutable';
 import installDevTools from 'immutable-devtools';
-installDevTools(Immutable);
 
+installDevTools(Immutable);
 const store = configureStore();
 
 function renderApp() {

client/app/scripts/reducers/root.js

@@ -230,7 +230,7 @@ export function rootReducer(state = initialState, action) {
     }
 
     case ActionTypes.CLICK_PAUSE_UPDATE: {
-      return state.set('updatePausedAt', new Date);
+      return state.set('updatePausedAt', new Date());
     }
 
     case ActionTypes.CLICK_RELATIVE: {

client/app/scripts/utils/delayed-show.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
 
-export class DelayedShow extends React.Component {
+export default class DelayedShow extends React.Component {
   constructor(props, context) {
     super(props, context);
     this.state = {

client/app/scripts/utils/file-utils.js

@@ -74,11 +74,11 @@ function download(source, name) {
   if (name) {
     filename = name;
   } else if (window.document.title) {
-    filename = `${window.document.title.replace(/[^a-z0-9]/gi, '-').toLowerCase()}-${(+new Date)}`;
+    filename = `${window.document.title.replace(/[^a-z0-9]/gi, '-').toLowerCase()}-${(+new Date())}`;
   }
 
   const url = window.URL.createObjectURL(new Blob(source,
-    {type: 'text\/xml'}
+    { type: 'text/xml' }
   ));
 
   const a = document.createElement('a');

client/app/scripts/utils/metric-utils.js

@@ -6,7 +6,7 @@ import React from 'react';
 
 
 export function getClipPathDefinition(clipId, size, height,
-                                      x = -size * 0.5, y = size * 0.5 - height) {
+  x = -size * 0.5, y = size * 0.5 - height) {
   return (
     <defs>
       <clipPath id={clipId}>

client/app/scripts/utils/storage-utils.js

@@ -3,7 +3,7 @@ import debug from 'debug';
 const log = debug('scope:storage-utils');
 
 // localStorage detection
-const storage = typeof(Storage) !== 'undefined' ? window.localStorage : null;
+const storage = (typeof Storage) !== 'undefined' ? window.localStorage : null;
 
 export function storageGet(key, defaultValue) {
   if (storage && storage.getItem(key) !== undefined) {

client/package.json

@@ -38,7 +38,7 @@
   "devDependencies": {
     "autoprefixer": "6.5.3",
     "babel-core": "6.18.2",
-    "babel-eslint": "5.0.0",
+    "babel-eslint": "7.1.1",
     "babel-jest": "17.0.2",
     "babel-loader": "6.2.8",
     "babel-plugin-lodash": "3.2.10",
@@ -46,11 +46,13 @@
     "babel-preset-react": "6.16.0",
     "clean-webpack-plugin": "0.1.14",
     "css-loader": "0.26.1",
-    "eslint": "2.4.0",
-    "eslint-config-airbnb": "6.1.0",
-    "eslint-loader": "1.3.0",
-    "eslint-plugin-jasmine": "1.6.0",
-    "eslint-plugin-react": "4.2.2",
+    "eslint": "3.11.1",
+    "eslint-config-airbnb": "13.0.0",
+    "eslint-loader": "1.6.1",
+    "eslint-plugin-import": "2.2.0",
+    "eslint-plugin-jasmine": "2.2.0",
+    "eslint-plugin-jsx-a11y": "2.2.3",
+    "eslint-plugin-react": "6.8.0",
     "extract-text-webpack-plugin": "1.0.1",
     "file-loader": "0.9.0",
     "html-webpack-plugin": "2.24.1",