Extend ArgoCD UI

Introduction

In this small tutorial we will see how you can easily create and deploy an extension to add additional features / information to a resource in the ArgoCD UI

Use case

In my work, I worked a lot on the ApplicationSet. This feature allows you to deploy several applications of the same type based on generators. To understand better what is an applicationset, I invite you to take a look to my article ArgoCD at scale with ApplicationSet & Go Template.

To upgrade the version but also the template, we decided to go to an App of ApplicationSet pattern (based on the App of App Pattern).

• We have one App which is doing discovery for created / updated / deleted ApplicationSet.

• ApplicationSets are using a Git file generator. It points to Git repository folders containing yaml configuration files. We are using Go template for advanced templating feature

The problem

When you manage 100s of applications you don’t have an efficient/elegant way to list all applications for an Application Set and get their associated status. You may also want to perform specific actions…

The solution

ArgoCD UI has been developped using React. The UI allows you to add one more tab to the resource panel in order to add custom features for a provided resource. The link

Extension deployment is easier with the Extension controller. You simply need to host extension on a git repository/web url and use a custom resource ArgoCDExtension to point the code. The controller will then download the code and put it at the right location to be discovered by the UI.

apiVersion: argoproj.io/v1alpha1
kind: ArgoCDExtension
metadata:
  name: argocd-appset-ext
  labels:
    tab: "ApplicationSet"
    icon: "fa-files"
  finalizers:
    - extensions-finalizer.argocd.argoproj.io
spec:
  sources:
    - web:
        url: https://raw.githubusercontent.com/speedfl/argocd-apps-of-applicationset/master/ui/dist/extension.tar

The result

You can take a look to my git repository, or even better you can make a try: https://github.com/speedfl/argocd-applicationset-extension

Note: You may need to add resource customization for health assessment: https://argo-cd.readthedocs.io/en/stable/operator-manual/upgrading/1.7-1.8/#health-assessment-of-argoprojioapplication-crd-has-been-removed

Conclusion

With the ArgoCD extension you can add homemade extensions to fit your business cases. Here are some examples:

• Add a ticket number (ie: JIRA) and the history of approval for better tracking
• Display / Manage homemade custom resources
• Add extra links
• Add monitoring

ArgoCD is community driven, I hope, one day, to see a list of extensions for various common use cases.