From 8b239c66c69b7330457a63678a4518101b9b0edb Mon Sep 17 00:00:00 2001
From: Barak Argaman <barak@guardicore.com>
Date: Mon, 16 Oct 2017 15:46:04 +0300
Subject: [PATCH] add telemetry console and map legend

---
 monkey_island/cc/ui/src/components/Main.js    |  2 +-
 .../cc/ui/src/components/pages/MapPage.js     | 17 +++++++++---
 monkey_island/cc/ui/src/styles/App.css        | 27 +++++++++++++++++++
 3 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/monkey_island/cc/ui/src/components/Main.js b/monkey_island/cc/ui/src/components/Main.js
index 34e6f0137..36f57387e 100644
--- a/monkey_island/cc/ui/src/components/Main.js
+++ b/monkey_island/cc/ui/src/components/Main.js
@@ -106,7 +106,7 @@ class AppComponent extends React.Component {
                 </li>
                 <li>
                   <NavLink to="/start-over">
-                    <span className="number">5.</span>
+                    <span className="number"><i className="fa fa-undo" style={{'marginLeft': '-1px'}}/></span>
                     Start Over
                   </NavLink>
                 </li>
diff --git a/monkey_island/cc/ui/src/components/pages/MapPage.js b/monkey_island/cc/ui/src/components/pages/MapPage.js
index f59018425..c82c891b3 100644
--- a/monkey_island/cc/ui/src/components/pages/MapPage.js
+++ b/monkey_island/cc/ui/src/components/pages/MapPage.js
@@ -165,10 +165,21 @@ class MapPageComponent extends React.Component {
         <Col xs={12}>
           <h1 className="page-title">Infection Map</h1>
         </Col>
-        <Col xs={12}>
-          <img src={legend}/>
-        </Col>
         <Col xs={8}>
+          <div className="map-legend">
+            <b>Legend:</b>
+            <span><i className="fa fa-lg fa-minus" style={{color: '#cc0200'}}></i> Exploit</span>
+            <span><i className="fa fa-lg fa-minus" style={{color: '#ff9900'}}></i> Scan</span>
+            <span><i className="fa fa-lg fa-minus" style={{color: '#0158aa'}}></i> Tunnel</span>
+            <span><i className="fa fa-lg fa-minus" style={{color: '#a9aaa9'}}></i> Island Communication</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>
           <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 300e14cf8..6bcf49367 100644
--- a/monkey_island/cc/ui/src/styles/App.css
+++ b/monkey_island/cc/ui/src/styles/App.css
@@ -270,6 +270,33 @@ body {
   background: #d30d09;
 }
 
+.telemetry-console {
+  z-index: 2;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 70px;
+  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;
+}
+
+.telemetry-console .date {
+  color: #ccc;
+}
+
+.telemetry-console .source {
+  font-weight: bold;
+}
+
+.map-legend {
+
+}
+
 /*
  * Full Logs Page
  */