@64mb/freelens-power 1.0.1 → 1.0.3

package/out/renderer/monitoring.js

@@ -1,12 +1,59 @@
 const require_extensions = require("./_virtual/_global-external_@freelensapp/extensions.js");
 const require__global_external_mobx = require("./_virtual/_global-external_mobx.js");
 const require_monitoring_preferences_store = require("./src/common/store/monitoring-preferences-store.js");
+const require__global_external_react = require("./_virtual/_global-external_react.js");
 const require__global_external_react_dom = require("./_virtual/_global-external_react-dom.js");
 const require_jsx_runtime = require("./_virtual/_global-external_react/jsx-runtime.js");
 //#region src/renderer/monitoring.tsx
+function effectivePodResource(pod, metric, kind) {
+	const read = (resources) => {
+		const raw = resources?.[kind]?.[metric];
+		if (raw !== void 0) return parseQuantity(raw, metric === "memory");
+		if (kind === "requests" && resources?.limits?.[metric] !== void 0) return parseQuantity(resources.limits[metric], metric === "memory");
+		return kind === "requests" ? 0 : Infinity;
+	};
+	const spec = pod.spec;
+	if (!spec?.containers?.length) throw new Error("Missing pod containers");
+	let sidecars = 0;
+	let initPeak = 0;
+	for (const container of spec.initContainers ?? []) {
+		const value = read(container.resources);
+		if (container.restartPolicy === "Always") {
+			sidecars += value;
+			initPeak = Math.max(initPeak, sidecars);
+		} else initPeak = Math.max(initPeak, sidecars + value);
+	}
+	let effective = Math.max(initPeak, sidecars + spec.containers.reduce((sum, container) => sum + read(container.resources), 0));
+	if (spec.resources?.[kind]?.[metric] !== void 0) effective = read(spec.resources);
+	const overhead = spec.overhead?.[metric];
+	if (overhead !== void 0 && (kind === "requests" || effective > 0)) effective += parseQuantity(overhead, metric === "memory");
+	return effective;
+}
+function aggregateResources(nodes, pods) {
+	if (!nodes.length || nodes.some((node) => !node.metadata?.name)) throw new Error("Missing node inventory");
+	const names = new Set(nodes.map((node) => node.metadata.name));
+	const scheduled = pods?.filter((pod) => pod.spec?.nodeName && names.has(pod.spec.nodeName) && pod.status?.phase !== "Succeeded" && pod.status?.phase !== "Failed");
+	const sum = (metric) => {
+		const capacity = nodes.reduce((total, node) => total + parseQuantity(node.status?.capacity?.[metric] ?? "", metric === "memory"), 0);
+		const allocatable = nodes.reduce((total, node) => total + parseQuantity(node.status?.allocatable?.[metric] ?? "", metric === "memory"), 0);
+		const requests = scheduled?.reduce((total, pod) => total + effectivePodResource(pod, metric, "requests"), 0);
+		const limits = scheduled?.reduce((total, pod) => total + effectivePodResource(pod, metric, "limits"), 0);
+		return {
+			capacity,
+			allocatable,
+			requests,
+			limits: limits === Infinity ? void 0 : limits,
+			unbounded: limits === Infinity
+		};
+	};
+	return {
+		cpu: sum("cpu"),
+		memory: sum("memory")
+	};
+}
 var INTERVAL = 3e4;
 function parseQuantity(raw, memory = false) {
-	const match = /^(\d+(?:\.\d+)?)(n|u|m|Ki|Mi|Gi|Ti|Pi|Ei|k|K|M|G|T|P|E)?$/.exec(raw);
+	const match = /^(\d+(?:\.\d*)?|\.\d+)([eE][+-]?\d+|n|u|m|Ki|Mi|Gi|Ti|Pi|Ei|k|K|M|G|T|P|E)?$/.exec(raw);
 	if (!match) throw new Error("Invalid metrics quantity");
 	const suffix = match[2] ?? "";
 	const value = Number(match[1]) * (suffix.endsWith("i") ? 1024 ** ([
@@ -16,7 +63,7 @@ function parseQuantity(raw, memory = false) {
 		"Ti",
 		"Pi",
 		"Ei"
-	].indexOf(suffix) + 1) : {
+	].indexOf(suffix) + 1) : /^[eE][+-]?\d+$/.test(suffix) ? 10 ** Number(suffix.slice(1)) : {
 		n: 1e-9,
 		u: 1e-6,
 		m: .001,
@@ -47,100 +94,563 @@ function aggregateMetrics(nodes, now = Date.now()) {
 		memory
 	};
 }
-function MonitoringCharts({ samples, status }) {
-	return /* @__PURE__ */ require_jsx_runtime.jsx("div", {
+function formatMonitoringTime(time) {
+	return new Date(time).toLocaleTimeString([], {
+		hour: "2-digit",
+		minute: "2-digit",
+		second: "2-digit",
+		hourCycle: "h23"
+	});
+}
+function ResourceTitle({ metric, label }) {
+	return /* @__PURE__ */ require_jsx_runtime.jsxs("strong", {
+		style: {
+			display: "inline-flex",
+			alignItems: "center",
+			gap: 6
+		},
+		children: [/* @__PURE__ */ require_jsx_runtime.jsx("span", {
+			className: "Icon material",
+			"aria-hidden": "true",
+			style: {
+				"--size": "18px",
+				fontWeight: 400
+			},
+			children: /* @__PURE__ */ require_jsx_runtime.jsx("span", {
+				className: "icon",
+				children: metric === "cpu" ? "developer_board" : "memory"
+			})
+		}), label ?? (metric === "cpu" ? "CPU" : "Memory")]
+	});
+}
+function MetricChart({ metric, samples, status, scope = "node" }) {
+	const [selectedTime, setSelectedTime] = require__global_external_react.useState();
+	const [pinned, setPinned] = require__global_external_react.useState(false);
+	const previousMetric = require__global_external_react.useRef(metric);
+	require__global_external_react.useEffect(() => {
+		if (previousMetric.current !== metric || selectedTime !== void 0 && !samples.some((sample) => sample.time === selectedTime)) {
+			setPinned(false);
+			setSelectedTime(void 0);
+		}
+		previousMetric.current = metric;
+	}, [
+		metric,
+		samples,
+		selectedTime
+	]);
+	require__global_external_react.useEffect(() => {
+		if (!pinned) return;
+		const escape = (event) => {
+			if (event.key === "Escape") {
+				event.preventDefault();
+				event.stopPropagation();
+				setPinned(false);
+				setSelectedTime(void 0);
+			}
+		};
+		document.addEventListener("keydown", escape, true);
+		return () => document.removeEventListener("keydown", escape, true);
+	}, [pinned]);
+	const chartRef = require__global_external_react.useRef(null);
+	const [width, setWidth] = require__global_external_react.useState(600);
+	require__global_external_react.useLayoutEffect(() => {
+		const chart = chartRef.current;
+		if (!chart) return;
+		const measure = () => {
+			const measured = chart.getBoundingClientRect().width;
+			if (measured > 0) setWidth(measured);
+		};
+		measure();
+		const observer = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(measure);
+		observer?.observe(chart);
+		window.addEventListener("resize", measure);
+		return () => {
+			observer?.disconnect();
+			window.removeEventListener("resize", measure);
+		};
+	}, []);
+	const plotWidth = Math.max(1, width - 112);
+	const last = samples.at(-1);
+	const selected = samples.find((sample) => sample.time === selectedTime);
+	const label = metric === "cpu" ? "CPU" : "Memory";
+	const format = (value) => metric === "cpu" ? `${value.toFixed(2)} cores` : `${(value / 1024 ** 3).toFixed(2)} GiB`;
+	const series = [{
+		key: "usage",
+		label: "Usage",
+		color: "#c93dce",
+		value: (sample) => sample[metric]
+	}, ...[
+		"requests",
+		"allocatable",
+		"capacity"
+	].map((key) => ({
+		key,
+		label: {
+			requests: "Requests",
+			allocatable: "Allocatable Capacity",
+			capacity: "Capacity"
+		}[key],
+		color: {
+			requests: "#4caf50",
+			allocatable: "#5486b5",
+			capacity: "var(--textColorSecondary)"
+		}[key],
+		value: (sample) => sample.resources?.[metric][key]
+	}))];
+	const visibleSeries = scope === "pod" ? series.filter((line) => line.key === "usage" || line.key === "requests") : series;
+	const max = Math.max(...samples.flatMap((sample) => visibleSeries.map((line) => line.value(sample) ?? 0)), .001) * 1.1;
+	const end = last?.time ?? Date.now();
+	const start = samples[0]?.time ?? end;
+	const duration = Math.max(end - start, INTERVAL);
+	const x = (sample) => 88 + (sample.time - start) / duration * plotWidth;
+	const y = (sample) => 208 - sample[metric] / max * 184;
+	const selectNearest = (event) => {
+		const bounds = event.currentTarget.getBoundingClientRect();
+		if (!bounds.width || !samples.length) return;
+		const scale = Math.min(bounds.width / width, (bounds.height || 250) / 250);
+		const offset = (bounds.width - width * scale) / 2;
+		const time = start + ((event.clientX - bounds.left - offset) / scale - 88) / plotWidth * duration;
+		const nearest = samples.reduce((nearest, sample) => Math.abs(sample.time - time) < Math.abs(nearest.time - time) ? sample : nearest).time;
+		setSelectedTime(nearest);
+		return nearest;
+	};
+	return /* @__PURE__ */ require_jsx_runtime.jsxs("section", {
+		"aria-label": `${label} metrics-server usage`,
 		style: {
-			display: "grid",
-			gridTemplateColumns: "repeat(2,minmax(0,1fr))",
-			gap: 16,
-			marginBottom: 16
+			padding: "var(--power-monitoring-trend-top, 16px) 16px 16px",
+			background: "var(--contentColor)",
+			minWidth: 0,
+			minHeight: 280,
+			position: "relative"
 		},
-		children: ["cpu", "memory"].map((metric) => {
-			const last = samples.at(-1);
-			const format = (value) => metric === "cpu" ? `${value.toFixed(2)} cores` : `${(value / 1024 ** 3).toFixed(2)} GiB`;
-			const max = Math.max(...samples.map((sample) => sample[metric]), .001) * 1.1;
-			const end = last?.time ?? Date.now();
-			const start = samples[0]?.time ?? end;
-			const points = samples.map((sample) => `${8 + (sample.time - start) / Math.max(end - start, INTERVAL) * 384},${112 - sample[metric] / max * 100}`).join(" ");
-			return /* @__PURE__ */ require_jsx_runtime.jsxs("section", {
+		children: [
+			/* @__PURE__ */ require_jsx_runtime.jsxs("div", {
 				style: {
-					padding: 16,
-					border: "1px solid var(--borderFaintColor)",
-					borderRadius: 8,
+					display: "flex",
+					alignItems: "center",
+					gap: 12
+				},
+				children: [/* @__PURE__ */ require_jsx_runtime.jsx(ResourceTitle, { metric }), /* @__PURE__ */ require_jsx_runtime.jsx("span", { children: status ? "Unavailable" : last ? format(last[metric]) : "Collecting…" })]
+			}),
+			/* @__PURE__ */ require_jsx_runtime.jsxs("svg", {
+				ref: chartRef,
+				"data-monitoring-trend": "",
+				viewBox: `0 0 ${width} 250`,
+				role: "img",
+				tabIndex: 0,
+				"aria-label": `${label} usage over collected samples. Use arrow keys to inspect samples. Click or press Enter to pin the tooltip, Escape to dismiss`,
+				onMouseMove: (event) => {
+					if (!pinned) selectNearest(event);
+				},
+				onClick: (event) => {
+					if (pinned) setPinned(false);
+					else if (samples.length) {
+						if (selectNearest(event) === void 0 && !selected) setSelectedTime(last?.time);
+						setPinned(true);
+					}
+				},
+				onMouseLeave: () => {
+					if (!pinned) setSelectedTime(void 0);
+				},
+				onFocus: () => {
+					if (!pinned) setSelectedTime(last?.time);
+				},
+				onBlur: () => {
+					if (!pinned) setSelectedTime(void 0);
+				},
+				onKeyDown: (event) => {
+					if (event.key === "Enter" || event.key === " ") {
+						event.preventDefault();
+						if (samples.length) {
+							if (!selected) setSelectedTime(last?.time);
+							setPinned(!pinned);
+						}
+						return;
+					}
+					if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+					event.preventDefault();
+					const index = samples.findIndex((sample) => sample.time === selectedTime);
+					setSelectedTime(samples[Math.max(0, Math.min(samples.length - 1, (index < 0 ? samples.length - 1 : index) + (event.key === "ArrowLeft" ? -1 : 1)))]?.time);
+				},
+				style: {
+					width: "100%",
+					height: 250,
+					color: "#c93dce",
+					display: "block"
+				},
+				children: [
+					/* @__PURE__ */ require_jsx_runtime.jsx("title", { children: "Click to pin tooltip · click again or Escape to unpin" }),
+					[
+						0,
+						.5,
+						1
+					].map((fraction) => /* @__PURE__ */ require_jsx_runtime.jsxs("g", { children: [/* @__PURE__ */ require_jsx_runtime.jsx("line", {
+						x1: "88",
+						x2: width - 24,
+						y1: 208 - fraction * 184,
+						y2: 208 - fraction * 184,
+						stroke: "var(--borderFaintColor)"
+					}), /* @__PURE__ */ require_jsx_runtime.jsx("text", {
+						x: "80",
+						y: 212 - fraction * 184,
+						textAnchor: "end",
+						fill: "var(--textColorSecondary)",
+						fontSize: "11",
+						children: format(max * fraction)
+					})] }, fraction)),
+					visibleSeries.map((line) => /* @__PURE__ */ require_jsx_runtime.jsx("path", {
+						"data-monitoring-series": line.key,
+						d: samples.reduce((path, sample, index) => {
+							const value = line.value(sample);
+							if (value === void 0) return path;
+							return `${path} ${(index ? line.value(samples[index - 1]) : void 0) === void 0 ? "M" : "L"}${x(sample)},${208 - value / max * 184}`;
+						}, ""),
+						fill: "none",
+						stroke: line.color,
+						strokeWidth: "2",
+						strokeDasharray: line.key === "capacity" || line.key === "allocatable" ? "5 3" : void 0
+					}, line.key)),
+					samples.map((sample) => /* @__PURE__ */ require_jsx_runtime.jsx("circle", {
+						cx: x(sample),
+						cy: y(sample),
+						r: "2",
+						fill: "currentColor",
+						children: /* @__PURE__ */ require_jsx_runtime.jsxs("title", { children: [
+							formatMonitoringTime(sample.time),
+							": ",
+							format(sample[metric])
+						] })
+					}, sample.time)),
+					samples.length > 0 && [
+						0,
+						.5,
+						1
+					].map((fraction) => /* @__PURE__ */ require_jsx_runtime.jsx("text", {
+						x: 88 + fraction * plotWidth,
+						y: "235",
+						textAnchor: fraction === 0 ? "start" : fraction === 1 ? "end" : "middle",
+						fill: "var(--textColorSecondary)",
+						fontSize: "11",
+						children: formatMonitoringTime(start + fraction * duration)
+					}, fraction)),
+					selected && /* @__PURE__ */ require_jsx_runtime.jsx("line", {
+						"data-monitoring-crosshair": "",
+						x1: x(selected),
+						x2: x(selected),
+						y1: "24",
+						y2: "208",
+						stroke: "var(--textColorSecondary)",
+						strokeDasharray: "4 3"
+					})
+				]
+			}),
+			/* @__PURE__ */ require_jsx_runtime.jsx("style", { children: `
+        @keyframes freelens-power-metric-tooltip-enter { from { opacity:0; transform:translateY(2px) } to { opacity:1; transform:translateY(0) } }
+        [data-monitoring-tooltip] { animation:freelens-power-metric-tooltip-enter 140ms ease-out }
+        @media (prefers-reduced-motion:reduce) { [data-monitoring-tooltip] { animation:none } }
+      ` }),
+			selected && /* @__PURE__ */ require_jsx_runtime.jsxs("div", {
+				"data-monitoring-tooltip": "",
+				role: "tooltip",
+				style: {
+					position: "absolute",
+					top: 44,
+					right: 24,
+					padding: 8,
 					background: "var(--contentColor)",
-					minWidth: 0
+					border: "1px solid var(--borderFaintColor)",
+					pointerEvents: "none"
 				},
-				"aria-label": `${metric === "cpu" ? "CPU" : "Memory"} metrics-server usage`,
 				children: [
-					/* @__PURE__ */ require_jsx_runtime.jsxs("div", {
-						style: {
-							display: "flex",
-							justifyContent: "space-between",
-							gap: 8
-						},
-						children: [/* @__PURE__ */ require_jsx_runtime.jsx("strong", { children: metric === "cpu" ? "CPU" : "Memory" }), /* @__PURE__ */ require_jsx_runtime.jsx("span", { children: status ? "Unavailable" : last ? format(last[metric]) : "Collecting…" })]
-					}),
-					/* @__PURE__ */ require_jsx_runtime.jsxs("svg", {
-						viewBox: "0 0 400 128",
-						role: "img",
-						"aria-label": `${metric} usage over collected samples`,
-						style: {
-							width: "100%",
-							height: 128,
-							color: "var(--primary)"
-						},
+					/* @__PURE__ */ require_jsx_runtime.jsxs("div", { children: [formatMonitoringTime(selected.time), pinned ? " · Pinned" : ""] }),
+					visibleSeries.map((line) => /* @__PURE__ */ require_jsx_runtime.jsxs("div", {
+						style: { color: line.color },
 						children: [
-							[
-								12,
-								62,
-								112
-							].map((y) => /* @__PURE__ */ require_jsx_runtime.jsx("line", {
-								x1: "8",
-								x2: "392",
-								y1: y,
-								y2: y,
-								stroke: "var(--borderFaintColor)"
-							}, y)),
-							/* @__PURE__ */ require_jsx_runtime.jsx("polyline", {
-								points,
-								fill: "none",
-								stroke: "currentColor",
-								strokeWidth: "2"
-							}),
-							samples.map((sample) => /* @__PURE__ */ require_jsx_runtime.jsx("circle", {
-								cx: 8 + (sample.time - start) / Math.max(end - start, INTERVAL) * 384,
-								cy: 112 - sample[metric] / max * 100,
-								r: "2",
-								fill: "currentColor",
-								children: /* @__PURE__ */ require_jsx_runtime.jsxs("title", { children: [
-									new Date(sample.time).toLocaleTimeString(),
-									": ",
-									format(sample[metric])
-								] })
-							}, sample.time))
+							line.label,
+							": ",
+							line.value(selected) === void 0 ? "Unavailable" : format(line.value(selected))
 						]
-					}),
-					/* @__PURE__ */ require_jsx_runtime.jsxs("div", {
+					}, line.key)),
+					/* @__PURE__ */ require_jsx_runtime.jsx("div", {
 						style: {
-							display: "flex",
-							justifyContent: "space-between",
 							color: "var(--textColorSecondary)",
-							fontSize: 11
+							marginTop: 4,
+							fontSize: 10
 						},
-						children: [/* @__PURE__ */ require_jsx_runtime.jsx("span", { children: samples.length ? new Date(start).toLocaleTimeString() : "Waiting for samples" }), /* @__PURE__ */ require_jsx_runtime.jsx("span", { children: samples.length ? new Date(end).toLocaleTimeString() : "" })]
+						children: pinned ? "Click chart or Escape to unpin" : "Click or Enter to pin"
+					})
+				]
+			}),
+			/* @__PURE__ */ require_jsx_runtime.jsx("div", {
+				"aria-label": `${label} chart legend`,
+				style: {
+					display: "flex",
+					flexWrap: "wrap",
+					gap: "6px 16px",
+					marginBottom: 8
+				},
+				children: visibleSeries.map((line) => /* @__PURE__ */ require_jsx_runtime.jsxs("span", { children: [
+					/* @__PURE__ */ require_jsx_runtime.jsx("span", {
+						style: { color: line.color },
+						children: "●"
 					}),
-					/* @__PURE__ */ require_jsx_runtime.jsx("div", {
-						style: {
-							marginTop: 8,
-							fontSize: 11,
-							color: "var(--textColorSecondary)"
-						},
-						role: "status",
-						children: status || "metrics-server · reported node usage · session samples"
+					" ",
+					line.label
+				] }, line.key))
+			}),
+			last?.resourceStatus && /* @__PURE__ */ require_jsx_runtime.jsx("div", {
+				role: "status",
+				style: {
+					color: "var(--textColorSecondary)",
+					marginBottom: 8
+				},
+				children: last.resourceStatus
+			}),
+			(scope === "node" || status || !samples.length) && /* @__PURE__ */ require_jsx_runtime.jsxs("div", {
+				style: {
+					fontSize: 11,
+					color: "var(--textColorSecondary)",
+					display: "flex",
+					alignItems: "center",
+					gap: 4
+				},
+				role: "status",
+				"aria-label": `${scope} metrics status`,
+				children: [scope === "node" && /* @__PURE__ */ require_jsx_runtime.jsx("sup", {
+					"aria-hidden": "true",
+					style: { fontSize: 12 },
+					children: "*"
+				}), /* @__PURE__ */ require_jsx_runtime.jsx("span", { children: status || (samples.length ? "metrics-server data" : "Waiting for metrics-server data") })]
+			})
+		]
+	});
+}
+function ResourceDonut({ metric, sample, status }) {
+	const [activeRing, setActiveRing] = require__global_external_react.useState();
+	require__global_external_react.useEffect(() => {
+		if (activeRing === void 0) return;
+		const dismiss = (event) => {
+			if (event.key !== "Escape") return;
+			event.preventDefault();
+			event.stopPropagation();
+			setActiveRing(void 0);
+		};
+		document.addEventListener("keydown", dismiss, true);
+		return () => document.removeEventListener("keydown", dismiss, true);
+	}, [activeRing]);
+	const label = metric === "cpu" ? "CPU" : "Memory";
+	const totals = sample?.resources?.[metric];
+	const format = (value) => metric === "cpu" ? `${value.toFixed(2)} cores` : `${(value / 1024 ** 3).toFixed(2)} GiB`;
+	const available = (value) => value === void 0 ? "Unavailable" : format(value);
+	const denominator = totals?.allocatable;
+	const rings = [{
+		label: "Usage",
+		color: "#c93dce",
+		value: sample?.[metric]
+	}, {
+		label: "Requests",
+		color: "#4caf50",
+		value: totals?.requests
+	}];
+	const percentage = (value) => value !== void 0 && denominator !== void 0 && denominator > 0 ? value / denominator * 100 : void 0;
+	const usagePercent = percentage(sample?.[metric]);
+	const unused = sample?.completeUsage && denominator !== void 0 ? format(denominator - sample[metric]) : "Unavailable";
+	const unrequested = denominator !== void 0 && totals?.requests !== void 0 ? format(denominator - totals.requests) : "Unavailable";
+	const allocationDetail = `Allocatable: ${available(denominator)}. Schedulable capacity after system reservations, used as the denominator for both rings. Physical Capacity: ${available(totals?.capacity)}. Unused allocatable (usage): ${unused}. Unrequested: ${unrequested}`;
+	const hovered = activeRing === void 0 ? void 0 : rings[activeRing];
+	const tooltipId = `power-monitoring-${metric}-donut-tooltip`;
+	return /* @__PURE__ */ require_jsx_runtime.jsxs("section", {
+		"aria-label": `${label} resource summary`,
+		style: {
+			padding: "var(--power-monitoring-summary-top, 16px) 16px 16px",
+			minWidth: 0,
+			background: "var(--contentColor)",
+			position: "relative",
+			overflow: "visible"
+		},
+		children: [
+			/* @__PURE__ */ require_jsx_runtime.jsx(ResourceTitle, {
+				metric,
+				label: metric === "memory" ? "RAM" : "CPU"
+			}),
+			/* @__PURE__ */ require_jsx_runtime.jsxs("svg", {
+				"data-monitoring-donut": "",
+				viewBox: "0 0 200 200",
+				role: "img",
+				"aria-label": `${label} usage and requests relative to allocatable capacity`,
+				style: {
+					display: "block",
+					width: "100%",
+					height: 200
+				},
+				children: [
+					rings.map((ring, index) => {
+						const radius = 76 - index * 18;
+						const percent = percentage(ring.value);
+						return /* @__PURE__ */ require_jsx_runtime.jsxs("g", {
+							tabIndex: 0,
+							role: "img",
+							"aria-label": `${ring.label}: ${available(ring.value)}${percent === void 0 ? "" : ` (${percent.toFixed(1)}% of allocatable${percent > 100 ? ", over allocatable" : ""})`}`,
+							"aria-describedby": activeRing === index ? tooltipId : void 0,
+							onMouseEnter: () => setActiveRing(index),
+							onMouseMove: () => setActiveRing(index),
+							onMouseLeave: () => setActiveRing(void 0),
+							onFocus: () => setActiveRing(index),
+							onBlur: () => setActiveRing(void 0),
+							children: [/* @__PURE__ */ require_jsx_runtime.jsx("circle", {
+								cx: "100",
+								cy: "100",
+								r: radius,
+								fill: "none",
+								stroke: "var(--borderFaintColor)",
+								strokeWidth: "12"
+							}), percent !== void 0 && /* @__PURE__ */ require_jsx_runtime.jsx("circle", {
+								"data-monitoring-ring": ring.label,
+								cx: "100",
+								cy: "100",
+								r: radius,
+								fill: "none",
+								stroke: ring.color,
+								strokeWidth: "12",
+								pathLength: "100",
+								strokeDasharray: `${Math.min(100, Math.max(0, percent))} 100`,
+								transform: "rotate(-90 100 100)"
+							})]
+						}, ring.label);
+					}),
+					/* @__PURE__ */ require_jsx_runtime.jsx("text", {
+						"data-monitoring-usage-percentage": "",
+						x: "100",
+						y: "100",
+						textAnchor: "middle",
+						fill: "var(--textColorPrimary)",
+						fontSize: "26",
+						fontWeight: "600",
+						children: usagePercent === void 0 ? "N/A" : `${usagePercent.toFixed(1)}%`
+					}),
+					/* @__PURE__ */ require_jsx_runtime.jsx("text", {
+						x: "100",
+						y: "120",
+						textAnchor: "middle",
+						fill: "var(--textColorPrimary)",
+						fontSize: "12",
+						children: "Usage"
 					})
 				]
-			}, metric);
-		})
+			}),
+			hovered && /* @__PURE__ */ require_jsx_runtime.jsxs("div", {
+				id: tooltipId,
+				"data-monitoring-tooltip": "",
+				role: "tooltip",
+				style: {
+					position: "absolute",
+					top: 48,
+					left: 8,
+					right: 8,
+					zIndex: 20,
+					padding: 8,
+					border: "1px solid var(--borderFaintColor)",
+					background: "var(--contentColor)",
+					pointerEvents: "none",
+					overflowWrap: "anywhere",
+					boxShadow: "0 3px 12px #0003"
+				},
+				children: [
+					/* @__PURE__ */ require_jsx_runtime.jsxs("div", {
+						style: { color: hovered.color },
+						children: [
+							hovered.label,
+							": ",
+							available(hovered.value)
+						]
+					}),
+					/* @__PURE__ */ require_jsx_runtime.jsx("div", { children: percentage(hovered.value) === void 0 ? "Percentage unavailable" : `${percentage(hovered.value).toFixed(1)}% of allocatable${percentage(hovered.value) > 100 ? " (over allocatable)" : ""}` }),
+					/* @__PURE__ */ require_jsx_runtime.jsxs("div", { children: ["Allocatable: ", available(denominator)] })
+				]
+			}),
+			/* @__PURE__ */ require_jsx_runtime.jsxs("div", {
+				"aria-label": `${label} resource totals`,
+				style: {
+					display: "grid",
+					gap: 6,
+					fontSize: 12
+				},
+				children: [rings.map((ring) => /* @__PURE__ */ require_jsx_runtime.jsxs("div", {
+					title: `${ring.label} relative to allocatable capacity. ${ring.label === "Usage" ? `Unused allocatable (usage): ${unused}` : `Unrequested: ${unrequested}`}`,
+					children: [
+						/* @__PURE__ */ require_jsx_runtime.jsx("span", {
+							style: { color: ring.color },
+							children: "●"
+						}),
+						" ",
+						ring.label,
+						": ",
+						available(ring.value),
+						percentage(ring.value) !== void 0 && /* @__PURE__ */ require_jsx_runtime.jsxs("span", { children: [
+							" (",
+							percentage(ring.value).toFixed(1),
+							"%)"
+						] })
+					]
+				}, ring.label)), /* @__PURE__ */ require_jsx_runtime.jsxs("div", {
+					title: allocationDetail,
+					children: [
+						/* @__PURE__ */ require_jsx_runtime.jsx("span", {
+							style: { color: "#5486b5" },
+							children: "●"
+						}),
+						" Allocatable: ",
+						available(denominator)
+					]
+				})]
+			}),
+			(status || sample?.resourceStatus) && /* @__PURE__ */ require_jsx_runtime.jsx("div", {
+				role: "status",
+				style: {
+					color: "var(--textColorSecondary)",
+					fontSize: 11,
+					marginTop: 8
+				},
+				children: status || sample?.resourceStatus
+			})
+		]
+	});
+}
+function MonitoringCharts({ samples, status }) {
+	return /* @__PURE__ */ require_jsx_runtime.jsxs("div", {
+		style: { containerType: "inline-size" },
+		children: [/* @__PURE__ */ require_jsx_runtime.jsx("style", { children: `
+      [data-monitoring-layout] { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr); gap:16px; align-items:stretch }
+      [data-monitoring-trends], [data-monitoring-summaries] { display:contents }
+      @container (min-width: 961px) {
+        [data-monitoring-summaries] > section { --power-monitoring-summary-top:16px }
+      }
+      @container (max-width: 960px) {
+        [data-monitoring-layout] { grid-template-columns:repeat(2,minmax(0,1fr)) }
+        .power-ai-overview-actions + [data-testid="cluster-overview-page"] [data-monitoring-trends] > section { --power-monitoring-trend-top:56px }
+      }
+      @container (max-width: 580px) {
+        [data-monitoring-layout] { grid-template-columns:minmax(0,1fr) }
+        .power-ai-overview-actions + [data-testid="cluster-overview-page"] [data-monitoring-trends] > section:not(:first-child) { --power-monitoring-trend-top:16px }
+      }
+    ` }), /* @__PURE__ */ require_jsx_runtime.jsxs("div", {
+			"data-monitoring-layout": "",
+			children: [/* @__PURE__ */ require_jsx_runtime.jsx("div", {
+				"data-monitoring-trends": "",
+				children: ["cpu", "memory"].map((metric) => /* @__PURE__ */ require_jsx_runtime.jsx(MetricChart, {
+					metric,
+					samples,
+					status
+				}, metric))
+			}), /* @__PURE__ */ require_jsx_runtime.jsx("div", {
+				"data-monitoring-summaries": "",
+				children: ["cpu", "memory"].map((metric) => /* @__PURE__ */ require_jsx_runtime.jsx(ResourceDonut, {
+					metric,
+					sample: samples.at(-1),
+					status
+				}, metric))
+			})]
+		})]
 	});
 }
 function startMonitoring() {
@@ -156,10 +666,23 @@ function startMonitoring() {
 	};
 }
 function mountMonitoring() {
+	const suppression = document.createElement("style");
+	suppression.setAttribute("data-freelens-power-native-metrics-suppression", "");
+	suppression.textContent = `
+    [data-testid="cluster-overview-page"] > [class*="ClusterMetrics"],
+    [data-testid="cluster-overview-page"] > :has([class*="ClusterMetrics"]),
+    [data-testid="cluster-overview-page"] > :is([class*="noMetrics"], [data-testid="no-metrics-message"]):not(:has(.PieChart)),
+    [data-testid="cluster-overview-page"] > :has([class*="noMetrics"], [data-testid="no-metrics-message"], [class*="cluster-pie-charts"][class*="empty"]):not(:has(.PieChart)) {
+      display:none !important;
+    }
+  `;
+	document.head.append(suppression);
 	let host;
 	let overview = null;
 	let samples = [];
 	let status = "";
+	let renderedSamples;
+	let renderedStatus;
 	let cluster;
 	let stopped = false;
 	let pendingGeneration;
@@ -174,6 +697,8 @@ function mountMonitoring() {
 			require__global_external_react_dom.default.unmountComponentAtNode(host);
 			host.remove();
 			host = void 0;
+			renderedSamples = void 0;
+			renderedStatus = void 0;
 		}
 	};
 	const update = async () => {
@@ -188,26 +713,50 @@ function mountMonitoring() {
 			cluster = currentCluster;
 			overview = currentOverview;
 		}
-		samples = samples.filter((sample) => sample.time >= Date.now() - 60 * INTERVAL);
+		const cutoff = Date.now() - 60 * INTERVAL;
+		if (samples.length && samples[0].time < cutoff) samples = samples.filter((sample) => sample.time >= cutoff);
 		if (!overview || !cluster || document.visibilityState === "hidden") return;
 		if (!host) {
 			host = document.createElement("div");
 			host.setAttribute("data-freelens-power-monitoring", "");
+			host.style.gridColumn = "1 / -1";
+			hidden.set(overview, overview.getAttribute("style"));
+			Object.assign(overview.style, {
+				gridTemplateAreas: "none",
+				gridTemplateColumns: "minmax(0, 1fr)",
+				gridTemplateRows: "none",
+				height: "auto"
+			});
 			overview.prepend(host);
 		}
 		for (const title of overview.querySelectorAll(".PieChart > .chart-title")) {
 			if (title.textContent !== "CPU" && title.textContent !== "Memory") continue;
 			const panel = title.closest(".PieChart")?.parentElement;
-			if (panel && !hidden.has(panel)) {
-				hidden.set(panel, panel.getAttribute("style"));
+			if (panel && panel.style.display !== "none") {
+				if (!hidden.has(panel)) hidden.set(panel, panel.getAttribute("style"));
 				panel.style.display = "none";
 			}
 		}
+		for (const child of overview.children) {
+			if (!(child instanceof HTMLElement) || child === host) continue;
+			const nativeMetrics = child.matches("[class*=\"ClusterMetrics\"]") || child.querySelector("[class*=\"ClusterMetrics\"]");
+			const unavailablePies = (child.matches("[class*=\"noMetrics\"], [data-testid=\"no-metrics-message\"]") || child.querySelector("[class*=\"noMetrics\"], [data-testid=\"no-metrics-message\"], [class*=\"cluster-pie-charts\"][class*=\"empty\"]")) && !child.querySelector(".PieChart");
+			if ((nativeMetrics || unavailablePies) && child.style.display !== "none") {
+				if (!hidden.has(child)) hidden.set(child, child.getAttribute("style"));
+				child.style.display = "none";
+			}
+			if (!hidden.has(child)) hidden.set(child, child.getAttribute("style"));
+			child.style.gridArea = "auto";
+		}
 		const render = () => {
-			if (host) require__global_external_react_dom.default.render(/* @__PURE__ */ require_jsx_runtime.jsx(MonitoringCharts, {
-				samples,
-				status
-			}), host);
+			if (host && (renderedSamples !== samples || renderedStatus !== status)) {
+				require__global_external_react_dom.default.render(/* @__PURE__ */ require_jsx_runtime.jsx(MonitoringCharts, {
+					samples,
+					status
+				}), host);
+				renderedSamples = samples;
+				renderedStatus = status;
+			}
 		};
 		render();
 		if (pendingGeneration === generation || Date.now() < nextSample) return;
@@ -216,9 +765,28 @@ function mountMonitoring() {
 		const requestGeneration = generation;
 		const isCurrent = () => !stopped && requestGeneration === generation && document.visibilityState !== "hidden" && overview?.isConnected === true && require_extensions.Renderer.Catalog.activeCluster.get()?.metadata.uid === cluster;
 		try {
-			const nodes = await require_extensions.Renderer.K8sApi.nodesMetricsApi.list();
+			const [metrics, inventory, pods] = await Promise.allSettled([
+				require_extensions.Renderer.K8sApi.nodesMetricsApi.list(),
+				Promise.resolve().then(() => require_extensions.Renderer.K8sApi.nodesApi.list()),
+				Promise.resolve().then(() => require_extensions.Renderer.K8sApi.podsApi.list())
+			]);
 			if (!isCurrent()) return;
-			samples = [...samples, aggregateMetrics(nodes ?? [])].slice(-60);
+			if (metrics.status !== "fulfilled") throw new Error("Metrics unavailable");
+			const sample = aggregateMetrics(metrics.value ?? []);
+			const warnings = [];
+			if (inventory.status === "fulfilled") try {
+				sample.resources = aggregateResources(inventory.value ?? [], pods.status === "fulfilled" ? pods.value ?? void 0 : void 0);
+				const expected = new Set((inventory.value ?? []).map((node) => node.metadata.name));
+				const observed = new Set((metrics.value ?? []).map((node) => node.metadata.name));
+				sample.completeUsage = expected.size > 0 && expected.size === observed.size && [...expected].every((name) => observed.has(name));
+				if (!sample.completeUsage) warnings.push("Partial node metrics coverage: usage is the reported subset; unused allocatable unavailable");
+			} catch {
+				warnings.push("Resource totals unavailable: incomplete or invalid node/pod data");
+			}
+			else warnings.push("Node inventory unavailable or access denied; usage coverage unverified, capacity unavailable");
+			if (pods.status !== "fulfilled") warnings.push("Cluster-wide Pods unavailable or access denied; requests unavailable");
+			sample.resourceStatus = warnings.join(". ");
+			samples = [...samples, sample].slice(-60);
 			status = "";
 		} catch {
 			if (!isCurrent()) return;
@@ -228,6 +796,13 @@ function mountMonitoring() {
 		}
 		if (!stopped && requestGeneration === generation) render();
 	};
+	const observer = new MutationObserver(() => {
+		update();
+	});
+	observer.observe(document.body, {
+		childList: true,
+		subtree: true
+	});
 	const timer = window.setInterval(() => {
 		update();
 	}, 1e3);
@@ -236,12 +811,18 @@ function mountMonitoring() {
 		stopped = true;
 		generation++;
 		window.clearInterval(timer);
+		observer.disconnect();
+		suppression.remove();
 		restore();
 		samples = [];
 	};
 }
 //#endregion
+exports.MetricChart = MetricChart;
 exports.aggregateMetrics = aggregateMetrics;
+exports.aggregateResources = aggregateResources;
+exports.effectivePodResource = effectivePodResource;
+exports.formatMonitoringTime = formatMonitoringTime;
 exports.parseQuantity = parseQuantity;
 exports.startMonitoring = startMonitoring;