Merge pull request #2682 from devtron-labs/fix/external-apps-abort-controller

AbhishekA1509 · web-flow · commit 43450b8b5ce2 · 2025-05-01T15:23:02.000+05:30
fix: external apps data getting merged with previously opened app in case of delayed response of app details/resource tree
diff --git a/src/Pages/App/Details/ExternalFlux/ExternalFluxAppDetails.tsx b/src/Pages/App/Details/ExternalFlux/ExternalFluxAppDetails.tsx
@@ -14,14 +14,16 @@
  * limitations under the License.
  */
 
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useParams } from 'react-router-dom'
 
 import {
+    abortPreviousRequests,
     AppType,
     DeploymentAppTypes,
     ERROR_STATUS_CODE,
     ErrorScreenManager,
+    getIsRequestAborted,
     IndexStore,
     noop,
     ResponseType,
@@ -46,6 +48,15 @@ const ExternalFluxAppDetails = () => {
     const [isReloadResourceTreeInProgress, setIsReloadResourceTreeInProgress] = useState(true)
     const [appDetailsError, setAppDetailsError] = useState(null)
 
+    const abortControllerRef = useRef<AbortController>(new AbortController())
+
+    useEffect(
+        () => () => {
+            abortControllerRef.current.abort()
+        },
+        [],
+    )
+
     const handleUpdateIndexStoreWithDetails = (response: ResponseType<any>) => {
         const genericAppDetail: AppDetails = {
             ...response.result,
@@ -63,13 +74,19 @@ const ExternalFluxAppDetails = () => {
         new Promise<void>((resolve) => {
             setIsReloadResourceTreeInProgress(true)
 
-            getExternalFluxCDAppDetails(clusterId, namespace, appName, isKustomization)
+            abortPreviousRequests(
+                () =>
+                    getExternalFluxCDAppDetails({ clusterId, namespace, appName, isKustomization, abortControllerRef }),
+                abortControllerRef,
+            )
                 .then(handleUpdateIndexStoreWithDetails)
                 .catch((error) => {
-                    if (!initialLoading) {
-                        showError(error)
-                    } else {
-                        setAppDetailsError(error)
+                    if (!getIsRequestAborted(error)) {
+                        if (!initialLoading) {
+                            showError(error)
+                        } else {
+                            setAppDetailsError(error)
+                        }
                     }
                 })
                 .finally(() => {
diff --git a/src/Pages/App/Details/ExternalFlux/service.tsx b/src/Pages/App/Details/ExternalFlux/service.tsx
@@ -17,13 +17,21 @@
 import { get, getUrlWithSearchParams } from '@devtron-labs/devtron-fe-common-lib'
 
 import { Routes } from '../../../../config'
+import { GetExternalFluxCDAppDetailsParamsType } from './types'
 
-export const getExternalFluxCDAppDetails = (clusterId, namespace, appName, isKustomization) => {
+export const getExternalFluxCDAppDetails = async ({
+    clusterId,
+    namespace,
+    appName,
+    isKustomization,
+    abortControllerRef,
+}: GetExternalFluxCDAppDetailsParamsType) => {
     const appId = `${clusterId}|${namespace}|${appName}|${isKustomization}`
     const baseurl = `${Routes.FLUX_APPS}/${Routes.APP}`
     const params = {
         appId,
     }
+
     const url = getUrlWithSearchParams(baseurl, params)
-    return get(url)
+    return get(url, { abortControllerRef })
 }
diff --git a/src/Pages/App/Details/ExternalFlux/types.tsx b/src/Pages/App/Details/ExternalFlux/types.tsx
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+import { APIOptions } from '@devtron-labs/devtron-fe-common-lib'
+
 export interface ExternalFluxAppDetailParams {
     clusterId: string
     appName: string
@@ -25,3 +27,9 @@ export enum EXTERNAL_FLUX_APP_STATUS {
     READY = 'Ready',
     NOT_READY = 'Not Ready',
 }
+
+export interface GetExternalFluxCDAppDetailsParamsType
+    extends Pick<ExternalFluxAppDetailParams, 'clusterId' | 'namespace' | 'appName'>,
+        Pick<APIOptions, 'abortControllerRef'> {
+    isKustomization: boolean
+}
diff --git a/src/components/ClusterNodes/ClusterList/ClusterSelectionBody.tsx b/src/components/ClusterNodes/ClusterList/ClusterSelectionBody.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { useRef, useState } from 'react'
+import React, { useState } from 'react'
 
 import {
     BulkSelectionEvents,
@@ -50,9 +50,8 @@ const ClusterSelectionBody: React.FC<ClusterSelectionBodyTypes> = ({
     clusterOptions,
     clusterListLoader,
     filteredList,
+    parentRef,
 }) => {
-    const parentRef = useRef<HTMLDivElement>(null)
-
     const [showKubeConfigModal, setShowKubeConfigModal] = useState(false)
     const [selectedClusterName, setSelectedClusterName] = useState('')
 
@@ -133,17 +132,19 @@ const ClusterSelectionBody: React.FC<ClusterSelectionBodyTypes> = ({
     }
 
     return (
-        <div ref={parentRef} className="flexbox-col flex-grow-1">
+        <>
             {renderClusterBulkSelection()}
-            {renderClusterList()}
-            {showKubeConfigModal && KubeConfigModal && (
-                <KubeConfigModal
-                    clusterName={selectedClusterName || identifierCount === 0}
-                    handleModalClose={onChangeCloseKubeConfigModal}
-                    isSingleClusterButton={!!selectedClusterName}
-                />
-            )}
-        </div>
+            <div className="flexbox-col flex-grow-1">
+                {renderClusterList()}
+                {showKubeConfigModal && KubeConfigModal && (
+                    <KubeConfigModal
+                        clusterName={selectedClusterName || identifierCount === 0}
+                        handleModalClose={onChangeCloseKubeConfigModal}
+                        isSingleClusterButton={!!selectedClusterName}
+                    />
+                )}
+            </div>
+        </>
     )
 }
 
diff --git a/src/components/ClusterNodes/ClusterList/types.ts b/src/components/ClusterNodes/ClusterList/types.ts
@@ -1,10 +1,13 @@
+import { MutableRefObject } from 'react'
+
 import { ClusterDetail } from '@devtron-labs/devtron-fe-common-lib'
 
 export interface ClusterViewType {
     clusterOptions: ClusterDetail[]
     clusterListLoader: boolean
     initialLoading: boolean
     refreshData: () => void
+    parentRef: MutableRefObject<HTMLDivElement>
 }
 
 export interface ClusterListTypes {
diff --git a/src/components/ResourceBrowser/ResourceBrowser.tsx b/src/components/ResourceBrowser/ResourceBrowser.tsx
@@ -34,6 +34,7 @@ import { sortObjectArrayAlphabetically } from '../common'
 import { AddClusterButton } from './PageHeader.buttons'
 
 const ResourceBrowser: React.FC = () => {
+    const parentRef = useRef<HTMLDivElement>(null)
     const abortControllerRef = useRef<AbortController>(new AbortController())
 
     const [detailClusterListLoading, detailClusterList, , reloadDetailClusterList] = useAsync(async () => {
@@ -72,6 +73,7 @@ const ResourceBrowser: React.FC = () => {
 
         return (
             <ClusterListView
+                parentRef={parentRef}
                 clusterOptions={sortedClusterList}
                 clusterListLoader={detailClusterListLoading}
                 initialLoading={initialLoading}
@@ -85,7 +87,7 @@ const ResourceBrowser: React.FC = () => {
     }
 
     return (
-        <div className="flexbox-col h-100 bg__primary">
+        <div className="flexbox-col h-100 bg__primary" ref={parentRef}>
             <PageHeader
                 isBreadcrumbs={false}
                 headerName="Kubernetes Resource Browser"
diff --git a/src/components/external-apps/ExternalAppService.ts b/src/components/external-apps/ExternalAppService.ts
@@ -14,11 +14,21 @@
  * limitations under the License.
  */
 
-import { get, put, trash, ResponseType, AppType, getUrlWithSearchParams, getAPIOptionsWithTriggerTimeout } from '@devtron-labs/devtron-fe-common-lib'
+import {
+    get,
+    put,
+    trash,
+    ResponseType,
+    AppType,
+    getUrlWithSearchParams,
+    getAPIOptionsWithTriggerTimeout,
+    APIOptions,
+} from '@devtron-labs/devtron-fe-common-lib'
 import { Routes } from '../../config'
 import { HelmApp, AppEnvironmentDetail } from '../app/list-new/AppListType'
 import { ResourceTree } from '../v2/appDetails/appDetails.type'
 import { getK8sResourcePayloadAppType } from '@Components/v2/appDetails/k8Resource/nodeDetail/nodeDetail.util'
+import { GetArgoAppDetailParamsType } from './types'
 
 export interface ReleaseInfoResponse extends ResponseType {
     result?: ReleaseAndInstalledAppInfo
@@ -132,14 +142,20 @@ export const getReleaseInfo = (appId: string): Promise<ReleaseInfoResponse> => {
     return get(url)
 }
 
-export const getAppDetail = (appId: string): Promise<HelmAppDetailResponse> => {
-    const url = `${Routes.HELM_RELEASE_APP_DETAIL_API}?appId=${appId}`
-    return get(url)
-}
-
-export const getArgoAppDetail = (appName: string, clusterId: string, namespace: string) => {
-    return get(`${Routes.ARGO_APPLICATION}?name=${appName}&clusterId=${clusterId}&namespace=${namespace}`)
-}
+export const getAppDetail = async (
+    appId: string,
+    abortControllerRef?: APIOptions['abortControllerRef'],
+): Promise<HelmAppDetailResponse> => get(`${Routes.HELM_RELEASE_APP_DETAIL_API}?appId=${appId}`, { abortControllerRef })
+
+export const getArgoAppDetail = async ({
+    appName,
+    clusterId,
+    namespace,
+    abortControllerRef,
+}: GetArgoAppDetailParamsType) =>
+    get(`${Routes.ARGO_APPLICATION}?name=${appName}&clusterId=${clusterId}&namespace=${namespace}`, {
+        abortControllerRef,
+    })
 
 export const deleteApplicationRelease = (appId: string): Promise<UninstallReleaseResponse> => {
     const url = `${Routes.HELM_RELEASE_APP_DELETE_API}?appId=${appId}`
diff --git a/src/components/external-apps/types.ts b/src/components/external-apps/types.ts
@@ -0,0 +1,7 @@
+import { APIOptions } from '@devtron-labs/devtron-fe-common-lib'
+
+export interface GetArgoAppDetailParamsType extends Pick<APIOptions, 'abortControllerRef'> {
+    appName: string
+    clusterId: string
+    namespace: string
+}
diff --git a/src/components/externalArgoApps/ExternalArgoAppDetail.tsx b/src/components/externalArgoApps/ExternalArgoAppDetail.tsx
@@ -14,14 +14,16 @@
  * limitations under the License.
  */
 
-import React, { useState, useEffect } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import { useLocation, useHistory } from 'react-router-dom'
 import {
     showError,
     Progressing,
     ErrorScreenManager,
     ServerErrors,
     DeploymentAppTypes,
+    getIsRequestAborted,
+    abortPreviousRequests,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { getArgoAppDetail } from '../external-apps/ExternalAppService'
 import { checkIfToRefetchData, deleteRefetchDataFromUrl } from '../util/URLUtil'
@@ -40,10 +42,14 @@ const ExternalArgoAppDetail = ({ appName, clusterId, isExternalApp, namespace }:
     let initTimer = null
     let isAPICallInProgress = false
 
+    const abortControllerRef = useRef<AbortController>(new AbortController())
+
     // component load
     useEffect(() => {
         _init()
         return (): void => {
+            abortControllerRef.current.abort()
+
             if (initTimer) {
                 clearTimeout(initTimer)
             }
@@ -62,17 +68,18 @@ const ExternalArgoAppDetail = ({ appName, clusterId, isExternalApp, namespace }:
 
     const _init = () => {
         if (!isAPICallInProgress) {
-            _getAndSetAppDetail()
+            _getAndSetAppDetail(true)
         }
-        initTimer = setTimeout(() => {
-            _init()
-        }, window._env_.EA_APP_DETAILS_POLLING_INTERVAL || 30000)
     }
 
-    const _getAndSetAppDetail = async () => {
+    const _getAndSetAppDetail = async (shouldTriggerPolling: boolean = false) => {
         isAPICallInProgress = true
         setIsReloadResourceTreeInProgress(true)
-        getArgoAppDetail(appName, clusterId, namespace)
+
+        abortPreviousRequests(
+            () => getArgoAppDetail({ appName, clusterId, namespace, abortControllerRef }),
+            abortControllerRef,
+        )
             .then((appDetailResponse) => {
                 const genericAppDetail: AppDetails = {
                     ...appDetailResponse.result,
@@ -82,13 +89,21 @@ const ExternalArgoAppDetail = ({ appName, clusterId, isExternalApp, namespace }:
                 setErrorResponseCode(undefined)
             })
             .catch((errors: ServerErrors) => {
-                showError(errors)
-                setErrorResponseCode(errors.code)
+                if (!getIsRequestAborted(errors)) {
+                    showError(errors)
+                    setErrorResponseCode(errors.code)
+                }
             })
             .finally(() => {
                 setIsLoading(false)
                 isAPICallInProgress = false
                 setIsReloadResourceTreeInProgress(false)
+
+                if (shouldTriggerPolling) {
+                    initTimer = setTimeout(() => {
+                        _init()
+                    }, window._env_.EA_APP_DETAILS_POLLING_INTERVAL || 30000)
+                }
             })
     }
 
diff --git a/src/components/v2/appDetails/appDetails.api.ts b/src/components/v2/appDetails/appDetails.api.ts
@@ -14,31 +14,46 @@
  * limitations under the License.
  */
 
-import { get, post, ROUTES } from '@devtron-labs/devtron-fe-common-lib'
+import { APIOptions, get, post, ROUTES } from '@devtron-labs/devtron-fe-common-lib'
 import { Routes } from '../../../config/constants'
 import { AppType } from './appDetails.type'
 import { getAppId, generateDevtronAppIdentiferForK8sRequest } from './k8Resource/nodeDetail/nodeDetail.api'
 import { getDeploymentType, getK8sResourcePayloadAppType } from './k8Resource/nodeDetail/nodeDetail.util'
 
-export const getInstalledChartDetail = (_appId: number, _envId: number) => {
-    return get(`${Routes.APP_STORE_INSTALLED_APP}/detail/v2?installed-app-id=${_appId}&env-id=${_envId}`)
-}
+export const getInstalledChartDetail = (
+    _appId: number,
+    _envId: number,
+    abortControllerRef?: APIOptions['abortControllerRef'],
+) =>
+    get(`${Routes.APP_STORE_INSTALLED_APP}/detail/v2?installed-app-id=${_appId}&env-id=${_envId}`, {
+        abortControllerRef,
+    })
 
-export const getInstalledChartResourceTree = (_appId: number, _envId: number) => {
-    return get(`${Routes.APP_STORE_INSTALLED_APP}/detail/resource-tree?installed-app-id=${_appId}&env-id=${_envId}`)
-}
+export const getInstalledChartResourceTree = (
+    _appId: number,
+    _envId: number,
+    abortControllerRef?: APIOptions['abortControllerRef'],
+) =>
+    get(`${Routes.APP_STORE_INSTALLED_APP}/detail/resource-tree?installed-app-id=${_appId}&env-id=${_envId}`, {
+        abortControllerRef,
+    })
 
 export const getInstalledChartNotesDetail = (_appId: number, _envId: number) => {
     if (isNaN(Number(_appId)) || isNaN(Number(_envId))) {
         return null
     }
-    
+
     return get(`${Routes.APP_STORE_INSTALLED_APP}/notes?installed-app-id=${_appId}&env-id=${_envId}`)
 }
 
-export const getInstalledChartDetailWithResourceTree = (_appId: number, _envId: number) => {
-    return get(`${Routes.APP_STORE_INSTALLED_APP}/resource/hibernate?installed-app-id=${_appId}&env-id=${_envId}`)
-}
+export const getInstalledChartDetailWithResourceTree = (
+    _appId: number,
+    _envId: number,
+    abortControllerRef?: APIOptions['abortControllerRef'],
+) =>
+    get(`${Routes.APP_STORE_INSTALLED_APP}/resource/hibernate?installed-app-id=${_appId}&env-id=${_envId}`, {
+        abortControllerRef,
+    })
 
 export const getInstalledAppDetail = (_appId: number, _envId: number) => {
     return get(`app/detail?app-id=${_appId}&env-id=${_envId}`)
diff --git a/src/components/v2/appDetails/ea/EAAppDetail.component.tsx b/src/components/v2/appDetails/ea/EAAppDetail.component.tsx
diff --git a/src/components/v2/appDetails/sourceInfo/scaleWorkloads/ScaleWorkloadsModal.component.tsx b/src/components/v2/appDetails/sourceInfo/scaleWorkloads/ScaleWorkloadsModal.component.tsx
diff --git a/src/components/v2/index.tsx b/src/components/v2/index.tsx
