Basic structure of run monkey page step by step wizard

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

@@ -10,4 +10,10 @@ class AuthComponent extends React.Component {
   }
 }
 
+export function authFetch(){
+  const auth = new AuthService();
+  const authFetch = auth.authFetch;
+  const jwtHeader = auth.jwtHeader();
+}
+
 export default AuthComponent;

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

@@ -4,7 +4,7 @@ import {Container} from 'react-bootstrap';
 
 import RunServerPage from 'components/pages/RunServerPage';
 import ConfigurePage from 'components/pages/ConfigurePage';
-import RunMonkeyPage from 'components/pages/RunMonkeyPage';
+import RunMonkeyPage from 'components/pages/RunMonkeyPage/RunMonkeyPage';
 import MapPage from 'components/pages/MapPage';
 import TelemetryPage from 'components/pages/TelemetryPage';
 import StartOverPage from 'components/pages/StartOverPage';

monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage/InterfaceSelection.js

@@ -0,0 +1,29 @@
+import React, {useEffect, useState} from 'react';
+import NextSelectionButton from '../../ui-components/inline-selection/NextSelectionButton';
+import InlineSelection from '../../ui-components/inline-selection/InlineSelection';
+import CommandSection from '../../ui-components/inline-selection/CommandSection';
+import LocalManualRunOptions from './LocalManualRunOptions';
+
+function InterfaceSelection(props) {
+  return InlineSelection(getContents, props, LocalManualRunOptions)
+}
+
+const getContents = (props) => {
+  const ips = props.ips.map((ip) =>
+    <div>{ip}</div>
+  );
+  return (<div>{ips}</div>);
+}
+
+const setCommandAsContent = (props) => {
+  let commandComponent = () => InlineSelection(CommandSection,
+    {
+      commands: win64commands,
+      setComponent: props.setComponent
+    },
+    LocalManualRunOptions
+  );
+  props.setComponent(commandComponent, props);
+}
+
+export default InterfaceSelection;

monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage/LocalManualRunOptions.js

@@ -0,0 +1,42 @@
+import React, {useEffect} from 'react';
+import NextSelectionButton from '../../ui-components/inline-selection/NextSelectionButton';
+import InlineSelection from '../../ui-components/inline-selection/InlineSelection';
+import CommandSection from '../../ui-components/inline-selection/CommandSection';
+import ManualRunOptions from './ManualRunOptions';
+import InterfaceSelection from './InterfaceSelection';
+
+const LocalManualRunOptions = (props) => {
+  return InlineSelection(getContents, props, ManualRunOptions)
+}
+
+const win64commands = [{name: "CMD", command: "monkey.exe m0nk3y -s 192.168.56.1"}]
+
+const getContents = (props) => {
+  return (
+    <>
+      <NextSelectionButton text={'Windows 64bit'}
+                           onButtonClick={() => {
+                             props.setComponent(InterfaceSelection('Windows64'))
+                           }}/>
+      <NextSelectionButton text={'Windows 32bit'} onButtonClick={() => {
+      }}/>
+      <NextSelectionButton text={'Linux 64bit'} onButtonClick={() => {
+      }}/>
+      <NextSelectionButton text={'Linux 32bit'} onButtonClick={() => {
+      }}/>
+    </>
+  )
+}
+
+const setCommandAsContent = (props) => {
+  let commandComponent = () => InlineSelection(CommandSection,
+    {
+      commands: win64commands,
+      setComponent: props.setComponent
+    },
+    LocalManualRunOptions
+  );
+  props.setComponent(commandComponent, props);
+}
+
+export default LocalManualRunOptions;

monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage/ManualRunOptions.js

@@ -0,0 +1,58 @@
+import React, {useEffect, useState} from 'react';
+import NextSelectionButton from '../../ui-components/inline-selection/NextSelectionButton';
+import LocalManualRunOptions from './LocalManualRunOptions';
+import AuthComponent from '../../AuthComponent';
+
+function ManualRunOptions(props) {
+
+  const [currentContent, setCurrentContent] = useState(loadingContents());
+  const [ips, setIps] = useState([]);
+  const [initialized, setInitialized] = useState(false);
+
+  const authComponent = new AuthComponent({})
+
+  useEffect(() => {
+    if (initialized === false) {
+      authComponent.authFetch('/api')
+        .then(res => res.json())
+        .then(res => {
+          setIps([res['ip_addresses']]);
+          setInitialized(true);
+        });
+    }
+  })
+
+  useEffect(() => {
+    setCurrentContent(getDefaultContents());
+  }, [initialized])
+
+  function setComponent(component, props) {
+    if (component === undefined) {
+      setCurrentContent(getDefaultContents())
+    } else {
+      setCurrentContent(component({...props}))
+    }
+  }
+
+  function loadingContents() {
+    return (<div>Loading</div>)
+  }
+
+  function getDefaultContents() {
+    return (
+      <div className={`container inline-selection-component`}>
+        <NextSelectionButton text={'Local'} onButtonClick={() => {
+          setComponent(LocalManualRunOptions, {ips: ips, setComponent: setComponent})
+        }}/>
+        <NextSelectionButton text={'Remote'} onButtonClick={() => {
+        }}/>
+        <NextSelectionButton text={'Automation'} onButtonClick={() => {
+        }}/>
+      </div>
+    );
+  }
+
+  return currentContent;
+}
+
+export default ManualRunOptions;

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

