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 { 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,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>
     );
   }
 }