fix: polling cleanup in external apps

Author: AbhishekA1509

src/components/externalArgoApps/ExternalArgoAppDetail.tsx

@@ -68,11 +68,21 @@ const ExternalArgoAppDetail = ({ appName, clusterId, isExternalApp, namespace }:
 
     const _init = () => {
         if (!isAPICallInProgress) {
-            _getAndSetAppDetail(true)
+            _getAndSetAppDetail()
         }
     }
 
-    const _getAndSetAppDetail = async (shouldTriggerPolling: boolean = false) => {
+    const handleInitiatePolling = () => {
+        if (initTimer) {
+            clearTimeout(initTimer)
+        }
+
+        initTimer = setTimeout(() => {
+            _init()
+        }, window._env_.EA_APP_DETAILS_POLLING_INTERVAL || 30000)
+    }
+
+    const _getAndSetAppDetail = async () => {
         isAPICallInProgress = true
         setIsReloadResourceTreeInProgress(true)
 
@@ -85,25 +95,25 @@ const ExternalArgoAppDetail = ({ appName, clusterId, isExternalApp, namespace }:
                     ...appDetailResponse.result,
                     deploymentAppType: DeploymentAppTypes.GITOPS,
                 }
+
+                isAPICallInProgress = false
+                handleInitiatePolling()
+
                 IndexStore.publishAppDetails(genericAppDetail, AppType.EXTERNAL_ARGO_APP)
                 setErrorResponseCode(undefined)
             })
             .catch((errors: ServerErrors) => {
                 if (!getIsRequestAborted(errors)) {
                     showError(errors)
                     setErrorResponseCode(errors.code)
+                    isAPICallInProgress = false
+                    handleInitiatePolling()
                 }
             })
             .finally(() => {
                 setIsLoading(false)
                 isAPICallInProgress = false
                 setIsReloadResourceTreeInProgress(false)
-
-                if (shouldTriggerPolling) {
-                    initTimer = setTimeout(() => {
-                        _init()
-                    }, window._env_.EA_APP_DETAILS_POLLING_INTERVAL || 30000)
-                }
             })
     }
 

src/components/v2/appDetails/ea/EAAppDetail.component.tsx

@@ -80,7 +80,7 @@ const ExternalAppDetail = ({ appId, appName, isExternalApp }) => {
 
     const _init = () => {
         if (!isAPICallInProgress) {
-            _getAndSetAppDetail(true)
+            _getAndSetAppDetail()
         }
     }
 
@@ -120,7 +120,17 @@ const ExternalAppDetail = ({ appId, appName, isExternalApp }) => {
         return genericAppDetail
     }
 
-    const _getAndSetAppDetail = (shouldTriggerPolling: boolean = false) => {
+    const handleInitiatePolling = () => {
+        if (initTimer) {
+            clearTimeout(initTimer)
+        }
+
+        initTimer = setTimeout(() => {
+            _init()
+        }, window._env_.EA_APP_DETAILS_POLLING_INTERVAL || 30000)
+    }
+
+    const _getAndSetAppDetail = () => {
         isAPICallInProgress = true
         setIsReloadResourceTreeInProgress(true)
 
@@ -161,24 +171,21 @@ const ExternalAppDetail = ({ appId, appName, isExternalApp }) => {
                 }
 
                 setErrorResponseCode(undefined)
+
+                handleInitiatePolling()
             })
             .catch((errors: ServerErrors) => {
+                setIsLoading(false)
+                isAPICallInProgress = false
+
                 if (!getIsRequestAborted(errors)) {
                     showError(errors)
                     setErrorResponseCode(errors.code)
+                    handleInitiatePolling()
                 }
-
-                setIsLoading(false)
-                isAPICallInProgress = false
             })
             .finally(() => {
                 setIsReloadResourceTreeInProgress(false)
-
-                if (shouldTriggerPolling) {
-                    initTimer = setTimeout(() => {
-                        _init()
-                    }, window._env_.EA_APP_DETAILS_POLLING_INTERVAL || 30000)
-                }
             })
     }
 

src/components/v2/index.tsx

@@ -116,7 +116,7 @@ const RouterComponent = ({ envType }) => {
     }, [location.search])
 
     const _init = (fetchExternalLinks?: boolean) => {
-        abortPreviousRequests(() => _getAndSetAppDetail(fetchExternalLinks, true), abortControllerRef)
+        abortPreviousRequests(() => _getAndSetAppDetail(fetchExternalLinks), abortControllerRef)
     }
 
     const handleAppDetailsCallError = (e: any) => {
@@ -141,12 +141,16 @@ const RouterComponent = ({ envType }) => {
     }
 
     const handleInitiatePolling = () => {
+        if (initTimer) {
+            clearTimeout(initTimer)
+        }
+
         initTimer = setTimeout(() => {
             _init()
         }, window._env_.HELM_APP_DETAILS_POLLING_INTERVAL || 30000)
     }
 
-    const handleFetchAppDetails = async (fetchExternalLinks: boolean) => {
+    const handleFetchAppDetails = async (fetchExternalLinks: boolean): Promise<{ isAborted: boolean }> => {
         try {
             const response = await getInstalledChartDetail(+params.appId, +params.envId, abortControllerRef)
             handlePublishAppDetails(response)
@@ -155,32 +159,49 @@ const RouterComponent = ({ envType }) => {
             if (fetchExternalLinks) {
                 getExternalLinksAndTools(response.result?.clusterId)
             }
+            setLoadingDetails(false)
         } catch (error) {
-            handleAppDetailsCallError(error)
-        } finally {
+            const isAborted = getIsRequestAborted(error)
+            
+            if (!isAborted) {
+                handleAppDetailsCallError(error)
+            }
             setLoadingDetails(false)
+
+            return { isAborted }
         }
+
+        return { isAborted: false }
     }
 
     const handleFetchResourceTree = async () => {
         try {
             const response = await getInstalledChartResourceTree(+params.appId, +params.envId, abortControllerRef)
             handlePublishAppDetails(response)
+            setLoadingResourceTree(false)
         } catch (error) {
-            handleAppDetailsCallError(error)
-        } finally {
+            const isAborted = getIsRequestAborted(error)
+
+            if (!isAborted) {
+                handleAppDetailsCallError(error)
+            }
             setLoadingResourceTree(false)
+
+            return { isAborted }
         }
+
+        return { isAborted: false }
     }
 
-    const _getAndSetAppDetail = async (fetchExternalLinks: boolean, shouldTriggerPolling: boolean = false) => {
+    const _getAndSetAppDetail = async (fetchExternalLinks: boolean) => {
         if (envType === EnvType.CHART) {
             // Intentionally not setting await since it was not awaited earlier when in thens as well
             Promise.allSettled([
                 handleFetchAppDetails(fetchExternalLinks),
                 handleFetchResourceTree(),
-            ]).finally(() => {
-                if (shouldTriggerPolling) {
+            ]).then((results) => {
+                const isAborted = results.some((result) => result.status === 'fulfilled' && result.value.isAborted)
+                if (!isAborted) {
                     handleInitiatePolling()
                 }
             })
@@ -195,9 +216,8 @@ const RouterComponent = ({ envType }) => {
                     setErrorResponseCode(e.code)
                 }
             } finally {
-                if (shouldTriggerPolling) {
-                    handleInitiatePolling()
-                }
+                // BTW This is a dead block BTW should be removed
+                handleInitiatePolling()
             }
         }
     }