From ea43c05220920d32d89d386173901f212452ac14 Mon Sep 17 00:00:00 2001
From: Geoffrey Yu <geoffxy@mit.edu>
Date: Sat, 30 Mar 2024 16:00:57 -0400
Subject: [PATCH] Fetch on an interval

---
 ui/src/App.jsx                 | 11 +++++------
 ui/src/components/PerfView.jsx | 11 +++++------
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/ui/src/App.jsx b/ui/src/App.jsx
index 1161fd19..9b0e147a 100644
--- 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
index 5f4f40b7..f4697792 100644
--- 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]);