Add map to report

monkey_island/cc/ui/src/components/map/MapOptions.js

@@ -0,0 +1,52 @@
+let groupNames = ['clean_unknown', 'clean_linux', 'clean_windows', 'exploited_linux', 'exploited_windows', 'island',
+  'island_monkey_linux', 'island_monkey_linux_running', 'island_monkey_windows', 'island_monkey_windows_running',
+  'manual_linux', 'manual_linux_running', 'manual_windows', 'manual_windows_running', 'monkey_linux',
+  'monkey_linux_running', 'monkey_windows', 'monkey_windows_running'];
+
+let getGroupsOptions = () => {
+  let groupOptions = {};
+  for (let groupName of groupNames) {
+    groupOptions[groupName] =
+      {
+        shape: 'image',
+        size: 50,
+        image: require('../../images/nodes/' + groupName + '.png')
+      };
+  }
+  return groupOptions;
+};
+
+export const options = {
+  autoResize: true,
+  layout: {
+    improvedLayout: false
+  },
+  edges: {
+    width: 2,
+    smooth: {
+      type: 'curvedCW'
+    }
+  },
+  physics: {
+    barnesHut: {
+      gravitationalConstant: -120000,
+      avoidOverlap: 0.5
+    },
+    minVelocity: 0.75
+  },
+  groups: getGroupsOptions()
+};
+
+export function edgeGroupToColor(group) {
+  switch (group) {
+    case 'exploited':
+      return '#c00';
+    case 'tunnel':
+      return '#0058aa';
+    case 'scan':
+      return '#f90';
+    case 'island':
+      return '#aaa';
+  }
+  return 'black';
+}

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

@@ -2,48 +2,10 @@ import React from 'react';
 import {Col} from 'react-bootstrap';
 import {Link} from 'react-router-dom';
 import {Icon} from 'react-fa';
-import PreviewPane from 'components/preview-pane/PreviewPane';
+import PreviewPane from 'components/map/preview-pane/PreviewPane';
-import {ReactiveGraph} from '../reactive-graph/ReactiveGraph';
+import {ReactiveGraph} from 'components/reactive-graph/ReactiveGraph';
 import {ModalContainer, ModalDialog} from 'react-modal-dialog';
-
+import {options, edgeGroupToColor} from 'components/map/MapOptions';
-let groupNames = ['clean_unknown', 'clean_linux', 'clean_windows', 'exploited_linux', 'exploited_windows', 'island',
-  'island_monkey_linux', 'island_monkey_linux_running', 'island_monkey_windows', 'island_monkey_windows_running',
-  'manual_linux', 'manual_linux_running', 'manual_windows', 'manual_windows_running', 'monkey_linux',
-  'monkey_linux_running', 'monkey_windows', 'monkey_windows_running'];
-
-let getGroupsOptions = () => {
-  let groupOptions = {};
-  for (let groupName of groupNames) {
-    groupOptions[groupName] =
-      {
-        shape: 'image',
-        size: 50,
-        image: require('../../images/nodes/' + groupName + '.png')
-      };
-  }
-  return groupOptions;
-};
-
-let options = {
-  autoResize: true,
-  layout: {
-    improvedLayout: false
-  },
-  edges: {
-    width: 2,
-    smooth: {
-      type: 'curvedCW'
-    }
-  },
-  physics: {
-    barnesHut: {
-      gravitationalConstant: -120000,
-      avoidOverlap: 0.5
-    },
-    minVelocity: 0.75
-  },
-  groups: getGroupsOptions()
-};
 
 class MapPageComponent extends React.Component {
   constructor(props) {
@@ -61,20 +23,6 @@ class MapPageComponent extends React.Component {
     select: event => this.selectionChanged(event)
   };
 
-  static edgeGroupToColor(group) {
-    switch (group) {
-      case 'exploited':
-        return '#c00';
-      case 'tunnel':
-        return '#0058aa';
-      case 'scan':
-        return '#f90';
-      case 'island':
-        return '#aaa';
-    }
-    return 'black';
-  }
-
   componentDidMount() {
     this.updateMapFromServer();
     this.interval = setInterval(this.updateMapFromServer, 1000);
@@ -89,7 +37,7 @@ class MapPageComponent extends React.Component {
       .then(res => res.json())
       .then(res => {
         res.edges.forEach(edge => {
-          edge.color = MapPageComponent.edgeGroupToColor(edge.group);
+          edge.color = edgeGroupToColor(edge.group);
         });
         this.setState({graph: res});
         this.props.onStatusChange();

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

@@ -2,24 +2,42 @@ import React from 'react';
 import {Col} from 'react-bootstrap';
 import BreachedServers from 'components/report-components/BreachedServers';
 import ScannedServers from 'components/report-components/ScannedServers';
-
+import {ReactiveGraph} from 'components/reactive-graph/ReactiveGraph';
-const list_item = {
+import {options, edgeGroupToColor} from 'components/map/MapOptions';
-  label: 'machine 1',
-  ip_addresses: ['1.2.3.4', '5.6.7.8'],
-  accessible_from_nodes: ['machine 2', 'machine 3'],
-  services: ['tcp-80', 'tcp-443']
-};
 
 class ReportPageComponent extends React.Component {
   constructor(props) {
     super(props);
 
     this.state = {
-      report: {}
+      report: {},
+      graph: {nodes: [], edges: []}
     };
   }
 
   componentDidMount() {
+    this.getReportFromServer();
+    this.updateMapFromServer();
+    this.interval = setInterval(this.updateMapFromServer, 1000);
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.interval);
+  }
+
+  updateMapFromServer = () => {
+    fetch('/api/netmap')
+      .then(res => res.json())
+      .then(res => {
+        res.edges.forEach(edge => {
+          edge.color = edgeGroupToColor(edge.group);
+        });
+        this.setState({graph: res});
+        this.props.onStatusChange();
+      });
+  };
+
+  getReportFromServer() {
     fetch('/api/report')
       .then(res => res.json())
       .then(res => {
@@ -31,7 +49,7 @@ class ReportPageComponent extends React.Component {
 
   render() {
     if (Object.keys(this.state.report).length === 0) {
-      return (<div></div>);
+      return (<div />);
     }
     return (
       <Col xs={12} lg={8}>
@@ -47,10 +65,9 @@ class ReportPageComponent extends React.Component {
             </p>
             <p>
               From the attacker's point of view, the network looks like this:
-              {/* TODO: Add map */}
             </p>
-            <div>
+            <div style={{height: '80vh'}}>
-              <h3>* Imagine Map here :) *</h3>
+              <ReactiveGraph graph={this.state.graph} options={options} />
             </div>
             <div>
               {/* TODO: Replace 3 with data */}
@@ -85,11 +102,11 @@ class ReportPageComponent extends React.Component {
             <div>
               Detailed recommendations in the next part of the <a href="#recommendations">report</a>.
               <h4>Breached Servers</h4>
-              <BreachedServers data={this.state.report.exploited}></BreachedServers>
+              <BreachedServers data={this.state.report.exploited} />
             </div>
             <div>
               <h4>Scanned Servers</h4>
-              <ScannedServers data={this.state.report.scanned}></ScannedServers>
+              <ScannedServers data={this.state.report.scanned} />
               {/* TODO: Add table of scanned servers */}
             </div>
           </div>