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

36
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) {
@ -153,7 +155,6 @@ class MapPageComponent extends AuthComponent {
</Modal.Body>
</Modal>
)
};
renderTelemetryEntry(telemetry) {
@ -199,7 +200,10 @@ class MapPageComponent extends AuthComponent {
render() {
return (
<div>
<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>
@ -215,19 +219,16 @@ class MapPageComponent extends AuthComponent {
<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>
<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}>
<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
<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%'}}>
@ -237,14 +238,15 @@ class MapPageComponent extends AuthComponent {
</div>
{this.state.killPressed ?
<div className="alert alert-info">
<i className="glyphicon glyphicon-info-sign" style={{'marginRight': '5px'}}/>
<FontAwesomeIcon icon={faInfoCircle} style={{'marginRight': '5px'}} />
Kill command sent to all monkeys
</div>
: ''}
<PreviewPaneComponent item={this.state.selected} type={this.state.selectedType}/>
</Col>
</div>
</Row>
</Col>
);
}
}