Fixed UI bug where security report map didn't show propper images

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

@@ -3,8 +3,6 @@ import '../../styles/report/ReportPage.scss';
 import React from 'react';
 import {Route} from 'react-router-dom';
 import {Col, Nav, NavItem} from 'react-bootstrap';
-import {ReactiveGraph} from 'components/reactive-graph/ReactiveGraph';
-import {edgeGroupToColor, options} from 'components/map/MapOptions';
 import AuthComponent from '../AuthComponent';
 import MustRunMonkeyWarning from '../report-components/common/MustRunMonkeyWarning';
 import AttackReport from '../report-components/AttackReport'

monkey/monkey_island/cc/ui/src/components/reactive-graph/ReactiveGraph.js

@@ -3,10 +3,18 @@ import Graph from 'react-graph-vis';
 import Dimensions from 'react-dimensions'
 
 class GraphWrapper extends React.Component {
+
+  constructor(props) {
+    super(props);
+  }
+
   render() {
-    let newOptions = this.props.options;
+    let newOptions = null;
+    if(this.props.options !== undefined){
+      newOptions = this.props.options;
       newOptions.height = this.props.containerHeight.toString() + 'px';
       newOptions.width = this.props.containerWidth.toString() + 'px';
+    }
     return (<Graph graph={this.props.graph} options={newOptions} events={this.props.events}/>)
   }
 }

monkey/monkey_island/cc/ui/src/components/report-components/SecurityReport.js

@@ -3,7 +3,7 @@ import BreachedServers from 'components/report-components/security/BreachedServe
 import ScannedServers from 'components/report-components/security/ScannedServers';
 import PostBreach from 'components/report-components/security/PostBreach';
 import {ReactiveGraph} from 'components/reactive-graph/ReactiveGraph';
-import {edgeGroupToColor, options} from 'components/map/MapOptions';
+import {edgeGroupToColor, getOptions} from 'components/map/MapOptions';
 import StolenPasswords from 'components/report-components/security/StolenPasswords';
 import CollapsibleWellComponent from 'components/report-components/security/CollapsibleWell';
 import {Line} from 'rc-progress';
@@ -54,14 +54,24 @@ class ReportPageComponent extends AuthComponent {
     super(props);
     this.state = {
       report: props.report,
-      graph: {nodes: [], edges: []}
+      graph: {nodes: [], edges: []},
+      nodeStateList: []
     };
   }
 
   componentDidMount() {
+    this.getNodeStateListFromServer();
     this.updateMapFromServer();
   }
 
+  getNodeStateListFromServer = () => {
+    this.authFetch('/api/netmap/nodeStates')
+      .then(res => res.json())
+      .then(res => {
+        this.setState({nodeStateList: res.node_states});
+      });
+  };
+
   componentWillUnmount() {
     clearInterval(this.interval);
   }
@@ -396,7 +406,7 @@ class ReportPageComponent extends AuthComponent {
           <span>Island Communication <FontAwesomeIcon icon={faMinus} size="lg"  style={{color: '#a9aaa9'}}/></span>
         </div>
         <div style={{position: 'relative', height: '80vh'}}>
-          <ReactiveGraph graph={this.state.graph} options={options}/>
+          <ReactiveGraph graph={this.state.graph} options={getOptions(this.state.nodeStateList)}/>
         </div>
         <div style={{marginBottom: '20px'}}>
           <BreachedServers data={this.state.report.glance.exploited}/>