Rolled back merge changes that broke map page UI

monkey/monkey_island/cc/ui/src/components/pages/MapPage.js

@@ -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 {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 {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,
+      telemetryCurrentLine: Math.trunc(element.scrollTop / telemetryLineHeight) + 1,
-      telemetryLines: Math.trunc(element.scrollHeight/telemetryLineHeight)
+      telemetryLines: Math.trunc(element.scrollHeight / telemetryLineHeight)
     });
   }
 
@@ -199,52 +200,53 @@ class MapPageComponent extends AuthComponent {
 
   render() {
     return (
-      <div>
+      <Col sm={{offset: 3, span: 9}} md={{offset: 3, span: 9}}
-        {this.renderKillDialogModal()}
+           lg={{offset: 3, span: 9}} xl={{offset: 2, span: 10}}
-        <Col xs={12} lg={8}>
+           className={'main'}>
-          <h1 className="page-title">3. Infection Map</h1>
+        <Row>
-        </Col>
+          {this.renderKillDialogModal()}
-        <Col xs={8}>
+          <Col xs={12} lg={8}>
-          <div className="map-legend">
+            <h1 className="page-title">3. Infection Map</h1>
-            <b>Legend: </b>
+          </Col>
-            <span>Exploit <FontAwesomeIcon icon={faMinus} size="lg" style={{color: '#cc0200'}}/></span>
+          <Col xs={8}>
-            <b style={{color: '#aeaeae'}}> | </b>
+            <div className="map-legend">
-            <span>Scan <FontAwesomeIcon icon={faMinus} size="lg" style={{color: '#ff9900'}}/></span>
+              <b>Legend: </b>
-            <b style={{color: '#aeaeae'}}> | </b>
+              <span>Exploit <FontAwesomeIcon icon={faMinus} size="lg" style={{color: '#cc0200'}}/></span>
-            <span>Tunnel <FontAwesomeIcon icon={faMinus} size="lg" style={{color: '#0158aa'}}/></span>
+              <b style={{color: '#aeaeae'}}> | </b>
-            <b style={{color: '#aeaeae'}}> | </b>
+              <span>Scan <FontAwesomeIcon icon={faMinus} size="lg" style={{color: '#ff9900'}}/></span>
-            <span>Island Communication <FontAwesomeIcon icon={faMinus} size="lg" style={{color: '#a9aaa9'}}/></span>
+              <b style={{color: '#aeaeae'}}> | </b>
-          </div>
+              <span>Tunnel <FontAwesomeIcon icon={faMinus} size="lg" style={{color: '#0158aa'}}/></span>
-          {this.renderTelemetryConsole()}
+              <b style={{color: '#aeaeae'}}> | </b>
-          <div style={{height: '80vh'}}>
+              <span>Island Communication <FontAwesomeIcon icon={faMinus} size="lg" style={{color: '#a9aaa9'}}/></span>
-            <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
             </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}/>
+            <PreviewPaneComponent item={this.state.selected} type={this.state.selectedType}/>
-        </Col>
+          </Col>
-      </div>
+        </Row>
+      </Col>
     );
   }
 }