Cosmetic fixes and improves to map

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 = []

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',

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>
+            {this.osRow(asset)}
-            <th>Operating System</th>
+            {this.ipsRow(asset)}
-            <td>{asset.os}</td>
+            {this.servicesRow(asset)}
-          </tr>
+            {this.accessibleRow(asset)}
-          <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>
           </tbody>
         </table>
       </div>
@@ -32,27 +93,21 @@ class PreviewPaneComponent extends React.Component {
   infectedAssetInfo(asset) {
     return (
       <div>
-        {this.assetInfo(asset)}
+        <table className="table table-condensed">
-
+          <tbody>
-        <h4 style={{'marginTop': '2em'}}>Timeline</h4>
+            {this.descriptionRow(asset)}
-        <ul className="timeline">
+            {this.aliveRow(asset)}
-          { asset.exploits.map(exploit =>
+            {this.osRow(asset)}
-            <li key={exploit.start_timestamp}>
+            {this.ipsRow(asset)}
-              <div className={'bullet ' + (exploit.result ? 'bad' : '')}></div>
+            {this.servicesRow(asset)}
-              <div>{new Date(exploit.start_timestamp).toLocaleString()}</div>
+            {this.accessibleRow(asset)}
-              <div>{exploit.origin}</div>
+          </tbody>
-              <div>{exploit.exploiter}</div>
+        </table>
-            </li>
+        {this.exploitsTimeline(asset)}
-          )}
-        </ul>
       </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 ?
+        info = this.scanInfo(this.props.item);
-          this.infectionInfo(this.props.item) : 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>
         :