AL
Alex Larentis

Argo Deployment Card - Copy this React, Tailwind Component to your project

Generate a dashboard card for an Argo CD Application. The card should display the following fields clearly: • Application Name: the name of the Argo CD application. • Namespace: the Kubernetes namespace where the app is deployed. • Sync Status: (Synced, OutOfSync, Unknown) with a visual badge (green/yellow/red). • Health Status: (Healthy, Degraded, Progressing, Missing, etc.) with a status icon. • Last Sync Time: timestamp of the most recent sync operation, human-readable format. • Synced By: user or automation that triggered the last sync. • Git Revision: short Git commit SHA with a clickable link to the repository commit. • Sync Policy: (Manual or Auto) to show whether auto-sync is enabled. • Repository URL and Path: the Git repo and directory path managing the app. The card should prioritize Sync Status and Health Status visually, making it easy to spot out-of-sync or degraded apps. Use a clean, modern UI style suitable for a platform dashboard. Include optional hover tooltips for fields like Git Revision and Repository URL.

Prompt
Component Preview

About

ArgoDeploymentCard - A sleek card displaying ArgoCD and deployment details, built with React and Tailwind. Perfect for streamlined De. Free code available!

Share

Last updated 1 month ago