From 42025a43a3869df2817c95c7247d3d0309530bd8 Mon Sep 17 00:00:00 2001 From: Arun Jain Date: Fri, 13 Jun 2025 15:04:52 +0530 Subject: [PATCH 01/15] feat: add support for flux steps in deployment timeline --- src/Common/Types.ts | 2 +- .../AppStatusModal.component.tsx | 1 + .../Components/AppStatusModal/service.ts | 3 +- src/Shared/Components/AppStatusModal/types.ts | 3 +- .../CICDHistory/DeploymentDetailSteps.tsx | 4 +-- .../CICDHistory/DeploymentStatusBreakdown.tsx | 6 ++-- .../DeploymentStatusBreakdown/utils.tsx | 34 ++++++++++++------- src/index.ts | 5 +++ 8 files changed, 39 insertions(+), 19 deletions(-) diff --git a/src/Common/Types.ts b/src/Common/Types.ts index 94c5a2ba2..f089e60f2 100644 --- a/src/Common/Types.ts +++ b/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 { diff --git a/src/Shared/Components/AppStatusModal/AppStatusModal.component.tsx b/src/Shared/Components/AppStatusModal/AppStatusModal.component.tsx index a2cd53503..daf66cdea 100644 --- a/src/Shared/Components/AppStatusModal/AppStatusModal.component.tsx +++ b/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, ) diff --git a/src/Shared/Components/AppStatusModal/service.ts b/src/Shared/Components/AppStatusModal/service.ts index e862199d3..ce0a21343 100644 --- a/src/Shared/Components/AppStatusModal/service.ts +++ b/src/Shared/Components/AppStatusModal/service.ts @@ -51,6 +51,7 @@ export const getDeploymentStatusWithTimeline = async ({ showTimeline, virtualEnvironmentConfig, isHelmApp, + deploymentAppType, }: GetDeploymentStatusWithTimelineParamsType): Promise => { 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) } diff --git a/src/Shared/Components/AppStatusModal/types.ts b/src/Shared/Components/AppStatusModal/types.ts index 6b86ada85..9671e06a7 100644 --- a/src/Shared/Components/AppStatusModal/types.ts +++ b/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 { diff --git a/src/Shared/Components/CICDHistory/DeploymentDetailSteps.tsx b/src/Shared/Components/CICDHistory/DeploymentDetailSteps.tsx index 8714dff54..72b24ef8b 100644 --- a/src/Shared/Components/CICDHistory/DeploymentDetailSteps.tsx +++ b/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(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 diff --git a/src/Shared/Components/CICDHistory/DeploymentStatusBreakdown.tsx b/src/Shared/Components/CICDHistory/DeploymentStatusBreakdown.tsx index 5ba7e5b59..8bbb4af8c 100644 --- a/src/Shared/Components/CICDHistory/DeploymentStatusBreakdown.tsx +++ b/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) => ( diff --git a/src/Shared/Components/DeploymentStatusBreakdown/utils.tsx b/src/Shared/Components/DeploymentStatusBreakdown/utils.tsx index 89a232fe0..45ef05870 100644 --- a/src/Shared/Components/DeploymentStatusBreakdown/utils.tsx +++ b/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 diff --git a/src/index.ts b/src/index.ts index 2fc5a5066..ad1a12381 100644 --- a/src/index.ts +++ b/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 { From aa07a410da5326ad5a0377d95f669353eea1ccb7 Mon Sep 17 00:00:00 2001 From: Arun Jain Date: Fri, 13 Jun 2025 17:44:09 +0530 Subject: [PATCH 02/15] chore: update steps for flux --- .../DeploymentStatusBreakdown/constants.ts | 8 ++++++- .../DeploymentStatusBreakdown/utils.tsx | 21 ++++++++++++------- 2 files changed, 21 insertions(+), 8 deletions(-) diff --git a/src/Shared/Components/DeploymentStatusBreakdown/constants.ts b/src/Shared/Components/DeploymentStatusBreakdown/constants.ts index 9ced31e1f..1439ba4e5 100644 --- a/src/Shared/Components/DeploymentStatusBreakdown/constants.ts +++ b/src/Shared/Components/DeploymentStatusBreakdown/constants.ts @@ -66,7 +66,7 @@ export const FAILED_DEPLOYMENT_STATUS: typeof PROGRESSING_DEPLOYMENT_STATUS = [ DEPLOYMENT_STATUS.UNABLE_TO_FETCH, ] -export const PHYSICAL_ENV_DEPLOYMENT_TIMELINE_ORDER: Readonly = [ +export const PHYSICAL_ENV_DEPLOYMENT_TIMELINE_ORDER_ARGO: Readonly = [ TIMELINE_STATUS.DEPLOYMENT_INITIATED, TIMELINE_STATUS.GIT_COMMIT, TIMELINE_STATUS.ARGOCD_SYNC, @@ -74,6 +74,12 @@ export const PHYSICAL_ENV_DEPLOYMENT_TIMELINE_ORDER: Readonly = [ + TIMELINE_STATUS.DEPLOYMENT_INITIATED, + TIMELINE_STATUS.GIT_COMMIT, + TIMELINE_STATUS.APP_HEALTH, +] + export const DEPLOYMENT_PHASES: Readonly = [ DeploymentPhaseType.PRE_SYNC, DeploymentPhaseType.SYNC, diff --git a/src/Shared/Components/DeploymentStatusBreakdown/utils.tsx b/src/Shared/Components/DeploymentStatusBreakdown/utils.tsx index 45ef05870..3403df5c1 100644 --- a/src/Shared/Components/DeploymentStatusBreakdown/utils.tsx +++ b/src/Shared/Components/DeploymentStatusBreakdown/utils.tsx @@ -15,7 +15,8 @@ import { import { DEPLOYMENT_PHASES, FAILED_DEPLOYMENT_STATUS, - PHYSICAL_ENV_DEPLOYMENT_TIMELINE_ORDER, + PHYSICAL_ENV_DEPLOYMENT_TIMELINE_ORDER_ARGO, + PHYSICAL_ENV_DEPLOYMENT_TIMELINE_ORDER_FLUX, PROGRESSING_DEPLOYMENT_STATUS, SUCCESSFUL_DEPLOYMENT_STATUS, WFR_STATUS_DTO_TO_DEPLOYMENT_STATUS_MAP, @@ -276,7 +277,13 @@ export const processDeploymentStatusDetailsData = ( timeline.status.includes(TIMELINE_STATUS.ARGOCD_SYNC), ) - PHYSICAL_ENV_DEPLOYMENT_TIMELINE_ORDER.forEach((timelineStatusType, index) => { + // Only keep 3 steps in case of flux + const timelineOrder = + deploymentAppType === DeploymentAppTypes.FLUX + ? PHYSICAL_ENV_DEPLOYMENT_TIMELINE_ORDER_FLUX + : PHYSICAL_ENV_DEPLOYMENT_TIMELINE_ORDER_ARGO + + timelineOrder.forEach((timelineStatusType, index) => { const element = findRight(data.timelines, getPredicate(timelineStatusType)) const timelineData = deploymentData.deploymentStatusBreakdown[timelineStatusType] @@ -363,8 +370,8 @@ export const processDeploymentStatusDetailsData = ( } // Moving the next timeline to inprogress - if (timelineData.icon === 'success' && index !== PHYSICAL_ENV_DEPLOYMENT_TIMELINE_ORDER.length - 1) { - const nextTimelineStatus = PHYSICAL_ENV_DEPLOYMENT_TIMELINE_ORDER[index + 1] + if (timelineData.icon === 'success' && index !== timelineOrder.length - 1) { + const nextTimelineStatus = timelineOrder[index + 1] const nextTimeline = deploymentData.deploymentStatusBreakdown[nextTimelineStatus] if (deploymentData.errorBarConfig) { @@ -377,13 +384,13 @@ export const processDeploymentStatusDetailsData = ( }) // Traversing the timeline in reverse order so that if any status is there which is inprogress or success then we will mark all the previous steps as success - for (let i = PHYSICAL_ENV_DEPLOYMENT_TIMELINE_ORDER.length - 1; i >= 0; i -= 1) { - const timelineStatusType = PHYSICAL_ENV_DEPLOYMENT_TIMELINE_ORDER[i] + for (let i = timelineOrder.length - 1; i >= 0; i -= 1) { + const timelineStatusType = timelineOrder[i] const timelineData = deploymentData.deploymentStatusBreakdown[timelineStatusType] if (timelineData.icon === 'inprogress' || timelineData.icon === 'success') { for (let j = i - 1; j >= 0; j -= 1) { - const prevTimelineStatusType = PHYSICAL_ENV_DEPLOYMENT_TIMELINE_ORDER[j] + const prevTimelineStatusType = timelineOrder[j] const prevTimelineData = deploymentData.deploymentStatusBreakdown[prevTimelineStatusType] prevTimelineData.icon = 'success' prevTimelineData.displaySubText = '' From 05a82628f8a30a4cd7c8f982871749e847e5b4a9 Mon Sep 17 00:00:00 2001 From: Arun Jain Date: Fri, 13 Jun 2025 17:59:03 +0530 Subject: [PATCH 03/15] feat: add deployment app type in history --- src/Shared/Components/AppStatusModal/service.ts | 5 ++++- src/Shared/Components/CICDHistory/DeploymentDetailSteps.tsx | 5 ++++- src/Shared/types.ts | 1 + 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/Shared/Components/AppStatusModal/service.ts b/src/Shared/Components/AppStatusModal/service.ts index ce0a21343..93bf49caf 100644 --- a/src/Shared/Components/AppStatusModal/service.ts +++ b/src/Shared/Components/AppStatusModal/service.ts @@ -69,5 +69,8 @@ export const getDeploymentStatusWithTimeline = async ({ return virtualEnvironmentConfig ? virtualEnvironmentConfig.processVirtualEnvironmentDeploymentData(deploymentStatusDetailsResponse.result) - : processDeploymentStatusDetailsData(deploymentAppType, deploymentStatusDetailsResponse.result) + : processDeploymentStatusDetailsData( + deploymentStatusDetailsResponse.result.deploymentAppType ?? deploymentAppType, + deploymentStatusDetailsResponse.result, + ) } diff --git a/src/Shared/Components/CICDHistory/DeploymentDetailSteps.tsx b/src/Shared/Components/CICDHistory/DeploymentDetailSteps.tsx index 72b24ef8b..02325bae4 100644 --- a/src/Shared/Components/CICDHistory/DeploymentDetailSteps.tsx +++ b/src/Shared/Components/CICDHistory/DeploymentDetailSteps.tsx @@ -115,7 +115,10 @@ const DeploymentDetailSteps = ({ const processedDeploymentStatusDetailsData = isVirtualEnv.current && processVirtualEnvironmentDeploymentData ? processVirtualEnvironmentDeploymentData(deploymentStatusDetailRes) - : processDeploymentStatusDetailsData(appDetails?.deploymentAppType, deploymentStatusDetailRes) + : processDeploymentStatusDetailsData( + deploymentStatusDetailRes.deploymentAppType, + deploymentStatusDetailRes, + ) clearDeploymentStatusTimer() // If deployment status is in progress then fetch data in every 10 seconds diff --git a/src/Shared/types.ts b/src/Shared/types.ts index bd265c365..2bb748b3c 100644 --- a/src/Shared/types.ts +++ b/src/Shared/types.ts @@ -1249,6 +1249,7 @@ export interface DeploymentStatusDetailsType { timelines: DeploymentStatusDetailsTimelineType[] wfrStatus?: WorkflowRunnerStatusDTO isDeploymentWithoutApproval: boolean + deploymentAppType: DeploymentAppTypes } export type DeploymentStatusTimelineType = From 01515bbb2a4caffc271052bf6b19d7e45c9d8883 Mon Sep 17 00:00:00 2001 From: Arun Jain Date: Fri, 13 Jun 2025 18:10:53 +0530 Subject: [PATCH 04/15] chore: version bump --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 41d779777..df005e40d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.15.2", + "version": "1.15.2-beta-1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.15.2", + "version": "1.15.2-beta-1", "hasInstallScript": true, "license": "ISC", "dependencies": { diff --git a/package.json b/package.json index 1f261ba7c..79b9e61ed 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.15.2", + "version": "1.15.2-beta-1", "description": "Supporting common component library", "type": "module", "main": "dist/index.js", From fd2c4bb1e89079afb143a0434e3c68372a4885ec Mon Sep 17 00:00:00 2001 From: Arun Jain Date: Fri, 13 Jun 2025 19:15:24 +0530 Subject: [PATCH 05/15] fix: use deployment type from service and not app details --- package-lock.json | 4 ++-- package.json | 2 +- src/Shared/Components/CICDHistory/DeploymentDetailSteps.tsx | 1 + .../Components/CICDHistory/DeploymentStatusBreakdown.tsx | 4 +++- src/Shared/Components/CICDHistory/TriggerOutput.tsx | 1 + src/Shared/Components/CICDHistory/types.tsx | 1 + src/Shared/Components/DeploymentStatusBreakdown/utils.tsx | 1 + src/Shared/types.ts | 1 + 8 files changed, 11 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index df005e40d..199bcbebc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.15.2-beta-1", + "version": "1.15.2-beta-2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.15.2-beta-1", + "version": "1.15.2-beta-2", "hasInstallScript": true, "license": "ISC", "dependencies": { diff --git a/package.json b/package.json index 79b9e61ed..86a15188a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.15.2-beta-1", + "version": "1.15.2-beta-2", "description": "Supporting common component library", "type": "module", "main": "dist/index.js", diff --git a/src/Shared/Components/CICDHistory/DeploymentDetailSteps.tsx b/src/Shared/Components/CICDHistory/DeploymentDetailSteps.tsx index 02325bae4..592a46804 100644 --- a/src/Shared/Components/CICDHistory/DeploymentDetailSteps.tsx +++ b/src/Shared/Components/CICDHistory/DeploymentDetailSteps.tsx @@ -174,6 +174,7 @@ const DeploymentDetailSteps = ({ isVirtualEnvironment={isVirtualEnv.current} appDetails={appDetails} rootClassName="p-20" + deploymentAppType={deploymentStatusDetailsBreakdownData.deploymentAppType} /> ) diff --git a/src/Shared/Components/CICDHistory/DeploymentStatusBreakdown.tsx b/src/Shared/Components/CICDHistory/DeploymentStatusBreakdown.tsx index 8bbb4af8c..837f45584 100644 --- a/src/Shared/Components/CICDHistory/DeploymentStatusBreakdown.tsx +++ b/src/Shared/Components/CICDHistory/DeploymentStatusBreakdown.tsx @@ -30,6 +30,7 @@ const DeploymentStatusDetailBreakdown = ({ isVirtualEnvironment, appDetails, rootClassName = '', + deploymentAppType, }: DeploymentStatusDetailBreakdownType) => { const isHelmManifestPushed = deploymentStatusDetailsBreakdownData.deploymentStatusBreakdown[ @@ -59,7 +60,8 @@ const DeploymentStatusDetailBreakdown = ({ {( [ TIMELINE_STATUS.GIT_COMMIT, - ...(deploymentStatusDetailRowProps.appDetails.deploymentAppType === DeploymentAppTypes.FLUX + ...(appDetails.deploymentAppType === DeploymentAppTypes.FLUX || + deploymentAppType === DeploymentAppTypes.FLUX ? [] : [TIMELINE_STATUS.ARGOCD_SYNC, TIMELINE_STATUS.KUBECTL_APPLY]), ] as DeploymentStatusDetailRowType['type'][] diff --git a/src/Shared/Components/CICDHistory/TriggerOutput.tsx b/src/Shared/Components/CICDHistory/TriggerOutput.tsx index 128a24f9a..970356b39 100644 --- a/src/Shared/Components/CICDHistory/TriggerOutput.tsx +++ b/src/Shared/Components/CICDHistory/TriggerOutput.tsx @@ -129,6 +129,7 @@ const HistoryLogs: React.FC = ({ userApprovalMetadata={userApprovalMetadata} isGitops={ deploymentAppType === DeploymentAppTypes.GITOPS || + deploymentAppType === DeploymentAppTypes.FLUX || deploymentAppType === DeploymentAppTypes.MANIFEST_DOWNLOAD || deploymentAppType === DeploymentAppTypes.MANIFEST_PUSH } diff --git a/src/Shared/Components/CICDHistory/types.tsx b/src/Shared/Components/CICDHistory/types.tsx index 8fe87ce26..c72c8e7de 100644 --- a/src/Shared/Components/CICDHistory/types.tsx +++ b/src/Shared/Components/CICDHistory/types.tsx @@ -521,6 +521,7 @@ export interface DeploymentStatusDetailBreakdownType { */ appDetails: AppDetails | null rootClassName?: string + deploymentAppType?: DeploymentAppTypes } export interface DeploymentStatusDetailRowType extends Pick { diff --git a/src/Shared/Components/DeploymentStatusBreakdown/utils.tsx b/src/Shared/Components/DeploymentStatusBreakdown/utils.tsx index 3403df5c1..fcbb9583e 100644 --- a/src/Shared/Components/DeploymentStatusBreakdown/utils.tsx +++ b/src/Shared/Components/DeploymentStatusBreakdown/utils.tsx @@ -48,6 +48,7 @@ const getDefaultDeploymentStatusTimeline = ( return { deploymentStatus, + deploymentAppType, deploymentTriggerTime: data?.deploymentStartedOn || '', deploymentEndTime: data?.deploymentFinishedOn || '', triggeredBy: data?.triggeredBy || '', diff --git a/src/Shared/types.ts b/src/Shared/types.ts index 2bb748b3c..f90b049d7 100644 --- a/src/Shared/types.ts +++ b/src/Shared/types.ts @@ -1312,6 +1312,7 @@ export interface DeploymentStatusDetailsBreakdownDataType { deploymentErrorMessage: string nextTimelineToProcess: DeploymentStatusTimelineType } | null + deploymentAppType: DeploymentAppTypes } export interface IntelligenceConfig { From f100d3bf0d9f0be5d98a9b6fc328bcae15ed6395 Mon Sep 17 00:00:00 2001 From: Arun Jain Date: Sat, 14 Jun 2025 18:38:11 +0530 Subject: [PATCH 06/15] feat: undefined deploymentType in case of failed status --- .../Components/CICDHistory/DeploymentStatusBreakdown.tsx | 8 ++++---- src/Shared/Components/DeploymentStatusBreakdown/utils.tsx | 6 +++++- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/src/Shared/Components/CICDHistory/DeploymentStatusBreakdown.tsx b/src/Shared/Components/CICDHistory/DeploymentStatusBreakdown.tsx index 837f45584..6a7b8748b 100644 --- a/src/Shared/Components/CICDHistory/DeploymentStatusBreakdown.tsx +++ b/src/Shared/Components/CICDHistory/DeploymentStatusBreakdown.tsx @@ -60,10 +60,10 @@ const DeploymentStatusDetailBreakdown = ({ {( [ TIMELINE_STATUS.GIT_COMMIT, - ...(appDetails.deploymentAppType === DeploymentAppTypes.FLUX || - deploymentAppType === DeploymentAppTypes.FLUX - ? [] - : [TIMELINE_STATUS.ARGOCD_SYNC, TIMELINE_STATUS.KUBECTL_APPLY]), + ...(appDetails.deploymentAppType === DeploymentAppTypes.GITOPS || + deploymentAppType === DeploymentAppTypes.GITOPS + ? [TIMELINE_STATUS.ARGOCD_SYNC, TIMELINE_STATUS.KUBECTL_APPLY] + : []), ] as DeploymentStatusDetailRowType['type'][] ).map((timelineStatus) => ( diff --git a/src/Shared/Components/DeploymentStatusBreakdown/utils.tsx b/src/Shared/Components/DeploymentStatusBreakdown/utils.tsx index fcbb9583e..956c4e217 100644 --- a/src/Shared/Components/DeploymentStatusBreakdown/utils.tsx +++ b/src/Shared/Components/DeploymentStatusBreakdown/utils.tsx @@ -307,7 +307,11 @@ export const processDeploymentStatusDetailsData = ( if (hasDeploymentFailed) { const hasCurrentTimelineFailed = timelineStatusType === TIMELINE_STATUS.APP_HEALTH && - deploymentData.deploymentStatusBreakdown.KUBECTL_APPLY.icon === 'success' + deploymentData.deploymentStatusBreakdown[ + deploymentAppType === DeploymentAppTypes.FLUX + ? TIMELINE_STATUS.GIT_COMMIT + : TIMELINE_STATUS.KUBECTL_APPLY + ].icon === 'success' timelineData.displaySubText = hasCurrentTimelineFailed ? 'Failed' : '' timelineData.icon = hasCurrentTimelineFailed ? 'failed' : 'unreachable' From de1ba607a9e69f40162b0a5cf5f22791c8b532b7 Mon Sep 17 00:00:00 2001 From: Arun Jain Date: Sat, 14 Jun 2025 18:45:09 +0530 Subject: [PATCH 07/15] chore: version bump --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 199bcbebc..65019ca75 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.15.2-beta-2", + "version": "1.15.2-beta-4", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.15.2-beta-2", + "version": "1.15.2-beta-4", "hasInstallScript": true, "license": "ISC", "dependencies": { diff --git a/package.json b/package.json index 86a15188a..ee5695b6e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.15.2-beta-2", + "version": "1.15.2-beta-4", "description": "Supporting common component library", "type": "module", "main": "dist/index.js", From e80662bd3511420b49ec985a361c6fdfd7baf623 Mon Sep 17 00:00:00 2001 From: Arun Jain Date: Wed, 18 Jun 2025 17:28:00 +0530 Subject: [PATCH 08/15] feat: rename deployment app type gitops to argo --- src/Common/Types.ts | 2 +- .../Components/CICDHistory/DeploymentStatusBreakdown.tsx | 4 ++-- src/Shared/Components/CICDHistory/TriggerOutput.tsx | 2 +- src/Shared/Components/DeploymentStatusBreakdown/utils.tsx | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/Common/Types.ts b/src/Common/Types.ts index f089e60f2..6ff682050 100644 --- a/src/Common/Types.ts +++ b/src/Common/Types.ts @@ -710,7 +710,7 @@ export interface CommonNodeAttr extends Pick = ({ deploymentAppType={deploymentAppType} userApprovalMetadata={userApprovalMetadata} isGitops={ - deploymentAppType === DeploymentAppTypes.GITOPS || + deploymentAppType === DeploymentAppTypes.ARGO || deploymentAppType === DeploymentAppTypes.FLUX || deploymentAppType === DeploymentAppTypes.MANIFEST_DOWNLOAD || deploymentAppType === DeploymentAppTypes.MANIFEST_PUSH diff --git a/src/Shared/Components/DeploymentStatusBreakdown/utils.tsx b/src/Shared/Components/DeploymentStatusBreakdown/utils.tsx index 956c4e217..b2f6f9154 100644 --- a/src/Shared/Components/DeploymentStatusBreakdown/utils.tsx +++ b/src/Shared/Components/DeploymentStatusBreakdown/utils.tsx @@ -62,7 +62,7 @@ const getDefaultDeploymentStatusTimeline = ( ...commonProps, displayText: 'Push manifest to Git', }, - ...(deploymentAppType === DeploymentAppTypes.GITOPS + ...(deploymentAppType === DeploymentAppTypes.ARGO ? { [TIMELINE_STATUS.ARGOCD_SYNC]: { ...commonProps, From bbcb6c7b0151ce18dee6ff8f123018ac7e342d53 Mon Sep 17 00:00:00 2001 From: Arun Jain Date: Thu, 19 Jun 2025 15:29:04 +0530 Subject: [PATCH 09/15] chore: add feature flag --- src/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/index.ts b/src/index.ts index ad1a12381..e671e1bee 100644 --- a/src/index.ts +++ b/src/index.ts @@ -171,6 +171,7 @@ export interface customEnv { * @default false */ FEATURE_FLUX_DEPLOYMENTS_ENABLE?: boolean + FEATURE_LINK_EXTERNAL_FLUX_ENABLE?: boolean } declare global { interface Window { From 49dd5f001c94177714a017436941e0053e4fbe61 Mon Sep 17 00:00:00 2001 From: AbhishekA1509 Date: Thu, 26 Jun 2025 15:36:02 +0530 Subject: [PATCH 10/15] fix: add root margin of 1px and increase sentinel height by 1px to overcome decimal dimensions --- src/Shared/Hooks/useStickyEvent/constants.ts | 4 ++-- src/Shared/Hooks/useStickyEvent/utils.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/Shared/Hooks/useStickyEvent/constants.ts b/src/Shared/Hooks/useStickyEvent/constants.ts index 2e7292418..6a59ebed6 100644 --- a/src/Shared/Hooks/useStickyEvent/constants.ts +++ b/src/Shared/Hooks/useStickyEvent/constants.ts @@ -14,6 +14,6 @@ * limitations under the License. */ -export const FALLBACK_SENTINEL_HEIGHT = '1px' +export const FALLBACK_SENTINEL_HEIGHT = '2px' export const OBSERVER_THRESHOLD = 1 -export const OBSERVER_ROOT_MARGIN = '0px' +export const OBSERVER_ROOT_MARGIN = '1px' diff --git a/src/Shared/Hooks/useStickyEvent/utils.ts b/src/Shared/Hooks/useStickyEvent/utils.ts index 55a742a73..255e20e61 100644 --- a/src/Shared/Hooks/useStickyEvent/utils.ts +++ b/src/Shared/Hooks/useStickyEvent/utils.ts @@ -30,7 +30,7 @@ export const getHeightForStickyElementTopOffset = ({ const doesTopOffsetContainCalc = calcRegex.test(topValue) if (doesTopOffsetContainCalc) { - return topValue.replace(calcRegex, (match) => `calc(${match} + 1px)`) + return topValue.replace(calcRegex, (match) => `calc(${match} + 2px)`) } return topValue.replace(/\d+(\.\d+)?/g, (match) => { @@ -40,6 +40,6 @@ export const getHeightForStickyElementTopOffset = ({ return FALLBACK_SENTINEL_HEIGHT } - return `${nMatch + 1}` + return `${nMatch + 2}` }) } From 4fa194cbec8448b204c84178aa6d3b03b7391f34 Mon Sep 17 00:00:00 2001 From: AbhishekA1509 Date: Thu, 26 Jun 2025 15:44:32 +0530 Subject: [PATCH 11/15] chore(version): bump version to 1.16.1 in package.json and package-lock.json --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 06ebf6472..58a7f0079 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.16.0", + "version": "1.16.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.16.0", + "version": "1.16.1", "hasInstallScript": true, "license": "ISC", "dependencies": { diff --git a/package.json b/package.json index ffa5ad287..cc083b38c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.16.0", + "version": "1.16.1", "description": "Supporting common component library", "type": "module", "main": "dist/index.js", From 8d581fff0e95141b102a76f9a404c0fbe575f228 Mon Sep 17 00:00:00 2001 From: AbhishekA1509 Date: Thu, 26 Jun 2025 15:48:54 +0530 Subject: [PATCH 12/15] refactor: replace hardcoded sentinel height with constant for better maintainability --- src/Shared/Hooks/useStickyEvent/constants.ts | 3 ++- src/Shared/Hooks/useStickyEvent/utils.ts | 6 +++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/Shared/Hooks/useStickyEvent/constants.ts b/src/Shared/Hooks/useStickyEvent/constants.ts index 6a59ebed6..edc6822ee 100644 --- a/src/Shared/Hooks/useStickyEvent/constants.ts +++ b/src/Shared/Hooks/useStickyEvent/constants.ts @@ -14,6 +14,7 @@ * limitations under the License. */ -export const FALLBACK_SENTINEL_HEIGHT = '2px' +export const SENTINEL_HEIGHT_BUFFER = 2 +export const FALLBACK_SENTINEL_HEIGHT = `${SENTINEL_HEIGHT_BUFFER}px` export const OBSERVER_THRESHOLD = 1 export const OBSERVER_ROOT_MARGIN = '1px' diff --git a/src/Shared/Hooks/useStickyEvent/utils.ts b/src/Shared/Hooks/useStickyEvent/utils.ts index 255e20e61..48dcdd7f4 100644 --- a/src/Shared/Hooks/useStickyEvent/utils.ts +++ b/src/Shared/Hooks/useStickyEvent/utils.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -import { FALLBACK_SENTINEL_HEIGHT } from './constants' +import { FALLBACK_SENTINEL_HEIGHT, SENTINEL_HEIGHT_BUFFER } from './constants' import { UseStickyEventReturnType } from './types' export const getHeightForStickyElementTopOffset = ({ @@ -30,7 +30,7 @@ export const getHeightForStickyElementTopOffset = ({ const doesTopOffsetContainCalc = calcRegex.test(topValue) if (doesTopOffsetContainCalc) { - return topValue.replace(calcRegex, (match) => `calc(${match} + 2px)`) + return topValue.replace(calcRegex, (match) => `calc(${match} + ${SENTINEL_HEIGHT_BUFFER}px)`) } return topValue.replace(/\d+(\.\d+)?/g, (match) => { @@ -40,6 +40,6 @@ export const getHeightForStickyElementTopOffset = ({ return FALLBACK_SENTINEL_HEIGHT } - return `${nMatch + 2}` + return `${nMatch + SENTINEL_HEIGHT_BUFFER}` }) } From 5fd6de9c6bd45df14e3e16f875f8cbe55ab824cf Mon Sep 17 00:00:00 2001 From: Arun Jain Date: Tue, 1 Jul 2025 19:01:23 +0530 Subject: [PATCH 13/15] chore: update tippy for status --- src/Shared/Components/StatusComponent/AppStatus.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Shared/Components/StatusComponent/AppStatus.tsx b/src/Shared/Components/StatusComponent/AppStatus.tsx index e20704efc..ee366dd84 100644 --- a/src/Shared/Components/StatusComponent/AppStatus.tsx +++ b/src/Shared/Components/StatusComponent/AppStatus.tsx @@ -45,7 +45,7 @@ export const AppStatus = ({ tooltipProps={{ alwaysShowTippyOnHover: true, placement: 'top', - content: 'To fetch app status for Helm based deployments open the app detail page', + content: 'To view app status open the app detail page', }} color="N600" /> From a8e505582fdf3685852ceeb0bf82d88c30b20ba8 Mon Sep 17 00:00:00 2001 From: Arun Jain Date: Wed, 2 Jul 2025 12:02:19 +0530 Subject: [PATCH 14/15] chore: add fallback for deployment app type --- src/Shared/Components/CICDHistory/DeploymentDetailSteps.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Shared/Components/CICDHistory/DeploymentDetailSteps.tsx b/src/Shared/Components/CICDHistory/DeploymentDetailSteps.tsx index 592a46804..860bbf5d3 100644 --- a/src/Shared/Components/CICDHistory/DeploymentDetailSteps.tsx +++ b/src/Shared/Components/CICDHistory/DeploymentDetailSteps.tsx @@ -61,7 +61,7 @@ const DeploymentDetailSteps = ({ const processedData = isVirtualEnv.current && processVirtualEnvironmentDeploymentData ? processVirtualEnvironmentDeploymentData() - : processDeploymentStatusDetailsData(appDetails?.deploymentAppType) + : processDeploymentStatusDetailsData(deploymentAppType ?? appDetails?.deploymentAppType) const [deploymentStatusDetailsBreakdownData, setDeploymentStatusDetailsBreakdownData] = useState(processedData) From 9f1e41269ade6925f4d56f0d582b68687a51f08b Mon Sep 17 00:00:00 2001 From: Arun Jain Date: Wed, 2 Jul 2025 12:32:55 +0530 Subject: [PATCH 15/15] chore: make prop for deployment app type required in status breakdown component --- src/Shared/Components/AppStatusModal/AppStatusBody.tsx | 1 + .../Components/CICDHistory/DeploymentStatusBreakdown.tsx | 3 +-- src/Shared/Components/CICDHistory/types.tsx | 2 +- src/Shared/Components/DeploymentStatusBreakdown/utils.tsx | 6 +++++- 4 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/Shared/Components/AppStatusModal/AppStatusBody.tsx b/src/Shared/Components/AppStatusModal/AppStatusBody.tsx index 2acd08a47..d0158a531 100644 --- a/src/Shared/Components/AppStatusModal/AppStatusBody.tsx +++ b/src/Shared/Components/AppStatusModal/AppStatusBody.tsx @@ -192,6 +192,7 @@ export const AppStatusBody = ({ isVirtualEnvironment={appDetails.isVirtualEnvironment} appDetails={appDetails} rootClassName="pb-20" + deploymentAppType={appDetails.deploymentAppType} /> )} diff --git a/src/Shared/Components/CICDHistory/DeploymentStatusBreakdown.tsx b/src/Shared/Components/CICDHistory/DeploymentStatusBreakdown.tsx index aa8cd9bd9..8790ae1ce 100644 --- a/src/Shared/Components/CICDHistory/DeploymentStatusBreakdown.tsx +++ b/src/Shared/Components/CICDHistory/DeploymentStatusBreakdown.tsx @@ -60,8 +60,7 @@ const DeploymentStatusDetailBreakdown = ({ {( [ TIMELINE_STATUS.GIT_COMMIT, - ...(appDetails.deploymentAppType === DeploymentAppTypes.ARGO || - deploymentAppType === DeploymentAppTypes.ARGO + ...(deploymentAppType === DeploymentAppTypes.ARGO ? [TIMELINE_STATUS.ARGOCD_SYNC, TIMELINE_STATUS.KUBECTL_APPLY] : []), ] as DeploymentStatusDetailRowType['type'][] diff --git a/src/Shared/Components/CICDHistory/types.tsx b/src/Shared/Components/CICDHistory/types.tsx index 7b46bfeba..4c63f94e8 100644 --- a/src/Shared/Components/CICDHistory/types.tsx +++ b/src/Shared/Components/CICDHistory/types.tsx @@ -522,7 +522,7 @@ export interface DeploymentStatusDetailBreakdownType { */ appDetails: AppDetails | null rootClassName?: string - deploymentAppType?: DeploymentAppTypes + deploymentAppType: DeploymentAppTypes } export interface DeploymentStatusDetailRowType extends Pick { diff --git a/src/Shared/Components/DeploymentStatusBreakdown/utils.tsx b/src/Shared/Components/DeploymentStatusBreakdown/utils.tsx index b2f6f9154..7815dae4f 100644 --- a/src/Shared/Components/DeploymentStatusBreakdown/utils.tsx +++ b/src/Shared/Components/DeploymentStatusBreakdown/utils.tsx @@ -230,13 +230,17 @@ const processKubeCTLApply = ( * This function processes the deployment status details data and returns a breakdown of the deployment status. * Cases it handles: * 1. If timelines are not present, say the case of helm deployment, we will parse the wfrStatus and put the status and basic deployment info [triggeredBy, deploymentStartedOn, deploymentFinishedOn] into the breakdown data and return it. - * 2. In case of gitops: + * 2. In case of argo_cd: * - There are five timelines in chronological order: * - Deployment Initiated * - Git commit * - ArgoCD Sync * - Kubectl Apply * - App Health + * In case of flux_cd + * - Deployment Initiated + * - Git commit + * - App Health * - Basic flow is we traverse the timelines in order, if find the last status for that specific timeline from response by traversing the timelines in reverse order. * - If element is found, we will parse the status and set the icon, display text, time, etc. for that timeline and set the next timeline to inprogress. * - If element is not found, we will parse on basis of factors like: