@wakastellar/ui 2.3.4 → 2.4.0

package/src/blocks/apm-overview/APMOverview.stories.tsx

@@ -0,0 +1,435 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import {
+  APMOverview,
+  defaultAPMServices,
+  defaultAPMTransactions,
+} from './index'
+import type { APMService, APMTransaction, TimeRange } from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof APMOverview> = {
+  title: 'Blocks/APMOverview',
+  component: APMOverview,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'An Application Performance Monitoring (APM) overview dashboard with service health, response times, error rates, and recent transaction tracking.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof APMOverview>
+
+export const Default: Story = {
+  render: () => (
+    <div className="p-6">
+      <APMOverview
+        services={defaultAPMServices}
+        recentTransactions={defaultAPMTransactions}
+        onServiceClick={(service) => console.log('Service clicked:', service)}
+        onTransactionClick={(tx) => console.log('Transaction clicked:', tx)}
+        onRefresh={() => console.log('Refresh')}
+      />
+    </div>
+  ),
+}
+
+export const AllHealthy: Story = {
+  render: () => {
+    const healthyServices: APMService[] = defaultAPMServices.map(service => ({
+      ...service,
+      status: 'healthy' as const,
+      metrics: {
+        ...service.metrics,
+        errorRate: Math.random() * 0.5,
+        successRate: 99.5 + Math.random() * 0.5,
+      },
+    }))
+
+    return (
+      <div className="p-6">
+        <APMOverview
+          services={healthyServices}
+          recentTransactions={defaultAPMTransactions.filter(tx => tx.status === 'success')}
+          onServiceClick={(service) => console.log('Service clicked:', service)}
+        />
+      </div>
+    )
+  },
+}
+
+export const WithCriticalService: Story = {
+  render: () => {
+    const servicesWithCritical: APMService[] = [
+      {
+        id: 'critical-1',
+        name: 'payment-gateway',
+        type: 'api',
+        status: 'critical',
+        version: '1.5.0',
+        instances: 2,
+        metrics: {
+          requestsPerSecond: 50,
+          avgResponseTime: 2500,
+          p50ResponseTime: 1800,
+          p95ResponseTime: 4500,
+          p99ResponseTime: 8000,
+          errorRate: 15.5,
+          successRate: 84.5,
+          activeConnections: 200,
+          cpuUsage: 95,
+          memoryUsage: 92,
+        },
+        tags: ['production', 'payment', 'critical'],
+      },
+      ...defaultAPMServices,
+    ]
+
+    const transactionsWithErrors: APMTransaction[] = [
+      { id: 'err-1', name: 'POST /api/payments/process', service: 'payment-gateway', duration: 8500, timestamp: new Date(Date.now() - 10000), status: 'error' },
+      { id: 'err-2', name: 'POST /api/payments/validate', service: 'payment-gateway', duration: 5200, timestamp: new Date(Date.now() - 30000), status: 'error' },
+      { id: 'err-3', name: 'GET /api/payments/status', service: 'payment-gateway', duration: 3100, timestamp: new Date(Date.now() - 45000), status: 'error' },
+      ...defaultAPMTransactions,
+    ]
+
+    return (
+      <div className="p-6">
+        <APMOverview
+          services={servicesWithCritical}
+          recentTransactions={transactionsWithErrors}
+          onServiceClick={(service) => console.log('Service clicked:', service)}
+        />
+      </div>
+    )
+  },
+}
+
+export const HighLoad: Story = {
+  render: () => {
+    const highLoadServices: APMService[] = defaultAPMServices.map(service => ({
+      ...service,
+      metrics: {
+        ...service.metrics,
+        requestsPerSecond: service.metrics.requestsPerSecond * 10,
+        activeConnections: service.metrics.activeConnections * 5,
+        cpuUsage: Math.min(95, (service.metrics.cpuUsage || 50) + 30),
+        memoryUsage: Math.min(90, (service.metrics.memoryUsage || 50) + 25),
+      },
+    }))
+
+    return (
+      <div className="p-6">
+        <APMOverview
+          services={highLoadServices}
+          recentTransactions={defaultAPMTransactions}
+          onRefresh={() => console.log('Refresh')}
+        />
+      </div>
+    )
+  },
+}
+
+export const WithTimeRangeSelector: Story = {
+  render: () => {
+    const [timeRange, setTimeRange] = React.useState<TimeRange>('1h')
+
+    return (
+      <div className="p-6">
+        <APMOverview
+          services={defaultAPMServices}
+          recentTransactions={defaultAPMTransactions}
+          timeRange={timeRange}
+          onTimeRangeChange={setTimeRange}
+          onRefresh={() => console.log('Refresh for', timeRange)}
+        />
+      </div>
+    )
+  },
+}
+
+export const ManyServices: Story = {
+  render: () => {
+    const manyServices: APMService[] = [
+      ...defaultAPMServices,
+      {
+        id: '7',
+        name: 'auth-service',
+        type: 'api',
+        status: 'healthy',
+        version: '2.1.0',
+        instances: 3,
+        metrics: {
+          requestsPerSecond: 800,
+          avgResponseTime: 35,
+          p50ResponseTime: 25,
+          p95ResponseTime: 85,
+          p99ResponseTime: 150,
+          errorRate: 0.08,
+          successRate: 99.92,
+          activeConnections: 250,
+          cpuUsage: 40,
+          memoryUsage: 55,
+        },
+        tags: ['auth', 'production'],
+      },
+      {
+        id: '8',
+        name: 'search-service',
+        type: 'api',
+        status: 'warning',
+        version: '1.3.0',
+        instances: 4,
+        metrics: {
+          requestsPerSecond: 450,
+          avgResponseTime: 320,
+          p50ResponseTime: 200,
+          p95ResponseTime: 800,
+          p99ResponseTime: 1500,
+          errorRate: 1.8,
+          successRate: 98.2,
+          activeConnections: 180,
+          cpuUsage: 65,
+          memoryUsage: 70,
+        },
+        tags: ['search', 'elasticsearch'],
+      },
+      {
+        id: '9',
+        name: 'email-worker',
+        type: 'worker',
+        status: 'healthy',
+        instances: 2,
+        metrics: {
+          requestsPerSecond: 100,
+          avgResponseTime: 150,
+          p50ResponseTime: 100,
+          p95ResponseTime: 400,
+          p99ResponseTime: 800,
+          errorRate: 0.5,
+          successRate: 99.5,
+          activeConnections: 0,
+          cpuUsage: 20,
+          memoryUsage: 35,
+        },
+      },
+      {
+        id: '10',
+        name: 'cdn-edge',
+        type: 'web',
+        status: 'healthy',
+        instances: 8,
+        metrics: {
+          requestsPerSecond: 5000,
+          avgResponseTime: 12,
+          p50ResponseTime: 8,
+          p95ResponseTime: 35,
+          p99ResponseTime: 80,
+          errorRate: 0.01,
+          successRate: 99.99,
+          activeConnections: 2000,
+        },
+        tags: ['cdn', 'edge'],
+      },
+    ]
+
+    return (
+      <div className="p-6">
+        <APMOverview
+          services={manyServices}
+          recentTransactions={defaultAPMTransactions}
+          onServiceClick={(service) => console.log('Service:', service.name)}
+        />
+      </div>
+    )
+  },
+}
+
+export const DatabaseHeavy: Story = {
+  render: () => {
+    const dbServices: APMService[] = [
+      {
+        id: '1',
+        name: 'postgres-primary',
+        type: 'database',
+        status: 'healthy',
+        version: '15.4',
+        instances: 1,
+        metrics: {
+          requestsPerSecond: 5000,
+          avgResponseTime: 5,
+          p50ResponseTime: 3,
+          p95ResponseTime: 15,
+          p99ResponseTime: 45,
+          errorRate: 0.001,
+          successRate: 99.999,
+          activeConnections: 150,
+          cpuUsage: 45,
+          memoryUsage: 68,
+        },
+        tags: ['primary', 'production'],
+      },
+      {
+        id: '2',
+        name: 'postgres-replica-1',
+        type: 'database',
+        status: 'healthy',
+        version: '15.4',
+        instances: 1,
+        metrics: {
+          requestsPerSecond: 3000,
+          avgResponseTime: 4,
+          p50ResponseTime: 2,
+          p95ResponseTime: 12,
+          p99ResponseTime: 35,
+          errorRate: 0.001,
+          successRate: 99.999,
+          activeConnections: 80,
+          cpuUsage: 30,
+          memoryUsage: 55,
+        },
+        tags: ['replica', 'read-only'],
+      },
+      {
+        id: '3',
+        name: 'redis-cache',
+        type: 'cache',
+        status: 'healthy',
+        version: '7.2',
+        instances: 3,
+        metrics: {
+          requestsPerSecond: 25000,
+          avgResponseTime: 0.3,
+          p50ResponseTime: 0.2,
+          p95ResponseTime: 0.8,
+          p99ResponseTime: 2,
+          errorRate: 0.0001,
+          successRate: 99.9999,
+          activeConnections: 500,
+          memoryUsage: 42,
+        },
+        tags: ['cache', 'cluster'],
+      },
+      {
+        id: '4',
+        name: 'mongodb-analytics',
+        type: 'database',
+        status: 'warning',
+        version: '7.0',
+        instances: 3,
+        metrics: {
+          requestsPerSecond: 800,
+          avgResponseTime: 85,
+          p50ResponseTime: 50,
+          p95ResponseTime: 250,
+          p99ResponseTime: 500,
+          errorRate: 0.5,
+          successRate: 99.5,
+          activeConnections: 100,
+          cpuUsage: 75,
+          memoryUsage: 82,
+        },
+        tags: ['analytics', 'sharded'],
+      },
+    ]
+
+    return (
+      <div className="p-6">
+        <APMOverview
+          services={dbServices}
+          recentTransactions={[]}
+          onServiceClick={(service) => console.log('Database:', service.name)}
+        />
+      </div>
+    )
+  },
+}
+
+export const Empty: Story = {
+  render: () => (
+    <div className="p-6">
+      <APMOverview
+        services={[]}
+        recentTransactions={[]}
+        onRefresh={() => console.log('Refresh')}
+      />
+    </div>
+  ),
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [services, setServices] = React.useState(defaultAPMServices)
+    const [timeRange, setTimeRange] = React.useState<TimeRange>('1h')
+
+    // Simulate real-time updates
+    React.useEffect(() => {
+      const interval = setInterval(() => {
+        setServices(prev =>
+          prev.map(service => ({
+            ...service,
+            metrics: {
+              ...service.metrics,
+              requestsPerSecond: service.metrics.requestsPerSecond + (Math.random() - 0.5) * 50,
+              avgResponseTime: Math.max(1, service.metrics.avgResponseTime + (Math.random() - 0.5) * 10),
+              cpuUsage: service.metrics.cpuUsage
+                ? Math.min(100, Math.max(0, service.metrics.cpuUsage + (Math.random() - 0.5) * 5))
+                : undefined,
+            },
+          }))
+        )
+      }, 3000)
+
+      return () => clearInterval(interval)
+    }, [])
+
+    return (
+      <div className="p-6">
+        <APMOverview
+          services={services}
+          recentTransactions={defaultAPMTransactions}
+          timeRange={timeRange}
+          onTimeRangeChange={setTimeRange}
+          onServiceClick={(service) => alert(`Viewing details for ${service.name}`)}
+          onTransactionClick={(tx) => alert(`Viewing trace for ${tx.name}`)}
+          onRefresh={() => setServices([...defaultAPMServices])}
+        />
+      </div>
+    )
+  },
+}
+
+export const ObservabilityDashboard: 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">Observability Platform</h1>
+            <p className="text-sm text-muted-foreground">Application Performance Monitoring</p>
+          </div>
+          <nav className="flex gap-4 text-sm">
+            <a href="#" className="text-foreground font-medium">APM</a>
+            <a href="#" className="text-muted-foreground hover:text-foreground">Infrastructure</a>
+            <a href="#" className="text-muted-foreground hover:text-foreground">Logs</a>
+            <a href="#" className="text-muted-foreground hover:text-foreground">Traces</a>
+            <a href="#" className="text-muted-foreground hover:text-foreground">Alerts</a>
+          </nav>
+        </div>
+      </header>
+      <main className="p-6">
+        <APMOverview
+          services={defaultAPMServices}
+          recentTransactions={defaultAPMTransactions}
+          onServiceClick={(service) => console.log('Service:', service)}
+          onTransactionClick={(tx) => console.log('Transaction:', tx)}
+          onRefresh={() => console.log('Refresh')}
+        />
+      </main>
+    </div>
+  ),
+}