More work on Run monkey page

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

@@ -28,7 +28,7 @@ export default function commandDisplay(props) {
 
   function renderNav() {
     return (
-      <Nav variant='pills' fill activeKey={selectedCommand.type} onSelect={setSelectedCommandByName}>
+      <Nav variant='tabs' activeKey={selectedCommand.type} onSelect={setSelectedCommandByName}>
         {props.commands.map(command => {
           return (
             <Nav.Item key={command.type}>
@@ -39,9 +39,9 @@ export default function commandDisplay(props) {
   }
 
   return (
-    <>
+    <div className={'command-display'}>
       {renderNav()}
-      <Card style={{'margin': '0.5em'}}>
+      <Card>
         <div style={{'overflow': 'auto', 'padding': '0.5em'}}>
           <CopyToClipboard text={selectedCommand.type} className="pull-right btn-sm">
             <Button style={{margin: '-0.5em'}} title="Copy to Clipboard">
@@ -51,7 +51,7 @@ export default function commandDisplay(props) {
           <code>{selectedCommand.command}</code>
         </div>
       </Card>
-    </>
+    </div>
   )
 }
 

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

@@ -11,7 +11,7 @@ import CommandDisplay from './CommandDisplay';
 
 
 const LocalManualRunOptions = (props) => {
-  return InlineSelection(getContents, props, ManualRunOptions)
+  return InlineSelection(getContents, props)
 }
 
 const getContents = (props) => {
@@ -47,8 +47,8 @@ const getContents = (props) => {
 
   return (
     <>
-      <DropdownSelect defaultKey={'win64'} options={osTypes} onClick={setOsType}/>
+      <DropdownSelect defaultKey={'win64'} options={osTypes} onClick={setOsType} variant={'outline-monkey'}/>
-      <DropdownSelect defaultKey={0} options={props.ips} onClick={setIp}/>
+      <DropdownSelect defaultKey={0} options={props.ips} onClick={setIp} variant={'outline-monkey'}/>
       <CommandDisplay commands={commands}/>
     </>
   )

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

@@ -2,11 +2,12 @@ import React, {useEffect, useState} from 'react';
 import NextSelectionButton from '../../ui-components/inline-selection/NextSelectionButton';
 import LocalManualRunOptions from './LocalManualRunOptions';
 import AuthComponent from '../../AuthComponent';
-import BackButton from '../../ui-components/inline-selection/BackButton';
 import {faLaptopCode} from '@fortawesome/free-solid-svg-icons/faLaptopCode';
 import {faNetworkWired} from '@fortawesome/free-solid-svg-icons/faNetworkWired';
 import {faCogs} from '@fortawesome/free-solid-svg-icons/faCogs';
 import {Container} from 'react-bootstrap';
+import InlineSelection from '../../ui-components/inline-selection/InlineSelection';
+import {cloneDeep} from 'lodash';
 
 function ManualRunOptions(props) {
 
@@ -44,23 +45,31 @@ function ManualRunOptions(props) {
   }
 
   function getDefaultContents() {
+    const newProps = cloneDeep({...props, onBackButtonClick: props.disableManualOptions});
+    return InlineSelection(defaultContents, newProps);
+  }
+
+  function defaultContents() {
     return (
-      <Container className={'inline-selection-component'}>
+      <>
         <NextSelectionButton text={'Local'}
                              description={'Run on a machine via command.'}
                              icon={faLaptopCode}
-                             onButtonClick={() => {setComponent(LocalManualRunOptions,
+                             onButtonClick={() => {
-                                                          {ips: ips, setComponent: setComponent})}}/>
+                               setComponent(LocalManualRunOptions,
+                                 {ips: ips, setComponent: setComponent})
+                             }}/>
         <NextSelectionButton text={'Remote'}
                              description={'Run using remote command execution.'}
                              icon={faNetworkWired}
-                             onButtonClick={() => {}}/>
+                             onButtonClick={() => {
+                             }}/>
         <NextSelectionButton text={'Automation'}
                              description={'Run using automation tools like ansible or chef.'}
                              icon={faCogs}
-                             onButtonClick={() => {}}/>
+                             onButtonClick={() => {
-        <BackButton onClick={props.disableManualOptions} />
+                             }}/>
-      </Container>
+      </>
     );
   }
 

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

@@ -0,0 +1,30 @@
+import React, {useEffect, useState} from 'react';
+import NextSelectionButton from '../../ui-components/inline-selection/NextSelectionButton';
+import LocalManualRunOptions from './LocalManualRunOptions';
+import {faLaptopCode} from '@fortawesome/free-solid-svg-icons/faLaptopCode';
+import {faNetworkWired} from '@fortawesome/free-solid-svg-icons/faNetworkWired';
+import {faCogs} from '@fortawesome/free-solid-svg-icons/faCogs';
+import InlineSelection from '../../ui-components/inline-selection/InlineSelection';
+import ManualRunOptions from './ManualRunOptions';
+
+
+const RemoteRunOptions = (props) => {
+  return InlineSelection(getContents, props)
+}
+
+function getContents() {
+  return (
+    <>
+      <NextSelectionButton text={'Local'}
+                           description={'Run on a machine via command.'}
+                           icon={faLaptopCode}
+                           onButtonClick={() => {
+                             setComponent(LocalManualRunOptions,
+                               {ips: ips, setComponent: setComponent})
+                           }}/>
+    </>
+  );
+}
+
+
+export default ManualRunOptions;

monkey/monkey_island/cc/ui/src/components/ui-components/DropdownSelect.js

@@ -44,7 +44,7 @@ export default function DropdownSelect(props) {
   return (
     <>
       <Dropdown>
-        <Dropdown.Toggle variant="success" id="dropdown-basic">
+        <Dropdown.Toggle variant={props.variant !== undefined ? props.variant : 'success'} id='dropdown-basic'>
           {props.options[selectedOption]}
         </Dropdown.Toggle>
 

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

@@ -7,7 +7,7 @@ import {faCaretLeft} from '@fortawesome/free-solid-svg-icons/faCaretLeft';
 export default function backButton(props) {
   return (
     <Row>
-      <Col lg={8} md={10} sm={12}>
+      <Col>
         <Button variant={'outline-dark'} onClick={props.onClick} className={'back-button'}>
           <FontAwesomeIcon icon={faCaretLeft} />
           <h1>Back</h1>

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

@@ -2,28 +2,41 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import BackButton from './BackButton';
 import ManualRunOptions from '../../pages/RunMonkeyPage/ManualRunOptions';
-import Container from 'react-bootstrap';
+import {Col, Row, Container} from 'react-bootstrap';
 
 
-export default function InlineSelection(WrappedComponent, props, previousComponent){
+export default function InlineSelection(WrappedComponent, props) {
   return (
     <Container className={'inline-selection-component'}>
-      {previousComponent === undefined ? '' :
+      <Row>
-        <BackButton onClick={() => {setPreviousComponent(props, previousComponent)}}/>}
+        <Col lg={8} md={10} sm={12}>
-      <WrappedComponent {...props}/>
+          <WrappedComponent {...props}/>
+          {renderBackButton(props)}
+        </Col>
+      </Row>
     </Container>
   )
 }
 
-function setPreviousComponent(props, previousComponent) {
+function renderBackButton(props){
-  if(previousComponent === ManualRunOptions){
+  if(props.onBackButtonClick !== undefined){
+    return (<BackButton onClick={props.onBackButtonClick}/>);
+  } else if(props.previousComponent === undefined){
+    return (<BackButton onClick={() => {setPreviousComponent(props, props.previousComponent)}}/>);
+  }
+}
+
+function setPreviousComponent(props) {
+  if (props.previousComponent === ManualRunOptions) {
     return props.setComponent()
   } else {
-    return props.setComponent(previousComponent, props)
+    return props.setComponent(props.previousComponent, props)
   }
 }
 
 InlineSelection.propTypes = {
   setComponent: PropTypes.func,
-  ips: PropTypes.arrayOf(PropTypes.string)
+  ips: PropTypes.arrayOf(PropTypes.string),
+  previousComponent: PropTypes.object,
+  onBackButtonClick: PropTypes.func
 }

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

@@ -5,12 +5,11 @@ import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faAngleRight} from '@fortawesome/free-solid-svg-icons';
 
 export default function nextSelectionButton(props) {
-  console.log(props);
   let description = props.description !== undefined ? (<p>{props.description}</p>) : ''
   let icon = props.icon !== undefined ? (<FontAwesomeIcon icon={props.icon}/>) : ''
   return (
     <Row>
-      <Col lg={8} md={10} sm={12}>
+      <Col>
         <Button variant={'outline-monkey'} size='lg' className={'selection-button'}
                 onClick={props.onButtonClick}>
           {icon}
@@ -25,7 +24,6 @@ export default function nextSelectionButton(props) {
 
 nextSelectionButton.propTypes = {
   text: PropTypes.string,
-  description: PropTypes.string,
   icon: FontAwesomeIcon,
   onButtonClick: PropTypes.func
 }

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

@@ -14,6 +14,7 @@
 @import 'components/inline-selection/InlineSelection';
 @import 'components/inline-selection/NextSelectionButton';
 @import 'components/inline-selection/BackButton';
+@import 'components/inline-selection/CommandDisplay';
 
 
 // Define custom elements after bootstrap import

monkey/monkey_island/cc/ui/src/styles/components/inline-selection/CommandDisplay.scss

@@ -0,0 +1,21 @@
+.command-display {
+  margin-top: 30px;
+}
+
+.command-display .nav-tabs .nav-item a{
+  font-size: 0.8em;
+  color: $monkey-black;
+}
+
+.command-display .nav-tabs .nav-item a.active{
+  color: $monkey-alt;
+}
+
+.command-display .nav-tabs{
+  border-bottom: none;
+}
+
+.command-display div.card{
+  margin: 0;
+  border-top-left-radius: 0;
+}

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

@@ -1,12 +1,17 @@
-//.inline-selection-component.container {
+.inline-selection-component.container{
-//  display: flex;
+  padding: 0;
-//  justify-content: center;
+  margin-left: 15px;
-//}
+}
-//
-//.inline-selection-component.container .selection-button{
-//  margin: 0 5px 0 5px;
-//}
 
 .inline-selection-component .selection-button {
   width: 100%;
 }
+
+.inline-selection-component .dropdown {
+  display: inline-block;
+  margin-right: 10px;
+}
+
+.inline-selection-component .command-display {
+  margin-bottom: 20px;
+}