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.
Architecture
ArgoCD charge automatiquement les fichiers extension*.js depuis /tmp/extensions/<name>/ au démarrage du server.
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é :
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
Anatomie du code
Le JavaScript minifié contient une application React complète. Voici les composants principaux :
Enregistrement de l’extension
// Ajoute un onglet "ApplicationSets" dans la navbar
window.extensionsAPI.registerSystemLevelExtension(
AppSetListComponent, // Composant React
"ApplicationSets", // Label dans la nav
"/applicationsets", // Route URL
"fa-layer-group" // Icône FontAwesome
);
// Ajoute un panneau dans la vue détail de chaque ApplicationSet
window.extensionsAPI.registerResourceExtension(
"argoproj.io", // API group
"ApplicationSet", // Kind
"v1alpha1", // Version
{ component: DetailComponent }
);
Appels API ArgoCD
L’extension utilise l’API REST d’ArgoCD pour récupérer les données :
// Liste des ApplicationSets
fetch("/api/v1/applicationsets")
// Applications générées par un ApplicationSet
fetch("/api/v1/applicationsets/{name}")
.then(res => res.json())
.then(data => data.status.resources) // Liste des apps générées
// Sync d'une application
fetch("/api/v1/applications/{name}/sync", {
method: "POST",
body: JSON.stringify({ prune: true, dryRun: false })
})
Calcul des stats
Le code agrège les status de santé en temps réel :
const stats = applications.reduce((acc, app) => {
const health = app.status?.health?.status || "Unknown";
acc[health] = (acc[health] || 0) + 1;
acc.total += 1;
return acc;
}, { total: 0, Healthy: 0, Degraded: 0, Progressing: 0 });
Le refresh automatique toutes les 30 secondes garde les stats à jour sans recharger la page.
Dans les values Helm du chart argo/argo-cd :
server:
volumes:
- name: extension-applicationset
configMap:
name: argocd-extension-files
volumeMounts:
- name: extension-applicationset
mountPath: /tmp/extensions/applicationset
Vérification
# 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.