@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/waka-trace-viewer/WakaTraceViewer.stories.tsx

@@ -0,0 +1,445 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaTraceViewer, defaultTraceSpans } from './index'
+import type { TraceSpan, SpanStatus } from './index'
+import * as React from 'react'
+
+const errorTrace: TraceSpan[] = [
+  {
+    id: 'span-1',
+    traceId: 'error-trace-123',
+    operationName: 'HTTP POST /api/orders',
+    serviceName: 'api-gateway',
+    startTime: 0,
+    duration: 512,
+    status: 'error',
+    children: [
+      {
+        id: 'span-2',
+        traceId: 'error-trace-123',
+        parentId: 'span-1',
+        operationName: 'validateOrder',
+        serviceName: 'order-service',
+        startTime: 10,
+        duration: 45,
+        status: 'ok',
+      },
+      {
+        id: 'span-3',
+        traceId: 'error-trace-123',
+        parentId: 'span-1',
+        operationName: 'processPayment',
+        serviceName: 'payment-service',
+        startTime: 60,
+        duration: 380,
+        status: 'error',
+        children: [
+          {
+            id: 'span-4',
+            traceId: 'error-trace-123',
+            parentId: 'span-3',
+            operationName: 'chargeCard',
+            serviceName: 'stripe-adapter',
+            startTime: 65,
+            duration: 350,
+            status: 'error',
+            tags: { 'error.type': 'PaymentDeclined', 'card.last4': '4242' },
+          },
+        ],
+      },
+      {
+        id: 'span-5',
+        traceId: 'error-trace-123',
+        parentId: 'span-1',
+        operationName: 'rollbackOrder',
+        serviceName: 'order-service',
+        startTime: 450,
+        duration: 55,
+        status: 'ok',
+      },
+    ],
+  },
+]
+
+const deepTrace: TraceSpan[] = [
+  {
+    id: 'root',
+    traceId: 'deep-trace',
+    operationName: 'HTTP GET /api/dashboard',
+    serviceName: 'frontend-api',
+    startTime: 0,
+    duration: 850,
+    status: 'ok',
+    children: [
+      {
+        id: 'l1-1',
+        traceId: 'deep-trace',
+        parentId: 'root',
+        operationName: 'fetchUserData',
+        serviceName: 'user-service',
+        startTime: 5,
+        duration: 200,
+        status: 'ok',
+        children: [
+          {
+            id: 'l2-1',
+            traceId: 'deep-trace',
+            parentId: 'l1-1',
+            operationName: 'getUserById',
+            serviceName: 'user-db',
+            startTime: 10,
+            duration: 45,
+            status: 'ok',
+          },
+          {
+            id: 'l2-2',
+            traceId: 'deep-trace',
+            parentId: 'l1-1',
+            operationName: 'getPreferences',
+            serviceName: 'preferences-service',
+            startTime: 60,
+            duration: 120,
+            status: 'ok',
+            children: [
+              {
+                id: 'l3-1',
+                traceId: 'deep-trace',
+                parentId: 'l2-2',
+                operationName: 'cache.get',
+                serviceName: 'redis',
+                startTime: 65,
+                duration: 5,
+                status: 'ok',
+              },
+              {
+                id: 'l3-2',
+                traceId: 'deep-trace',
+                parentId: 'l2-2',
+                operationName: 'SELECT * FROM prefs',
+                serviceName: 'postgres',
+                startTime: 75,
+                duration: 95,
+                status: 'ok',
+              },
+            ],
+          },
+        ],
+      },
+      {
+        id: 'l1-2',
+        traceId: 'deep-trace',
+        parentId: 'root',
+        operationName: 'fetchMetrics',
+        serviceName: 'metrics-service',
+        startTime: 210,
+        duration: 300,
+        status: 'ok',
+      },
+      {
+        id: 'l1-3',
+        traceId: 'deep-trace',
+        parentId: 'root',
+        operationName: 'fetchNotifications',
+        serviceName: 'notification-service',
+        startTime: 515,
+        duration: 250,
+        status: 'ok',
+      },
+    ],
+  },
+]
+
+const microservicesTrace: TraceSpan[] = [
+  {
+    id: 'gateway',
+    traceId: 'microservices-demo',
+    operationName: 'HTTP GET /api/products/123',
+    serviceName: 'api-gateway',
+    startTime: 0,
+    duration: 156,
+    status: 'ok',
+    children: [
+      {
+        id: 'auth',
+        traceId: 'microservices-demo',
+        parentId: 'gateway',
+        operationName: 'validateToken',
+        serviceName: 'auth-service',
+        startTime: 2,
+        duration: 12,
+        status: 'ok',
+      },
+      {
+        id: 'product',
+        traceId: 'microservices-demo',
+        parentId: 'gateway',
+        operationName: 'getProduct',
+        serviceName: 'product-service',
+        startTime: 18,
+        duration: 85,
+        status: 'ok',
+      },
+      {
+        id: 'inventory',
+        traceId: 'microservices-demo',
+        parentId: 'gateway',
+        operationName: 'checkStock',
+        serviceName: 'inventory-service',
+        startTime: 18,
+        duration: 42,
+        status: 'ok',
+      },
+      {
+        id: 'pricing',
+        traceId: 'microservices-demo',
+        parentId: 'gateway',
+        operationName: 'getPrice',
+        serviceName: 'pricing-service',
+        startTime: 18,
+        duration: 35,
+        status: 'ok',
+      },
+      {
+        id: 'cache',
+        traceId: 'microservices-demo',
+        parentId: 'gateway',
+        operationName: 'cache.set',
+        serviceName: 'redis',
+        startTime: 108,
+        duration: 8,
+        status: 'ok',
+      },
+      {
+        id: 'serialize',
+        traceId: 'microservices-demo',
+        parentId: 'gateway',
+        operationName: 'serializeResponse',
+        serviceName: 'api-gateway',
+        startTime: 120,
+        duration: 32,
+        status: 'ok',
+      },
+    ],
+  },
+]
+
+const meta: Meta<typeof WakaTraceViewer> = {
+  title: 'Components/DevOps/WakaTraceViewer',
+  component: WakaTraceViewer,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A distributed tracing viewer with span hierarchy, timeline visualization, service colors, and expand/collapse functionality.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    showServiceColors: {
+      control: 'boolean',
+      description: 'Show service color legend',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaTraceViewer>
+
+export const Default: Story = {
+  args: {
+    spans: defaultTraceSpans,
+    traceId: 'abc123def456789012345678',
+  },
+  render: (args) => (
+    <div className="w-[900px] h-[500px]">
+      <WakaTraceViewer
+        {...args}
+        onSpanClick={(span) => console.log('Click:', span)}
+        onCopyTraceId={(id) => console.log('Copy:', id)}
+      />
+    </div>
+  ),
+}
+
+export const ErrorTrace: Story = {
+  render: () => (
+    <div className="w-[900px] h-[500px]">
+      <p className="text-sm text-muted-foreground mb-4">
+        Trace showing a failed payment flow
+      </p>
+      <WakaTraceViewer
+        spans={errorTrace}
+        traceId="error-trace-123456"
+        onSpanClick={(span) => console.log('Click:', span)}
+      />
+    </div>
+  ),
+}
+
+export const DeepHierarchy: Story = {
+  render: () => (
+    <div className="w-[900px] h-[500px]">
+      <p className="text-sm text-muted-foreground mb-4">
+        Deep nested trace with multiple service calls
+      </p>
+      <WakaTraceViewer
+        spans={deepTrace}
+        traceId="deep-trace-789012"
+        onSpanClick={(span) => console.log('Click:', span)}
+      />
+    </div>
+  ),
+}
+
+export const Microservices: Story = {
+  render: () => (
+    <div className="w-[900px] h-[500px]">
+      <WakaTraceViewer
+        spans={microservicesTrace}
+        traceId="microservices-demo-456"
+        onSpanClick={(span) => console.log('Click:', span)}
+      />
+    </div>
+  ),
+}
+
+export const NoServiceColors: Story = {
+  render: () => (
+    <div className="w-[900px] h-[400px]">
+      <WakaTraceViewer
+        spans={defaultTraceSpans}
+        traceId="abc123def456"
+        showServiceColors={false}
+      />
+    </div>
+  ),
+}
+
+export const MultipleRootSpans: Story = {
+  render: () => {
+    const multipleRoots: TraceSpan[] = [
+      {
+        id: 'root-1',
+        traceId: 'multi-root',
+        operationName: 'HTTP GET /api/users',
+        serviceName: 'api-gateway',
+        startTime: 0,
+        duration: 120,
+        status: 'ok',
+        children: [
+          {
+            id: 'child-1',
+            traceId: 'multi-root',
+            parentId: 'root-1',
+            operationName: 'query users',
+            serviceName: 'user-service',
+            startTime: 5,
+            duration: 100,
+            status: 'ok',
+          },
+        ],
+      },
+      {
+        id: 'root-2',
+        traceId: 'multi-root',
+        operationName: 'HTTP GET /api/products',
+        serviceName: 'api-gateway',
+        startTime: 150,
+        duration: 80,
+        status: 'ok',
+        children: [
+          {
+            id: 'child-2',
+            traceId: 'multi-root',
+            parentId: 'root-2',
+            operationName: 'query products',
+            serviceName: 'product-service',
+            startTime: 155,
+            duration: 65,
+            status: 'ok',
+          },
+        ],
+      },
+    ]
+
+    return (
+      <div className="w-[900px] h-[400px]">
+        <WakaTraceViewer
+          spans={multipleRoots}
+          traceId="multi-root-trace"
+        />
+      </div>
+    )
+  },
+}
+
+export const LongOperationNames: Story = {
+  render: () => {
+    const longNames: TraceSpan[] = [
+      {
+        id: '1',
+        traceId: 'long-names',
+        operationName: 'HTTP POST /api/v2/organizations/{orgId}/projects/{projectId}/deployments',
+        serviceName: 'deployment-controller',
+        startTime: 0,
+        duration: 500,
+        status: 'ok',
+        children: [
+          {
+            id: '2',
+            traceId: 'long-names',
+            parentId: '1',
+            operationName: 'validateDeploymentConfiguration.checkResourceLimits.validateCPUAndMemory',
+            serviceName: 'validator-service',
+            startTime: 10,
+            duration: 100,
+            status: 'ok',
+          },
+        ],
+      },
+    ]
+
+    return (
+      <div className="w-[900px] h-[300px]">
+        <WakaTraceViewer spans={longNames} traceId="long-names-123" />
+      </div>
+    )
+  },
+}
+
+export const Empty: Story = {
+  render: () => (
+    <div className="w-[900px] h-[300px]">
+      <WakaTraceViewer spans={[]} traceId="empty-trace" />
+    </div>
+  ),
+}
+
+export const ObservabilityDashboard: Story = {
+  render: () => (
+    <div className="p-6 rounded-xl border bg-card">
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h2 className="text-xl font-bold">Trace Details</h2>
+          <p className="text-sm text-muted-foreground">Request: GET /api/users</p>
+        </div>
+        <div className="flex items-center gap-2 text-sm">
+          <span className="text-muted-foreground">Status:</span>
+          <span className="text-green-500 font-medium">Completed</span>
+        </div>
+      </div>
+
+      <div className="w-[850px]">
+        <WakaTraceViewer
+          spans={defaultTraceSpans}
+          traceId="abc123def456789012345678901234"
+          onSpanClick={(span) => console.log('Click:', span)}
+          onCopyTraceId={(id) => {
+            navigator.clipboard?.writeText(id)
+            alert('Trace ID copied!')
+          }}
+        />
+      </div>
+    </div>
+  ),
+}