@wakastellar/ui 2.3.4 → 2.4.0

package/src/blocks/infrastructure-map/InfrastructureMap.stories.tsx

@@ -0,0 +1,533 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import {
+  InfrastructureMap,
+  defaultInfraResources,
+} from './index'
+import type { InfraResource, ResourceType, ResourceStatus, CloudProvider } from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof InfrastructureMap> = {
+  title: 'Blocks/InfrastructureMap',
+  component: InfrastructureMap,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'An infrastructure visualization dashboard for mapping cloud resources across regions, VPCs, subnets with tree and grid views, status filtering, and resource metrics.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof InfrastructureMap>
+
+export const Default: Story = {
+  render: () => (
+    <div className="p-6">
+      <InfrastructureMap
+        resources={defaultInfraResources}
+        onResourceClick={(resource) => console.log('Resource clicked:', resource.name)}
+        onRefresh={() => console.log('Refresh')}
+      />
+    </div>
+  ),
+}
+
+export const GridView: Story = {
+  render: () => (
+    <div className="p-6">
+      <InfrastructureMap
+        resources={defaultInfraResources}
+        viewMode="grid"
+        onResourceClick={(resource) => console.log('Resource clicked:', resource.name)}
+        onRefresh={() => console.log('Refresh')}
+      />
+    </div>
+  ),
+}
+
+export const AllHealthy: Story = {
+  render: () => {
+    const healthyResources: InfraResource[] = [
+      {
+        id: 'region-us-east-1',
+        name: 'us-east-1',
+        type: 'region',
+        status: 'healthy',
+        provider: 'aws',
+        region: 'N. Virginia',
+        children: [
+          {
+            id: 'vpc-prod',
+            name: 'production-vpc',
+            type: 'vpc',
+            status: 'healthy',
+            children: [
+              {
+                id: 'alb-1',
+                name: 'api-load-balancer',
+                type: 'loadbalancer',
+                status: 'healthy',
+                metrics: { requests: 15000, latency: 25 },
+              },
+              {
+                id: 'ec2-1',
+                name: 'api-server-1',
+                type: 'server',
+                status: 'healthy',
+                metrics: { cpu: 35, memory: 45 },
+              },
+              {
+                id: 'ec2-2',
+                name: 'api-server-2',
+                type: 'server',
+                status: 'healthy',
+                metrics: { cpu: 42, memory: 52 },
+              },
+              {
+                id: 'rds-1',
+                name: 'postgres-primary',
+                type: 'database',
+                status: 'healthy',
+                metrics: { cpu: 28, memory: 60 },
+              },
+              {
+                id: 'redis-1',
+                name: 'redis-cache',
+                type: 'cache',
+                status: 'healthy',
+                metrics: { memory: 35 },
+              },
+            ],
+          },
+        ],
+      },
+    ]
+
+    return (
+      <div className="p-6">
+        <InfrastructureMap
+          resources={healthyResources}
+          onResourceClick={(resource) => console.log('Resource:', resource.name)}
+        />
+      </div>
+    )
+  },
+}
+
+export const WithCriticalResources: Story = {
+  render: () => {
+    const criticalResources: InfraResource[] = [
+      {
+        id: 'region-us-east-1',
+        name: 'us-east-1',
+        type: 'region',
+        status: 'critical',
+        provider: 'aws',
+        region: 'N. Virginia',
+        children: [
+          {
+            id: 'vpc-prod',
+            name: 'production-vpc',
+            type: 'vpc',
+            status: 'critical',
+            children: [
+              {
+                id: 'ec2-critical',
+                name: 'api-server-critical',
+                type: 'server',
+                status: 'critical',
+                metrics: { cpu: 99, memory: 98 },
+              },
+              {
+                id: 'rds-critical',
+                name: 'postgres-overloaded',
+                type: 'database',
+                status: 'critical',
+                metrics: { cpu: 95, memory: 92 },
+              },
+            ],
+          },
+        ],
+      },
+      {
+        id: 'region-eu-west-1',
+        name: 'eu-west-1',
+        type: 'region',
+        status: 'warning',
+        provider: 'aws',
+        region: 'Ireland',
+        children: [
+          {
+            id: 'ec2-warning',
+            name: 'worker-server',
+            type: 'server',
+            status: 'warning',
+            metrics: { cpu: 82, memory: 75 },
+          },
+        ],
+      },
+    ]
+
+    return (
+      <div className="p-6">
+        <InfrastructureMap
+          resources={criticalResources}
+          onResourceClick={(resource) => console.log('Resource:', resource.name)}
+        />
+      </div>
+    )
+  },
+}
+
+export const MultiCloudInfrastructure: Story = {
+  render: () => {
+    const multiCloudResources: InfraResource[] = [
+      {
+        id: 'aws-region',
+        name: 'us-east-1',
+        type: 'region',
+        status: 'healthy',
+        provider: 'aws',
+        region: 'N. Virginia',
+        children: [
+          {
+            id: 'aws-vpc',
+            name: 'aws-production-vpc',
+            type: 'vpc',
+            status: 'healthy',
+            children: [
+              { id: 'aws-alb', name: 'aws-load-balancer', type: 'loadbalancer', status: 'healthy', metrics: { requests: 25000 } },
+              { id: 'aws-ec2-1', name: 'aws-api-1', type: 'server', status: 'healthy', metrics: { cpu: 45, memory: 60 } },
+              { id: 'aws-rds', name: 'aws-postgres', type: 'database', status: 'healthy', metrics: { cpu: 35, memory: 70 } },
+            ],
+          },
+        ],
+      },
+      {
+        id: 'gcp-region',
+        name: 'us-central1',
+        type: 'region',
+        status: 'healthy',
+        provider: 'gcp',
+        region: 'Iowa',
+        children: [
+          {
+            id: 'gcp-vpc',
+            name: 'gcp-production-vpc',
+            type: 'vpc',
+            status: 'warning',
+            children: [
+              { id: 'gcp-gke', name: 'gcp-gke-cluster', type: 'container', status: 'healthy', metrics: { cpu: 55, memory: 65 } },
+              { id: 'gcp-sql', name: 'cloud-sql', type: 'database', status: 'warning', metrics: { cpu: 78, memory: 82 } },
+              { id: 'gcp-storage', name: 'cloud-storage', type: 'storage', status: 'healthy' },
+            ],
+          },
+        ],
+      },
+      {
+        id: 'azure-region',
+        name: 'eastus',
+        type: 'region',
+        status: 'healthy',
+        provider: 'azure',
+        region: 'East US',
+        children: [
+          {
+            id: 'azure-vnet',
+            name: 'azure-production-vnet',
+            type: 'vpc',
+            status: 'healthy',
+            children: [
+              { id: 'azure-vm', name: 'azure-vm-scale-set', type: 'server', status: 'healthy', metrics: { cpu: 40, memory: 55 } },
+              { id: 'azure-sql', name: 'azure-sql-db', type: 'database', status: 'healthy', metrics: { cpu: 30, memory: 45 } },
+              { id: 'azure-redis', name: 'azure-cache', type: 'cache', status: 'healthy', metrics: { memory: 28 } },
+            ],
+          },
+        ],
+      },
+    ]
+
+    return (
+      <div className="p-6">
+        <InfrastructureMap
+          resources={multiCloudResources}
+          onResourceClick={(resource) => console.log('Resource:', resource.name)}
+        />
+      </div>
+    )
+  },
+}
+
+export const KubernetesCluster: Story = {
+  render: () => {
+    const k8sResources: InfraResource[] = [
+      {
+        id: 'k8s-cluster',
+        name: 'production-cluster',
+        type: 'container',
+        status: 'healthy',
+        provider: 'aws',
+        children: [
+          {
+            id: 'node-pool-1',
+            name: 'system-nodes',
+            type: 'server',
+            status: 'healthy',
+            children: [
+              { id: 'node-1', name: 'node-1', type: 'server', status: 'healthy', metrics: { cpu: 35, memory: 50 } },
+              { id: 'node-2', name: 'node-2', type: 'server', status: 'healthy', metrics: { cpu: 42, memory: 55 } },
+            ],
+          },
+          {
+            id: 'node-pool-2',
+            name: 'app-nodes',
+            type: 'server',
+            status: 'warning',
+            children: [
+              { id: 'node-3', name: 'app-node-1', type: 'server', status: 'healthy', metrics: { cpu: 60, memory: 70 } },
+              { id: 'node-4', name: 'app-node-2', type: 'server', status: 'warning', metrics: { cpu: 85, memory: 82 } },
+              { id: 'node-5', name: 'app-node-3', type: 'server', status: 'healthy', metrics: { cpu: 55, memory: 65 } },
+            ],
+          },
+          {
+            id: 'node-pool-3',
+            name: 'data-nodes',
+            type: 'server',
+            status: 'healthy',
+            children: [
+              { id: 'node-6', name: 'data-node-1', type: 'server', status: 'healthy', metrics: { cpu: 45, memory: 75 } },
+              { id: 'node-7', name: 'data-node-2', type: 'server', status: 'healthy', metrics: { cpu: 48, memory: 78 } },
+            ],
+          },
+        ],
+      },
+    ]
+
+    return (
+      <div className="p-6">
+        <InfrastructureMap
+          resources={k8sResources}
+          onResourceClick={(resource) => console.log('Resource:', resource.name)}
+        />
+      </div>
+    )
+  },
+}
+
+export const MaintenanceMode: Story = {
+  render: () => {
+    const maintenanceResources: InfraResource[] = [
+      {
+        id: 'region-us-east-1',
+        name: 'us-east-1',
+        type: 'region',
+        status: 'healthy',
+        provider: 'aws',
+        children: [
+          {
+            id: 'vpc-prod',
+            name: 'production-vpc',
+            type: 'vpc',
+            status: 'healthy',
+            children: [
+              { id: 'alb', name: 'api-lb', type: 'loadbalancer', status: 'healthy' },
+              { id: 'ec2-1', name: 'api-server-1', type: 'server', status: 'healthy' },
+              { id: 'ec2-2', name: 'api-server-2', type: 'maintenance', metrics: { cpu: 0, memory: 0 } },
+              { id: 'rds-primary', name: 'postgres-primary', type: 'database', status: 'healthy' },
+              { id: 'rds-replica', name: 'postgres-replica', type: 'database', status: 'maintenance' },
+            ],
+          },
+        ],
+      },
+    ]
+
+    return (
+      <div className="p-6">
+        <InfrastructureMap
+          resources={maintenanceResources}
+          onResourceClick={(resource) => console.log('Resource:', resource.name)}
+        />
+      </div>
+    )
+  },
+}
+
+export const LargeInfrastructure: Story = {
+  render: () => {
+    const generateServers = (prefix: string, count: number, baseStatus: ResourceStatus = 'healthy'): InfraResource[] =>
+      Array.from({ length: count }, (_, i) => ({
+        id: `${prefix}-${i}`,
+        name: `${prefix}-${i + 1}`,
+        type: 'server' as ResourceType,
+        status: i === 2 ? 'warning' : baseStatus,
+        metrics: {
+          cpu: 30 + Math.random() * 40,
+          memory: 40 + Math.random() * 30,
+        },
+      }))
+
+    const largeResources: InfraResource[] = [
+      {
+        id: 'region-us-east',
+        name: 'us-east-1',
+        type: 'region',
+        status: 'healthy',
+        provider: 'aws',
+        children: [
+          {
+            id: 'vpc-prod',
+            name: 'production-vpc',
+            type: 'vpc',
+            status: 'healthy',
+            children: [
+              {
+                id: 'subnet-web',
+                name: 'web-tier',
+                type: 'subnet',
+                status: 'healthy',
+                children: [
+                  { id: 'alb', name: 'api-alb', type: 'loadbalancer', status: 'healthy' },
+                  ...generateServers('web', 8),
+                ],
+              },
+              {
+                id: 'subnet-app',
+                name: 'app-tier',
+                type: 'subnet',
+                status: 'warning',
+                children: generateServers('app', 12),
+              },
+              {
+                id: 'subnet-data',
+                name: 'data-tier',
+                type: 'subnet',
+                status: 'healthy',
+                children: [
+                  { id: 'rds-primary', name: 'postgres-primary', type: 'database', status: 'healthy' },
+                  { id: 'rds-replica-1', name: 'postgres-replica-1', type: 'database', status: 'healthy' },
+                  { id: 'rds-replica-2', name: 'postgres-replica-2', type: 'database', status: 'healthy' },
+                  { id: 'redis-cluster', name: 'redis-cache', type: 'cache', status: 'healthy' },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+      {
+        id: 'region-eu-west',
+        name: 'eu-west-1',
+        type: 'region',
+        status: 'healthy',
+        provider: 'aws',
+        children: [
+          {
+            id: 'vpc-eu',
+            name: 'eu-production-vpc',
+            type: 'vpc',
+            status: 'healthy',
+            children: generateServers('eu-web', 4),
+          },
+        ],
+      },
+    ]
+
+    return (
+      <div className="p-6">
+        <InfrastructureMap
+          resources={largeResources}
+          onResourceClick={(resource) => console.log('Resource:', resource.name)}
+          onRefresh={() => console.log('Refresh')}
+        />
+      </div>
+    )
+  },
+}
+
+export const Empty: Story = {
+  render: () => (
+    <div className="p-6">
+      <InfrastructureMap
+        resources={[]}
+        onRefresh={() => console.log('Refresh')}
+      />
+    </div>
+  ),
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [resources, setResources] = React.useState(defaultInfraResources)
+    const [selectedResource, setSelectedResource] = React.useState<InfraResource | null>(null)
+
+    // Simulate real-time metrics updates
+    React.useEffect(() => {
+      const interval = setInterval(() => {
+        const updateMetrics = (items: InfraResource[]): InfraResource[] =>
+          items.map(item => ({
+            ...item,
+            metrics: item.metrics
+              ? {
+                  ...item.metrics,
+                  cpu: item.metrics.cpu !== undefined
+                    ? Math.max(0, Math.min(100, item.metrics.cpu + (Math.random() - 0.5) * 10))
+                    : undefined,
+                  memory: item.metrics.memory !== undefined
+                    ? Math.max(0, Math.min(100, item.metrics.memory + (Math.random() - 0.5) * 5))
+                    : undefined,
+                }
+              : undefined,
+            children: item.children ? updateMetrics(item.children) : undefined,
+          }))
+
+        setResources(prev => updateMetrics(prev))
+      }, 3000)
+
+      return () => clearInterval(interval)
+    }, [])
+
+    return (
+      <div className="p-6">
+        <InfrastructureMap
+          resources={resources}
+          onResourceClick={(resource) => {
+            setSelectedResource(resource)
+            alert(`Selected: ${resource.name}\nType: ${resource.type}\nStatus: ${resource.status}${resource.metrics?.cpu !== undefined ? `\nCPU: ${Math.round(resource.metrics.cpu)}%` : ''}${resource.metrics?.memory !== undefined ? `\nMemory: ${Math.round(resource.metrics.memory)}%` : ''}`)
+          }}
+          onRefresh={() => setResources([...defaultInfraResources])}
+        />
+      </div>
+    )
+  },
+}
+
+export const InfraDashboard: 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">Infrastructure Overview</h1>
+            <p className="text-sm text-muted-foreground">Multi-Cloud Resource Management</p>
+          </div>
+          <nav className="flex gap-4 text-sm">
+            <a href="#" className="text-foreground font-medium">Resources</a>
+            <a href="#" className="text-muted-foreground hover:text-foreground">Networking</a>
+            <a href="#" className="text-muted-foreground hover:text-foreground">Security</a>
+            <a href="#" className="text-muted-foreground hover:text-foreground">Cost</a>
+          </nav>
+        </div>
+      </header>
+      <main className="p-6">
+        <InfrastructureMap
+          resources={defaultInfraResources}
+          onResourceClick={(resource) => console.log('Resource:', resource.name)}
+          onRefresh={() => console.log('Refresh')}
+        />
+      </main>
+    </div>
+  ),
+}