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

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

@ -1,13 +1,15 @@
import React from 'react'; import React from 'react';
import {Col, Modal} from 'react-bootstrap'; import {Col, Modal, Row} from 'react-bootstrap';
import {Link} from 'react-router-dom'; import {Link} from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import { faStopCircle } from '@fortawesome/free-solid-svg-icons/faStopCircle' import {faStopCircle} from '@fortawesome/free-solid-svg-icons/faStopCircle';
import { faMinus } from '@fortawesome/free-solid-svg-icons/faMinus' import {faMinus} from '@fortawesome/free-solid-svg-icons/faMinus';
import PreviewPaneComponent from 'components/map/preview-pane/PreviewPane'; import PreviewPaneComponent from 'components/map/preview-pane/PreviewPane';
import {ReactiveGraph} from 'components/reactive-graph/ReactiveGraph'; import {ReactiveGraph} from 'components/reactive-graph/ReactiveGraph';
import {getOptions, edgeGroupToColor} from 'components/map/MapOptions'; import {getOptions, edgeGroupToColor} from 'components/map/MapOptions';
import AuthComponent from '../AuthComponent'; import AuthComponent from '../AuthComponent';
import '../../styles/Map.scss';
import {faInfoCircle} from "@fortawesome/free-solid-svg-icons/faInfoCircle";
class MapPageComponent extends AuthComponent { class MapPageComponent extends AuthComponent {
constructor(props) { constructor(props) {
@ -73,7 +75,7 @@ class MapPageComponent extends AuthComponent {
}; };
updateTelemetryFromServer = () => { updateTelemetryFromServer = () => {
if( this.state.telemetryUpdateInProgress ) { if (this.state.telemetryUpdateInProgress) {
return return
} }
this.setState({telemetryUpdateInProgress: true}); this.setState({telemetryUpdateInProgress: true});
@ -153,7 +155,6 @@ class MapPageComponent extends AuthComponent {
</Modal.Body> </Modal.Body>
</Modal> </Modal>
) )
}; };
renderTelemetryEntry(telemetry) { renderTelemetryEntry(telemetry) {
@ -174,8 +175,8 @@ class MapPageComponent extends AuthComponent {
this.setState({ this.setState({
isScrolledUp: (element.scrollTop < this.scrollTop), isScrolledUp: (element.scrollTop < this.scrollTop),
telemetryCurrentLine: Math.trunc(element.scrollTop/telemetryLineHeight)+1, telemetryCurrentLine: Math.trunc(element.scrollTop / telemetryLineHeight) + 1,
telemetryLines: Math.trunc(element.scrollHeight/telemetryLineHeight) telemetryLines: Math.trunc(element.scrollHeight / telemetryLineHeight)
}); });
} }
@ -199,7 +200,10 @@ class MapPageComponent extends AuthComponent {
render() { render() {
return ( 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()} {this.renderKillDialogModal()}
<Col xs={12} lg={8}> <Col xs={12} lg={8}>
<h1 className="page-title">3. Infection Map</h1> <h1 className="page-title">3. Infection Map</h1>
@ -215,19 +219,16 @@ class MapPageComponent extends AuthComponent {
<b style={{color: '#aeaeae'}}> | </b> <b style={{color: '#aeaeae'}}> | </b>
<span>Island Communication <FontAwesomeIcon icon={faMinus} size="lg" style={{color: '#a9aaa9'}}/></span> <span>Island Communication <FontAwesomeIcon icon={faMinus} size="lg" style={{color: '#a9aaa9'}}/></span>
</div> </div>
{this.renderTelemetryConsole()} <div style={{height: '80vh'}} className={'map-window'}>
<div style={{height: '80vh'}}>
<ReactiveGraph graph={this.state.graph} options={getOptions(this.state.nodeStateList)} events={this.events}/>
</div>
{this.renderTelemetryLineCount()} {this.renderTelemetryLineCount()}
{this.renderTelemetryConsole()}
<ReactiveGraph graph={this.state.graph} options={getOptions(this.state.nodeStateList)}
events={this.events}/>
</div>
</Col> </Col>
<Col xs={4}> <Col xs={4}>
<input className="form-control input-block"
placeholder="Find on map"
style={{'marginBottom': '1em'}}/>
<div style={{'overflow': 'auto', '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> Telemetry</Link>
<button onClick={() => this.setState({showKillDialog: true})} className="btn btn-danger pull-right" <button onClick={() => this.setState({showKillDialog: true})} className="btn btn-danger pull-right"
style={{'width': '48%'}}> style={{'width': '48%'}}>
@ -237,14 +238,15 @@ class MapPageComponent extends AuthComponent {
</div> </div>
{this.state.killPressed ? {this.state.killPressed ?
<div className="alert alert-info"> <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 Kill command sent to all monkeys
</div> </div>
: ''} : ''}
<PreviewPaneComponent item={this.state.selected} type={this.state.selectedType}/> <PreviewPaneComponent item={this.state.selected} type={this.state.selectedType}/>
</Col> </Col>
</div> </Row>
</Col>
); );
} }
} }