feat: onboard argo apps in devtron #2428

AbhishekA1509 · 2025-01-30T15:42:59Z

Description

This PR includes changes to add functionality to onboard external argo apps in devtron application.

Fixes https://github.com/devtron-labs/sprint-tasks/issues/1616

Type of change

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
This change requires a documentation update

How Has This Been Tested?

QA

Checklist:

The title of the PR states what changed and the related issues number (used for the release note).
Does this PR require documentation updates?
I've updated documentation as required by this PR.
I have performed a self-review of my own code
I have commented my code, particularly in hard-to-understand areas

…onents

…ter component

…_EXTERNAL_APPS in SourceInfo, BuildCD, and CDPipeline components

…or, cdPipeline, cluster, and navigation components

…ction buttons

…nt in BuildCD and NavigationRoutes components

…anitization and code cleanup

…g, dynamic content rendering, and new styling for info bars

…e structure and UI adjustments

…ed handling for select inputs

…tip support for validation details

…g and tooltip structure

…tion

…itional logic handling

…route and improve async handling

…ation response updates

…improved error messaging, and icon color adjustment

…nd enhance edit functionality with button updates

…ce MigrateFromArgo with option value handling, and update ClusterForm and ClusterEnvironmentDrawer for local storage integration

…igrateToDevtronValidation components, and add common props for error display

…n MigrateToDevtronValidationFactory for improved user experience

src/components/cdPipeline/TriggerTypeRadio.tsx

…mponents

…messaging

…state

…ption generation

…store GitOps description

eshankvaish · 2025-02-06T06:00:17Z

src/css/themeUtils.scss

+.border-top {
+    &__primary {
+        border-top: 1px solid var(--border-primary);
+    }
+
+    &__secondary {
+        border-top: 1px solid var(--border-secondary);
+    }
+
+    &__white {
+        border-top: 1px solid var(--white);
+    }
+}


instead we should have border__primary--top and so on

eshankvaish · 2025-02-06T06:11:33Z

src/components/cluster/cluster.util.ts

@@ -91,3 +94,31 @@ export const createTaintsList = (list: any[], nodeLabel: string): Map<string, No
        return taints
    }, new Map<string, NodeTaintType[]>())
 }
