forked from p15670423/monkey
Basic structure of run monkey page step by step wizard
This commit is contained in:
parent
7e90609b98
commit
5eaed088d6
|
@ -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;
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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;
|
|
@ -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;
|
|
@ -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;
|
|
@ -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 AwsRunTable from '../run-monkey/AwsRunTable';
|
||||
import AuthComponent from '../../AuthComponent';
|
||||
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}
|
|
@ -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
|
||||
}
|
|
@ -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
|
||||
}))
|
||||
}
|
|
@ -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)
|
||||
}
|
|
@ -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
|
||||
}
|
|
@ -11,6 +11,7 @@
|
|||
@import 'components/InfoPane';
|
||||
@import 'components/PreviewPane';
|
||||
@import 'components/AdvancedMultiSelect';
|
||||
@import 'components/InlineSelection';
|
||||
|
||||
|
||||
// Define custom elements after bootstrap import
|
||||
|
|
|
@ -0,0 +1,8 @@
|
|||
.inline-selection-component.container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.inline-selection-component.container .selection-button{
|
||||
margin: 0 5px 0 5px;
|
||||
}
|
Loading…
Reference in New Issue