Fix: High number of API calls in ended runs from history (#810)

Farfetch · Sep 8, 2023 · fa2ea62 · fa2ea62
1 parent c9f10e8
commit fa2ea62
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 15 deletions.
diff --git a/web/frontend/src/components/Run/RunningStatus/AnalyticCharts/RunAnalyticCharts.js b/web/frontend/src/components/Run/RunningStatus/AnalyticCharts/RunAnalyticCharts.js
@@ -44,7 +44,12 @@ const RunningTestAnalytics = ({
   useEffect(() => {
     const interval = setInterval(async () => {
       // Checks is there any request that is made to API that should be finished before
-      if (autoRefresh && !isLoading && !isIntervalLoading) {
+      if (
+        autoRefresh &&
+        !isLoading &&
+        !isIntervalLoading &&
+        run.runStatus === runStatusModel.RUNNING
+      ) {
         setIsIntervalLoading(true);
         const metrics = await fetchMetrics(run.id, timeInterval);
 
@@ -54,7 +59,14 @@ const RunningTestAnalytics = ({
     }, updateChartsInterval);
 
     return () => clearInterval(interval);
-  }, [autoRefresh, isLoading, isIntervalLoading, run.id, timeInterval]);
+  }, [
+    autoRefresh,
+    isLoading,
+    isIntervalLoading,
+    run.id,
+    timeInterval,
+    run.runStatus
+  ]);
 
   // Enable all tabs once Metrics are available
   useEffect(() => {

diff --git a/web/frontend/src/components/Run/StatusMonitor/RunStatusMonitor.js b/web/frontend/src/components/Run/StatusMonitor/RunStatusMonitor.js
@@ -4,19 +4,11 @@ import { fetchRunById } from "../../../lib/api/endpoints/run";
 
 const RunStatusStepsMonitor = ({ runId, children }) => {
   const [isIntervalLoading, setIsIntervalLoading] = useState(false);
-  const [run, setRun] = useState(null);
+  const [run, setRun] = useState({ runStatus: "PENDING" });
   const [isLoading, setIsLoading] = useState(true);
 
   const updateRunInterval = 5000;
 
-  const updateRunData = async (runIdToUpdate) => {
-    setIsIntervalLoading(true);
-    const runData = await fetchRunById(runIdToUpdate);
-
-    setRun(runData);
-    setIsIntervalLoading(false);
-  };
-
   // The function is executed only first time to make page load
   const loadRunData = async (runIdToLoad) => {
     const runData = await fetchRunById(runIdToLoad);
@@ -25,6 +17,24 @@ const RunStatusStepsMonitor = ({ runId, children }) => {
     setIsLoading(false);
   };
 
+  const updateRunData = async (runIdToUpdate) => {
+    if (
+      run?.runStatus === "PENDING" ||
+      run?.runStatus === "CREATING" ||
+      run?.runStatus === "RUNNING"
+    ) {
+      setIsIntervalLoading(true);
+      const runData = await fetchRunById(runIdToUpdate);
+
+      setRun(runData);
+      setIsIntervalLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadRunData(runId);
+  }, [runId]);
+
   // Monitors runStatus to give real-time montoring about running test
   useEffect(() => {
     const interval = setInterval(() => {
@@ -33,12 +43,9 @@ const RunStatusStepsMonitor = ({ runId, children }) => {
     }, updateRunInterval);
 
     return () => clearInterval(interval);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [runId, isIntervalLoading]);
 
-  useEffect(() => {
-    loadRunData(runId);
-  }, [runId]);
-
   return children({ isLoading, run });
 };