@wakastellar/ui 2.1.2 → 2.3.2

package/src/components/waka-container-list/index.tsx

@@ -0,0 +1,475 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { Button } from "../button"
+import { Badge } from "../badge"
+import { ScrollArea } from "../scroll-area"
+import { Input } from "../input"
+import { Progress } from "../progress"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../dropdown-menu"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../tooltip"
+import {
+  Box,
+  Play,
+  Square,
+  RotateCcw,
+  Trash2,
+  MoreVertical,
+  Terminal,
+  FileText,
+  Search,
+  RefreshCw,
+  Cpu,
+  HardDrive,
+  Network,
+  Clock,
+  CheckCircle2,
+  XCircle,
+  Loader2,
+  PauseCircle,
+} from "lucide-react"
+
+export type ContainerStatus = "running" | "stopped" | "paused" | "restarting" | "exited" | "created"
+
+export interface ContainerResource {
+  cpu: number // percentage
+  memory: number // bytes
+  memoryLimit: number // bytes
+  networkRx: number // bytes
+  networkTx: number // bytes
+}
+
+export interface Container {
+  id: string
+  name: string
+  image: string
+  status: ContainerStatus
+  createdAt: Date
+  startedAt?: Date
+  ports?: Array<{ host: number; container: number; protocol: string }>
+  resources?: ContainerResource
+  labels?: Record<string, string>
+  command?: string
+  exitCode?: number
+}
+
+export interface WakaContainerListProps {
+  /** List of containers */
+  containers: Container[]
+  /** Callback when starting a container */
+  onStart?: (containerId: string) => void
+  /** Callback when stopping a container */
+  onStop?: (containerId: string) => void
+  /** Callback when restarting a container */
+  onRestart?: (containerId: string) => void
+  /** Callback when removing a container */
+  onRemove?: (containerId: string) => void
+  /** Callback when viewing logs */
+  onViewLogs?: (containerId: string) => void
+  /** Callback when opening terminal */
+  onExec?: (containerId: string) => void
+  /** Callback when refreshing */
+  onRefresh?: () => void
+  /** Whether data is loading */
+  isLoading?: boolean
+  /** Custom class name */
+  className?: string
+  /** Title */
+  title?: string
+}
+
+const statusConfig: Record<ContainerStatus, { icon: React.ElementType; color: string; label: string }> = {
+  running: { icon: CheckCircle2, color: "text-green-500", label: "Running" },
+  stopped: { icon: XCircle, color: "text-gray-500", label: "Stopped" },
+  paused: { icon: PauseCircle, color: "text-yellow-500", label: "Paused" },
+  restarting: { icon: Loader2, color: "text-blue-500", label: "Restarting" },
+  exited: { icon: XCircle, color: "text-red-500", label: "Exited" },
+  created: { icon: Box, color: "text-gray-400", label: "Created" },
+}
+
+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(2)) + " " + sizes[i]
+}
+
+function formatUptime(startedAt?: Date): string {
+  if (!startedAt) return "-"
+  const diff = Date.now() - startedAt.getTime()
+  const days = Math.floor(diff / (24 * 3600000))
+  const hours = Math.floor((diff % (24 * 3600000)) / 3600000)
+  const minutes = Math.floor((diff % 3600000) / 60000)
+
+  if (days > 0) return `${days}d ${hours}h`
+  if (hours > 0) return `${hours}h ${minutes}m`
+  return `${minutes}m`
+}
+
+function ContainerRow({
+  container,
+  onStart,
+  onStop,
+  onRestart,
+  onRemove,
+  onViewLogs,
+  onExec,
+}: {
+  container: Container
+  onStart?: (id: string) => void
+  onStop?: (id: string) => void
+  onRestart?: (id: string) => void
+  onRemove?: (id: string) => void
+  onViewLogs?: (id: string) => void
+  onExec?: (id: string) => void
+}) {
+  const config = statusConfig[container.status]
+  const StatusIcon = config.icon
+  const isRunning = container.status === "running"
+  const memoryPercent = container.resources
+    ? (container.resources.memory / container.resources.memoryLimit) * 100
+    : 0
+
+  return (
+    <div className="flex items-center gap-4 px-4 py-3 border-b hover:bg-muted/30 transition-colors">
+      {/* Status */}
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger>
+            <StatusIcon
+              className={cn(
+                "h-5 w-5",
+                config.color,
+                container.status === "restarting" && "animate-spin"
+              )}
+            />
+          </TooltipTrigger>
+          <TooltipContent>{config.label}</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+
+      {/* Name & Image */}
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2">
+          <span className="font-medium truncate">{container.name}</span>
+          <code className="text-xs bg-muted px-1.5 py-0.5 rounded truncate max-w-[200px]">
+            {container.id.slice(0, 12)}
+          </code>
+        </div>
+        <div className="text-sm text-muted-foreground truncate">
+          {container.image}
+        </div>
+      </div>
+
+      {/* Ports */}
+      <div className="hidden md:block w-32">
+        {container.ports && container.ports.length > 0 ? (
+          <div className="flex flex-wrap gap-1">
+            {container.ports.slice(0, 2).map((port, i) => (
+              <Badge key={i} variant="outline" className="text-xs">
+                {port.host}:{port.container}
+              </Badge>
+            ))}
+            {container.ports.length > 2 && (
+              <Badge variant="outline" className="text-xs">
+                +{container.ports.length - 2}
+              </Badge>
+            )}
+          </div>
+        ) : (
+          <span className="text-sm text-muted-foreground">-</span>
+        )}
+      </div>
+
+      {/* Resources */}
+      {isRunning && container.resources && (
+        <div className="hidden lg:flex items-center gap-4 w-48">
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger className="flex items-center gap-1.5">
+                <Cpu className="h-4 w-4 text-muted-foreground" />
+                <span className="text-sm w-12">{container.resources.cpu.toFixed(1)}%</span>
+              </TooltipTrigger>
+              <TooltipContent>CPU Usage</TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger className="flex items-center gap-1.5 flex-1">
+                <HardDrive className="h-4 w-4 text-muted-foreground" />
+                <Progress value={memoryPercent} className="h-1.5 flex-1" />
+              </TooltipTrigger>
+              <TooltipContent>
+                Memory: {formatBytes(container.resources.memory)} / {formatBytes(container.resources.memoryLimit)}
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+      )}
+
+      {/* Uptime */}
+      <div className="hidden sm:flex items-center gap-1.5 w-20 text-sm text-muted-foreground">
+        <Clock className="h-4 w-4" />
+        {formatUptime(container.startedAt)}
+      </div>
+
+      {/* Actions */}
+      <div className="flex items-center gap-1">
+        {isRunning ? (
+          <>
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-8 w-8 p-0"
+                    onClick={() => onStop?.(container.id)}
+                  >
+                    <Square className="h-4 w-4" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>Stop</TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-8 w-8 p-0"
+                    onClick={() => onRestart?.(container.id)}
+                  >
+                    <RotateCcw className="h-4 w-4" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>Restart</TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </>
+        ) : (
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-8 w-8 p-0"
+                  onClick={() => onStart?.(container.id)}
+                >
+                  <Play className="h-4 w-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>Start</TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        )}
+
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
+              <MoreVertical className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem onClick={() => onViewLogs?.(container.id)}>
+              <FileText className="h-4 w-4 mr-2" />
+              View Logs
+            </DropdownMenuItem>
+            {isRunning && (
+              <DropdownMenuItem onClick={() => onExec?.(container.id)}>
+                <Terminal className="h-4 w-4 mr-2" />
+                Open Terminal
+              </DropdownMenuItem>
+            )}
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              onClick={() => onRemove?.(container.id)}
+              className="text-destructive"
+            >
+              <Trash2 className="h-4 w-4 mr-2" />
+              Remove
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </div>
+  )
+}
+
+export function WakaContainerList({
+  containers,
+  onStart,
+  onStop,
+  onRestart,
+  onRemove,
+  onViewLogs,
+  onExec,
+  onRefresh,
+  isLoading = false,
+  className,
+  title = "Containers",
+}: WakaContainerListProps) {
+  const [searchQuery, setSearchQuery] = React.useState("")
+
+  // Filter containers
+  const filteredContainers = React.useMemo(() => {
+    if (!searchQuery) return containers
+    const query = searchQuery.toLowerCase()
+    return containers.filter(
+      (c) =>
+        c.name.toLowerCase().includes(query) ||
+        c.image.toLowerCase().includes(query) ||
+        c.id.toLowerCase().includes(query)
+    )
+  }, [containers, searchQuery])
+
+  // Count by status
+  const statusCounts = React.useMemo(() => {
+    return containers.reduce((acc, c) => {
+      acc[c.status] = (acc[c.status] || 0) + 1
+      return acc
+    }, {} as Record<ContainerStatus, number>)
+  }, [containers])
+
+  return (
+    <div className={cn("flex flex-col border rounded-lg bg-background", className)}>
+      {/* Header */}
+      <div className="flex items-center justify-between gap-4 p-3 border-b">
+        <div className="flex items-center gap-3">
+          <Box className="h-5 w-5" />
+          <h3 className="font-semibold">{title}</h3>
+          <Badge variant="secondary">{containers.length}</Badge>
+
+          <div className="hidden md:flex items-center gap-1">
+            {statusCounts.running > 0 && (
+              <Badge className="bg-green-500 text-xs">{statusCounts.running} running</Badge>
+            )}
+            {statusCounts.stopped > 0 && (
+              <Badge variant="secondary" className="text-xs">{statusCounts.stopped} stopped</Badge>
+            )}
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2">
+          {onRefresh && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onRefresh}
+              disabled={isLoading}
+            >
+              <RefreshCw className={cn("h-4 w-4", isLoading && "animate-spin")} />
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {/* Search */}
+      <div className="p-2 border-b bg-muted/30">
+        <div className="relative max-w-sm">
+          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder="Search containers..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="pl-8 h-8"
+          />
+        </div>
+      </div>
+
+      {/* Container list */}
+      <ScrollArea className="flex-1">
+        {filteredContainers.length === 0 ? (
+          <div className="flex flex-col items-center justify-center h-32 text-muted-foreground">
+            <Box className="h-8 w-8 mb-2" />
+            <span>No containers found</span>
+          </div>
+        ) : (
+          filteredContainers.map((container) => (
+            <ContainerRow
+              key={container.id}
+              container={container}
+              onStart={onStart}
+              onStop={onStop}
+              onRestart={onRestart}
+              onRemove={onRemove}
+              onViewLogs={onViewLogs}
+              onExec={onExec}
+            />
+          ))
+        )}
+      </ScrollArea>
+    </div>
+  )
+}
+
+// Default sample containers for demo
+export const defaultContainers: Container[] = [
+  {
+    id: "abc123def456",
+    name: "api-server",
+    image: "myapp/api:v1.2.3",
+    status: "running",
+    createdAt: new Date(Date.now() - 7 * 24 * 3600000),
+    startedAt: new Date(Date.now() - 2 * 24 * 3600000),
+    ports: [
+      { host: 8080, container: 80, protocol: "tcp" },
+      { host: 8443, container: 443, protocol: "tcp" },
+    ],
+    resources: {
+      cpu: 23.5,
+      memory: 256 * 1024 * 1024,
+      memoryLimit: 512 * 1024 * 1024,
+      networkRx: 1024 * 1024 * 50,
+      networkTx: 1024 * 1024 * 25,
+    },
+  },
+  {
+    id: "def456ghi789",
+    name: "postgres-db",
+    image: "postgres:15-alpine",
+    status: "running",
+    createdAt: new Date(Date.now() - 30 * 24 * 3600000),
+    startedAt: new Date(Date.now() - 15 * 24 * 3600000),
+    ports: [{ host: 5432, container: 5432, protocol: "tcp" }],
+    resources: {
+      cpu: 5.2,
+      memory: 384 * 1024 * 1024,
+      memoryLimit: 1024 * 1024 * 1024,
+      networkRx: 1024 * 1024 * 10,
+      networkTx: 1024 * 1024 * 5,
+    },
+  },
+  {
+    id: "ghi789jkl012",
+    name: "redis-cache",
+    image: "redis:7-alpine",
+    status: "stopped",
+    createdAt: new Date(Date.now() - 14 * 24 * 3600000),
+    exitCode: 0,
+  },
+  {
+    id: "jkl012mno345",
+    name: "worker-1",
+    image: "myapp/worker:v1.2.3",
+    status: "restarting",
+    createdAt: new Date(Date.now() - 3 * 24 * 3600000),
+  },
+]