Merge pull request #634 from acepace/feature/UI_games

Feature/ui size improvements

.travis.yml

@@ -53,7 +53,7 @@ script:
 - cd -
 - cd monkey_island/cc/ui
 - eslint ./src --quiet
-- JS_WARNINGS_AMOUNT_UPPER_LIMIT=37
+- JS_WARNINGS_AMOUNT_UPPER_LIMIT=490
 - eslint ./src --max-warnings $JS_WARNINGS_AMOUNT_UPPER_LIMIT
 
 after_success:

monkey/monkey_island/cc/ui/.babelrc

@@ -1,10 +1,15 @@
 {
   "presets": [
-    "es2015",
-    "stage-0",
-    "react"
+    [
+      "@babel/preset-env",
+      {
+        "useBuiltIns": "entry"
+      }
+    ],
+    "@babel/preset-react"
   ],
   "plugins": [
-    "emotion"
+    "emotion",
+    "@babel/plugin-proposal-class-properties"
   ]
 }

monkey/monkey_island/cc/ui/.eslintrc

@@ -3,11 +3,25 @@
   "plugins": [
     "react"
   ],
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended"
+  ],
   "parserOptions": {
     "ecmaVersion": 6,
     "sourceType": "module",
+    "allowImportExportEverywhere": false,
     "ecmaFeatures": {
-      "jsx": true
+      "jsx": true,
+      "globalReturn": false
+    },
+    "babelOptions": {
+      "configFile": ".babelrc"
+    }
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
     }
   },
   "env": {
@@ -25,9 +39,8 @@
     ],
     "no-undef": 1,
     "global-strict": 0,
-    "no-extra-semi": 1,
     "no-underscore-dangle": 0,
-    "no-console": 1,
+    "no-console": 0,
     "no-unused-vars": 1,
     "no-trailing-spaces": [
       1,
@@ -38,6 +51,14 @@
     "no-unreachable": 1,
     "no-alert": 0,
     "react/jsx-uses-react": 1,
-    "react/jsx-uses-vars": 1
+    "react/jsx-uses-vars": 1,
+    "react/jsx-key": 1,
+    "react/prop-types": 1,
+    "react/no-unescaped-entities": 1,
+    "react/no-unknown-property": [1, { "ignore": ["class"] }],
+    "react/no-string-refs": 1,
+    "react/display-name": 1,
+    "no-useless-escape": 1,
+    "no-prototype-builtins": 1
   }
 }

monkey/monkey_island/cc/ui/package.json

@@ -21,23 +21,23 @@
   "repository": "",
   "keywords": [],
   "author": "Guardicore",
+  "browserslist": "> 0.25%, not dead",
   "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.3",
-    "babel-eslint": "^8.2.6",
-    "babel-loader": "^7.1.5",
-    "babel-polyfill": "^6.26.0",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-0": "^6.5.0",
-    "bower-webpack-plugin": "^0.1.9",
+    "@babel/cli": "^7.8.4",
+    "@babel/core": "^7.9.6",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.9.6",
+    "@babel/preset-env": "^7.9.6",
+    "@babel/preset-react": "^7.9.0",
+    "@babel/runtime": "^7.9.6",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^8.0.0",
     "chai": "^4.2.0",
-    "copyfiles": "^2.1.1",
-    "css-loader": "^1.0.1",
-    "eslint": "^5.16.0",
-    "eslint-loader": "^2.2.1",
-    "eslint-plugin-react": "^7.16.0",
+    "copyfiles": "^2.2.0",
+    "css-loader": "^3.5.0",
+    "eslint": "^6.8.0",
+    "eslint-loader": "^4.0.1",
+    "eslint-plugin-react": "^7.19.0",
     "file-loader": "^1.1.11",
     "glob": "^7.1.6",
     "html-loader": "^0.5.5",
@@ -50,21 +50,22 @@
     "karma-phantomjs-launcher": "^1.0.0",
     "karma-sourcemap-loader": "^0.3.5",
     "karma-webpack": "^3.0.5",
-    "minimist": "^1.2.0",
+    "minimist": "^1.2.5",
     "mocha": "^5.2.0",
     "null-loader": "^0.1.1",
     "phantomjs-prebuilt": "^2.1.16",
     "react-addons-test-utils": "^15.6.2",
     "react-event-timeline": "^1.6.3",