+
+export const getServerURLFromLocalStorage = (fallbackServerUrl: string): string => {
+    if (typeof Storage !== 'undefined' && localStorage.getItem(ADD_CLUSTER_FORM_LOCAL_STORAGE_KEY)) {


Let's not use the Storage undefined check.

DRY the read from local storage into variable for both instances

eshankvaish · 2025-02-06T06:16:38Z

src/components/cluster/Cluster.tsx

+                    render={(props) => {
+                        const clusterName = props.match.params.clusterName
+                        const { isVirtualCluster, prometheus_url, id: clusterId } =
+                            this.state.clusters.find((cluster) => cluster.cluster_name === clusterName) || {}
+
+                        return (
+                            <ClusterEnvironmentDrawer
+                                reload={this.initialise}
+                                id={null}
+                                environmentName={null}
+                                clusterId={clusterId}
+                                namespace={null}
+                                prometheusEndpoint={prometheus_url}
+                                isProduction={null}
+                                description={null}
+                                hideClusterDrawer={this.handleCloseCreateEnvironmentForm}
+                                isVirtual={isVirtualCluster}
+                            />
+                        )
+                    }}


What if the clusterId is not available?

eshankvaish · 2025-02-06T06:27:33Z

src/components/cdPipeline/BuildCD.tsx

+                            <div className="flexbox px-12 py-8 dc__gap-8 bcb-1 br-4 mb-16">
+                                <ICInfo className="dc__no-shrink icon-dim-20 dc__no-shrink" />
+                                <span className="fs-13 fw-4 lh-20 cn-9 dc__word-break">
+                                    This deployment pipeline was linked to{' '}


Suggested change

This deployment pipeline was linked to{' '}

This deployment pipeline was linked to

eshankvaish · 2025-02-06T06:32:00Z

src/components/cdPipeline/MigrateToDevtron/MigrateFromArgo.tsx

+import { GENERIC_SECTION_ERROR_STATE_COMMON_PROPS } from './constants'
+import { generateArgoAppOption, generateClusterOption, sanitizeValidateMigrationSourceResponse } from './utils'
+
+const RESOURCES_TO_FETCH: ResourceKindType.cluster[] = [ResourceKindType.cluster]


Suggested change

const RESOURCES_TO_FETCH: ResourceKindType.cluster[] = [ResourceKindType.cluster]

const RESOURCES_TO_FETCH: [ResourceKindType.cluster] = [ResourceKindType.cluster]

eshankvaish · 2025-02-06T07:03:00Z

src/components/cdPipeline/MigrateToDevtron/MigrateFromArgo.tsx

+    const clusterOptions = (resourcesOptionsMap?.[ResourceKindType.cluster] || [])
+        .filter((cluster) => !cluster.isVirtual)
+        .map<SelectClusterOptionType>((cluster) => generateClusterOption(cluster.name, cluster.id))
+        .sort((a, b) => stringComparatorBySortOrder(a.label as string, b.label as string))


Suggested change

.sort((a, b) => stringComparatorBySortOrder(a.label as string, b.label as string))

vivek-devtron · 2025-02-06T11:55:06Z

src/components/gitOps/GitOpsConfiguration.tsx

@@ -1371,7 +1372,8 @@ class GitOpsConfiguration extends Component<GitOpsProps, GitOpsState> {
        const renderDirectoryManagementInGitOps = () => (
            <div className="flex column left w-100 dc__gap-16 pb-16">
                <div className="fw-6 cn-9 fs-14">Directory management in Git</div>
-                {window._env_.FEATURE_USER_DEFINED_GITOPS_REPO_ENABLE ? (
+                {window._env_.FEATURE_USER_DEFINED_GITOPS_REPO_ENABLE &&
+                this.props.isFeatureUserDefinedGitOpsEnabled ? (


Can we try to incorporate FEATURE_USER_DEFINED_GITOPS_REPO_ENABLE also from BE?

vivek-devtron · 2025-02-06T11:55:59Z

src/components/gitOps/GitOpsConfiguration.tsx

@@ -1480,4 +1482,11 @@ class GitOpsConfiguration extends Component<GitOpsProps, GitOpsState> {
    }
 }

-export default withRouter(GitOpsConfiguration)
+const withIsFeatureUserDefinedGitOpsEnabled = (Component: ComponentType) => (props) => {


instead of doing this we should have sent the value as prop from parent

…ctor navigation routes

sonarqubecloud · 2025-02-11T19:07:44Z

Quality Gate passed

Issues
5 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

AbhishekA1509 added 15 commits January 27, 2025 15:29

refactor: update Cluster component to use new routing and button comp…

7ed8386

…onents

feat: add create environment functionality and update routing in Clus…

5129d5f

…ter component

refactor: update release mode references from MIGRATE_HELM to MIGRATE…

12e9002

…_EXTERNAL_APPS in SourceInfo, BuildCD, and CDPipeline components

refactor: update imports and enhance type definitions in workflowEdit…

5ce39f5

…or, cdPipeline, cluster, and navigation components

feat: add structure for migrate from argo apps

753d984

feat: enhance migration validation with detailed error handling and a…

3871860

…ction buttons

feat: update GitOps feature flags handling and improve state manageme…

6571340

…nt in BuildCD and NavigationRoutes components

feat: improve validation handling in MigrateToDevtron with response s…

4a0df4e

…anitization and code cleanup

feat: enhance MigrateToDevtron validation with improved error handlin…

f21274f

…g, dynamic content rendering, and new styling for info bars

feat: enhance migration from Argo CD with improved validation respons…

f5fd93d

…e structure and UI adjustments

feat: enhance MigrateFromArgo form state with cluster name and improv…

e5bafc8

…ed handling for select inputs

feat: enhance MigrateFromArgo component with improved layout and tool…

5aae089

…tip support for validation details

feat: enhance MigrateToDevtron validation layout with improved spacin…

e55a198

…g and tooltip structure

feat: enhance validateMigrationSource function with response sanitiza…

d74b259

…tion

feat: refactor CDPipeline component for improved readability and cond…

49b630a

…itional logic handling

AbhishekA1509 requested review from vikramdevtron and vivek-devtron as code owners January 30, 2025 15:43

AbhishekA1509 self-assigned this Jan 30, 2025

AbhishekA1509 added 9 commits January 31, 2025 12:14

feat: update MigrateFromArgo component to use new validation request …

d0e3258

…route and improve async handling

feat: enhance MigrateFromArgo component with appId handling and valid…

4a3aabb

…ation response updates

feat: update MigrateToDevtron validation component with null checks, …

7f71afd

…improved error messaging, and icon color adjustment

feat: refactor Cluster component to streamline environment addition a…

cab602d

…nd enhance edit functionality with button updates

feat: add local storage keys for cluster and environment forms, enhan…

2c36f82

…ce MigrateFromArgo with option value handling, and update ClusterForm and ClusterEnvironmentDrawer for local storage integration

feat: integrate generic error state handling in MigrateFromArgo and M…

d23bc5d

…igrateToDevtronValidation components, and add common props for error display

feat: add target='_blank' to cluster and environment creation links i…

9b3c201

…n MigrateToDevtronValidationFactory for improved user experience

feat: set loading state before saving or updating CD pipeline data

198bfbf

Merge branch 'develop' into feat/onboard-argo-apps

5970a9b

github-actions bot added the PR:Issue-verification-failed PR:Issue-verification-failed label Feb 3, 2025

feat: remove ARGO_CD module name from GitOps configuration

26a962b

github-actions bot removed the PR:Issue-verification-failed PR:Issue-verification-failed label Feb 3, 2025

github-actions bot added the PR:Ready-to-Review PR:Ready-to-Review label Feb 3, 2025

AbhishekA1509 commented Feb 3, 2025

View reviewed changes

src/components/cdPipeline/TriggerTypeRadio.tsx Show resolved Hide resolved

AbhishekA1509 added 6 commits February 3, 2025 23:11

fix: self review

72270b3

feat: add migratedFrom property to deployment template and related co…

9c72f52

…mponents

feat: update validation logic for source materials and improve error …

21b34f7

…messaging

fix: separate migratedFrom from DT state and move to parent level of …

cc16063

…state

feat: enhance Argo app migration with abort controller and improved o…

6f5223d

…ption generation

feat: refactor validation factory to use new content row props and re…

4693dc8

…store GitOps description

eshankvaish requested changes Feb 6, 2025

View reviewed changes

vivek-devtron reviewed Feb 6, 2025

View reviewed changes

AbhishekA1509 added 7 commits February 6, 2025 20:54

Merge branch 'develop' into feat/onboard-argo-apps

f623bf3

fix: review comments

eccfcd7

refactor: rename and update cluster form close handlers for clarity

724c40a

Merge branch 'develop' into feat/onboard-argo-apps

fa02abd

chore: update devtron-fe-common-lib to version 1.6.13-beta-2

45bc0fd

chore: update devtron-fe-common-lib to version 1.6.13-beta-3 and refa…

7ac3ada

…ctor navigation routes

fix: ensure isAirGapped value is stored as a string in localStorage

034621b

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: onboard argo apps in devtron #2428

feat: onboard argo apps in devtron #2428

AbhishekA1509 commented Jan 30, 2025 •

edited

Loading

eshankvaish Feb 6, 2025

eshankvaish Feb 6, 2025

eshankvaish Feb 6, 2025

eshankvaish Feb 6, 2025

eshankvaish Feb 6, 2025

eshankvaish Feb 6, 2025

vivek-devtron Feb 6, 2025

vivek-devtron Feb 6, 2025

sonarqubecloud bot commented Feb 11, 2025

	This deployment pipeline was linked to{' '}
	This deployment pipeline was linked to

	const RESOURCES_TO_FETCH: ResourceKindType.cluster[] = [ResourceKindType.cluster]
	const RESOURCES_TO_FETCH: [ResourceKindType.cluster] = [ResourceKindType.cluster]

feat: onboard argo apps in devtron #2428

Are you sure you want to change the base?

feat: onboard argo apps in devtron #2428

Conversation

AbhishekA1509 commented Jan 30, 2025 • edited Loading

Description

Type of change

How Has This Been Tested?

Checklist:

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sonarqubecloud bot commented Feb 11, 2025

Quality Gate passed

AbhishekA1509 commented Jan 30, 2025 •

edited

Loading