diff --git a/monkey/monkey_island/cc/ui/src/components/Main.js b/monkey/monkey_island/cc/ui/src/components/Main.js index 60a02068a..923470ccd 100644 --- a/monkey/monkey_island/cc/ui/src/components/Main.js +++ b/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 {
  • - + 4. Security Reports {this.state.completedSteps.report_done ? @@ -193,7 +198,11 @@ class AppComponent extends AuthComponent { {this.renderRoute('/infection/map', )} {this.renderRoute('/infection/telemetry', )} {this.renderRoute('/start-over', )} + {this.renderRoute('/report/security', )} + {this.renderRoute('/report/attack', )} + {this.renderRoute('/report/zeroTrust', )} + {this.renderRoute(reportZeroTrustRoute, )} {this.renderRoute('/license', )} diff --git a/monkey/monkey_island/cc/ui/src/components/pages/ReportPage.js b/monkey/monkey_island/cc/ui/src/components/pages/ReportPage.js index 07abc9910..c74152b81 100644 --- a/monkey/monkey_island/cc/ui/src/components/pages/ReportPage.js +++ b/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 ()}/>) }; - getReportContent(){ + renderNavButton = (section) => { + return ( + {}}> + {section.title} + )}; + + getReportContent() { switch(this.state.selectedSection){ case 'security': return (); diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/PrinciplesStatusTable.js b/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/PrinciplesStatusTable.js index a23b7e2be..6b1d22f6f 100644 --- a/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/PrinciplesStatusTable.js +++ b/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 ; + return ; }, maxWidth: MAX_WIDTH_STATUS_COLUMN },