Island UI: improve the side navigation with an icon of the chosen scenario

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,20 +182,28 @@ class AppComponent extends AuthComponent {
 
   getDefaultReport() {
     if(this.state.islandMode === 'ransomware'){
-      return Routes.RansomwareReport
+      return Routes.RansomwareReport;
     } else {
-      return Routes.SecurityReport
+      return Routes.SecurityReport;
     }
   }
 
-  getIslandModeTitle() {
+  getIslandModeTitle(){
     if(this.state.islandMode === 'ransomware'){
-      return "Ransomware"
+      return this.formIslandModeTitle("Ransomware", faFileCode);
     } else {
-      return "Custom"
+      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,

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';
@@ -19,14 +19,14 @@ type Props = {
   disabled?: boolean,
   completedSteps: CompletedSteps,
   defaultReport: string,
-  header?: string
+  header?: ReactFragment
 }
 
 
 const SideNavComponent = ({disabled,
                            completedSteps,
                            defaultReport,
-                           header=''}: Props) => {
+                           header=null}: Props) => {
 
   return (
     <>
@@ -38,10 +38,10 @@ const SideNavComponent = ({disabled,
       </NavLink>
 
       <ul className='navigation'>
-        {(header !== '') &&
+        {(header !== null) &&
         <>
           <li>
-            <h4 className={'text-muted'}>{header}</h4>
+            {header}
           </li>
           <hr/>
         </>}

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

@@ -7,7 +7,7 @@ const SidebarLayoutComponent = ({component: Component,
                                   sideNavDisabled = false,
                                   completedSteps = null,
                                   defaultReport = '',
-                                  sideNavHeader = '',
+                                  sideNavHeader = (<></>),
                                   ...other
                                 }) => (
   <Route {...other} render={() => {