Clean some JS warnings

.travis.yml

@@ -83,7 +83,7 @@ script:
 - cd monkey_island/cc/ui
 - npm ci  # See https://docs.npmjs.com/cli/ci.html
 - eslint ./src --quiet  # Test for errors
-- JS_WARNINGS_AMOUNT_UPPER_LIMIT=70
+- JS_WARNINGS_AMOUNT_UPPER_LIMIT=25
 - eslint ./src --max-warnings $JS_WARNINGS_AMOUNT_UPPER_LIMIT  # Test for max warnings
 
 # Build documentation

monkey/monkey_island/cc/ui/.eslintrc

@@ -41,7 +41,7 @@
     "global-strict": 0,
     "no-underscore-dangle": 0,
     "no-console": 0,
-    "no-unused-vars": 1,
+    "no-unused-vars": [1, {"vars": "all", "args": "all", "argsIgnorePattern": "^_", "varsIgnorePattern": "^React$" }],
     "no-trailing-spaces": [
       1,
       {

monkey/monkey_island/cc/ui/src/components/Main.js

@@ -97,7 +97,7 @@ class AppComponent extends AuthComponent {
   };
 
   redirectTo = (userPath, targetPath) => {
-    let pathQuery = new RegExp(userPath + '[\/]?$', 'g');
+    let pathQuery = new RegExp(userPath + '[/]?$', 'g');
     if (window.location.pathname.match(pathQuery)) {
       return <Redirect to={{pathname: targetPath}}/>
     }

monkey/monkey_island/cc/ui/src/components/SideNavComponent.js

@@ -49,7 +49,7 @@ class SideNavComponent extends React.Component {
           </li>
           <li>
             <NavLink to='/report/security'
-                     isActive={(match, location) => {
+                     isActive={(_match, location) => {
                        return (location.pathname === '/report/attack'
                          || location.pathname === '/report/zeroTrust'
                          || location.pathname === '/report/security')

monkey/monkey_island/cc/ui/src/components/attack/techniques/T1136.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactTable from 'react-table';
 import {renderMachineFromSystemData, ScanStatus} from './Helpers';
-import MitigationsComponent from "./MitigationsComponent";
+import MitigationsComponent from './MitigationsComponent';
 
 class T1136 extends React.Component {
 

monkey/monkey_island/cc/ui/src/components/configuration-components/InternalConfig.js

@@ -2,8 +2,18 @@ import Form from 'react-jsonschema-form-bs4';
 import React, {useState} from 'react';
 import {Nav} from 'react-bootstrap';
 
-const sectionOrder = ['network', 'monkey', 'island_server', 'logging', 'exploits', 'dropper',   'classes', 'general',
-  'kill_file', 'testing'];
+const sectionOrder = [
+  'network',
+  'monkey',
+  'island_server',
+  'logging',
+  'exploits',
+  'dropper',
+  'classes',
+  'general',
+  'kill_file',
+  'testing'
+];
 const initialSection = sectionOrder[0];
 
 export default function InternalConfig(props) {
@@ -38,7 +48,7 @@ export default function InternalConfig(props) {
                  className={'config-nav'}>
       {sectionOrder.map(section => {
         return (
-          <Nav.Item>
+          <Nav.Item key={section}>
             <Nav.Link eventKey={section}>{getNavTitle(schema, section)}</Nav.Link>
           </Nav.Item>);
       })}

monkey/monkey_island/cc/ui/src/components/configuration-components/PbaInput.js

@@ -23,8 +23,8 @@ class PbaInput extends AuthComponent {
     };
   }
 
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    if(prevProps.options.filename !== this.props.options.filename && this.props.options.filename === ""){
+  componentDidUpdate(prevProps, _prevState, _snapshot) {
+    if(prevProps.options.filename !== this.props.options.filename && this.props.options.filename === ''){
       this.setState({filename: this.props.options.filename})
     }
   }
@@ -68,7 +68,7 @@ class PbaInput extends AuthComponent {
         if (fileItems.length > 0) {
             this.state.setPbaFilename(fileItems[0].file.name)
         } else {
-            this.state.setPbaFilename("")
+            this.state.setPbaFilename('')
         }
       }}
     />)

monkey/monkey_island/cc/ui/src/components/configuration-components/ValidationFormats.js

@@ -4,7 +4,7 @@ const hostnameRegex = '^([A-Za-z0-9]*[A-Za-z]+[A-Za-z0-9]*.?)*([A-Za-z0-9]*[A-Za
 
 export const formValidationFormats = {
   'ip-range': buildIpRangeRegex(),
-  'ip': buildIpRegex(),
+  'ip': buildIpRegex()
 };
 
 function buildIpRangeRegex(){
@@ -12,7 +12,7 @@ function buildIpRangeRegex(){
     '^'+ipRegex+'$|', // Single IP
     '^'+ipRegex+'-'+ipRegex+'$|', // IP range IP-IP
     '^'+ipRegex+'/'+cidrNotationRegex+'$|', // IP range with cidr notation: IP/cidr
-    hostnameRegex, // IP range with cidr notation: IP/cidr
+    hostnameRegex // IP range with cidr notation: IP/cidr
   ].join(''))
 }
 

monkey/monkey_island/cc/ui/src/components/map/preview-pane/PreviewPane.js

@@ -101,9 +101,9 @@ class PreviewPaneComponent extends AuthComponent {
       .replace(/\\t/g, '\t')
       .replace(/\\b/g, '\b')
       .replace(/\\f/g, '\f')
-      .replace(/\\"/g, '\"')
+      .replace(/\\"/g, '"')
       .replace(/\\'/g, '\'')
-      .replace(/\\&/g, '\&');
+      .replace(/\\&/g, '&');
   }
 
   downloadLog(asset) {

monkey/monkey_island/cc/ui/src/components/pages/ConfigurePage.js

@@ -34,7 +34,7 @@ class ConfigurePageComponent extends AuthComponent {
       lastAction: 'none',
       sections: [],
       selectedSection: 'attack',
-      showAttackAlert: false,
+      showAttackAlert: false
     };
   }
 
@@ -398,7 +398,7 @@ class ConfigurePageComponent extends AuthComponent {
       {this.state.sections.map(section => {
         let classProp = section.key.startsWith('basic') ? 'tab-primary' : '';
         return (
-          <Nav.Item>
+          <Nav.Item key={section.key}>
             <Nav.Link className={classProp} eventKey={section.key}>{section.title}</Nav.Link>
           </Nav.Item>);
       })}

monkey/monkey_island/cc/ui/src/components/pages/LicensePage.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import {Col} from 'react-bootstrap';
 import rainge from 'rainge';
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faCopyright} from "@fortawesome/free-regular-svg-icons";
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faCopyright} from '@fortawesome/free-regular-svg-icons';
 
 class LicensePageComponent extends React.Component {
   constructor(props) {

monkey/monkey_island/cc/ui/src/components/pages/LoginPage.js

@@ -2,9 +2,9 @@ import React from 'react';
 import {Button, Col, Container, Form, Row} from 'react-bootstrap';
 
 import AuthService from '../../services/AuthService';
-import Particles from "react-particles-js";
-import {particleParams} from "../../styles/components/particle-component/AuthPageParams";
-import monkeyGeneral from "../../images/militant-monkey.svg";
+import Particles from 'react-particles-js';
+import {particleParams} from '../../styles/components/particle-component/AuthPageParams';
+import monkeyGeneral from '../../images/militant-monkey.svg';
 
 class LoginPageComponent extends React.Component {
   login = (event) => {

monkey/monkey_island/cc/ui/src/components/pages/MapPage.js

@@ -9,7 +9,7 @@ import {ReactiveGraph} from 'components/reactive-graph/ReactiveGraph';
 import {getOptions, edgeGroupToColor} from 'components/map/MapOptions';
 import AuthComponent from '../AuthComponent';
 import '../../styles/components/Map.scss';
-import {faInfoCircle} from "@fortawesome/free-solid-svg-icons/faInfoCircle";
+import {faInfoCircle} from '@fortawesome/free-solid-svg-icons/faInfoCircle';
 
 class MapPageComponent extends AuthComponent {
   constructor(props) {

monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage.js

@@ -8,8 +8,8 @@ import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faClipboard} from '@fortawesome/free-solid-svg-icons/faClipboard';
 import {faCheck} from '@fortawesome/free-solid-svg-icons/faCheck';
 import {faSync} from '@fortawesome/free-solid-svg-icons/faSync';
-import {faInfoCircle} from "@fortawesome/free-solid-svg-icons/faInfoCircle";
-import {faExclamationTriangle} from "@fortawesome/free-solid-svg-icons/faExclamationTriangle";
+import {faInfoCircle} from '@fortawesome/free-solid-svg-icons/faInfoCircle';
+import {faExclamationTriangle} from '@fortawesome/free-solid-svg-icons/faExclamationTriangle';
 
 import {Link} from 'react-router-dom';
 import AuthComponent from '../AuthComponent';

monkey/monkey_island/cc/ui/src/components/pages/StartOverPage.js

@@ -5,8 +5,8 @@ import AuthComponent from '../AuthComponent';
 import StartOverModal from '../ui-components/StartOverModal';
 import '../../styles/pages/StartOverPage.scss';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faInfoCircle} from "@fortawesome/free-solid-svg-icons/faInfoCircle";
-import {faCheck} from "@fortawesome/free-solid-svg-icons/faCheck";
+import {faInfoCircle} from '@fortawesome/free-solid-svg-icons/faInfoCircle';
+import {faCheck} from '@fortawesome/free-solid-svg-icons/faCheck';
 
 class StartOverPageComponent extends AuthComponent {
   constructor(props) {

monkey/monkey_island/cc/ui/src/components/pages/TelemetryPage.js

@@ -7,7 +7,7 @@ import download from 'downloadjs';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 
 import '../../styles/pages/TelemetryPage.scss';
-import {faDownload} from "@fortawesome/free-solid-svg-icons/faDownload";
+import {faDownload} from '@fortawesome/free-solid-svg-icons/faDownload';
 
 const renderJson = (val) => <JSONTree data={val} level={1} theme="eighties" invertTheme={true}/>;
 const renderTime = (val) => val.split('.')[0];

monkey/monkey_island/cc/ui/src/components/report-components/AttackReport.js

@@ -48,7 +48,7 @@ class AttackReport extends React.Component {
     }
   }
 
-  onTechniqueSelect = (technique, value) => {
+  onTechniqueSelect = (technique, _) => {
     let selectedTechnique = this.getTechniqueByTitle(technique);
     if (selectedTechnique === false){
       return;

monkey/monkey_island/cc/ui/src/components/report-components/SecurityReport.js

@@ -473,7 +473,7 @@ class ReportPageComponent extends AuthComponent {
   }
 
   generateShellshockPathListBadges(paths) {
-    return paths.map(path => <span className="badge badge-warning" style={{margin: '2px'}}>{path}</span>);
+    return paths.map(path => <span className="badge badge-warning" style={{margin: '2px'}} key={path}>{path}</span>);
   }
 
   generateSmbPasswordIssue(issue) {

monkey/monkey_island/cc/ui/src/components/report-components/common/MonkeysStillAliveWarning.js

@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 import * as PropTypes from 'prop-types';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faExclamationTriangle} from "@fortawesome/free-solid-svg-icons/faExclamationTriangle";
+import {faExclamationTriangle} from '@fortawesome/free-solid-svg-icons/faExclamationTriangle';
 
 export default class MonkeysStillAliveWarning extends Component {
   render() {

monkey/monkey_island/cc/ui/src/components/report-components/common/MustRunMonkeyWarning.js

@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 import {NavLink} from 'react-router-dom';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faExclamationTriangle} from "@fortawesome/free-solid-svg-icons/faExclamationTriangle";
+import {faExclamationTriangle} from '@fortawesome/free-solid-svg-icons/faExclamationTriangle';
 
 export default class MustRunMonkeyWarning extends Component {
   render() {

monkey/monkey_island/cc/ui/src/components/report-components/common/PrintReportButton.js

@@ -7,7 +7,7 @@ import { faPrint } from '@fortawesome/free-solid-svg-icons/faPrint';
 export default class PrintReportButton extends Component {
   render() {
     return <div className="text-center no-print">
-      <Button size="md" variant={"outline-standard"} onClick={this.props.onClick}>
+      <Button size="md" variant={'outline-standard'} onClick={this.props.onClick}>
         <FontAwesomeIcon icon={faPrint}/> Print
         Report</Button>
     </div>

monkey/monkey_island/cc/ui/src/components/report-components/common/RenderArrays.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 
 export let renderArray = function (val) {
     return <>{val.map(x => <div key={x}>{x}</div>)}</>;

monkey/monkey_island/cc/ui/src/components/report-components/security/BreachedServers.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactTable from 'react-table';
 import Pluralize from 'pluralize';
-import {renderArray, renderIpAddresses} from "../common/RenderArrays";
+import {renderArray, renderIpAddresses} from '../common/RenderArrays';
 
 
 const columns = [

monkey/monkey_island/cc/ui/src/components/report-components/security/PostBreach.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactTable from 'react-table';
 import Pluralize from 'pluralize';
-import {renderIpAddresses} from "../common/RenderArrays";
+import {renderIpAddresses} from '../common/RenderArrays';
 
 let renderMachine = function (data) {
   return <div>{data.label} ( {renderIpAddresses(data)} )</div>
@@ -56,7 +56,7 @@ class PostBreachComponent extends React.Component {
     });
     let defaultPageSize = pbaMachines.length > pageSize ? pageSize : pbaMachines.length;
     let showPagination = pbaMachines > pageSize;
-    const pbaCount = pbaMachines.reduce((accumulated, pbaMachine) => accumulated+pbaMachine["pba_results"].length, 0);
+    const pbaCount = pbaMachines.reduce((accumulated, pbaMachine) => accumulated+pbaMachine['pba_results'].length, 0);
     return (
       <>
         <p>

monkey/monkey_island/cc/ui/src/components/report-components/security/ScannedServers.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactTable from 'react-table';
 import Pluralize from 'pluralize';
-import {renderArray, renderIpAddresses} from "../common/RenderArrays";
+import {renderArray, renderIpAddresses} from '../common/RenderArrays';
 
 
 const columns = [
@@ -32,7 +32,7 @@ class ScannedServersComponent extends React.Component {
     let showPagination = this.props.data.length > pageSize;
 
     const scannedMachinesCount = this.props.data.length;
-    const reducerFromScannedServerToServicesAmount = (accumulated, scannedServer) => accumulated + scannedServer["services"].length;
+    const reducerFromScannedServerToServicesAmount = (accumulated, scannedServer) => accumulated + scannedServer['services'].length;
     const scannedServicesAmount = this.props.data.reduce(reducerFromScannedServerToServicesAmount, 0);
 
     return (

monkey/monkey_island/cc/ui/src/components/report-components/security/StrongUsers.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactTable from 'react-table'
-import {renderArray} from "../common/RenderArrays";
+import {renderArray} from '../common/RenderArrays';
 
 
 const columns = [

monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/FindingsTable.js

@@ -18,11 +18,13 @@ const columns = [
       {
         Header: 'Events', id: 'events',
         accessor: x => {
-          return <EventsButton finding_id={x.finding_id}
+          const comp = <EventsButton finding_id={x.finding_id}
                                latest_events={x.latest_events}
                                oldest_events={x.oldest_events}
                                event_count={x.event_count}
                                exportFilename={'Events_' + x.test_key} />;
+          comp.displayName = 'EventsButton_' + x.finding_id;
+          return comp;
         },
         maxWidth: EVENTS_COLUMN_MAX_WIDTH
       },
@@ -34,7 +36,9 @@ const columns = [
           const pillarLabels = pillars.map((pillar) =>
             <PillarLabel key={pillar.name} pillar={pillar.name} status={pillar.status}/>
           );
-          return <div style={{textAlign: 'center'}}>{pillarLabels}</div>;
+          const comp = <div style={{textAlign: 'center'}}>{pillarLabels}</div>;
+          comp.displayName = 'PillarsLabels';
+          return comp;
         },
         maxWidth: PILLARS_COLUMN_MAX_WIDTH,
         style: {'whiteSpace': 'unset'}

monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/PrinciplesStatusTable.js

@@ -13,7 +13,9 @@ const columns = [
       {
         Header: 'Status', id: 'status',
         accessor: x => {
-          return <StatusLabel status={x.status} size="3x" showText={false}/>;
+          const comp = <StatusLabel status={x.status} size="3x" showText={false}/>;
+          comp.displayName = 'StatusLabel';
+          return comp;
         },
         maxWidth: MAX_WIDTH_STATUS_COLUMN
       },
@@ -25,7 +27,9 @@ const columns = [
         Header: 'Monkey Tests', id: 'tests',
         style: {'whiteSpace': 'unset'},  // This enables word wrap
         accessor: x => {
-          return <TestsStatus tests={x.tests}/>;
+          const comp = <TestsStatus tests={x.tests}/>;
+          comp.displayName = 'TestsStatus';
+          return comp;
         }
       }
     ]

monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/ReportLegend.js

@@ -14,7 +14,7 @@ class ZeroTrustReportLegend extends Component {
     super(props, context);
 
     this.state = {
-      open: false,
+      open: false
     };
   }
 

monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/SinglePillarPrinciplesStatus.js

@@ -15,7 +15,7 @@ export default class SinglePillarPrinciplesStatus extends AuthComponent {
     super(props, context);
 
     this.state = {
-      open: false,
+      open: false
     };
   }
 

monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/venn-components/VennDiagram.js

@@ -149,7 +149,7 @@ class VennDiagram extends React.Component {
     } else {
 
       // Return z indices to default
-      Object.keys(this.layout).forEach(function (d_, i_) {
+      Object.keys(this.layout).forEach(function (_d, i_) {
         document.querySelector('#' + self.prefix).appendChild(document.querySelector('#' + self.prefix + 'Node_' + i_).parentNode);
       })
     }

monkey/monkey_island/cc/ui/src/components/run-monkey/AwsRunTable.js

@@ -67,7 +67,7 @@ class AwsRunTableComponent extends React.Component {
     this.setState({selectAll, selection});
   };
 
-  getTrProps = (s, r) => {
+  getTrProps = (_, r) => {
     let color = 'inherit';
     if (r) {
       let instId = r.original.instance_id;

monkey/monkey_island/cc/ui/src/components/ui-components/InfoPane.js

@@ -1,7 +1,7 @@
 import {Card, Button} from 'react-bootstrap';
 import React from 'react';
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faQuestionCircle} from "@fortawesome/free-solid-svg-icons";
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faQuestionCircle} from '@fortawesome/free-solid-svg-icons';
 
 
 function InfoPane(props) {

monkey/monkey_island/cc/ui/src/components/ui-components/MissingBinariesModal.js

@@ -1,6 +1,5 @@
 import {Modal} from 'react-bootstrap';
 import React from 'react';
-import {GridLoader} from 'react-spinners';
 
 
 class MissingBinariesModal extends React.PureComponent {