@wakastellar/ui 2.1.2 → 2.3.2

package/src/blocks/database-admin/index.tsx

@@ -0,0 +1,679 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { Badge } from "../../components/badge"
+import { Button } from "../../components/button"
+import { Card, CardContent, CardHeader, CardTitle } from "../../components/card"
+import { Progress } from "../../components/progress"
+import { Input } from "../../components/input"
+import { Textarea } from "../../components/textarea"
+import { ScrollArea } from "../../components/scroll-area"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../components/tabs"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../components/select"
+import {
+  Database,
+  Play,
+  RefreshCw,
+  Download,
+  Upload,
+  Clock,
+  AlertTriangle,
+  CheckCircle2,
+  XCircle,
+  Activity,
+  Users,
+  HardDrive,
+  Zap,
+  ArrowUp,
+  ArrowDown,
+  Search,
+  Copy,
+  Trash2,
+  History,
+  Settings,
+  FileText,
+  Table2,
+  RotateCcw,
+  Terminal,
+} from "lucide-react"
+
+export type DatabaseStatus = "healthy" | "warning" | "critical" | "offline"
+export type BackupStatus = "completed" | "running" | "failed" | "scheduled"
+export type QueryStatus = "success" | "error" | "running"
+
+export interface DatabaseConnection {
+  id: string
+  user: string
+  database: string
+  state: "active" | "idle" | "idle_in_transaction" | "waiting"
+  query?: string
+  duration: number // in seconds
+  client: string
+}
+
+export interface DatabaseBackup {
+  id: string
+  name: string
+  type: "full" | "incremental" | "point_in_time"
+  status: BackupStatus
+  size?: number // in bytes
+  startedAt: Date
+  completedAt?: Date
+  duration?: number // in seconds
+}
+
+export interface SlowQuery {
+  id: string
+  query: string
+  calls: number
+  totalTime: number // in ms
+  meanTime: number // in ms
+  maxTime: number // in ms
+  rows: number
+}
+
+export interface DatabaseMetrics {
+  connections: {
+    active: number
+    idle: number
+    max: number
+  }
+  transactions: {
+    committed: number
+    rolledBack: number
+    perSecond: number
+  }
+  cache: {
+    hitRatio: number
+    bufferHit: number
+    diskRead: number
+  }
+  storage: {
+    used: number // bytes
+    total: number // bytes
+    tablespace: number // bytes
+    indexes: number // bytes
+  }
+  replication?: {
+    lag: number // in ms
+    state: "streaming" | "catchup" | "disconnected"
+    replicas: number
+  }
+}
+
+export interface DatabaseInstance {
+  id: string
+  name: string
+  type: "postgresql" | "mysql" | "mongodb" | "redis"
+  version: string
+  host: string
+  port: number
+  status: DatabaseStatus
+  role: "primary" | "replica" | "standalone"
+  metrics: DatabaseMetrics
+  connections: DatabaseConnection[]
+  backups: DatabaseBackup[]
+  slowQueries: SlowQuery[]
+}
+
+export interface DatabaseAdminProps {
+  instance: DatabaseInstance
+  onExecuteQuery?: (query: string) => void
+  onCreateBackup?: () => void
+  onRestoreBackup?: (backup: DatabaseBackup) => void
+  onKillConnection?: (connection: DatabaseConnection) => void
+  onRefresh?: () => void
+  className?: string
+}
+
+const statusConfig: Record<DatabaseStatus, { color: string; bgColor: string; label: string }> = {
+  healthy: { color: "text-green-500", bgColor: "bg-green-500", label: "Healthy" },
+  warning: { color: "text-yellow-500", bgColor: "bg-yellow-500", label: "Warning" },
+  critical: { color: "text-red-500", bgColor: "bg-red-500", label: "Critical" },
+  offline: { color: "text-gray-500", bgColor: "bg-gray-500", label: "Offline" },
+}
+
+const connectionStateConfig = {
+  active: { color: "text-green-500", label: "Active" },
+  idle: { color: "text-gray-500", label: "Idle" },
+  idle_in_transaction: { color: "text-yellow-500", label: "Idle in Transaction" },
+  waiting: { color: "text-orange-500", label: "Waiting" },
+}
+
+function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+  if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+  return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`
+}
+
+function formatDuration(seconds: number): string {
+  if (seconds < 60) return `${seconds.toFixed(0)}s`
+  if (seconds < 3600) return `${Math.floor(seconds / 60)}m ${Math.floor(seconds % 60)}s`
+  return `${Math.floor(seconds / 3600)}h ${Math.floor((seconds % 3600) / 60)}m`
+}
+
+function formatMs(ms: number): string {
+  if (ms < 1) return `${(ms * 1000).toFixed(0)}µs`
+  if (ms < 1000) return `${ms.toFixed(2)}ms`
+  return `${(ms / 1000).toFixed(2)}s`
+}
+
+function MetricsOverview({ metrics, status }: { metrics: DatabaseMetrics; status: DatabaseStatus }) {
+  const statusConf = statusConfig[status]
+  const connectionPercent = (metrics.connections.active / metrics.connections.max) * 100
+  const storagePercent = (metrics.storage.used / metrics.storage.total) * 100
+
+  return (
+    <div className="grid grid-cols-4 gap-4">
+      {/* Connections */}
+      <Card>
+        <CardContent className="p-4">
+          <div className="flex items-center justify-between mb-2">
+            <Users className="h-4 w-4 text-muted-foreground" />
+            <div className={cn("w-2 h-2 rounded-full", statusConf.bgColor)} />
+          </div>
+          <div className="text-2xl font-bold">{metrics.connections.active}</div>
+          <div className="text-sm text-muted-foreground">Active Connections</div>
+          <div className="mt-2">
+            <div className="flex justify-between text-xs mb-1">
+              <span>{metrics.connections.idle} idle</span>
+              <span>max {metrics.connections.max}</span>
+            </div>
+            <Progress
+              value={connectionPercent}
+              className={cn("h-1.5", connectionPercent > 80 && "[&>div]:bg-red-500")}
+            />
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Transactions */}
+      <Card>
+        <CardContent className="p-4">
+          <div className="flex items-center justify-between mb-2">
+            <Zap className="h-4 w-4 text-muted-foreground" />
+            <Badge variant="secondary" className="text-xs">
+              {metrics.transactions.perSecond}/s
+            </Badge>
+          </div>
+          <div className="text-2xl font-bold">{metrics.transactions.committed}</div>
+          <div className="text-sm text-muted-foreground">Transactions</div>
+          <div className="mt-2 text-xs text-muted-foreground">
+            <span className="text-red-500">{metrics.transactions.rolledBack}</span> rolled back
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Cache */}
+      <Card>
+        <CardContent className="p-4">
+          <div className="flex items-center justify-between mb-2">
+            <Activity className="h-4 w-4 text-muted-foreground" />
+          </div>
+          <div className={cn(
+            "text-2xl font-bold",
+            metrics.cache.hitRatio < 90 && "text-yellow-500",
+            metrics.cache.hitRatio < 80 && "text-red-500"
+          )}>
+            {metrics.cache.hitRatio.toFixed(1)}%
+          </div>
+          <div className="text-sm text-muted-foreground">Cache Hit Ratio</div>
+          <div className="mt-2 text-xs text-muted-foreground">
+            Buffer: {metrics.cache.bufferHit} • Disk: {metrics.cache.diskRead}
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Storage */}
+      <Card>
+        <CardContent className="p-4">
+          <div className="flex items-center justify-between mb-2">
+            <HardDrive className="h-4 w-4 text-muted-foreground" />
+          </div>
+          <div className="text-2xl font-bold">{formatBytes(metrics.storage.used)}</div>
+          <div className="text-sm text-muted-foreground">Storage Used</div>
+          <div className="mt-2">
+            <Progress
+              value={storagePercent}
+              className={cn("h-1.5", storagePercent > 80 && "[&>div]:bg-red-500")}
+            />
+            <div className="text-xs text-muted-foreground mt-1">
+              of {formatBytes(metrics.storage.total)}
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+
+function ConnectionsTable({
+  connections,
+  onKill,
+}: {
+  connections: DatabaseConnection[]
+  onKill?: (conn: DatabaseConnection) => void
+}) {
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-base flex items-center gap-2">
+            <Users className="h-4 w-4" />
+            Active Connections
+          </CardTitle>
+          <Badge variant="secondary">{connections.length}</Badge>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <ScrollArea className="h-[300px]">
+          <div className="space-y-2">
+            {connections.map((conn) => {
+              const stateConf = connectionStateConfig[conn.state]
+
+              return (
+                <div
+                  key={conn.id}
+                  className={cn(
+                    "flex items-center gap-3 p-2 rounded-lg border",
+                    conn.state === "idle_in_transaction" && "border-yellow-500/30",
+                    conn.duration > 60 && "bg-yellow-500/5"
+                  )}
+                >
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2">
+                      <span className="font-medium">{conn.user}</span>
+                      <Badge variant="outline" className={cn("text-xs", stateConf.color)}>
+                        {stateConf.label}
+                      </Badge>
+                      <span className="text-xs text-muted-foreground">
+                        @ {conn.database}
+                      </span>
+                    </div>
+                    {conn.query && (
+                      <code className="text-xs text-muted-foreground block truncate mt-1">
+                        {conn.query}
+                      </code>
+                    )}
+                  </div>
+
+                  <div className="text-right shrink-0">
+                    <div className={cn(
+                      "text-sm font-medium",
+                      conn.duration > 60 && "text-yellow-500",
+                      conn.duration > 300 && "text-red-500"
+                    )}>
+                      {formatDuration(conn.duration)}
+                    </div>
+                    <div className="text-xs text-muted-foreground">{conn.client}</div>
+                  </div>
+
+                  {onKill && conn.state !== "idle" && (
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-8 w-8 p-0 text-red-500"
+                      onClick={() => onKill(conn)}
+                    >
+                      <XCircle className="h-4 w-4" />
+                    </Button>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        </ScrollArea>
+      </CardContent>
+    </Card>
+  )
+}
+
+function BackupsTable({
+  backups,
+  onRestore,
+  onCreate,
+}: {
+  backups: DatabaseBackup[]
+  onRestore?: (backup: DatabaseBackup) => void
+  onCreate?: () => void
+}) {
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-base flex items-center gap-2">
+            <Download className="h-4 w-4" />
+            Backups
+          </CardTitle>
+          {onCreate && (
+            <Button size="sm" onClick={onCreate}>
+              <Upload className="h-4 w-4 mr-1" />
+              Create Backup
+            </Button>
+          )}
+        </div>
+      </CardHeader>
+      <CardContent>
+        <ScrollArea className="h-[200px]">
+          <div className="space-y-2">
+            {backups.map((backup) => (
+              <div
+                key={backup.id}
+                className="flex items-center gap-3 p-2 rounded-lg border"
+              >
+                {backup.status === "completed" ? (
+                  <CheckCircle2 className="h-4 w-4 text-green-500 shrink-0" />
+                ) : backup.status === "failed" ? (
+                  <XCircle className="h-4 w-4 text-red-500 shrink-0" />
+                ) : backup.status === "running" ? (
+                  <RefreshCw className="h-4 w-4 text-blue-500 animate-spin shrink-0" />
+                ) : (
+                  <Clock className="h-4 w-4 text-muted-foreground shrink-0" />
+                )}
+
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2">
+                    <span className="font-medium">{backup.name}</span>
+                    <Badge variant="outline" className="text-xs">
+                      {backup.type}
+                    </Badge>
+                  </div>
+                  <div className="text-xs text-muted-foreground">
+                    {backup.startedAt.toLocaleString()}
+                    {backup.duration && ` • ${formatDuration(backup.duration)}`}
+                  </div>
+                </div>
+
+                <div className="text-right shrink-0">
+                  {backup.size && (
+                    <div className="text-sm font-medium">{formatBytes(backup.size)}</div>
+                  )}
+                </div>
+
+                {onRestore && backup.status === "completed" && (
+                  <Button variant="ghost" size="sm" onClick={() => onRestore(backup)}>
+                    <RotateCcw className="h-4 w-4" />
+                  </Button>
+                )}
+              </div>
+            ))}
+          </div>
+        </ScrollArea>
+      </CardContent>
+    </Card>
+  )
+}
+
+function SlowQueriesTable({ queries }: { queries: SlowQuery[] }) {
+  const [copiedId, setCopiedId] = React.useState<string | null>(null)
+
+  const copyQuery = (query: SlowQuery) => {
+    navigator.clipboard.writeText(query.query)
+    setCopiedId(query.id)
+    setTimeout(() => setCopiedId(null), 2000)
+  }
+
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-base flex items-center gap-2">
+          <AlertTriangle className="h-4 w-4 text-yellow-500" />
+          Slow Queries
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <ScrollArea className="h-[300px]">
+          <div className="space-y-2">
+            {queries.map((query) => (
+              <div
+                key={query.id}
+                className="p-2 rounded-lg border bg-muted/30"
+              >
+                <div className="flex items-start justify-between gap-2">
+                  <code className="text-xs font-mono line-clamp-2 flex-1">
+                    {query.query}
+                  </code>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-6 w-6 p-0 shrink-0"
+                    onClick={() => copyQuery(query)}
+                  >
+                    {copiedId === query.id ? (
+                      <CheckCircle2 className="h-3 w-3 text-green-500" />
+                    ) : (
+                      <Copy className="h-3 w-3" />
+                    )}
+                  </Button>
+                </div>
+                <div className="flex items-center gap-4 mt-2 text-xs text-muted-foreground">
+                  <span>Calls: <strong>{query.calls}</strong></span>
+                  <span>Mean: <strong className="text-yellow-500">{formatMs(query.meanTime)}</strong></span>
+                  <span>Max: <strong className="text-red-500">{formatMs(query.maxTime)}</strong></span>
+                  <span>Total: <strong>{formatMs(query.totalTime)}</strong></span>
+                  <span>Rows: <strong>{query.rows}</strong></span>
+                </div>
+              </div>
+            ))}
+          </div>
+        </ScrollArea>
+      </CardContent>
+    </Card>
+  )
+}
+
+function QueryEditor({
+  onExecute,
+}: {
+  onExecute?: (query: string) => void
+}) {
+  const [query, setQuery] = React.useState("")
+  const [history, setHistory] = React.useState<string[]>([])
+
+  const handleExecute = () => {
+    if (query.trim()) {
+      onExecute?.(query)
+      setHistory((prev) => [query, ...prev.slice(0, 9)])
+    }
+  }
+
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-base flex items-center gap-2">
+          <Terminal className="h-4 w-4" />
+          Query Editor
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        <Textarea
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          placeholder="SELECT * FROM users LIMIT 10;"
+          className="font-mono text-sm min-h-[120px]"
+        />
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            {history.length > 0 && (
+              <Select onValueChange={(v) => setQuery(v)}>
+                <SelectTrigger className="w-40">
+                  <History className="h-4 w-4 mr-2" />
+                  History
+                </SelectTrigger>
+                <SelectContent>
+                  {history.map((q, i) => (
+                    <SelectItem key={i} value={q}>
+                      <span className="truncate max-w-[300px]">{q}</span>
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            )}
+          </div>
+          <Button onClick={handleExecute} disabled={!query.trim()}>
+            <Play className="h-4 w-4 mr-1" />
+            Execute
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export function DatabaseAdmin({
+  instance,
+  onExecuteQuery,
+  onCreateBackup,
+  onRestoreBackup,
+  onKillConnection,
+  onRefresh,
+  className,
+}: DatabaseAdminProps) {
+  const statusConf = statusConfig[instance.status]
+
+  return (
+    <div className={cn("space-y-6", className)}>
+      {/* Header */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <Database className="h-6 w-6" />
+              <div>
+                <div className="flex items-center gap-2">
+                  <CardTitle>{instance.name}</CardTitle>
+                  <Badge className={cn("text-white", statusConf.bgColor)}>
+                    {statusConf.label}
+                  </Badge>
+                  <Badge variant="outline">{instance.role}</Badge>
+                </div>
+                <p className="text-sm text-muted-foreground">
+                  {instance.type} {instance.version} • {instance.host}:{instance.port}
+                </p>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-2">
+              {instance.metrics.replication && (
+                <Badge
+                  variant="outline"
+                  className={cn(
+                    instance.metrics.replication.lag > 1000 ? "text-red-500" :
+                    instance.metrics.replication.lag > 100 ? "text-yellow-500" :
+                    "text-green-500"
+                  )}
+                >
+                  Replication: {formatMs(instance.metrics.replication.lag)} lag
+                </Badge>
+              )}
+              {onRefresh && (
+                <Button variant="outline" onClick={onRefresh}>
+                  <RefreshCw className="h-4 w-4" />
+                </Button>
+              )}
+            </div>
+          </div>
+        </CardHeader>
+      </Card>
+
+      {/* Metrics */}
+      <MetricsOverview metrics={instance.metrics} status={instance.status} />
+
+      {/* Tabs */}
+      <Tabs defaultValue="connections">
+        <TabsList>
+          <TabsTrigger value="connections">
+            <Users className="h-4 w-4 mr-1" />
+            Connections
+          </TabsTrigger>
+          <TabsTrigger value="queries">
+            <Terminal className="h-4 w-4 mr-1" />
+            Query
+          </TabsTrigger>
+          <TabsTrigger value="slow">
+            <AlertTriangle className="h-4 w-4 mr-1" />
+            Slow Queries
+          </TabsTrigger>
+          <TabsTrigger value="backups">
+            <Download className="h-4 w-4 mr-1" />
+            Backups
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="connections" className="mt-4">
+          <ConnectionsTable
+            connections={instance.connections}
+            onKill={onKillConnection}
+          />
+        </TabsContent>
+
+        <TabsContent value="queries" className="mt-4">
+          <QueryEditor onExecute={onExecuteQuery} />
+        </TabsContent>
+
+        <TabsContent value="slow" className="mt-4">
+          <SlowQueriesTable queries={instance.slowQueries} />
+        </TabsContent>
+
+        <TabsContent value="backups" className="mt-4">
+          <BackupsTable
+            backups={instance.backups}
+            onRestore={onRestoreBackup}
+            onCreate={onCreateBackup}
+          />
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}
+
+// Default sample data
+export const defaultDatabaseInstance: DatabaseInstance = {
+  id: "1",
+  name: "production-db",
+  type: "postgresql",
+  version: "15.4",
+  host: "db.example.com",
+  port: 5432,
+  status: "healthy",
+  role: "primary",
+  metrics: {
+    connections: { active: 45, idle: 25, max: 100 },
+    transactions: { committed: 125000, rolledBack: 15, perSecond: 250 },
+    cache: { hitRatio: 98.5, bufferHit: 15000, diskRead: 250 },
+    storage: {
+      used: 85 * 1024 * 1024 * 1024,
+      total: 200 * 1024 * 1024 * 1024,
+      tablespace: 75 * 1024 * 1024 * 1024,
+      indexes: 10 * 1024 * 1024 * 1024,
+    },
+    replication: { lag: 25, state: "streaming", replicas: 2 },
+  },
+  connections: [
+    { id: "1", user: "api_user", database: "production", state: "active", query: "SELECT * FROM users WHERE id = $1", duration: 0.5, client: "192.168.1.10" },
+    { id: "2", user: "api_user", database: "production", state: "active", query: "UPDATE orders SET status = $1 WHERE id = $2", duration: 1.2, client: "192.168.1.11" },
+    { id: "3", user: "analytics", database: "production", state: "idle_in_transaction", query: "SELECT COUNT(*) FROM events WHERE...", duration: 125, client: "192.168.1.20" },
+    { id: "4", user: "admin", database: "production", state: "idle", duration: 300, client: "192.168.1.5" },
+    { id: "5", user: "api_user", database: "production", state: "active", duration: 0.1, client: "192.168.1.12" },
+  ],
+  backups: [
+    { id: "1", name: "daily-backup-20240110", type: "full", status: "completed", size: 45 * 1024 * 1024 * 1024, startedAt: new Date(Date.now() - 4 * 3600000), completedAt: new Date(Date.now() - 2 * 3600000), duration: 7200 },
+    { id: "2", 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 },
+    { id: "3", name: "hourly-backup-20240110-13", type: "incremental", status: "running", startedAt: new Date(Date.now() - 5 * 60000) },
+    { id: "4", name: "daily-backup-20240111", type: "full", status: "scheduled", startedAt: new Date(Date.now() + 8 * 3600000) },
+  ],
+  slowQueries: [
+    { id: "1", query: "SELECT * FROM orders o JOIN order_items oi ON o.id = oi.order_id WHERE o.created_at > $1 AND o.status = $2", calls: 1250, totalTime: 45000, meanTime: 36, maxTime: 520, rows: 15000 },
+    { id: "2", query: "SELECT u.*, COUNT(o.id) as order_count FROM users u LEFT JOIN orders o ON u.id = o.user_id GROUP BY u.id ORDER BY order_count DESC LIMIT 100", calls: 500, totalTime: 85000, meanTime: 170, maxTime: 1200, rows: 100 },
+    { id: "3", query: "UPDATE products SET view_count = view_count + 1 WHERE id = $1", calls: 50000, totalTime: 25000, meanTime: 0.5, maxTime: 15, rows: 1 },
+    { id: "4", query: "SELECT * FROM analytics_events WHERE event_type = $1 AND created_at BETWEEN $2 AND $3", calls: 250, totalTime: 125000, meanTime: 500, maxTime: 3500, rows: 50000 },
+  ],
+}