p15670423
/
monkey
1
0
Fork 5
Code Issues Pull Requests 3 Projects Releases Wiki Activity

UI: add loading icon to TelemetryLog.tsx

This commit is contained in:
VakarisZ 2021-10-28 16:21:26 +03:00
parent 7425bf1bbd
commit 97327f08a2
2 changed files with 13 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
monkey/monkey_island/cc/ui/src/components/map/TelemetryLog.tsx
View File

@ -1,11 +1,13 @@
import React, {useEffect, useRef, useState} from 'react'; import React, {useEffect, useRef, useState} from 'react';
import AuthComponent from '../AuthComponent'; import AuthComponent from '../AuthComponent';
import LoadingIcon from '../ui-components/LoadingIcon';
const authComponent = new AuthComponent({}); const authComponent = new AuthComponent({});
const TelemetryLog = (props: { onStatusChange: Function }) => { const TelemetryLog = (props: { onStatusChange: Function }) => {
let [telemetriesLoading, setTelemetriesLoading] = useState(true);
let [telemetryUpdateInProgress, setTelemetryUpdateInProgress] = useState(false); let [telemetryUpdateInProgress, setTelemetryUpdateInProgress] = useState(false);
let [telemetry, setTelemetry] = useState([]); let [telemetry, setTelemetry] = useState([]);
let [lastTelemetryTimestamp, setLastTelemetryTimestamp] = useState(null); let [lastTelemetryTimestamp, setLastTelemetryTimestamp] = useState(null);
@ -36,6 +38,7 @@ const TelemetryLog = (props: { onStatusChange: Function }) => {
setTelemetry(newTelem); setTelemetry(newTelem);
setLastTelemetryTimestamp(res['timestamp']); setLastTelemetryTimestamp(res['timestamp']);
setTelemetryUpdateInProgress(false); setTelemetryUpdateInProgress(false);
setTelemetriesLoading(false);
props.onStatusChange(); props.onStatusChange();
let telemConsoleRef = telemetryConsole.current; let telemConsoleRef = telemetryConsole.current;
@ -87,10 +90,11 @@ const TelemetryLog = (props: { onStatusChange: Function }) => {
} }
return ( return (
<> <div className={'telemetry-log-section'}>
{telemetriesLoading && <LoadingIcon/>}
{renderTelemetryLineCount()} {renderTelemetryLineCount()}
{renderTelemetryConsole()} {renderTelemetryConsole()}
</>); </div>);
} }
export default TelemetryLog; export default TelemetryLog;

7
monkey/monkey_island/cc/ui/src/styles/components/Map.scss
View File

@ -46,3 +46,10 @@
width: 100%; width: 100%;
padding-bottom: 10px; padding-bottom: 10px;
} }
.telemetry-log-section .loading-icon{
position: relative;
color: white;
z-index: 5;
margin-top: 30px;
}