From d486471fb225ee6ae31eb2e7e330d44140758bb7 Mon Sep 17 00:00:00 2001
From: itay <itay.mizeretz@guardicore.com>
Date: Mon, 22 Apr 2019 18:09:21 +0300
Subject: [PATCH] Add version component to UI

---
 .../cc/ui/src/components/Main.js              |  4 +-
 .../components/side-menu/VersionComponent.js  | 47 +++++++++++++++++++
 monkey/monkey_island/cc/ui/src/styles/App.css | 10 ++++
 3 files changed, 60 insertions(+), 1 deletion(-)
 create mode 100644 monkey/monkey_island/cc/ui/src/components/side-menu/VersionComponent.js

diff --git a/monkey/monkey_island/cc/ui/src/components/Main.js b/monkey/monkey_island/cc/ui/src/components/Main.js
index da8e59113..8229133e6 100644
--- a/monkey/monkey_island/cc/ui/src/components/Main.js
+++ b/monkey/monkey_island/cc/ui/src/components/Main.js
@@ -20,6 +20,7 @@ import 'react-data-components/css/table-twbs.css';
 import 'styles/App.css';
 import 'react-toggle/style.css';
 import 'react-table/react-table.css';
+import VersionComponent from "./side-menu/VersionComponent";
 
 let logoImage = require('../images/monkey-icon.svg');
 let infectionMonkeyImage = require('../images/infection-monkey.svg');
@@ -85,7 +86,7 @@ class AppComponent extends AuthComponent {
         infection_done: false,
         report_done: false,
         isLoggedIn: undefined
-      }
+      },
     };
   }
 
@@ -175,6 +176,7 @@ class AppComponent extends AuthComponent {
               <div className="license-link text-center">
                 <NavLink to="/license">License</NavLink>
               </div>
+              <VersionComponent/>
             </Col>
             <Col sm={9} md={10} smOffset={3} mdOffset={2} className="main">
               <Route path='/login' render={(props) => (<LoginPageComponent onStatusChange={this.updateStatus}/>)}/>
diff --git a/monkey/monkey_island/cc/ui/src/components/side-menu/VersionComponent.js b/monkey/monkey_island/cc/ui/src/components/side-menu/VersionComponent.js
new file mode 100644
index 000000000..9e2b55edb
--- /dev/null
+++ b/monkey/monkey_island/cc/ui/src/components/side-menu/VersionComponent.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import AuthComponent from "../AuthComponent";
+import {Icon} from 'react-fa';
+
+class VersionComponent extends AuthComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      currentVersion: undefined,
+      newerVersion: undefined,
+      downloadLink: undefined
+    }
+  }
+
+  componentDidMount() {
+    this.authFetch('/api/version-update')
+      .then(res => res.json())
+      .then(res => {
+        this.setState({
+          currentVersion: res['current_version'],
+          newerVersion: res['newer_version'],
+          downloadLink: res['download_link'],
+        });
+      });
+  }
+
+  render() {
+    return (
+      <div className="version-text text-center">
+        Infection Monkey Version: {this.state.currentVersion}
+        {
+          this.state.newerVersion ?
+            <div>
+              <b>Newer version available!</b>
+              <br/>
+              <b><a target="_blank" href={this.state.downloadLink}>Download here <Icon name="download"/></a></b>
+            </div>
+            :
+            undefined
+        }
+      </div>
+    );
+  }
+}
+
+
+export default VersionComponent;
diff --git a/monkey/monkey_island/cc/ui/src/styles/App.css b/monkey/monkey_island/cc/ui/src/styles/App.css
index 6155a4dcc..b44fa4562 100644
--- a/monkey/monkey_island/cc/ui/src/styles/App.css
+++ b/monkey/monkey_island/cc/ui/src/styles/App.css
@@ -515,3 +515,13 @@ body {
   }
 
 }
+
+.version-text {
+  font-size: 0.9em;
+  position: absolute;
+  bottom: 5px;
+  left: 0;
+  right: 0;
+  margin-left: auto;
+  margin-right: auto;
+}