@wakastellar/ui 2.3.4 → 2.4.0

package/src/blocks/database-admin/DatabaseAdmin.stories.tsx

@@ -0,0 +1,393 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import {
+  DatabaseAdmin,
+  defaultDatabaseInstance,
+} from './index'
+import type { DatabaseInstance, DatabaseStatus, DatabaseConnection, DatabaseBackup, SlowQuery } from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof DatabaseAdmin> = {
+  title: 'Blocks/DatabaseAdmin',
+  component: DatabaseAdmin,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'A database administration dashboard for PostgreSQL, MySQL, MongoDB, and Redis with connection monitoring, query execution, backup management, and slow query analysis.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof DatabaseAdmin>
+
+export const Default: Story = {
+  render: () => (
+    <div className="p-6">
+      <DatabaseAdmin
+        instance={defaultDatabaseInstance}
+        onExecuteQuery={(query) => console.log('Execute:', query)}
+        onCreateBackup={() => console.log('Create backup')}
+        onRestoreBackup={(backup) => console.log('Restore:', backup.name)}
+        onKillConnection={(conn) => console.log('Kill:', conn.id)}
+        onRefresh={() => console.log('Refresh')}
+      />
+    </div>
+  ),
+}
+
+export const HealthyDatabase: Story = {
+  render: () => {
+    const healthyInstance: DatabaseInstance = {
+      ...defaultDatabaseInstance,
+      status: 'healthy',
+      metrics: {
+        ...defaultDatabaseInstance.metrics,
+        connections: { active: 25, idle: 10, max: 100 },
+        cache: { hitRatio: 99.5, bufferHit: 25000, diskRead: 50 },
+        transactions: { committed: 250000, rolledBack: 5, perSecond: 500 },
+      },
+    }
+
+    return (
+      <div className="p-6">
+        <DatabaseAdmin
+          instance={healthyInstance}
+          onExecuteQuery={(query) => console.log('Execute:', query)}
+          onRefresh={() => console.log('Refresh')}
+        />
+      </div>
+    )
+  },
+}
+
+export const HighLoad: Story = {
+  render: () => {
+    const highLoadInstance: DatabaseInstance = {
+      ...defaultDatabaseInstance,
+      status: 'warning',
+      metrics: {
+        connections: { active: 95, idle: 3, max: 100 },
+        transactions: { committed: 500000, rolledBack: 150, perSecond: 1200 },
+        cache: { hitRatio: 85.2, bufferHit: 8000, diskRead: 1500 },
+        storage: {
+          used: 180 * 1024 * 1024 * 1024,
+          total: 200 * 1024 * 1024 * 1024,
+          tablespace: 160 * 1024 * 1024 * 1024,
+          indexes: 20 * 1024 * 1024 * 1024,
+        },
+        replication: { lag: 250, state: 'catchup', replicas: 2 },
+      },
+      connections: [
+        { id: '1', user: 'api_user', database: 'production', state: 'active', query: 'SELECT * FROM large_table WHERE...', duration: 45, client: '192.168.1.10' },
+        { id: '2', user: 'api_user', database: 'production', state: 'active', duration: 32, client: '192.168.1.11' },
+        { id: '3', user: 'analytics', database: 'production', state: 'idle_in_transaction', query: 'UPDATE analytics SET...', duration: 180, client: '192.168.1.20' },
+        { id: '4', user: 'api_user', database: 'production', state: 'waiting', query: 'INSERT INTO orders...', duration: 15, client: '192.168.1.12' },
+        { id: '5', user: 'batch', database: 'production', state: 'active', query: 'DELETE FROM temp_data WHERE...', duration: 120, client: '192.168.1.30' },
+        ...Array.from({ length: 20 }, (_, i) => ({
+          id: `conn-${i + 6}`,
+          user: 'api_user',
+          database: 'production',
+          state: 'active' as const,
+          duration: Math.random() * 5,
+          client: `192.168.1.${50 + i}`,
+        })),
+      ],
+    }
+
+    return (
+      <div className="p-6">
+        <DatabaseAdmin
+          instance={highLoadInstance}
+          onExecuteQuery={(query) => console.log('Execute:', query)}
+          onKillConnection={(conn) => console.log('Kill connection:', conn.id)}
+          onRefresh={() => console.log('Refresh')}
+        />
+      </div>
+    )
+  },
+}
+
+export const CriticalStatus: Story = {
+  render: () => {
+    const criticalInstance: DatabaseInstance = {
+      ...defaultDatabaseInstance,
+      status: 'critical',
+      metrics: {
+        ...defaultDatabaseInstance.metrics,
+        connections: { active: 100, idle: 0, max: 100 },
+        cache: { hitRatio: 72.5, bufferHit: 5000, diskRead: 2000 },
+        replication: { lag: 5000, state: 'disconnected', replicas: 0 },
+      },
+    }
+
+    return (
+      <div className="p-6">
+        <DatabaseAdmin
+          instance={criticalInstance}
+          onExecuteQuery={(query) => console.log('Execute:', query)}
+          onKillConnection={(conn) => console.log('Kill:', conn.id)}
+          onRefresh={() => console.log('Refresh')}
+        />
+      </div>
+    )
+  },
+}
+
+export const ReplicaDatabase: Story = {
+  render: () => {
+    const replicaInstance: DatabaseInstance = {
+      ...defaultDatabaseInstance,
+      id: '2',
+      name: 'production-db-replica-1',
+      role: 'replica',
+      status: 'healthy',
+      metrics: {
+        ...defaultDatabaseInstance.metrics,
+        connections: { active: 20, idle: 5, max: 50 },
+        replication: { lag: 15, state: 'streaming', replicas: 0 },
+      },
+      connections: defaultDatabaseInstance.connections.slice(0, 3),
+      backups: [],
+    }
+
+    return (
+      <div className="p-6">
+        <DatabaseAdmin
+          instance={replicaInstance}
+          onExecuteQuery={(query) => console.log('Execute:', query)}
+          onRefresh={() => console.log('Refresh')}
+        />
+      </div>
+    )
+  },
+}
+
+export const MySQLDatabase: Story = {
+  render: () => {
+    const mysqlInstance: DatabaseInstance = {
+      ...defaultDatabaseInstance,
+      id: '3',
+      name: 'mysql-primary',
+      type: 'mysql',
+      version: '8.0.35',
+      port: 3306,
+      host: 'mysql.example.com',
+    }
+
+    return (
+      <div className="p-6">
+        <DatabaseAdmin
+          instance={mysqlInstance}
+          onExecuteQuery={(query) => console.log('Execute:', query)}
+          onCreateBackup={() => console.log('Create backup')}
+          onRefresh={() => console.log('Refresh')}
+        />
+      </div>
+    )
+  },
+}
+
+export const MongoDBDatabase: Story = {
+  render: () => {
+    const mongoInstance: DatabaseInstance = {
+      ...defaultDatabaseInstance,
+      id: '4',
+      name: 'mongodb-cluster',
+      type: 'mongodb',
+      version: '7.0.4',
+      port: 27017,
+      host: 'mongodb.example.com',
+      metrics: {
+        connections: { active: 50, idle: 20, max: 200 },
+        transactions: { committed: 80000, rolledBack: 100, perSecond: 150 },
+        cache: { hitRatio: 95.0, bufferHit: 12000, diskRead: 600 },
+        storage: {
+          used: 120 * 1024 * 1024 * 1024,
+          total: 500 * 1024 * 1024 * 1024,
+          tablespace: 100 * 1024 * 1024 * 1024,
+          indexes: 20 * 1024 * 1024 * 1024,
+        },
+      },
+    }
+
+    return (
+      <div className="p-6">
+        <DatabaseAdmin
+          instance={mongoInstance}
+          onExecuteQuery={(query) => console.log('Execute:', query)}
+          onRefresh={() => console.log('Refresh')}
+        />
+      </div>
+    )
+  },
+}
+
+export const WithManySlowQueries: Story = {
+  render: () => {
+    const slowQueries: SlowQuery[] = [
+      { id: '1', query: 'SELECT * FROM orders o JOIN order_items oi ON o.id = oi.order_id JOIN products p ON oi.product_id = p.id WHERE o.created_at > $1', calls: 5000, totalTime: 250000, meanTime: 50, maxTime: 1200, rows: 50000 },
+      { id: '2', query: 'SELECT u.*, (SELECT COUNT(*) FROM orders WHERE user_id = u.id) as order_count FROM users u ORDER BY created_at DESC', calls: 1000, totalTime: 180000, meanTime: 180, maxTime: 2500, rows: 10000 },
+      { id: '3', query: 'UPDATE products SET view_count = view_count + 1, updated_at = NOW() WHERE id = $1', calls: 100000, totalTime: 150000, meanTime: 1.5, maxTime: 50, rows: 1 },
+      { id: '4', query: 'SELECT * FROM analytics_events WHERE event_type IN ($1, $2, $3) AND created_at BETWEEN $4 AND $5 GROUP BY user_id', calls: 500, totalTime: 500000, meanTime: 1000, maxTime: 8000, rows: 100000 },
+      { id: '5', query: 'DELETE FROM sessions WHERE expires_at < NOW()', calls: 24, totalTime: 120000, meanTime: 5000, maxTime: 15000, rows: 500000 },
+      { id: '6', query: 'SELECT pg_sleep(1)', calls: 50, totalTime: 50000, meanTime: 1000, maxTime: 1000, rows: 1 },
+    ]
+
+    const instanceWithSlowQueries: DatabaseInstance = {
+      ...defaultDatabaseInstance,
+      slowQueries,
+    }
+
+    return (
+      <div className="p-6">
+        <DatabaseAdmin
+          instance={instanceWithSlowQueries}
+          onExecuteQuery={(query) => console.log('Execute:', query)}
+          onRefresh={() => console.log('Refresh')}
+        />
+      </div>
+    )
+  },
+}
+
+export const BackupInProgress: Story = {
+  render: () => {
+    const backups: DatabaseBackup[] = [
+      { id: '1', name: 'full-backup-running', type: 'full', status: 'running', startedAt: new Date(Date.now() - 15 * 60000) },
+      { id: '2', name: 'daily-backup-20240110', type: 'full', status: 'completed', size: 45 * 1024 * 1024 * 1024, startedAt: new Date(Date.now() - 24 * 3600000), completedAt: new Date(Date.now() - 22 * 3600000), duration: 7200 },
+      { id: '3', name: 'hourly-backup-20240110-12', type: 'incremental', status: 'completed', size: 250 * 1024 * 1024, startedAt: new Date(Date.now() - 1 * 3600000), completedAt: new Date(Date.now() - 50 * 60000), duration: 600 },
+    ]
+
+    const instanceWithBackup: DatabaseInstance = {
+      ...defaultDatabaseInstance,
+      backups,
+    }
+
+    return (
+      <div className="p-6">
+        <DatabaseAdmin
+          instance={instanceWithBackup}
+          onCreateBackup={() => console.log('Create backup')}
+          onRestoreBackup={(backup) => console.log('Restore:', backup.name)}
+          onRefresh={() => console.log('Refresh')}
+        />
+      </div>
+    )
+  },
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [queryHistory, setQueryHistory] = React.useState<string[]>([])
+
+    const handleExecuteQuery = (query: string) => {
+      setQueryHistory(prev => [query, ...prev.slice(0, 9)])
+      alert(`Executing query:\n${query}`)
+    }
+
+    const handleKillConnection = (conn: DatabaseConnection) => {
+      if (confirm(`Kill connection ${conn.id} from ${conn.user}?`)) {
+        alert(`Connection ${conn.id} terminated`)
+      }
+    }
+
+    const handleCreateBackup = () => {
+      alert('Starting full backup...')
+    }
+
+    const handleRestoreBackup = (backup: DatabaseBackup) => {
+      if (confirm(`Restore from backup "${backup.name}"? This will overwrite current data.`)) {
+        alert(`Restoring from ${backup.name}...`)
+      }
+    }
+
+    return (
+      <div className="p-6">
+        <DatabaseAdmin
+          instance={defaultDatabaseInstance}
+          onExecuteQuery={handleExecuteQuery}
+          onCreateBackup={handleCreateBackup}
+          onRestoreBackup={handleRestoreBackup}
+          onKillConnection={handleKillConnection}
+          onRefresh={() => alert('Refreshing metrics...')}
+        />
+      </div>
+    )
+  },
+}
+
+export const DatabaseAdminPanel: 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">Database Administration</h1>
+            <p className="text-sm text-muted-foreground">PostgreSQL Cluster Management</p>
+          </div>
+          <nav className="flex gap-4 text-sm">
+            <a href="#" className="text-foreground font-medium">Overview</a>
+            <a href="#" className="text-muted-foreground hover:text-foreground">Replication</a>
+            <a href="#" className="text-muted-foreground hover:text-foreground">Users</a>
+            <a href="#" className="text-muted-foreground hover:text-foreground">Settings</a>
+          </nav>
+        </div>
+      </header>
+      <main className="p-6">
+        <DatabaseAdmin
+          instance={defaultDatabaseInstance}
+          onExecuteQuery={(query) => console.log('Execute:', query)}
+          onCreateBackup={() => console.log('Create backup')}
+          onRestoreBackup={(backup) => console.log('Restore:', backup.name)}
+          onKillConnection={(conn) => console.log('Kill:', conn.id)}
+          onRefresh={() => console.log('Refresh')}
+        />
+      </main>
+    </div>
+  ),
+}
+
+export const RedisInstance: Story = {
+  render: () => {
+    const redisInstance: DatabaseInstance = {
+      id: '5',
+      name: 'redis-cache-cluster',
+      type: 'redis',
+      version: '7.2.3',
+      host: 'redis.example.com',
+      port: 6379,
+      status: 'healthy',
+      role: 'primary',
+      metrics: {
+        connections: { active: 150, idle: 50, max: 1000 },
+        transactions: { committed: 1500000, rolledBack: 0, perSecond: 5000 },
+        cache: { hitRatio: 99.8, bufferHit: 50000, diskRead: 100 },
+        storage: {
+          used: 8 * 1024 * 1024 * 1024,
+          total: 32 * 1024 * 1024 * 1024,
+          tablespace: 8 * 1024 * 1024 * 1024,
+          indexes: 0,
+        },
+      },
+      connections: [
+        { id: '1', user: 'default', database: '0', state: 'active', duration: 0.1, client: '192.168.1.10' },
+        { id: '2', user: 'default', database: '0', state: 'active', duration: 0.05, client: '192.168.1.11' },
+      ],
+      backups: [],
+      slowQueries: [],
+    }
+
+    return (
+      <div className="p-6">
+        <DatabaseAdmin
+          instance={redisInstance}
+          onRefresh={() => console.log('Refresh')}
+        />
+      </div>
+    )
+  },
+}