Merge pull request #1247 from devtron-labs/feat-helm-install-async

feat: handled release status for helm installed charts

Author: iamayushm

src/components/app/details/appDetails/utils.tsx

@@ -698,7 +698,7 @@ export const processDeploymentStatusDetailsData = (
             deploymentData.deploymentStatusText = 'Failed'
             deploymentData.deploymentStatusBreakdown.APP_HEALTH.displaySubText = 'Failed'
         } else if (data?.wfrStatus === 'Progressing') {
-            deploymentData.deploymentStatus = DEPLOYMENT_STATUS.PROGRESSING
+            deploymentData.deploymentStatus = DEPLOYMENT_STATUS.INPROGRESS
             deploymentData.deploymentStatusText = 'In progress'
         }
     }

src/components/external-apps/ExternalAppService.ts

@@ -81,7 +81,7 @@ export interface ChartMetadata {
     notes?: string
 }
 
-interface HelmReleaseStatus {
+export interface HelmReleaseStatus {
     status: string,
     message: string,
     description: string

src/components/v2/appDetails/AppDetails.component.tsx

@@ -21,6 +21,7 @@ import {
 } from '../../app/details/appDetails/appDetails.type'
 import { processDeploymentStatusDetailsData } from '../../app/details/appDetails/utils'
 import { useSharedState } from '../utils/useSharedState'
+import ReleaseStatusEmptyState from './ReleaseStatusEmptyState'
 
 let deploymentStatusTimer = null
 const VirtualAppDetailsEmptyState = importComponentFromFELibrary('VirtualAppDetailsEmptyState')
@@ -150,6 +151,27 @@ const AppDetailsComponent = ({
         if (isVirtualEnv.current && VirtualAppDetailsEmptyState) {
             return <VirtualAppDetailsEmptyState environmentName={appDetails.environmentName} />
         }
+        if (
+            appDetails &&
+            !appDetails.resourceTree?.nodes?.length &&
+            appDetails.deploymentAppType === DeploymentAppTypes.HELM &&
+            appDetails.helmReleaseStatus &&
+            appDetails.helmReleaseStatus.status &&
+            (appDetails.helmReleaseStatus.status.toLowerCase() === DEPLOYMENT_STATUS.FAILED ||
+                appDetails.helmReleaseStatus.status.toLowerCase() === DEPLOYMENT_STATUS.PROGRESSING ||
+                appDetails.helmReleaseStatus.status.toLowerCase() === DEPLOYMENT_STATUS.UNKNOWN)
+        ) {
+            return (
+                <ReleaseStatusEmptyState
+                    message={appDetails.helmReleaseStatus.message}
+                    description={
+                        appDetails.helmReleaseStatus.status.toLowerCase() === DEPLOYMENT_STATUS.UNKNOWN
+                            ? ''
+                            : appDetails.helmReleaseStatus.description
+                    }
+                />
+            )
+        }
         return (
             <NodeTreeDetailTab
                 appDetails={appDetails}

src/components/v2/appDetails/ReleaseStatusEmptyState.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { ReactComponent as InfoIcon } from '../../../assets/icons/info-filled.svg'
+function ReleaseStatusEmptyState({ message, description }) {
+    return (
+        <div className="bcn-0 flex h-100">
+            <div className="flex column h-100 w-50">
+                <InfoIcon className="icon-dim-24 info-icon-n6" />
+                <span className="mt-8 cn-9 fs-13 fw-6 lh-20 dc__text-center">{message}</span>
+                {description && <p className="mt-4 cn-7 fs-13 fw-4 lh-20 dc__text-justify">{description}</p>}
+            </div>
+        </div>
+    )
+}
+
+export default ReleaseStatusEmptyState

src/components/v2/appDetails/appDetails.type.ts

@@ -3,6 +3,7 @@ import { ExternalLink, OptionTypeWithIcon } from '../../externalLinks/ExternalLi
 import { iLink } from '../utils/tabUtils/link.type'
 import { DeploymentAppTypes, OptionType } from '@devtron-labs/devtron-fe-common-lib'
 import { EphemeralForm, EphemeralFormAdvancedType } from './k8Resource/nodeDetail/nodeDetail.type'
+import { HelmReleaseStatus } from '../../external-apps/ExternalAppService'
 
 export interface ApplicationObject extends iLink {
     selectedNode: string
@@ -180,7 +181,7 @@ export interface AppDetails {
     otherEnvironment?: OtherEnvironment[]
     projectName?: string
     appType?: AppType
-    additionalData?: any
+    helmReleaseStatus?: HelmReleaseStatus
     clusterId?: number
     notes?: string
     deploymentAppType?: DeploymentAppTypes

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

@@ -80,7 +80,7 @@ function ExternalAppDetail({ appId, appName, isExternalApp }) {
             },
             appStoreAppName: helmAppDetail.chartMetadata.chartName,
             appStoreAppVersion: helmAppDetail.chartMetadata.chartVersion,
-            additionalData: helmAppDetail.releaseStatus,
+            helmReleaseStatus: helmAppDetail.releaseStatus,
             clusterId: helmAppDetail.environmentDetails.clusterId,
             notes: helmAppDetail.chartMetadata.notes,
         }

src/components/v2/appDetails/sourceInfo/environmentStatus/EnvironmentStatus.component.tsx

@@ -17,6 +17,7 @@ import { importComponentFromFELibrary, useAsync } from '../../../../common'
 import { DeploymentAppTypes, noop } from '@devtron-labs/devtron-fe-common-lib'
 import DeploymentStatusCard from '../../../../app/details/appDetails/DeploymentStatusCard'
 import { EnvironmentStatusComponentType } from '../environment.type'
+import HelmAppConfigApplyStatusCard from './HelmAppConfigApplyStatusCard'
 
 const AppDetailsDownloadCard = importComponentFromFELibrary('AppDetailsDownloadCard')
 
@@ -78,7 +79,7 @@ function EnvironmentStatusComponent({
     }
 
     const renderStatusBlock = () => {
-        return (
+        return status ? (
             <div
                 className="app-status-card bcn-0 mr-12 br-8 p-16 cursor  "
                 onClick={loadingResourceTree ? noop : handleShowAppStatusDetail}
@@ -112,45 +113,22 @@ function EnvironmentStatusComponent({
                     </>
                 )}
             </div>
-        )
+        ) : null
     }
 
     const onClickShowNotes = () => {
         setShowNotes(true)
     }
 
     const renderHelmConfigApplyStatusBlock = () => {
-        return (
-            appDetails?.appType == AppType.EXTERNAL_HELM_CHART && (
-                <div className="app-status-card bcn-0 mr-12 br-8 p-16  ">
-                    <div className="cn-9 flex left">
-                        <span>Config apply status</span>
-                        <Tippy
-                            className="default-tt cursor"
-                            arrow={false}
-                            content={'Whether or not your last helm install was successful'}
-                        >
-                            <Question className="cursor icon-dim-16 ml-4" />
-                        </Tippy>
-                    </div>
-                    <div
-                        className={`f-${appDetails.additionalData[
-                            'status'
-                        ].toLowerCase()} dc__capitalize fw-6 fs-14 flex left`}
-                    >
-                        <span>{appDetails.additionalData['status']}</span>
-                        <figure
-                            className={`${appDetails.additionalData[
-                                'status'
-                            ].toLowerCase()} dc__app-summary__icon ml-8 icon-dim-20`}
-                        ></figure>
-                    </div>
-                    <div className="cn-9 flex left">
-                        <span>{appDetails.additionalData['message']}</span>
-                    </div>
-                </div>
-            )
-        )
+        if (
+            appDetails?.appType === AppType.EXTERNAL_HELM_CHART ||
+            (appDetails?.deploymentAppType === DeploymentAppTypes.HELM &&
+                appDetails?.appType === AppType.DEVTRON_HELM_CHART)
+        ) {
+            return <HelmAppConfigApplyStatusCard releaseStatus={appDetails.helmReleaseStatus} />
+        }
+        return null
     }
 
     const renderGeneratedManifestDownloadCard = (): JSX.Element => {

src/components/v2/appDetails/sourceInfo/environmentStatus/HelmAppConfigApplyStatusCard.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import Tippy from '@tippyjs/react'
+import { ReactComponent as Question } from '../../../assets/icons/ic-question.svg'
+
+function HelmAppConfigApplyStatusCard({ releaseStatus }) {
+    return releaseStatus ? (
+        <div className="app-status-card bcn-0 mr-12 br-8 p-16  ">
+            <div className="cn-9 flex left">
+                <span>Config apply status</span>
+                <Tippy
+                    className="default-tt cursor"
+                    arrow={false}
+                    content={'Whether or not your last helm install was successful'}
+                >
+                    <Question className="cursor icon-dim-16 ml-4" />
+                </Tippy>
+            </div>
+            <div className={`f-${releaseStatus['status'].toLowerCase()} dc__capitalize fw-6 fs-14 flex left`}>
+                <span>{releaseStatus['status']}</span>
+                <figure
+                    className={`${releaseStatus['status'].toLowerCase()} dc__app-summary__icon ml-8 icon-dim-20`}
+                ></figure>
+            </div>
+            <div className="cn-9 flex left">
+                <span>{releaseStatus['message']}</span>
+            </div>
+        </div>
+    ) : null
+}
+
+export default HelmAppConfigApplyStatusCard

src/components/v2/chartDeploymentHistory/ChartDeploymentHistory.component.tsx

@@ -272,6 +272,7 @@ function ChartDeploymentHistory({
         return (
             <>
                 {deploymentHistoryArr.map((deployment, index) => {
+                    const helmDeploymentStatus: string = deployment?.status ? deployment.status.toLowerCase() : 'succeeded'
                     return (
                         <React.Fragment key={deployment.version}>
                             <div
@@ -299,7 +300,7 @@ function ChartDeploymentHistory({
                                                 : ''
                                         } ${
                                             installedAppInfo?.deploymentType === DeploymentAppTypes.HELM
-                                                ? 'succeeded'
+                                                ? helmDeploymentStatus
                                                 : ''
                                         }`}
                                     ></div>

src/components/v2/index.tsx

@@ -94,6 +94,7 @@ function RouterComponent({ envType }) {
         appDetailsRef.current = {
             ...appDetailsRef.current,
             ...response.result,
+            helmReleaseStatus: response.result?.releaseStatus || appDetailsRef.current?.helmReleaseStatus
         }
         IndexStore.publishAppDetails(appDetailsRef.current, AppType.DEVTRON_HELM_CHART)
         setErrorResponseCode(undefined)