Fetch on an interval

mitdbg · Mar 30, 2024 · ea43c05 · ea43c05
1 parent 7f5c246
commit ea43c05
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 12 deletions.
diff --git a/ui/src/App.jsx b/ui/src/App.jsx
@@ -66,8 +66,7 @@ function App() {
   };
 
   // Fetch updated system state periodically.
-  useEffect(() => {
-    let timeoutId = null;
+  useEffect(async () => {
     const refreshData = async () => {
       const newSystemState = await fetchSystemState(
         /*filterTablesForDemo=*/ false,
@@ -76,16 +75,16 @@ function App() {
       if (JSON.stringify(systemState) !== JSON.stringify(newSystemState)) {
         setSystemState(newSystemState);
       }
-      timeoutId = setTimeout(refreshData, REFRESH_INTERVAL_MS);
     };
 
     // Run first fetch immediately.
-    timeoutId = setTimeout(refreshData, 0);
+    await refreshData();
+    const intervalId = setInterval(refreshData, REFRESH_INTERVAL_MS);
     return () => {
-      if (timeoutId === null) {
+      if (intervalId === null) {
         return;
       }
-      clearTimeout(timeoutId);
+      clearInterval(intervalId);
     };
   }, [systemState]);
 

diff --git a/ui/src/components/PerfView.jsx b/ui/src/components/PerfView.jsx
@@ -78,8 +78,7 @@ function PerfView({ virtualInfra }) {
     return metricsManagerRef.current;
   }
 
-  useEffect(() => {
-    let timeoutId = null;
+  useEffect(async () => {
     const refreshData = async () => {
       const rawMetrics = await fetchMetrics(60, /*useGenerated=*/ false);
       const fetchedMetrics = parseMetrics(rawMetrics);
@@ -94,16 +93,16 @@ function PerfView({ virtualInfra }) {
           ),
         });
       }
-      timeoutId = setTimeout(refreshData, REFRESH_INTERVAL_MS);
     };
 
     // Run first fetch immediately.
-    timeoutId = setTimeout(refreshData, 0);
+    await refreshData();
+    const intervalId = setInterval(refreshData, REFRESH_INTERVAL_MS);
     return () => {
-      if (timeoutId === null) {
+      if (intervalId === null) {
         return;
       }
-      clearTimeout(timeoutId);
+      clearInterval(intervalId);
     };
   }, [metricsData, windowSizeMinutes]);