p20319658
/
monkey
forked from p34709852/monkey
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Rolled back merge changes that broke map page UI

This commit is contained in:
VakarisZ 2020-06-22 12:16:23 +03:00
parent 78cf0b5791
commit 79bf05d320
1 changed files with 54 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
monkey/monkey_island/cc/ui/src/components/pages/MapPage.js
View File

@ -1,13 +1,15 @@
import React from 'react';
import {Col, Modal} from 'react-bootstrap';
import {Col, Modal, Row} from 'react-bootstrap';
import {Link} from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faStopCircle } from '@fortawesome/free-solid-svg-icons/faStopCircle'
import { faMinus } from '@fortawesome/free-solid-svg-icons/faMinus'
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faStopCircle} from '@fortawesome/free-solid-svg-icons/faStopCircle';
import {faMinus} from '@fortawesome/free-solid-svg-icons/faMinus';
import PreviewPaneComponent from 'components/map/preview-pane/PreviewPane';
import {ReactiveGraph} from 'components/reactive-graph/ReactiveGraph';
import {getOptions, edgeGroupToColor} from 'components/map/MapOptions';
import AuthComponent from '../AuthComponent';
import '../../styles/Map.scss';
import {faInfoCircle} from "@fortawesome/free-solid-svg-icons/faInfoCircle";
class MapPageComponent extends AuthComponent {
constructor(props) {
@ -73,7 +75,7 @@ class MapPageComponent extends AuthComponent {
};
updateTelemetryFromServer = () => {
if( this.state.telemetryUpdateInProgress ) {
if (this.state.telemetryUpdateInProgress) {
return
}
this.setState({telemetryUpdateInProgress: true});
@ -153,7 +155,6 @@ class MapPageComponent extends AuthComponent {
</Modal.Body>
</Modal>
)
};
renderTelemetryEntry(telemetry) {
@ -174,8 +175,8 @@ class MapPageComponent extends AuthComponent {
this.setState({
isScrolledUp: (element.scrollTop < this.scrollTop),
telemetryCurrentLine: Math.trunc(element.scrollTop/telemetryLineHeight)+1,
telemetryLines: Math.trunc(element.scrollHeight/telemetryLineHeight)
telemetryCurrentLine: Math.trunc(element.scrollTop / telemetryLineHeight) + 1,
telemetryLines: Math.trunc(element.scrollHeight / telemetryLineHeight)
});
}
@ -199,52 +200,53 @@ class MapPageComponent extends AuthComponent {
render() {
return (
<div>
{this.renderKillDialogModal()}
<Col xs={12} lg={8}>
<h1 className="page-title">3. Infection Map</h1>
</Col>
<Col xs={8}>
<div className="map-legend">
<b>Legend: </b>
<span>Exploit <FontAwesomeIcon icon={faMinus} size="lg" style={{color: '#cc0200'}}/></span>
<b style={{color: '#aeaeae'}}> | </b>
<span>Scan <FontAwesomeIcon icon={faMinus} size="lg" style={{color: '#ff9900'}}/></span>
<b style={{color: '#aeaeae'}}> | </b>
<span>Tunnel <FontAwesomeIcon icon={faMinus} size="lg" style={{color: '#0158aa'}}/></span>
<b style={{color: '#aeaeae'}}> | </b>
<span>Island Communication <FontAwesomeIcon icon={faMinus} size="lg" style={{color: '#a9aaa9'}}/></span>
</div>
{this.renderTelemetryConsole()}
<div style={{height: '80vh'}}>
<ReactiveGraph graph={this.state.graph} options={getOptions(this.state.nodeStateList)} events={this.events}/>
</div>
{this.renderTelemetryLineCount()}
</Col>
<Col xs={4}>
<input className="form-control input-block"
placeholder="Find on map"
style={{'marginBottom': '1em'}}/>
<div style={{'overflow': 'auto', 'marginBottom': '1em'}}>
<Link to="/infection/telemetry" className="btn btn-default pull-left" style={{'width': '48%'}}>Monkey
Telemetry</Link>
<button onClick={() => this.setState({showKillDialog: true})} className="btn btn-danger pull-right"
style={{'width': '48%'}}>
<FontAwesomeIcon icon={faStopCircle} style={{'marginRight': '0.5em'}}/>
Kill All Monkeys
</button>
</div>
{this.state.killPressed ?
<div className="alert alert-info">
<i className="glyphicon glyphicon-info-sign" style={{'marginRight': '5px'}}/>
Kill command sent to all monkeys
<Col sm={{offset: 3, span: 9}} md={{offset: 3, span: 9}}
lg={{offset: 3, span: 9}} xl={{offset: 2, span: 10}}
className={'main'}>
<Row>
{this.renderKillDialogModal()}
<Col xs={12} lg={8}>
<h1 className="page-title">3. Infection Map</h1>
</Col>
<Col xs={8}>
<div className="map-legend">
<b>Legend: </b>
<span>Exploit <FontAwesomeIcon icon={faMinus} size="lg" style={{color: '#cc0200'}}/></span>
<b style={{color: '#aeaeae'}}> | </b>
<span>Scan <FontAwesomeIcon icon={faMinus} size="lg" style={{color: '#ff9900'}}/></span>
<b style={{color: '#aeaeae'}}> | </b>
<span>Tunnel <FontAwesomeIcon icon={faMinus} size="lg" style={{color: '#0158aa'}}/></span>
<b style={{color: '#aeaeae'}}> | </b>
<span>Island Communication <FontAwesomeIcon icon={faMinus} size="lg" style={{color: '#a9aaa9'}}/></span>
</div>
: ''}
<div style={{height: '80vh'}} className={'map-window'}>
{this.renderTelemetryLineCount()}
{this.renderTelemetryConsole()}
<ReactiveGraph graph={this.state.graph} options={getOptions(this.state.nodeStateList)}
events={this.events}/>
</div>
</Col>
<Col xs={4}>
<div style={{'overflow': 'auto', 'marginBottom': '1em'}}>
<Link to="/infection/telemetry" className="btn btn-light pull-left" style={{'width': '48%'}}>Monkey
Telemetry</Link>
<button onClick={() => this.setState({showKillDialog: true})} className="btn btn-danger pull-right"
style={{'width': '48%'}}>
<FontAwesomeIcon icon={faStopCircle} style={{'marginRight': '0.5em'}}/>
Kill All Monkeys
</button>
</div>
{this.state.killPressed ?
<div className="alert alert-info">
<FontAwesomeIcon icon={faInfoCircle} style={{'marginRight': '5px'}} />
Kill command sent to all monkeys
</div>
: ''}
<PreviewPaneComponent item={this.state.selected} type={this.state.selectedType}/>
</Col>
</div>
<PreviewPaneComponent item={this.state.selected} type={this.state.selectedType}/>
</Col>
</Row>
</Col>
);
}
}