-    "react-hot-loader": "^4.12.18",
+    "react-hot-loader": "^4.12.20",
     "rimraf": "^2.7.1",
     "style-loader": "^0.22.1",
     "url-loader": "^1.1.2",
-    "webpack": "^4.41.2",
-    "webpack-cli": "^3.3.10",
-    "webpack-dev-server": "^3.9.0"
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.10.3"
   },
   "dependencies": {
+    "@babel/polyfill": "^7.8.0",
     "@emotion/core": "^10.0.22",
     "@fortawesome/fontawesome-svg-core": "^1.2.25",
     "@fortawesome/free-regular-svg-icons": "^5.11.2",
@@ -110,6 +111,7 @@
     "react-tooltip-lite": "^1.10.0",
     "redux": "^4.0.4",
     "sass-loader": "^7.3.1",
-    "sha3": "^2.0.7"
+    "sha3": "^2.0.7",
+    "stylelint": "^13.3.3"
   }
 }

monkey/monkey_island/cc/ui/server.js

@@ -1,9 +1,9 @@
 /*eslint no-console:0 */
 'use strict';
-require('core-js/fn/object/assign');
-const webpack = require('webpack');
-const WebpackDevServer = require('webpack-dev-server');
-const config = require('./webpack.config');
+import assign from 'core-js/fn/object'
+import webpack from 'webpack'
+import WebpackDevServer from 'webpack-dev-server'
+import config from './webpack.config'
 
 /**
  * Flag indicating whether webpack compiled for the first time.

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

@@ -2,7 +2,8 @@ import React from 'react';
 import {BrowserRouter as Router, NavLink, Redirect, Route, Switch} from 'react-router-dom';
 import {Col, Grid, Row} from 'react-bootstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faCheck, faUndo } from '@fortawesome/free-solid-svg-icons'
+import { faCheck } from '@fortawesome/free-solid-svg-icons/faCheck'
+import { faUndo } from '@fortawesome/free-solid-svg-icons/faUndo'
 
 import RunServerPage from 'components/pages/RunServerPage';
 import ConfigurePage from 'components/pages/ConfigurePage';
@@ -25,10 +26,10 @@ import 'react-toggle/style.css';
 import 'react-table/react-table.css';
 import VersionComponent from './side-menu/VersionComponent';
 
-let logoImage = require('../images/monkey-icon.svg');
-let infectionMonkeyImage = require('../images/infection-monkey.svg');
-let guardicoreLogoImage = require('../images/guardicore-logo.png');
-let notificationIcon = require('../images/notification-logo-512x512.png');
+import logoImage from '../images/monkey-icon.svg';
+import infectionMonkeyImage from '../images/infection-monkey.svg';
+import guardicoreLogoImage from '../images/guardicore-logo.png';
+import notificationIcon from '../images/notification-logo-512x512.png';
 
 const reportZeroTrustRoute = '/report/zeroTrust';
 
@@ -125,7 +126,7 @@ class AppComponent extends AuthComponent {
           <Row>
             <Col sm={3} md={2} className='sidebar'>
               <div className='header'>
-                <img src={logoImage} style={{width: '5vw', margin: '15px'}}/>
+                <img alt="logo" src={logoImage} style={{width: '5vw', margin: '15px'}}/>
                 <img src={infectionMonkeyImage} style={{width: '15vw'}} alt='Infection Monkey'/>
               </div>
 
@@ -188,7 +189,7 @@ class AppComponent extends AuthComponent {
               <hr/>
               <div className='guardicore-link text-center' style={{'marginBottom': '0.5em'}}>
                 <span>Powered by</span>
-                <a href='http://www.guardicore.com' target='_blank'>
+                <a href='http://www.guardicore.com' rel="noopener noreferrer" target='_blank'>
                   <img src={guardicoreLogoImage} alt='GuardiCore'/>
                 </a>
               </div>

monkey/monkey_island/cc/ui/src/components/attack/ConfigMatrixComponent.js

@@ -8,8 +8,8 @@ import '../../styles/Tooltip.scss';
 import {Col} from 'react-bootstrap';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faCircle as faCircle } from '@fortawesome/free-solid-svg-icons';
-import { faCircle as faCircleThin } from '@fortawesome/free-regular-svg-icons';
+import { faCircle as faCircle } from '@fortawesome/free-solid-svg-icons/faCircle';
+import { faCircle as faCircleThin } from '@fortawesome/free-regular-svg-icons/faCircle';
 
 class ConfigMatrixComponent extends AuthComponent {
   constructor(props) {

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

@@ -49,7 +49,7 @@ class MitigationsComponent extends React.Component {
 
   static getMitigationName(name, url) {
     if(url){
-      return (<a href={url} target={'_blank'}>{name}</a>)
+      return (<a href={url} rel="noopener noreferrer" target={'_blank'}>{name}</a>)
     } else {
       return (<p>{name}</p>)
     }

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faHandPointLeft } from '@fortawesome/free-solid-svg-icons'
+import { faHandPointLeft } from '@fortawesome/free-solid-svg-icons/faHandPointLeft'
 import Toggle from 'react-toggle';
 import {OverlayTrigger, Tooltip} from 'react-bootstrap';
 import download from 'downloadjs'

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

@@ -346,8 +346,8 @@ class ConfigurePageComponent extends AuthComponent {
             throw Error()
           }
           return res;
-        }).catch(error => {
-        console.log('bad configuration');
+        }).catch((error) => {
+        console.log(`bad configuration ${error}`);
         this.setState({lastAction: 'invalid_configuration'});
       }));
   }

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

@@ -21,10 +21,10 @@ class LicensePageComponent extends React.Component {
           <p>
             Copyright <i className="glyphicon glyphicon-copyright-mark"/> {rainge(2015)} Guardicore Ltd.
             <br/>
-            Licensed under <a href="https://www.gnu.org/licenses/gpl-3.0.html" target="_blank">GPLv3</a>.
+            Licensed under <a href="https://www.gnu.org/licenses/gpl-3.0.html" rel="noopener noreferrer" target="_blank">GPLv3</a>.
           </p>
           <p>
-            The source code is available on <a href="https://github.com/guardicore/monkey" target="_blank">GitHub</a>
+            The source code is available on <a href="https://github.com/guardicore/monkey" rel="noopener noreferrer" target="_blank">GitHub</a>
           </p>
         </div>
       </Col>

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

@@ -2,7 +2,8 @@ import React from 'react';
 import {Col, Modal} from 'react-bootstrap';
 import {Link} from 'react-router-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faStopCircle, faMinus } from '@fortawesome/free-solid-svg-icons'
+import { faStopCircle } from '@fortawesome/free-solid-svg-icons/faStopCircle'
+import { faMinus } from '@fortawesome/free-solid-svg-icons/faMinus'
 import PreviewPaneComponent from 'components/map/preview-pane/PreviewPane';
 import {ReactiveGraph} from 'components/reactive-graph/ReactiveGraph';
 import {getOptions, edgeGroupToColor} from 'components/map/MapOptions';

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

@@ -2,7 +2,7 @@ import React from 'react';
 
 import '../../styles/NotFoundPage.scss';
 
-let monkeyDetective = require('../../images/detective-monkey.svg');
+import monkeyDetective from '../../images/detective-monkey.svg';
 
 class ConfigurePageComponent extends React.Component{
   constructor(props) {
@@ -12,7 +12,7 @@ class ConfigurePageComponent extends React.Component{
   render(){
     return(
       <div className={'not-found'}>
-        <img className={'monkey-detective'} src={monkeyDetective}/>
+        <img alt="404 monkey image" className={'monkey-detective'} src={monkeyDetective}/>
         <div className={'text-block'}>
           <h1 className={'not-found-title'}>404</h1>
           <h2 className={'not-found-subtitle'}>Page not found</h2>

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

@@ -5,7 +5,9 @@ import CopyToClipboard from 'react-copy-to-clipboard';
 import GridLoader from 'react-spinners/GridLoader';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faClipboard, faCheck, faSync } from '@fortawesome/free-solid-svg-icons';
+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 {Link} from 'react-router-dom';
 import AuthComponent from '../AuthComponent';
@@ -254,7 +256,7 @@ class RunMonkeyPageComponent extends AuthComponent {
             <i className="glyphicon glyphicon-info-sign" style={{'marginRight': '5px'}}/>
             Not sure what this is? Not seeing your AWS EC2 instances? <a
             href="https://github.com/guardicore/monkey/wiki/Monkey-Island:-Running-the-monkey-on-AWS-EC2-instances"
-            target="_blank">Read the documentation</a>!
+            rel="noopener noreferrer" target="_blank">Read the documentation</a>!
           </p>
         </div>
         {

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

@@ -22,7 +22,7 @@ class RunServerPageComponent extends React.Component {
           </p>
           <p>
             To read more about the Monkey, visit <a href="http://infectionmonkey.com"
-                                                    target="_blank">infectionmonkey.com</a>
+                                                    rel="noopener noreferrer" target="_blank">infectionmonkey.com</a>
           </p>
           <p>
             Go ahead and <Link to="/run-monkey">run the monkey</Link>.

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

@@ -3,7 +3,10 @@ import {Col, Button} from 'react-bootstrap';
 import '../../styles/Collapse.scss';
 import '../../styles/report/AttackReport.scss';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import {faCircle, faEye, faEyeSlash, faRadiation} from '@fortawesome/free-solid-svg-icons';
+import {faCircle} from '@fortawesome/free-solid-svg-icons/faCircle';
+import {faRadiation} from '@fortawesome/free-solid-svg-icons/faRadiation';
+import {faEye} from '@fortawesome/free-solid-svg-icons/faEye';
+import {faEyeSlash} from '@fortawesome/free-solid-svg-icons/faEyeSlash';
 
 import ReportHeader, {ReportTypes} from './common/ReportHeader';
 import {ScanStatus} from '../attack/techniques/Helpers';

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

@@ -16,9 +16,8 @@ import SecurityIssuesGlance from './common/SecurityIssuesGlance';
 import PrintReportButton from './common/PrintReportButton';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faMinus } from '@fortawesome/free-solid-svg-icons';
-
-let guardicoreLogoImage = require('../../images/guardicore-logo.png');
+import { faMinus } from '@fortawesome/free-solid-svg-icons/faMinus';
+import guardicoreLogoImage from '../../images/guardicore-logo.png'
 
 
 class ReportPageComponent extends AuthComponent {

monkey/monkey_island/cc/ui/src/components/report-components/attack/ReportMatrixComponent.js

@@ -20,7 +20,7 @@ class ReportMatrixComponent extends React.Component {
       }
       let tech_type = this.state.schema.properties[type_key];
       columns.push({
-        Header: () => (<a href={tech_type.link} target="_blank">{tech_type.title}</a>),
+        Header: () => (<a href={tech_type.link} rel="noopener noreferrer" target="_blank">{tech_type.title}</a>),
         id: type_key,
         accessor: x => this.renderTechnique(x[tech_type.title]),
         style: {'whiteSpace': 'unset'}

monkey/monkey_island/cc/ui/src/components/report-components/attack/SelectedTechnique.js

@@ -3,9 +3,9 @@ import Collapse from '@kunukn/react-collapse';
 
 import AttackReport from '../AttackReport';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faQuestionCircle} from '@fortawesome/free-solid-svg-icons';
+import {faQuestionCircle} from '@fortawesome/free-solid-svg-icons/faQuestionCircle';
 
-const classNames = require('classnames');
+import classNames from 'classnames';
 
 class SelectedTechnique extends React.Component {
 
@@ -37,7 +37,7 @@ class SelectedTechnique extends React.Component {
             {this.state.techniques[tech_id].title}
           </span>
           <span>
-            <a href={this.state.techniques[tech_id].link} target='_blank' className={'link-to-technique'}>
+            <a href={this.state.techniques[tech_id].link} rel="noopener noreferrer" target='_blank' className={'link-to-technique'}>
               <FontAwesomeIcon icon={faQuestionCircle}/>
             </a>
           </span>

monkey/monkey_island/cc/ui/src/components/report-components/attack/TechniqueDropdowns.js

@@ -1,12 +1,15 @@
 import React from 'react';
 import Collapse from '@kunukn/react-collapse';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faQuestionCircle, faChevronUp, faChevronDown, faToggleOn } from '@fortawesome/free-solid-svg-icons'
+import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons/faQuestionCircle'
+import { faChevronUp } from '@fortawesome/free-solid-svg-icons/faChevronUp'
+import { faChevronDown } from '@fortawesome/free-solid-svg-icons/faChevronDown'
+import { faToggleOn } from '@fortawesome/free-solid-svg-icons/faToggleON'
 
 import {Button} from 'react-bootstrap';
 import AttackReport from '../AttackReport';
 
-const classNames = require('classnames');
+import classNames from 'classnames';
 
 class TechniqueDropdowns extends React.Component{
 
@@ -40,7 +43,7 @@ class TechniqueDropdowns extends React.Component{
             {this.state.techniques[tech_id].title}
           </span>
           <span>
-            <a href={this.state.techniques[tech_id].link} target='_blank' className={'link-to-technique'}>
+            <a href={this.state.techniques[tech_id].link} rel="noopener noreferrer" target='_blank' className={'link-to-technique'}>
               <FontAwesomeIcon icon={faQuestionCircle}/>
             </a>
               <FontAwesomeIcon icon={this.state.collapseOpen === tech_id ? faChevronDown : faChevronUp}/>

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

@@ -2,7 +2,7 @@ import React, {Component} from 'react';
 import {Col} from 'react-bootstrap';
 import * as PropTypes from 'prop-types';
 
-let monkeyLogoImage = require('../../../images/monkey-icon.svg');
+import monkeyLogoImage from '../../../images/monkey-icon.svg';
 
 export const ReportTypes = {
   zeroTrust: 'Zero Trust',
@@ -29,7 +29,7 @@ export class ReportHeader extends Component {
         </div>
       </Col>
       <Col xs={4}>
-        <img src={monkeyLogoImage}
+        <img alt="monkey logo image" src={monkeyLogoImage}
              style={{
                float: 'right',
                width: '80px'

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

@@ -4,7 +4,7 @@ import {Badge, Button} from 'react-bootstrap';
 import * as PropTypes from 'prop-types';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faList } from '@fortawesome/free-solid-svg-icons';
+import { faList } from '@fortawesome/free-solid-svg-icons/faList';
 
 export default class EventsButton extends Component {
   constructor(props) {

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

@@ -1,11 +1,10 @@
 import React, {Component} from 'react';
-import {Badge, Modal} from 'react-bootstrap';
+import {Modal} from 'react-bootstrap';
 import EventsTimeline from './EventsTimeline';
 import * as PropTypes from 'prop-types';
 import saveJsonToFile from '../../utils/SaveJsonToFile';
 import EventsModalButtons from './EventsModalButtons';
 import Pluralize from 'pluralize'
-import {statusToLabelType} from './StatusLabel';
 
 export default class EventsModal extends Component {
   constructor(props) {

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

@@ -2,8 +2,8 @@ import React, {Component} from 'react';
 import {Timeline, TimelineEvent} from 'react-event-timeline';
 import * as PropTypes from 'prop-types';
 
-let monkeyLocalIcon = require('../../../images/zerotrust/im-alert-machine-icon.svg');
-let monkeyNetworkIcon = require('../../../images/zerotrust/im-alert-network-icon.svg');
+import monkeyLocalIcon from '../../../images/zerotrust/im-alert-machine-icon.svg';
+import monkeyNetworkIcon from '../../../images/zerotrust/im-alert-network-icon.svg';
 
 const eventTypeToIcon = {
   'monkey_local': monkeyLocalIcon,

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

@@ -3,7 +3,7 @@ import {Button} from 'react-bootstrap';
 import * as PropTypes from 'prop-types';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faDownload } from '@fortawesome/free-solid-svg-icons';
+import { faDownload } from '@fortawesome/free-solid-svg-icons/faDownload';
 
 export default class ExportEventsButton extends Component {
   render() {

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

@@ -1,7 +1,5 @@
-import React, {Component, Fragment} from 'react';
-import PillarLabel from './PillarLabel';
-import EventsButton from './EventsButton';
-import ZeroTrustPillars, {ZeroTrustStatuses} from './ZeroTrustPillars';
+import React, {Component} from 'react';
+import {ZeroTrustStatuses} from './ZeroTrustPillars';
 import {FindingsTable} from './FindingsTable';
 
 

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

@@ -3,7 +3,13 @@ import {statusToLabelType} from './StatusLabel';
 import * as PropTypes from 'prop-types';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faDatabase, faUser, faWifi, faCloud, faLaptop, faEyeSlash, faCogs } from '@fortawesome/free-solid-svg-icons';
+import { faDatabase } from '@fortawesome/free-solid-svg-icons/faDatabase';
+import { faUser  } from '@fortawesome/free-solid-svg-icons/faUser';
+import { faWifi } from '@fortawesome/free-solid-svg-icons/faWifi';
+import { faCloud } from '@fortawesome/free-solid-svg-icons/faCloud';
+import { faLaptop } from '@fortawesome/free-solid-svg-icons/faLaptop';
+import { faEyeSlash } from '@fortawesome/free-solid-svg-icons/faEyeSlash';
+import { faCogs } from '@fortawesome/free-solid-svg-icons/faCogs';
 
 const pillarToIcon = {
   'Data': faDatabase,

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

@@ -5,7 +5,7 @@ import {NavLink} from 'react-router-dom';
 import {Panel} from 'react-bootstrap';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
+import { faChevronDown } from '@fortawesome/free-solid-svg-icons/faChevronDown';
 
 
 class ZeroTrustReportLegend extends Component {

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

@@ -2,7 +2,10 @@ import React, {Component} from 'react';
 import * as PropTypes from 'prop-types';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faCheck, faExclamationTriangle, faBomb, faQuestion } from '@fortawesome/free-solid-svg-icons';
+import { faCheck } from '@fortawesome/free-solid-svg-icons/faCheck';
+import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons/faExclamationTriangle';
+import { faBomb } from '@fortawesome/free-solid-svg-icons/faBomb';
+import { faQuestion } from '@fortawesome/free-solid-svg-icons/faQuestion';
 
 const statusToIcon = {
   'Passed': faCheck,

monkey/monkey_island/cc/ui/src/components/side-menu/VersionComponent.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faDownload } from '@fortawesome/free-solid-svg-icons';
+import { faDownload } from '@fortawesome/free-solid-svg-icons/faDownload';
 
 class VersionComponent extends React.Component {
   constructor(props) {
@@ -34,7 +34,7 @@ class VersionComponent extends React.Component {
             <div>
               <b>Newer version available!</b>
               <br/>
-              <b><a target="_blank" href={this.state.downloadLink}>Download here <FontAwesomeIcon icon={faDownload}/></a></b>
+              <b><a rel="noopener noreferrer" target="_blank" href={this.state.downloadLink}>Download here <FontAwesomeIcon icon={faDownload}/></a></b>
             </div>
             :
             undefined

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

@@ -83,7 +83,7 @@ class CheckboxComponent extends React.PureComponent {
                type='checkbox' value={this.state.checked}
                name={this.props.name}/>
         <label className='text'>{this.props.children}</label>
-        <div className='ui-btn-ping' onTransitionEnd={this.stopAnimation}></div>
+        <div className='ui-btn-ping' onTransitionEnd={this.stopAnimation}/>
       </div>
     )
   }

monkey/monkey_island/cc/ui/src/index.html

@@ -1,11 +1,14 @@
 <!doctype html>
-<html>
+<html lang="en">
 <head>
   <meta charset="utf-8">
   <title>Infection Monkey Island Server</title>
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <meta name="description" content="">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <link rel="preconnect" href="//fonts.googleapis.com">
+  <link rel="preconnect" href="//fonts.gstatic.com">
+  <link rel="preconnect" href="//netdna.bootstrapcdn.com">
 </head>
 <body>
 <div id="app"></div>

monkey/monkey_island/cc/ui/src/index.js

@@ -1,7 +1,7 @@
+import '@babel/polyfill';
 import 'core-js/fn/object/assign';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import 'babel-polyfill';
 import App from './components/Main';
 import Bootstrap from 'bootstrap/dist/css/bootstrap.css'; // eslint-disable-line no-unused-vars
 

monkey/monkey_island/cc/ui/src/server_config/ServerConfig.js

@@ -2,7 +2,7 @@ import StandardConfig from './StandardConfig';
 import AwsConfig from './AwsConfig';
 import PasswordConfig from './PasswordConfig';
 
-const SERVER_CONFIG_JSON = require('../../../server_config.json');
+import SERVER_CONFIG_JSON from '../../../server_config.json';
 
 const CONFIG_DICT =
   {

monkey/monkey_island/cc/ui/src/styles/App.css

@@ -1,5 +1,4 @@
-@import url('https://fonts.googleapis.com/css?family=Open+Sans');
-@import url('https://fonts.googleapis.com/css?family=Alegreya');
+@import url('https://fonts.googleapis.com/css?family=Open+Sans|Alegreya&display=swap');
 
 /* Base Application Styles */
 

monkey/monkey_island/cc/ui/webpack.config.js

@@ -8,7 +8,7 @@ module.exports = {
         test: /\.js$/,
         exclude: /node_modules/,
         use: {
-          loader: "babel-loader"
+          loader: "babel-loader",
         }
       },
       {