From 4afbfb8280f83df8ea6f86fc511c0650a1aa21f9 Mon Sep 17 00:00:00 2001
From: Itay Mizeretz <itay.mizeretz@guardicore.com>
Date: Sun, 24 Sep 2017 16:41:04 +0300
Subject: [PATCH] Cosmetic fixes and improves to map

---
 monkey_island/cc/services/edge.py             |   2 +-
 .../cc/ui/src/components/pages/MapPage.js     |   5 +
 .../components/preview-pane/PreviewPane.js    | 138 ++++++++++++------
 3 files changed, 98 insertions(+), 47 deletions(-)

diff --git a/monkey_island/cc/services/edge.py b/monkey_island/cc/services/edge.py
index 4c309a872..ca3b9c597 100644
--- a/monkey_island/cc/services/edge.py
+++ b/monkey_island/cc/services/edge.py
@@ -133,7 +133,7 @@ class EdgeService:
     @staticmethod
     def get_infected_monkey_island_pseudo_edges():
         monkey = cc.services.node.NodeService.get_monkey_island_monkey()
-        existing_ids = [x["_id"] for x in mongo.db.edge.find({"to": monkey["_id"]})]
+        existing_ids = [x["from"] for x in mongo.db.edge.find({"to": monkey["_id"]})]
         monkey_ids = [x["_id"] for x in mongo.db.monkey.find({})
                       if ("tunnel" not in x) and (x["_id"] not in existing_ids)]
         edges = []
