forked from p15670423/monkey
Refactored UI of run monkey page
This commit is contained in:
VakarisZ
parent
0471229b13
commit
c4f4a8ef95
|
|
@ -1,6 +1,5 @@
|
||||||
import React, {useEffect, useState} from 'react';
|
import React, {useEffect, useState} from 'react';
|
||||||
import InlineSelection from '../../ui-components/inline-selection/InlineSelection';
|
import InlineSelection from '../../ui-components/inline-selection/InlineSelection';
|
||||||
import ManualRunOptions from './ManualRunOptions';
|
|
||||||
import DropdownSelect from '../../ui-components/DropdownSelect';
|
import DropdownSelect from '../../ui-components/DropdownSelect';
|
||||||
import {OS_TYPES} from './OsTypes';
|
import {OS_TYPES} from './OsTypes';
|
||||||
import GenerateLocalWindowsCmd from './commands/local_windows_cmd';
|
import GenerateLocalWindowsCmd from './commands/local_windows_cmd';
|
||||||
|
|
|
||||||
|
|
@ -1,30 +0,0 @@
|
||||||
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;
|
|
||||||
|
|
@ -1,288 +1,12 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import {css} from '@emotion/core';
|
import {Col} from 'react-bootstrap';
|
||||||
import {Button, Col, Card, Nav, Collapse, Row} from 'react-bootstrap';
|
|
||||||
import GridLoader from 'react-spinners/GridLoader';
|
|
||||||
|
|
||||||
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
|
|
||||||
import {faCheck} from '@fortawesome/free-solid-svg-icons/faCheck';
|
|
||||||
import {faSync} from '@fortawesome/free-solid-svg-icons/faSync';
|
|
||||||
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 {Link} from 'react-router-dom';
|
||||||
import AuthComponent from '../../AuthComponent';
|
import AuthComponent from '../../AuthComponent';
|
||||||
import AwsRunTable from '../../run-monkey/AwsRunTable';
|
import RunOptions from './RunOptions';
|
||||||
|
|
||||||
import MissingBinariesModal from '../../ui-components/MissingBinariesModal';
|
|
||||||
import ManualRunOptions from './ManualRunOptions';
|
|
||||||
import Emoji from '../../ui-components/Emoji';
|
|
||||||
|
|
||||||
const loading_css_override = css`
|
|
||||||
display: block;
|
|
||||||
margin-right: auto;
|
|
||||||
margin-left: auto;
|
|
||||||
`;
|
|
||||||
|
|
||||||
class RunMonkeyPageComponent extends AuthComponent {
|
class RunMonkeyPageComponent extends AuthComponent {
|
||||||
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
this.state = {
|
|
||||||
runningOnIslandState: 'not_running',
|
|
||||||
runningOnClientState: 'not_running',
|
|
||||||
awsClicked: false,
|
|
||||||
showManual: false,
|
|
||||||
showAws: false,
|
|
||||||
isOnAws: false,
|
|
||||||
awsUpdateClicked: false,
|
|
||||||
awsUpdateFailed: false,
|
|
||||||
awsMachines: [],
|
|
||||||
isLoadingAws: true,
|
|
||||||
isErrorWhileCollectingAwsMachines: false,
|
|
||||||
awsMachineCollectionErrorMsg: '',
|
|
||||||
showModal: false,
|
|
||||||
errorDetails: ''
|
|
||||||
};
|
|
||||||
|
|
||||||
this.closeModal = this.closeModal.bind(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
this.authFetch('/api/local-monkey')
|
|
||||||
.then(res => res.json())
|
|
||||||
.then(res => {
|
|
||||||
if (res['is_running']) {
|
|
||||||
this.setState({runningOnIslandState: 'running'});
|
|
||||||
} else {
|
|
||||||
this.setState({runningOnIslandState: 'not_running'});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
this.fetchAwsInfo();
|
|
||||||
this.fetchConfig();
|
|
||||||
|
|
||||||
this.authFetch('/api/client-monkey')
|
|
||||||
.then(res => res.json())
|
|
||||||
.then(res => {
|
|
||||||
if (res['is_running']) {
|
|
||||||
this.setState({runningOnClientState: 'running'});
|
|
||||||
} else {
|
|
||||||
this.setState({runningOnClientState: 'not_running'});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
this.props.onStatusChange();
|
|
||||||
}
|
|
||||||
|
|
||||||
fetchAwsInfo() {
|
|
||||||
return this.authFetch('/api/remote-monkey?action=list_aws')
|
|
||||||
.then(res => res.json())
|
|
||||||
.then(res => {
|
|
||||||
let is_aws = res['is_aws'];
|
|
||||||
if (is_aws) {
|
|
||||||
// On AWS!
|
|
||||||
// Checks if there was an error while collecting the aws machines.
|
|
||||||
let is_error_while_collecting_aws_machines = (res['error'] != null);
|
|
||||||
if (is_error_while_collecting_aws_machines) {
|
|
||||||
// There was an error. Finish loading, and display error message.
|
|
||||||
this.setState({
|
|
||||||
isOnAws: true,
|
|
||||||
isErrorWhileCollectingAwsMachines: true,
|
|
||||||
awsMachineCollectionErrorMsg: res['error'],
|
|
||||||
isLoadingAws: false
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
// No error! Finish loading and display machines for user
|
|
||||||
this.setState({isOnAws: true, awsMachines: res['instances'], isLoadingAws: false});
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// Not on AWS. Finish loading and don't display the AWS div.
|
|
||||||
this.setState({isOnAws: false, isLoadingAws: false});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
runIslandMonkey = () => {
|
|
||||||
this.authFetch('/api/local-monkey',
|
|
||||||
{
|
|
||||||
method: 'POST',
|
|
||||||
headers: {'Content-Type': 'application/json'},
|
|
||||||
body: JSON.stringify({action: 'run'})
|
|
||||||
})
|
|
||||||
.then(res => res.json())
|
|
||||||
.then(res => {
|
|
||||||
if (res['is_running']) {
|
|
||||||
this.setState({
|
|
||||||
runningOnIslandState: 'installing'
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
/* If Monkey binaries are missing, change the state accordingly */
|
|
||||||
if (res['error_text'].startsWith('Copy file failed')) {
|
|
||||||
this.setState({
|
|
||||||
showModal: true,
|
|
||||||
errorDetails: res['error_text']
|
|
||||||
}
|
|
||||||
);
|
|
||||||
}
|
|
||||||
this.setState({
|
|
||||||
runningOnIslandState: 'not_running'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
this.props.onStatusChange();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
static renderIconByState(state) {
|
|
||||||
if (state === 'running') {
|
|
||||||
return (<FontAwesomeIcon icon={faCheck} className="text-success" style={{'marginLeft': '5px'}}/>)
|
|
||||||
} else if (state === 'installing') {
|
|
||||||
return (<FontAwesomeIcon icon={faSync} className="text-success" style={{'marginLeft': '5px'}}/>)
|
|
||||||
} else {
|
|
||||||
return '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
toggleManual = () => {
|
|
||||||
this.setState({
|
|
||||||
showManual: !this.state.showManual
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
toggleAws = () => {
|
|
||||||
this.setState({
|
|
||||||
showAws: !this.state.showAws
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
runOnAws = () => {
|
|
||||||
this.setState({
|
|
||||||
awsClicked: true
|
|
||||||
});
|
|
||||||
|
|
||||||
let instances = this.awsTable.state.selection.map(x => this.instanceIdToInstance(x));
|
|
||||||
|
|
||||||
this.authFetch('/api/remote-monkey',
|
|
||||||
{
|
|
||||||
method: 'POST',
|
|
||||||
headers: {'Content-Type': 'application/json'},
|
|
||||||
body: JSON.stringify({type: 'aws', instances: instances, island_ip: this.state.selectedIp})
|
|
||||||
}).then(res => res.json())
|
|
||||||
.then(res => {
|
|
||||||
let result = res['result'];
|
|
||||||
|
|
||||||
// update existing state, not run-over
|
|
||||||
let prevRes = this.awsTable.state.result;
|
|
||||||
for (let key in result) {
|
|
||||||
if (result.hasOwnProperty(key)) {
|
|
||||||
prevRes[key] = result[key];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.awsTable.setState({
|
|
||||||
result: prevRes,
|
|
||||||
selection: [],
|
|
||||||
selectAll: false
|
|
||||||
});
|
|
||||||
|
|
||||||
this.setState({
|
|
||||||
awsClicked: false
|
|
||||||
});
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
fetchConfig() {
|
|
||||||
return this.authFetch('/api/configuration/island')
|
|
||||||
.then(res => res.json())
|
|
||||||
.then(res => {
|
|
||||||
return res.configuration;
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
instanceIdToInstance = (instance_id) => {
|
|
||||||
let instance = this.state.awsMachines.find(
|
|
||||||
function (inst) {
|
|
||||||
return inst['instance_id'] === instance_id;
|
|
||||||
});
|
|
||||||
return {'instance_id': instance_id, 'os': instance['os']}
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
renderAwsMachinesDiv() {
|
|
||||||
return (
|
|
||||||
<div style={{'marginBottom': '2em'}}>
|
|
||||||
<div style={{'marginTop': '1em', 'marginBottom': '1em'}}>
|
|
||||||
<p className="alert alert-info">
|
|
||||||
<FontAwesomeIcon icon={faInfoCircle} style={{'marginRight': '5px'}}/>
|
|
||||||
Not sure what this is? Not seeing your AWS EC2 instances? <a
|
|
||||||
href="https://github.com/guardicore/monkey/wiki/Monkey-Island:-Running-the-monkey-on-AWS-EC2-instances"
|
|
||||||
rel="noopener noreferrer" target="_blank">Read the documentation</a>!
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<AwsRunTable
|
|
||||||
data={this.state.awsMachines}
|
|
||||||
ref={r => (this.awsTable = r)}
|
|
||||||
/>
|
|
||||||
<div style={{'marginTop': '1em'}}>
|
|
||||||
<Button
|
|
||||||
onClick={this.runOnAws}
|
|
||||||
className={'btn btn-default btn-md center-block'}
|
|
||||||
disabled={this.state.awsClicked}>
|
|
||||||
Run on selected machines
|
|
||||||
{this.state.awsClicked ?
|
|
||||||
<FontAwesomeIcon icon={faSync} className="text-success" style={{'marginLeft': '5px'}}/> : null}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
closeModal = () => {
|
|
||||||
this.setState({
|
|
||||||
showModal: false
|
|
||||||
})
|
|
||||||
};
|
|
||||||
|
|
||||||
renderIslandVsManual = () => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<p className={'text-center'}>
|
|
||||||
<Button onClick={this.runIslandMonkey}
|
|
||||||
variant={'outline-monkey'}
|
|
||||||
size='lg'
|
|
||||||
disabled={this.state.runningOnIslandState !== 'not_running'}
|
|
||||||
>
|
|
||||||
<Emoji symbol={"🏝️"}/>Run on Monkey Island Server
|
|
||||||
{RunMonkeyPageComponent.renderIconByState(this.state.runningOnIslandState)}
|
|
||||||
</Button>
|
|
||||||
<MissingBinariesModal
|
|
||||||
showModal={this.state.showModal}
|
|
||||||
onClose={this.closeModal}
|
|
||||||
errorDetails={this.state.errorDetails}/>
|
|
||||||
</p>
|
|
||||||
<p className="text-center">
|
|
||||||
OR
|
|
||||||
</p>
|
|
||||||
<p className={'text-center'}
|
|
||||||
style={this.state.showManual || !this.state.isOnAws ? {'marginBottom': '2em'} : {}}>
|
|
||||||
<Button onClick={this.toggleManual}
|
|
||||||
variant={'outline-monkey'}
|
|
||||||
size='lg'
|
|
||||||
className={(this.state.showManual ? 'active' : '')}>
|
|
||||||
<Emoji symbol={"💻"}/> Run on a machine of your choice
|
|
||||||
</Button>
|
|
||||||
</p>
|
|
||||||
<p style={{'fontSize': '1.2em'}}>
|
|
||||||
Go ahead and monitor the ongoing infection in the <Link to="/infection/map">Infection Map</Link> view.
|
|
||||||
</p>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
disableManualOptions = () => {
|
|
||||||
this.setState({showManual: false})
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<Col sm={{offset: 3, span: 9}} md={{offset: 3, span: 9}}
|
<Col sm={{offset: 3, span: 9}} md={{offset: 3, span: 9}}
|
||||||
|
|
@ -293,64 +17,7 @@ class RunMonkeyPageComponent extends AuthComponent {
|
||||||
Go ahead and run the monkey!
|
Go ahead and run the monkey!
|
||||||
<i> (Or <Link to="/configure">configure the monkey</Link> to fine tune its behavior)</i>
|
<i> (Or <Link to="/configure">configure the monkey</Link> to fine tune its behavior)</i>
|
||||||
</p>
|
</p>
|
||||||
{this.state.showManual ?
|
<RunOptions />
|
||||||
<ManualRunOptions disableManualOptions={this.disableManualOptions}/> :
|
|
||||||
this.renderIslandVsManual()}
|
|
||||||
{
|
|
||||||
this.state.isLoadingAws ?
|
|
||||||
<div style={{'marginBottom': '2em', 'align': 'center'}}>
|
|
||||||
<div className='sweet-loading'>
|
|
||||||
<GridLoader
|
|
||||||
css={loading_css_override}
|
|
||||||
sizeUnit={'px'}
|
|
||||||
size={30}
|
|
||||||
color={'#ffcc00'}
|
|
||||||
loading={this.state.loading}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
: null
|
|
||||||
}
|
|
||||||
{
|
|
||||||
this.state.isOnAws ?
|
|
||||||
<p className="text-center">
|
|
||||||
OR
|
|
||||||
</p>
|
|
||||||
:
|
|
||||||
null
|
|
||||||
}
|
|
||||||
{
|
|
||||||
this.state.isOnAws ?
|
|
||||||
<p style={{'marginBottom': '2em'}} className={'text-center'}>
|
|
||||||
<Button onClick={this.toggleAws}
|
|
||||||
className={(this.state.showAws ? ' active' : '')}
|
|
||||||
size='lg'
|
|
||||||
variant={'outline-monkey'}>
|
|
||||||
Run on AWS machine of your choice
|
|
||||||
</Button>
|
|
||||||
</p>
|
|
||||||
:
|
|
||||||
null
|
|
||||||
}
|
|
||||||
<Collapse in={this.state.showAws}>
|
|
||||||
{
|
|
||||||
this.state.isErrorWhileCollectingAwsMachines ?
|
|
||||||
<div style={{'marginTop': '1em'}}>
|
|
||||||
<p className="alert alert-danger">
|
|
||||||
<FontAwesomeIcon icon={faExclamationTriangle} style={{'marginRight': '5px'}}/>
|
|
||||||
Error while collecting AWS machine data. Error
|
|
||||||
message: <code>{this.state.awsMachineCollectionErrorMsg}</code><br/>
|
|
||||||
Are you sure you've set the correct role on your Island AWS machine?<br/>
|
|
||||||
Not sure what this is? <a
|
|
||||||
href="https://github.com/guardicore/monkey/wiki/Monkey-Island:-Running-the-monkey-on-AWS-EC2-instances">Read
|
|
||||||
the documentation</a>!
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
:
|
|
||||||
this.renderAwsMachinesDiv()
|
|
||||||
}
|
|
||||||
|
|
||||||
</Collapse>
|
|
||||||
</Col>
|
</Col>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,472 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import {css} from '@emotion/core';
|
|
||||||
import {Button, Col, Card, Nav, Collapse, Row} from 'react-bootstrap';
|
|
||||||
import CopyToClipboard from 'react-copy-to-clipboard';
|
|
||||||
import GridLoader from 'react-spinners/GridLoader';
|
|
||||||
|
|
||||||
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
|
|
||||||
import {faClipboard} from '@fortawesome/free-solid-svg-icons/faClipboard';
|
|
||||||
import {faCheck} from '@fortawesome/free-solid-svg-icons/faCheck';
|
|
||||||
import {faSync} from '@fortawesome/free-solid-svg-icons/faSync';
|
|
||||||
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 MissingBinariesModal from '../../ui-components/MissingBinariesModal';
|
|
||||||
import ManualRunOptions from './ManualRunOptions';
|
|
||||||
import Emoji from '../../ui-components/Emoji';
|
|
||||||
|
|
||||||
const loading_css_override = css`
|
|
||||||
display: block;
|
|
||||||
margin-right: auto;
|
|
||||||
margin-left: auto;
|
|
||||||
`;
|
|
||||||
|
|
||||||
class RunMonkeyPageComponent2 extends AuthComponent {
|
|
||||||
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
this.state = {
|
|
||||||
ips: [],
|
|
||||||
runningOnIslandState: 'not_running',
|
|
||||||
runningOnClientState: 'not_running',
|
|
||||||
awsClicked: false,
|
|
||||||
selectedIp: '0.0.0.0',
|
|
||||||
selectedOs: 'windows-32',
|
|
||||||
showManual: false,
|
|
||||||
showAws: false,
|
|
||||||
isOnAws: false,
|
|
||||||
awsUpdateClicked: false,
|
|
||||||
awsUpdateFailed: false,
|
|
||||||
awsMachines: [],
|
|
||||||
isLoadingAws: true,
|
|
||||||
isErrorWhileCollectingAwsMachines: false,
|
|
||||||
awsMachineCollectionErrorMsg: '',
|
|
||||||
showModal: false,
|
|
||||||
errorDetails: ''
|
|
||||||
};
|
|
||||||
|
|
||||||
this.closeModal = this.closeModal.bind(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
this.authFetch('/api')
|
|
||||||
.then(res => res.json())
|
|
||||||
.then(res => this.setState({
|
|
||||||
ips: res['ip_addresses'],
|
|
||||||
selectedIp: res['ip_addresses'][0]
|
|
||||||
}));
|
|
||||||
|
|
||||||
this.authFetch('/api/local-monkey')
|
|
||||||
.then(res => res.json())
|
|
||||||
.then(res => {
|
|
||||||
if (res['is_running']) {
|
|
||||||
this.setState({runningOnIslandState: 'running'});
|
|
||||||
} else {
|
|
||||||
this.setState({runningOnIslandState: 'not_running'});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
this.fetchAwsInfo();
|
|
||||||
this.fetchConfig();
|
|
||||||
|
|
||||||
this.authFetch('/api/client-monkey')
|
|
||||||
.then(res => res.json())
|
|
||||||
.then(res => {
|
|
||||||
if (res['is_running']) {
|
|
||||||
this.setState({runningOnClientState: 'running'});
|
|
||||||
} else {
|
|
||||||
this.setState({runningOnClientState: 'not_running'});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
this.props.onStatusChange();
|
|
||||||
}
|
|
||||||
|
|
||||||
fetchAwsInfo() {
|
|
||||||
return this.authFetch('/api/remote-monkey?action=list_aws')
|
|
||||||
.then(res => res.json())
|
|
||||||
.then(res => {
|
|
||||||
let is_aws = res['is_aws'];
|
|
||||||
if (is_aws) {
|
|
||||||
// On AWS!
|
|
||||||
// Checks if there was an error while collecting the aws machines.
|
|
||||||
let is_error_while_collecting_aws_machines = (res['error'] != null);
|
|
||||||
if (is_error_while_collecting_aws_machines) {
|
|
||||||
// There was an error. Finish loading, and display error message.
|
|
||||||
this.setState({
|
|
||||||
isOnAws: true,
|
|
||||||
isErrorWhileCollectingAwsMachines: true,
|
|
||||||
awsMachineCollectionErrorMsg: res['error'],
|
|
||||||
isLoadingAws: false
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
// No error! Finish loading and display machines for user
|
|
||||||
this.setState({isOnAws: true, awsMachines: res['instances'], isLoadingAws: false});
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// Not on AWS. Finish loading and don't display the AWS div.
|
|
||||||
this.setState({isOnAws: false, isLoadingAws: false});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
static generateLinuxCmd(ip, is32Bit) {
|
|
||||||
let bitText = is32Bit ? '32' : '64';
|
|
||||||
return `wget --no-check-certificate https://${ip}:5000/api/monkey/download/monkey-linux-${bitText}; chmod +x monkey-linux-${bitText}; ./monkey-linux-${bitText} m0nk3y -s ${ip}:5000`
|
|
||||||
}
|
|
||||||
|
|
||||||
static generateWindowsCmd(ip, is32Bit) {
|
|
||||||
let bitText = is32Bit ? '32' : '64';
|
|
||||||
return `powershell [System.Net.ServicePointManager]::ServerCertificateValidationCallback = {$true}; (New-Object System.Net.WebClient).DownloadFile('https://${ip}:5000/api/monkey/download/monkey-windows-${bitText}.exe','.\\monkey.exe'); ;Start-Process -FilePath '.\\monkey.exe' -ArgumentList 'm0nk3y -s ${ip}:5000';`;
|
|
||||||
}
|
|
||||||
|
|
||||||
runLocalMonkey = () => {
|
|
||||||
this.authFetch('/api/local-monkey',
|
|
||||||
{
|
|
||||||
method: 'POST',
|
|
||||||
headers: {'Content-Type': 'application/json'},
|
|
||||||
body: JSON.stringify({action: 'run'})
|
|
||||||
})
|
|
||||||
.then(res => res.json())
|
|
||||||
.then(res => {
|
|
||||||
if (res['is_running']) {
|
|
||||||
this.setState({
|
|
||||||
runningOnIslandState: 'installing'
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
/* If Monkey binaries are missing, change the state accordingly */
|
|
||||||
if (res['error_text'].startsWith('Copy file failed')) {
|
|
||||||
this.setState({
|
|
||||||
showModal: true,
|
|
||||||
errorDetails: res['error_text']
|
|
||||||
}
|
|
||||||
);
|
|
||||||
}
|
|
||||||
this.setState({
|
|
||||||
runningOnIslandState: 'not_running'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
this.props.onStatusChange();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
generateCmdDiv() {
|
|
||||||
let isLinux = (this.state.selectedOs.split('-')[0] === 'linux');
|
|
||||||
let is32Bit = (this.state.selectedOs.split('-')[1] === '32');
|
|
||||||
let cmdText = '';
|
|
||||||
if (isLinux) {
|
|
||||||
cmdText = RunMonkeyPageComponent2.generateLinuxCmd(this.state.selectedIp, is32Bit);
|
|
||||||
} else {
|
|
||||||
cmdText = RunMonkeyPageComponent2.generateWindowsCmd(this.state.selectedIp, is32Bit);
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<Card key={'cmdDiv' + this.state.selectedIp} style={{'margin': '0.5em'}}>
|
|
||||||
<div style={{'overflow': 'auto', 'padding': '0.5em'}}>
|
|
||||||
<CopyToClipboard text={cmdText} className="pull-right btn-sm">
|
|
||||||
<Button style={{margin: '-0.5em'}} title="Copy to Clipboard">
|
|
||||||
<FontAwesomeIcon icon={faClipboard}/>
|
|
||||||
</Button>
|
|
||||||
</CopyToClipboard>
|
|
||||||
<code>{cmdText}</code>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
setSelectedOs = (key) => {
|
|
||||||
this.setState({
|
|
||||||
selectedOs: key
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
setSelectedIp = (key) => {
|
|
||||||
this.setState({
|
|
||||||
selectedIp: key
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
static renderIconByState(state) {
|
|
||||||
if (state === 'running') {
|
|
||||||
return (<FontAwesomeIcon icon={faCheck} className="text-success" style={{'marginLeft': '5px'}}/>)
|
|
||||||
} else if (state === 'installing') {
|
|
||||||
return (<FontAwesomeIcon icon={faSync} className="text-success" style={{'marginLeft': '5px'}}/>)
|
|
||||||
} else {
|
|
||||||
return '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
toggleManual = () => {
|
|
||||||
this.setState({
|
|
||||||
showManual: !this.state.showManual
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
toggleAws = () => {
|
|
||||||
this.setState({
|
|
||||||
showAws: !this.state.showAws
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
runOnAws = () => {
|
|
||||||
this.setState({
|
|
||||||
awsClicked: true
|
|
||||||
});
|
|
||||||
|
|
||||||
let instances = this.awsTable.state.selection.map(x => this.instanceIdToInstance(x));
|
|
||||||
|
|
||||||
this.authFetch('/api/remote-monkey',
|
|
||||||
{
|
|
||||||
method: 'POST',
|
|
||||||
headers: {'Content-Type': 'application/json'},
|
|
||||||
body: JSON.stringify({type: 'aws', instances: instances, island_ip: this.state.selectedIp})
|
|
||||||
}).then(res => res.json())
|
|
||||||
.then(res => {
|
|
||||||
let result = res['result'];
|
|
||||||
|
|
||||||
// update existing state, not run-over
|
|
||||||
let prevRes = this.awsTable.state.result;
|
|
||||||
for (let key in result) {
|
|
||||||
if (result.hasOwnProperty(key)) {
|
|
||||||
prevRes[key] = result[key];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.awsTable.setState({
|
|
||||||
result: prevRes,
|
|
||||||
selection: [],
|
|
||||||
selectAll: false
|
|
||||||
});
|
|
||||||
|
|
||||||
this.setState({
|
|
||||||
awsClicked: false
|
|
||||||
});
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
fetchConfig() {
|
|
||||||
return this.authFetch('/api/configuration/island')
|
|
||||||
.then(res => res.json())
|
|
||||||
.then(res => {
|
|
||||||
return res.configuration;
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
instanceIdToInstance = (instance_id) => {
|
|
||||||
let instance = this.state.awsMachines.find(
|
|
||||||
function (inst) {
|
|
||||||
return inst['instance_id'] === instance_id;
|
|
||||||
});
|
|
||||||
return {'instance_id': instance_id, 'os': instance['os']}
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
renderAwsMachinesDiv() {
|
|
||||||
return (
|
|
||||||
<div style={{'marginBottom': '2em'}}>
|
|
||||||
<div style={{'marginTop': '1em', 'marginBottom': '1em'}}>
|
|
||||||
<p className="alert alert-info">
|
|
||||||
<FontAwesomeIcon icon={faInfoCircle} style={{'marginRight': '5px'}}/>
|
|
||||||
Not sure what this is? Not seeing your AWS EC2 instances? <a
|
|
||||||
href="https://github.com/guardicore/monkey/wiki/Monkey-Island:-Running-the-monkey-on-AWS-EC2-instances"
|
|
||||||
rel="noopener noreferrer" target="_blank">Read the documentation</a>!
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
{
|
|
||||||
this.state.ips.length > 1 ?
|
|
||||||
<Nav variant="pills" activeKey={this.state.selectedIp} onSelect={this.setSelectedIp}
|
|
||||||
style={{'marginBottom': '2em'}}>
|
|
||||||
{this.state.ips.map(ip => <Nav.Item key={ip}><Nav.Link eventKey={ip}>{ip}</Nav.Link></Nav.Item>)}
|
|
||||||
</Nav>
|
|
||||||
: <div style={{'marginBottom': '2em'}}/>
|
|
||||||
}
|
|
||||||
|
|
||||||
<AwsRunTable
|
|
||||||
data={this.state.awsMachines}
|
|
||||||
ref={r => (this.awsTable = r)}
|
|
||||||
/>
|
|
||||||
<div style={{'marginTop': '1em'}}>
|
|
||||||
<Button
|
|
||||||
onClick={this.runOnAws}
|
|
||||||
className={'btn btn-default btn-md center-block'}
|
|
||||||
disabled={this.state.awsClicked}>
|
|
||||||
Run on selected machines
|
|
||||||
{this.state.awsClicked ?
|
|
||||||
<FontAwesomeIcon icon={faSync} className="text-success" style={{'marginLeft': '5px'}}/> : null}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
closeModal = () => {
|
|
||||||
this.setState({
|
|
||||||
showModal: false
|
|
||||||
})
|
|
||||||
};
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<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. 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>
|
|
||||||
</p>
|
|
||||||
<p className={'text-center'}>
|
|
||||||
<Button onClick={this.runLocalMonkey}
|
|
||||||
variant={'outline-monkey'}
|
|
||||||
size='lg'
|
|
||||||
disabled={this.state.runningOnIslandState !== 'not_running'}
|
|
||||||
>
|
|
||||||
<Emoji symbol={"🏝️"}/>Run on Monkey Island Server
|
|
||||||
{RunMonkeyPageComponent2.renderIconByState(this.state.runningOnIslandState)}
|
|
||||||
</Button>
|
|
||||||
<MissingBinariesModal
|
|
||||||
showModal={this.state.showModal}
|
|
||||||
onClose={this.closeModal}
|
|
||||||
errorDetails={this.state.errorDetails}/>
|
|
||||||
</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}
|
|
||||||
variant={'outline-monkey'}
|
|
||||||
size='lg'
|
|
||||||
className={(this.state.showManual ? 'active' : '')}>
|
|
||||||
<Emoji symbol={"💻"} /> Run on a machine of your choice
|
|
||||||
</Button>
|
|
||||||
</p>
|
|
||||||
<Collapse in={this.state.showManual}>
|
|
||||||
<div style={{'marginBottom': '2em'}}>
|
|
||||||
<p style={{'fontSize': '1.2em'}}>
|
|
||||||
Choose the operating system where you want to run the monkey:
|
|
||||||
</p>
|
|
||||||
<Row>
|
|
||||||
<Col>
|
|
||||||
<Nav variant='pills' fill id={'bootstrap-override'} className={'run-on-os-buttons'}
|
|
||||||
activeKey={this.state.selectedOs} onSelect={this.setSelectedOs}>
|
|
||||||
<Nav.Item>
|
|
||||||
<Nav.Link eventKey={'windows-32'}>
|
|
||||||
Windows (32 bit)
|
|
||||||
</Nav.Link>
|
|
||||||
</Nav.Item>
|
|
||||||
<Nav.Item>
|
|
||||||
<Nav.Link eventKey='windows-64'>
|
|
||||||
Windows (64 bit)
|
|
||||||
</Nav.Link>
|
|
||||||
</Nav.Item>
|
|
||||||
<Nav.Item>
|
|
||||||
<Nav.Link eventKey='linux-32'>
|
|
||||||
Linux (32 bit)
|
|
||||||
</Nav.Link>
|
|
||||||
</Nav.Item>
|
|
||||||
<Nav.Item>
|
|
||||||
<Nav.Link eventKey='linux-64'>
|
|
||||||
Linux (64 bit)
|
|
||||||
</Nav.Link>
|
|
||||||
</Nav.Item>
|
|
||||||
</Nav>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
|
|
||||||
{this.state.ips.length > 1 ?
|
|
||||||
<div>
|
|
||||||
<Row>
|
|
||||||
<Col>
|
|
||||||
<p style={{'fontSize': '1.2em'}}>
|
|
||||||
Choose the interface to communicate with:
|
|
||||||
</p>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
<Row>
|
|
||||||
<Col>
|
|
||||||
<Nav variant="pills" fill activeKey={this.state.selectedIp} onSelect={this.setSelectedIp}
|
|
||||||
className={'run-on-os-buttons'}>
|
|
||||||
{this.state.ips.map(ip => <Nav.Item key={ip}>
|
|
||||||
<Nav.Link eventKey={ip}>{ip}</Nav.Link></Nav.Item>)}
|
|
||||||
</Nav>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
</div>
|
|
||||||
: <div style={{'marginBottom': '2em'}}/>
|
|
||||||
}
|
|
||||||
<p style={{'fontSize': '1.2em'}}>
|
|
||||||
Copy the following command to your machine and run it with Administrator or root privileges.
|
|
||||||
</p>
|
|
||||||
{this.generateCmdDiv()}
|
|
||||||
</div>
|
|
||||||
</Collapse>
|
|
||||||
{
|
|
||||||
this.state.isLoadingAws ?
|
|
||||||
<div style={{'marginBottom': '2em', 'align': 'center'}}>
|
|
||||||
<div className='sweet-loading'>
|
|
||||||
<GridLoader
|
|
||||||
css={loading_css_override}
|
|
||||||
sizeUnit={'px'}
|
|
||||||
size={30}
|
|
||||||
color={'#ffcc00'}
|
|
||||||
loading={this.state.loading}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
: null
|
|
||||||
}
|
|
||||||
{
|
|
||||||
this.state.isOnAws ?
|
|
||||||
<p className="text-center">
|
|
||||||
OR
|
|
||||||
</p>
|
|
||||||
:
|
|
||||||
null
|
|
||||||
}
|
|
||||||
{
|
|
||||||
this.state.isOnAws ?
|
|
||||||
<p style={{'marginBottom': '2em'}} className={'text-center'}>
|
|
||||||
<Button onClick={this.toggleAws}
|
|
||||||
className={(this.state.showAws ? ' active' : '')}
|
|
||||||
size='lg'
|
|
||||||
variant={'outline-monkey'}>
|
|
||||||
Run on AWS machine of your choice
|
|
||||||
</Button>
|
|
||||||
</p>
|
|
||||||
:
|
|
||||||
null
|
|
||||||
}
|
|
||||||
<Collapse in={this.state.showAws}>
|
|
||||||
{
|
|
||||||
this.state.isErrorWhileCollectingAwsMachines ?
|
|
||||||
<div style={{'marginTop': '1em'}}>
|
|
||||||
<p className="alert alert-danger">
|
|
||||||
<FontAwesomeIcon icon={faExclamationTriangle} style={{'marginRight': '5px'}}/>
|
|
||||||
Error while collecting AWS machine data. Error
|
|
||||||
message: <code>{this.state.awsMachineCollectionErrorMsg}</code><br/>
|
|
||||||
Are you sure you've set the correct role on your Island AWS machine?<br/>
|
|
||||||
Not sure what this is? <a
|
|
||||||
href="https://github.com/guardicore/monkey/wiki/Monkey-Island:-Running-the-monkey-on-AWS-EC2-instances">Read
|
|
||||||
the documentation</a>!
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
:
|
|
||||||
this.renderAwsMachinesDiv()
|
|
||||||
}
|
|
||||||
|
|
||||||
</Collapse>
|
|
||||||
|
|
||||||
<p style={{'fontSize': '1.2em'}}>
|
|
||||||
Go ahead and monitor the ongoing infection in the <Link to="/infection/map">Infection Map</Link> view.
|
|
||||||
</p>
|
|
||||||
</Col>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default RunMonkeyPageComponent2;
|
|
||||||
|
|
@ -0,0 +1,113 @@
|
||||||
|
import React from 'react';
|
||||||
|
import {Button, Col, Row} from 'react-bootstrap';
|
||||||
|
|
||||||
|
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
|
||||||
|
import {faCheck} from '@fortawesome/free-solid-svg-icons/faCheck';
|
||||||
|
import {faSync} from '@fortawesome/free-solid-svg-icons/faSync';
|
||||||
|
import AuthComponent from '../../AuthComponent';
|
||||||
|
|
||||||
|
import MissingBinariesModal from '../../ui-components/MissingBinariesModal';
|
||||||
|
import '../../../styles/components/RunOnIslandButton.scss';
|
||||||
|
|
||||||
|
|
||||||
|
class RunOnIslandButton extends AuthComponent {
|
||||||
|
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
runningOnIslandState: 'not_running',
|
||||||
|
showModal: false,
|
||||||
|
errorDetails: ''
|
||||||
|
};
|
||||||
|
|
||||||
|
this.closeModal = this.closeModal.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this.authFetch('/api/local-monkey')
|
||||||
|
.then(res => res.json())
|
||||||
|
.then(res => {
|
||||||
|
if (res['is_running']) {
|
||||||
|
this.setState({runningOnIslandState: 'running'});
|
||||||
|
} else {
|
||||||
|
this.setState({runningOnIslandState: 'not_running'});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
runIslandMonkey = () => {
|
||||||
|
this.setState({runningOnIslandState: 'installing'}, this.sendRunMonkeyRequest)
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
sendRunMonkeyRequest = () => {
|
||||||
|
this.authFetch('/api/local-monkey',
|
||||||
|
{
|
||||||
|
method: 'POST',
|
||||||
|
headers: {'Content-Type': 'application/json'},
|
||||||
|
body: JSON.stringify({action: 'run'})
|
||||||
|
})
|
||||||
|
.then(res => res.json())
|
||||||
|
.then(res => {
|
||||||
|
if (res['is_running']) {
|
||||||
|
this.setState({
|
||||||
|
runningOnIslandState: 'running'
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
/* If Monkey binaries are missing, change the state accordingly */
|
||||||
|
if (res['error_text'].startsWith('Copy file failed')) {
|
||||||
|
this.setState({
|
||||||
|
showModal: true,
|
||||||
|
errorDetails: res['error_text']
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
this.setState({
|
||||||
|
runningOnIslandState: 'not_running'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
closeModal = () => {
|
||||||
|
this.setState({
|
||||||
|
showModal: false
|
||||||
|
})
|
||||||
|
};
|
||||||
|
|
||||||
|
getMonkeyRunStateIcon = () => {
|
||||||
|
if (this.state.runningOnIslandState === 'running') {
|
||||||
|
return (<FontAwesomeIcon icon={faCheck}
|
||||||
|
className={`monkey-on-island-run-state-icon text-success`}/>)
|
||||||
|
} else if (this.state.runningOnIslandState === 'installing') {
|
||||||
|
return (<FontAwesomeIcon icon={faSync}
|
||||||
|
className={`monkey-on-island-run-state-icon text-success spinning-icon`}/>)
|
||||||
|
} else {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
let description = this.props.description !== undefined ? (<p>{this.props.description}</p>) : ''
|
||||||
|
let icon = this.props.icon !== undefined ? (<FontAwesomeIcon icon={this.props.icon}/>) : ''
|
||||||
|
return (
|
||||||
|
<Row>
|
||||||
|
<Col>
|
||||||
|
<MissingBinariesModal
|
||||||
|
showModal={this.state.showModal}
|
||||||
|
onClose={this.closeModal}
|
||||||
|
errorDetails={this.state.errorDetails}/>
|
||||||
|
<Button variant={'outline-monkey'} size='lg' className={'selection-button'}
|
||||||
|
onClick={this.runIslandMonkey}>
|
||||||
|
{icon}
|
||||||
|
<h1>{this.props.title}</h1>
|
||||||
|
{description}
|
||||||
|
{this.getMonkeyRunStateIcon()}
|
||||||
|
</Button>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default RunOnIslandButton;
|
||||||
|
|
@ -3,13 +3,12 @@ import NextSelectionButton from '../../ui-components/inline-selection/NextSelect
|
||||||
import LocalManualRunOptions from './LocalManualRunOptions';
|
import LocalManualRunOptions from './LocalManualRunOptions';
|
||||||
import AuthComponent from '../../AuthComponent';
|
import AuthComponent from '../../AuthComponent';
|
||||||
import {faLaptopCode} from '@fortawesome/free-solid-svg-icons/faLaptopCode';
|
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 InlineSelection from '../../ui-components/inline-selection/InlineSelection';
|
||||||
import {cloneDeep} from 'lodash';
|
import {cloneDeep} from 'lodash';
|
||||||
|
import {faExpandArrowsAlt} from '@fortawesome/free-solid-svg-icons';
|
||||||
|
import RunOnIslandButton from './RunOnIslandButton';
|
||||||
|
|
||||||
function ManualRunOptions(props) {
|
function RunOptions(props) {
|
||||||
|
|
||||||
const [currentContent, setCurrentContent] = useState(loadingContents());
|
const [currentContent, setCurrentContent] = useState(loadingContents());
|
||||||
const [ips, setIps] = useState([]);
|
const [ips, setIps] = useState([]);
|
||||||
|
|
@ -45,30 +44,23 @@ function ManualRunOptions(props) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function getDefaultContents() {
|
function getDefaultContents() {
|
||||||
const newProps = cloneDeep({...props, onBackButtonClick: props.disableManualOptions});
|
const newProps = cloneDeep({...props});
|
||||||
return InlineSelection(defaultContents, newProps);
|
return InlineSelection(defaultContents, newProps);
|
||||||
}
|
}
|
||||||
|
|
||||||
function defaultContents() {
|
function defaultContents() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<NextSelectionButton text={'Local'}
|
<RunOnIslandButton title={'From Island'}
|
||||||
|
description={'Start on Monkey Island server.'}
|
||||||
|
icon={faExpandArrowsAlt}/>
|
||||||
|
<NextSelectionButton title={'Manual'}
|
||||||
description={'Run on a machine via command.'}
|
description={'Run on a machine via command.'}
|
||||||
icon={faLaptopCode}
|
icon={faLaptopCode}
|
||||||
onButtonClick={() => {
|
onButtonClick={() => {
|
||||||
setComponent(LocalManualRunOptions,
|
setComponent(LocalManualRunOptions,
|
||||||
{ips: ips, setComponent: setComponent})
|
{ips: ips, setComponent: setComponent})
|
||||||
}}/>
|
}}/>
|
||||||
<NextSelectionButton text={'Remote'}
|
|
||||||
description={'Run using remote command execution.'}
|
|
||||||
icon={faNetworkWired}
|
|
||||||
onButtonClick={() => {
|
|
||||||
}}/>
|
|
||||||
<NextSelectionButton text={'Automation'}
|
|
||||||
description={'Run using automation tools like ansible or chef.'}
|
|
||||||
icon={faCogs}
|
|
||||||
onButtonClick={() => {
|
|
||||||
}}/>
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
@ -76,4 +68,4 @@ function ManualRunOptions(props) {
|
||||||
return currentContent;
|
return currentContent;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default ManualRunOptions;
|
export default RunOptions;
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import BackButton from './BackButton';
|
import BackButton from './BackButton';
|
||||||
import ManualRunOptions from '../../pages/RunMonkeyPage/ManualRunOptions';
|
import ManualRunOptions from '../../pages/RunMonkeyPage/RunOptions';
|
||||||
import {Col, Row, Container} from 'react-bootstrap';
|
import {Col, Row, Container} from 'react-bootstrap';
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,7 @@ export default function nextSelectionButton(props) {
|
||||||
<Button variant={'outline-monkey'} size='lg' className={'selection-button'}
|
<Button variant={'outline-monkey'} size='lg' className={'selection-button'}
|
||||||
onClick={props.onButtonClick}>
|
onClick={props.onButtonClick}>
|
||||||
{icon}
|
{icon}
|
||||||
<h1>{props.text}</h1>
|
<h1>{props.title}</h1>
|
||||||
{description}
|
{description}
|
||||||
<FontAwesomeIcon icon={faAngleRight} className={'angle-right'}/>
|
<FontAwesomeIcon icon={faAngleRight} className={'angle-right'}/>
|
||||||
</Button>
|
</Button>
|
||||||
|
|
@ -23,7 +23,8 @@ export default function nextSelectionButton(props) {
|
||||||
}
|
}
|
||||||
|
|
||||||
nextSelectionButton.propTypes = {
|
nextSelectionButton.propTypes = {
|
||||||
text: PropTypes.string,
|
title: PropTypes.string,
|
||||||
icon: FontAwesomeIcon,
|
icon: FontAwesomeIcon,
|
||||||
|
description: PropTypes.string,
|
||||||
onButtonClick: PropTypes.func
|
onButtonClick: PropTypes.func
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -15,6 +15,7 @@
|
||||||
@import 'components/inline-selection/NextSelectionButton';
|
@import 'components/inline-selection/NextSelectionButton';
|
||||||
@import 'components/inline-selection/BackButton';
|
@import 'components/inline-selection/BackButton';
|
||||||
@import 'components/inline-selection/CommandDisplay';
|
@import 'components/inline-selection/CommandDisplay';
|
||||||
|
@import 'components/Icons';
|
||||||
|
|
||||||
|
|
||||||
// Define custom elements after bootstrap import
|
// Define custom elements after bootstrap import
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
.spinning-icon {
|
||||||
|
animation: spin-animation 0.5s infinite;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin-animation {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(359deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
.monkey-on-island-run-state-icon {
|
||||||
|
display: inline-block;
|
||||||
|
position: absolute;
|
||||||
|
right: 23px;
|
||||||
|
top: 28%;
|
||||||
|
font-size: 1.1em;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue