From f07d058d8b43299b4c178dba5ada7da17f01417e Mon Sep 17 00:00:00 2001
From: VakarisZ <vakarisz@yahoo.com>
Date: Fri, 13 Mar 2020 12:44:19 +0200
Subject: [PATCH] Fixed UI bug where security report map didn't show propper
 images

---
 .../cc/ui/src/components/pages/ReportPage.js     |  2 --
 .../components/reactive-graph/ReactiveGraph.js   | 14 +++++++++++---
 .../report-components/SecurityReport.js          | 16 +++++++++++++---
 3 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/monkey/monkey_island/cc/ui/src/components/pages/ReportPage.js b/monkey/monkey_island/cc/ui/src/components/pages/ReportPage.js
index 451b69213..909659e87 100644
--- a/monkey/monkey_island/cc/ui/src/components/pages/ReportPage.js
+++ b/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'
diff --git a/monkey/monkey_island/cc/ui/src/components/reactive-graph/ReactiveGraph.js b/monkey/monkey_island/cc/ui/src/components/reactive-graph/ReactiveGraph.js
index c175becd3..3199385ba 100644
--- a/monkey/monkey_island/cc/ui/src/components/reactive-graph/ReactiveGraph.js
+++ b/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;
-    newOptions.height = this.props.containerHeight.toString() + 'px';
-    newOptions.width = this.props.containerWidth.toString() + 'px';
+    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}/>)
   }
 }
diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/SecurityReport.js b/monkey/monkey_island/cc/ui/src/components/report-components/SecurityReport.js
index b44f367e1..63bde5203 100644
--- a/monkey/monkey_island/cc/ui/src/components/report-components/SecurityReport.js
+++ b/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}/>