UI: Landing page face lift

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

@@ -221,6 +221,7 @@ class AppComponent extends AuthComponent {
             <Route path={Routes.RegisterPage} render={() => (<RegisterPageComponent onStatusChange={this.updateStatus}/>)}/>
             {this.renderRoute(Routes.LandingPage,
               <SidebarLayoutComponent component={LandingPage}
+                                      sideNavShow={false}
                                       sideNavDisabled={true}
                                       completedSteps={new CompletedSteps()}
                                       onStatusChange={this.updateStatus}/>)}

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,
   <Route {...other} render={() => {
     return (
       <Row>
-        <Col sm={3} md={3} lg={3} xl={2} className='sidebar'>
+        {sideNavShow &&<Col sm={3} md={3} lg={3} xl={2} className='sidebar'>
           <SideNavComponent disabled={sideNavDisabled}
                             completedSteps={completedSteps}
                             defaultReport={defaultReport}
                             header={sideNavHeader}/>
-        </Col>
+        </Col>}
         <Component {...other} />
       </Row>)
   }}/>

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 (
+  <>
     <Col sm={{offset: 3, span: 9}} md={{offset: 3, span: 9}}
          lg={{offset: 3, span: 9}} xl={{offset: 2, span: 7}}
          className={'landing-page'}>
-      <h1 className="page-title">Welcome to the Monkey Island Server</h1>
-      <div style={{'fontSize': '1.2em'}}>
-        <ScenarioButtons/>
+        <h1 className="page-title">Breach & Attack Simulation</h1>
+        <div style={{'fontSize': '1.2em'}}>
+          <ScenarioButtons/>
         <br/>
       </div>
     </Col>
+
+    <Col sm={{offset: 3, span: 9}} md={{offset: 3, span: 9}}
+         lg={{offset: 3, span: 9}} xl={{offset: 2, span: 7}}
+         className={'guardicore-logo'}>
+         <hr/>
+        <GuardicoreLogo/>
+    </Col>
+  </>
   );
 
+
   function ScenarioButtons() {
     return (
       <section>
         <h2 className={'scenario-choice-title'}>Choose a scenario:</h2>
         <div className="container">
+          <ScenarioInfo/>
           <Row className="justify-content-center">
             <div className="col-lg-6 col-sm-6">
               <Link to="/run-monkey"
@@ -74,4 +89,41 @@ function MonkeyInfo() {
   );
 }
 
+function ScenarioInfo() {
+    // TODO change links when added to documentation
+    return (
+      <>
+        <div className={'scenario-info'}>
+          Check monkey documentation hub for better explanation
+          on <a href='https://www.guardicore.com/infectionmonkey/docs' rel="noopener noreferrer" target="_blank">
+           Ransomware
+          </a> and <a href='https://www.guardicore.com/infectionmonkey/docs' rel="noopener noreferrer" target="_blank">
+           Custom
+          </a> simulations.
+        </div>
+      </>
+    );
+}
+
+function GuardicoreLogo() {
+  return (
+    <>
+      <div className='guardicore-link text-center' style={{'marginBottom': '0.5em'}}>
+        <span>Powered by</span>
+        <a href='http://www.guardicore.com' rel='noopener noreferrer' target='_blank'>
+          <img src={guardicoreLogoImage} alt='GuardiCore'/>
+        </a>
+      </div>
+      <div className='license-link text-center'>
+        <a href='https://www.guardicore.com/infectionmonkey/docs' rel="noopener noreferrer" target="_blank">
+          <FontAwesomeIcon icon={faExternalLinkAlt} /> Documentation
+        </a>
+        <br/>
+        <Link to={Routes.LicensePage}>License</Link>
+      </div>
+      <VersionComponent/>
+    </>
+  );
+}
+
 export default LandingPageComponent;

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;
 }