diff --git a/dashboard/client/build/.fakebuild b/dashboard/client/build/.fakebuild deleted file mode 100644 index e69de29bb..000000000 diff --git a/dashboard/client/build/static/.fakestatic b/dashboard/client/build/static/.fakestatic deleted file mode 100644 index e69de29bb..000000000 diff --git a/dashboard/client/src/pages/dashboard/memory/Memory.tsx b/dashboard/client/src/pages/dashboard/memory/Memory.tsx index 794251ea7..32a58da60 100644 --- a/dashboard/client/src/pages/dashboard/memory/Memory.tsx +++ b/dashboard/client/src/pages/dashboard/memory/Memory.tsx @@ -1,6 +1,7 @@ import { Box, Button, + CircularProgress, createStyles, FormControl, InputLabel, @@ -18,6 +19,7 @@ import { useDispatch, useSelector } from "react-redux"; import { getMemoryTable, MemoryGroupByKey, + MemoryTable, MemoryTableResponse, setMemoryTableCollection, } from "../../../api"; @@ -69,6 +71,14 @@ const useMemoryInfoStyles = makeStyles((theme: Theme) => ); const memoryTableSelector = (state: StoreState) => state.dashboard.memoryTable; +const isEmpty = (memoryTable: MemoryTable) => + Object.keys(memoryTable.group).length === 0; +const loadTimerComplete = (mountedAt: Date) => { + const secondsBetween = Math.abs( + (new Date().getTime() - mountedAt.getTime()) / 1000, + ); + return secondsBetween > 10; +}; const fetchMemoryTable = ( groupByKey: MemoryGroupByKey, @@ -83,7 +93,7 @@ const fetchMemoryTable = ( const MemoryInfo: React.FC<{}> = () => { const memoryTable = useSelector(memoryTableSelector); const dispatch = useDispatch(); - + const mountedAt = new Date(); const [paused, setPaused] = useState(false); const pauseButtonIcon = paused ? : ; @@ -97,6 +107,7 @@ const MemoryInfo: React.FC<{}> = () => { setMemoryTableCollection(false); }; }, []); + // Set up polling memory data const fetchData = useCallback( fetchMemoryTable(groupBy, (resp) => @@ -117,17 +128,19 @@ const MemoryInfo: React.FC<{}> = () => { } }; return cleanup; - }, [paused, fetchData]); + }, [paused, fetchData, dispatch]); - if (!memoryTable) { + if (!memoryTable || (isEmpty(memoryTable) && !loadTimerComplete(mountedAt))) { return ( - Loading memory information + + Loading + ); } - if (Object.keys(memoryTable.group).length === 0) { + if (isEmpty(memoryTable) && loadTimerComplete(mountedAt)) { return ( - - Finished loading, but have found no memory data yet. + + Finished loading, but nothing found. ); } @@ -170,6 +183,10 @@ const MemoryInfo: React.FC<{}> = () => { color="primary" className={classes.pauseButton} onClick={() => { + if (intervalId.current) { + clearInterval(intervalId.current); + intervalId.current = null; + } setMemoryTableCollection(!paused); setPaused(!paused); }}