feat: add support for flux steps in deployment timeline

src/Common/Types.ts

@@ -713,7 +713,7 @@ export enum DeploymentAppTypes {
     GITOPS = 'argo_cd',
     MANIFEST_DOWNLOAD = 'manifest_download',
     MANIFEST_PUSH = 'manifest_push',
-    FLUX = 'flux',
+    FLUX = 'flux_cd',
 }
 
 export interface VulnerabilityType {

src/Shared/Components/AppStatusModal/AppStatusModal.component.tsx

@@ -99,6 +99,7 @@ const AppStatusModal = ({
                           }
                         : null,
                     isHelmApp: appDetails.appType === AppType.DEVTRON_HELM_CHART,
+                    deploymentAppType: appDetails.deploymentAppType,
                 }),
             deploymentStatusAbortControllerRef,
         )

src/Shared/Components/AppStatusModal/service.ts

@@ -51,6 +51,7 @@ export const getDeploymentStatusWithTimeline = async ({
     showTimeline,
     virtualEnvironmentConfig,
     isHelmApp,
+    deploymentAppType,
 }: GetDeploymentStatusWithTimelineParamsType): Promise<DeploymentStatusDetailsBreakdownDataType> => {
     const baseURL = isHelmApp ? ROUTES.HELM_DEPLOYMENT_STATUS_TIMELINE_INSTALLED_APP : ROUTES.DEPLOYMENT_STATUS
 
@@ -68,5 +69,5 @@ export const getDeploymentStatusWithTimeline = async ({
 
     return virtualEnvironmentConfig
         ? virtualEnvironmentConfig.processVirtualEnvironmentDeploymentData(deploymentStatusDetailsResponse.result)
-        : processDeploymentStatusDetailsData(deploymentStatusDetailsResponse.result)
+        : processDeploymentStatusDetailsData(deploymentAppType, deploymentStatusDetailsResponse.result)
 }

src/Shared/Components/AppStatusModal/types.ts

@@ -1,6 +1,6 @@
 import { FunctionComponent, PropsWithChildren, ReactNode } from 'react'
 
-import { APIOptions } from '@Common/Types'
+import { APIOptions, DeploymentAppTypes } from '@Common/Types'
 import {
     AppDetails,
     ConfigDriftModalProps,
@@ -85,6 +85,7 @@ export type GetDeploymentStatusWithTimelineParamsType = Pick<APIOptions, 'abortC
         wfrId: AppDetails['resourceTree']['wfrId']
     }
     isHelmApp?: boolean
+    deploymentAppType: DeploymentAppTypes
 }
 
 export interface AppStatusModalTabListProps extends Pick<AppStatusModalProps, 'appDetails' | 'type'> {

src/Shared/Components/CICDHistory/DeploymentDetailSteps.tsx

@@ -61,7 +61,7 @@ const DeploymentDetailSteps = ({
     const processedData =
         isVirtualEnv.current && processVirtualEnvironmentDeploymentData
             ? processVirtualEnvironmentDeploymentData()
-            : processDeploymentStatusDetailsData()
+            : processDeploymentStatusDetailsData(appDetails?.deploymentAppType)
     const [deploymentStatusDetailsBreakdownData, setDeploymentStatusDetailsBreakdownData] =
         useState<DeploymentStatusDetailsBreakdownDataType>(processedData)
 
@@ -115,7 +115,7 @@ const DeploymentDetailSteps = ({
         const processedDeploymentStatusDetailsData =
             isVirtualEnv.current && processVirtualEnvironmentDeploymentData
                 ? processVirtualEnvironmentDeploymentData(deploymentStatusDetailRes)
-                : processDeploymentStatusDetailsData(deploymentStatusDetailRes)
+                : processDeploymentStatusDetailsData(appDetails?.deploymentAppType, deploymentStatusDetailRes)
         clearDeploymentStatusTimer()
         // If deployment status is in progress then fetch data in every 10 seconds
 

src/Shared/Components/CICDHistory/DeploymentStatusBreakdown.tsx

@@ -16,6 +16,7 @@
 
 import { Fragment } from 'react'
 
+import { DeploymentAppTypes } from '@Common/Types'
 import { TIMELINE_STATUS } from '@Shared/types'
 
 import { InfoBlock } from '../InfoBlock'
@@ -58,8 +59,9 @@ const DeploymentStatusDetailBreakdown = ({
                     {(
                         [
                             TIMELINE_STATUS.GIT_COMMIT,
-                            TIMELINE_STATUS.ARGOCD_SYNC,
-                            TIMELINE_STATUS.KUBECTL_APPLY,
+                            ...(deploymentStatusDetailRowProps.appDetails.deploymentAppType === DeploymentAppTypes.FLUX
+                                ? []
+                                : [TIMELINE_STATUS.ARGOCD_SYNC, TIMELINE_STATUS.KUBECTL_APPLY]),
                         ] as DeploymentStatusDetailRowType['type'][]
                     ).map((timelineStatus) => (
                         <Fragment key={timelineStatus}>

src/Shared/Components/DeploymentStatusBreakdown/utils.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable no-param-reassign */
 import { findRight, handleUTCTime, logExceptionToSentry } from '@Common/Helper'
+import { DeploymentAppTypes } from '@Common/Types'
 import { DEPLOYMENT_STATUS } from '@Shared/constants'
 import {
     DeploymentPhaseType,
@@ -22,6 +23,7 @@ import {
 import { ProcessUnableToFetchOrTimedOutStatusType } from './types'
 
 const getDefaultDeploymentStatusTimeline = (
+    deploymentAppType: DeploymentAppTypes,
     data?: DeploymentStatusDetailsType,
 ): DeploymentStatusDetailsBreakdownDataType => {
     const commonProps: Pick<
@@ -58,19 +60,26 @@ const getDefaultDeploymentStatusTimeline = (
                 ...commonProps,
                 displayText: 'Push manifest to Git',
             },
-            [TIMELINE_STATUS.ARGOCD_SYNC]: {
-                ...commonProps,
-                displayText: 'Synced with Argo CD',
-            },
-            [TIMELINE_STATUS.KUBECTL_APPLY]: {
-                ...commonProps,
-                displayText: 'Apply manifest to Kubernetes',
-                resourceDetails: [],
-                subSteps: [],
-            },
+            ...(deploymentAppType === DeploymentAppTypes.GITOPS
+                ? {
+                      [TIMELINE_STATUS.ARGOCD_SYNC]: {
+                          ...commonProps,
+                          displayText: 'Synced with Argo CD',
+                      },
+                      [TIMELINE_STATUS.KUBECTL_APPLY]: {
+                          ...commonProps,
+                          displayText: 'Apply manifest to Kubernetes',
+                          resourceDetails: [],
+                          subSteps: [],
+                      },
+                  }
+                : {}),
             [TIMELINE_STATUS.APP_HEALTH]: {
                 ...commonProps,
-                displayText: 'Propagate manifest to Kubernetes resources',
+                displayText:
+                    deploymentAppType === DeploymentAppTypes.FLUX
+                        ? 'Synced with Flux CD'
+                        : 'Propagate manifest to Kubernetes resources',
             },
         },
         errorBarConfig: deploymentErrorMessage
@@ -233,12 +242,13 @@ const processKubeCTLApply = (
  *   - In similar fashion based on the deploymentStatus we will set the icon and display text for the timeline.
  */
 export const processDeploymentStatusDetailsData = (
+    deploymentAppType: DeploymentAppTypes,
     data?: DeploymentStatusDetailsType,
 ): DeploymentStatusDetailsBreakdownDataType => {
     if (data && !WFR_STATUS_DTO_TO_DEPLOYMENT_STATUS_MAP[data.wfrStatus]) {
         logExceptionToSentry(new Error(`New WFR status found: ${data?.wfrStatus}`))
     }
-    const deploymentData = getDefaultDeploymentStatusTimeline(data)
+    const deploymentData = getDefaultDeploymentStatusTimeline(deploymentAppType, data)
 
     const { deploymentStatus } = deploymentData
 

src/index.ts

@@ -166,6 +166,11 @@ export interface customEnv {
      */
     FEATURE_MANAGE_TRAFFIC_ENABLE?: boolean
     FEATURE_INFRA_PROVISION_INFO_BLOCK_HIDE?: boolean
+    /**
+     * If true, will add flux option to deployment types in devtron apps and devtron charts
+     * @default false
+     */
+    FEATURE_FLUX_DEPLOYMENTS_ENABLE?: boolean
 }
 declare global {
     interface Window {