diff --git a/monkey/monkey_island/cc/ui/src/components/Main.tsx b/monkey/monkey_island/cc/ui/src/components/Main.tsx index fb2733301..7635f3e4c 100644 --- a/monkey/monkey_island/cc/ui/src/components/Main.tsx +++ b/monkey/monkey_island/cc/ui/src/components/Main.tsx @@ -33,7 +33,7 @@ import _ from "lodash"; let notificationIcon = require('../images/notification-logo-512x512.png'); -const Routes = { +export const Routes = { LandingPage: '/landing-page', GettingStartedPage: '/', Report: '/report', @@ -178,7 +178,21 @@ class AppComponent extends AuthComponent { clearInterval(this.interval); } + getDefaultReport() { + if(this.state.islandMode === 'ransomware'){ + return Routes.RansomwareReport + } else { + return Routes.SecurityReport + } + } + render() { + + let defaultSideNavProps = {completedSteps: this.state.completedSteps, + onStatusChange: this.updateStatus, + islandMode: this.state.islandMode, + defaultReport: this.getDefaultReport()} + return ( @@ -191,50 +205,39 @@ class AppComponent extends AuthComponent { completedSteps={new CompletedSteps()} onStatusChange={this.updateStatus}/>)} {this.renderRoute(Routes.GettingStartedPage, - , + , true)} {this.renderRoute(Routes.ConfigurePage, - )} + )} {this.renderRoute(Routes.RunMonkeyPage, - )} + )} {this.renderRoute(Routes.MapPage, - )} + )} {this.renderRoute(Routes.TelemetryPage, - )} + )} {this.renderRoute(Routes.StartOverPage, - )} - {this.redirectTo(Routes.Report, Routes.SecurityReport)} + )} + {this.redirectToReport()} {this.renderRoute(Routes.SecurityReport, )} + islandMode={this.state.islandMode} + {...defaultSideNavProps}/>)} {this.renderRoute(Routes.AttackReport, )} + islandMode={this.state.islandMode} + {...defaultSideNavProps}/>)} {this.renderRoute(Routes.ZeroTrustReport, )} + islandMode={this.state.islandMode} + {...defaultSideNavProps}/>)} {this.renderRoute(Routes.RansomwareReport, )} + islandMode={this.state.islandMode} + {...defaultSideNavProps}/>)} {this.renderRoute(Routes.LicensePage, )} + islandMode={this.state.islandMode} + {...defaultSideNavProps}/>)} @@ -242,6 +245,14 @@ class AppComponent extends AuthComponent { ); } + redirectToReport() { + if (this.state.islandMode === 'ransomware') { + return this.redirectTo(Routes.Report, Routes.RansomwareReport) + } else { + return this.redirectTo(Routes.Report, Routes.SecurityReport) + } + } + showInfectionDoneNotification() { if (this.shouldShowNotification()) { const hostname = window.location.hostname; diff --git a/monkey/monkey_island/cc/ui/src/components/SideNavComponent.tsx b/monkey/monkey_island/cc/ui/src/components/SideNavComponent.tsx index bd0bde5a1..450103bb9 100644 --- a/monkey/monkey_island/cc/ui/src/components/SideNavComponent.tsx +++ b/monkey/monkey_island/cc/ui/src/components/SideNavComponent.tsx @@ -7,7 +7,7 @@ import {faExternalLinkAlt} from '@fortawesome/free-solid-svg-icons'; import VersionComponent from './side-menu/VersionComponent'; import '../styles/components/SideNav.scss'; import {CompletedSteps} from "./side-menu/CompletedSteps"; -import {isReportRoute} from "./Main"; +import {isReportRoute, Routes} from "./Main"; const guardicoreLogoImage = require('../images/guardicore-logo.png'); @@ -17,15 +17,16 @@ const infectionMonkeyImage = require('../images/infection-monkey.svg'); type Props = { disabled?: boolean, - completedSteps: CompletedSteps + completedSteps: CompletedSteps, + defaultReport: string } -const SideNavComponent = ({disabled=false, completedSteps}: Props) => { +const SideNavComponent = ({disabled, completedSteps, defaultReport}: Props) => { return ( <> - +
logo Infection Monkey @@ -34,7 +35,7 @@ const SideNavComponent = ({disabled=false, completedSteps}: Props) => {
  • - + 1. Run Monkey {completedSteps.runMonkey ? @@ -43,7 +44,7 @@ const SideNavComponent = ({disabled=false, completedSteps}: Props) => {
  • - + 2. Infection Map {completedSteps.infectionDone ? @@ -52,7 +53,7 @@ const SideNavComponent = ({disabled=false, completedSteps}: Props) => {
  • - { return (isReportRoute(location.pathname)) @@ -65,7 +66,7 @@ const SideNavComponent = ({disabled=false, completedSteps}: Props) => {
  • - + Start Over @@ -74,7 +75,7 @@ const SideNavComponent = ({disabled=false, completedSteps}: Props) => {
      -
    • Configuration
      • @@ -96,7 +97,7 @@ const SideNavComponent = ({disabled=false, completedSteps}: Props) => { Documentation
      - License + License
); diff --git a/monkey/monkey_island/cc/ui/src/components/layouts/SidebarLayoutComponent.tsx b/monkey/monkey_island/cc/ui/src/components/layouts/SidebarLayoutComponent.tsx index 45e82e60c..746641958 100644 --- a/monkey/monkey_island/cc/ui/src/components/layouts/SidebarLayoutComponent.tsx +++ b/monkey/monkey_island/cc/ui/src/components/layouts/SidebarLayoutComponent.tsx @@ -6,13 +6,16 @@ import {Col, Row} from 'react-bootstrap'; const SidebarLayoutComponent = ({component: Component, sideNavDisabled = false, completedSteps = null, + defaultReport = '', ...other }) => ( { return ( - + ) 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 aacc70328..c45dbe7e7 100644 --- a/monkey/monkey_island/cc/ui/src/components/pages/ReportPage.js +++ b/monkey/monkey_island/cc/ui/src/components/pages/ReportPage.js @@ -16,6 +16,7 @@ class ReportPageComponent extends AuthComponent { constructor(props) { super(props); this.sections = ['security', 'zeroTrust', 'attack', 'ransomware']; + this.state = { securityReport: {}, attackReport: {}, @@ -28,6 +29,7 @@ class ReportPageComponent extends AuthComponent { {key: 'zeroTrust', title: 'Zero trust report'}, {key: 'attack', title: 'ATT&CK report'}] }; + } static selectReport(reports) { @@ -65,9 +67,6 @@ class ReportPageComponent extends AuthComponent { ransomwareReport: res }); }); - if (this.shouldShowRansomwareReport(this.state.ransomwareReport)) { - this.addRansomwareReportTab(); - } } } @@ -96,32 +95,6 @@ class ReportPageComponent extends AuthComponent { return ztReport }; - shouldShowRansomwareReport(report) { // TODO: Add proper check - if (report) { - return true; - } - } - - addRansomwareReportTab() { // TODO: Fetch mode from API endpoint - let ransomwareTab = {key: 'ransomware', title: 'Ransomware report'}; - - // let mode = ""; - // this.authFetch('/api/mode') - // .then(res => res.json()) - // .then(res => { - // mode = res.mode - // } - // ); - - let mode = 'ransomware'; - if (mode === 'ransomware') { - this.state.orderedSections.splice(0, 0, ransomwareTab); - } - else { - this.state.orderedSections.push(ransomwareTab); - } - } - componentWillUnmount() { clearInterval(this.state.ztReportRefreshInterval); } @@ -187,9 +160,32 @@ class ReportPageComponent extends AuthComponent { } } + addRansomwareTab() { + let ransomwareTab = {key: 'ransomware', title: 'Ransomware report'}; + if(this.isRansomwareTabMissing(ransomwareTab)){ + if (this.props.islandMode === 'ransomware') { + this.state.orderedSections.splice(0, 0, ransomwareTab); + } + else { + this.state.orderedSections.push(ransomwareTab); + } + } + } + + isRansomwareTabMissing(ransomwareTab) { + return ( + this.props.islandMode !== undefined && + !this.state.orderedSections.some(tab => + (tab.key === ransomwareTab.key + && tab.title === ransomwareTab.title) + )); + } + render() { let content; + this.addRansomwareTab(); + if (this.state.runStarted) { content = this.getReportContent(); } else {