@wakastellar/ui 2.1.2 → 2.3.2

package/src/blocks/container-orchestrator/index.tsx

@@ -0,0 +1,729 @@
+"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 { ScrollArea } from "../../components/scroll-area"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../components/select"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../../components/dropdown-menu"
+import {
+  Container,
+  Play,
+  Pause,
+  Square,
+  RefreshCw,
+  Plus,
+  Minus,
+  Trash2,
+  MoreVertical,
+  Search,
+  Activity,
+  Cpu,
+  MemoryStick,
+  Network,
+  Clock,
+  AlertTriangle,
+  CheckCircle2,
+  XCircle,
+  ArrowUp,
+  ArrowDown,
+  Server,
+  Layers,
+  Settings,
+  ExternalLink,
+  Terminal,
+  FileText,
+  Eye,
+} from "lucide-react"
+
+export type ContainerStatus = "running" | "stopped" | "paused" | "restarting" | "creating" | "removing" | "exited" | "dead"
+export type ServiceStatus = "running" | "updating" | "scaled" | "failed" | "pending"
+
+export interface ContainerResource {
+  cpu: number // percentage
+  memory: number // in MB
+  memoryLimit: number // in MB
+  networkRx: number // bytes/s
+  networkTx: number // bytes/s
+}
+
+export interface OrchestratorContainer {
+  id: string
+  name: string
+  image: string
+  status: ContainerStatus
+  createdAt: Date
+  startedAt?: Date
+  ports?: { host: number; container: number; protocol: "tcp" | "udp" }[]
+  resources: ContainerResource
+  healthCheck?: "healthy" | "unhealthy" | "starting" | "none"
+  restartCount?: number
+  node?: string
+}
+
+export interface OrchestratorService {
+  id: string
+  name: string
+  image: string
+  status: ServiceStatus
+  replicas: {
+    desired: number
+    running: number
+    ready: number
+  }
+  containers: OrchestratorContainer[]
+  updateStatus?: {
+    state: "updating" | "completed" | "paused" | "rollback"
+    progress: number
+    message?: string
+  }
+  ports?: { published: number; target: number }[]
+  labels?: Record<string, string>
+  createdAt: Date
+  updatedAt: Date
+}
+
+export interface ContainerOrchestratorProps {
+  services: OrchestratorService[]
+  onScaleService?: (service: OrchestratorService, replicas: number) => void
+  onRestartService?: (service: OrchestratorService) => void
+  onStopService?: (service: OrchestratorService) => void
+  onDeleteService?: (service: OrchestratorService) => void
+  onViewLogs?: (container: OrchestratorContainer) => void
+  onExecShell?: (container: OrchestratorContainer) => void
+  onRefresh?: () => void
+  className?: string
+}
+
+const containerStatusConfig: Record<ContainerStatus, { color: string; bgColor: string; label: string }> = {
+  running: { color: "text-green-500", bgColor: "bg-green-500", label: "Running" },
+  stopped: { color: "text-gray-500", bgColor: "bg-gray-500", label: "Stopped" },
+  paused: { color: "text-yellow-500", bgColor: "bg-yellow-500", label: "Paused" },
+  restarting: { color: "text-blue-500", bgColor: "bg-blue-500", label: "Restarting" },
+  creating: { color: "text-blue-400", bgColor: "bg-blue-400", label: "Creating" },
+  removing: { color: "text-orange-500", bgColor: "bg-orange-500", label: "Removing" },
+  exited: { color: "text-red-500", bgColor: "bg-red-500", label: "Exited" },
+  dead: { color: "text-red-600", bgColor: "bg-red-600", label: "Dead" },
+}
+
+const serviceStatusConfig: Record<ServiceStatus, { color: string; bgColor: string; label: string }> = {
+  running: { color: "text-green-500", bgColor: "bg-green-500", label: "Running" },
+  updating: { color: "text-blue-500", bgColor: "bg-blue-500", label: "Updating" },
+  scaled: { color: "text-purple-500", bgColor: "bg-purple-500", label: "Scaling" },
+  failed: { color: "text-red-500", bgColor: "bg-red-500", label: "Failed" },
+  pending: { color: "text-yellow-500", bgColor: "bg-yellow-500", label: "Pending" },
+}
+
+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 formatUptime(startDate?: Date): string {
+  if (!startDate) return "N/A"
+  const seconds = Math.floor((Date.now() - startDate.getTime()) / 1000)
+  if (seconds < 60) return `${seconds}s`
+  const minutes = Math.floor(seconds / 60)
+  if (minutes < 60) return `${minutes}m`
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) return `${hours}h ${minutes % 60}m`
+  const days = Math.floor(hours / 24)
+  return `${days}d ${hours % 24}h`
+}
+
+function ContainerCard({
+  container,
+  onViewLogs,
+  onExecShell,
+}: {
+  container: OrchestratorContainer
+  onViewLogs?: () => void
+  onExecShell?: () => void
+}) {
+  const statusConf = containerStatusConfig[container.status]
+  const memoryPercent = (container.resources.memory / container.resources.memoryLimit) * 100
+
+  return (
+    <div className={cn(
+      "border rounded-lg p-3 transition-all hover:bg-muted/30",
+      container.status === "exited" && "border-red-500/30 bg-red-500/5",
+      container.healthCheck === "unhealthy" && "border-yellow-500/30"
+    )}>
+      <div className="flex items-start gap-3">
+        <div className="relative">
+          <Container className={cn("h-5 w-5", statusConf.color)} />
+          {container.healthCheck && container.healthCheck !== "none" && (
+            <div className={cn(
+              "absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 rounded-full border-2 border-background",
+              container.healthCheck === "healthy" && "bg-green-500",
+              container.healthCheck === "unhealthy" && "bg-red-500",
+              container.healthCheck === "starting" && "bg-yellow-500"
+            )} />
+          )}
+        </div>
+
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2">
+            <span className="font-mono text-sm truncate">{container.name}</span>
+            <Badge variant="outline" className={cn("text-xs", statusConf.color)}>
+              {statusConf.label}
+            </Badge>
+          </div>
+          <div className="text-xs text-muted-foreground mt-1 truncate">
+            {container.image}
+          </div>
+
+          {/* Resource usage */}
+          <div className="grid grid-cols-2 gap-2 mt-2">
+            <div>
+              <div className="flex items-center justify-between text-xs mb-0.5">
+                <span className="text-muted-foreground flex items-center gap-1">
+                  <Cpu className="h-3 w-3" /> CPU
+                </span>
+                <span>{container.resources.cpu.toFixed(1)}%</span>
+              </div>
+              <Progress
+                value={container.resources.cpu}
+                className={cn("h-1", container.resources.cpu > 80 && "[&>div]:bg-red-500")}
+              />
+            </div>
+            <div>
+              <div className="flex items-center justify-between text-xs mb-0.5">
+                <span className="text-muted-foreground flex items-center gap-1">
+                  <MemoryStick className="h-3 w-3" /> MEM
+                </span>
+                <span>{container.resources.memory}MB</span>
+              </div>
+              <Progress
+                value={memoryPercent}
+                className={cn("h-1", memoryPercent > 80 && "[&>div]:bg-red-500")}
+              />
+            </div>
+          </div>
+
+          {/* Network and uptime */}
+          <div className="flex items-center gap-3 mt-2 text-xs text-muted-foreground">
+            <span className="flex items-center gap-1">
+              <Clock className="h-3 w-3" />
+              {formatUptime(container.startedAt)}
+            </span>
+            <span className="flex items-center gap-1">
+              <ArrowDown className="h-3 w-3" />
+              {formatBytes(container.resources.networkRx)}/s
+            </span>
+            <span className="flex items-center gap-1">
+              <ArrowUp className="h-3 w-3" />
+              {formatBytes(container.resources.networkTx)}/s
+            </span>
+            {container.restartCount !== undefined && container.restartCount > 0 && (
+              <span className="flex items-center gap-1 text-yellow-500">
+                <RefreshCw className="h-3 w-3" />
+                {container.restartCount} restarts
+              </span>
+            )}
+          </div>
+        </div>
+
+        {/* Actions */}
+        <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">
+            {onViewLogs && (
+              <DropdownMenuItem onClick={onViewLogs}>
+                <FileText className="h-4 w-4 mr-2" />
+                View Logs
+              </DropdownMenuItem>
+            )}
+            {onExecShell && (
+              <DropdownMenuItem onClick={onExecShell}>
+                <Terminal className="h-4 w-4 mr-2" />
+                Shell
+              </DropdownMenuItem>
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </div>
+  )
+}
+
+function ServiceCard({
+  service,
+  onScale,
+  onRestart,
+  onStop,
+  onDelete,
+  onViewLogs,
+  onExecShell,
+}: {
+  service: OrchestratorService
+  onScale?: (replicas: number) => void
+  onRestart?: () => void
+  onStop?: () => void
+  onDelete?: () => void
+  onViewLogs?: (container: OrchestratorContainer) => void
+  onExecShell?: (container: OrchestratorContainer) => void
+}) {
+  const [expanded, setExpanded] = React.useState(false)
+  const [scaleValue, setScaleValue] = React.useState(service.replicas.desired)
+  const statusConf = serviceStatusConfig[service.status]
+
+  const allHealthy = service.containers.every((c) => c.status === "running")
+  const runningPercent = (service.replicas.running / service.replicas.desired) * 100
+
+  return (
+    <Card className={cn(
+      service.status === "failed" && "border-red-500/50",
+      !allHealthy && "border-yellow-500/30"
+    )}>
+      <CardContent className="p-4">
+        <div className="flex items-start gap-4">
+          {/* Service icon */}
+          <div className={cn("p-2 rounded-lg", `${statusConf.bgColor}/10`)}>
+            <Layers className={cn("h-5 w-5", statusConf.color)} />
+          </div>
+
+          {/* Main info */}
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-2">
+              <h4 className="font-semibold">{service.name}</h4>
+              <Badge className={cn("text-white text-xs", statusConf.bgColor)}>
+                {statusConf.label}
+              </Badge>
+            </div>
+            <div className="text-sm text-muted-foreground mt-1">
+              {service.image}
+            </div>
+
+            {/* Replicas */}
+            <div className="mt-3">
+              <div className="flex items-center justify-between text-sm mb-1">
+                <span className="text-muted-foreground">Replicas</span>
+                <span className={cn(
+                  service.replicas.running < service.replicas.desired && "text-yellow-500"
+                )}>
+                  {service.replicas.running}/{service.replicas.desired} running
+                  {service.replicas.ready < service.replicas.running && (
+                    <span className="text-muted-foreground ml-1">
+                      ({service.replicas.ready} ready)
+                    </span>
+                  )}
+                </span>
+              </div>
+              <Progress
+                value={runningPercent}
+                className={cn(
+                  "h-2",
+                  runningPercent < 100 && "[&>div]:bg-yellow-500",
+                  service.status === "failed" && "[&>div]:bg-red-500"
+                )}
+              />
+            </div>
+
+            {/* Update status */}
+            {service.updateStatus && (
+              <div className="mt-3 p-2 bg-muted/50 rounded text-sm">
+                <div className="flex items-center justify-between">
+                  <span className="flex items-center gap-1 text-blue-500">
+                    <RefreshCw className="h-3 w-3 animate-spin" />
+                    {service.updateStatus.state}
+                  </span>
+                  <span>{service.updateStatus.progress}%</span>
+                </div>
+                {service.updateStatus.message && (
+                  <p className="text-xs text-muted-foreground mt-1">
+                    {service.updateStatus.message}
+                  </p>
+                )}
+                <Progress value={service.updateStatus.progress} className="h-1 mt-2" />
+              </div>
+            )}
+
+            {/* Ports */}
+            {service.ports && service.ports.length > 0 && (
+              <div className="flex items-center gap-2 mt-3 text-xs text-muted-foreground">
+                <Network className="h-3 w-3" />
+                {service.ports.map((port, i) => (
+                  <span key={i}>
+                    {port.published}:{port.target}
+                    {i < service.ports!.length - 1 && ","}
+                  </span>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* Actions */}
+          <div className="flex items-center gap-2 shrink-0">
+            {/* Scale controls */}
+            <div className="flex items-center gap-1 border rounded">
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-8 w-8 p-0"
+                onClick={() => {
+                  const newValue = Math.max(0, scaleValue - 1)
+                  setScaleValue(newValue)
+                  onScale?.(newValue)
+                }}
+              >
+                <Minus className="h-4 w-4" />
+              </Button>
+              <Input
+                type="number"
+                value={scaleValue}
+                onChange={(e) => {
+                  const value = parseInt(e.target.value) || 0
+                  setScaleValue(value)
+                }}
+                onBlur={() => onScale?.(scaleValue)}
+                className="w-12 h-8 text-center border-0 p-0"
+                min={0}
+              />
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-8 w-8 p-0"
+                onClick={() => {
+                  const newValue = scaleValue + 1
+                  setScaleValue(newValue)
+                  onScale?.(newValue)
+                }}
+              >
+                <Plus className="h-4 w-4" />
+              </Button>
+            </div>
+
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" size="sm" className="h-8 w-8 p-0">
+                  <MoreVertical className="h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                {onRestart && (
+                  <DropdownMenuItem onClick={onRestart}>
+                    <RefreshCw className="h-4 w-4 mr-2" />
+                    Restart
+                  </DropdownMenuItem>
+                )}
+                {onStop && (
+                  <DropdownMenuItem onClick={onStop}>
+                    <Square className="h-4 w-4 mr-2" />
+                    Stop
+                  </DropdownMenuItem>
+                )}
+                <DropdownMenuSeparator />
+                {onDelete && (
+                  <DropdownMenuItem onClick={onDelete} className="text-destructive">
+                    <Trash2 className="h-4 w-4 mr-2" />
+                    Delete
+                  </DropdownMenuItem>
+                )}
+              </DropdownMenuContent>
+            </DropdownMenu>
+
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setExpanded(!expanded)}
+            >
+              <Eye className="h-4 w-4 mr-1" />
+              {expanded ? "Hide" : "Show"} Containers
+            </Button>
+          </div>
+        </div>
+
+        {/* Containers */}
+        {expanded && (
+          <div className="mt-4 pt-4 border-t space-y-2">
+            {service.containers.length === 0 ? (
+              <div className="text-center text-muted-foreground py-4">
+                No containers running
+              </div>
+            ) : (
+              service.containers.map((container) => (
+                <ContainerCard
+                  key={container.id}
+                  container={container}
+                  onViewLogs={onViewLogs ? () => onViewLogs(container) : undefined}
+                  onExecShell={onExecShell ? () => onExecShell(container) : undefined}
+                />
+              ))
+            )}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
+
+function ClusterStats({ services }: { services: OrchestratorService[] }) {
+  const stats = React.useMemo(() => {
+    const totalServices = services.length
+    const totalContainers = services.reduce((acc, s) => acc + s.containers.length, 0)
+    const runningContainers = services.reduce((acc, s) =>
+      acc + s.containers.filter((c) => c.status === "running").length, 0
+    )
+    const totalCpu = services.reduce((acc, s) =>
+      acc + s.containers.reduce((a, c) => a + c.resources.cpu, 0), 0
+    )
+    const totalMemory = services.reduce((acc, s) =>
+      acc + s.containers.reduce((a, c) => a + c.resources.memory, 0), 0
+    )
+
+    return { totalServices, totalContainers, runningContainers, avgCpu: totalCpu / totalContainers, totalMemory }
+  }, [services])
+
+  return (
+    <div className="grid grid-cols-5 gap-4">
+      <Card>
+        <CardContent className="p-4 text-center">
+          <div className="text-2xl font-bold">{stats.totalServices}</div>
+          <div className="text-sm text-muted-foreground">Services</div>
+        </CardContent>
+      </Card>
+      <Card>
+        <CardContent className="p-4 text-center">
+          <div className="text-2xl font-bold">{stats.totalContainers}</div>
+          <div className="text-sm text-muted-foreground">Containers</div>
+        </CardContent>
+      </Card>
+      <Card>
+        <CardContent className="p-4 text-center">
+          <div className="text-2xl font-bold text-green-500">{stats.runningContainers}</div>
+          <div className="text-sm text-muted-foreground">Running</div>
+        </CardContent>
+      </Card>
+      <Card>
+        <CardContent className="p-4 text-center">
+          <div className="text-2xl font-bold">{stats.avgCpu.toFixed(1)}%</div>
+          <div className="text-sm text-muted-foreground">Avg CPU</div>
+        </CardContent>
+      </Card>
+      <Card>
+        <CardContent className="p-4 text-center">
+          <div className="text-2xl font-bold">{(stats.totalMemory / 1024).toFixed(1)}GB</div>
+          <div className="text-sm text-muted-foreground">Total Memory</div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+
+export function ContainerOrchestrator({
+  services,
+  onScaleService,
+  onRestartService,
+  onStopService,
+  onDeleteService,
+  onViewLogs,
+  onExecShell,
+  onRefresh,
+  className,
+}: ContainerOrchestratorProps) {
+  const [searchQuery, setSearchQuery] = React.useState("")
+  const [statusFilter, setStatusFilter] = React.useState<ServiceStatus | "all">("all")
+
+  const filteredServices = React.useMemo(() => {
+    return services.filter((s) => {
+      if (searchQuery && !s.name.toLowerCase().includes(searchQuery.toLowerCase())) return false
+      if (statusFilter !== "all" && s.status !== statusFilter) return false
+      return true
+    })
+  }, [services, searchQuery, statusFilter])
+
+  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">
+              <Container className="h-6 w-6" />
+              <div>
+                <CardTitle>Container Orchestrator</CardTitle>
+                <p className="text-sm text-muted-foreground">
+                  Manage and monitor containerized services
+                </p>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-2">
+              <div className="relative">
+                <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                <Input
+                  placeholder="Search services..."
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="pl-9 w-64"
+                />
+              </div>
+
+              <Select value={statusFilter} onValueChange={(v) => setStatusFilter(v as ServiceStatus | "all")}>
+                <SelectTrigger className="w-32">
+                  <SelectValue placeholder="Status" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">All Status</SelectItem>
+                  <SelectItem value="running">Running</SelectItem>
+                  <SelectItem value="updating">Updating</SelectItem>
+                  <SelectItem value="failed">Failed</SelectItem>
+                  <SelectItem value="pending">Pending</SelectItem>
+                </SelectContent>
+              </Select>
+
+              {onRefresh && (
+                <Button variant="outline" onClick={onRefresh}>
+                  <RefreshCw className="h-4 w-4" />
+                </Button>
+              )}
+            </div>
+          </div>
+        </CardHeader>
+      </Card>
+
+      {/* Stats */}
+      <ClusterStats services={services} />
+
+      {/* Services */}
+      <ScrollArea className="h-[500px]">
+        <div className="space-y-4 pr-4">
+          {filteredServices.length === 0 ? (
+            <div className="flex flex-col items-center justify-center h-48 text-muted-foreground">
+              <Container className="h-12 w-12 mb-4" />
+              <p className="text-lg font-medium">No services found</p>
+            </div>
+          ) : (
+            filteredServices.map((service) => (
+              <ServiceCard
+                key={service.id}
+                service={service}
+                onScale={onScaleService ? (n) => onScaleService(service, n) : undefined}
+                onRestart={onRestartService ? () => onRestartService(service) : undefined}
+                onStop={onStopService ? () => onStopService(service) : undefined}
+                onDelete={onDeleteService ? () => onDeleteService(service) : undefined}
+                onViewLogs={onViewLogs}
+                onExecShell={onExecShell}
+              />
+            ))
+          )}
+        </div>
+      </ScrollArea>
+    </div>
+  )
+}
+
+// Default sample data
+function generateContainers(serviceName: string, count: number): OrchestratorContainer[] {
+  return Array.from({ length: count }, (_, i) => ({
+    id: `${serviceName}-${i + 1}`,
+    name: `${serviceName}-${i + 1}`,
+    image: `myregistry/${serviceName}:latest`,
+    status: "running" as ContainerStatus,
+    createdAt: new Date(Date.now() - (i + 1) * 3600000),
+    startedAt: new Date(Date.now() - i * 3600000),
+    healthCheck: "healthy" as const,
+    restartCount: Math.floor(Math.random() * 3),
+    node: `node-${Math.floor(Math.random() * 3) + 1}`,
+    resources: {
+      cpu: Math.random() * 50 + 10,
+      memory: Math.floor(Math.random() * 500 + 200),
+      memoryLimit: 1024,
+      networkRx: Math.floor(Math.random() * 1000000),
+      networkTx: Math.floor(Math.random() * 500000),
+    },
+  }))
+}
+
+export const defaultOrchestratorServices: OrchestratorService[] = [
+  {
+    id: "1",
+    name: "api-gateway",
+    image: "myregistry/api-gateway:v2.4.1",
+    status: "running",
+    replicas: { desired: 3, running: 3, ready: 3 },
+    containers: generateContainers("api-gateway", 3),
+    ports: [{ published: 80, target: 8080 }, { published: 443, target: 8443 }],
+    createdAt: new Date(Date.now() - 7 * 24 * 3600000),
+    updatedAt: new Date(Date.now() - 2 * 24 * 3600000),
+  },
+  {
+    id: "2",
+    name: "user-service",
+    image: "myregistry/user-service:v1.8.0",
+    status: "updating",
+    replicas: { desired: 2, running: 2, ready: 1 },
+    containers: generateContainers("user-service", 2),
+    updateStatus: { state: "updating", progress: 50, message: "Updating replica 1 of 2" },
+    ports: [{ published: 8081, target: 8080 }],
+    createdAt: new Date(Date.now() - 14 * 24 * 3600000),
+    updatedAt: new Date(),
+  },
+  {
+    id: "3",
+    name: "payment-service",
+    image: "myregistry/payment-service:v3.1.0",
+    status: "running",
+    replicas: { desired: 2, running: 2, ready: 2 },
+    containers: generateContainers("payment-service", 2),
+    ports: [{ published: 8082, target: 8080 }],
+    createdAt: new Date(Date.now() - 30 * 24 * 3600000),
+    updatedAt: new Date(Date.now() - 5 * 24 * 3600000),
+  },
+  {
+    id: "4",
+    name: "notification-worker",
+    image: "myregistry/notification-worker:v2.0.0",
+    status: "running",
+    replicas: { desired: 5, running: 5, ready: 5 },
+    containers: generateContainers("notification-worker", 5),
+    createdAt: new Date(Date.now() - 21 * 24 * 3600000),
+    updatedAt: new Date(Date.now() - 7 * 24 * 3600000),
+  },
+  {
+    id: "5",
+    name: "analytics-pipeline",
+    image: "myregistry/analytics:v1.2.0",
+    status: "failed",
+    replicas: { desired: 3, running: 1, ready: 1 },
+    containers: [
+      ...generateContainers("analytics-pipeline", 1),
+      {
+        id: "analytics-pipeline-2",
+        name: "analytics-pipeline-2",
+        image: "myregistry/analytics:v1.2.0",
+        status: "exited",
+        createdAt: new Date(Date.now() - 2 * 3600000),
+        healthCheck: "unhealthy",
+        restartCount: 5,
+        node: "node-2",
+        resources: { cpu: 0, memory: 0, memoryLimit: 1024, networkRx: 0, networkTx: 0 },
+      },
+    ],
+    createdAt: new Date(Date.now() - 10 * 24 * 3600000),
+    updatedAt: new Date(Date.now() - 1 * 24 * 3600000),
+  },
+]