@wakastellar/ui 2.1.2 → 2.3.2

package/src/blocks/gitops-sync-status/index.tsx

@@ -0,0 +1,557 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { Badge } from "../../components/badge"
+import { Button } from "../../components/button"
+import { Card, CardContent, CardHeader, CardTitle } from "../../components/card"
+import { Progress } from "../../components/progress"
+import { ScrollArea } from "../../components/scroll-area"
+import {
+  GitBranch,
+  GitCommit,
+  RefreshCw,
+  CheckCircle2,
+  XCircle,
+  Clock,
+  AlertTriangle,
+  Loader2,
+  ArrowRight,
+  ExternalLink,
+  Eye,
+  Play,
+  Pause,
+  RotateCcw,
+  Folder,
+  FileCode,
+  Server,
+  Cloud,
+  Settings,
+  Activity,
+} from "lucide-react"
+
+export type SyncStatus = "synced" | "out_of_sync" | "syncing" | "failed" | "unknown" | "suspended"
+export type HealthStatus = "healthy" | "degraded" | "progressing" | "missing" | "unknown"
+export type ResourceKind = "Deployment" | "Service" | "ConfigMap" | "Secret" | "Ingress" | "PersistentVolumeClaim" | "CronJob" | "Job" | "StatefulSet" | "DaemonSet"
+
+export interface GitOpsResource {
+  kind: ResourceKind
+  name: string
+  namespace: string
+  syncStatus: SyncStatus
+  healthStatus: HealthStatus
+  message?: string
+  version?: string
+}
+
+export interface GitOpsApplication {
+  id: string
+  name: string
+  project: string
+  repo: {
+    url: string
+    branch: string
+    path: string
+  }
+  destination: {
+    server: string
+    namespace: string
+  }
+  syncStatus: SyncStatus
+  healthStatus: HealthStatus
+  lastSyncedAt?: Date
+  lastSyncedRevision?: string
+  targetRevision?: string
+  resources: GitOpsResource[]
+  message?: string
+  autoSync?: boolean
+}
+
+export interface GitOpsSyncStatusProps {
+  applications: GitOpsApplication[]
+  onSync?: (app: GitOpsApplication) => void
+  onRefresh?: () => void
+  onSuspend?: (app: GitOpsApplication) => void
+  onResume?: (app: GitOpsApplication) => void
+  onViewDetails?: (app: GitOpsApplication) => void
+  className?: string
+}
+
+const syncStatusConfig: Record<SyncStatus, { icon: React.ElementType; color: string; bgColor: string; label: string }> = {
+  synced: { icon: CheckCircle2, color: "text-green-500", bgColor: "bg-green-500", label: "Synced" },
+  out_of_sync: { icon: AlertTriangle, color: "text-yellow-500", bgColor: "bg-yellow-500", label: "Out of Sync" },
+  syncing: { icon: Loader2, color: "text-blue-500", bgColor: "bg-blue-500", label: "Syncing" },
+  failed: { icon: XCircle, color: "text-red-500", bgColor: "bg-red-500", label: "Failed" },
+  unknown: { icon: Clock, color: "text-gray-500", bgColor: "bg-gray-500", label: "Unknown" },
+  suspended: { icon: Pause, color: "text-orange-500", bgColor: "bg-orange-500", label: "Suspended" },
+}
+
+const healthStatusConfig: Record<HealthStatus, { color: string; bgColor: string; label: string }> = {
+  healthy: { color: "text-green-500", bgColor: "bg-green-500", label: "Healthy" },
+  degraded: { color: "text-red-500", bgColor: "bg-red-500", label: "Degraded" },
+  progressing: { color: "text-blue-500", bgColor: "bg-blue-500", label: "Progressing" },
+  missing: { color: "text-yellow-500", bgColor: "bg-yellow-500", label: "Missing" },
+  unknown: { color: "text-gray-500", bgColor: "bg-gray-500", label: "Unknown" },
+}
+
+function formatTimeAgo(date: Date): string {
+  const seconds = Math.floor((Date.now() - date.getTime()) / 1000)
+  if (seconds < 60) return `${seconds}s ago`
+  const minutes = Math.floor(seconds / 60)
+  if (minutes < 60) return `${minutes}m ago`
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) return `${hours}h ago`
+  const days = Math.floor(hours / 24)
+  return `${days}d ago`
+}
+
+function truncateCommit(sha: string): string {
+  return sha.slice(0, 7)
+}
+
+function SyncStatusBadge({ status }: { status: SyncStatus }) {
+  const config = syncStatusConfig[status]
+  const Icon = config.icon
+
+  return (
+    <Badge variant="outline" className={cn("gap-1", config.color)}>
+      <Icon className={cn("h-3 w-3", status === "syncing" && "animate-spin")} />
+      {config.label}
+    </Badge>
+  )
+}
+
+function HealthStatusIndicator({ status }: { status: HealthStatus }) {
+  const config = healthStatusConfig[status]
+
+  return (
+    <div className="flex items-center gap-1.5">
+      <div className={cn("w-2 h-2 rounded-full", config.bgColor)} />
+      <span className={cn("text-sm", config.color)}>{config.label}</span>
+    </div>
+  )
+}
+
+function ApplicationCard({
+  app,
+  onSync,
+  onSuspend,
+  onResume,
+  onViewDetails,
+}: {
+  app: GitOpsApplication
+  onSync?: () => void
+  onSuspend?: () => void
+  onResume?: () => void
+  onViewDetails?: () => void
+}) {
+  const syncConf = syncStatusConfig[app.syncStatus]
+  const healthConf = healthStatusConfig[app.healthStatus]
+  const SyncIcon = syncConf.icon
+
+  const resourceStats = React.useMemo(() => {
+    const synced = app.resources.filter((r) => r.syncStatus === "synced").length
+    const healthy = app.resources.filter((r) => r.healthStatus === "healthy").length
+    return { synced, healthy, total: app.resources.length }
+  }, [app.resources])
+
+  return (
+    <Card className={cn(
+      app.syncStatus === "failed" && "border-red-500/50",
+      app.syncStatus === "out_of_sync" && "border-yellow-500/30",
+      app.healthStatus === "degraded" && "border-red-500/30"
+    )}>
+      <CardContent className="p-4">
+        <div className="flex items-start gap-4">
+          {/* Status indicator */}
+          <div className={cn(
+            "w-12 h-12 rounded-lg flex items-center justify-center shrink-0",
+            `${syncConf.bgColor}/10`
+          )}>
+            <SyncIcon className={cn(
+              "h-6 w-6",
+              syncConf.color,
+              app.syncStatus === "syncing" && "animate-spin"
+            )} />
+          </div>
+
+          {/* Main info */}
+          <div className="flex-1 min-w-0 space-y-3">
+            {/* Header */}
+            <div className="flex items-start justify-between gap-2">
+              <div>
+                <div className="flex items-center gap-2">
+                  <h3 className="font-semibold">{app.name}</h3>
+                  <Badge variant="secondary" className="text-xs">
+                    {app.project}
+                  </Badge>
+                </div>
+                <div className="flex items-center gap-2 mt-1 text-sm text-muted-foreground">
+                  <Server className="h-3 w-3" />
+                  <span>{app.destination.namespace}</span>
+                  <span>@</span>
+                  <span className="truncate max-w-[200px]">{app.destination.server}</span>
+                </div>
+              </div>
+
+              <div className="flex items-center gap-2 shrink-0">
+                <SyncStatusBadge status={app.syncStatus} />
+                <HealthStatusIndicator status={app.healthStatus} />
+              </div>
+            </div>
+
+            {/* Git info */}
+            <div className="flex items-center gap-4 text-sm">
+              <div className="flex items-center gap-1.5 text-muted-foreground">
+                <GitBranch className="h-4 w-4" />
+                <span>{app.repo.branch}</span>
+              </div>
+              <div className="flex items-center gap-1.5 text-muted-foreground">
+                <Folder className="h-4 w-4" />
+                <span className="truncate max-w-[150px]">{app.repo.path}</span>
+              </div>
+              {app.lastSyncedRevision && (
+                <div className="flex items-center gap-1.5">
+                  <GitCommit className="h-4 w-4 text-muted-foreground" />
+                  <code className="text-xs bg-muted px-1.5 py-0.5 rounded">
+                    {truncateCommit(app.lastSyncedRevision)}
+                  </code>
+                  {app.targetRevision && app.lastSyncedRevision !== app.targetRevision && (
+                    <>
+                      <ArrowRight className="h-3 w-3 text-muted-foreground" />
+                      <code className="text-xs bg-yellow-500/20 text-yellow-600 px-1.5 py-0.5 rounded">
+                        {truncateCommit(app.targetRevision)}
+                      </code>
+                    </>
+                  )}
+                </div>
+              )}
+            </div>
+
+            {/* Resources summary */}
+            <div className="flex items-center gap-4">
+              <div className="flex-1">
+                <div className="flex items-center justify-between text-xs mb-1">
+                  <span className="text-muted-foreground">Resources Synced</span>
+                  <span>{resourceStats.synced}/{resourceStats.total}</span>
+                </div>
+                <Progress
+                  value={(resourceStats.synced / resourceStats.total) * 100}
+                  className="h-1.5"
+                />
+              </div>
+              <div className="flex-1">
+                <div className="flex items-center justify-between text-xs mb-1">
+                  <span className="text-muted-foreground">Resources Healthy</span>
+                  <span>{resourceStats.healthy}/{resourceStats.total}</span>
+                </div>
+                <Progress
+                  value={(resourceStats.healthy / resourceStats.total) * 100}
+                  className={cn(
+                    "h-1.5",
+                    resourceStats.healthy < resourceStats.total && "[&>div]:bg-yellow-500"
+                  )}
+                />
+              </div>
+            </div>
+
+            {/* Error message */}
+            {app.message && (app.syncStatus === "failed" || app.healthStatus === "degraded") && (
+              <div className="text-sm text-red-500 bg-red-500/10 p-2 rounded">
+                {app.message}
+              </div>
+            )}
+
+            {/* Footer */}
+            <div className="flex items-center justify-between pt-2 border-t">
+              <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                {app.lastSyncedAt && (
+                  <span className="flex items-center gap-1">
+                    <Clock className="h-3 w-3" />
+                    Last synced {formatTimeAgo(app.lastSyncedAt)}
+                  </span>
+                )}
+                {app.autoSync && (
+                  <Badge variant="outline" className="text-xs">
+                    <RefreshCw className="h-3 w-3 mr-1" />
+                    Auto-sync
+                  </Badge>
+                )}
+              </div>
+
+              <div className="flex items-center gap-1">
+                {onViewDetails && (
+                  <Button variant="ghost" size="sm" onClick={onViewDetails}>
+                    <Eye className="h-4 w-4 mr-1" />
+                    Details
+                  </Button>
+                )}
+                {app.syncStatus === "suspended" && onResume ? (
+                  <Button variant="outline" size="sm" onClick={onResume}>
+                    <Play className="h-4 w-4 mr-1" />
+                    Resume
+                  </Button>
+                ) : (
+                  <>
+                    {onSuspend && app.syncStatus !== "suspended" && (
+                      <Button variant="ghost" size="sm" onClick={onSuspend}>
+                        <Pause className="h-4 w-4" />
+                      </Button>
+                    )}
+                    {onSync && app.syncStatus !== "syncing" && (
+                      <Button variant="outline" size="sm" onClick={onSync}>
+                        <RefreshCw className="h-4 w-4 mr-1" />
+                        Sync
+                      </Button>
+                    )}
+                  </>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+function SyncStats({ applications }: { applications: GitOpsApplication[] }) {
+  const stats = React.useMemo(() => {
+    return {
+      total: applications.length,
+      synced: applications.filter((a) => a.syncStatus === "synced").length,
+      outOfSync: applications.filter((a) => a.syncStatus === "out_of_sync").length,
+      failed: applications.filter((a) => a.syncStatus === "failed").length,
+      healthy: applications.filter((a) => a.healthStatus === "healthy").length,
+      degraded: applications.filter((a) => a.healthStatus === "degraded").length,
+    }
+  }, [applications])
+
+  return (
+    <div className="grid grid-cols-6 gap-4">
+      <Card>
+        <CardContent className="p-4 text-center">
+          <div className="text-2xl font-bold">{stats.total}</div>
+          <div className="text-sm text-muted-foreground">Total Apps</div>
+        </CardContent>
+      </Card>
+      <Card>
+        <CardContent className="p-4 text-center">
+          <div className="text-2xl font-bold text-green-500">{stats.synced}</div>
+          <div className="text-sm text-muted-foreground">Synced</div>
+        </CardContent>
+      </Card>
+      <Card>
+        <CardContent className="p-4 text-center">
+          <div className="text-2xl font-bold text-yellow-500">{stats.outOfSync}</div>
+          <div className="text-sm text-muted-foreground">Out of Sync</div>
+        </CardContent>
+      </Card>
+      <Card>
+        <CardContent className="p-4 text-center">
+          <div className="text-2xl font-bold text-red-500">{stats.failed}</div>
+          <div className="text-sm text-muted-foreground">Failed</div>
+        </CardContent>
+      </Card>
+      <Card>
+        <CardContent className="p-4 text-center">
+          <div className="text-2xl font-bold text-green-500">{stats.healthy}</div>
+          <div className="text-sm text-muted-foreground">Healthy</div>
+        </CardContent>
+      </Card>
+      <Card>
+        <CardContent className="p-4 text-center">
+          <div className="text-2xl font-bold text-red-500">{stats.degraded}</div>
+          <div className="text-sm text-muted-foreground">Degraded</div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+
+export function GitOpsSyncStatus({
+  applications,
+  onSync,
+  onRefresh,
+  onSuspend,
+  onResume,
+  onViewDetails,
+  className,
+}: GitOpsSyncStatusProps) {
+  const [filter, setFilter] = React.useState<SyncStatus | "all">("all")
+
+  const filteredApps = React.useMemo(() => {
+    if (filter === "all") return applications
+    return applications.filter((app) => app.syncStatus === filter)
+  }, [applications, filter])
+
+  return (
+    <div className={cn("space-y-6", className)}>
+      {/* Header */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <GitBranch className="h-6 w-6" />
+              <div>
+                <CardTitle>GitOps Sync Status</CardTitle>
+                <p className="text-sm text-muted-foreground">
+                  Monitor application synchronization with Git
+                </p>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-2">
+              {(["all", "synced", "out_of_sync", "failed", "syncing"] as const).map((status) => (
+                <Button
+                  key={status}
+                  variant={filter === status ? "default" : "ghost"}
+                  size="sm"
+                  onClick={() => setFilter(status)}
+                >
+                  {status === "all" ? "All" : syncStatusConfig[status].label}
+                </Button>
+              ))}
+
+              {onRefresh && (
+                <Button variant="outline" onClick={onRefresh}>
+                  <RefreshCw className="h-4 w-4 mr-1" />
+                  Refresh All
+                </Button>
+              )}
+            </div>
+          </div>
+        </CardHeader>
+      </Card>
+
+      {/* Stats */}
+      <SyncStats applications={applications} />
+
+      {/* Applications */}
+      <ScrollArea className="h-[500px]">
+        <div className="space-y-4 pr-4">
+          {filteredApps.length === 0 ? (
+            <div className="flex flex-col items-center justify-center h-48 text-muted-foreground">
+              <Cloud className="h-12 w-12 mb-4" />
+              <p className="text-lg font-medium">No applications found</p>
+              <p className="text-sm">Adjust your filters or add new applications</p>
+            </div>
+          ) : (
+            filteredApps.map((app) => (
+              <ApplicationCard
+                key={app.id}
+                app={app}
+                onSync={onSync ? () => onSync(app) : undefined}
+                onSuspend={onSuspend ? () => onSuspend(app) : undefined}
+                onResume={onResume ? () => onResume(app) : undefined}
+                onViewDetails={onViewDetails ? () => onViewDetails(app) : undefined}
+              />
+            ))
+          )}
+        </div>
+      </ScrollArea>
+    </div>
+  )
+}
+
+// Default sample data
+export const defaultGitOpsApplications: GitOpsApplication[] = [
+  {
+    id: "1",
+    name: "api-gateway",
+    project: "production",
+    repo: {
+      url: "https://github.com/example/infra",
+      branch: "main",
+      path: "apps/api-gateway",
+    },
+    destination: {
+      server: "https://kubernetes.default.svc",
+      namespace: "production",
+    },
+    syncStatus: "synced",
+    healthStatus: "healthy",
+    lastSyncedAt: new Date(Date.now() - 5 * 60000),
+    lastSyncedRevision: "a1b2c3d4e5f6789",
+    autoSync: true,
+    resources: [
+      { kind: "Deployment", name: "api-gateway", namespace: "production", syncStatus: "synced", healthStatus: "healthy" },
+      { kind: "Service", name: "api-gateway", namespace: "production", syncStatus: "synced", healthStatus: "healthy" },
+      { kind: "ConfigMap", name: "api-gateway-config", namespace: "production", syncStatus: "synced", healthStatus: "healthy" },
+      { kind: "Ingress", name: "api-gateway", namespace: "production", syncStatus: "synced", healthStatus: "healthy" },
+    ],
+  },
+  {
+    id: "2",
+    name: "user-service",
+    project: "production",
+    repo: {
+      url: "https://github.com/example/infra",
+      branch: "main",
+      path: "apps/user-service",
+    },
+    destination: {
+      server: "https://kubernetes.default.svc",
+      namespace: "production",
+    },
+    syncStatus: "out_of_sync",
+    healthStatus: "healthy",
+    lastSyncedAt: new Date(Date.now() - 2 * 3600000),
+    lastSyncedRevision: "old123456789",
+    targetRevision: "new987654321",
+    autoSync: false,
+    resources: [
+      { kind: "Deployment", name: "user-service", namespace: "production", syncStatus: "out_of_sync", healthStatus: "healthy" },
+      { kind: "Service", name: "user-service", namespace: "production", syncStatus: "synced", healthStatus: "healthy" },
+      { kind: "Secret", name: "user-service-secrets", namespace: "production", syncStatus: "out_of_sync", healthStatus: "healthy" },
+    ],
+  },
+  {
+    id: "3",
+    name: "payment-service",
+    project: "production",
+    repo: {
+      url: "https://github.com/example/infra",
+      branch: "main",
+      path: "apps/payment-service",
+    },
+    destination: {
+      server: "https://kubernetes.default.svc",
+      namespace: "production",
+    },
+    syncStatus: "failed",
+    healthStatus: "degraded",
+    lastSyncedAt: new Date(Date.now() - 30 * 60000),
+    lastSyncedRevision: "abc123def456",
+    message: "Failed to apply resource: Deployment/payment-service: ImagePullBackOff",
+    autoSync: true,
+    resources: [
+      { kind: "Deployment", name: "payment-service", namespace: "production", syncStatus: "failed", healthStatus: "degraded", message: "ImagePullBackOff" },
+      { kind: "Service", name: "payment-service", namespace: "production", syncStatus: "synced", healthStatus: "healthy" },
+      { kind: "Secret", name: "payment-service-secrets", namespace: "production", syncStatus: "synced", healthStatus: "healthy" },
+    ],
+  },
+  {
+    id: "4",
+    name: "notification-service",
+    project: "staging",
+    repo: {
+      url: "https://github.com/example/infra",
+      branch: "develop",
+      path: "apps/notification-service",
+    },
+    destination: {
+      server: "https://staging.k8s.example.com",
+      namespace: "staging",
+    },
+    syncStatus: "syncing",
+    healthStatus: "progressing",
+    lastSyncedAt: new Date(Date.now() - 60000),
+    lastSyncedRevision: "syncing123",
+    autoSync: true,
+    resources: [
+      { kind: "Deployment", name: "notification-service", namespace: "staging", syncStatus: "syncing", healthStatus: "progressing" },
+      { kind: "Service", name: "notification-service", namespace: "staging", syncStatus: "synced", healthStatus: "healthy" },
+    ],
+  },
+]