@@ -12,10 +12,11 @@ import {faInfoCircle} from '@fortawesome/free-solid-svg-icons/faInfoCircle';
 import {faExclamationTriangle} from '@fortawesome/free-solid-svg-icons/faExclamationTriangle';
 
 import {Link} from 'react-router-dom';
-import AuthComponent from '../AuthComponent';
+import AuthComponent from '../../AuthComponent';
-import AwsRunTable from '../run-monkey/AwsRunTable';
+import AwsRunTable from '../../run-monkey/AwsRunTable';
 
-import MissingBinariesModal from '../ui-components/MissingBinariesModal';
+import MissingBinariesModal from '../../ui-components/MissingBinariesModal';
+import ManualRunOptions from './ManualRunOptions';
 
 const loading_css_override = css`
     display: block;
@@ -329,22 +330,11 @@ class RunMonkeyPageComponent extends AuthComponent {
             showModal={this.state.showModal}
             onClose={this.closeModal}
             errorDetails={this.state.errorDetails}/>
-          {
-            // TODO: implement button functionality
-            /*
-            <button
-               className="btn btn-default"
-               disabled={this.state.runningOnClientState !== 'not_running'}
-               style={{'marginLeft': '1em'}}>
-              Download and run locally
-              { this.renderIconByState(this.state.runningOnClientState) }
-            </button>
-            */
-          }
         </p>
         <p className="text-center">
           OR
         </p>
+        <ManualRunOptions />
         <p className={'text-center'}
            style={this.state.showManual || !this.state.isOnAws ? {'marginBottom': '2em'} : {}}>
           <Button onClick={this.toggleManual}

monkey/monkey_island/cc/ui/src/components/ui-components/inline-selection/BackButton.js

@@ -0,0 +1,15 @@
+import {Button} from 'react-bootstrap';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default function backButton(props) {
+  return (
+    <Button variant={'secondary'} onClick={props.onClick}>
+      Back
+    </Button>
+  )
+}
+
+backButton.propTypes = {
+  onClick: PropTypes.func
+}

monkey/monkey_island/cc/ui/src/components/ui-components/inline-selection/CommandSection.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+
+export default function CommandSection(props){
+  return (
+    <div className={'command-section'}>
+      {props.commands[0].name}
+      {props.commands[0].command}
+    </div>
+  )
+}
+
+CommandSection.propTypes = {
+  commands: PropTypes.arrayOf(PropTypes.exact({
+    name: PropTypes.string,
+    command: PropTypes.string
+  }))
+}

monkey/monkey_island/cc/ui/src/components/ui-components/inline-selection/InlineSelection.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import BackButton from './BackButton';
+import ManualRunOptions from '../../pages/RunMonkeyPage/ManualRunOptions';
+
+
+export default function InlineSelection(WrappedComponent, props, previousComponent){
+  return (
+    <div className={`container inline-selection-component`}>
+      {previousComponent === undefined ? '' :
+        <BackButton onClick={() => {setPreviousComponent(props, previousComponent)}}/>}
+      <WrappedComponent {...props}/>
+    </div>
+  )
+}
+
+function setPreviousComponent(props, previousComponent) {
+  if(previousComponent === ManualRunOptions){
+    return props.setComponent()
+  } else {
+    return props.setComponent(previousComponent)
+  }
+}
+
+InlineSelection.propTypes = {
+  setComponent: PropTypes.func,
+  ips: PropTypes.arrayOf(PropTypes.string)
+}

monkey/monkey_island/cc/ui/src/components/ui-components/inline-selection/NextSelectionButton.js

@@ -0,0 +1,17 @@
+import {Button} from 'react-bootstrap';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default function nextSelectionButton(props) {
+  return (
+    <Button variant={'outline-monkey'} size='lg' className={'selection-button'}
+            onClick={props.onButtonClick}>
+      {props.text}
+    </Button>
+  )
+}
+
+nextSelectionButton.propTypes = {
+  text: PropTypes.string,
+  onButtonClick: PropTypes.func
+}

monkey/monkey_island/cc/ui/src/styles/Main.scss

@@ -11,6 +11,7 @@
 @import 'components/InfoPane';
 @import 'components/PreviewPane';
 @import 'components/AdvancedMultiSelect';
+@import 'components/InlineSelection';
 
 
 // Define custom elements after bootstrap import

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

@@ -0,0 +1,8 @@
+.inline-selection-component.container {
+  display: flex;
+  justify-content: center;
+}
+
+.inline-selection-component.container .selection-button{
+  margin: 0 5px 0 5px;
+}