Articles techniques et exemples de code

ArgoCD ApplicationSet Extension UI

Une extension UI pour voir et gérer les ApplicationSets ArgoCD.

31 December 2024
argocdkubernetesreact

Liste des ApplicationSets

L’interface ArgoCD affiche les ApplicationSets, mais sans vue d’ensemble. Pour savoir combien d’apps sont Healthy ou Degraded, il faut cliquer sur chaque Application une par une. Avec 50 apps générées par un ApplicationSet, ça devient vite pénible.

J’ai développé cette extension pour avoir un dashboard centralisé. En un coup d’oeil : stats temps réel, filtres par état, recherche, et un bouton Sync All pour tout synchroniser.

Vue détail avec statistiques

Architecture

ArgoCD charge automatiquement les fichiers extension*.js depuis /tmp/extensions/<name>/ au démarrage du server.

1
2
3
4
ArgoCD Server Pod
├── /tmp/extensions/
│   └── applicationset/
│       └── extension.js  ← ConfigMap montée ici

Le code React est minifié et injecté via ConfigMap. Pas de build pipeline complexe, pas de registry séparé. Un simple kubectl apply suffit.

Déploiement

La ConfigMap contient le JavaScript minifié :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
apiVersion: v1
kind: ConfigMap
metadata:
  name: argocd-extension-files
  namespace: kube-infra
  labels:
    app.kubernetes.io/part-of: argocd
data:
  extension.js: |
    var modernArgocdAppsetExtension=function(e){...}(React);    

📥 Télécharger la ConfigMap complète

Dans les values Helm du chart argo/argo-cd :

1
2
3
4
5
6
7
8
9
server:
  volumes:
    - name: extension-applicationset
      configMap:
        name: argocd-extension-files

  volumeMounts:
    - name: extension-applicationset
      mountPath: /tmp/extensions/applicationset

Vérification

1
2
3
4
5
6
7
8
# Le fichier est monté ?
kubectl exec -n kube-infra deploy/argocd-server -- ls /tmp/extensions/applicationset/

# Logs du server
kubectl logs -n kube-infra deploy/argocd-server | grep -i extension

# Forcer le rechargement
kubectl rollout restart deployment/argocd-server -n kube-infra

L’onglet ApplicationSets apparaît dans la navbar après redémarrage du pod.