@wakastellar/ui 2.3.4 → 2.4.0

package/src/blocks/gitops-sync-status/GitOpsSyncStatus.stories.tsx

@@ -0,0 +1,529 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import {
+  GitOpsSyncStatus,
+  defaultGitOpsApplications,
+} from './index'
+import type { GitOpsApplication, GitOpsResource, SyncStatus, HealthStatus, ResourceKind } from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof GitOpsSyncStatus> = {
+  title: 'Blocks/GitOpsSyncStatus',
+  component: GitOpsSyncStatus,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'A GitOps synchronization dashboard for monitoring ArgoCD/Flux-style applications with sync status, health status, Git revision tracking, and resource-level details.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof GitOpsSyncStatus>
+
+export const Default: Story = {
+  render: () => (
+    <div className="p-6">
+      <GitOpsSyncStatus
+        applications={defaultGitOpsApplications}
+        onSync={(app) => console.log('Sync:', app.name)}
+        onSuspend={(app) => console.log('Suspend:', app.name)}
+        onResume={(app) => console.log('Resume:', app.name)}
+        onViewDetails={(app) => console.log('View details:', app.name)}
+        onRefresh={() => console.log('Refresh all')}
+      />
+    </div>
+  ),
+}
+
+export const AllSynced: Story = {
+  render: () => {
+    const syncedApps: GitOpsApplication[] = [
+      {
+        id: '1',
+        name: 'frontend-app',
+        project: 'production',
+        repo: { url: 'https://github.com/org/apps', branch: 'main', path: 'apps/frontend' },
+        destination: { server: 'https://kubernetes.default.svc', namespace: 'production' },
+        syncStatus: 'synced',
+        healthStatus: 'healthy',
+        lastSyncedAt: new Date(Date.now() - 2 * 60000),
+        lastSyncedRevision: 'abc123def',
+        autoSync: true,
+        resources: [
+          { kind: 'Deployment', name: 'frontend', namespace: 'production', syncStatus: 'synced', healthStatus: 'healthy' },
+          { kind: 'Service', name: 'frontend', namespace: 'production', syncStatus: 'synced', healthStatus: 'healthy' },
+          { kind: 'Ingress', name: 'frontend', namespace: 'production', syncStatus: 'synced', healthStatus: 'healthy' },
+        ],
+      },
+      {
+        id: '2',
+        name: 'backend-api',
+        project: 'production',
+        repo: { url: 'https://github.com/org/apps', branch: 'main', path: 'apps/backend' },
+        destination: { server: 'https://kubernetes.default.svc', namespace: 'production' },
+        syncStatus: 'synced',
+        healthStatus: 'healthy',
+        lastSyncedAt: new Date(Date.now() - 5 * 60000),
+        lastSyncedRevision: 'def456ghi',
+        autoSync: true,
+        resources: [
+          { kind: 'Deployment', name: 'backend', namespace: 'production', syncStatus: 'synced', healthStatus: 'healthy' },
+          { kind: 'Service', name: 'backend', namespace: 'production', syncStatus: 'synced', healthStatus: 'healthy' },
+          { kind: 'ConfigMap', name: 'backend-config', namespace: 'production', syncStatus: 'synced', healthStatus: 'healthy' },
+          { kind: 'Secret', name: 'backend-secrets', namespace: 'production', syncStatus: 'synced', healthStatus: 'healthy' },
+        ],
+      },
+      {
+        id: '3',
+        name: 'database-operator',
+        project: 'system',
+        repo: { url: 'https://github.com/org/infra', branch: 'main', path: 'operators/database' },
+        destination: { server: 'https://kubernetes.default.svc', namespace: 'operators' },
+        syncStatus: 'synced',
+        healthStatus: 'healthy',
+        lastSyncedAt: new Date(Date.now() - 10 * 60000),
+        lastSyncedRevision: 'ghi789jkl',
+        autoSync: true,
+        resources: [
+          { kind: 'Deployment', name: 'db-operator', namespace: 'operators', syncStatus: 'synced', healthStatus: 'healthy' },
+          { kind: 'Service', name: 'db-operator', namespace: 'operators', syncStatus: 'synced', healthStatus: 'healthy' },
+        ],
+      },
+    ]
+
+    return (
+      <div className="p-6">
+        <GitOpsSyncStatus
+          applications={syncedApps}
+          onSync={(app) => console.log('Sync:', app.name)}
+          onRefresh={() => console.log('Refresh all')}
+        />
+      </div>
+    )
+  },
+}
+
+export const WithFailedSync: Story = {
+  render: () => {
+    const failedApps: GitOpsApplication[] = [
+      {
+        id: '1',
+        name: 'broken-deployment',
+        project: 'production',
+        repo: { url: 'https://github.com/org/apps', branch: 'main', path: 'apps/broken' },
+        destination: { server: 'https://kubernetes.default.svc', namespace: 'production' },
+        syncStatus: 'failed',
+        healthStatus: 'degraded',
+        lastSyncedAt: new Date(Date.now() - 15 * 60000),
+        lastSyncedRevision: 'broken123',
+        message: 'ComparisonError: failed to load resource: Secret not found: missing-secret',
+        autoSync: false,
+        resources: [
+          { kind: 'Deployment', name: 'broken-app', namespace: 'production', syncStatus: 'failed', healthStatus: 'degraded', message: 'ImagePullBackOff' },
+          { kind: 'Service', name: 'broken-app', namespace: 'production', syncStatus: 'synced', healthStatus: 'healthy' },
+          { kind: 'Secret', name: 'missing-secret', namespace: 'production', syncStatus: 'failed', healthStatus: 'missing', message: 'Secret not found' },
+        ],
+      },
+      ...defaultGitOpsApplications,
+    ]
+
+    return (
+      <div className="p-6">
+        <GitOpsSyncStatus
+          applications={failedApps}
+          onSync={(app) => console.log('Sync:', app.name)}
+          onViewDetails={(app) => console.log('View details:', app.name)}
+          onRefresh={() => console.log('Refresh all')}
+        />
+      </div>
+    )
+  },
+}
+
+export const OutOfSync: Story = {
+  render: () => {
+    const outOfSyncApps: GitOpsApplication[] = [
+      {
+        id: '1',
+        name: 'pending-update-1',
+        project: 'production',
+        repo: { url: 'https://github.com/org/apps', branch: 'main', path: 'apps/service-a' },
+        destination: { server: 'https://kubernetes.default.svc', namespace: 'production' },
+        syncStatus: 'out_of_sync',
+        healthStatus: 'healthy',
+        lastSyncedAt: new Date(Date.now() - 2 * 3600000),
+        lastSyncedRevision: 'old123456',
+        targetRevision: 'new789abc',
+        autoSync: false,
+        resources: [
+          { kind: 'Deployment', name: 'service-a', namespace: 'production', syncStatus: 'out_of_sync', healthStatus: 'healthy', version: 'v1.2.0 -> v1.3.0' },
+          { kind: 'ConfigMap', name: 'service-a-config', namespace: 'production', syncStatus: 'out_of_sync', healthStatus: 'healthy' },
+          { kind: 'Service', name: 'service-a', namespace: 'production', syncStatus: 'synced', healthStatus: 'healthy' },
+        ],
+      },
+      {
+        id: '2',
+        name: 'pending-update-2',
+        project: 'production',
+        repo: { url: 'https://github.com/org/apps', branch: 'main', path: 'apps/service-b' },
+        destination: { server: 'https://kubernetes.default.svc', namespace: 'production' },
+        syncStatus: 'out_of_sync',
+        healthStatus: 'healthy',
+        lastSyncedAt: new Date(Date.now() - 4 * 3600000),
+        lastSyncedRevision: 'older1234',
+        targetRevision: 'newer5678',
+        autoSync: false,
+        resources: [
+          { kind: 'Deployment', name: 'service-b', namespace: 'production', syncStatus: 'out_of_sync', healthStatus: 'healthy' },
+          { kind: 'Secret', name: 'service-b-secrets', namespace: 'production', syncStatus: 'out_of_sync', healthStatus: 'healthy' },
+        ],
+      },
+    ]
+
+    return (
+      <div className="p-6">
+        <GitOpsSyncStatus
+          applications={outOfSyncApps}
+          onSync={(app) => console.log('Sync:', app.name)}
+          onViewDetails={(app) => console.log('View details:', app.name)}
+          onRefresh={() => console.log('Refresh all')}
+        />
+      </div>
+    )
+  },
+}
+
+export const ActiveSyncing: Story = {
+  render: () => {
+    const syncingApps: GitOpsApplication[] = [
+      {
+        id: '1',
+        name: 'deploying-service',
+        project: 'production',
+        repo: { url: 'https://github.com/org/apps', branch: 'main', path: 'apps/deploying' },
+        destination: { server: 'https://kubernetes.default.svc', namespace: 'production' },
+        syncStatus: 'syncing',
+        healthStatus: 'progressing',
+        lastSyncedAt: new Date(Date.now() - 30000),
+        lastSyncedRevision: 'syncing123',
+        autoSync: true,
+        resources: [
+          { kind: 'Deployment', name: 'deploying-app', namespace: 'production', syncStatus: 'syncing', healthStatus: 'progressing' },
+          { kind: 'Service', name: 'deploying-app', namespace: 'production', syncStatus: 'synced', healthStatus: 'healthy' },
+        ],
+      },
+      {
+        id: '2',
+        name: 'another-sync',
+        project: 'staging',
+        repo: { url: 'https://github.com/org/apps', branch: 'develop', path: 'apps/staging' },
+        destination: { server: 'https://staging.k8s.example.com', namespace: 'staging' },
+        syncStatus: 'syncing',
+        healthStatus: 'progressing',
+        lastSyncedAt: new Date(Date.now() - 45000),
+        lastSyncedRevision: 'sync456',
+        autoSync: true,
+        resources: [
+          { kind: 'Deployment', name: 'staging-app', namespace: 'staging', syncStatus: 'syncing', healthStatus: 'progressing' },
+          { kind: 'ConfigMap', name: 'staging-config', namespace: 'staging', syncStatus: 'synced', healthStatus: 'healthy' },
+        ],
+      },
+      ...defaultGitOpsApplications.filter(a => a.syncStatus !== 'syncing'),
+    ]
+
+    return (
+      <div className="p-6">
+        <GitOpsSyncStatus
+          applications={syncingApps}
+          onViewDetails={(app) => console.log('View details:', app.name)}
+          onRefresh={() => console.log('Refresh all')}
+        />
+      </div>
+    )
+  },
+}
+
+export const SuspendedApps: Story = {
+  render: () => {
+    const suspendedApps: GitOpsApplication[] = [
+      {
+        id: '1',
+        name: 'suspended-for-maintenance',
+        project: 'production',
+        repo: { url: 'https://github.com/org/apps', branch: 'main', path: 'apps/maintenance' },
+        destination: { server: 'https://kubernetes.default.svc', namespace: 'production' },
+        syncStatus: 'suspended',
+        healthStatus: 'healthy',
+        lastSyncedAt: new Date(Date.now() - 24 * 3600000),
+        lastSyncedRevision: 'suspended1',
+        autoSync: true,
+        resources: [
+          { kind: 'Deployment', name: 'maintenance-app', namespace: 'production', syncStatus: 'synced', healthStatus: 'healthy' },
+        ],
+      },
+      {
+        id: '2',
+        name: 'manually-paused',
+        project: 'production',
+        repo: { url: 'https://github.com/org/apps', branch: 'main', path: 'apps/paused' },
+        destination: { server: 'https://kubernetes.default.svc', namespace: 'production' },
+        syncStatus: 'suspended',
+        healthStatus: 'healthy',
+        lastSyncedAt: new Date(Date.now() - 48 * 3600000),
+        lastSyncedRevision: 'paused123',
+        targetRevision: 'new456',
+        autoSync: false,
+        resources: [
+          { kind: 'Deployment', name: 'paused-app', namespace: 'production', syncStatus: 'out_of_sync', healthStatus: 'healthy' },
+        ],
+      },
+      ...defaultGitOpsApplications,
+    ]
+
+    return (
+      <div className="p-6">
+        <GitOpsSyncStatus
+          applications={suspendedApps}
+          onSync={(app) => console.log('Sync:', app.name)}
+          onSuspend={(app) => console.log('Suspend:', app.name)}
+          onResume={(app) => console.log('Resume:', app.name)}
+          onRefresh={() => console.log('Refresh all')}
+        />
+      </div>
+    )
+  },
+}
+
+export const ManyApplications: Story = {
+  render: () => {
+    const generateApp = (index: number): GitOpsApplication => {
+      const statuses: SyncStatus[] = ['synced', 'synced', 'synced', 'out_of_sync', 'failed']
+      const healthStatuses: HealthStatus[] = ['healthy', 'healthy', 'healthy', 'progressing', 'degraded']
+      const projects = ['production', 'staging', 'development']
+
+      return {
+        id: `app-${index}`,
+        name: `microservice-${index}`,
+        project: projects[index % 3],
+        repo: {
+          url: 'https://github.com/org/microservices',
+          branch: index % 3 === 2 ? 'develop' : 'main',
+          path: `services/service-${index}`,
+        },
+        destination: {
+          server: index % 3 === 2 ? 'https://dev.k8s.example.com' : 'https://kubernetes.default.svc',
+          namespace: projects[index % 3],
+        },
+        syncStatus: statuses[index % 5],
+        healthStatus: healthStatuses[index % 5],
+        lastSyncedAt: new Date(Date.now() - index * 10 * 60000),
+        lastSyncedRevision: `rev${index}abc123`,
+        autoSync: index % 2 === 0,
+        resources: [
+          { kind: 'Deployment', name: `service-${index}`, namespace: projects[index % 3], syncStatus: statuses[index % 5], healthStatus: healthStatuses[index % 5] },
+          { kind: 'Service', name: `service-${index}`, namespace: projects[index % 3], syncStatus: 'synced', healthStatus: 'healthy' },
+        ],
+      }
+    }
+
+    const manyApps = Array.from({ length: 15 }, (_, i) => generateApp(i))
+
+    return (
+      <div className="p-6">
+        <GitOpsSyncStatus
+          applications={manyApps}
+          onSync={(app) => console.log('Sync:', app.name)}
+          onRefresh={() => console.log('Refresh all')}
+        />
+      </div>
+    )
+  },
+}
+
+export const Empty: Story = {
+  render: () => (
+    <div className="p-6">
+      <GitOpsSyncStatus
+        applications={[]}
+        onRefresh={() => console.log('Refresh all')}
+      />
+    </div>
+  ),
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [applications, setApplications] = React.useState(defaultGitOpsApplications)
+
+    const handleSync = (app: GitOpsApplication) => {
+      setApplications(prev =>
+        prev.map(a =>
+          a.id === app.id
+            ? { ...a, syncStatus: 'syncing' as SyncStatus, healthStatus: 'progressing' as HealthStatus }
+            : a
+        )
+      )
+
+      // Simulate sync completion
+      setTimeout(() => {
+        setApplications(prev =>
+          prev.map(a =>
+            a.id === app.id
+              ? {
+                  ...a,
+                  syncStatus: 'synced' as SyncStatus,
+                  healthStatus: 'healthy' as HealthStatus,
+                  lastSyncedAt: new Date(),
+                  lastSyncedRevision: a.targetRevision || a.lastSyncedRevision,
+                  targetRevision: undefined,
+                  resources: a.resources.map(r => ({
+                    ...r,
+                    syncStatus: 'synced' as SyncStatus,
+                    healthStatus: 'healthy' as HealthStatus,
+                  })),
+                }
+              : a
+          )
+        )
+      }, 3000)
+    }
+
+    const handleSuspend = (app: GitOpsApplication) => {
+      setApplications(prev =>
+        prev.map(a =>
+          a.id === app.id
+            ? { ...a, syncStatus: 'suspended' as SyncStatus }
+            : a
+        )
+      )
+    }
+
+    const handleResume = (app: GitOpsApplication) => {
+      setApplications(prev =>
+        prev.map(a =>
+          a.id === app.id
+            ? { ...a, syncStatus: 'synced' as SyncStatus }
+            : a
+        )
+      )
+    }
+
+    return (
+      <div className="p-6">
+        <GitOpsSyncStatus
+          applications={applications}
+          onSync={handleSync}
+          onSuspend={handleSuspend}
+          onResume={handleResume}
+          onViewDetails={(app) => alert(`Application: ${app.name}\nSync Status: ${app.syncStatus}\nHealth: ${app.healthStatus}\nResources: ${app.resources.length}`)}
+          onRefresh={() => setApplications([...defaultGitOpsApplications])}
+        />
+      </div>
+    )
+  },
+}
+
+export const ArgoCDDashboard: Story = {
+  render: () => (
+    <div className="min-h-screen bg-muted/30">
+      <header className="bg-background border-b px-6 py-4">
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="font-bold text-xl">ArgoCD Dashboard</h1>
+            <p className="text-sm text-muted-foreground">GitOps Continuous Deployment</p>
+          </div>
+          <nav className="flex gap-4 text-sm">
+            <a href="#" className="text-foreground font-medium">Applications</a>
+            <a href="#" className="text-muted-foreground hover:text-foreground">Projects</a>
+            <a href="#" className="text-muted-foreground hover:text-foreground">Repositories</a>
+            <a href="#" className="text-muted-foreground hover:text-foreground">Clusters</a>
+            <a href="#" className="text-muted-foreground hover:text-foreground">Settings</a>
+          </nav>
+        </div>
+      </header>
+      <main className="p-6">
+        <GitOpsSyncStatus
+          applications={defaultGitOpsApplications}
+          onSync={(app) => console.log('Sync:', app.name)}
+          onSuspend={(app) => console.log('Suspend:', app.name)}
+          onResume={(app) => console.log('Resume:', app.name)}
+          onViewDetails={(app) => console.log('View details:', app.name)}
+          onRefresh={() => console.log('Refresh all')}
+        />
+      </main>
+    </div>
+  ),
+}
+
+export const FluxCDStyle: Story = {
+  render: () => {
+    const fluxApps: GitOpsApplication[] = [
+      {
+        id: '1',
+        name: 'flux-system',
+        project: 'flux-system',
+        repo: { url: 'https://github.com/org/flux-config', branch: 'main', path: 'clusters/production' },
+        destination: { server: 'https://kubernetes.default.svc', namespace: 'flux-system' },
+        syncStatus: 'synced',
+        healthStatus: 'healthy',
+        lastSyncedAt: new Date(Date.now() - 1 * 60000),
+        lastSyncedRevision: 'main@sha1:abc123',
+        autoSync: true,
+        resources: [
+          { kind: 'Deployment', name: 'source-controller', namespace: 'flux-system', syncStatus: 'synced', healthStatus: 'healthy' },
+          { kind: 'Deployment', name: 'kustomize-controller', namespace: 'flux-system', syncStatus: 'synced', healthStatus: 'healthy' },
+          { kind: 'Deployment', name: 'helm-controller', namespace: 'flux-system', syncStatus: 'synced', healthStatus: 'healthy' },
+        ],
+      },
+      {
+        id: '2',
+        name: 'infrastructure',
+        project: 'infrastructure',
+        repo: { url: 'https://github.com/org/flux-config', branch: 'main', path: 'infrastructure' },
+        destination: { server: 'https://kubernetes.default.svc', namespace: 'default' },
+        syncStatus: 'synced',
+        healthStatus: 'healthy',
+        lastSyncedAt: new Date(Date.now() - 3 * 60000),
+        lastSyncedRevision: 'main@sha1:def456',
+        autoSync: true,
+        resources: [
+          { kind: 'Deployment', name: 'ingress-nginx', namespace: 'ingress-nginx', syncStatus: 'synced', healthStatus: 'healthy' },
+          { kind: 'Deployment', name: 'cert-manager', namespace: 'cert-manager', syncStatus: 'synced', healthStatus: 'healthy' },
+        ],
+      },
+      {
+        id: '3',
+        name: 'apps',
+        project: 'apps',
+        repo: { url: 'https://github.com/org/flux-config', branch: 'main', path: 'apps/production' },
+        destination: { server: 'https://kubernetes.default.svc', namespace: 'production' },
+        syncStatus: 'out_of_sync',
+        healthStatus: 'healthy',
+        lastSyncedAt: new Date(Date.now() - 10 * 60000),
+        lastSyncedRevision: 'main@sha1:old789',
+        targetRevision: 'main@sha1:new012',
+        autoSync: false,
+        resources: [
+          { kind: 'Deployment', name: 'webapp', namespace: 'production', syncStatus: 'out_of_sync', healthStatus: 'healthy' },
+          { kind: 'Deployment', name: 'api', namespace: 'production', syncStatus: 'synced', healthStatus: 'healthy' },
+        ],
+      },
+    ]
+
+    return (
+      <div className="p-6">
+        <GitOpsSyncStatus
+          applications={fluxApps}
+          onSync={(app) => console.log('Reconcile:', app.name)}
+          onSuspend={(app) => console.log('Suspend:', app.name)}
+          onResume={(app) => console.log('Resume:', app.name)}
+          onRefresh={() => console.log('Refresh all')}
+        />
+      </div>
+    )
+  },
+}