From 97327f08a24ce8530db623c2f6f24e6bbf7a7ce6 Mon Sep 17 00:00:00 2001
From: VakarisZ <vakarisz@yahoo.com>
Date: Thu, 28 Oct 2021 16:21:26 +0300
Subject: [PATCH] UI: add loading icon to TelemetryLog.tsx

---
 .../cc/ui/src/components/map/TelemetryLog.tsx             | 8 ++++++--
 monkey/monkey_island/cc/ui/src/styles/components/Map.scss | 7 +++++++
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/monkey/monkey_island/cc/ui/src/components/map/TelemetryLog.tsx b/monkey/monkey_island/cc/ui/src/components/map/TelemetryLog.tsx
index f247bbf91..dfbcad8ff 100644
--- a/monkey/monkey_island/cc/ui/src/components/map/TelemetryLog.tsx
+++ b/monkey/monkey_island/cc/ui/src/components/map/TelemetryLog.tsx
@@ -1,11 +1,13 @@
 import React, {useEffect, useRef, useState} from 'react';
 import AuthComponent from '../AuthComponent';
+import LoadingIcon from '../ui-components/LoadingIcon';
 
 
 const authComponent = new AuthComponent({});
 
 const TelemetryLog = (props: { onStatusChange: Function }) => {
 
+  let [telemetriesLoading, setTelemetriesLoading] = useState(true);
   let [telemetryUpdateInProgress, setTelemetryUpdateInProgress] = useState(false);
   let [telemetry, setTelemetry] = useState([]);
   let [lastTelemetryTimestamp, setLastTelemetryTimestamp] = useState(null);
@@ -36,6 +38,7 @@ const TelemetryLog = (props: { onStatusChange: Function }) => {
           setTelemetry(newTelem);
           setLastTelemetryTimestamp(res['timestamp']);
           setTelemetryUpdateInProgress(false);
+          setTelemetriesLoading(false);
           props.onStatusChange();
 
           let telemConsoleRef = telemetryConsole.current;
@@ -87,10 +90,11 @@ const TelemetryLog = (props: { onStatusChange: Function }) => {
   }
 
   return (
-    <>
+    <div className={'telemetry-log-section'}>
+      {telemetriesLoading && <LoadingIcon/>}
       {renderTelemetryLineCount()}
       {renderTelemetryConsole()}
-    </>);
+    </div>);
 }
 
 export default TelemetryLog;
diff --git a/monkey/monkey_island/cc/ui/src/styles/components/Map.scss b/monkey/monkey_island/cc/ui/src/styles/components/Map.scss
index ebeb7c687..adbfe8b05 100644
--- a/monkey/monkey_island/cc/ui/src/styles/components/Map.scss
+++ b/monkey/monkey_island/cc/ui/src/styles/components/Map.scss
@@ -46,3 +46,10 @@
   width: 100%;
   padding-bottom: 10px;
 }
+
+.telemetry-log-section .loading-icon{
+  position: relative;
+  color: white;
+  z-index: 5;
+  margin-top: 30px;
+}