Merge pull request #1334 from guardicore/ransomware_mode_at_sidebar

Island UI: add island scenario/mode to side navigation

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

@@ -29,6 +29,8 @@ import {CompletedSteps} from "./side-menu/CompletedSteps";
 import Timeout = NodeJS.Timeout;
 import IslandHttpClient from "./IslandHttpClient";
 import _ from "lodash";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faFileCode, faLightbulb} from "@fortawesome/free-solid-svg-icons";
 
 
 let notificationIcon = require('../images/notification-logo-512x512.png');
@@ -180,18 +182,35 @@ class AppComponent extends AuthComponent {
 
   getDefaultReport() {
     if(this.state.islandMode === 'ransomware'){
-      return Routes.RansomwareReport
+      return Routes.RansomwareReport;
     } else {
-      return Routes.SecurityReport
+      return Routes.SecurityReport;
     }
   }
 
+  getIslandModeTitle(){
+    if(this.state.islandMode === 'ransomware'){
+      return this.formIslandModeTitle("Ransomware", faFileCode);
+    } else {
+      return this.formIslandModeTitle("Custom", faLightbulb);
+    }
+  }
+
+  formIslandModeTitle(title, icon){
+    return (<>
+      <h5 className={'text-muted'}>
+        <FontAwesomeIcon icon={icon} /> {title}
+      </h5>
+    </>)
+  }
+
   render() {
 
     let defaultSideNavProps = {completedSteps: this.state.completedSteps,
                                onStatusChange: this.updateStatus,
                                islandMode: this.state.islandMode,
-                               defaultReport: this.getDefaultReport()}
+                               defaultReport: this.getDefaultReport(),
+                               sideNavHeader: this.getIslandModeTitle()}
 
     return (
       <Router>

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {ReactFragment} from 'react';
 import {NavLink} from 'react-router-dom';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faCheck} from '@fortawesome/free-solid-svg-icons/faCheck';
@@ -18,11 +18,15 @@ const infectionMonkeyImage = require('../images/infection-monkey.svg');
 type Props = {
   disabled?: boolean,
   completedSteps: CompletedSteps,
-  defaultReport: string
+  defaultReport: string,
+  header?: ReactFragment
 }
 
 
-const SideNavComponent = ({disabled, completedSteps, defaultReport}: Props) => {
+const SideNavComponent = ({disabled,
+                           completedSteps,
+                           defaultReport,
+                           header=null}: Props) => {
 
   return (
     <>
@@ -34,6 +38,14 @@ const SideNavComponent = ({disabled, completedSteps, defaultReport}: Props) => {
       </NavLink>
 
       <ul className='navigation'>
+        {(header !== null) &&
+        <>
+          <li>
+            {header}
+          </li>
+          <hr/>
+        </>}
+
         <li>
           <NavLink to={Routes.RunMonkeyPage} className={getNavLinkClass()}>
             <span className='number'>1.</span>

monkey/monkey_island/cc/ui/src/components/layouts/SidebarLayoutComponent.tsx

@@ -7,6 +7,7 @@ const SidebarLayoutComponent = ({component: Component,
                                   sideNavDisabled = false,
                                   completedSteps = null,
                                   defaultReport = '',
+                                  sideNavHeader = (<></>),
                                   ...other
                                 }) => (
   <Route {...other} render={() => {
@@ -15,7 +16,8 @@ const SidebarLayoutComponent = ({component: Component,
         <Col sm={3} md={3} lg={3} xl={2} className='sidebar'>
           <SideNavComponent disabled={sideNavDisabled}
                             completedSteps={completedSteps}
-                            defaultReport={defaultReport}/>
+                            defaultReport={defaultReport}
+                            header={sideNavHeader}/>
         </Col>
         <Component {...other} />
       </Row>)