@wakastellar/ui 2.1.2 → 2.3.2

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

@@ -0,0 +1,528 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { Button } from "../button"
+import { Badge } from "../badge"
+import { Card, CardContent, CardHeader, CardTitle } from "../card"
+import { Progress } from "../progress"
+import { ScrollArea } from "../scroll-area"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../tooltip"
+import {
+  Box,
+  CheckCircle2,
+  XCircle,
+  AlertTriangle,
+  Clock,
+  Cpu,
+  HardDrive,
+  RotateCcw,
+  Terminal,
+  FileText,
+  Trash2,
+  ChevronDown,
+  ChevronRight,
+  Container,
+  Activity,
+} from "lucide-react"
+
+export type PodPhase = "Running" | "Pending" | "Succeeded" | "Failed" | "Unknown"
+export type ContainerState = "running" | "waiting" | "terminated"
+
+export interface PodContainer {
+  name: string
+  image: string
+  state: ContainerState
+  ready: boolean
+  restartCount: number
+  startedAt?: Date
+  reason?: string
+  message?: string
+  resources?: {
+    cpu: { used: number; limit: number }
+    memory: { used: number; limit: number }
+  }
+  ports?: Array<{ containerPort: number; protocol: string }>
+}
+
+export interface PodEvent {
+  type: "Normal" | "Warning"
+  reason: string
+  message: string
+  timestamp: Date
+  count?: number
+}
+
+export interface PodDetails {
+  name: string
+  namespace: string
+  phase: PodPhase
+  nodeName?: string
+  podIP?: string
+  hostIP?: string
+  startTime?: Date
+  containers: PodContainer[]
+  events?: PodEvent[]
+  labels?: Record<string, string>
+  annotations?: Record<string, string>
+  conditions?: Array<{
+    type: string
+    status: boolean
+    reason?: string
+    message?: string
+    lastTransitionTime?: Date
+  }>
+}
+
+export interface WakaPodCardProps {
+  /** Pod details */
+  pod: PodDetails
+  /** Callback when viewing logs */
+  onViewLogs?: (containerName: string) => void
+  /** Callback when opening terminal */
+  onExec?: (containerName: string) => void
+  /** Callback when deleting pod */
+  onDelete?: () => void
+  /** Callback when restarting (deleting for recreation) */
+  onRestart?: () => void
+  /** Show events section */
+  showEvents?: boolean
+  /** Compact mode */
+  compact?: boolean
+  /** Custom class name */
+  className?: string
+}
+
+const phaseConfig: Record<PodPhase, { color: string; bgColor: string; icon: React.ElementType }> = {
+  Running: { color: "text-green-500", bgColor: "bg-green-500/10", icon: CheckCircle2 },
+  Pending: { color: "text-yellow-500", bgColor: "bg-yellow-500/10", icon: Clock },
+  Succeeded: { color: "text-blue-500", bgColor: "bg-blue-500/10", icon: CheckCircle2 },
+  Failed: { color: "text-red-500", bgColor: "bg-red-500/10", icon: XCircle },
+  Unknown: { color: "text-gray-500", bgColor: "bg-gray-500/10", icon: AlertTriangle },
+}
+
+const containerStateConfig: Record<ContainerState, { color: string; label: string }> = {
+  running: { color: "text-green-500", label: "Running" },
+  waiting: { color: "text-yellow-500", label: "Waiting" },
+  terminated: { color: "text-gray-500", label: "Terminated" },
+}
+
+function formatBytes(bytes: number): string {
+  if (bytes === 0) return "0 B"
+  const k = 1024
+  const sizes = ["B", "KB", "MB", "GB"]
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + sizes[i]
+}
+
+function formatAge(date?: Date): string {
+  if (!date) return "-"
+  const diff = Date.now() - date.getTime()
+  const minutes = Math.floor(diff / 60000)
+  const hours = Math.floor(minutes / 60)
+  const days = Math.floor(hours / 24)
+
+  if (days > 0) return `${days}d ago`
+  if (hours > 0) return `${hours}h ago`
+  return `${minutes}m ago`
+}
+
+function ContainerCard({
+  container,
+  onViewLogs,
+  onExec,
+}: {
+  container: PodContainer
+  onViewLogs?: (name: string) => void
+  onExec?: (name: string) => void
+}) {
+  const stateConfig = containerStateConfig[container.state]
+  const [expanded, setExpanded] = React.useState(false)
+
+  return (
+    <div className="border rounded-lg overflow-hidden">
+      <div
+        className={cn(
+          "flex items-center gap-3 p-3 cursor-pointer hover:bg-muted/50 transition-colors",
+          !container.ready && "bg-yellow-500/5"
+        )}
+        onClick={() => setExpanded(!expanded)}
+      >
+        <button className="text-muted-foreground">
+          {expanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
+        </button>
+
+        <Container className="h-4 w-4 text-muted-foreground" />
+
+        <div className="flex-1 min-w-0">
+          <div className="font-medium truncate">{container.name}</div>
+          <div className="text-xs text-muted-foreground truncate">{container.image}</div>
+        </div>
+
+        <Badge variant="outline" className={stateConfig.color}>
+          {stateConfig.label}
+        </Badge>
+
+        {container.restartCount > 0 && (
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger>
+                <Badge variant="secondary" className="text-xs">
+                  <RotateCcw className="h-3 w-3 mr-1" />
+                  {container.restartCount}
+                </Badge>
+              </TooltipTrigger>
+              <TooltipContent>Restart count</TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        )}
+
+        <div className="flex items-center gap-1">
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-7 w-7 p-0"
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    onViewLogs?.(container.name)
+                  }}
+                >
+                  <FileText className="h-4 w-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>View Logs</TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+
+          {container.state === "running" && (
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-7 w-7 p-0"
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      onExec?.(container.name)
+                    }}
+                  >
+                    <Terminal className="h-4 w-4" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>Open Terminal</TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          )}
+        </div>
+      </div>
+
+      {expanded && (
+        <div className="border-t bg-muted/20 p-3 space-y-3">
+          {/* Resources */}
+          {container.resources && (
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-1">
+                <div className="flex items-center justify-between text-xs">
+                  <span className="flex items-center gap-1">
+                    <Cpu className="h-3 w-3" /> CPU
+                  </span>
+                  <span>
+                    {container.resources.cpu.used}m / {container.resources.cpu.limit}m
+                  </span>
+                </div>
+                <Progress
+                  value={(container.resources.cpu.used / container.resources.cpu.limit) * 100}
+                  className="h-1.5"
+                />
+              </div>
+              <div className="space-y-1">
+                <div className="flex items-center justify-between text-xs">
+                  <span className="flex items-center gap-1">
+                    <HardDrive className="h-3 w-3" /> Memory
+                  </span>
+                  <span>
+                    {formatBytes(container.resources.memory.used)} / {formatBytes(container.resources.memory.limit)}
+                  </span>
+                </div>
+                <Progress
+                  value={(container.resources.memory.used / container.resources.memory.limit) * 100}
+                  className="h-1.5"
+                />
+              </div>
+            </div>
+          )}
+
+          {/* Ports */}
+          {container.ports && container.ports.length > 0 && (
+            <div>
+              <div className="text-xs text-muted-foreground mb-1">Ports</div>
+              <div className="flex flex-wrap gap-1">
+                {container.ports.map((port, i) => (
+                  <Badge key={i} variant="outline" className="text-xs">
+                    {port.containerPort}/{port.protocol}
+                  </Badge>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* State details */}
+          {(container.reason || container.message) && (
+            <div className="text-xs">
+              {container.reason && (
+                <div className="font-medium text-yellow-500">{container.reason}</div>
+              )}
+              {container.message && (
+                <div className="text-muted-foreground">{container.message}</div>
+              )}
+            </div>
+          )}
+
+          {/* Started time */}
+          {container.startedAt && (
+            <div className="text-xs text-muted-foreground">
+              Started: {container.startedAt.toLocaleString()}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function WakaPodCard({
+  pod,
+  onViewLogs,
+  onExec,
+  onDelete,
+  onRestart,
+  showEvents = true,
+  compact = false,
+  className,
+}: WakaPodCardProps) {
+  const config = phaseConfig[pod.phase]
+  const PhaseIcon = config.icon
+  const readyContainers = pod.containers.filter((c) => c.ready).length
+  const totalRestarts = pod.containers.reduce((acc, c) => acc + c.restartCount, 0)
+
+  return (
+    <Card className={cn(config.bgColor, className)}>
+      <CardHeader className="pb-3">
+        <div className="flex items-start justify-between">
+          <div className="flex items-center gap-3">
+            <Box className="h-5 w-5 text-muted-foreground" />
+            <div>
+              <CardTitle className="text-base">{pod.name}</CardTitle>
+              <div className="text-sm text-muted-foreground">{pod.namespace}</div>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <Badge variant="outline" className={config.color}>
+              <PhaseIcon className="h-3 w-3 mr-1" />
+              {pod.phase}
+            </Badge>
+
+            <div className="flex items-center gap-1">
+              {onRestart && (
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button variant="ghost" size="sm" className="h-8 w-8 p-0" onClick={onRestart}>
+                        <RotateCcw className="h-4 w-4" />
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>Restart Pod</TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              )}
+              {onDelete && (
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="h-8 w-8 p-0 text-destructive"
+                        onClick={onDelete}
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>Delete Pod</TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Quick stats */}
+        <div className="flex items-center gap-4 text-sm text-muted-foreground mt-2">
+          <span>Ready: {readyContainers}/{pod.containers.length}</span>
+          <span>Restarts: {totalRestarts}</span>
+          {pod.nodeName && <span>Node: {pod.nodeName}</span>}
+          {pod.startTime && <span>Age: {formatAge(pod.startTime)}</span>}
+        </div>
+      </CardHeader>
+
+      <CardContent className="space-y-4">
+        {/* Pod IPs */}
+        {(pod.podIP || pod.hostIP) && (
+          <div className="flex items-center gap-4 text-sm">
+            {pod.podIP && (
+              <div>
+                <span className="text-muted-foreground">Pod IP: </span>
+                <code className="bg-muted px-1.5 py-0.5 rounded text-xs">{pod.podIP}</code>
+              </div>
+            )}
+            {pod.hostIP && (
+              <div>
+                <span className="text-muted-foreground">Host IP: </span>
+                <code className="bg-muted px-1.5 py-0.5 rounded text-xs">{pod.hostIP}</code>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Containers */}
+        <div className="space-y-2">
+          <div className="text-sm font-medium">Containers ({pod.containers.length})</div>
+          {pod.containers.map((container) => (
+            <ContainerCard
+              key={container.name}
+              container={container}
+              onViewLogs={onViewLogs}
+              onExec={onExec}
+            />
+          ))}
+        </div>
+
+        {/* Events */}
+        {showEvents && pod.events && pod.events.length > 0 && (
+          <div className="space-y-2">
+            <div className="text-sm font-medium flex items-center gap-2">
+              <Activity className="h-4 w-4" />
+              Events
+            </div>
+            <ScrollArea className="h-32">
+              <div className="space-y-2">
+                {pod.events.map((event, i) => (
+                  <div
+                    key={i}
+                    className={cn(
+                      "text-xs p-2 rounded border",
+                      event.type === "Warning"
+                        ? "bg-yellow-500/10 border-yellow-500/30"
+                        : "bg-muted/50"
+                    )}
+                  >
+                    <div className="flex items-center justify-between mb-1">
+                      <span className="font-medium">{event.reason}</span>
+                      <span className="text-muted-foreground">{formatAge(event.timestamp)}</span>
+                    </div>
+                    <div className="text-muted-foreground">{event.message}</div>
+                  </div>
+                ))}
+              </div>
+            </ScrollArea>
+          </div>
+        )}
+
+        {/* Labels */}
+        {pod.labels && Object.keys(pod.labels).length > 0 && !compact && (
+          <div className="space-y-1">
+            <div className="text-xs text-muted-foreground">Labels</div>
+            <div className="flex flex-wrap gap-1">
+              {Object.entries(pod.labels).slice(0, 5).map(([key, value]) => (
+                <Badge key={key} variant="outline" className="text-xs">
+                  {key}: {value}
+                </Badge>
+              ))}
+              {Object.keys(pod.labels).length > 5 && (
+                <Badge variant="outline" className="text-xs">
+                  +{Object.keys(pod.labels).length - 5} more
+                </Badge>
+              )}
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
+
+// Default sample pod for demo
+export const defaultPodDetails: PodDetails = {
+  name: "api-server-7d8f9b6c4d-x2k9l",
+  namespace: "default",
+  phase: "Running",
+  nodeName: "node-2",
+  podIP: "10.244.1.15",
+  hostIP: "192.168.1.10",
+  startTime: new Date(Date.now() - 5 * 24 * 3600000),
+  containers: [
+    {
+      name: "api",
+      image: "myapp/api:v1.2.3",
+      state: "running",
+      ready: true,
+      restartCount: 0,
+      startedAt: new Date(Date.now() - 5 * 24 * 3600000),
+      resources: {
+        cpu: { used: 150, limit: 500 },
+        memory: { used: 256 * 1024 * 1024, limit: 512 * 1024 * 1024 },
+      },
+      ports: [
+        { containerPort: 8080, protocol: "TCP" },
+        { containerPort: 9090, protocol: "TCP" },
+      ],
+    },
+    {
+      name: "sidecar",
+      image: "envoyproxy/envoy:v1.28",
+      state: "running",
+      ready: true,
+      restartCount: 1,
+      startedAt: new Date(Date.now() - 5 * 24 * 3600000),
+      resources: {
+        cpu: { used: 50, limit: 200 },
+        memory: { used: 64 * 1024 * 1024, limit: 128 * 1024 * 1024 },
+      },
+    },
+  ],
+  events: [
+    {
+      type: "Normal",
+      reason: "Scheduled",
+      message: "Successfully assigned default/api-server-7d8f9b6c4d-x2k9l to node-2",
+      timestamp: new Date(Date.now() - 5 * 24 * 3600000),
+    },
+    {
+      type: "Normal",
+      reason: "Pulled",
+      message: "Container image \"myapp/api:v1.2.3\" already present on machine",
+      timestamp: new Date(Date.now() - 5 * 24 * 3600000),
+    },
+    {
+      type: "Normal",
+      reason: "Started",
+      message: "Started container api",
+      timestamp: new Date(Date.now() - 5 * 24 * 3600000),
+    },
+  ],
+  labels: {
+    app: "api-server",
+    version: "v1.2.3",
+    environment: "production",
+  },
+}