@wakastellar/ui 2.1.2 → 2.3.2

package/src/components/waka-database-card/index.tsx

@@ -0,0 +1,473 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { Badge } from "../badge"
+import { Button } from "../button"
+import { Card, CardContent, CardHeader, CardTitle } from "../card"
+import { Progress } from "../progress"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../tooltip"
+import {
+  Database,
+  Activity,
+  Users,
+  Clock,
+  AlertTriangle,
+  RefreshCw,
+  Server,
+  HardDrive,
+  Zap,
+  TrendingUp,
+  TrendingDown,
+  Minus,
+  GitBranch,
+  CheckCircle2,
+  XCircle,
+} from "lucide-react"
+
+export type DatabaseType = "postgresql" | "mysql" | "mongodb" | "redis" | "elasticsearch" | "other"
+export type DatabaseStatus = "healthy" | "warning" | "critical" | "offline" | "syncing"
+export type ReplicationRole = "primary" | "replica" | "standalone"
+
+export interface DatabaseMetrics {
+  connectionsActive: number
+  connectionsMax: number
+  queriesPerSecond: number
+  slowQueries: number
+  avgQueryTime: number // in ms
+  cacheHitRate?: number // percentage
+  storageUsed: number // in bytes
+  storageTotal: number // in bytes
+  replicationLag?: number // in ms
+  uptime?: number // in seconds
+}
+
+export interface DatabaseInfo {
+  id: string
+  name: string
+  type: DatabaseType
+  version?: string
+  host: string
+  port: number
+  status: DatabaseStatus
+  role: ReplicationRole
+  metrics: DatabaseMetrics
+  replicas?: number
+  lastBackup?: Date
+  tags?: string[]
+}
+
+export interface WakaDatabaseCardProps {
+  /** Database info */
+  database: DatabaseInfo
+  /** Callback when clicking refresh */
+  onRefresh?: () => void
+  /** Callback when clicking on the database */
+  onClick?: () => void
+  /** Show detailed metrics */
+  detailed?: boolean
+  /** Compact mode */
+  compact?: boolean
+  /** Custom class name */
+  className?: string
+}
+
+const typeConfig: Record<DatabaseType, { label: string; color: string }> = {
+  postgresql: { label: "PostgreSQL", color: "text-blue-500" },
+  mysql: { label: "MySQL", color: "text-orange-500" },
+  mongodb: { label: "MongoDB", color: "text-green-500" },
+  redis: { label: "Redis", color: "text-red-500" },
+  elasticsearch: { label: "Elasticsearch", color: "text-yellow-500" },
+  other: { label: "Database", color: "text-gray-500" },
+}
+
+const statusConfig: Record<DatabaseStatus, { label: string; color: string; bgColor: string }> = {
+  healthy: { label: "Healthy", color: "text-green-500", bgColor: "bg-green-500" },
+  warning: { label: "Warning", color: "text-yellow-500", bgColor: "bg-yellow-500" },
+  critical: { label: "Critical", color: "text-red-500", bgColor: "bg-red-500" },
+  offline: { label: "Offline", color: "text-gray-500", bgColor: "bg-gray-500" },
+  syncing: { label: "Syncing", color: "text-blue-500", bgColor: "bg-blue-500" },
+}
+
+function formatBytes(bytes: number): string {
+  if (bytes === 0) return "0 B"
+  const k = 1024
+  const sizes = ["B", "KB", "MB", "GB", "TB"]
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + sizes[i]
+}
+
+function formatDuration(seconds: number): string {
+  if (seconds < 60) return `${seconds}s`
+  if (seconds < 3600) return `${Math.floor(seconds / 60)}m`
+  if (seconds < 86400) return `${Math.floor(seconds / 3600)}h`
+  return `${Math.floor(seconds / 86400)}d`
+}
+
+function formatMs(ms: number): string {
+  if (ms < 1000) return `${ms.toFixed(0)}ms`
+  return `${(ms / 1000).toFixed(2)}s`
+}
+
+function TrendIndicator({ value, threshold = 0 }: { value: number; threshold?: number }) {
+  if (value > threshold) {
+    return <TrendingUp className="h-3 w-3 text-green-500" />
+  }
+  if (value < -threshold) {
+    return <TrendingDown className="h-3 w-3 text-red-500" />
+  }
+  return <Minus className="h-3 w-3 text-muted-foreground" />
+}
+
+export function WakaDatabaseCard({
+  database,
+  onRefresh,
+  onClick,
+  detailed = false,
+  compact = false,
+  className,
+}: WakaDatabaseCardProps) {
+  const typeConf = typeConfig[database.type]
+  const statusConf = statusConfig[database.status]
+  const { metrics } = database
+
+  const connectionPercent = (metrics.connectionsActive / metrics.connectionsMax) * 100
+  const storagePercent = (metrics.storageUsed / metrics.storageTotal) * 100
+
+  if (compact) {
+    return (
+      <div
+        className={cn(
+          "flex items-center gap-3 p-3 border rounded-lg hover:bg-muted/30 transition-colors cursor-pointer",
+          database.status === "critical" && "border-red-500/50",
+          database.status === "warning" && "border-yellow-500/50",
+          className
+        )}
+        onClick={onClick}
+      >
+        <div className="relative">
+          <Database className={cn("h-5 w-5", typeConf.color)} />
+          <div className={cn(
+            "absolute -bottom-0.5 -right-0.5 w-2 h-2 rounded-full border border-background",
+            statusConf.bgColor
+          )} />
+        </div>
+
+        <div className="flex-1 min-w-0">
+          <div className="font-medium truncate">{database.name}</div>
+          <div className="text-xs text-muted-foreground flex items-center gap-2">
+            <span>{typeConf.label}</span>
+            {database.version && <span>v{database.version}</span>}
+          </div>
+        </div>
+
+        <div className="flex items-center gap-3 text-xs">
+          <div className="flex items-center gap-1">
+            <Users className="h-3 w-3 text-muted-foreground" />
+            <span>{metrics.connectionsActive}/{metrics.connectionsMax}</span>
+          </div>
+          <div className="flex items-center gap-1">
+            <Zap className="h-3 w-3 text-muted-foreground" />
+            <span>{metrics.queriesPerSecond}/s</span>
+          </div>
+          {metrics.slowQueries > 0 && (
+            <Badge variant="outline" className="text-yellow-500">
+              {metrics.slowQueries} slow
+            </Badge>
+          )}
+        </div>
+
+        <Badge className={cn("text-white", statusConf.bgColor)}>
+          {statusConf.label}
+        </Badge>
+      </div>
+    )
+  }
+
+  return (
+    <Card className={cn(
+      database.status === "critical" && "border-red-500/50",
+      database.status === "warning" && "border-yellow-500/50",
+      className
+    )}>
+      <CardHeader className="pb-3">
+        <div className="flex items-start justify-between">
+          <div className="flex items-center gap-3">
+            <div className={cn(
+              "w-10 h-10 rounded-lg flex items-center justify-center",
+              "bg-muted"
+            )}>
+              <Database className={cn("h-5 w-5", typeConf.color)} />
+            </div>
+            <div>
+              <CardTitle className="text-base flex items-center gap-2">
+                {database.name}
+                <Badge className={cn("text-white text-xs", statusConf.bgColor)}>
+                  {statusConf.label}
+                </Badge>
+              </CardTitle>
+              <div className="flex items-center gap-2 mt-1 text-xs text-muted-foreground">
+                <span>{typeConf.label}</span>
+                {database.version && <span>v{database.version}</span>}
+                <span>•</span>
+                <span>{database.host}:{database.port}</span>
+                {database.role !== "standalone" && (
+                  <>
+                    <span>•</span>
+                    <Badge variant="outline" className="text-xs">
+                      <GitBranch className="h-3 w-3 mr-1" />
+                      {database.role}
+                    </Badge>
+                  </>
+                )}
+              </div>
+            </div>
+          </div>
+
+          {onRefresh && (
+            <Button variant="ghost" size="sm" className="h-8 w-8 p-0" onClick={onRefresh}>
+              <RefreshCw className="h-4 w-4" />
+            </Button>
+          )}
+        </div>
+      </CardHeader>
+
+      <CardContent className="space-y-4">
+        {/* Key metrics row */}
+        <div className="grid grid-cols-4 gap-3">
+          <div className="text-center p-2 bg-muted/50 rounded-lg">
+            <div className="flex items-center justify-center gap-1 text-xs text-muted-foreground mb-1">
+              <Users className="h-3 w-3" />
+              Connections
+            </div>
+            <div className="text-lg font-semibold">{metrics.connectionsActive}</div>
+            <div className="text-xs text-muted-foreground">/ {metrics.connectionsMax}</div>
+          </div>
+
+          <div className="text-center p-2 bg-muted/50 rounded-lg">
+            <div className="flex items-center justify-center gap-1 text-xs text-muted-foreground mb-1">
+              <Zap className="h-3 w-3" />
+              Queries/sec
+            </div>
+            <div className="text-lg font-semibold">{metrics.queriesPerSecond}</div>
+          </div>
+
+          <div className="text-center p-2 bg-muted/50 rounded-lg">
+            <div className="flex items-center justify-center gap-1 text-xs text-muted-foreground mb-1">
+              <Clock className="h-3 w-3" />
+              Avg Latency
+            </div>
+            <div className="text-lg font-semibold">{formatMs(metrics.avgQueryTime)}</div>
+          </div>
+
+          <div className="text-center p-2 bg-muted/50 rounded-lg">
+            <div className="flex items-center justify-center gap-1 text-xs text-muted-foreground mb-1">
+              <AlertTriangle className="h-3 w-3" />
+              Slow Queries
+            </div>
+            <div className={cn(
+              "text-lg font-semibold",
+              metrics.slowQueries > 10 && "text-red-500",
+              metrics.slowQueries > 0 && metrics.slowQueries <= 10 && "text-yellow-500"
+            )}>
+              {metrics.slowQueries}
+            </div>
+          </div>
+        </div>
+
+        {/* Connection usage */}
+        <div>
+          <div className="flex items-center justify-between text-sm mb-1">
+            <span className="flex items-center gap-1 text-muted-foreground">
+              <Users className="h-4 w-4" />
+              Connections
+            </span>
+            <span className={cn(
+              connectionPercent > 80 && "text-red-500",
+              connectionPercent > 60 && connectionPercent <= 80 && "text-yellow-500"
+            )}>
+              {connectionPercent.toFixed(0)}%
+            </span>
+          </div>
+          <Progress
+            value={connectionPercent}
+            className={cn(
+              "h-2",
+              connectionPercent > 80 && "[&>div]:bg-red-500",
+              connectionPercent > 60 && connectionPercent <= 80 && "[&>div]:bg-yellow-500"
+            )}
+          />
+        </div>
+
+        {/* Storage usage */}
+        <div>
+          <div className="flex items-center justify-between text-sm mb-1">
+            <span className="flex items-center gap-1 text-muted-foreground">
+              <HardDrive className="h-4 w-4" />
+              Storage
+            </span>
+            <span>
+              {formatBytes(metrics.storageUsed)} / {formatBytes(metrics.storageTotal)}
+            </span>
+          </div>
+          <Progress
+            value={storagePercent}
+            className={cn(
+              "h-2",
+              storagePercent > 90 && "[&>div]:bg-red-500",
+              storagePercent > 75 && storagePercent <= 90 && "[&>div]:bg-yellow-500"
+            )}
+          />
+        </div>
+
+        {/* Detailed metrics */}
+        {detailed && (
+          <div className="grid grid-cols-2 gap-3 pt-2 border-t">
+            {metrics.cacheHitRate !== undefined && (
+              <div className="flex items-center justify-between text-sm">
+                <span className="text-muted-foreground">Cache Hit Rate</span>
+                <span className={cn(
+                  metrics.cacheHitRate < 90 && "text-yellow-500"
+                )}>
+                  {metrics.cacheHitRate.toFixed(1)}%
+                </span>
+              </div>
+            )}
+
+            {metrics.replicationLag !== undefined && (
+              <div className="flex items-center justify-between text-sm">
+                <span className="text-muted-foreground">Replication Lag</span>
+                <span className={cn(
+                  metrics.replicationLag > 1000 && "text-red-500",
+                  metrics.replicationLag > 100 && metrics.replicationLag <= 1000 && "text-yellow-500"
+                )}>
+                  {formatMs(metrics.replicationLag)}
+                </span>
+              </div>
+            )}
+
+            {metrics.uptime !== undefined && (
+              <div className="flex items-center justify-between text-sm">
+                <span className="text-muted-foreground">Uptime</span>
+                <span>{formatDuration(metrics.uptime)}</span>
+              </div>
+            )}
+
+            {database.replicas !== undefined && (
+              <div className="flex items-center justify-between text-sm">
+                <span className="text-muted-foreground">Replicas</span>
+                <span>{database.replicas}</span>
+              </div>
+            )}
+
+            {database.lastBackup && (
+              <div className="flex items-center justify-between text-sm col-span-2">
+                <span className="text-muted-foreground">Last Backup</span>
+                <span className="flex items-center gap-1">
+                  <CheckCircle2 className="h-3 w-3 text-green-500" />
+                  {database.lastBackup.toLocaleDateString("fr-FR", {
+                    day: "2-digit",
+                    month: "short",
+                    hour: "2-digit",
+                    minute: "2-digit",
+                  })}
+                </span>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Tags */}
+        {database.tags && database.tags.length > 0 && (
+          <div className="flex flex-wrap gap-1 pt-2 border-t">
+            {database.tags.map((tag) => (
+              <Badge key={tag} variant="secondary" className="text-xs">
+                {tag}
+              </Badge>
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
+
+// Default sample database for demo
+export const defaultDatabase: DatabaseInfo = {
+  id: "1",
+  name: "production-db",
+  type: "postgresql",
+  version: "15.4",
+  host: "db.example.com",
+  port: 5432,
+  status: "healthy",
+  role: "primary",
+  metrics: {
+    connectionsActive: 45,
+    connectionsMax: 100,
+    queriesPerSecond: 1250,
+    slowQueries: 3,
+    avgQueryTime: 12.5,
+    cacheHitRate: 98.5,
+    storageUsed: 85 * 1024 * 1024 * 1024,
+    storageTotal: 200 * 1024 * 1024 * 1024,
+    replicationLag: 25,
+    uptime: 45 * 24 * 3600,
+  },
+  replicas: 2,
+  lastBackup: new Date(Date.now() - 4 * 3600000),
+  tags: ["production", "critical"],
+}
+
+// Sample databases list
+export const defaultDatabases: DatabaseInfo[] = [
+  defaultDatabase,
+  {
+    id: "2",
+    name: "cache-redis",
+    type: "redis",
+    version: "7.2",
+    host: "redis.example.com",
+    port: 6379,
+    status: "healthy",
+    role: "primary",
+    metrics: {
+      connectionsActive: 120,
+      connectionsMax: 10000,
+      queriesPerSecond: 45000,
+      slowQueries: 0,
+      avgQueryTime: 0.5,
+      storageUsed: 2 * 1024 * 1024 * 1024,
+      storageTotal: 16 * 1024 * 1024 * 1024,
+      uptime: 30 * 24 * 3600,
+    },
+    tags: ["cache", "production"],
+  },
+  {
+    id: "3",
+    name: "analytics-mongo",
+    type: "mongodb",
+    version: "7.0",
+    host: "mongo.example.com",
+    port: 27017,
+    status: "warning",
+    role: "replica",
+    metrics: {
+      connectionsActive: 78,
+      connectionsMax: 100,
+      queriesPerSecond: 350,
+      slowQueries: 12,
+      avgQueryTime: 85,
+      storageUsed: 450 * 1024 * 1024 * 1024,
+      storageTotal: 500 * 1024 * 1024 * 1024,
+      replicationLag: 150,
+      uptime: 15 * 24 * 3600,
+    },
+    tags: ["analytics"],
+  },
+]