Island UI: change report side nav button to show ransomware report as default report when ransomware scenario is chosen

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

@@ -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 (
       <Router>
         <Container fluid>
@@ -191,50 +205,39 @@ class AppComponent extends AuthComponent {
                                       completedSteps={new CompletedSteps()}
                                       onStatusChange={this.updateStatus}/>)}
             {this.renderRoute(Routes.GettingStartedPage,
-              <SidebarLayoutComponent component={GettingStartedPage}
+              <SidebarLayoutComponent component={GettingStartedPage} {...defaultSideNavProps}/>,
-                                       completedSteps={this.state.completedSteps}
-                                       onStatusChange={this.updateStatus}
-              />,
               true)}
             {this.renderRoute(Routes.ConfigurePage,
-              <SidebarLayoutComponent component={ConfigurePage}
+              <SidebarLayoutComponent component={ConfigurePage} {...defaultSideNavProps}/>)}
-                                       islandMode={this.state.islandMode}
-                                       onStatusChange={this.updateStatus}
-                                       completedSteps={this.state.completedSteps}/>)}
             {this.renderRoute(Routes.RunMonkeyPage,
-              <SidebarLayoutComponent component={RunMonkeyPage}
+              <SidebarLayoutComponent component={RunMonkeyPage} {...defaultSideNavProps}/>)}
-                                       islandMode={this.state.islandMode}
-                                       onStatusChange={this.updateStatus}
-                                       completedSteps={this.state.completedSteps}/>)}
             {this.renderRoute(Routes.MapPage,
-              <SidebarLayoutComponent component={MapPage}
+              <SidebarLayoutComponent component={MapPage} {...defaultSideNavProps}/>)}
-                                       onStatusChange={this.updateStatus}
-                                       completedSteps={this.state.completedSteps}/>)}
             {this.renderRoute(Routes.TelemetryPage,
-              <SidebarLayoutComponent component={TelemetryPage}
+              <SidebarLayoutComponent component={TelemetryPage} {...defaultSideNavProps}/>)}
-                                       onStatusChange={this.updateStatus}
-                                       completedSteps={this.state.completedSteps}/>)}
             {this.renderRoute(Routes.StartOverPage,
-              <SidebarLayoutComponent component={StartOverPage}
+              <SidebarLayoutComponent component={StartOverPage} {...defaultSideNavProps}/>)}
-                                       onStatusChange={this.updateStatus}
+            {this.redirectToReport()}
-                                       completedSteps={this.state.completedSteps}/>)}
-            {this.redirectTo(Routes.Report, Routes.SecurityReport)}
             {this.renderRoute(Routes.SecurityReport,
               <SidebarLayoutComponent component={ReportPage}
-                                       completedSteps={this.state.completedSteps}/>)}
+                                      islandMode={this.state.islandMode}
+                                      {...defaultSideNavProps}/>)}
             {this.renderRoute(Routes.AttackReport,
               <SidebarLayoutComponent component={ReportPage}
-                                       completedSteps={this.state.completedSteps}/>)}
+                                      islandMode={this.state.islandMode}
+                                      {...defaultSideNavProps}/>)}
             {this.renderRoute(Routes.ZeroTrustReport,
               <SidebarLayoutComponent component={ReportPage}
-                                       completedSteps={this.state.completedSteps}/>)}
+                                      islandMode={this.state.islandMode}
+                                      {...defaultSideNavProps}/>)}
             {this.renderRoute(Routes.RansomwareReport,
               <SidebarLayoutComponent component={ReportPage}
-                                       completedSteps={this.state.completedSteps}/>)}
+                                      islandMode={this.state.islandMode}
+                                      {...defaultSideNavProps}/>)}
             {this.renderRoute(Routes.LicensePage,
               <SidebarLayoutComponent component={LicensePage}
-                                       onStatusChange={this.updateStatus}
+                                      islandMode={this.state.islandMode}
-                                       completedSteps={this.state.completedSteps}/>)}
+                                      {...defaultSideNavProps}/>)}
             <Route component={NotFoundPage}/>
           </Switch>
         </Container>
@@ -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;

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 (
     <>
-      <NavLink to={'/'} exact={true}>
+      <NavLink to={Routes.GettingStartedPage} exact={true}>
         <div className='header'>
           <img alt='logo' src={logoImage} style={{width: '5vw', margin: '15px'}}/>
           <img src={infectionMonkeyImage} style={{width: '15vw'}} alt='Infection Monkey'/>
@@ -34,7 +35,7 @@ const SideNavComponent = ({disabled=false, completedSteps}: Props) => {
 
       <ul className='navigation'>
         <li>
-          <NavLink to='/run-monkey' className={getNavLinkClass()}>
+          <NavLink to={Routes.RunMonkeyPage} className={getNavLinkClass()}>
             <span className='number'>1.</span>
             Run Monkey
             {completedSteps.runMonkey ?
@@ -43,7 +44,7 @@ const SideNavComponent = ({disabled=false, completedSteps}: Props) => {
           </NavLink>
         </li>
         <li>
-          <NavLink to='/infection/map' className={getNavLinkClass()}>
+          <NavLink to={Routes.MapPage} className={getNavLinkClass()}>
             <span className='number'>2.</span>
             Infection Map
             {completedSteps.infectionDone ?
@@ -52,7 +53,7 @@ const SideNavComponent = ({disabled=false, completedSteps}: Props) => {
           </NavLink>
         </li>
         <li>
-          <NavLink to='/report/security'
+          <NavLink to={defaultReport}
                    className={getNavLinkClass()}
                    isActive={(_match, location) => {
                      return (isReportRoute(location.pathname))
@@ -65,7 +66,7 @@ const SideNavComponent = ({disabled=false, completedSteps}: Props) => {
           </NavLink>
         </li>
         <li>
-          <NavLink to='/start-over' className={getNavLinkClass()}>
+          <NavLink to={Routes.StartOverPage} className={getNavLinkClass()}>
             <span className='number'><FontAwesomeIcon icon={faUndo} style={{'marginLeft': '-1px'}}/></span>
             Start Over
           </NavLink>
@@ -74,7 +75,7 @@ const SideNavComponent = ({disabled=false, completedSteps}: Props) => {
 
       <hr/>
       <ul>
-        <li><NavLink to='/configure'
+        <li><NavLink to={Routes.ConfigurePage}
                      className={getNavLinkClass()}>
           Configuration
         </NavLink></li>
@@ -96,7 +97,7 @@ const SideNavComponent = ({disabled=false, completedSteps}: Props) => {
           <FontAwesomeIcon icon={faExternalLinkAlt} /> Documentation
         </a>
         <br/>
-        <NavLink to='/license'>License</NavLink>
+        <NavLink to={Routes.LicensePage}>License</NavLink>
       </div>
       <VersionComponent/>
     </>);

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
                                 }) => (
   <Route {...other} render={() => {
     return (
       <Row>
         <Col sm={3} md={3} lg={3} xl={2} className='sidebar'>
-          <SideNavComponent disabled={sideNavDisabled} completedSteps={completedSteps}/>
+          <SideNavComponent disabled={sideNavDisabled}
+                            completedSteps={completedSteps}
+                            defaultReport={defaultReport}/>
         </Col>
         <Component {...other} />
       </Row>)