@wakastellar/ui 2.3.4 → 2.4.0

package/src/blocks/deployment-dashboard/DeploymentDashboard.stories.tsx

@@ -0,0 +1,457 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import {
+  DeploymentDashboard,
+  defaultDeployments,
+  defaultPipelines,
+  defaultEnvironments,
+} from './index'
+import type { Deployment, Pipeline, EnvironmentStatus, Environment } from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof DeploymentDashboard> = {
+  title: 'Blocks/DeploymentDashboard',
+  component: DeploymentDashboard,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'A deployment dashboard for managing CI/CD deployments across multiple environments with pipeline visualization, rollback support, and environment health monitoring.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof DeploymentDashboard>
+
+export const Default: Story = {
+  render: () => (
+    <div className="p-6">
+      <DeploymentDashboard
+        deployments={defaultDeployments}
+        pipelines={defaultPipelines}
+        environments={defaultEnvironments}
+        onDeploy={(env, branch) => console.log('Deploy:', env, branch)}
+        onRollback={(id) => console.log('Rollback:', id)}
+        onCancel={(id) => console.log('Cancel:', id)}
+        onRetry={(id) => console.log('Retry:', id)}
+      />
+    </div>
+  ),
+}
+
+export const Empty: Story = {
+  render: () => (
+    <div className="p-6">
+      <DeploymentDashboard
+        deployments={[]}
+        pipelines={[]}
+        environments={defaultEnvironments}
+        onDeploy={(env, branch) => console.log('Deploy:', env, branch)}
+      />
+    </div>
+  ),
+}
+
+export const AllSuccess: Story = {
+  render: () => {
+    const successDeployments: Deployment[] = [
+      {
+        id: 'd1',
+        status: 'success',
+        environment: 'production',
+        branch: 'main',
+        commit: 'abc123def',
+        commitMessage: 'feat: Add user authentication',
+        author: { name: 'Alice Developer' },
+        startedAt: new Date(Date.now() - 3600000),
+        finishedAt: new Date(Date.now() - 3300000),
+        duration: '5m 0s',
+        url: 'https://app.example.com',
+      },
+      {
+        id: 'd2',
+        status: 'success',
+        environment: 'staging',
+        branch: 'develop',
+        commit: 'def456ghi',
+        commitMessage: 'fix: Resolve login redirect issue',
+        author: { name: 'Bob Engineer' },
+        startedAt: new Date(Date.now() - 7200000),
+        finishedAt: new Date(Date.now() - 6900000),
+        duration: '5m 0s',
+        url: 'https://staging.example.com',
+      },
+    ]
+
+    const healthyEnvironments: EnvironmentStatus[] = [
+      {
+        name: 'production',
+        status: 'healthy',
+        url: 'https://app.example.com',
+        uptime: '99.99%',
+        responseTime: '95ms',
+        lastDeployment: successDeployments[0],
+      },
+      {
+        name: 'staging',
+        status: 'healthy',
+        url: 'https://staging.example.com',
+        uptime: '99.5%',
+        responseTime: '120ms',
+        lastDeployment: successDeployments[1],
+      },
+      {
+        name: 'development',
+        status: 'healthy',
+        url: 'https://dev.example.com',
+        uptime: '98%',
+        responseTime: '150ms',
+      },
+    ]
+
+    return (
+      <div className="p-6">
+        <DeploymentDashboard
+          deployments={successDeployments}
+          pipelines={[]}
+          environments={healthyEnvironments}
+          onDeploy={(env, branch) => console.log('Deploy:', env, branch)}
+          onRollback={(id) => console.log('Rollback:', id)}
+        />
+      </div>
+    )
+  },
+}
+
+export const WithFailedDeployment: Story = {
+  render: () => {
+    const deploymentsWithFailure: Deployment[] = [
+      {
+        id: 'd1',
+        status: 'failed',
+        environment: 'production',
+        branch: 'main',
+        commit: 'bad123bad',
+        commitMessage: 'fix: Critical security patch',
+        author: { name: 'Charlie DevOps' },
+        startedAt: new Date(Date.now() - 1800000),
+        finishedAt: new Date(Date.now() - 1500000),
+        duration: '5m 0s',
+      },
+      ...defaultDeployments,
+    ]
+
+    return (
+      <div className="p-6">
+        <DeploymentDashboard
+          deployments={deploymentsWithFailure}
+          pipelines={defaultPipelines}
+          environments={defaultEnvironments}
+          onRetry={(id) => console.log('Retry:', id)}
+          onDeploy={(env, branch) => console.log('Deploy:', env, branch)}
+        />
+      </div>
+    )
+  },
+}
+
+export const ActiveDeployments: Story = {
+  render: () => {
+    const activeDeployments: Deployment[] = [
+      {
+        id: 'd1',
+        status: 'deploying',
+        environment: 'production',
+        branch: 'main',
+        commit: 'abc123def',
+        commitMessage: 'feat: Major feature release v2.0',
+        author: { name: 'Dana PM' },
+        startedAt: new Date(Date.now() - 120000),
+      },
+      {
+        id: 'd2',
+        status: 'building',
+        environment: 'staging',
+        branch: 'develop',
+        commit: 'def456ghi',
+        commitMessage: 'chore: Update dependencies',
+        author: { name: 'Eve DevOps' },
+        startedAt: new Date(Date.now() - 60000),
+      },
+    ]
+
+    return (
+      <div className="p-6">
+        <DeploymentDashboard
+          deployments={activeDeployments}
+          pipelines={defaultPipelines}
+          environments={defaultEnvironments}
+          onCancel={(id) => console.log('Cancel:', id)}
+          onDeploy={(env, branch) => console.log('Deploy:', env, branch)}
+        />
+      </div>
+    )
+  },
+}
+
+export const MultiplePipelines: Story = {
+  render: () => {
+    const pipelines: Pipeline[] = [
+      {
+        id: 'p1',
+        name: 'Production Release',
+        status: 'building',
+        trigger: 'push to main',
+        branch: 'main',
+        startedAt: new Date(Date.now() - 300000),
+        stages: [
+          { id: 's1', name: 'Build', status: 'success', duration: '2m 15s' },
+          { id: 's2', name: 'Test', status: 'success', duration: '4m 30s' },
+          { id: 's3', name: 'Security', status: 'building' },
+          { id: 's4', name: 'Deploy', status: 'pending' },
+        ],
+      },
+      {
+        id: 'p2',
+        name: 'Feature Branch CI',
+        status: 'success',
+        trigger: 'pull_request',
+        branch: 'feature/new-api',
+        startedAt: new Date(Date.now() - 600000),
+        stages: [
+          { id: 's1', name: 'Build', status: 'success', duration: '1m 45s' },
+          { id: 's2', name: 'Test', status: 'success', duration: '3m 20s' },
+          { id: 's3', name: 'Lint', status: 'success', duration: '0m 45s' },
+        ],
+      },
+      {
+        id: 'p3',
+        name: 'Nightly Build',
+        status: 'failed',
+        trigger: 'scheduled',
+        branch: 'develop',
+        startedAt: new Date(Date.now() - 3600000 * 8),
+        stages: [
+          { id: 's1', name: 'Build', status: 'success', duration: '2m 0s' },
+          { id: 's2', name: 'E2E Tests', status: 'failed', duration: '15m 0s' },
+          { id: 's3', name: 'Report', status: 'skipped' },
+        ],
+      },
+    ]
+
+    return (
+      <div className="p-6">
+        <DeploymentDashboard
+          deployments={defaultDeployments}
+          pipelines={pipelines}
+          environments={defaultEnvironments}
+          onDeploy={(env, branch) => console.log('Deploy:', env, branch)}
+        />
+      </div>
+    )
+  },
+}
+
+export const DegradedEnvironment: Story = {
+  render: () => {
+    const environments: EnvironmentStatus[] = [
+      {
+        name: 'production',
+        status: 'healthy',
+        url: 'https://app.example.com',
+        uptime: '99.9%',
+        responseTime: '100ms',
+      },
+      {
+        name: 'staging',
+        status: 'degraded',
+        url: 'https://staging.example.com',
+        uptime: '95%',
+        responseTime: '850ms',
+      },
+      {
+        name: 'development',
+        status: 'down',
+        url: 'https://dev.example.com',
+        uptime: '0%',
+        responseTime: 'N/A',
+      },
+    ]
+
+    return (
+      <div className="p-6">
+        <DeploymentDashboard
+          deployments={defaultDeployments}
+          pipelines={defaultPipelines}
+          environments={environments}
+          onDeploy={(env, branch) => console.log('Deploy:', env, branch)}
+        />
+      </div>
+    )
+  },
+}
+
+export const CustomBranches: Story = {
+  render: () => (
+    <div className="p-6">
+      <DeploymentDashboard
+        deployments={defaultDeployments}
+        pipelines={defaultPipelines}
+        environments={defaultEnvironments}
+        branches={['main', 'develop', 'release/v2.0', 'hotfix/critical-bug', 'feature/new-dashboard']}
+        onDeploy={(env, branch) => console.log('Deploy:', env, branch)}
+      />
+    </div>
+  ),
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [deployments, setDeployments] = React.useState<Deployment[]>(defaultDeployments)
+    const [deploying, setDeploying] = React.useState(false)
+
+    const handleDeploy = async (environment: Environment, branch: string) => {
+      setDeploying(true)
+      const newDeployment: Deployment = {
+        id: `d-${Date.now()}`,
+        status: 'building',
+        environment,
+        branch,
+        commit: Math.random().toString(36).substring(7),
+        commitMessage: `Deploy ${branch} to ${environment}`,
+        author: { name: 'Current User' },
+        startedAt: new Date(),
+      }
+      setDeployments(prev => [newDeployment, ...prev])
+
+      // Simulate build phase
+      await new Promise(r => setTimeout(r, 2000))
+      setDeployments(prev =>
+        prev.map(d =>
+          d.id === newDeployment.id ? { ...d, status: 'deploying' as const } : d
+        )
+      )
+
+      // Simulate deploy phase
+      await new Promise(r => setTimeout(r, 2000))
+      setDeployments(prev =>
+        prev.map(d =>
+          d.id === newDeployment.id
+            ? {
+                ...d,
+                status: 'success' as const,
+                finishedAt: new Date(),
+                duration: '4s',
+                url: `https://${environment}.example.com`,
+              }
+            : d
+        )
+      )
+      setDeploying(false)
+    }
+
+    const handleRollback = (id: string) => {
+      setDeployments(prev =>
+        prev.map(d =>
+          d.id === id ? { ...d, status: 'rollback' as const } : d
+        )
+      )
+      alert(`Rolling back deployment ${id}`)
+    }
+
+    const handleCancel = (id: string) => {
+      setDeployments(prev =>
+        prev.map(d =>
+          d.id === id ? { ...d, status: 'cancelled' as const } : d
+        )
+      )
+    }
+
+    return (
+      <div className="p-6">
+        <DeploymentDashboard
+          deployments={deployments}
+          pipelines={defaultPipelines}
+          environments={defaultEnvironments}
+          onDeploy={handleDeploy}
+          onRollback={handleRollback}
+          onCancel={handleCancel}
+          onRetry={(id) => console.log('Retry:', id)}
+        />
+      </div>
+    )
+  },
+}
+
+export const ManyDeployments: Story = {
+  render: () => {
+    const manyDeployments: Deployment[] = Array.from({ length: 20 }, (_, i) => ({
+      id: `d-${i}`,
+      status: (['success', 'failed', 'success', 'success', 'cancelled'] as const)[i % 5],
+      environment: (['production', 'staging', 'development'] as const)[i % 3],
+      branch: ['main', 'develop', 'feature/test', 'hotfix/bug'][i % 4],
+      commit: Math.random().toString(36).substring(2, 9),
+      commitMessage: [
+        'feat: Add new feature',
+        'fix: Bug fix',
+        'chore: Update deps',
+        'refactor: Clean code',
+        'docs: Update README',
+      ][i % 5],
+      author: {
+        name: ['Alice', 'Bob', 'Charlie', 'Diana', 'Eve'][i % 5],
+      },
+      startedAt: new Date(Date.now() - i * 3600000),
+      finishedAt: new Date(Date.now() - i * 3600000 + 300000),
+      duration: `${Math.floor(Math.random() * 10) + 1}m ${Math.floor(Math.random() * 60)}s`,
+    }))
+
+    return (
+      <div className="p-6">
+        <DeploymentDashboard
+          deployments={manyDeployments}
+          pipelines={defaultPipelines}
+          environments={defaultEnvironments}
+          onDeploy={(env, branch) => console.log('Deploy:', env, branch)}
+          onRollback={(id) => console.log('Rollback:', id)}
+        />
+      </div>
+    )
+  },
+}
+
+export const ProductionDashboard: 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">DevOps Portal</h1>
+            <p className="text-sm text-muted-foreground">Acme Corp Infrastructure</p>
+          </div>
+          <nav className="flex gap-4 text-sm">
+            <a href="#" className="text-foreground font-medium">Deployments</a>
+            <a href="#" className="text-muted-foreground hover:text-foreground">Monitoring</a>
+            <a href="#" className="text-muted-foreground hover:text-foreground">Logs</a>
+            <a href="#" className="text-muted-foreground hover:text-foreground">Settings</a>
+          </nav>
+        </div>
+      </header>
+      <main className="p-6">
+        <DeploymentDashboard
+          deployments={defaultDeployments}
+          pipelines={defaultPipelines}
+          environments={defaultEnvironments}
+          branches={['main', 'develop', 'release/v2.1.0', 'hotfix/auth-fix']}
+          onDeploy={(env, branch) => console.log('Deploy:', env, branch)}
+          onRollback={(id) => console.log('Rollback:', id)}
+          onCancel={(id) => console.log('Cancel:', id)}
+          onRetry={(id) => console.log('Retry:', id)}
+        />
+      </main>
+    </div>
+  ),
+}