@wakastellar/ui 4.0.0 → 4.0.1

package/dist/components/waka-kubernetes-overview/index.es.js

@@ -0,0 +1,725 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import { Badge as t } from "../badge/index.es.js";
+import { Button as n } from "../button/index.es.js";
+import { Card as r, CardContent as i, CardHeader as a, CardTitle as o } from "../card/index.es.js";
+import { Progress as s } from "../progress/index.es.js";
+import { ScrollArea as c } from "../scroll-area/index.es.js";
+import { Tabs as l, TabsContent as u, TabsList as d, TabsTrigger as f } from "../tabs/index.es.js";
+import * as p from "react";
+import { AlertTriangle as m, Box as h, CheckCircle2 as g, Cpu as _, HardDrive as v, Layers as y, Network as b, RefreshCw as x, Server as S, XCircle as C, Zap as w } from "lucide-react";
+import { jsx as T, jsxs as E } from "react/jsx-runtime";
+//#region src/components/waka-kubernetes-overview/index.tsx
+var D = {
+	Ready: {
+		color: "text-green-500",
+		icon: g
+	},
+	NotReady: {
+		color: "text-red-500",
+		icon: C
+	},
+	Unknown: {
+		color: "text-yellow-500",
+		icon: m
+	}
+}, O = {
+	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 k(e) {
+	if (e === 0) return "0 B";
+	let t = 1024, n = [
+		"B",
+		"KB",
+		"MB",
+		"GB",
+		"TB"
+	], r = Math.floor(Math.log(e) / Math.log(t));
+	return parseFloat((e / t ** +r).toFixed(1)) + " " + n[r];
+}
+function A({ node: n, onClick: c }) {
+	let l = D[n.status], u = l.icon, d = n.cpu.used / n.cpu.total * 100, f = n.memory.used / n.memory.total * 100;
+	return /* @__PURE__ */ E(r, {
+		className: e("cursor-pointer hover:border-primary/50 transition-colors"),
+		onClick: c,
+		children: [/* @__PURE__ */ E(a, {
+			className: "pb-2",
+			children: [/* @__PURE__ */ E("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ E("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ T(S, { className: "h-4 w-4 text-muted-foreground" }), /* @__PURE__ */ T(o, {
+						className: "text-sm font-medium",
+						children: n.name
+					})]
+				}), /* @__PURE__ */ T(u, { className: e("h-4 w-4", l.color) })]
+			}), /* @__PURE__ */ T("div", {
+				className: "flex items-center gap-1 flex-wrap",
+				children: n.roles.map((e) => /* @__PURE__ */ T(t, {
+					variant: "outline",
+					className: "text-xs",
+					children: e
+				}, e))
+			})]
+		}), /* @__PURE__ */ E(i, {
+			className: "space-y-3",
+			children: [
+				/* @__PURE__ */ E("div", {
+					className: "space-y-1",
+					children: [/* @__PURE__ */ E("div", {
+						className: "flex items-center justify-between text-xs",
+						children: [/* @__PURE__ */ E("span", {
+							className: "flex items-center gap-1",
+							children: [/* @__PURE__ */ T(_, { className: "h-3 w-3" }), " CPU"]
+						}), /* @__PURE__ */ E("span", { children: [d.toFixed(0), "%"] })]
+					}), /* @__PURE__ */ T(s, {
+						value: d,
+						className: "h-1.5"
+					})]
+				}),
+				/* @__PURE__ */ E("div", {
+					className: "space-y-1",
+					children: [/* @__PURE__ */ E("div", {
+						className: "flex items-center justify-between text-xs",
+						children: [/* @__PURE__ */ E("span", {
+							className: "flex items-center gap-1",
+							children: [/* @__PURE__ */ T(v, { className: "h-3 w-3" }), " Memory"]
+						}), /* @__PURE__ */ E("span", { children: [
+							k(n.memory.used),
+							" / ",
+							k(n.memory.total)
+						] })]
+					}), /* @__PURE__ */ T(s, {
+						value: f,
+						className: "h-1.5"
+					})]
+				}),
+				/* @__PURE__ */ E("div", {
+					className: "flex items-center justify-between text-xs text-muted-foreground",
+					children: [/* @__PURE__ */ E("span", { children: [
+						"Pods: ",
+						n.pods.running,
+						"/",
+						n.pods.total
+					] }), /* @__PURE__ */ E("span", { children: ["v", n.version] })]
+				})
+			]
+		})]
+	});
+}
+function j({ nodes: e, pods: t, deployments: n, services: r }) {
+	let i = e.filter((e) => e.status === "Ready").length, a = t.filter((e) => e.phase === "Running").length;
+	n.filter((e) => e.status === "Available").length;
+	let o = e.reduce((e, t) => e + t.cpu.total, 0), c = e.reduce((e, t) => e + t.cpu.used, 0), l = e.reduce((e, t) => e + t.memory.total, 0), u = e.reduce((e, t) => e + t.memory.used, 0), d = (e, t) => t > 0 ? e / t * 100 : 0;
+	return /* @__PURE__ */ E("div", {
+		className: "grid grid-cols-2 md:grid-cols-4 gap-4 p-4 border-b",
+		children: [
+			/* @__PURE__ */ E("div", {
+				className: "space-y-1",
+				children: [
+					/* @__PURE__ */ T("div", {
+						className: "text-sm text-muted-foreground",
+						children: "Nodes"
+					}),
+					/* @__PURE__ */ E("div", {
+						className: "text-2xl font-bold",
+						children: [
+							i,
+							"/",
+							e.length
+						]
+					}),
+					/* @__PURE__ */ T(s, {
+						value: d(i, e.length),
+						className: "h-1"
+					})
+				]
+			}),
+			/* @__PURE__ */ E("div", {
+				className: "space-y-1",
+				children: [
+					/* @__PURE__ */ T("div", {
+						className: "text-sm text-muted-foreground",
+						children: "Pods"
+					}),
+					/* @__PURE__ */ E("div", {
+						className: "text-2xl font-bold",
+						children: [
+							a,
+							"/",
+							t.length
+						]
+					}),
+					/* @__PURE__ */ T(s, {
+						value: d(a, t.length),
+						className: "h-1"
+					})
+				]
+			}),
+			/* @__PURE__ */ E("div", {
+				className: "space-y-1",
+				children: [
+					/* @__PURE__ */ T("div", {
+						className: "text-sm text-muted-foreground",
+						children: "CPU Usage"
+					}),
+					/* @__PURE__ */ E("div", {
+						className: "text-2xl font-bold",
+						children: [d(c, o).toFixed(0), "%"]
+					}),
+					/* @__PURE__ */ T(s, {
+						value: d(c, o),
+						className: "h-1"
+					})
+				]
+			}),
+			/* @__PURE__ */ E("div", {
+				className: "space-y-1",
+				children: [
+					/* @__PURE__ */ T("div", {
+						className: "text-sm text-muted-foreground",
+						children: "Memory Usage"
+					}),
+					/* @__PURE__ */ E("div", {
+						className: "text-2xl font-bold",
+						children: [d(u, l).toFixed(0), "%"]
+					}),
+					/* @__PURE__ */ T(s, {
+						value: d(u, l),
+						className: "h-1"
+					})
+				]
+			})
+		]
+	});
+}
+function M({ clusterName: r = "kubernetes", nodes: i, pods: a, deployments: o, services: s, namespaces: m, selectedNamespace: g, onNamespaceChange: _, onResourceClick: v, onRefresh: C, isLoading: D = !1, className: k }) {
+	let [M, N] = p.useState("nodes"), P = g && g !== "all" ? a.filter((e) => e.namespace === g) : a, F = g && g !== "all" ? o.filter((e) => e.namespace === g) : o, I = g && g !== "all" ? s.filter((e) => e.namespace === g) : s;
+	return /* @__PURE__ */ E("div", {
+		className: e("flex flex-col border rounded-lg bg-background", k),
+		children: [
+			/* @__PURE__ */ E("div", {
+				className: "flex items-center justify-between gap-4 p-3 border-b",
+				children: [/* @__PURE__ */ E("div", {
+					className: "flex items-center gap-3",
+					children: [/* @__PURE__ */ T(y, { className: "h-5 w-5 text-primary" }), /* @__PURE__ */ T("h3", {
+						className: "font-semibold",
+						children: r
+					})]
+				}), /* @__PURE__ */ E("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ E("select", {
+						value: g || "all",
+						onChange: (e) => _?.(e.target.value),
+						className: "h-8 px-2 rounded border bg-background text-sm",
+						children: [/* @__PURE__ */ T("option", {
+							value: "all",
+							children: "All Namespaces"
+						}), m.map((e) => /* @__PURE__ */ T("option", {
+							value: e.name,
+							children: e.name
+						}, e.name))]
+					}), C && /* @__PURE__ */ T(n, {
+						variant: "ghost",
+						size: "sm",
+						onClick: C,
+						disabled: D,
+						children: /* @__PURE__ */ T(x, { className: e("h-4 w-4", D && "animate-spin") })
+					})]
+				})]
+			}),
+			/* @__PURE__ */ T(j, {
+				nodes: i,
+				pods: a,
+				deployments: o,
+				services: s
+			}),
+			/* @__PURE__ */ E(l, {
+				value: M,
+				onValueChange: N,
+				className: "flex-1",
+				children: [
+					/* @__PURE__ */ E(d, {
+						className: "w-full justify-start rounded-none border-b bg-transparent h-auto p-0",
+						children: [
+							/* @__PURE__ */ E(f, {
+								value: "nodes",
+								className: "rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent",
+								children: [
+									/* @__PURE__ */ T(S, { className: "h-4 w-4 mr-2" }),
+									"Nodes (",
+									i.length,
+									")"
+								]
+							}),
+							/* @__PURE__ */ E(f, {
+								value: "pods",
+								className: "rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent",
+								children: [
+									/* @__PURE__ */ T(h, { className: "h-4 w-4 mr-2" }),
+									"Pods (",
+									P.length,
+									")"
+								]
+							}),
+							/* @__PURE__ */ E(f, {
+								value: "deployments",
+								className: "rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent",
+								children: [
+									/* @__PURE__ */ T(w, { className: "h-4 w-4 mr-2" }),
+									"Deployments (",
+									F.length,
+									")"
+								]
+							}),
+							/* @__PURE__ */ E(f, {
+								value: "services",
+								className: "rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent",
+								children: [
+									/* @__PURE__ */ T(b, { className: "h-4 w-4 mr-2" }),
+									"Services (",
+									I.length,
+									")"
+								]
+							})
+						]
+					}),
+					/* @__PURE__ */ T(u, {
+						value: "nodes",
+						className: "p-4 m-0",
+						children: /* @__PURE__ */ T("div", {
+							className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",
+							children: i.map((e) => /* @__PURE__ */ T(A, {
+								node: e,
+								onClick: () => v?.("node", e.name)
+							}, e.name))
+						})
+					}),
+					/* @__PURE__ */ T(u, {
+						value: "pods",
+						className: "m-0",
+						children: /* @__PURE__ */ T(c, {
+							className: "h-[400px]",
+							children: /* @__PURE__ */ E("table", {
+								className: "w-full text-sm",
+								children: [/* @__PURE__ */ T("thead", {
+									className: "bg-muted/50 sticky top-0",
+									children: /* @__PURE__ */ E("tr", { children: [
+										/* @__PURE__ */ T("th", {
+											className: "text-left p-2",
+											children: "Name"
+										}),
+										/* @__PURE__ */ T("th", {
+											className: "text-left p-2",
+											children: "Namespace"
+										}),
+										/* @__PURE__ */ T("th", {
+											className: "text-left p-2",
+											children: "Status"
+										}),
+										/* @__PURE__ */ T("th", {
+											className: "text-left p-2",
+											children: "Ready"
+										}),
+										/* @__PURE__ */ T("th", {
+											className: "text-left p-2",
+											children: "Restarts"
+										}),
+										/* @__PURE__ */ T("th", {
+											className: "text-left p-2",
+											children: "Age"
+										})
+									] })
+								}), /* @__PURE__ */ T("tbody", { children: P.map((e) => {
+									let n = O[e.phase];
+									return /* @__PURE__ */ E("tr", {
+										className: "border-b hover:bg-muted/30 cursor-pointer",
+										onClick: () => v?.("pod", e.name, e.namespace),
+										children: [
+											/* @__PURE__ */ T("td", {
+												className: "p-2 font-medium",
+												children: e.name
+											}),
+											/* @__PURE__ */ T("td", {
+												className: "p-2 text-muted-foreground",
+												children: e.namespace
+											}),
+											/* @__PURE__ */ T("td", {
+												className: "p-2",
+												children: /* @__PURE__ */ T(t, {
+													variant: "outline",
+													className: n.color,
+													children: e.phase
+												})
+											}),
+											/* @__PURE__ */ T("td", {
+												className: "p-2",
+												children: e.ready
+											}),
+											/* @__PURE__ */ T("td", {
+												className: "p-2",
+												children: e.restarts
+											}),
+											/* @__PURE__ */ T("td", {
+												className: "p-2 text-muted-foreground",
+												children: e.age
+											})
+										]
+									}, `${e.namespace}/${e.name}`);
+								}) })]
+							})
+						})
+					}),
+					/* @__PURE__ */ T(u, {
+						value: "deployments",
+						className: "m-0",
+						children: /* @__PURE__ */ T(c, {
+							className: "h-[400px]",
+							children: /* @__PURE__ */ E("table", {
+								className: "w-full text-sm",
+								children: [/* @__PURE__ */ T("thead", {
+									className: "bg-muted/50 sticky top-0",
+									children: /* @__PURE__ */ E("tr", { children: [
+										/* @__PURE__ */ T("th", {
+											className: "text-left p-2",
+											children: "Name"
+										}),
+										/* @__PURE__ */ T("th", {
+											className: "text-left p-2",
+											children: "Namespace"
+										}),
+										/* @__PURE__ */ T("th", {
+											className: "text-left p-2",
+											children: "Status"
+										}),
+										/* @__PURE__ */ T("th", {
+											className: "text-left p-2",
+											children: "Replicas"
+										}),
+										/* @__PURE__ */ T("th", {
+											className: "text-left p-2",
+											children: "Age"
+										})
+									] })
+								}), /* @__PURE__ */ T("tbody", { children: F.map((e) => /* @__PURE__ */ E("tr", {
+									className: "border-b hover:bg-muted/30 cursor-pointer",
+									onClick: () => v?.("deployment", e.name, e.namespace),
+									children: [
+										/* @__PURE__ */ T("td", {
+											className: "p-2 font-medium",
+											children: e.name
+										}),
+										/* @__PURE__ */ T("td", {
+											className: "p-2 text-muted-foreground",
+											children: e.namespace
+										}),
+										/* @__PURE__ */ T("td", {
+											className: "p-2",
+											children: /* @__PURE__ */ T(t, {
+												variant: e.status === "Available" ? "default" : "secondary",
+												className: e.status === "Available" ? "bg-green-500" : "",
+												children: e.status
+											})
+										}),
+										/* @__PURE__ */ E("td", {
+											className: "p-2",
+											children: [
+												e.replicas.ready,
+												"/",
+												e.replicas.desired
+											]
+										}),
+										/* @__PURE__ */ T("td", {
+											className: "p-2 text-muted-foreground",
+											children: e.age
+										})
+									]
+								}, `${e.namespace}/${e.name}`)) })]
+							})
+						})
+					}),
+					/* @__PURE__ */ T(u, {
+						value: "services",
+						className: "m-0",
+						children: /* @__PURE__ */ T(c, {
+							className: "h-[400px]",
+							children: /* @__PURE__ */ E("table", {
+								className: "w-full text-sm",
+								children: [/* @__PURE__ */ T("thead", {
+									className: "bg-muted/50 sticky top-0",
+									children: /* @__PURE__ */ E("tr", { children: [
+										/* @__PURE__ */ T("th", {
+											className: "text-left p-2",
+											children: "Name"
+										}),
+										/* @__PURE__ */ T("th", {
+											className: "text-left p-2",
+											children: "Namespace"
+										}),
+										/* @__PURE__ */ T("th", {
+											className: "text-left p-2",
+											children: "Type"
+										}),
+										/* @__PURE__ */ T("th", {
+											className: "text-left p-2",
+											children: "Cluster IP"
+										}),
+										/* @__PURE__ */ T("th", {
+											className: "text-left p-2",
+											children: "Ports"
+										}),
+										/* @__PURE__ */ T("th", {
+											className: "text-left p-2",
+											children: "Age"
+										})
+									] })
+								}), /* @__PURE__ */ T("tbody", { children: I.map((e) => /* @__PURE__ */ E("tr", {
+									className: "border-b hover:bg-muted/30 cursor-pointer",
+									onClick: () => v?.("service", e.name, e.namespace),
+									children: [
+										/* @__PURE__ */ T("td", {
+											className: "p-2 font-medium",
+											children: e.name
+										}),
+										/* @__PURE__ */ T("td", {
+											className: "p-2 text-muted-foreground",
+											children: e.namespace
+										}),
+										/* @__PURE__ */ T("td", {
+											className: "p-2",
+											children: /* @__PURE__ */ T(t, {
+												variant: "outline",
+												children: e.type
+											})
+										}),
+										/* @__PURE__ */ T("td", {
+											className: "p-2 font-mono text-xs",
+											children: e.clusterIP
+										}),
+										/* @__PURE__ */ T("td", {
+											className: "p-2",
+											children: e.ports.map((e) => `${e.port}/${e.protocol}`).join(", ")
+										}),
+										/* @__PURE__ */ T("td", {
+											className: "p-2 text-muted-foreground",
+											children: e.age
+										})
+									]
+								}, `${e.namespace}/${e.name}`)) })]
+							})
+						})
+					})
+				]
+			})
+		]
+	});
+}
+var N = [
+	{
+		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
+		}
+	}
+], P = [
+	{
+		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"
+	}
+], F = [
+	{
+		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"
+	}
+], I = [
+	{
+		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: 3e3,
+			protocol: "TCP"
+		}],
+		age: "30d"
+	},
+	{
+		name: "postgres",
+		namespace: "database",
+		type: "ClusterIP",
+		clusterIP: "10.96.0.10",
+		ports: [{
+			port: 5432,
+			targetPort: 5432,
+			protocol: "TCP"
+		}],
+		age: "45d"
+	}
+], L = [
+	{
+		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"
+	}
+];
+//#endregion
+export { M as WakaKubernetesOverview, F as defaultK8sDeployments, L as defaultK8sNamespaces, N as defaultK8sNodes, P as defaultK8sPods, I as defaultK8sServices };