Merge pull request #760 from guardicore/improve-island-homepage-layout

Improve island homepage layout

monkey/monkey_island/cc/ui/src/components/SideNavComponent.js

@@ -1,12 +1,14 @@
-import logoImage from '../images/monkey-icon.svg';
+import React from 'react';
-import infectionMonkeyImage from '../images/infection-monkey.svg';
 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';
+import '../styles/components/SideNav.scss';
 
 
 class SideNavComponent extends React.Component {
@@ -14,24 +16,17 @@ class SideNavComponent extends React.Component {
   render() {
     return (
       <>
+        <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 +35,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 +49,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 +67,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 +78,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/>

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">

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

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>

monkey/monkey_island/cc/ui/src/components/pages/RunServerPage.js

@@ -1,6 +1,10 @@
 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';
+import '../../styles/pages/RunServerPage.scss';
 
 class RunServerPageComponent extends React.Component {
   constructor(props) {
@@ -12,23 +16,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
+          <p style={{'marginTop': '30px'}}>
-            server. &#x1F44F; &#x1F44F;</p>
+            Congratulations! You have successfully set up the Monkey Island server. &#x1F44F; &#x1F44F;
-          <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>
+          <br/>
+          <HomepageCallToActions />
+          <br/>
+          <MonkeyInfo />
         </div>
       </Col>
     );
@@ -36,3 +32,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.
+      </>
+    );
+}

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"

monkey/monkey_island/cc/ui/src/styles/components/SideNav.scss

@@ -0,0 +1,6 @@
+.sidebar .version-text {
+  position: relative;
+}
+.sidebar .license-link {
+  position: relative;
+}

monkey/monkey_island/cc/ui/src/styles/pages/RunServerPage.scss

@@ -0,0 +1,3 @@
+#homepage-shortcuts a.d-block {
+  height: 100%;
+}