From 7403bf14faba7e8ffb851232c2187656b0684ac3 Mon Sep 17 00:00:00 2001
From: Shay Nehmad <shay.nehmad@guardicore.com>
Date: Tue, 4 Aug 2020 15:03:03 +0300
Subject: [PATCH 1/5] Update homepage look and feel

---
 .../ui/src/components/pages/RunServerPage.js  | 67 ++++++++++++++-----
 1 file changed, 51 insertions(+), 16 deletions(-)

diff --git a/monkey/monkey_island/cc/ui/src/components/pages/RunServerPage.js b/monkey/monkey_island/cc/ui/src/components/pages/RunServerPage.js
index 005441df7..bb713c5bc 100644
--- a/monkey/monkey_island/cc/ui/src/components/pages/RunServerPage.js
+++ b/monkey/monkey_island/cc/ui/src/components/pages/RunServerPage.js
@@ -1,6 +1,9 @@
 import React from 'react';
-import {Col} from 'react-bootstrap';
+import {Col, Row} from 'react-bootstrap';
 import {Link} from 'react-router-dom';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faPlayCircle} from '@fortawesome/free-regular-svg-icons';
+import {faBookOpen, faCogs} from '@fortawesome/free-solid-svg-icons';
 
 class RunServerPageComponent extends React.Component {
   constructor(props) {
@@ -12,23 +15,15 @@ class RunServerPageComponent extends React.Component {
       <Col sm={{offset: 3, span: 9}} md={{offset: 3, span: 9}}
            lg={{offset: 3, span: 9}} xl={{offset: 2, span: 7}}
            className={'main'}>
-        <h1 className="page-title">1. Monkey Island Server</h1>
+        <h1 className="page-title">Welcome to the Monkey Island Server</h1>
         <div style={{'fontSize': '1.2em'}}>
-          <p style={{'marginTop': '30px'}}>Congrats! You have successfully set up the Monkey Island
-            server. &#x1F44F; &#x1F44F;</p>
-          <p>
-            The Infection Monkey is an open source security tool for testing a data center's resiliency to perimeter
-            breaches and internal server infections.
-            The Monkey uses various methods to propagate across a data
-            center and reports to this Monkey Island Command and Control server.
-          </p>
-          <p>
-            To read more about the Monkey, visit <a href="http://infectionmonkey.com"
-                                                    rel="noopener noreferrer" target="_blank">infectionmonkey.com</a>
-          </p>
-          <p>
-            Go ahead and <Link to="/run-monkey">run the monkey</Link>.
+          <p style={{'marginTop': '30px'}}>
+            Congratulations! You have successfully set up the Monkey Island server. &#x1F44F; &#x1F44F;
           </p>
+          <br/>
+          <HomepageCallToActions />
+          <br/>
+          <MonkeyInfo />
         </div>
       </Col>
     );
@@ -36,3 +31,43 @@ class RunServerPageComponent extends React.Component {
 }
 
 export default RunServerPageComponent;
+
+function HomepageCallToActions() {
+  return (
+    <section id="homepage-shortcuts">
+      <div className="container">
+        <Row className="justify-content-center">
+          <div className="col-lg-4 col-sm-6">
+            <Link to="/run-monkey" className="px-4 py-5 bg-white shadow text-center d-block">
+              <h4><FontAwesomeIcon icon={faPlayCircle}/> Run Monkey</h4>
+              <p>Run the Monkey with the current configuration.</p>
+            </Link>
+          </div>
+          <div className="col-lg-4 col-sm-6">
+            <Link to="/configure" className="px-4 py-5 bg-white shadow text-center d-block">
+              <h4><FontAwesomeIcon icon={faCogs}/> Configure Monkey</h4>
+              <p>Edit targets, add credentials, choose exploits and more.</p>
+            </Link>
+          </div>
+          <div className="col-lg-4 col-sm-6">
+            <a href="https://infectionmonkey.com" className="px-4 py-5 bg-white shadow text-center d-block" rel="noopener noreferrer" target="_blank">
+              <h4><FontAwesomeIcon icon={faBookOpen}/> Read more</h4>
+              <p>Visit our homepage for more information.</p>
+            </a>
+          </div>
+        </Row>
+      </div>
+    </section>
+  );
+}
+
+function MonkeyInfo() {
+    return (
+      <>
+        <h4>What is Infection Monkey?</h4>
+        <strong>Infection Monkey</strong> is an open-source security tool for testing a data center's resiliency to perimeter
+        breaches and internal server infections. The Monkey uses various methods to propagate across a data center
+        and reports to this Monkey Island Command and Control server.
+      </>
+    );
+}

From 86364ddb8c89109a1a6ebb6d2b9176883f2dbcd4 Mon Sep 17 00:00:00 2001
From: Shay Nehmad <shay.nehmad@guardicore.com>
Date: Tue, 4 Aug 2020 15:03:55 +0300
Subject: [PATCH 2/5] Update Side NavBar

Removed a useless step from the process, added link to documentation
---
 .../cc/ui/src/components/SideNavComponent.js  | 38 +++++++++----------
 1 file changed, 18 insertions(+), 20 deletions(-)

diff --git a/monkey/monkey_island/cc/ui/src/components/SideNavComponent.js b/monkey/monkey_island/cc/ui/src/components/SideNavComponent.js
index 52fb3fb4e..d0dae0ef9 100644
--- a/monkey/monkey_island/cc/ui/src/components/SideNavComponent.js
+++ b/monkey/monkey_island/cc/ui/src/components/SideNavComponent.js
@@ -1,12 +1,13 @@
-import logoImage from '../images/monkey-icon.svg';
-import infectionMonkeyImage from '../images/infection-monkey.svg';
+import React from 'react';
 import {NavLink} from 'react-router-dom';
 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 guardicoreLogoImage from '../images/guardicore-logo.png';
+import logoImage from '../images/monkey-icon.svg';
+import infectionMonkeyImage from '../images/infection-monkey.svg';
 import VersionComponent from './side-menu/VersionComponent';
-import React from 'react';
 
 
 class SideNavComponent extends React.Component {
@@ -14,24 +15,17 @@ class SideNavComponent extends React.Component {
   render() {
     return (
       <>
-        <div className='header'>
-          <img alt='logo' src={logoImage} style={{width: '5vw', margin: '15px'}}/>
-          <img src={infectionMonkeyImage} style={{width: '15vw'}} alt='Infection Monkey'/>
-        </div>
+        <NavLink to={'/'} exact={true}>
+          <div className='header'>
+            <img alt='logo' src={logoImage} style={{width: '5vw', margin: '15px'}}/>
+            <img src={infectionMonkeyImage} style={{width: '15vw'}} alt='Infection Monkey'/>
+          </div>
+        </NavLink>
 
         <ul className='navigation'>
-          <li>
-            <NavLink to='/' exact={true}>
-              <span className='number'>1.</span>
-              Run Monkey Island Server
-              {this.props.completedSteps.run_server ?
-                <FontAwesomeIcon icon={faCheck} className='pull-right checkmark'/>
-                : ''}
-            </NavLink>
-          </li>
           <li>
             <NavLink to='/run-monkey'>
-              <span className='number'>2.</span>
+              <span className='number'>1.</span>
               Run Monkey
               {this.props.completedSteps.run_monkey ?
                 <FontAwesomeIcon icon={faCheck} className='pull-right checkmark'/>
@@ -40,7 +34,7 @@ class SideNavComponent extends React.Component {
           </li>
           <li>
             <NavLink to='/infection/map'>
-              <span className='number'>3.</span>
+              <span className='number'>2.</span>
               Infection Map
               {this.props.completedSteps.infection_done ?
                 <FontAwesomeIcon icon={faCheck} className='pull-right checkmark'/>
@@ -54,7 +48,7 @@ class SideNavComponent extends React.Component {
                          || location.pathname === '/report/zeroTrust'
                          || location.pathname === '/report/security')
                      }}>
-              <span className='number'>4.</span>
+              <span className='number'>3.</span>
               Security Reports
               {this.props.completedSteps.report_done ?
                 <FontAwesomeIcon icon={faCheck} className='pull-right checkmark'/>
@@ -72,7 +66,7 @@ class SideNavComponent extends React.Component {
         <hr/>
         <ul>
           <li><NavLink to='/configure'>Configuration</NavLink></li>
-          <li><NavLink to='/infection/telemetry'>Log</NavLink></li>
+          <li><NavLink to='/infection/telemetry'>Logs</NavLink></li>
         </ul>
 
         <hr/>
@@ -83,6 +77,10 @@ class SideNavComponent extends React.Component {
           </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/>
           <NavLink to='/license'>License</NavLink>
         </div>
         <VersionComponent/>

From 806bc91dd7ae38df8fc7fb6ffb8c58536e868c3a Mon Sep 17 00:00:00 2001
From: Shay Nehmad <shay.nehmad@guardicore.com>
Date: Tue, 4 Aug 2020 15:29:06 +0300
Subject: [PATCH 3/5] Fix page titles

---
 monkey/monkey_island/cc/ui/src/components/pages/MapPage.js      | 2 +-
 monkey/monkey_island/cc/ui/src/components/pages/ReportPage.js   | 2 +-
 .../monkey_island/cc/ui/src/components/pages/RunMonkeyPage.js   | 2 +-
 .../monkey_island/cc/ui/src/components/pages/TelemetryPage.js   | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/monkey/monkey_island/cc/ui/src/components/pages/MapPage.js b/monkey/monkey_island/cc/ui/src/components/pages/MapPage.js
index ae14b6a47..cf082f5b3 100644
--- a/monkey/monkey_island/cc/ui/src/components/pages/MapPage.js
+++ b/monkey/monkey_island/cc/ui/src/components/pages/MapPage.js
@@ -206,7 +206,7 @@ class MapPageComponent extends AuthComponent {
         <Row>
           {this.renderKillDialogModal()}
           <Col xs={12} lg={8}>
-            <h1 className="page-title">3. Infection Map</h1>
+            <h1 className="page-title">2. Infection Map</h1>
           </Col>
           <Col xs={8}>
             <div className="map-legend">
diff --git a/monkey/monkey_island/cc/ui/src/components/pages/ReportPage.js b/monkey/monkey_island/cc/ui/src/components/pages/ReportPage.js
index 131190905..5329cfe06 100644
--- a/monkey/monkey_island/cc/ui/src/components/pages/ReportPage.js
+++ b/monkey/monkey_island/cc/ui/src/components/pages/ReportPage.js
@@ -154,7 +154,7 @@ class ReportPageComponent extends AuthComponent {
       <Col sm={{offset: 3, span: 9}} md={{offset: 3, span: 9}}
            lg={{offset: 3, span: 9}} xl={{offset: 2, span: 10}}
            className={'report-wrapper'}>
-        <h1 className='page-title no-print'>4. Security Reports</h1>
+        <h1 className='page-title no-print'>3. Security Reports</h1>
         {this.renderNav()}
         <MonkeysStillAliveWarning allMonkeysAreDead={this.state.allMonkeysAreDead}/>
         <div style={{'fontSize': '1.2em'}}>
diff --git a/monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage.js b/monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage.js
index a75a65f24..48a11f008 100644
--- a/monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage.js
+++ b/monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage.js
@@ -311,7 +311,7 @@ class RunMonkeyPageComponent extends AuthComponent {
       <Col sm={{offset: 3, span: 9}} md={{offset: 3, span: 9}}
            lg={{offset: 3, span: 9}} xl={{offset: 2, span: 7}}
            className={'main'}>
-        <h1 className="page-title">2. Run the Monkey</h1>
+        <h1 className="page-title">1. Run Monkey</h1>
         <p style={{'marginBottom': '2em', 'fontSize': '1.2em'}}>
           Go ahead and run the monkey!
           <i> (Or <Link to="/configure">configure the monkey</Link> to fine tune its behavior)</i>
diff --git a/monkey/monkey_island/cc/ui/src/components/pages/TelemetryPage.js b/monkey/monkey_island/cc/ui/src/components/pages/TelemetryPage.js
index 9c0355aa2..faa9ad138 100644
--- a/monkey/monkey_island/cc/ui/src/components/pages/TelemetryPage.js
+++ b/monkey/monkey_island/cc/ui/src/components/pages/TelemetryPage.js
@@ -49,7 +49,7 @@ class TelemetryPageComponent extends AuthComponent {
            lg={{offset: 3, span: 9}} xl={{offset: 2, span: 7}}
            className={'main'}>
         <div>
-            <h1 className="page-title">Log</h1>
+            <h1 className="page-title">Logs</h1>
             <div className="data-table-container">
               <DataTable
                 keys="name"

From 6f2a897a486977fd6f08af6759687277272468ee Mon Sep 17 00:00:00 2001
From: VakarisZ <vakarisz@yahoo.com>
Date: Tue, 4 Aug 2020 16:16:10 +0300
Subject: [PATCH 4/5] Fixed height of link blocks in RunServerPage.js

---
 .../monkey_island/cc/ui/src/components/pages/RunServerPage.js  | 1 +
 monkey/monkey_island/cc/ui/src/styles/pages/RunServerPage.scss | 3 +++
 2 files changed, 4 insertions(+)
 create mode 100644 monkey/monkey_island/cc/ui/src/styles/pages/RunServerPage.scss

diff --git a/monkey/monkey_island/cc/ui/src/components/pages/RunServerPage.js b/monkey/monkey_island/cc/ui/src/components/pages/RunServerPage.js
index bb713c5bc..b70d0b9f7 100644
--- a/monkey/monkey_island/cc/ui/src/components/pages/RunServerPage.js
+++ b/monkey/monkey_island/cc/ui/src/components/pages/RunServerPage.js
@@ -4,6 +4,7 @@ import {Link} from 'react-router-dom';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faPlayCircle} from '@fortawesome/free-regular-svg-icons';
 import {faBookOpen, faCogs} from '@fortawesome/free-solid-svg-icons';
+import '../../styles/pages/RunServerPage.scss';
 
 class RunServerPageComponent extends React.Component {
   constructor(props) {
diff --git a/monkey/monkey_island/cc/ui/src/styles/pages/RunServerPage.scss b/monkey/monkey_island/cc/ui/src/styles/pages/RunServerPage.scss
new file mode 100644
index 000000000..e6c1a7497
--- /dev/null
+++ b/monkey/monkey_island/cc/ui/src/styles/pages/RunServerPage.scss
@@ -0,0 +1,3 @@
+#homepage-shortcuts a.d-block {
+  height: 100%;
+}

From c3d459dde95072304c4cdb827745c155a2682470 Mon Sep 17 00:00:00 2001
From: VakarisZ <vakarisz@yahoo.com>
Date: Tue, 4 Aug 2020 16:39:20 +0300
Subject: [PATCH 5/5] Fixed monkey island version overlap with links on the
 sidebar on smaller screens

---
 .../monkey_island/cc/ui/src/components/SideNavComponent.js  | 1 +
 .../monkey_island/cc/ui/src/styles/components/SideNav.scss  | 6 ++++++
 2 files changed, 7 insertions(+)
 create mode 100644 monkey/monkey_island/cc/ui/src/styles/components/SideNav.scss

diff --git a/monkey/monkey_island/cc/ui/src/components/SideNavComponent.js b/monkey/monkey_island/cc/ui/src/components/SideNavComponent.js
index d0dae0ef9..c260da2bf 100644
--- a/monkey/monkey_island/cc/ui/src/components/SideNavComponent.js
+++ b/monkey/monkey_island/cc/ui/src/components/SideNavComponent.js
@@ -8,6 +8,7 @@ import guardicoreLogoImage from '../images/guardicore-logo.png';
 import logoImage from '../images/monkey-icon.svg';
 import infectionMonkeyImage from '../images/infection-monkey.svg';
 import VersionComponent from './side-menu/VersionComponent';
+import '../styles/components/SideNav.scss';
 
 
 class SideNavComponent extends React.Component {
diff --git a/monkey/monkey_island/cc/ui/src/styles/components/SideNav.scss b/monkey/monkey_island/cc/ui/src/styles/components/SideNav.scss
new file mode 100644
index 000000000..949191d13
--- /dev/null
+++ b/monkey/monkey_island/cc/ui/src/styles/components/SideNav.scss
@@ -0,0 +1,6 @@
+.sidebar .version-text {
+  position: relative;
+}
+.sidebar .license-link {
+  position: relative;
+}