diff --git a/monkey/monkey_island/cc/ui/src/components/Main.tsx b/monkey/monkey_island/cc/ui/src/components/Main.tsx
index 7635f3e4c..5216245d7 100644
--- a/monkey/monkey_island/cc/ui/src/components/Main.tsx
+++ b/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 (<>
+
+ {title}
+
+ >)
+ }
+
render() {
let defaultSideNavProps = {completedSteps: this.state.completedSteps,
onStatusChange: this.updateStatus,
islandMode: this.state.islandMode,
- defaultReport: this.getDefaultReport()}
+ defaultReport: this.getDefaultReport(),
+ sideNavHeader: this.getIslandModeTitle()}
return (
diff --git a/monkey/monkey_island/cc/ui/src/components/SideNavComponent.tsx b/monkey/monkey_island/cc/ui/src/components/SideNavComponent.tsx
index 450103bb9..f4f1aef20 100644
--- a/monkey/monkey_island/cc/ui/src/components/SideNavComponent.tsx
+++ b/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) => {
+ {(header !== null) &&
+ <>
+ -
+ {header}
+
+
+ >}
+
-
1.
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 746641958..28bdda439 100644
--- a/monkey/monkey_island/cc/ui/src/components/layouts/SidebarLayoutComponent.tsx
+++ b/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
}) => (
{
@@ -15,7 +16,8 @@ const SidebarLayoutComponent = ({component: Component,
+ defaultReport={defaultReport}
+ header={sideNavHeader}/>
)