From 50c674a2af02d6da8e8350a5362f98832697ed4a Mon Sep 17 00:00:00 2001
From: Itay Mizeretz <itay.mizeretz@guardicore.com>
Date: Tue, 9 Jan 2018 19:19:16 +0200
Subject: [PATCH] Add telemetry console frontend

---
 .../cc/ui/src/components/pages/MapPage.js     | 58 ++++++++++++++-----
 monkey_island/cc/ui/src/styles/App.css        |  3 +-
 2 files changed, 47 insertions(+), 14 deletions(-)

diff --git a/monkey_island/cc/ui/src/components/pages/MapPage.js b/monkey_island/cc/ui/src/components/pages/MapPage.js
index 81f3baf8a..bb9aa0d74 100644
--- a/monkey_island/cc/ui/src/components/pages/MapPage.js
+++ b/monkey_island/cc/ui/src/components/pages/MapPage.js
@@ -53,7 +53,9 @@ class MapPageComponent extends React.Component {
       selected: null,
       selectedType: null,
       killPressed: false,
-      showKillDialog: false
+      showKillDialog: false,
+      telemetry: [],
+      telemetryLastTimestamp: null
     };
   }
 
@@ -77,13 +79,18 @@ class MapPageComponent extends React.Component {
 
   componentDidMount() {
     this.updateMapFromServer();
-    this.interval = setInterval(this.updateMapFromServer, 1000);
+    this.interval = setInterval(this.timedEvents, 1000);
   }
 
   componentWillUnmount() {
     clearInterval(this.interval);
   }
 
+  timedEvents = () => {
+    this.updateMapFromServer();
+    this.updateTelemetryFromServer();
+  };
+
   updateMapFromServer = () => {
     fetch('/api/netmap')
       .then(res => res.json())
@@ -96,6 +103,21 @@ class MapPageComponent extends React.Component {
       });
   };
 
+  updateTelemetryFromServer = () => {
+    fetch('/api/telemetry-feed?timestamp='+this.state.telemetryLastTimestamp)
+      .then(res => res.json())
+      .then(res => {
+        let newTelem = this.state.telemetry.concat(res['telemetries']);
+
+        this.setState(
+          {
+            telemetry: newTelem,
+            telemetryLastTimestamp: res['timestamp']
+          });
+        this.props.onStatusChange();
+      });
+  };
+
   selectionChanged(event) {
     if (event.nodes.length === 1) {
       fetch('/api/netmap/node?id=' + event.nodes[0])
@@ -156,6 +178,26 @@ class MapPageComponent extends React.Component {
     )
   };
 
+  renderTelemetryEntry(telemetry) {
+    return (
+      <div key={telemetry.id}>
+        <span className="date">{telemetry.timestamp}</span>
+        <span className="source"> {telemetry.hostname}:</span>
+        <span className="event"> {telemetry.brief}</span>
+      </div>
+    );
+  }
+
+  renderTelemetryConsole() {
+    return (
+      <div className="telemetry-console">
+        {
+          this.state.telemetry.map(this.renderTelemetryEntry)
+        }
+      </div>
+    );
+  }
+
   render() {
     return (
       <div>
@@ -174,17 +216,7 @@ class MapPageComponent extends React.Component {
             <b style={{color: '#aeaeae'}}> | </b>
             <span>Island Communication <i className="fa fa-lg fa-minus" style={{color: '#a9aaa9'}} /></span>
           </div>
-          {
-            /*
-            <div className="telemetry-console">
-              <div>
-                <span className="date">2017-10-16 16:00:05</span>
-                <span className="source"> monkey-elastic</span>
-                <span className="event"> bla bla</span>
-              </div>
-            </div>
-            */
-          }
+          { this.renderTelemetryConsole() }
           <div style={{height: '80vh'}}>
             <ReactiveGraph graph={this.state.graph} options={options} events={this.events}/>
           </div>
diff --git a/monkey_island/cc/ui/src/styles/App.css b/monkey_island/cc/ui/src/styles/App.css
index 9ecf08cbb..9a0d248a5 100644
--- a/monkey_island/cc/ui/src/styles/App.css
+++ b/monkey_island/cc/ui/src/styles/App.css
@@ -276,13 +276,14 @@ body {
   bottom: 0;
   left: 0;
   right: 0;
-  height: 70px;
+  height: 130px;
   background: rgba(0,0,0,0.7);
   border-radius: 5px;
   border: 3px solid #aaa;
   padding: 0.5em;
   color: white;
   font-family: Consolas, "Courier New", monospace;
+  overflow: auto;
 }
 
 .telemetry-console .date {