CR improvements: /report/ redirect to /report/security, component renaming and other small fixes

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import {BrowserRouter as Router, NavLink, Redirect, Route, Switch} from 'react-router-dom';
+import {BrowserRouter as Router, NavLink, Redirect, Route, Switch, withRouter} 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'
@@ -83,6 +83,13 @@ class AppComponent extends AuthComponent {
     }
   };
 
+  redirectTo = (userPath, targetPath) => {
+    let pathQuery = new RegExp(userPath+"[\/]?$", "g");
+    if(window.location.pathname.match(pathQuery)){
+      return <Redirect to={{pathname: targetPath}}/>
+    }
+  };
+
   constructor(props) {
     super(props);
     this.state = {
@@ -198,12 +205,12 @@ class AppComponent extends AuthComponent {
               {this.renderRoute('/infection/map', <MapPage onStatusChange={this.updateStatus}/>)}
               {this.renderRoute('/infection/telemetry', <TelemetryPage onStatusChange={this.updateStatus}/>)}
               {this.renderRoute('/start-over', <StartOverPage onStatusChange={this.updateStatus}/>)}
+              {this.redirectTo('/report', '/report/security')}
               <Switch>
               {this.renderRoute('/report/security', <ReportPage/>)}
               {this.renderRoute('/report/attack', <ReportPage/>)}
               {this.renderRoute('/report/zeroTrust', <ReportPage/>)}
               </Switch>
-              {this.renderRoute(reportZeroTrustRoute, <ZeroTrustReportPage onStatusChange={this.updateStatus}/>)}
               {this.renderRoute('/license', <LicensePage onStatusChange={this.updateStatus}/>)}
             </Col>
           </Row>

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

@@ -11,7 +11,7 @@ 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';
 
-class MatrixComponent extends AuthComponent {
+class ConfigMatrixComponent extends AuthComponent {
   constructor(props) {
     super(props);
     this.state = {lastAction: 'none'}
@@ -81,8 +81,8 @@ class MatrixComponent extends AuthComponent {
 
   getTableData = (config) => {
     let configCopy = JSON.parse(JSON.stringify(config));
-    let maxTechniques = MatrixComponent.findMaxTechniques(Object.values(configCopy));
+    let maxTechniques = ConfigMatrixComponent.findMaxTechniques(Object.values(configCopy));
-    let matrixTableData = MatrixComponent.parseTechniques(Object.values(configCopy), maxTechniques);
+    let matrixTableData = ConfigMatrixComponent.parseTechniques(Object.values(configCopy), maxTechniques);
     let columns = this.getColumns(matrixTableData);
     return {'columns': columns, 'matrixTableData': matrixTableData, 'maxTechniques': maxTechniques}
   };
@@ -120,4 +120,4 @@ class MatrixComponent extends AuthComponent {
   }
 }
 
-export default MatrixComponent;
+export default ConfigMatrixComponent;

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

@@ -5,7 +5,7 @@ import FileSaver from 'file-saver';
 import AuthComponent from '../AuthComponent';
 import {FilePond} from 'react-filepond';
 import 'filepond/dist/filepond.min.css';
-import MatrixComponent from '../attack/MatrixComponent';
+import ConfigMatrixComponent from '../attack/ConfigMatrixComponent';
 
 const ATTACK_URL = '/api/attack';
 const CONFIG_URL = '/api/configuration/island';
@@ -450,10 +450,10 @@ class ConfigurePageComponent extends AuthComponent {
   }
 
   renderMatrix = () => {
-    return (<MatrixComponent configuration={this.state.attackConfig}
+    return (<ConfigMatrixComponent configuration={this.state.attackConfig}
-                             submit={this.componentDidMount}
+                                   submit={this.componentDidMount}
-                             reset={this.resetConfig}
+                                   reset={this.resetConfig}
-                             change={this.attackTechniqueChange}/>)
+                                   change={this.attackTechniqueChange}/>)
   };
 
 

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

@@ -7,7 +7,7 @@ import { faCircle } from '@fortawesome/free-solid-svg-icons';
 
 import ReportHeader, {ReportTypes} from './common/ReportHeader';
 import {ScanStatus} from '../attack/techniques/Helpers';
-import Matrix from './attack/ReportMatrix';
+import Matrix from './attack/ReportMatrixComponent';
 import SelectedTechnique from './attack/SelectedTechnique';
 import TechniqueDropdowns from './attack/TechniqueDropdowns';
 import ReportLoader from './common/ReportLoader';
@@ -46,7 +46,7 @@ class AttackReport extends React.Component {
     }
   }
 
-  onTechniqueSelect = (technique, value, mapped = false) => {
+  onTechniqueSelect = (technique, value) => {
     let selectedTechnique = this.getTechniqueByTitle(technique);
     if (selectedTechnique === false){
       return;
@@ -89,7 +89,7 @@ class AttackReport extends React.Component {
           <hr/>
           <p>
             This report shows information about
-            <Button bsStyle={'link'} href={'https://attack.mitre.org/'} bsSize={'lg'} className={'attack-link'}>ATT&CK </Button>
+            <Button bsStyle={'link'} href={'https://attack.mitre.org/'} bsSize={'lg'} className={'attack-link'}>Mitre ATT&CK™</Button>
             techniques used by Infection Monkey.
           </p>
           {this.renderLegend()}
@@ -105,7 +105,7 @@ class AttackReport extends React.Component {
   }
 
   getTechniqueByTitle(title){
-    for (let tech_id in this.state.techniques){
+    for (const tech_id in this.state.techniques){
       if (! this.state.techniques.hasOwnProperty(tech_id)) {return false;}
       let technique = this.state.techniques[tech_id];
       if (technique.title === title){
@@ -118,10 +118,10 @@ class AttackReport extends React.Component {
 
   static addLinksToTechniques(schema, techniques){
     schema = schema.properties;
-    for(let type in schema){
+    for(const type in schema){
       if (! schema.hasOwnProperty(type)) {return false;}
       let typeTechniques = schema[type].properties;
-      for(let tech_id in typeTechniques){
+      for(const tech_id in typeTechniques){
         if (! typeTechniques.hasOwnProperty(tech_id)) {return false;}
         if (typeTechniques[tech_id] !== undefined){
           techniques[tech_id]['link'] = typeTechniques[tech_id].link

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

@@ -5,7 +5,7 @@ import ReactTable from 'react-table';
 import 'filepond/dist/filepond.min.css';
 import '../../../styles/report/ReportAttackMatrix.scss';
 
-class MatrixComponent extends React.Component {
+class ReportMatrixComponent extends React.Component {
   constructor(props) {
     super(props);
     this.state = {techniques: this.props.techniques,
@@ -14,7 +14,7 @@ class MatrixComponent extends React.Component {
 
   getColumns() {
     let columns = [];
-    for(let type_key in this.state.schema.properties){
+    for(const type_key in this.state.schema.properties){
       if (! this.state.schema.properties.hasOwnProperty(type_key)){
         continue;
       }
@@ -31,11 +31,11 @@ class MatrixComponent extends React.Component {
 
   getTableRows() {
     let rows = [];
-    for (let tech_id in this.state.techniques) {
+    for (const tech_id in this.state.techniques) {
       if (this.state.techniques.hasOwnProperty(tech_id)){
         let technique_added = false;
         let technique = this.state.techniques[tech_id];
-        for(let row of rows){
+        for(const row of rows){
           if (! row.hasOwnProperty(technique.type)){
             row[technique.type] = technique;
             technique_added = true;
@@ -81,4 +81,4 @@ class MatrixComponent extends React.Component {
   }
 }
 
-export default MatrixComponent;
+export default ReportMatrixComponent;

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

@@ -62,7 +62,7 @@ class SelectedTechnique extends React.Component {
 
     return (
       <div>
-        <h3 className='selected-technique-title'>Selected technique:</h3>
+        <h3 className='selected-technique-title'>Selected technique</h3>
         <section className='attack-report selected-technique'>
           {content}
         </section>

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

@@ -7,7 +7,7 @@ let monkeyLogoImage = require('../../../images/monkey-icon.svg');
 export const ReportTypes = {
   zeroTrust: 'Zero Trust',
   security: 'Security',
-  attack: 'Attack',
+  attack: 'ATT&CK',
   null: ''
 };
 

monkey/monkey_island/cc/ui/src/styles/report/AttackReport.scss

@@ -42,5 +42,5 @@
 }
 
 .attack-link{
-  padding: 6px 10px !important;
+  padding: 0 7px 3px 7px !important;
 }