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 InlineSelection from '../../ui-components/inline-selection/InlineSelection';
|
||||
import ManualRunOptions from './ManualRunOptions';
|
||||
import DropdownSelect from '../../ui-components/DropdownSelect';
|
||||
import {OS_TYPES} from './OsTypes';
|
||||
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 {css} from '@emotion/core';
|
||||
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 {Col} from 'react-bootstrap';
|
||||
import {Link} from 'react-router-dom';
|
||||
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 {
|
||||
|
||||
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() {
|
||||
return (
|
||||
<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!
|
||||
<i> (Or <Link to="/configure">configure the monkey</Link> to fine tune its behavior)</i>
|
||||
</p>
|
||||
{this.state.showManual ?
|
||||
<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>
|
||||
<RunOptions />
|
||||
</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 AuthComponent from '../../AuthComponent';
|
||||
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';
|
||||
import {faExpandArrowsAlt} from '@fortawesome/free-solid-svg-icons';
|
||||
import RunOnIslandButton from './RunOnIslandButton';
|
||||
|
||||
function ManualRunOptions(props) {
|
||||
function RunOptions(props) {
|
||||
|
||||
const [currentContent, setCurrentContent] = useState(loadingContents());
|
||||
const [ips, setIps] = useState([]);
|
||||
|
|
@ -45,30 +44,23 @@ function ManualRunOptions(props) {
|
|||
}
|
||||
|
||||
function getDefaultContents() {
|
||||
const newProps = cloneDeep({...props, onBackButtonClick: props.disableManualOptions});
|
||||
const newProps = cloneDeep({...props});
|
||||
return InlineSelection(defaultContents, newProps);
|
||||
}
|
||||
|
||||
function defaultContents() {
|
||||
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.'}
|
||||
icon={faLaptopCode}
|
||||
onButtonClick={() => {
|
||||
setComponent(LocalManualRunOptions,
|
||||
{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;
|
||||
}
|
||||
|
||||
export default ManualRunOptions;
|
||||
export default RunOptions;
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import BackButton from './BackButton';
|
||||
import ManualRunOptions from '../../pages/RunMonkeyPage/ManualRunOptions';
|
||||
import ManualRunOptions from '../../pages/RunMonkeyPage/RunOptions';
|
||||
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'}
|
||||
onClick={props.onButtonClick}>
|
||||
{icon}
|
||||
<h1>{props.text}</h1>
|
||||
<h1>{props.title}</h1>
|
||||
{description}
|
||||
<FontAwesomeIcon icon={faAngleRight} className={'angle-right'}/>
|
||||
</Button>
|
||||
|
|
@ -23,7 +23,8 @@ export default function nextSelectionButton(props) {
|
|||
}
|
||||
|
||||
nextSelectionButton.propTypes = {
|
||||
text: PropTypes.string,
|
||||
title: PropTypes.string,
|
||||
icon: FontAwesomeIcon,
|
||||
description: PropTypes.string,
|
||||
onButtonClick: PropTypes.func
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
@import 'components/inline-selection/NextSelectionButton';
|
||||
@import 'components/inline-selection/BackButton';
|
||||
@import 'components/inline-selection/CommandDisplay';
|
||||
@import 'components/Icons';
|
||||
|
||||
|
||||
// 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