feat: Enhance AppStatusModal and related components to support environment ID and improve deployment status handling

AbhishekA1509 · AbhishekA1509 · commit 65b5aa1dcfd7 · 2025-05-13T15:49:27.000+05:30
diff --git a/src/Shared/Components/AppStatusModal/AppStatusBody.tsx b/src/Shared/Components/AppStatusModal/AppStatusBody.tsx
@@ -40,7 +40,8 @@ const StatusHeadingContainer = ({
     children,
     type,
     appId,
-}: PropsWithChildren<Pick<AppStatusBodyProps, 'type'>> & { appId: number }) => (
+    envId,
+}: PropsWithChildren<Pick<AppStatusBodyProps, 'type'>> & { appId: number; envId?: number }) => (
     <div className="flexbox dc__content-space w-100">
         {children}
         {type === 'release' ? (
@@ -52,7 +53,7 @@ const StatusHeadingContainer = ({
                 endIcon={<Icon name="ic-arrow-square-out" color={null} />}
                 text="Visit app"
                 linkProps={{
-                    to: getAppDetailsURL(appId),
+                    to: getAppDetailsURL(appId, envId),
                     target: '_blank',
                     rel: 'noopener noreferrer',
                 }}
@@ -82,7 +83,7 @@ export const AppStatusBody = ({
                 id: `app-status-${1}`,
                 heading: type !== 'stack-manager' ? 'Application Status' : 'Status',
                 value: (
-                    <StatusHeadingContainer type={type} appId={appDetails.appId}>
+                    <StatusHeadingContainer type={type} appId={appDetails.appId} envId={appDetails.environmentId}>
                         {appStatus ? <AppStatus status={appStatus} showAnimatedIcon /> : '--'}
                     </StatusHeadingContainer>
                 ),
@@ -116,7 +117,7 @@ export const AppStatusBody = ({
                       id: `deployment-status-${1}`,
                       heading: 'Deployment Status',
                       value: (
-                          <StatusHeadingContainer type={type} appId={appDetails.appId}>
+                          <StatusHeadingContainer type={type} appId={appDetails.appId} envId={appDetails.environmentId}>
                               {deploymentStatusDetailsBreakdownData?.deploymentStatus ? (
                                   <DeploymentStatus
                                       status={deploymentStatusDetailsBreakdownData.deploymentStatus}
diff --git a/src/Shared/Components/AppStatusModal/AppStatusModal.component.tsx b/src/Shared/Components/AppStatusModal/AppStatusModal.component.tsx
@@ -6,7 +6,7 @@ import { DISCORD_LINK } from '@Common/Constants'
 import { Drawer } from '@Common/Drawer'
 import { GenericEmptyState } from '@Common/EmptyState'
 import { handleUTCTime, stopPropagation, useAsync } from '@Common/Helper'
-import { DeploymentAppTypes } from '@Common/Types'
+import { DeploymentAppTypes, ImageType } from '@Common/Types'
 import { ComponentSizeType } from '@Shared/constants'
 import { AppType } from '@Shared/types'
 
@@ -275,6 +275,7 @@ const AppStatusModal = ({
                         </div>
                     }
                     subTitle={`Triggered at ${handleUTCTime(deploymentStatusDetailsBreakdownData.deploymentTriggerTime)} by ${deploymentStatusDetailsBreakdownData.triggeredBy}`}
+                    imageType={ImageType.Large}
                 />
             )
         }
diff --git a/src/Shared/Components/AppStatusModal/service.ts b/src/Shared/Components/AppStatusModal/service.ts
@@ -1,6 +1,6 @@
-import { get, getIsRequestAborted } from '@Common/API'
+import { get } from '@Common/API'
 import { ROUTES } from '@Common/Constants'
-import { getUrlWithSearchParams, showError } from '@Common/Helper'
+import { getUrlWithSearchParams } from '@Common/Helper'
 import {
     AppDetails,
     AppType,
@@ -16,31 +16,24 @@ export const getAppDetails = async ({
     envId,
     abortControllerRef,
 }: GetAppDetailsParamsType): Promise<AppDetails> => {
-    try {
-        const queryParams = getUrlWithSearchParams('', {
-            'app-id': appId,
-            'env-id': envId,
-        })
+    const queryParams = getUrlWithSearchParams('', {
+        'app-id': appId,
+        'env-id': envId,
+    })
 
-        const [appDetails, resourceTree] = await Promise.all([
-            get<Omit<AppDetails, 'resourceTree'>>(`${ROUTES.APP_DETAIL}/v2${queryParams}`, {
-                abortControllerRef,
-            }),
-            get<AppDetails['resourceTree']>(`${ROUTES.APP_DETAIL}/resource-tree${queryParams}`, {
-                abortControllerRef,
-            }),
-        ])
+    const [appDetails, resourceTree] = await Promise.all([
+        get<Omit<AppDetails, 'resourceTree'>>(`${ROUTES.APP_DETAIL}/v2${queryParams}`, {
+            abortControllerRef,
+        }),
+        get<AppDetails['resourceTree']>(`${ROUTES.APP_DETAIL}/resource-tree${queryParams}`, {
+            abortControllerRef,
+        }),
+    ])
 
-        return {
-            ...(appDetails.result || ({} as AppDetails)),
-            resourceTree: resourceTree.result,
-            appType: AppType.DEVTRON_APP,
-        }
-    } catch (error) {
-        if (!getIsRequestAborted(error)) {
-            showError(error)
-        }
-        throw error
+    return {
+        ...(appDetails.result || ({} as AppDetails)),
+        resourceTree: resourceTree.result,
+        appType: AppType.DEVTRON_APP,
     }
 }
 
@@ -52,28 +45,21 @@ export const getDeploymentStatusWithTimeline = async ({
     virtualEnvironmentConfig,
     isHelmApp,
 }: GetDeploymentStatusWithTimelineParamsType): Promise<DeploymentStatusDetailsBreakdownDataType> => {
-    try {
-        const baseURL = isHelmApp ? ROUTES.HELM_DEPLOYMENT_STATUS_TIMELINE_INSTALLED_APP : ROUTES.DEPLOYMENT_STATUS
+    const baseURL = isHelmApp ? ROUTES.HELM_DEPLOYMENT_STATUS_TIMELINE_INSTALLED_APP : ROUTES.DEPLOYMENT_STATUS
 
-        const deploymentStatusDetailsResponse = await get<DeploymentStatusDetailsType>(
-            getUrlWithSearchParams(`${baseURL}/${appId}/${envId}`, {
-                showTimeline,
-                ...(virtualEnvironmentConfig && {
-                    wfrId: virtualEnvironmentConfig.wfrId,
-                }),
+    const deploymentStatusDetailsResponse = await get<DeploymentStatusDetailsType>(
+        getUrlWithSearchParams(`${baseURL}/${appId}/${envId}`, {
+            showTimeline,
+            ...(virtualEnvironmentConfig && {
+                wfrId: virtualEnvironmentConfig.wfrId,
             }),
-            {
-                abortControllerRef,
-            },
-        )
+        }),
+        {
+            abortControllerRef,
+        },
+    )
 
-        return virtualEnvironmentConfig
-            ? virtualEnvironmentConfig.processVirtualEnvironmentDeploymentData(deploymentStatusDetailsResponse.result)
-            : processDeploymentStatusDetailsData(deploymentStatusDetailsResponse.result)
-    } catch (error) {
-        if (!getIsRequestAborted(error)) {
-            showError(error)
-        }
-        throw error
-    }
+    return virtualEnvironmentConfig
+        ? virtualEnvironmentConfig.processVirtualEnvironmentDeploymentData(deploymentStatusDetailsResponse.result)
+        : processDeploymentStatusDetailsData(deploymentStatusDetailsResponse.result)
 }
diff --git a/src/Shared/Components/AppStatusModal/utils.tsx b/src/Shared/Components/AppStatusModal/utils.tsx
@@ -5,10 +5,15 @@ import NoDeploymentStatusImage from '@Images/no-artifact.webp'
 import { DeploymentAppTypes, GenericEmptyStateType } from '@Common/Types'
 import { DEPLOYMENT_STATUS } from '@Shared/constants'
 import { aggregateNodes } from '@Shared/Helpers'
-import { AppDetails, AppType, Node } from '@Shared/types'
+import { AppDetails, AppType, DeploymentStatusDetailsBreakdownDataType, Node } from '@Shared/types'
 import { ReleaseMode } from '@Pages/index'
 
 import { AggregatedNodes, STATUS_SORTING_ORDER } from '../CICDHistory'
+import {
+    FAILED_DEPLOYMENT_STATUS,
+    PROGRESSING_DEPLOYMENT_STATUS,
+    SUCCESSFUL_DEPLOYMENT_STATUS,
+} from '../DeploymentStatusBreakdown'
 import {
     AppStatusModalProps,
     GetFilteredFlattenedNodesFromAppDetailsParamsType as GetFlattenedNodesFromAppDetailsParamsType,
@@ -105,20 +110,20 @@ export const getShowDeploymentStatusModal = ({
     return true
 }
 
-export const getEmptyViewImageFromHelmDeploymentStatus = (status: string): GenericEmptyStateType['image'] => {
-    switch (status?.toLowerCase()) {
-        case DEPLOYMENT_STATUS.STARTING:
-        case DEPLOYMENT_STATUS.PROGRESSING:
-        case DEPLOYMENT_STATUS.INITIATING:
-            return ICManOnRocket
-
-        case DEPLOYMENT_STATUS.SUCCEEDED:
-            return ICCelebration
+export const getEmptyViewImageFromHelmDeploymentStatus = (
+    status: DeploymentStatusDetailsBreakdownDataType['deploymentStatus'],
+): GenericEmptyStateType['image'] => {
+    if (PROGRESSING_DEPLOYMENT_STATUS.includes(status)) {
+        return ICManOnRocket
+    }
 
-        case DEPLOYMENT_STATUS.FAILED:
-            return ICPageNotFound
+    if (SUCCESSFUL_DEPLOYMENT_STATUS.includes(status)) {
+        return ICCelebration
+    }
 
-        default:
-            return NoDeploymentStatusImage
+    if (FAILED_DEPLOYMENT_STATUS.includes(status)) {
+        return ICPageNotFound
     }
+
+    return NoDeploymentStatusImage
 }
diff --git a/src/Shared/Components/CICDHistory/DeploymentDetailSteps.tsx b/src/Shared/Components/CICDHistory/DeploymentDetailSteps.tsx
@@ -153,11 +153,13 @@ const DeploymentDetailSteps = ({
                 {renderDeploymentApprovalInfo &&
                     getIsApprovalPolicyConfigured(userApprovalMetadata?.approvalConfigData) &&
                     renderDeploymentApprovalInfo(userApprovalMetadata)}
-                <DeploymentStatusDetailBreakdown
-                    deploymentStatusDetailsBreakdownData={deploymentStatusDetailsBreakdownData}
-                    isVirtualEnvironment={isVirtualEnv.current}
-                    appDetails={appDetails}
-                />
+                <div className="p-20 w-100">
+                    <DeploymentStatusDetailBreakdown
+                        deploymentStatusDetailsBreakdownData={deploymentStatusDetailsBreakdownData}
+                        isVirtualEnvironment={isVirtualEnv.current}
+                        appDetails={appDetails}
+                    />
+                </div>
             </div>
         )
 
diff --git a/src/Shared/Components/DeploymentStatusBreakdown/utils.tsx b/src/Shared/Components/DeploymentStatusBreakdown/utils.tsx
@@ -245,6 +245,7 @@ export const processDeploymentStatusDetailsData = (
     // After initial processing will mark all unavailable timelines [present before last invalid state] as success
     PHYSICAL_ENV_DEPLOYMENT_TIMELINE_ORDER.forEach((timelineStatusType, index) => {
         const element = findRight(data.timelines, getPredicate(timelineStatusType))
+
         const timelineData = deploymentData.deploymentStatusBreakdown[timelineStatusType]
 
         if (!element) {
@@ -290,6 +291,7 @@ export const processDeploymentStatusDetailsData = (
             case TIMELINE_STATUS.ARGOCD_SYNC:
                 timelineData.time = element.statusTime
                 timelineData.icon = 'success'
+                timelineData.displaySubText = ''
 
                 // These are singular events so either their success will come or failure
                 if (
@@ -337,7 +339,6 @@ export const processDeploymentStatusDetailsData = (
                 break
         }
 
-        // TODO: Should we add in progress check here?
         if (timelineData.icon === 'success' && index !== PHYSICAL_ENV_DEPLOYMENT_TIMELINE_ORDER.length - 1) {
             // Moving the next timeline to inprogress
             const nextTimelineStatus = PHYSICAL_ENV_DEPLOYMENT_TIMELINE_ORDER[index + 1]

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@ import { DISCORD_LINK } from '@Common/Constants'`
`6`	`6`	`import { Drawer } from '@Common/Drawer'`
`7`	`7`	`import { GenericEmptyState } from '@Common/EmptyState'`
`8`	`8`	`import { handleUTCTime, stopPropagation, useAsync } from '@Common/Helper'`
`9`		`-import { DeploymentAppTypes } from '@Common/Types'`
	`9`	`+import { DeploymentAppTypes, ImageType } from '@Common/Types'`
`10`	`10`	`import { ComponentSizeType } from '@Shared/constants'`
`11`	`11`	`import { AppType } from '@Shared/types'`
`12`	`12`
`@@ -275,6 +275,7 @@ const AppStatusModal = ({`
`275`	`275`	`</div>`
`276`	`276`	`}`
`277`	`277`	subTitle={`Triggered at ${handleUTCTime(deploymentStatusDetailsBreakdownData.deploymentTriggerTime)} by ${deploymentStatusDetailsBreakdownData.triggeredBy}`}
	`278`	`+ imageType={ImageType.Large}`
`278`	`279`	`/>`
`279`	`280`	`)`
`280`	`281`	`}`