Fetch and render cluster sync badges on environment page
## Release notes
Did you ever wondered about the status of your GitOps deployments? Until now, you likely used `kubectl` or another 3rd party tool to learn the status of your Flux deployments. From now on, you can use the GitLab environments UI to quickly check the status of your deployments.
The deployments rely on Flux `Kustomization` and `HelmRelease` resources to gather the status of the given environment and require a namespace to be configured on the environment. By default, the GitLab searched a `Kustomization`, followed by a `HelmRelease` with the name of the given project's slug. You can customize the name GitLab looks for in the environment's settings.
## Summary
This issue is to implement cluster sync status badges on the Kubernetes overview of the Environments page.
The design issue: https://gitlab.com/gitlab-org/gitlab/-/issues/375449 and
[Figma link](https://www.figma.com/file/FJXN7dpPs6mODf6M3SWxlK/Kubernetes-Landing-Page?node-id=3634%3A22557&t=m3NubfbGzohKmCUk-0).
## Example situation
[](https://mermaid.live/edit#pako:eNq9lMtqwzAQRX_FaB27kOxCswikpRC6SXbFm8GaNMJ61ZJL0zT_XtnyKyKmLSTVxtK9Zo4eM3MkmaJI5iTjYMyKwWsBIpWRG4-8_Ijuv-I4WmptvFbNvLZlFHP2Fsrr5TaUNsC4cUuvtyvv6QI1FBijfB-xY4qaq8Mld-j4uddX9VygtJE33aZCZ-qd5hShO0ul9-tbGQY8er0aOZN00VsDozRWCfaJiVWK58wmO3eVGU2YupMgcDHc-GkMNb0Oq3uQUdDsOqCzhAhgzeuEnHUTEyxTsvf2yMUY5TyZAkyfLv-BahP35qwu60PQk4u4QY5g8A8P1VdzwKlL9peH-ZFSdY-LlLbkrgUaPU5V9TeAkAkRWAhg1HXNOn5K7B4FpmTuphSKPCWprP4rNQWLD5RZVZD5DrjBCYHSqu1BZp3g_2pab6dqkC9K9Wusozw3zbr6nL4BzE3h-g)
We want to show a status for
- RailsApp
- Sidekiq
- KAS
## Proposal
1. Use the project slug as the expected name for the Flux resource. The Flux resource can be a `Kustomization` or a `HelmRelease`. `Kustomization` having a preference if both exist.
[](https://mermaid.live/edit#pako:eNp9kbFOwzAQhl_l5IWlfYEMoJJUAiEYKAslDKf4mhhiO7LPqiDJu-MkJSkM9WTfff4_2deKwkoSiTjU9lhU6BhestxAXPv23oNBTb7BgsAT9-v1dfdKvoPNCYGh8mQ72E6FzXCHK3IECA_Bs9XqG1lZMyZJwLENjbMfVDD4OpQ3Pcy5t2-7yh5H5M_tKw-ekYN_P3lmcXpuvKNaP1NN6OmSb8pIF222aM8i_kvT5bUTbyxXypSxLVZCk9OoZPzKdsBzEdM05SKJW4nuMxe56SMXGolMW6nYOpEcsPa0EhjY7r5MIRJ2gX6hTGHpUM9Ug2Zv7XKmMeRxGuA4x_4HqlSdHw)
1. Provide an input field under the environment settings to customize the name of the resource.
2. Document with examples and links to the Flux docs how Flux can be set up to wait for dependant resources.
<details><summary>Alternatives considered</summary>
### Alternatives: Environment slug
Use the environment slug as the expected name for the Flux resource. The Flux resource can be a `Kustomization` or a `HelmRelease`. `Kustomization` having a preference if both exist.
[](https://mermaid.live/edit#pako:eNqNkc9OhDAQxl9l0ouX3RfgoFlhE43Rg-vFFQ8TGKCRdkg7SBR4d_mzwuppe5rO_Pp9XzqtSjglFais5CYp0Am8RLGF4Rzbew8WDfkKEwJP0m-3190r-Q52JwTGzhN3sJ8bu_GNFOQIEB5qL2z0N4pmC42WYhxNksDZVJP91I6tISvgyzq_6WHxuH07FNxM2B-lKw9eUGr_fvJcQoTn7ndUmmcqCT1d6j3rhWuEaI1wJvc_QLj-wsxblkLbfBirjTLkDOp0-OJ2xGM1qBmKVTCUKbqPWMW2H7i6SlFon2php4IMS08bhbXw4csmKhBX0y8UacwdmoWq0B6Z1ztNIo_zYqf99j_73KZP)
As a Flux `HelmRelease` waits for its managed resources to be ready, including `Kustomizations` and `Kustomizations` can be configured to wait (using [health checks](https://fluxcd.io/flux/components/kustomize/kustomization/#health-checks)), we can pick a single Flux resource, and that resource can aggregate the status of its dependant resources.
### Alternatives: Flux labels
Flux sets the labels
- Kustomize sets `kustomize.toolkit.fluxcd.io/name`
- HelmRelease sets `helm.toolkit.fluxcd.io/name`
on the resources managed by Flux.
This approach is likely more complicated for the user. This can be seen if we look at the KAS service. The label value is set to `Apps` there. Having a environment called apps that points to the namespace of KAS is likely not what the user wants.
### Alternative 2: custom label
We could have a custom label, like `app.gitlab.com/environment: <environment name>`. While this is definitely a possibility, it requires extra work from the user to set up the integration.
</details>
## Task
Fetch the info needed within the project -> environment -> lastDeployment GraphQl query to show the sync badges according to the design.
issue