Resolved a buncher of simple(r) eslint errors

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

@@ -26,6 +26,8 @@ class CloudFeature extends React.Component {
   }
 }
 
+/* eslint-disable react/forbid-prop-types */
+// TODO: Remove this component as part of https://github.com/weaveworks/scope/issues/3278.
 CloudFeature.contextTypes = {
   router: PropTypes.object,
   serviceStore: PropTypes.object,
@@ -36,5 +38,6 @@ CloudFeature.childContextTypes = {
   router: PropTypes.object,
   store: PropTypes.object
 };
+/* eslint-enable react/forbid-prop-types */
 
 export default connect()(CloudFeature);

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

@@ -19,7 +19,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 => ({colorKey: n, id: n, label: 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
@@ -60,7 +60,7 @@ const deltaAdd = (name, adjacency = [], shape = 'circle', stack = false, network
 
 function addMetrics(availableMetrics, node, v) {
   const metrics = availableMetrics.size > 0 ? availableMetrics : fromJS([
-    {id: 'host_cpu_usage_percent', label: 'CPU'}
+    { id: 'host_cpu_usage_percent', label: 'CPU' }
   ]);
 
   return Object.assign({}, node, {
@@ -153,7 +153,7 @@ class DebugToolbar extends React.Component {
   }
 
   onChange(ev) {
-    this.setState({nodesToAdd: parseInt(ev.target.value, 10)});
+    this.setState({ nodesToAdd: parseInt(ev.target.value, 10) });
   }
 
   toggleColors() {
@@ -285,48 +285,54 @@ class DebugToolbar extends React.Component {
       <div className="debug-panel">
         <div>
           <strong>Add nodes </strong>
-          <button onClick={() => this.addNodes(1)}>+1</button>
-          <button onClick={() => this.addNodes(10)}>+10</button>
+          <button type="button" onClick={() => this.addNodes(1)}>+1</button>
+          <button type="button" onClick={() => this.addNodes(10)}>+10</button>
           <input type="number" onChange={this.onChange} value={this.state.nodesToAdd} />
-          <button onClick={() => this.addNodes(this.state.nodesToAdd)}>+</button>
-          <button onClick={() => this.asyncDispatch(addAllVariants)}>Variants</button>
-          <button onClick={() => this.asyncDispatch(addAllMetricVariants(availableMetrics))}>
+          <button type="button" onClick={() => this.addNodes(this.state.nodesToAdd)}>+</button>
+          <button type="button" onClick={() => this.asyncDispatch(addAllVariants)}>
+            Variants
+          </button>
+          <button
+            type="button"
+            onClick={() => this.asyncDispatch(addAllMetricVariants(availableMetrics))}>
             Metric Variants
           </button>
-          <button onClick={() => this.addNodes(1, LOREM)}>Long name</button>
-          <button onClick={() => this.addInternetNode()}>Internet</button>
-          <button onClick={() => this.removeNode()}>Remove node</button>
-          <button onClick={() => this.updateAdjacencies()}>Update adj.</button>
+          <button type="button" onClick={() => this.addNodes(1, LOREM)}>Long name</button>
+          <button type="button" onClick={() => this.addInternetNode()}>Internet</button>
+          <button type="button" onClick={() => this.removeNode()}>Remove node</button>
+          <button type="button" onClick={() => this.updateAdjacencies()}>Update adj.</button>
         </div>
 
         <div>
           <strong>Logging </strong>
-          <button onClick={() => enableLog('*')}>scope:*</button>
-          <button onClick={() => enableLog('dispatcher')}>scope:dispatcher</button>
-          <button onClick={() => enableLog('app-key-press')}>scope:app-key-press</button>
-          <button onClick={() => enableLog('terminal')}>scope:terminal</button>
-          <button onClick={() => disableLog()}>Disable log</button>
+          <button type="button" onClick={() => enableLog('*')}>scope:*</button>
+          <button type="button" onClick={() => enableLog('dispatcher')}>scope:dispatcher</button>
+          <button type="button" onClick={() => enableLog('app-key-press')}>
+            scope:app-key-press
+          </button>
+          <button type="button" onClick={() => enableLog('terminal')}>scope:terminal</button>
+          <button type="button" onClick={() => disableLog()}>Disable log</button>
         </div>
 
         <div>
           <strong>Colors </strong>
-          <button onClick={this.toggleColors}>toggle</button>
+          <button type="button" onClick={this.toggleColors}>toggle</button>
         </div>
 
         {this.state.showColors
-        && (
-        <table>
-          <tbody>
-            {LABEL_PREFIXES.map(r => (
-              <tr key={r}>
-                <td
-                  title={`${r}`}
-                  style={{backgroundColor: hsl(text2degree(r), 0.5, 0.5).toString()}} />
-              </tr>
-            ))}
-          </tbody>
-        </table>
-        )}
+          && (
+            <table>
+              <tbody>
+                {LABEL_PREFIXES.map(r => (
+                  <tr key={r}>
+                    <td
+                      title={`${r}`}
+                      style={{ backgroundColor: hsl(text2degree(r), 0.5, 0.5).toString() }} />
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          )}
 
         {this.state.showColors && [getNodeColor, getNodeColorDark].map(fn => (
           <table key={fn}>
@@ -334,7 +340,7 @@ class DebugToolbar extends React.Component {
               {LABEL_PREFIXES.map(r => (
                 <tr key={r}>
                   {LABEL_PREFIXES.map(c => (
-                    <td key={c} title={`(${r}, ${c})`} style={{backgroundColor: fn(r, c)}} />
+                    <td key={c} title={`(${r}, ${c})`} style={{ backgroundColor: fn(r, c) }} />
                   ))}
                 </tr>
               ))}
@@ -344,14 +350,20 @@ class DebugToolbar extends React.Component {
 
         <div>
           <strong>State </strong>
-          <button onClick={() => this.setLoading(true)}>Set doing initial load</button>
-          <button onClick={() => this.setLoading(false)}>Stop</button>
+          <button type="button" onClick={() => this.setLoading(true)}>
+            Set doing initial load
+          </button>
+          <button type="button" onClick={() => this.setLoading(false)}>Stop</button>
         </div>
 
         <div>
           <strong>Short-lived nodes </strong>
-          <button onClick={() => this.setShortLived()}>Toggle short-lived nodes</button>
-          <button onClick={() => this.setIntermittent()}>Toggle intermittent nodes</button>
+          <button type="button" onClick={() => this.setShortLived()}>
+            Toggle short-lived nodes
+          </button>
+          <button type="button" onClick={() => this.setIntermittent()}>
+            Toggle intermittent nodes
+          </button>
         </div>
       </div>
     );

client/app/scripts/components/footer.js

@@ -44,16 +44,16 @@ class Footer extends React.Component {
         <div className="footer-status">
           {versionUpdate
             && (
-            <a
-              className="footer-versionupdate"
-              title={versionUpdateTitle}
-              href={versionUpdate.get('downloadUrl')}
-              target="_blank"
-              rel="noopener noreferrer">
-              Update available:
-              {' '}
-              {versionUpdate.get('version')}
-            </a>
+              <a
+                className="footer-versionupdate"
+                title={versionUpdateTitle}
+                href={versionUpdate.get('downloadUrl')}
+                target="_blank"
+                rel="noopener noreferrer">
+                Update available:
+                {' '}
+                {versionUpdate.get('version')}
+              </a>
             )
           }
           <span className="footer-label">Version</span>
@@ -68,15 +68,21 @@ class Footer extends React.Component {
 
         <div className="footer-tools">
           <button
+            type="button"
             className="footer-icon"
             onClick={this.handleRelayoutClick}
             title={forceRelayoutTitle}>
             <i className="fa fa-sync" />
           </button>
-          <button onClick={this.handleContrastClick} className="footer-icon" title={otherContrastModeTitle}>
+          <button
+            type="button"
+            onClick={this.handleContrastClick}
+            className="footer-icon"
+            title={otherContrastModeTitle}>
             <i className="fa fa-adjust" />
           </button>
           <button
+            type="button"
             onClick={this.props.toggleTroubleshootingMenu}
             className="footer-icon"
             title="Open troubleshooting menu"
@@ -84,7 +90,11 @@ class Footer extends React.Component {
           >
             <i className="fa fa-bug" />
           </button>
-          <button className="footer-icon" onClick={this.props.toggleHelp} title="Show help">
+          <button
+            type="button"
+            className="footer-icon"
+            onClick={this.props.toggleHelp}
+            title="Show help">
             <i className="fa fa-question" />
           </button>
         </div>

client/app/scripts/components/help-panel.js

@@ -7,26 +7,26 @@ import { hideHelp } from '../actions/app-actions';
 
 
 const GENERAL_SHORTCUTS = [
-  {key: 'esc', label: 'Close active panel'},
-  {key: '/', label: 'Activate search field'},
-  {key: '?', label: 'Toggle shortcut menu'},
-  {key: 'g', label: 'Switch to Graph view'},
-  {key: 't', label: 'Switch to Table view'},
-  {key: 'r', label: 'Switch to Resources view'},
+  { key: 'esc', label: 'Close active panel' },
+  { key: '/', label: 'Activate search field' },
+  { key: '?', label: 'Toggle shortcut menu' },
+  { key: 'g', label: 'Switch to Graph view' },
+  { key: 't', label: 'Switch to Table view' },
+  { key: 'r', label: 'Switch to Resources view' },
 ];
 
 
 const CANVAS_METRIC_SHORTCUTS = [
-  {key: '<', label: 'Select and pin previous metric'},
-  {key: '>', label: 'Select and pin next metric'},
-  {key: 'q', label: 'Unpin current metric'},
+  { key: '<', label: 'Select and pin previous metric' },
+  { key: '>', label: 'Select and pin next metric' },
+  { key: 'q', label: 'Unpin current metric' },
 ];
 
 
 function renderShortcuts(cuts) {
   return (
     <div>
-      {cuts.map(({key, label}) => (
+      {cuts.map(({ key, label }) => (
         <div key={key} className="help-panel-shortcuts-shortcut">
           <div className="key"><kbd>{key}</kbd></div>
           <div className="label">{label}</div>
@@ -51,14 +51,16 @@ function renderShortcutPanel() {
 
 
 const BASIC_SEARCHES = [
-  {label: 'All fields for foo', term: 'foo'},
+  { label: 'All fields for foo', term: 'foo' },
   {
-    label: <span>
-Any field matching
-      <b>pid</b>
-      {' '}
-for the value 12345
-    </span>,
+    label: (
+      <span>
+        Any field matching
+        <b>pid</b>
+        {' '}
+        for the value 12345
+      </span>
+    ),
     term: 'pid: 12345'
   },
 ];
@@ -70,11 +72,13 @@ const REGEX_SEARCHES = [
     term: 'foo|bar'
   },
   {
-    label: <span>
-      <b>command</b>
-      {' '}
-field for foobar or foobaz
-    </span>,
+    label: (
+      <span>
+        <b>command</b>
+        {' '}
+        field for foobar or foobaz
+      </span>
+    ),
     term: 'command: foo(bar|baz)'
   },
 ];
@@ -82,19 +86,23 @@ field for foobar or foobaz
 
 const METRIC_SEARCHES = [
   {
-    label: <span>
-      <b>CPU</b>
-      {' '}
-greater than 4%
-    </span>,
+    label: (
+      <span>
+        <b>CPU</b>
+        {' '}
+        greater than 4%
+      </span>
+    ),
     term: 'cpu > 4%'
   },
   {
-    label: <span>
-      <b>Memory</b>
-      {' '}
-less than 10 megabytes
-    </span>,
+    label: (
+      <span>
+        <b>Memory</b>
+        {' '}
+        less than 10 megabytes
+      </span>
+    ),
     term: 'memory < 10mb'
   },
 ];
@@ -103,7 +111,7 @@ less than 10 megabytes
 function renderSearches(searches) {
   return (
     <div>
-      {searches.map(({term, label}) => (
+      {searches.map(({ term, label }) => (
         <div key={term} className="help-panel-search-row">
           <div className="help-panel-search-row-term">
             <i className="fa fa-search search-label-icon" />
@@ -137,7 +145,7 @@ function renderSearchPanel() {
 
 function renderFieldsPanel(currentTopologyName, searchableFields) {
   const none = (
-    <span style={{fontStyle: 'italic'}}>None</span>
+    <span style={{ fontStyle: 'italic' }}>None</span>
   );
   const currentTopology = (
     <span className="help-panel-fields-current-topology">
@@ -156,7 +164,7 @@ function renderFieldsPanel(currentTopologyName, searchableFields) {
         {' '}
         {currentTopology}
         {' '}
-topology:
+        topology:
       </p>
       <div className="help-panel-fields-fields">
         <div className="help-panel-fields-fields-column">
@@ -188,7 +196,7 @@ function HelpPanel({
 }) {
   return (
     <div className="help-panel-wrapper">
-      <div className="help-panel" style={{marginTop: canvasMargins.top}}>
+      <div className="help-panel" style={{ marginTop: canvasMargins.top }}>
         <div className="help-panel-header">
           <h2>Help</h2>
         </div>

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

@@ -70,7 +70,9 @@ describe('NodeDetailsTable', () => {
     // (that is, first by row and then by column), the indexes we are interested in are of the
     // form columnIndex + n * columns.length, where n >= 0. Therefore we take only the values
     // at the index which divided by columns.length gives a reminder columnIndex.
-    const filteredValues = values.filter((element, index) => index % columns.length === columnIndex);
+    const filteredValues = values.filter(
+      (element, index) => index % columns.length === columnIndex
+    );
     // Array comparison
     expect(filteredValues).toEqual(expectedValues);
   }
@@ -90,7 +92,7 @@ describe('NodeDetailsTable', () => {
             sortedBy="kubernetes_ip"
             nodeIdKey="id"
             nodes={nodes}
-            />
+          />
         </Provider>
       ));
 
@@ -126,7 +128,7 @@ describe('NodeDetailsTable', () => {
             sortedBy="kubernetes_namespace"
             nodeIdKey="id"
             nodes={nodes}
-            />
+          />
         </Provider>
       ));
 

client/app/scripts/components/node-details/node-details-generic-table.js

@@ -62,7 +62,11 @@ export default class NodeDetailsGenericTable extends React.Component {
     // If there are rows that would be hidden behind 'show more', keep them
     // expanded if any of them match the search query; otherwise hide them.
     if (this.state.limit > 0 && rows.length > this.state.limit) {
-      const hasHiddenMatch = rows.slice(this.state.limit).some(row => columns.some(column => matches.has(genericTableEntryKey(row, column))));
+      const hasHiddenMatch = rows
+        .slice(this.state.limit)
+        .some(
+          row => columns.some(column => matches.has(genericTableEntryKey(row, column)))
+        );
       if (!hasHiddenMatch) {
         notShown = rows.length - NODE_DETAILS_DATA_ROWS_DEFAULT_LIMIT;
         rows = rows.slice(0, this.state.limit);

client/app/scripts/components/node-details/node-details-table-headers.js

@@ -33,8 +33,9 @@ export default class NodeDetailsTableHeaders extends React.Component {
           }
 
           const style = colStyles[index];
-          const label = (style.width === NODE_DETAILS_TABLE_CW.XS && NODE_DETAILS_TABLE_XS_LABEL[header.id])
-            ? NODE_DETAILS_TABLE_XS_LABEL[header.id] : header.label;
+          const label = (
+            style.width === NODE_DETAILS_TABLE_CW.XS && NODE_DETAILS_TABLE_XS_LABEL[header.id]
+          ) ? NODE_DETAILS_TABLE_XS_LABEL[header.id] : header.label;
 
           return (
             <td className={headerClasses.join(' ')} style={style} title={header.label} key={header.id}>

client/app/scripts/components/troubleshooting-menu.js

@@ -37,17 +37,18 @@ class DebugMenu extends React.Component {
                 <i className="fa fa-code" />
                 <span className="description">Save raw data as JSON</span>
                 {pausedAt && (
-                <span className="soft">
-                  {' '}
-(
-                  {pausedAt}
-)
-                </span>
+                  <span className="soft">
+                    {' '}
+                    (
+                      {pausedAt}
+                    )
+                  </span>
                 )}
               </a>
             </div>
             <div className="troubleshooting-menu-item">
               <button
+                type="button"
                 className="footer-icon"
                 onClick={this.props.clickDownloadGraph}
                 title="Save canvas as SVG (does not include search highlighting)"
@@ -59,6 +60,7 @@ class DebugMenu extends React.Component {
             </div>
             <div className="troubleshooting-menu-item">
               <button
+                type="button"
                 className="footer-icon"
                 title="Reset view state"
                 onClick={this.handleClickReset}

client/app/scripts/components/zoom-control.js

@@ -56,11 +56,11 @@ export default class ZoomControl extends React.Component {
 
     return (
       <div className="zoom-control">
-        <button className="zoom-in" onClick={this.handleZoomIn}>
+        <button className="zoom-in" type="button" onClick={this.handleZoomIn}>
           <i className="fa fa-plus" />
         </button>
         <Slider value={value} max={1} step={SLIDER_STEP} vertical onChange={this.handleChange} />
-        <button className="zoom-out" onClick={this.handleZoomOut}>
+        <button className="zoom-out" type="button" onClick={this.handleZoomOut}>
           <i className="fa fa-minus" />
         </button>
       </div>