[FluxCD Integration] Proposal: a new UI/UX of GitOps Application

[chengleqi]

/kind feature

[chengleqi]

We can Add a Toggle component to indicate whether the repo is a Artifact repo.

We can choose this repo when we create GitOps Application If the Toggle Button is active.
We cannot choose this repo when we create GitOps Application if the Toggle Button is deactivate.

The isArtifactRepo property also can be changed after the repo has been created. And if the isArtifactRepo is toggled, it will affect the visibility of the GitOps Application.

[chengleqi]

this is a video.

1. The Repository Config SelectBox only show the Artifact Repositories.
2. When we choose Kustomization App Type we shouldn't see the HelmRepositories Type, it's different from the video cause I'm not familiar with front-end skills.

[chengleqi]

@lxm @LinuxSuRen

[lxm]

this is a video.

1. The Repository Config SelectBox only show the Artifact Repositories.
2. When we choose Kustomization App Type we shouldn't see the HelmRepositories Type, it's different from the video cause I'm not familiar with front-end skills.

Need to change to snapshots and give description to each pic.

[chengleqi]

Basic Info

I think we can split the current Deployment settings tab into two part such as app settings tab and deployment settings tab like this.

Because it may has too many settings for a Modals Component and it's more intuitive and clear for a flow of creating GitOps Application.

[chengleqi]

Helm Application Type

1. In the Application Settings tab we can choose Helm, Kustomization and Template (HelmTemplate for now) Application Type.
2. If we choose Helm Application Type the Repository Settings will show Artifact Repository that we created before including HelmRepository, GitRepository and S3 Bucket three Repository Type. And if we choose Kustomization Application Type it won't show the HelmRepository Type. If we choose Template Application Type it won't show any Repository Settings at all because the template itself already contain the Repository Information.
3. We can actually make this Text-Input Component into AutoComplete Component. Such as use regex like value* to detect the valueFiles that users may want to use.
4. When the user make this Toggle Component active, the helmtemplate-controller will save all the information that user already filled in including Repository Settings and Application Config Settings into a Template. If user want to reuse the configuration they can found the saved Template already in the Template Select Component.
5. Cause we want to use two different engine (ArgoCD | FluxCD) as the Backend there are some different thing between both engine we can put them in the Extra Settings Section.

---

In the Repository Settings Section, when we choose HelmRepository Type it will show the ChartName and ChartVersion for user to fill out. And it we choose GitRepository Type it will show the Revision and Path for user to fill out.

[chengleqi]

Kustomize Application Type

1. When we choose Kustomize Application Type, the Repository Settings should only show GitRepository and S3 Bucket Type except HelmRepository .
2. When we choose Kustomize Application Type, the Application Config Settings should show the config such as NamePrefix for Kustomize Application Type.

[chengleqi]

Template Type

When user choose Template Type to create, It can only choose the templates already existed. These templates including Repository information and Application Config and Created by activating the Template Toggle Component when user created Helm Application.

[chengleqi]

Deployment Settings

The final step of creating a GitOps Application is to choose the destination.

We can use the ability of Kubesphere Multi-Cluster Management to Reconcile the Remote Application in the host cluster.

And the Extra Settings also should be affected by the Engine we chosen.

[lxm]

need addition note
valuesFiles and values can both support multiple

[chengleqi]

need addition note valuesFiles and values can both support multiple

Sure. Did you mean ValuesFrom and Values in the Deployment additional Settings in the following pic?

[lxm]

need addition note valuesFiles and values can both support multiple

Sure. Did you mean ValuesFrom and Values in the Deployment additional Settings in the following pic?

right, I have a draft

[chengleqi]

Deployment Settings

User can set different ValuesFrom and Values for each destination (different cluster and different target namespace) with the same helmtemplate.

The devops.kubesphere.io/Application is called "Multi-Clusters Application" that relay on the underlying "Single-Cluster Application" helmreleases.helm.toolkit.fluxcd.io.

[lxm]

The POC of fluxcd integration has been completed here #743

UI/UC design should be promoted if possible.

@LinuxSuRen