diff --git a/monkey_island/cc/ui/src/components/pages/MapPage.js b/monkey_island/cc/ui/src/components/pages/MapPage.js
index 16be1f2c8..db387f2e6 100644
--- a/monkey_island/cc/ui/src/components/pages/MapPage.js
+++ b/monkey_island/cc/ui/src/components/pages/MapPage.js
@@ -22,6 +22,11 @@ let options = {
   layout: {
     improvedLayout: false
   },
+  edges: {
+    smooth: {
+      type: "curvedCW"
+    }
+  },
   groups: groupsToGroupsOptions(['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',
diff --git a/monkey_island/cc/ui/src/components/preview-pane/PreviewPane.js b/monkey_island/cc/ui/src/components/preview-pane/PreviewPane.js
index 03d7e4030..9c4f973c9 100644
--- a/monkey_island/cc/ui/src/components/preview-pane/PreviewPane.js
+++ b/monkey_island/cc/ui/src/components/preview-pane/PreviewPane.js
@@ -2,27 +2,88 @@ import React from 'react';
 import {Icon} from "react-fa";
 
 class PreviewPaneComponent extends React.Component {
+
+  osRow(asset) {
+    return (
+      <tr>
+        <th>Operating System</th>
+        <td>{asset.os}</td>
+      </tr>
+    );
+  }
+
+  ipsRow(asset) {
+    return (
+      <tr>
+        <th>IP Addresses</th>
+        <td>{asset.ip_addresses.map(val => <div key={val}>{val}</div>)}</td>
+      </tr>
+    );
+  }
+
+  servicesRow(asset) {
+    return (
+      <tr>
+        <th>Services</th>
+        <td>{asset.services.map(val => <div key={val}>{val}</div>)}</td>
+      </tr>
+    );
+  }
+
+  accessibleRow(asset) {
+    return (
+      <tr>
+        <th>Accessible From</th>
+        <td>{asset.accessible_from_nodes.map(val => <div key={val}>{val}</div>)}</td>
+      </tr>
+    );
+  }
+
+  descriptionRow(asset) {
+    return (
+      <tr>
+        <th>Description</th>
+        <td>{asset.description}</td>
+      </tr>
+    );
+  }
+
+  aliveRow(asset) {
+    return (
+      <tr>
+        <th>Alive</th>
+        <td>{(!asset.dead).toString()}</td>
+      </tr>
+    );
+  }
+
+  exploitsTimeline(asset) {
+    return (
+      <div>
+        <h4 style={{'marginTop': '2em'}}>Timeline</h4>
+        <ul className="timeline">
+          { asset.exploits.map(exploit =>
+            <li key={exploit.start_timestamp}>
+              <div className={'bullet ' + (exploit.result ? 'bad' : '')} />
+              <div>{new Date(exploit.start_timestamp).toLocaleString()}</div>
+              <div>{exploit.origin}</div>
+              <div>{exploit.exploiter}</div>
+            </li>
+          )}
+        </ul>
+      </div>
+    )
+  }
+
   assetInfo(asset) {
     return (
       <div>
         <table className="table table-condensed">
           <tbody>
-          <tr>
-            <th>Operating System</th>
-            <td>{asset.os}</td>
-          </tr>
-          <tr>
-            <th>IP Addresses</th>
-            <td>{asset.ip_addresses.map(val => <div key={val}>{val}</div>)}</td>
-          </tr>
-          <tr>
-            <th>Services</th>
-            <td>{asset.services.map(val => <div key={val}>{val}</div>)}</td>
-          </tr>
-          <tr>
-            <th>Accessible From</th>
-            <td>{asset.accessible_from_nodes.map(val => <div key={val}>{val}</div>)}</td>
-          </tr>
+            {this.osRow(asset)}
+            {this.ipsRow(asset)}
+            {this.servicesRow(asset)}
+            {this.accessibleRow(asset)}
           </tbody>
         </table>
       </div>
@@ -32,27 +93,21 @@ class PreviewPaneComponent extends React.Component {
   infectedAssetInfo(asset) {
     return (
       <div>
-        {this.assetInfo(asset)}
-
-        <h4 style={{'marginTop': '2em'}}>Timeline</h4>
-        <ul className="timeline">
-          { asset.exploits.map(exploit =>
-            <li key={exploit.start_timestamp}>
-              <div className={'bullet ' + (exploit.result ? 'bad' : '')}></div>
-              <div>{new Date(exploit.start_timestamp).toLocaleString()}</div>
-              <div>{exploit.origin}</div>
-              <div>{exploit.exploiter}</div>
-            </li>
-          )}
-        </ul>
+        <table className="table table-condensed">
+          <tbody>
+            {this.descriptionRow(asset)}
+            {this.aliveRow(asset)}
+            {this.osRow(asset)}
+            {this.ipsRow(asset)}
+            {this.servicesRow(asset)}
+            {this.accessibleRow(asset)}
+          </tbody>
+        </table>
+        {this.exploitsTimeline(asset)}
       </div>
     );
   }
 
-  infectionInfo(edge) {
-    return this.scanInfo(edge);
-  }
-
   scanInfo(edge) {
     return (
       <div>
@@ -76,7 +131,7 @@ class PreviewPaneComponent extends React.Component {
         <ul className="timeline">
           { edge.exploits.map(exploit =>
             <li key={exploit.start_timestamp}>
-              <div className={'bullet ' + (exploit.result ? 'bad' : '')}></div>
+              <div className={'bullet ' + (exploit.result ? 'bad' : '')} />
               <div>{exploit.start_timestamp}</div>
               <div>{exploit.origin}</div>
               <div>{exploit.exploiter}</div>
@@ -90,14 +145,6 @@ class PreviewPaneComponent extends React.Component {
   islandEdgeInfo() {
     return (
       <div>
-        <table className="table table-condensed">
-          <tbody>
-          <tr>
-            <th>Communicates directly with island</th>
-            <td>True</td>
-          </tr>
-          </tbody>
-        </table>
       </div>
     );
   }
@@ -106,11 +153,10 @@ class PreviewPaneComponent extends React.Component {
     let info = null;
     switch (this.props.type) {
       case 'edge':
-        info = this.props.item.exploits.length ?
-          this.infectionInfo(this.props.item) : this.scanInfo(this.props.item);
+        info = this.scanInfo(this.props.item);
         break;
       case 'node':
-        info = this.props.item.exploits.some(exploit => exploit.result) ?
+        info = this.props.item.group.includes('monkey') ?
           this.infectedAssetInfo(this.props.item) : this.assetInfo(this.props.item);
         break;
       case 'island_edge':
@@ -131,7 +177,7 @@ class PreviewPaneComponent extends React.Component {
       <div className="preview-pane">
         { !info ?
           <span>
-            <Icon name="hand-o-left" style={{'marginRight': '0.5em'}}></Icon>
+            <Icon name="hand-o-left" style={{'marginRight': '0.5em'}} />
             Select an item on the map for a preview
           </span>
         :