Minor bugfix, changes that allow page refresh to lead to the same report

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import {BrowserRouter as Router, NavLink, Redirect, Route} from 'react-router-dom';
+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'
@@ -97,6 +97,11 @@ class AppComponent extends AuthComponent {
     };
   }
 
+  static isReportUrl(){
+    let url = window.location.href;
+    return ( url.endsWith('/report/security') || url.endsWith('/report/attack') || url.endsWith('/report/zeroTrust'))
+  }
+
   // Sets the property that indicates if we need to remove PBA files from state or not
   setRemovePBAfiles = (rmFiles) => {
     this.setState({removePBAfiles: rmFiles});
@@ -151,7 +156,7 @@ class AppComponent extends AuthComponent {
                   </NavLink>
                 </li>
                 <li>
-                  <NavLink to="/report/security">
+                  <NavLink to="/report/security" className={AppComponent.isReportUrl() ? "active" : ""}>
                     <span className="number">4.</span>
                     Security Reports
                     {this.state.completedSteps.report_done ?
@@ -193,7 +198,11 @@ 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}/>)}
+              <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>

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

@@ -1,6 +1,7 @@
 import '../../styles/report/ReportPage.scss';
 
 import React from 'react';
+import {Route} from "react-router-dom";
 import {Col, Nav, NavItem} from 'react-bootstrap';
 import {ReactiveGraph} from 'components/reactive-graph/ReactiveGraph';
 import {edgeGroupToColor, options} from 'components/map/MapOptions';
@@ -24,13 +25,22 @@ class ReportPageComponent extends AuthComponent {
       zeroTrustReport: {},
       allMonkeysAreDead: false,
       runStarted: true,
-      selectedSection: 'security',
+      selectedSection: ReportPageComponent.selectReport(this.sectionsOrder),
       sections: [{key: 'security', title: 'Security report'},
-                 {key: 'zeroTrust', title: 'Zero trust report'},
-                 {key: 'attack', title: 'ATT&CK report'}]
+        {key: 'zeroTrust', title: 'Zero trust report'},
+        {key: 'attack', title: 'ATT&CK report'}]
     };
   }
 
+  static selectReport(reports){
+    let url = window.location.href;
+    for (let report_name in reports){
+      if (reports.hasOwnProperty(report_name) && url.endsWith(reports[report_name])){
+        return reports[report_name];
+      }
+    }
+  }
+
   getReportFromServer(res) {
     if (res['completed_steps']['run_monkey']) {
       this.authFetch('/api/report/security')
@@ -69,7 +79,8 @@ class ReportPageComponent extends AuthComponent {
         ztReport.pillars = res;
       }).then(() => {
         this.setState({zeroTrustReport: ztReport})
-      })};
+      })
+  };
 
   componentWillUnmount() {
     clearInterval(this.state.ztReportRefreshInterval);
@@ -97,14 +108,25 @@ class ReportPageComponent extends AuthComponent {
   };
 
   renderNav = () => {
-    return (<Nav bsStyle="tabs" justified
-                 activeKey={this.state.selectedSection} onSelect={this.setSelectedSection}
+    return (
+      <Route render={({history}) => (
+      <Nav bsStyle="tabs" justified
+                 activeKey={this.state.selectedSection}
+                 onSelect={(key) => {this.setSelectedSection(key); history.push(key)}}
                  className={"report-nav"}>
-      {this.state.sections.map(section => <NavItem key={section.key} eventKey={section.key}>{section.title}</NavItem>)}
-    </Nav>)
+      {this.state.sections.map(section => this.renderNavButton(section))}
+      </Nav>)}/>)
   };
 
-  getReportContent(){
+  renderNavButton = (section) => {
+    return (
+        <NavItem key={section.key}
+                 eventKey={section.key}
+                 onSelect={() => {}}>
+          {section.title}
+        </NavItem>)};
+
+  getReportContent() {
     switch(this.state.selectedSection){
       case 'security':
         return (<SecurityReport report={this.state.securityReport}/>);

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

@@ -13,7 +13,7 @@ const columns = [
       {
         Header: 'Status', id: 'status',
         accessor: x => {
-          return <StatusLabel status={x.status} size="fa-3x" showText={false}/>;
+          return <StatusLabel status={x.status} size="3x" showText={false}/>;
         },
         maxWidth: MAX_WIDTH_STATUS_COLUMN
       },