From d95515d6782c0d25ed24e6d4b8c3db740727623f Mon Sep 17 00:00:00 2001
From: Itay Mizeretz <itay.mizeretz@guardicore.com>
Date: Mon, 16 Oct 2017 18:54:13 +0300
Subject: [PATCH] Add tooltips to preview pane

---
 .../components/preview-pane/PreviewPane.js    | 27 ++++++++++++++++---
 1 file changed, 23 insertions(+), 4 deletions(-)

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 6e4178067..62cd25d34 100644
--- a/monkey_island/cc/ui/src/components/preview-pane/PreviewPane.js
+++ b/monkey_island/cc/ui/src/components/preview-pane/PreviewPane.js
@@ -1,9 +1,18 @@
 import React from 'react';
 import {Icon} from 'react-fa';
 import Toggle from 'react-toggle';
+import {OverlayTrigger, Tooltip} from 'react-bootstrap';
 
 class PreviewPaneComponent extends React.Component {
 
+  generateToolTip(text) {
+    return (
+      <OverlayTrigger placement="top" overlay={<Tooltip id="tooltip">{text}</Tooltip>}>
+        <a><i className="glyphicon glyphicon-info-sign"/></a>
+      </OverlayTrigger>
+    );
+  }
+
   osRow(asset) {
     return (
       <tr>
@@ -34,7 +43,10 @@ class PreviewPaneComponent extends React.Component {
   accessibleRow(asset) {
     return (
       <tr>
-        <th>Accessible From</th>
+        <th>
+          Accessible From&nbsp;
+          {this.generateToolTip('List of machine which can access this one using a network protocol')}
+        </th>
         <td>{asset.accessible_from_nodes.map(val => <div key={val}>{val}</div>)}</td>
       </tr>
     );
@@ -63,10 +75,14 @@ class PreviewPaneComponent extends React.Component {
   forceKillRow(asset) {
     return (
       <tr>
-        <th>Force Kill</th>
+        <th>
+          Force Kill&nbsp;
+          {this.generateToolTip('If this is on, monkey will die next time it communicates')}
+        </th>
         <td>
           <Toggle id={asset.id} checked={!asset.config.alive} icons={false} disabled={asset.dead}
-                        onChange={(e) => this.forceKill(e, asset)} />
+                  onChange={(e) => this.forceKill(e, asset)} />
+
         </td>
       </tr>
     );
@@ -79,7 +95,10 @@ class PreviewPaneComponent extends React.Component {
 
     return (
       <div>
-        <h4 style={{'marginTop': '2em'}}>Timeline</h4>
+        <h4 style={{'marginTop': '2em'}}>
+          Exploit Timeline&nbsp;
+          {this.generateToolTip('Timeline of exploit attempts. Red is successful. Gray is unsuccessful')}
+        </h4>
         <ul className="timeline">
           { asset.exploits.map(exploit =>
             <li key={exploit.timestamp}>