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);
}}