@wakastellar/ui 2.3.4 → 2.4.0

package/src/blocks/container-orchestrator/ContainerOrchestrator.stories.tsx

@@ -0,0 +1,461 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import {
+  ContainerOrchestrator,
+  defaultOrchestratorServices,
+} from './index'
+import type { OrchestratorService, OrchestratorContainer, ServiceStatus } from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof ContainerOrchestrator> = {
+  title: 'Blocks/ContainerOrchestrator',
+  component: ContainerOrchestrator,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'A container orchestration dashboard for managing Docker/Kubernetes services with scaling controls, container status monitoring, resource usage, and service management.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof ContainerOrchestrator>
+
+export const Default: Story = {
+  render: () => (
+    <div className="p-6">
+      <ContainerOrchestrator
+        services={defaultOrchestratorServices}
+        onScaleService={(service, replicas) => console.log('Scale:', service.name, replicas)}
+        onRestartService={(service) => console.log('Restart:', service.name)}
+        onStopService={(service) => console.log('Stop:', service.name)}
+        onDeleteService={(service) => console.log('Delete:', service.name)}
+        onViewLogs={(container) => console.log('Logs:', container.name)}
+        onExecShell={(container) => console.log('Shell:', container.name)}
+        onRefresh={() => console.log('Refresh')}
+      />
+    </div>
+  ),
+}
+
+export const AllRunning: Story = {
+  render: () => {
+    const healthyServices: OrchestratorService[] = defaultOrchestratorServices.map(service => ({
+      ...service,
+      status: 'running' as ServiceStatus,
+      replicas: {
+        desired: service.replicas.desired,
+        running: service.replicas.desired,
+        ready: service.replicas.desired,
+      },
+      containers: service.containers.map(c => ({
+        ...c,
+        status: 'running' as const,
+        healthCheck: 'healthy' as const,
+      })),
+    }))
+
+    return (
+      <div className="p-6">
+        <ContainerOrchestrator
+          services={healthyServices}
+          onScaleService={(service, replicas) => console.log('Scale:', service.name, replicas)}
+          onRestartService={(service) => console.log('Restart:', service.name)}
+          onRefresh={() => console.log('Refresh')}
+        />
+      </div>
+    )
+  },
+}
+
+export const WithFailedService: Story = {
+  render: () => {
+    const servicesWithFailure: OrchestratorService[] = [
+      {
+        id: 'failed-1',
+        name: 'critical-service',
+        image: 'myregistry/critical:v1.0.0',
+        status: 'failed',
+        replicas: { desired: 3, running: 0, ready: 0 },
+        containers: [
+          {
+            id: 'critical-1',
+            name: 'critical-service-1',
+            image: 'myregistry/critical:v1.0.0',
+            status: 'exited',
+            createdAt: new Date(Date.now() - 3600000),
+            healthCheck: 'unhealthy',
+            restartCount: 10,
+            node: 'node-1',
+            resources: { cpu: 0, memory: 0, memoryLimit: 1024, networkRx: 0, networkTx: 0 },
+          },
+        ],
+        createdAt: new Date(Date.now() - 86400000),
+        updatedAt: new Date(Date.now() - 3600000),
+      },
+      ...defaultOrchestratorServices,
+    ]
+
+    return (
+      <div className="p-6">
+        <ContainerOrchestrator
+          services={servicesWithFailure}
+          onScaleService={(service, replicas) => console.log('Scale:', service.name, replicas)}
+          onRestartService={(service) => console.log('Restart:', service.name)}
+          onDeleteService={(service) => console.log('Delete:', service.name)}
+          onRefresh={() => console.log('Refresh')}
+        />
+      </div>
+    )
+  },
+}
+
+export const Updating: Story = {
+  render: () => {
+    const updatingServices: OrchestratorService[] = [
+      {
+        ...defaultOrchestratorServices[0],
+        status: 'updating',
+        updateStatus: {
+          state: 'updating',
+          progress: 67,
+          message: 'Rolling update: 2/3 replicas updated',
+        },
+        replicas: { desired: 3, running: 3, ready: 2 },
+      },
+      {
+        ...defaultOrchestratorServices[1],
+        status: 'updating',
+        updateStatus: {
+          state: 'updating',
+          progress: 25,
+          message: 'Pulling new image...',
+        },
+      },
+      ...defaultOrchestratorServices.slice(2),
+    ]
+
+    return (
+      <div className="p-6">
+        <ContainerOrchestrator
+          services={updatingServices}
+          onScaleService={(service, replicas) => console.log('Scale:', service.name, replicas)}
+          onRefresh={() => console.log('Refresh')}
+        />
+      </div>
+    )
+  },
+}
+
+export const HighResourceUsage: Story = {
+  render: () => {
+    const highResourceServices: OrchestratorService[] = defaultOrchestratorServices.map(service => ({
+      ...service,
+      containers: service.containers.map(c => ({
+        ...c,
+        resources: {
+          cpu: 75 + Math.random() * 20,
+          memory: 800 + Math.random() * 200,
+          memoryLimit: 1024,
+          networkRx: Math.floor(Math.random() * 5000000),
+          networkTx: Math.floor(Math.random() * 2500000),
+        },
+      })),
+    }))
+
+    return (
+      <div className="p-6">
+        <ContainerOrchestrator
+          services={highResourceServices}
+          onScaleService={(service, replicas) => console.log('Scale:', service.name, replicas)}
+          onRefresh={() => console.log('Refresh')}
+        />
+      </div>
+    )
+  },
+}
+
+export const ManyServices: Story = {
+  render: () => {
+    const generateService = (index: number): OrchestratorService => ({
+      id: `service-${index}`,
+      name: `service-${index}`,
+      image: `myregistry/service-${index}:latest`,
+      status: (['running', 'running', 'running', 'updating', 'failed'] as ServiceStatus[])[index % 5],
+      replicas: {
+        desired: (index % 3) + 1,
+        running: (index % 3) + 1,
+        ready: (index % 3) + 1,
+      },
+      containers: Array.from({ length: (index % 3) + 1 }, (_, i) => ({
+        id: `service-${index}-container-${i}`,
+        name: `service-${index}-${i}`,
+        image: `myregistry/service-${index}:latest`,
+        status: 'running' as const,
+        createdAt: new Date(Date.now() - index * 3600000),
+        startedAt: new Date(Date.now() - index * 3600000 + 60000),
+        healthCheck: 'healthy' as const,
+        node: `node-${(i % 3) + 1}`,
+        resources: {
+          cpu: 20 + Math.random() * 40,
+          memory: 200 + Math.random() * 300,
+          memoryLimit: 1024,
+          networkRx: Math.floor(Math.random() * 1000000),
+          networkTx: Math.floor(Math.random() * 500000),
+        },
+      })),
+      ports: [{ published: 8080 + index, target: 8080 }],
+      createdAt: new Date(Date.now() - index * 86400000),
+      updatedAt: new Date(Date.now() - index * 3600000),
+    })
+
+    const manyServices = Array.from({ length: 15 }, (_, i) => generateService(i))
+
+    return (
+      <div className="p-6">
+        <ContainerOrchestrator
+          services={manyServices}
+          onScaleService={(service, replicas) => console.log('Scale:', service.name, replicas)}
+          onRefresh={() => console.log('Refresh')}
+        />
+      </div>
+    )
+  },
+}
+
+export const Empty: Story = {
+  render: () => (
+    <div className="p-6">
+      <ContainerOrchestrator
+        services={[]}
+        onRefresh={() => console.log('Refresh')}
+      />
+    </div>
+  ),
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [services, setServices] = React.useState(defaultOrchestratorServices)
+
+    const handleScale = (service: OrchestratorService, replicas: number) => {
+      setServices(prev =>
+        prev.map(s =>
+          s.id === service.id
+            ? {
+                ...s,
+                status: 'scaled' as ServiceStatus,
+                replicas: { ...s.replicas, desired: replicas },
+              }
+            : s
+        )
+      )
+
+      // Simulate scaling completion
+      setTimeout(() => {
+        setServices(prev =>
+          prev.map(s =>
+            s.id === service.id
+              ? {
+                  ...s,
+                  status: 'running' as ServiceStatus,
+                  replicas: { desired: replicas, running: replicas, ready: replicas },
+                }
+              : s
+          )
+        )
+      }, 2000)
+    }
+
+    const handleRestart = (service: OrchestratorService) => {
+      setServices(prev =>
+        prev.map(s =>
+          s.id === service.id
+            ? {
+                ...s,
+                containers: s.containers.map(c => ({
+                  ...c,
+                  status: 'restarting' as const,
+                })),
+              }
+            : s
+        )
+      )
+
+      setTimeout(() => {
+        setServices(prev =>
+          prev.map(s =>
+            s.id === service.id
+              ? {
+                  ...s,
+                  containers: s.containers.map(c => ({
+                    ...c,
+                    status: 'running' as const,
+                    startedAt: new Date(),
+                    restartCount: (c.restartCount || 0) + 1,
+                  })),
+                }
+              : s
+          )
+        )
+      }, 3000)
+    }
+
+    const handleDelete = (service: OrchestratorService) => {
+      if (confirm(`Delete service ${service.name}?`)) {
+        setServices(prev => prev.filter(s => s.id !== service.id))
+      }
+    }
+
+    return (
+      <div className="p-6">
+        <ContainerOrchestrator
+          services={services}
+          onScaleService={handleScale}
+          onRestartService={handleRestart}
+          onStopService={(service) => console.log('Stop:', service.name)}
+          onDeleteService={handleDelete}
+          onViewLogs={(container) => alert(`Viewing logs for ${container.name}`)}
+          onExecShell={(container) => alert(`Opening shell for ${container.name}`)}
+          onRefresh={() => setServices([...defaultOrchestratorServices])}
+        />
+      </div>
+    )
+  },
+}
+
+export const KubernetesDashboard: 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">Kubernetes Dashboard</h1>
+            <p className="text-sm text-muted-foreground">Cluster: production-us-east-1</p>
+          </div>
+          <nav className="flex gap-4 text-sm">
+            <a href="#" className="text-foreground font-medium">Workloads</a>
+            <a href="#" className="text-muted-foreground hover:text-foreground">Services</a>
+            <a href="#" className="text-muted-foreground hover:text-foreground">Config</a>
+            <a href="#" className="text-muted-foreground hover:text-foreground">Storage</a>
+            <a href="#" className="text-muted-foreground hover:text-foreground">Cluster</a>
+          </nav>
+        </div>
+      </header>
+      <main className="p-6">
+        <ContainerOrchestrator
+          services={defaultOrchestratorServices}
+          onScaleService={(service, replicas) => console.log('Scale:', service.name, replicas)}
+          onRestartService={(service) => console.log('Restart:', service.name)}
+          onStopService={(service) => console.log('Stop:', service.name)}
+          onDeleteService={(service) => console.log('Delete:', service.name)}
+          onViewLogs={(container) => console.log('Logs:', container.name)}
+          onExecShell={(container) => console.log('Shell:', container.name)}
+          onRefresh={() => console.log('Refresh')}
+        />
+      </main>
+    </div>
+  ),
+}
+
+export const DockerSwarm: Story = {
+  render: () => {
+    const swarmServices: OrchestratorService[] = [
+      {
+        id: 'web',
+        name: 'web',
+        image: 'nginx:alpine',
+        status: 'running',
+        replicas: { desired: 5, running: 5, ready: 5 },
+        containers: Array.from({ length: 5 }, (_, i) => ({
+          id: `web-${i}`,
+          name: `web.${i + 1}`,
+          image: 'nginx:alpine',
+          status: 'running' as const,
+          createdAt: new Date(Date.now() - 86400000),
+          startedAt: new Date(Date.now() - 86400000),
+          healthCheck: 'healthy' as const,
+          node: `swarm-node-${(i % 3) + 1}`,
+          resources: {
+            cpu: 5 + Math.random() * 10,
+            memory: 50 + Math.random() * 50,
+            memoryLimit: 256,
+            networkRx: Math.floor(Math.random() * 500000),
+            networkTx: Math.floor(Math.random() * 250000),
+          },
+        })),
+        ports: [{ published: 80, target: 80 }, { published: 443, target: 443 }],
+        createdAt: new Date(Date.now() - 7 * 86400000),
+        updatedAt: new Date(Date.now() - 86400000),
+      },
+      {
+        id: 'api',
+        name: 'api',
+        image: 'myapp/api:v2.0',
+        status: 'running',
+        replicas: { desired: 3, running: 3, ready: 3 },
+        containers: Array.from({ length: 3 }, (_, i) => ({
+          id: `api-${i}`,
+          name: `api.${i + 1}`,
+          image: 'myapp/api:v2.0',
+          status: 'running' as const,
+          createdAt: new Date(Date.now() - 172800000),
+          startedAt: new Date(Date.now() - 172800000),
+          healthCheck: 'healthy' as const,
+          node: `swarm-node-${(i % 3) + 1}`,
+          resources: {
+            cpu: 25 + Math.random() * 20,
+            memory: 256 + Math.random() * 128,
+            memoryLimit: 512,
+            networkRx: Math.floor(Math.random() * 1000000),
+            networkTx: Math.floor(Math.random() * 500000),
+          },
+        })),
+        ports: [{ published: 8080, target: 8080 }],
+        createdAt: new Date(Date.now() - 14 * 86400000),
+        updatedAt: new Date(Date.now() - 172800000),
+      },
+      {
+        id: 'redis',
+        name: 'redis',
+        image: 'redis:7-alpine',
+        status: 'running',
+        replicas: { desired: 1, running: 1, ready: 1 },
+        containers: [{
+          id: 'redis-1',
+          name: 'redis.1',
+          image: 'redis:7-alpine',
+          status: 'running' as const,
+          createdAt: new Date(Date.now() - 259200000),
+          startedAt: new Date(Date.now() - 259200000),
+          healthCheck: 'healthy' as const,
+          node: 'swarm-node-1',
+          resources: {
+            cpu: 8,
+            memory: 180,
+            memoryLimit: 512,
+            networkRx: 250000,
+            networkTx: 125000,
+          },
+        }],
+        ports: [{ published: 6379, target: 6379 }],
+        createdAt: new Date(Date.now() - 30 * 86400000),
+        updatedAt: new Date(Date.now() - 259200000),
+      },
+    ]
+
+    return (
+      <div className="p-6">
+        <ContainerOrchestrator
+          services={swarmServices}
+          onScaleService={(service, replicas) => console.log('Scale:', service.name, replicas)}
+          onRestartService={(service) => console.log('Restart:', service.name)}
+          onRefresh={() => console.log('Refresh')}
+        />
+      </div>
+    )
+  },
+}