Run monkey page improved visually

This commit is contained in:
Itay Mizeretz 2017-10-17 11:04:13 +03:00
parent d95515d678
commit 9cbe35cddd
1 changed files with 61 additions and 33 deletions

View File

@ -1,5 +1,5 @@
import React from 'react';
import {Button, Col, Well, Nav, NavItem} from 'react-bootstrap';
import {Button, Col, Well, Nav, NavItem, Collapse} from 'react-bootstrap';
import CopyToClipboard from 'react-copy-to-clipboard';
import {Icon} from 'react-fa';
import {Link} from 'react-router-dom';
@ -10,10 +10,11 @@ class RunMonkeyPageComponent extends React.Component {
super(props);
this.state = {
ips: [],
selectedIp: '0.0.0.0',
runningOnIslandState: 'not_running',
runningOnClientState: 'not_running',
selectedSection: 'windows-32'
selectedIp: '0.0.0.0',
selectedOs: 'windows-32',
showManual: false
};
}
@ -21,7 +22,8 @@ class RunMonkeyPageComponent extends React.Component {
fetch('/api')
.then(res => res.json())
.then(res => this.setState({
ips: res['ip_addresses']
ips: res['ip_addresses'],
selectedIp: res['ip_addresses'][0]
}));
fetch('/api/local-monkey')
@ -80,17 +82,17 @@ class RunMonkeyPageComponent extends React.Component {
});
};
generateCmdDiv(ip) {
let isLinux = (this.state.selectedSection.split('-')[0] === 'linux');
let is32Bit = (this.state.selectedSection.split('-')[1] === '32');
generateCmdDiv() {
let isLinux = (this.state.selectedOs.split('-')[0] === 'linux');
let is32Bit = (this.state.selectedOs.split('-')[1] === '32');
let cmdText = '';
if (isLinux) {
cmdText = this.generateLinuxCmd(ip, is32Bit);
cmdText = this.generateLinuxCmd(this.state.selectedIp, is32Bit);
} else {
cmdText = this.generateWindowsCmd(ip, is32Bit);
cmdText = this.generateWindowsCmd(this.state.selectedIp, is32Bit);
}
return (
<Well key={'cmdDiv'+ip} className="well-sm" style={{'margin': '0.5em'}}>
<Well key={'cmdDiv'+this.state.selectedIp} className="well-sm" 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">
@ -103,9 +105,15 @@ class RunMonkeyPageComponent extends React.Component {
)
}
setSelectedSection = (key) => {
setSelectedOs = (key) => {
this.setState({
selectedSection: key
selectedOs: key
});
};
setSelectedIp = (key) => {
this.setState({
selectedIp: key
});
};
@ -119,18 +127,24 @@ class RunMonkeyPageComponent extends React.Component {
}
}
toggleManual = () => {
this.setState({
showManual: !this.state.showManual
});
};
render() {
return (
<Col xs={12} lg={8}>
<h1 className="page-title">Run the Monkey</h1>
<p style={{'fontSize': '1.2em', 'marginBottom': '2em'}}>
You can run the monkey on the C&C server, on your local machine and basically everywhere.
The more the merrier &#x1F604;
Go ahead and run the monkey!
</p>
<p style={{'marginBottom': '2em'}}>
<p>
<button onClick={this.runLocalMonkey}
className="btn btn-default"
disabled={this.state.runningOnIslandState !== 'not_running'}>
className="btn btn-default btn-lg center-block"
disabled={this.state.runningOnIslandState !== 'not_running'}
>
Run on C&C Server
{ this.renderIconByState(this.state.runningOnIslandState) }
</button>
@ -147,22 +161,36 @@ class RunMonkeyPageComponent extends React.Component {
*/
}
</p>
<div className="run-monkey-snippets" style={{'marginBottom': '3em'}}>
<p>
Run one of those snippets on a host for infecting it with a Monkey:
<br/>
<span className="text-muted">(The IP address is used as the monkey's C&C address)</span>
</p>
<Nav bsStyle="pills" justified
activeKey={this.state.selectedSection} onSelect={this.setSelectedSection}
style={{'marginBottom': '2em'}}>
<NavItem key='windows-32' eventKey='windows-32'>Windows (32 bit)</NavItem>
<NavItem key='windows-64' eventKey='windows-64'>Windows (64 bit)</NavItem>
<NavItem key='linux-32' eventKey='linux-32'>Linux (32 bit)</NavItem>
<NavItem key='linux-64' eventKey='linux-64'>Linux (64 bit)</NavItem>
</Nav>
{this.state.ips.map(ip => this.generateCmdDiv(ip))}
</div>
<p className="text-center">
OR
</p>
<p style={{'marginBottom': '2em'}}>
<button onClick={this.toggleManual} className={'btn btn-default btn-lg center-block' + (this.state.showManual ? ' active' : '')}>
Run on machine of your choice
</button>
</p>
<Collapse in={this.state.showManual}>
<div>
<p>
Choose the operating system you want to run the monkey on, and the interface to communicate with
</p>
<Nav bsStyle="pills" justified activeKey={this.state.selectedOs} onSelect={this.setSelectedOs}>
<NavItem key='windows-32' eventKey='windows-32'>Windows (32 bit)</NavItem>
<NavItem key='windows-64' eventKey='windows-64'>Windows (64 bit)</NavItem>
<NavItem key='linux-32' eventKey='linux-32'>Linux (32 bit)</NavItem>
<NavItem key='linux-64' eventKey='linux-64'>Linux (64 bit)</NavItem>
</Nav>
<Nav bsStyle="pills" justified activeKey={this.state.selectedIp} onSelect={this.setSelectedIp}
style={{'marginBottom': '2em'}}>
{this.state.ips.map(ip => <NavItem key={ip} eventKey={ip}>{ip}</NavItem>)}
</Nav>
<p>
Copy the following command to your machine and run it as Administrator/root
</p>
{this.generateCmdDiv()}
</div>
</Collapse>
<p style={{'fontSize': '1.2em'}}>
Go ahead and monitor the ongoing infection in the <Link to="/infection/map">Infection Map</Link> view.
</p>