From aed3a8358db935378df037a79530f9e873d311bd Mon Sep 17 00:00:00 2001 From: Ilija Lazoroski Date: Fri, 23 Jul 2021 16:53:18 +0200 Subject: [PATCH 1/4] UI: Landing page face lift --- .../cc/ui/src/components/Main.tsx | 1 + .../layouts/SidebarLayoutComponent.tsx | 5 +- .../ui/src/components/pages/LandingPage.tsx | 58 ++++++++++++++++++- .../cc/ui/src/styles/pages/LandingPage.scss | 18 ++++++ 4 files changed, 77 insertions(+), 5 deletions(-) diff --git a/monkey/monkey_island/cc/ui/src/components/Main.tsx b/monkey/monkey_island/cc/ui/src/components/Main.tsx index 23b126cae..65ecfc6be 100644 --- a/monkey/monkey_island/cc/ui/src/components/Main.tsx +++ b/monkey/monkey_island/cc/ui/src/components/Main.tsx @@ -221,6 +221,7 @@ class AppComponent extends AuthComponent { ()}/> {this.renderRoute(Routes.LandingPage, )} 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 28bdda439..d862bb592 100644 --- a/monkey/monkey_island/cc/ui/src/components/layouts/SidebarLayoutComponent.tsx +++ b/monkey/monkey_island/cc/ui/src/components/layouts/SidebarLayoutComponent.tsx @@ -4,6 +4,7 @@ import SideNavComponent from '../SideNavComponent.tsx'; import {Col, Row} from 'react-bootstrap'; const SidebarLayoutComponent = ({component: Component, + sideNavShow = true, sideNavDisabled = false, completedSteps = null, defaultReport = '', @@ -13,12 +14,12 @@ const SidebarLayoutComponent = ({component: Component, { return ( - + {sideNavShow && - + } ) }}/> diff --git a/monkey/monkey_island/cc/ui/src/components/pages/LandingPage.tsx b/monkey/monkey_island/cc/ui/src/components/pages/LandingPage.tsx index 308504b50..3e8845380 100644 --- a/monkey/monkey_island/cc/ui/src/components/pages/LandingPage.tsx +++ b/monkey/monkey_island/cc/ui/src/components/pages/LandingPage.tsx @@ -2,30 +2,45 @@ import React from 'react'; import {Col, Row} from 'react-bootstrap'; import {Link} from 'react-router-dom'; import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; +import {faExternalLinkAlt} from '@fortawesome/free-solid-svg-icons'; import {faFileCode, faLightbulb} from '@fortawesome/free-solid-svg-icons'; import '../../styles/pages/LandingPage.scss'; import IslandHttpClient from "../IslandHttpClient"; +import VersionComponent from '../side-menu/VersionComponent'; +import {Routes} from "../Main"; +const guardicoreLogoImage = require('../../images/guardicore-logo.png'); const LandingPageComponent = (props) => { return ( + <> -

Welcome to the Monkey Island Server

-
- +

Breach & Attack Simulation

+
+
+ + +
+ + + ); + function ScenarioButtons() { return (

Choose a scenario:

+
+
+ Check monkey documentation hub for better explanation + on + Ransomware + and + Custom + simulations. +
+ + ); +} + +function GuardicoreLogo() { + return ( + <> +
+ Powered by + + GuardiCore + +
+
+ + Documentation + +
+ License +
+ + + ); +} + export default LandingPageComponent; diff --git a/monkey/monkey_island/cc/ui/src/styles/pages/LandingPage.scss b/monkey/monkey_island/cc/ui/src/styles/pages/LandingPage.scss index 21daf6b29..af203a33a 100644 --- a/monkey/monkey_island/cc/ui/src/styles/pages/LandingPage.scss +++ b/monkey/monkey_island/cc/ui/src/styles/pages/LandingPage.scss @@ -1,4 +1,5 @@ .landing-page h1.page-title { + margin-top: 20px; margin-bottom: 20px; } @@ -7,10 +8,27 @@ margin-left: 12px; } +.landing-page .scenario-info { + margin-bottom: 20px; +} + .landing-page .monkey-description-title { margin-top: 30px; } .landing-page .d-block { height: 100%; + +.guardicore-logo { + margin-bottom: 0.5em; + position: absolute !important; + bottom: 0; +} + +.guardicore-logo .license-text { + position: relative; +} + +.guardicore-logo .version-text { + position: relative; } From 9119a49bff8a3c23e9250ec7a4ffbe292c0fa3d0 Mon Sep 17 00:00:00 2001 From: Ilija Lazoroski Date: Mon, 26 Jul 2021 18:46:31 +0200 Subject: [PATCH 2/4] UI: Fix alignment in landing page. Remove dupplicate code for guardicore logo. Rewrite doc links. --- .../cc/ui/src/components/SideNavComponent.tsx | 19 +-------- .../ui/src/components/logo/LogoComponent.js | 32 +++++++++++++++ .../{side-menu => logo}/VersionComponent.js | 0 .../ui/src/components/pages/LandingPage.tsx | 41 ++++--------------- .../cc/ui/src/styles/pages/LandingPage.scss | 1 + 5 files changed, 42 insertions(+), 51 deletions(-) create mode 100644 monkey/monkey_island/cc/ui/src/components/logo/LogoComponent.js rename monkey/monkey_island/cc/ui/src/components/{side-menu => logo}/VersionComponent.js (100%) diff --git a/monkey/monkey_island/cc/ui/src/components/SideNavComponent.tsx b/monkey/monkey_island/cc/ui/src/components/SideNavComponent.tsx index f4f1aef20..f3c8e3a94 100644 --- a/monkey/monkey_island/cc/ui/src/components/SideNavComponent.tsx +++ b/monkey/monkey_island/cc/ui/src/components/SideNavComponent.tsx @@ -4,16 +4,15 @@ import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; import {faCheck} from '@fortawesome/free-solid-svg-icons/faCheck'; import {faUndo} from '@fortawesome/free-solid-svg-icons/faUndo'; 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, Routes} from "./Main"; -const guardicoreLogoImage = require('../images/guardicore-logo.png'); const logoImage = require('../images/monkey-icon.svg'); const infectionMonkeyImage = require('../images/infection-monkey.svg'); +import Logo from "./logo/LogoComponent"; type Props = { disabled?: boolean, @@ -97,21 +96,7 @@ const SideNavComponent = ({disabled, -
-
- Powered by - - GuardiCore - -
-
- - Documentation - -
- License -
- + ); function getNavLinkClass() { diff --git a/monkey/monkey_island/cc/ui/src/components/logo/LogoComponent.js b/monkey/monkey_island/cc/ui/src/components/logo/LogoComponent.js new file mode 100644 index 000000000..0fb961bf9 --- /dev/null +++ b/monkey/monkey_island/cc/ui/src/components/logo/LogoComponent.js @@ -0,0 +1,32 @@ +import React from 'react'; +import {Link} from 'react-router-dom'; +import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; +import {faExternalLinkAlt} from '@fortawesome/free-solid-svg-icons'; +import {Routes} from '../Main'; +import VersionComponent from './VersionComponent'; + +const guardicoreLogoImage = require('../../images/guardicore-logo.png'); + +function Logo() { + return ( + <> +
+
+ Powered by + + GuardiCore + +
+
+ + Documentation + +
+ License +
+ + + ); +} + +export default Logo; diff --git a/monkey/monkey_island/cc/ui/src/components/side-menu/VersionComponent.js b/monkey/monkey_island/cc/ui/src/components/logo/VersionComponent.js similarity index 100% rename from monkey/monkey_island/cc/ui/src/components/side-menu/VersionComponent.js rename to monkey/monkey_island/cc/ui/src/components/logo/VersionComponent.js diff --git a/monkey/monkey_island/cc/ui/src/components/pages/LandingPage.tsx b/monkey/monkey_island/cc/ui/src/components/pages/LandingPage.tsx index 3e8845380..c6e845aa1 100644 --- a/monkey/monkey_island/cc/ui/src/components/pages/LandingPage.tsx +++ b/monkey/monkey_island/cc/ui/src/components/pages/LandingPage.tsx @@ -2,21 +2,18 @@ import React from 'react'; import {Col, Row} from 'react-bootstrap'; import {Link} from 'react-router-dom'; import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; -import {faExternalLinkAlt} from '@fortawesome/free-solid-svg-icons'; import {faFileCode, faLightbulb} from '@fortawesome/free-solid-svg-icons'; import '../../styles/pages/LandingPage.scss'; import IslandHttpClient from "../IslandHttpClient"; -import VersionComponent from '../side-menu/VersionComponent'; -import {Routes} from "../Main"; -const guardicoreLogoImage = require('../../images/guardicore-logo.png'); +import Logo from "../logo/LogoComponent"; const LandingPageComponent = (props) => { return ( <>

Breach & Attack Simulation

@@ -26,10 +23,9 @@ const LandingPageComponent = (props) => { -
- + ); @@ -94,36 +90,13 @@ function ScenarioInfo() { return ( <>
- Check monkey documentation hub for better explanation + Check the Infection Monkey documentation hub for more information on - Ransomware - and - Custom - simulations. + simulations + .
); } -function GuardicoreLogo() { - return ( - <> -
- Powered by - - GuardiCore - -
-
- - Documentation - -
- License -
- - - ); -} - export default LandingPageComponent; diff --git a/monkey/monkey_island/cc/ui/src/styles/pages/LandingPage.scss b/monkey/monkey_island/cc/ui/src/styles/pages/LandingPage.scss index af203a33a..1651c887a 100644 --- a/monkey/monkey_island/cc/ui/src/styles/pages/LandingPage.scss +++ b/monkey/monkey_island/cc/ui/src/styles/pages/LandingPage.scss @@ -18,6 +18,7 @@ .landing-page .d-block { height: 100%; +} .guardicore-logo { margin-bottom: 0.5em; From 61229f259b2fcf7ef83f486a430940e71e2c1026 Mon Sep 17 00:00:00 2001 From: Ilija Lazoroski Date: Tue, 27 Jul 2021 11:52:25 +0200 Subject: [PATCH 3/4] UI: Add tsparticles to landing-page. Stretched the landing page main screen --- .../ui/src/components/pages/LandingPage.tsx | 28 ++++++++++--------- .../ParticleBackground.scss | 2 +- .../cc/ui/src/styles/pages/LandingPage.scss | 13 +++++++-- 3 files changed, 26 insertions(+), 17 deletions(-) diff --git a/monkey/monkey_island/cc/ui/src/components/pages/LandingPage.tsx b/monkey/monkey_island/cc/ui/src/components/pages/LandingPage.tsx index c6e845aa1..66e6f39ca 100644 --- a/monkey/monkey_island/cc/ui/src/components/pages/LandingPage.tsx +++ b/monkey/monkey_island/cc/ui/src/components/pages/LandingPage.tsx @@ -1,32 +1,34 @@ import React from 'react'; -import {Col, Row} from 'react-bootstrap'; +import {Container,Col, Row} from 'react-bootstrap'; import {Link} from 'react-router-dom'; import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; import {faFileCode, faLightbulb} from '@fortawesome/free-solid-svg-icons'; import '../../styles/pages/LandingPage.scss'; import IslandHttpClient from "../IslandHttpClient"; +import ParticleBackground from '../ui-components/ParticleBackground'; import Logo from "../logo/LogoComponent"; const LandingPageComponent = (props) => { return ( <> + -

Breach & Attack Simulation

-
- -
-
+

Breach & Attack Simulation

+
+ +
+
+
+
+ + + - - - ); @@ -86,13 +88,13 @@ function MonkeyInfo() { } function ScenarioInfo() { - // TODO change links when added to documentation + // TODO change link when scenarios are added to documentation return ( <>
Check the Infection Monkey documentation hub for more information on - simulations + scenarios .
diff --git a/monkey/monkey_island/cc/ui/src/styles/components/particle-component/ParticleBackground.scss b/monkey/monkey_island/cc/ui/src/styles/components/particle-component/ParticleBackground.scss index 0aeec94b2..4aca4d4a8 100644 --- a/monkey/monkey_island/cc/ui/src/styles/components/particle-component/ParticleBackground.scss +++ b/monkey/monkey_island/cc/ui/src/styles/components/particle-component/ParticleBackground.scss @@ -1,5 +1,5 @@ .particle-background { - position: absolute; + position: fixed; top: 0; left: 0; z-index: -100; diff --git a/monkey/monkey_island/cc/ui/src/styles/pages/LandingPage.scss b/monkey/monkey_island/cc/ui/src/styles/pages/LandingPage.scss index 1651c887a..14a77725f 100644 --- a/monkey/monkey_island/cc/ui/src/styles/pages/LandingPage.scss +++ b/monkey/monkey_island/cc/ui/src/styles/pages/LandingPage.scss @@ -1,3 +1,10 @@ +.landing-page { + background-color: rgba(255, 255, 255, 0.89); + position: absolute !important; + height: 100%; + bottom: 0; +} + .landing-page h1.page-title { margin-top: 20px; margin-bottom: 20px; @@ -20,10 +27,10 @@ height: 100%; } -.guardicore-logo { - margin-bottom: 0.5em; - position: absolute !important; +.landing-page .guardicore-logo { + position: absolute; bottom: 0; + left: 0 !important; } .guardicore-logo .license-text { From eccd1ea5d0b27f4b9080b31e11647d6f1a214fa9 Mon Sep 17 00:00:00 2001 From: Ilija Lazoroski Date: Tue, 27 Jul 2021 13:05:28 +0200 Subject: [PATCH 4/4] UI: Fix layout on landing page. --- .../monkey_island/cc/ui/src/components/pages/LandingPage.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/monkey/monkey_island/cc/ui/src/components/pages/LandingPage.tsx b/monkey/monkey_island/cc/ui/src/components/pages/LandingPage.tsx index 66e6f39ca..882e838c7 100644 --- a/monkey/monkey_island/cc/ui/src/components/pages/LandingPage.tsx +++ b/monkey/monkey_island/cc/ui/src/components/pages/LandingPage.tsx @@ -14,8 +14,8 @@ const LandingPageComponent = (props) => { return ( <> -

Breach & Attack Simulation