How to create ArgoCD UI extensions

[mowies]

Details

Research how to create an ArgoCD UI extension and come up with a PoC to show it off. Things that could be cool to show:

• graph for KeptnMetrics
• enhance Argo Apps status with KeptnAnalysis

Use cases:

• Argo CD: observability of deployments, UI extensions that show graphs for KeptnMetrics
• Argo Rollouts: integrate Keptn analyses into Argo experiments
• Argo Workflows: provide observability

DoD

• PoC implemented
• strategy/plan on how to integrate keptn using a UI extension created

Notes

• https://argo-cd.readthedocs.io/en/release-2.4/developer-guide/ui-extensions/
• check how argo rollouts manipulates the UI

[odubajDT]

Research findings

Creating a ArgoCD UI extension is possible using the Argo-extension-installer image. The current image (v0.0.1) has a bug in the installation script used as part of the image.

As described in the documentation, implementing an extension requires a React application, which is installed via initContainer into argocd-server Deployment.

Steps to deploy UI extension to Argo

The PoC is a small hello-world React application, which shows how an Argo UI extension can be implemented and what needs to be done in order to add the UI application into Argo

1. Creating React application using one of the extension possibilities according to the documentation. A PoC of an application is available here. In PoC the Resource Tab Extension was used.

With this approach we are able to build any UI extension for Keptn functionality (graph for KeptnMetrics or Argo Apps status).

2. We need to adapt the argocd-server Deployment and introduce the following snippet into the manifest

initContainers:
  - name: extension-metrics
     image: quay.io/argoprojlabs/argocd-extension-installer:v0.0.1
     env:
        - name: EXTENSION_URL
           value: https://github.com/odubajDT/my-app/raw/main/extension.tar.gz
     volumeMounts:
        - name: extensions
           mountPath: /tmp/extensions/
     securityContext:
        runAsUser: 1000
        allowPrivilegeEscalation: false

The extension tarball (extension.tar.gz available here) containes built React application. The steps for building the application are available in the readme.

Final thoughts

This research defines mostly how the UI extension of Argo can be implemented. What should be implemented is part of team discussions.