@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/waka-query-explain/WakaQueryExplain.stories.tsx

@@ -0,0 +1,407 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaQueryExplain, defaultQueryPlan } from './index'
+import type { QueryPlan, ExplainNode } from './index'
+import * as React from 'react'
+
+const simpleIndexScan: QueryPlan = {
+  query: `SELECT * FROM users WHERE id = 123;`,
+  planningTime: 0.05,
+  executionTime: 0.12,
+  totalCost: 8.27,
+  rootNode: {
+    id: '1',
+    type: 'Index Scan',
+    relation: 'users',
+    indexName: 'users_pkey',
+    filter: 'id = 123',
+    startupCost: 0.00,
+    totalCost: 8.27,
+    rows: 1,
+    actualRows: 1,
+    actualTime: 0.12,
+  },
+}
+
+const fullTableScan: QueryPlan = {
+  query: `SELECT * FROM orders WHERE status = 'pending' AND total > 100;`,
+  planningTime: 0.08,
+  executionTime: 1250.45,
+  totalCost: 25000.00,
+  rootNode: {
+    id: '1',
+    type: 'Seq Scan',
+    relation: 'orders',
+    filter: "status = 'pending' AND total > 100",
+    startupCost: 0.00,
+    totalCost: 25000.00,
+    rows: 5000,
+    actualRows: 4856,
+    actualTime: 1250.45,
+    warnings: ['Consider adding an index on orders(status, total)'],
+    buffers: {
+      sharedHit: 5000,
+      sharedRead: 15000,
+    },
+  },
+}
+
+const complexJoin: QueryPlan = {
+  query: `SELECT o.id, o.total, c.name, c.email
+FROM orders o
+JOIN customers c ON c.id = o.customer_id
+JOIN order_items oi ON oi.order_id = o.id
+WHERE o.created_at > '2024-01-01'
+ORDER BY o.total DESC;`,
+  planningTime: 0.85,
+  executionTime: 125.67,
+  totalCost: 5420.50,
+  rootNode: {
+    id: '1',
+    type: 'Sort',
+    sortKey: ['o.total DESC'],
+    startupCost: 5400.00,
+    totalCost: 5420.50,
+    rows: 2500,
+    actualRows: 2456,
+    actualTime: 125.67,
+    children: [
+      {
+        id: '2',
+        type: 'Hash Join',
+        joinType: 'Inner',
+        startupCost: 100.00,
+        totalCost: 5350.00,
+        rows: 2500,
+        actualRows: 2456,
+        actualTime: 95.45,
+        children: [
+          {
+            id: '3',
+            type: 'Hash Join',
+            joinType: 'Inner',
+            startupCost: 50.00,
+            totalCost: 2500.00,
+            rows: 1000,
+            actualRows: 982,
+            actualTime: 45.20,
+            children: [
+              {
+                id: '4',
+                type: 'Index Scan',
+                relation: 'orders',
+                alias: 'o',
+                indexName: 'idx_orders_created_at',
+                filter: "created_at > '2024-01-01'",
+                startupCost: 0.00,
+                totalCost: 500.00,
+                rows: 1000,
+                actualRows: 982,
+                actualTime: 12.50,
+              },
+              {
+                id: '5',
+                type: 'Hash',
+                startupCost: 45.00,
+                totalCost: 45.00,
+                rows: 500,
+                actualRows: 500,
+                actualTime: 8.00,
+                children: [
+                  {
+                    id: '6',
+                    type: 'Seq Scan',
+                    relation: 'customers',
+                    alias: 'c',
+                    startupCost: 0.00,
+                    totalCost: 35.00,
+                    rows: 500,
+                    actualRows: 500,
+                    actualTime: 5.00,
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            id: '7',
+            type: 'Hash',
+            startupCost: 100.00,
+            totalCost: 100.00,
+            rows: 10000,
+            actualRows: 10000,
+            actualTime: 25.00,
+            children: [
+              {
+                id: '8',
+                type: 'Index Only Scan',
+                relation: 'order_items',
+                alias: 'oi',
+                indexName: 'idx_order_items_order_id',
+                startupCost: 0.00,
+                totalCost: 80.00,
+                rows: 10000,
+                actualRows: 10000,
+                actualTime: 18.00,
+                buffers: {
+                  sharedHit: 500,
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+}
+
+const aggregateQuery: QueryPlan = {
+  query: `SELECT customer_id, COUNT(*), SUM(total)
+FROM orders
+GROUP BY customer_id
+HAVING COUNT(*) > 5;`,
+  planningTime: 0.15,
+  executionTime: 85.30,
+  totalCost: 3500.00,
+  rootNode: {
+    id: '1',
+    type: 'Aggregate',
+    startupCost: 3200.00,
+    totalCost: 3500.00,
+    rows: 150,
+    actualRows: 142,
+    actualTime: 85.30,
+    filter: 'count(*) > 5',
+    children: [
+      {
+        id: '2',
+        type: 'Sort',
+        sortKey: ['customer_id'],
+        startupCost: 2500.00,
+        totalCost: 3000.00,
+        rows: 50000,
+        actualRows: 48500,
+        actualTime: 65.00,
+        children: [
+          {
+            id: '3',
+            type: 'Seq Scan',
+            relation: 'orders',
+            startupCost: 0.00,
+            totalCost: 2000.00,
+            rows: 50000,
+            actualRows: 48500,
+            actualTime: 35.00,
+          },
+        ],
+      },
+    ],
+  },
+}
+
+const parallelQuery: QueryPlan = {
+  query: `SELECT COUNT(*) FROM large_table WHERE status = 'active';`,
+  planningTime: 0.25,
+  executionTime: 450.00,
+  totalCost: 15000.00,
+  rootNode: {
+    id: '1',
+    type: 'Aggregate',
+    startupCost: 14500.00,
+    totalCost: 15000.00,
+    rows: 1,
+    actualRows: 1,
+    actualTime: 450.00,
+    children: [
+      {
+        id: '2',
+        type: 'Gather',
+        startupCost: 1000.00,
+        totalCost: 14000.00,
+        rows: 4,
+        actualRows: 4,
+        actualTime: 445.00,
+        children: [
+          {
+            id: '3',
+            type: 'Aggregate',
+            startupCost: 13000.00,
+            totalCost: 13500.00,
+            rows: 1,
+            actualRows: 1,
+            actualTime: 110.00,
+            loops: 4,
+            children: [
+              {
+                id: '4',
+                type: 'Seq Scan',
+                relation: 'large_table',
+                filter: "status = 'active'",
+                startupCost: 0.00,
+                totalCost: 12000.00,
+                rows: 2500000,
+                actualRows: 2450000,
+                actualTime: 95.00,
+                loops: 4,
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+}
+
+const meta: Meta<typeof WakaQueryExplain> = {
+  title: 'Components/DevOps/WakaQueryExplain',
+  component: WakaQueryExplain,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A SQL query explain analyzer with node tree visualization, cost bars, row estimates vs actuals, warnings, and buffer statistics.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    showActual: {
+      control: 'boolean',
+      description: 'Show actual execution statistics',
+    },
+    showBuffers: {
+      control: 'boolean',
+      description: 'Show buffer statistics',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaQueryExplain>
+
+export const Default: Story = {
+  args: {
+    plan: defaultQueryPlan,
+  },
+  render: (args) => (
+    <div className="w-[800px] h-[600px]">
+      <WakaQueryExplain
+        {...args}
+        onNodeClick={(node) => console.log('Node click:', node)}
+      />
+    </div>
+  ),
+}
+
+export const SimpleIndexScan: Story = {
+  render: () => (
+    <div className="w-[800px] h-[400px]">
+      <p className="text-sm text-muted-foreground mb-4">
+        Optimal query using primary key index
+      </p>
+      <WakaQueryExplain plan={simpleIndexScan} />
+    </div>
+  ),
+}
+
+export const FullTableScan: Story = {
+  render: () => (
+    <div className="w-[800px] h-[400px]">
+      <p className="text-sm text-muted-foreground mb-4">
+        Problematic query with sequential scan warning
+      </p>
+      <WakaQueryExplain plan={fullTableScan} showBuffers />
+    </div>
+  ),
+}
+
+export const ComplexJoin: Story = {
+  render: () => (
+    <div className="w-[800px] h-[700px]">
+      <p className="text-sm text-muted-foreground mb-4">
+        Multi-table join with hash joins and sorting
+      </p>
+      <WakaQueryExplain
+        plan={complexJoin}
+        showBuffers
+        onNodeClick={(node) => console.log('Node click:', node)}
+      />
+    </div>
+  ),
+}
+
+export const AggregateQuery: Story = {
+  render: () => (
+    <div className="w-[800px] h-[500px]">
+      <WakaQueryExplain plan={aggregateQuery} />
+    </div>
+  ),
+}
+
+export const ParallelQuery: Story = {
+  render: () => (
+    <div className="w-[800px] h-[500px]">
+      <p className="text-sm text-muted-foreground mb-4">
+        Parallel query execution with Gather node
+      </p>
+      <WakaQueryExplain plan={parallelQuery} />
+    </div>
+  ),
+}
+
+export const WithBuffers: Story = {
+  render: () => (
+    <div className="w-[900px] h-[600px]">
+      <WakaQueryExplain
+        plan={defaultQueryPlan}
+        showBuffers
+      />
+    </div>
+  ),
+}
+
+export const NoActualStats: Story = {
+  render: () => (
+    <div className="w-[800px] h-[600px]">
+      <p className="text-sm text-muted-foreground mb-4">
+        Estimated plan only (no ANALYZE data)
+      </p>
+      <WakaQueryExplain
+        plan={defaultQueryPlan}
+        showActual={false}
+      />
+    </div>
+  ),
+}
+
+export const QueryAnalyzer: 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">Query Analyzer</h2>
+          <p className="text-sm text-muted-foreground">
+            PostgreSQL 15.4 • production-db
+          </p>
+        </div>
+        <div className="flex items-center gap-4 text-sm">
+          <div>
+            <span className="text-muted-foreground">Planning: </span>
+            <span className="font-medium">{defaultQueryPlan.planningTime?.toFixed(2)}ms</span>
+          </div>
+          <div>
+            <span className="text-muted-foreground">Execution: </span>
+            <span className="font-medium">{defaultQueryPlan.executionTime?.toFixed(2)}ms</span>
+          </div>
+        </div>
+      </div>
+
+      <div className="w-[750px]">
+        <WakaQueryExplain
+          plan={defaultQueryPlan}
+          showBuffers
+          onNodeClick={(node) => console.log('Node click:', node)}
+        />
+      </div>
+    </div>
+  ),
+}