From e29f95b28ed28e4add99a2b0cca5b40bbbefb777 Mon Sep 17 00:00:00 2001
From: Itay Mizeretz <itay.mizeretz@guardicore.com>
Date: Sun, 8 Oct 2017 14:09:58 +0300
Subject: [PATCH] Utilize entire screen for Graph

---
 monkey_island/cc/ui/package.json              |  1 +
 .../cc/ui/src/components/pages/MapPage.js     | 22 +++++++++++--------
 .../reactive-graph/ReactiveGraph.js           | 15 +++++++++++++
 3 files changed, 29 insertions(+), 9 deletions(-)
 create mode 100644 monkey_island/cc/ui/src/components/reactive-graph/ReactiveGraph.js

diff --git a/monkey_island/cc/ui/package.json b/monkey_island/cc/ui/package.json
index 8d63d00c2..e47f4bae0 100644
--- a/monkey_island/cc/ui/package.json
+++ b/monkey_island/cc/ui/package.json
@@ -70,6 +70,7 @@
     "react-bootstrap": "^0.31.2",
     "react-copy-to-clipboard": "^5.0.0",
     "react-data-components": "^1.1.1",
+    "react-dimensions": "^1.3.0",
     "react-dom": "^15.6.1",
     "react-fa": "^4.2.0",
     "react-graph-vis": "^0.1.3",
diff --git a/monkey_island/cc/ui/src/components/pages/MapPage.js b/monkey_island/cc/ui/src/components/pages/MapPage.js
index a418cc05f..4fe280714 100644
--- a/monkey_island/cc/ui/src/components/pages/MapPage.js
+++ b/monkey_island/cc/ui/src/components/pages/MapPage.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import {Col} from 'react-bootstrap';
-import Graph from 'react-graph-vis';
-import PreviewPane from 'components/preview-pane/PreviewPane';
 import {Link} from 'react-router-dom';
 import {Icon} from 'react-fa';
+import PreviewPane from 'components/preview-pane/PreviewPane';
+import {ReactiveGraph} from '../reactive-graph/ReactiveGraph';
 
 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',
@@ -26,6 +26,7 @@ let getGroupsOptions = () => {
 };
 
 let options = {
+  autoResize: true,
   layout: {
     improvedLayout: false
   },
@@ -97,19 +98,19 @@ class MapPageComponent extends React.Component {
   selectionChanged(event) {
     if (event.nodes.length === 1) {
       console.log('selected node:', event.nodes[0]); // eslint-disable-line no-console
-      fetch('/api/netmap/node?id='+event.nodes[0])
+      fetch('/api/netmap/node?id=' + event.nodes[0])
         .then(res => res.json())
         .then(res => this.setState({selected: res, selectedType: 'node'}));
     }
     else if (event.edges.length === 1) {
       let displayedEdge = this.state.graph.edges.find(
-        function(edge) {
+        function (edge) {
           return edge['id'] === event.edges[0];
         });
       if (displayedEdge['group'] === 'island') {
         this.setState({selected: displayedEdge, selectedType: 'island_edge'});
       } else {
-        fetch('/api/netmap/edge?id='+event.edges[0])
+        fetch('/api/netmap/edge?id=' + event.edges[0])
           .then(res => res.json())
           .then(res => this.setState({selected: res.edge, selectedType: 'edge'}));
       }
@@ -136,7 +137,9 @@ class MapPageComponent extends React.Component {
           <img src={legend}/>
         </Col>
         <Col xs={8}>
-          <Graph graph={this.state.graph} options={options} events={this.events}/>
+          <div style={{height: '80vh'}}>
+            <ReactiveGraph graph={this.state.graph} options={options} events={this.events}/>
+          </div>
         </Col>
         <Col xs={4}>
           <input className="form-control input-block"
@@ -144,9 +147,10 @@ class MapPageComponent extends React.Component {
                  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>
+            <Link to="/infection/telemetry" className="btn btn-default pull-left" style={{'width': '48%'}}>Monkey
+              Telemetry</Link>
             <button onClick={this.killAllMonkeys} className="btn btn-danger pull-right" style={{'width': '48%'}}>
-              <Icon name="stop-circle" style={{'marginRight': '0.5em'}} />
+              <Icon name="stop-circle" style={{'marginRight': '0.5em'}}/>
               Kill All Monkeys
             </button>
           </div>
@@ -157,7 +161,7 @@ class MapPageComponent extends React.Component {
             </div>
             : ''}
 
-          <PreviewPane item={this.state.selected} type={this.state.selectedType} />
+          <PreviewPane item={this.state.selected} type={this.state.selectedType}/>
         </Col>
       </div>
     );
diff --git a/monkey_island/cc/ui/src/components/reactive-graph/ReactiveGraph.js b/monkey_island/cc/ui/src/components/reactive-graph/ReactiveGraph.js
new file mode 100644
index 000000000..c175becd3
--- /dev/null
+++ b/monkey_island/cc/ui/src/components/reactive-graph/ReactiveGraph.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import Graph from 'react-graph-vis';
+import Dimensions from 'react-dimensions'
+
+class GraphWrapper extends React.Component {
+  render() {
+    let 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}/>)
+  }
+}
+
+let ReactiveGraph = Dimensions()(GraphWrapper);
+export {ReactiveGraph};