@wakastellar/ui 2.1.2 → 2.3.2

package/src/components/waka-kubernetes-overview/index.tsx

@@ -0,0 +1,536 @@
+"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 { Tabs, TabsContent, TabsList, TabsTrigger } from "../tabs"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../tooltip"
+import {
+  Server,
+  Box,
+  Layers,
+  Network,
+  HardDrive,
+  Cpu,
+  CheckCircle2,
+  XCircle,
+  AlertTriangle,
+  RefreshCw,
+  ChevronRight,
+  Zap,
+} from "lucide-react"
+
+export type NodeStatus = "Ready" | "NotReady" | "Unknown"
+export type PodPhase = "Running" | "Pending" | "Succeeded" | "Failed" | "Unknown"
+export type DeploymentStatus = "Available" | "Progressing" | "Degraded"
+
+export interface K8sNode {
+  name: string
+  status: NodeStatus
+  roles: string[]
+  version: string
+  cpu: { used: number; total: number }
+  memory: { used: number; total: number } // in bytes
+  pods: { running: number; total: number }
+  conditions?: Array<{ type: string; status: boolean; message?: string }>
+}
+
+export interface K8sPod {
+  name: string
+  namespace: string
+  phase: PodPhase
+  ready: string // e.g., "2/2"
+  restarts: number
+  age: string
+  node?: string
+  labels?: Record<string, string>
+}
+
+export interface K8sDeployment {
+  name: string
+  namespace: string
+  replicas: { ready: number; desired: number }
+  status: DeploymentStatus
+  age: string
+  image?: string
+}
+
+export interface K8sService {
+  name: string
+  namespace: string
+  type: "ClusterIP" | "NodePort" | "LoadBalancer" | "ExternalName"
+  clusterIP: string
+  externalIP?: string
+  ports: Array<{ port: number; targetPort: number; protocol: string }>
+  age: string
+}
+
+export interface K8sNamespace {
+  name: string
+  status: "Active" | "Terminating"
+  age: string
+  labels?: Record<string, string>
+}
+
+export interface WakaKubernetesOverviewProps {
+  /** Cluster name */
+  clusterName?: string
+  /** List of nodes */
+  nodes: K8sNode[]
+  /** List of pods */
+  pods: K8sPod[]
+  /** List of deployments */
+  deployments: K8sDeployment[]
+  /** List of services */
+  services: K8sService[]
+  /** List of namespaces */
+  namespaces: K8sNamespace[]
+  /** Selected namespace filter */
+  selectedNamespace?: string
+  /** Callback when changing namespace */
+  onNamespaceChange?: (namespace: string) => void
+  /** Callback when clicking on a resource */
+  onResourceClick?: (type: string, name: string, namespace?: string) => void
+  /** Callback when refreshing */
+  onRefresh?: () => void
+  /** Whether data is loading */
+  isLoading?: boolean
+  /** Custom class name */
+  className?: string
+}
+
+const nodeStatusConfig: Record<NodeStatus, { color: string; icon: React.ElementType }> = {
+  Ready: { color: "text-green-500", icon: CheckCircle2 },
+  NotReady: { color: "text-red-500", icon: XCircle },
+  Unknown: { color: "text-yellow-500", icon: AlertTriangle },
+}
+
+const podPhaseConfig: Record<PodPhase, { color: string; bgColor: string }> = {
+  Running: { color: "text-green-500", bgColor: "bg-green-500" },
+  Pending: { color: "text-yellow-500", bgColor: "bg-yellow-500" },
+  Succeeded: { color: "text-blue-500", bgColor: "bg-blue-500" },
+  Failed: { color: "text-red-500", bgColor: "bg-red-500" },
+  Unknown: { color: "text-gray-500", bgColor: "bg-gray-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 NodeCard({
+  node,
+  onClick,
+}: {
+  node: K8sNode
+  onClick?: () => void
+}) {
+  const config = nodeStatusConfig[node.status]
+  const StatusIcon = config.icon
+  const cpuPercent = (node.cpu.used / node.cpu.total) * 100
+  const memPercent = (node.memory.used / node.memory.total) * 100
+
+  return (
+    <Card
+      className={cn("cursor-pointer hover:border-primary/50 transition-colors")}
+      onClick={onClick}
+    >
+      <CardHeader className="pb-2">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <Server className="h-4 w-4 text-muted-foreground" />
+            <CardTitle className="text-sm font-medium">{node.name}</CardTitle>
+          </div>
+          <StatusIcon className={cn("h-4 w-4", config.color)} />
+        </div>
+        <div className="flex items-center gap-1 flex-wrap">
+          {node.roles.map((role) => (
+            <Badge key={role} variant="outline" className="text-xs">
+              {role}
+            </Badge>
+          ))}
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        <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>{cpuPercent.toFixed(0)}%</span>
+          </div>
+          <Progress value={cpuPercent} 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(node.memory.used)} / {formatBytes(node.memory.total)}</span>
+          </div>
+          <Progress value={memPercent} className="h-1.5" />
+        </div>
+        <div className="flex items-center justify-between text-xs text-muted-foreground">
+          <span>Pods: {node.pods.running}/{node.pods.total}</span>
+          <span>v{node.version}</span>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+function ClusterSummary({
+  nodes,
+  pods,
+  deployments,
+  services,
+}: {
+  nodes: K8sNode[]
+  pods: K8sPod[]
+  deployments: K8sDeployment[]
+  services: K8sService[]
+}) {
+  const healthyNodes = nodes.filter((n) => n.status === "Ready").length
+  const runningPods = pods.filter((p) => p.phase === "Running").length
+  const availableDeployments = deployments.filter((d) => d.status === "Available").length
+
+  const totalCpu = nodes.reduce((acc, n) => acc + n.cpu.total, 0)
+  const usedCpu = nodes.reduce((acc, n) => acc + n.cpu.used, 0)
+  const totalMem = nodes.reduce((acc, n) => acc + n.memory.total, 0)
+  const usedMem = nodes.reduce((acc, n) => acc + n.memory.used, 0)
+
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-4 gap-4 p-4 border-b">
+      <div className="space-y-1">
+        <div className="text-sm text-muted-foreground">Nodes</div>
+        <div className="text-2xl font-bold">
+          {healthyNodes}/{nodes.length}
+        </div>
+        <Progress value={(healthyNodes / nodes.length) * 100} className="h-1" />
+      </div>
+      <div className="space-y-1">
+        <div className="text-sm text-muted-foreground">Pods</div>
+        <div className="text-2xl font-bold">
+          {runningPods}/{pods.length}
+        </div>
+        <Progress value={(runningPods / pods.length) * 100} className="h-1" />
+      </div>
+      <div className="space-y-1">
+        <div className="text-sm text-muted-foreground">CPU Usage</div>
+        <div className="text-2xl font-bold">{((usedCpu / totalCpu) * 100).toFixed(0)}%</div>
+        <Progress value={(usedCpu / totalCpu) * 100} className="h-1" />
+      </div>
+      <div className="space-y-1">
+        <div className="text-sm text-muted-foreground">Memory Usage</div>
+        <div className="text-2xl font-bold">{((usedMem / totalMem) * 100).toFixed(0)}%</div>
+        <Progress value={(usedMem / totalMem) * 100} className="h-1" />
+      </div>
+    </div>
+  )
+}
+
+export function WakaKubernetesOverview({
+  clusterName = "kubernetes",
+  nodes,
+  pods,
+  deployments,
+  services,
+  namespaces,
+  selectedNamespace,
+  onNamespaceChange,
+  onResourceClick,
+  onRefresh,
+  isLoading = false,
+  className,
+}: WakaKubernetesOverviewProps) {
+  const [activeTab, setActiveTab] = React.useState("nodes")
+
+  // Filter by namespace
+  const filteredPods = selectedNamespace && selectedNamespace !== "all"
+    ? pods.filter((p) => p.namespace === selectedNamespace)
+    : pods
+  const filteredDeployments = selectedNamespace && selectedNamespace !== "all"
+    ? deployments.filter((d) => d.namespace === selectedNamespace)
+    : deployments
+  const filteredServices = selectedNamespace && selectedNamespace !== "all"
+    ? services.filter((s) => s.namespace === selectedNamespace)
+    : services
+
+  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">
+          <Layers className="h-5 w-5 text-primary" />
+          <h3 className="font-semibold">{clusterName}</h3>
+        </div>
+
+        <div className="flex items-center gap-2">
+          {/* Namespace filter */}
+          <select
+            value={selectedNamespace || "all"}
+            onChange={(e) => onNamespaceChange?.(e.target.value)}
+            className="h-8 px-2 rounded border bg-background text-sm"
+          >
+            <option value="all">All Namespaces</option>
+            {namespaces.map((ns) => (
+              <option key={ns.name} value={ns.name}>
+                {ns.name}
+              </option>
+            ))}
+          </select>
+
+          {onRefresh && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onRefresh}
+              disabled={isLoading}
+            >
+              <RefreshCw className={cn("h-4 w-4", isLoading && "animate-spin")} />
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {/* Summary */}
+      <ClusterSummary
+        nodes={nodes}
+        pods={pods}
+        deployments={deployments}
+        services={services}
+      />
+
+      {/* Tabs */}
+      <Tabs value={activeTab} onValueChange={setActiveTab} className="flex-1">
+        <TabsList className="w-full justify-start rounded-none border-b bg-transparent h-auto p-0">
+          <TabsTrigger
+            value="nodes"
+            className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent"
+          >
+            <Server className="h-4 w-4 mr-2" />
+            Nodes ({nodes.length})
+          </TabsTrigger>
+          <TabsTrigger
+            value="pods"
+            className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent"
+          >
+            <Box className="h-4 w-4 mr-2" />
+            Pods ({filteredPods.length})
+          </TabsTrigger>
+          <TabsTrigger
+            value="deployments"
+            className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent"
+          >
+            <Zap className="h-4 w-4 mr-2" />
+            Deployments ({filteredDeployments.length})
+          </TabsTrigger>
+          <TabsTrigger
+            value="services"
+            className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent"
+          >
+            <Network className="h-4 w-4 mr-2" />
+            Services ({filteredServices.length})
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="nodes" className="p-4 m-0">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {nodes.map((node) => (
+              <NodeCard
+                key={node.name}
+                node={node}
+                onClick={() => onResourceClick?.("node", node.name)}
+              />
+            ))}
+          </div>
+        </TabsContent>
+
+        <TabsContent value="pods" className="m-0">
+          <ScrollArea className="h-[400px]">
+            <table className="w-full text-sm">
+              <thead className="bg-muted/50 sticky top-0">
+                <tr>
+                  <th className="text-left p-2">Name</th>
+                  <th className="text-left p-2">Namespace</th>
+                  <th className="text-left p-2">Status</th>
+                  <th className="text-left p-2">Ready</th>
+                  <th className="text-left p-2">Restarts</th>
+                  <th className="text-left p-2">Age</th>
+                </tr>
+              </thead>
+              <tbody>
+                {filteredPods.map((pod) => {
+                  const config = podPhaseConfig[pod.phase]
+                  return (
+                    <tr
+                      key={`${pod.namespace}/${pod.name}`}
+                      className="border-b hover:bg-muted/30 cursor-pointer"
+                      onClick={() => onResourceClick?.("pod", pod.name, pod.namespace)}
+                    >
+                      <td className="p-2 font-medium">{pod.name}</td>
+                      <td className="p-2 text-muted-foreground">{pod.namespace}</td>
+                      <td className="p-2">
+                        <Badge variant="outline" className={config.color}>
+                          {pod.phase}
+                        </Badge>
+                      </td>
+                      <td className="p-2">{pod.ready}</td>
+                      <td className="p-2">{pod.restarts}</td>
+                      <td className="p-2 text-muted-foreground">{pod.age}</td>
+                    </tr>
+                  )
+                })}
+              </tbody>
+            </table>
+          </ScrollArea>
+        </TabsContent>
+
+        <TabsContent value="deployments" className="m-0">
+          <ScrollArea className="h-[400px]">
+            <table className="w-full text-sm">
+              <thead className="bg-muted/50 sticky top-0">
+                <tr>
+                  <th className="text-left p-2">Name</th>
+                  <th className="text-left p-2">Namespace</th>
+                  <th className="text-left p-2">Status</th>
+                  <th className="text-left p-2">Replicas</th>
+                  <th className="text-left p-2">Age</th>
+                </tr>
+              </thead>
+              <tbody>
+                {filteredDeployments.map((deploy) => (
+                  <tr
+                    key={`${deploy.namespace}/${deploy.name}`}
+                    className="border-b hover:bg-muted/30 cursor-pointer"
+                    onClick={() => onResourceClick?.("deployment", deploy.name, deploy.namespace)}
+                  >
+                    <td className="p-2 font-medium">{deploy.name}</td>
+                    <td className="p-2 text-muted-foreground">{deploy.namespace}</td>
+                    <td className="p-2">
+                      <Badge
+                        variant={deploy.status === "Available" ? "default" : "secondary"}
+                        className={deploy.status === "Available" ? "bg-green-500" : ""}
+                      >
+                        {deploy.status}
+                      </Badge>
+                    </td>
+                    <td className="p-2">{deploy.replicas.ready}/{deploy.replicas.desired}</td>
+                    <td className="p-2 text-muted-foreground">{deploy.age}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </ScrollArea>
+        </TabsContent>
+
+        <TabsContent value="services" className="m-0">
+          <ScrollArea className="h-[400px]">
+            <table className="w-full text-sm">
+              <thead className="bg-muted/50 sticky top-0">
+                <tr>
+                  <th className="text-left p-2">Name</th>
+                  <th className="text-left p-2">Namespace</th>
+                  <th className="text-left p-2">Type</th>
+                  <th className="text-left p-2">Cluster IP</th>
+                  <th className="text-left p-2">Ports</th>
+                  <th className="text-left p-2">Age</th>
+                </tr>
+              </thead>
+              <tbody>
+                {filteredServices.map((svc) => (
+                  <tr
+                    key={`${svc.namespace}/${svc.name}`}
+                    className="border-b hover:bg-muted/30 cursor-pointer"
+                    onClick={() => onResourceClick?.("service", svc.name, svc.namespace)}
+                  >
+                    <td className="p-2 font-medium">{svc.name}</td>
+                    <td className="p-2 text-muted-foreground">{svc.namespace}</td>
+                    <td className="p-2">
+                      <Badge variant="outline">{svc.type}</Badge>
+                    </td>
+                    <td className="p-2 font-mono text-xs">{svc.clusterIP}</td>
+                    <td className="p-2">
+                      {svc.ports.map((p) => `${p.port}/${p.protocol}`).join(", ")}
+                    </td>
+                    <td className="p-2 text-muted-foreground">{svc.age}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </ScrollArea>
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}
+
+// Default sample data for demo
+export const defaultK8sNodes: K8sNode[] = [
+  {
+    name: "node-1",
+    status: "Ready",
+    roles: ["control-plane", "master"],
+    version: "1.28.2",
+    cpu: { used: 2.5, total: 8 },
+    memory: { used: 6 * 1024 * 1024 * 1024, total: 16 * 1024 * 1024 * 1024 },
+    pods: { running: 25, total: 110 },
+  },
+  {
+    name: "node-2",
+    status: "Ready",
+    roles: ["worker"],
+    version: "1.28.2",
+    cpu: { used: 5.2, total: 8 },
+    memory: { used: 12 * 1024 * 1024 * 1024, total: 32 * 1024 * 1024 * 1024 },
+    pods: { running: 45, total: 110 },
+  },
+  {
+    name: "node-3",
+    status: "Ready",
+    roles: ["worker"],
+    version: "1.28.2",
+    cpu: { used: 3.8, total: 8 },
+    memory: { used: 8 * 1024 * 1024 * 1024, total: 32 * 1024 * 1024 * 1024 },
+    pods: { running: 38, total: 110 },
+  },
+]
+
+export const defaultK8sPods: K8sPod[] = [
+  { name: "api-server-7d8f9b6c4d-x2k9l", namespace: "default", phase: "Running", ready: "2/2", restarts: 0, age: "5d" },
+  { name: "web-frontend-5c8d7e9f1b-m3n4o", namespace: "default", phase: "Running", ready: "1/1", restarts: 2, age: "3d" },
+  { name: "postgres-0", namespace: "database", phase: "Running", ready: "1/1", restarts: 0, age: "14d" },
+  { name: "redis-master-0", namespace: "cache", phase: "Running", ready: "1/1", restarts: 0, age: "7d" },
+  { name: "worker-6f7g8h9i0j-p5q6r", namespace: "default", phase: "Pending", ready: "0/1", restarts: 0, age: "2m" },
+]
+
+export const defaultK8sDeployments: K8sDeployment[] = [
+  { name: "api-server", namespace: "default", replicas: { ready: 3, desired: 3 }, status: "Available", age: "30d" },
+  { name: "web-frontend", namespace: "default", replicas: { ready: 2, desired: 2 }, status: "Available", age: "30d" },
+  { name: "worker", namespace: "default", replicas: { ready: 1, desired: 2 }, status: "Progressing", age: "15d" },
+]
+
+export const defaultK8sServices: K8sService[] = [
+  { name: "api-server", namespace: "default", type: "ClusterIP", clusterIP: "10.96.0.1", ports: [{ port: 80, targetPort: 8080, protocol: "TCP" }], age: "30d" },
+  { name: "web-frontend", namespace: "default", type: "LoadBalancer", clusterIP: "10.96.0.2", externalIP: "34.123.45.67", ports: [{ port: 443, targetPort: 3000, protocol: "TCP" }], age: "30d" },
+  { name: "postgres", namespace: "database", type: "ClusterIP", clusterIP: "10.96.0.10", ports: [{ port: 5432, targetPort: 5432, protocol: "TCP" }], age: "45d" },
+]
+
+export const defaultK8sNamespaces: K8sNamespace[] = [
+  { name: "default", status: "Active", age: "90d" },
+  { name: "kube-system", status: "Active", age: "90d" },
+  { name: "database", status: "Active", age: "60d" },
+  { name: "cache", status: "Active", age: "45d" },
+]

package/src/components/waka-leaderboard/index.tsx

@@ -77,30 +77,30 @@ const medalConfig = {
   1: {
     gradient: "from-yellow-300 via-yellow-400 to-yellow-500",
     shadow: "shadow-yellow-400/50",
-    glow: "#fbbf24",
+    glow: "hsl(var(--warning))",
     border: "border-yellow-400",
-    bg: "bg-yellow-50",
-    text: "text-yellow-700",
+    bg: "bg-yellow-50 dark:bg-yellow-950/30",
+    text: "text-yellow-700 dark:text-yellow-400",
     icon: Crown,
     label: "Gold",
   },
   2: {
     gradient: "from-gray-300 via-gray-400 to-gray-500",
     shadow: "shadow-gray-400/50",
-    glow: "#9ca3af",
+    glow: "hsl(var(--muted-foreground))",
     border: "border-gray-400",
-    bg: "bg-gray-50",
-    text: "text-gray-700",
+    bg: "bg-gray-50 dark:bg-gray-950/30",
+    text: "text-gray-700 dark:text-gray-400",
     icon: Medal,
     label: "Silver",
   },
   3: {
     gradient: "from-amber-500 via-amber-600 to-amber-700",
     shadow: "shadow-amber-500/50",
-    glow: "#d97706",
+    glow: "hsl(var(--chart-4))",
     border: "border-amber-500",
-    bg: "bg-amber-50",
-    text: "text-amber-700",
+    bg: "bg-amber-50 dark:bg-amber-950/30",
+    text: "text-amber-700 dark:text-amber-400",
     icon: Medal,
     label: "Bronze",
   },