diff --git a/monkey/monkey_island/cc/ui/src/components/Main.tsx b/monkey/monkey_island/cc/ui/src/components/Main.tsx index a8ac4ea7b..ae9a46534 100644 --- a/monkey/monkey_island/cc/ui/src/components/Main.tsx +++ b/monkey/monkey_island/cc/ui/src/components/Main.tsx @@ -29,6 +29,7 @@ import {DisabledSidebarLayoutComponent} from "./layouts/DisabledSidebarLayoutCom import {CompletedSteps} from "./side-menu/CompletedSteps"; import Timeout = NodeJS.Timeout; import IslandHttpClient from "./IslandHttpClient"; +import _ from "lodash"; let notificationIcon = require('../images/notification-logo-512x512.png'); @@ -91,18 +92,13 @@ class AppComponent extends AuthComponent { this.authFetch('/api') .then(res => res.json()) .then(res => { + let completedSteps = CompletedSteps.buildFromResponse(res.completed_steps); // This check is used to prevent unnecessary re-rendering - let isChanged = false; - for (let step in this.state.completedSteps) { - if (this.state.completedSteps[step] !== res['completed_steps'][step]) { - isChanged = true; - break; - } - } - if (isChanged) { - this.setState({completedSteps: res['completed_steps']}); - this.showInfectionDoneNotification(); + if (_.isEqual(this.state.completedSteps, completedSteps)) { + return; } + this.setState({completedSteps: completedSteps}); + this.showInfectionDoneNotification(); }); } ) diff --git a/monkey/monkey_island/cc/ui/src/components/SideNavComponent.tsx b/monkey/monkey_island/cc/ui/src/components/SideNavComponent.tsx index 3eb8bf38e..bd0bde5a1 100644 --- a/monkey/monkey_island/cc/ui/src/components/SideNavComponent.tsx +++ b/monkey/monkey_island/cc/ui/src/components/SideNavComponent.tsx @@ -22,91 +22,92 @@ type Props = { const SideNavComponent = ({disabled=false, completedSteps}: Props) => { - return ( - <> - -
- logo - Infection Monkey -
-
- - -
- - -
-
- Powered by - - GuardiCore - + return ( + <> + +
+ logo + Infection Monkey
-
- - Documentation - -
- License -
- - ); +
- function getNavLinkClass() { - if(disabled){ - return `nav-link disabled` - } else { - return '' - } + + +
+ + +
+
+ Powered by + + GuardiCore + +
+
+ + Documentation + +
+ License +
+ + ); + + function getNavLinkClass() { + if(disabled){ + return `nav-link disabled` + } else { + return '' } + } } export default SideNavComponent; diff --git a/monkey/monkey_island/cc/ui/src/components/side-menu/CompletedSteps.tsx b/monkey/monkey_island/cc/ui/src/components/side-menu/CompletedSteps.tsx index 342b09d0b..bff4565f3 100644 --- a/monkey/monkey_island/cc/ui/src/components/side-menu/CompletedSteps.tsx +++ b/monkey/monkey_island/cc/ui/src/components/side-menu/CompletedSteps.tsx @@ -9,14 +9,24 @@ export class CompletedSteps { public constructor(runServer?: boolean, runMonkey?: boolean, infectinDone?: boolean, - reportDone?: boolean, - isLoggedIn?: boolean, - needsRegistration?: boolean) { + reportDone?: boolean) { this.runServer = runServer || false; this.runMonkey = runMonkey || false; this.infectionDone = infectinDone || false; this.reportDone = reportDone || false; - this.isLoggedIn = isLoggedIn || false; - this.needsRegistration = needsRegistration || false; + } + + static buildFromResponse(response: CompletedStepsRequest) { + return new CompletedSteps(response.run_server, + response.run_monkey, + response.infection_done, + response.report_done); } } + +type CompletedStepsRequest = { + run_server: boolean, + run_monkey: boolean, + infection_done: boolean, + report_done: boolean +}