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 ( - <> +
+ {telemetriesLoading && } {renderTelemetryLineCount()} {renderTelemetryConsole()} - ); +
); } 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; +}