@64mb/freelens-power 1.1.0 → 1.2.0

package/out/renderer/monitoring-history-view.js

@@ -3,14 +3,23 @@ const require__global_external_mobx = require("./_virtual/_global-external_mobx.
 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_jsx_runtime = require("./_virtual/_global-external_react/jsx-runtime.js");
+const require_react_select_esm = require("./node_modules/.pnpm/react-select@5.10.2_@types_react@17.0.93_react-dom@17.0.2_react@17.0.2__react@17.0.2/node_modules/react-select/dist/react-select.esm.js");
 const require_monitoring_history = require("./monitoring-history.js");
 //#region src/renderer/monitoring-history-view.tsx
 var HISTORY_RANGES = {
+	"5m": 3e5,
 	"30m": 18e5,
 	"2h": 72e5,
 	"24h": 864e5,
 	"7d": 6048e5
 };
+var RANGE_LABELS = {
+	"5m": "5 min",
+	"30m": "30 min",
+	"2h": "2 hours",
+	"24h": "24 hours",
+	"7d": "7 days"
+};
 function mergeHistorySamples(points, live, from) {
 	const buckets = /* @__PURE__ */ new Map();
 	for (const point of points) {
@@ -59,7 +68,7 @@ function useMonitoringHistory(identity, liveSamples) {
 	const preferences = require_monitoring_preferences_store.MonitoringPreferencesStore.getInstanceOrCreate();
 	const [enabled, setEnabled] = require__global_external_react.useState(preferences.historyEnabled === true);
 	require__global_external_react.useEffect(() => require__global_external_mobx.reaction(() => preferences.historyEnabled === true, setEnabled, { fireImmediately: true }), [preferences]);
-	const [range, setRange] = require__global_external_react.useState("30m");
+	const [range, setRange] = require__global_external_react.useState("5m");
 	const [points, setPoints] = require__global_external_react.useState([]);
 	const [status, setStatus] = require__global_external_react.useState("");
 	require__global_external_react.useEffect(() => {
@@ -76,7 +85,7 @@ function useMonitoringHistory(identity, liveSamples) {
 			})).then((value) => {
 				if (current) {
 					setPoints(value);
-					setStatus(value.length ? "Historical averages; min/max available in stored buckets" : "No local history for this range. Collection starts when enabled.");
+					setStatus(value.length ? "" : "No local history for this range. Collection starts when enabled.");
 				}
 			}).catch(() => {
 				if (current) setStatus("Local history unavailable. Live samples remain visible.");
@@ -101,44 +110,112 @@ function useMonitoringHistory(identity, liveSamples) {
 		status
 	};
 }
-function MonitoringHistoryRange({ range, onChange, native = false }) {
-	return /* @__PURE__ */ require_jsx_runtime.jsxs("label", {
+function MonitoringHistoryRange({ range, onChange, native = false, status, compact = false }) {
+	return /* @__PURE__ */ require_jsx_runtime.jsxs("div", {
+		className: compact ? "power-history-compact" : void 0,
 		style: {
-			display: "inline-flex",
-			alignItems: "center",
-			gap: 8
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "flex-start",
+			gap: 8,
+			marginBottom: compact ? 0 : 12
 		},
-		children: ["History range", /* @__PURE__ */ require_jsx_runtime.jsx("span", {
-			style: { width: 120 },
-			children: native ? /* @__PURE__ */ require_jsx_runtime.jsx(require_extensions.Renderer.Component.Select, {
-				"aria-label": "History range",
-				value: range,
-				options: Object.keys(HISTORY_RANGES).map((value) => ({
-					value,
-					label: value
-				})),
-				onChange: (option) => {
-					if (option) onChange(option.value);
+		children: [
+			/* @__PURE__ */ require_jsx_runtime.jsx("style", { children: `
+        .power-history-select.Select { min-width: 0; width: 100%; }
+        .power-history-select .Select__control { min-height: 32px; }
+        .power-history-select .Select__value-container { padding: 6px 10px; }
+        .power-history-compact .Select__control { min-height: 26px; height:26px; font-size:12px; }
+        .power-history-compact .Select__value-container { padding:4px 8px; }
+        .power-history-compact .Select__indicator { padding:3px; }
+        .power-history-compact .Select__indicator svg { width:14px;height:14px; }
+      ` }),
+			/* @__PURE__ */ require_jsx_runtime.jsxs("label", {
+				style: {
+					display: "inline-flex",
+					alignItems: "center",
+					gap: 12,
+					minHeight: compact ? 26 : 32,
+					color: "var(--textColorSecondary)"
 				},
-				isClearable: false
-			}) : /* @__PURE__ */ require_jsx_runtime.jsx("select", {
-				"aria-label": "History range",
-				value: range,
-				onChange: (event) => onChange(event.target.value),
+				children: [!compact && "Period", /* @__PURE__ */ require_jsx_runtime.jsx("span", {
+					style: {
+						width: compact ? 88 : 140,
+						position: "relative",
+						display: "inline-flex",
+						alignItems: "center"
+					},
+					children: native ? /* @__PURE__ */ require_jsx_runtime.jsx(require_extensions.Renderer.Component.Select, {
+						className: "power-history-select",
+						"aria-label": "History range",
+						value: range,
+						options: Object.keys(HISTORY_RANGES).map((value) => ({
+							value,
+							label: RANGE_LABELS[value]
+						})),
+						onChange: (option) => {
+							if (option) onChange(option.value);
+						},
+						isClearable: false
+					}) : /* @__PURE__ */ require_jsx_runtime.jsx(require_react_select_esm.default, {
+						"aria-label": "History range",
+						className: "Select power-history-select",
+						classNamePrefix: "Select",
+						unstyled: true,
+						isSearchable: false,
+						isClearable: false,
+						value: {
+							value: range,
+							label: RANGE_LABELS[range]
+						},
+						options: Object.keys(HISTORY_RANGES).map((value) => ({
+							value,
+							label: RANGE_LABELS[value]
+						})),
+						onChange: (option) => {
+							if (option) onChange(option.value);
+						},
+						onKeyDown: (event) => {
+							if (event.key === "Escape") event.stopPropagation();
+						},
+						menuPortalTarget: document.body,
+						menuPlacement: "auto",
+						styles: {
+							menuPortal: (base) => ({
+								...base,
+								zIndex: 1e4
+							}),
+							...compact ? {
+								menu: (base) => ({
+									...base,
+									minWidth: 88,
+									width: "100%"
+								}),
+								menuList: (base) => ({
+									...base,
+									padding: 4
+								}),
+								option: (base) => ({
+									...base,
+									fontSize: 12,
+									lineHeight: "16px",
+									padding: "4px 8px",
+									minHeight: 24
+								})
+							} : {}
+						}
+					})
+				})]
+			}),
+			status && /* @__PURE__ */ require_jsx_runtime.jsx("small", {
+				role: "status",
 				style: {
-					width: "100%",
-					padding: "6px 8px",
-					color: "var(--textColorPrimary)",
-					background: "var(--contentColor)",
-					border: "1px solid var(--borderColor)",
-					borderRadius: 4
+					color: "var(--textColorSecondary)",
+					lineHeight: 1.4
 				},
-				children: Object.keys(HISTORY_RANGES).map((value) => /* @__PURE__ */ require_jsx_runtime.jsx("option", {
-					value,
-					children: value
-				}, value))
+				children: status
 			})
-		})]
+		]
 	});
 }
 //#endregion

package/out/renderer/monitoring-history-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"monitoring-history-view.js","names":[],"sources":["../../src/renderer/monitoring-history-view.tsx"],"sourcesContent":["import { Renderer } from \"@freelensapp/extensions\";\nimport { reaction } from \"mobx\";\nimport { useEffect, useState } from \"react\";\nimport { MonitoringPreferencesStore } from \"../common/store/monitoring-preferences-store\";\nimport { monitoringHistory } from \"./monitoring-history\";\n\nimport type { HistoryIdentity, HistoryPoint } from \"../common/monitoring-history\";\nimport type { MonitoringSample } from \"../common/monitoring-math\";\nexport const HISTORY_RANGES = { \"30m\": 1_800_000, \"2h\": 7_200_000, \"24h\": 86_400_000, \"7d\": 604_800_000 } as const;\nexport type HistoryRange = keyof typeof HISTORY_RANGES;\nexport function mergeHistorySamples(\n  points: HistoryPoint[],\n  live: MonitoringSample[],\n  from: number,\n): MonitoringSample[] {\n  const buckets = new Map<number, MonitoringSample>();\n  for (const point of points) {\n    if (point.time < from) continue;\n    const sample = buckets.get(point.time) ?? { time: point.time, cpu: NaN, memory: NaN };\n    if (point.metric === \"cpu\" || point.metric === \"memory\") {\n      sample[point.metric] = point.avg;\n      sample.historical ??= {};\n      sample.historical[point.metric] = {\n        min: point.min,\n        max: point.max,\n        count: point.count,\n        resolution: point.resolution,\n        gap: point.gap,\n      };\n      if (point.gap) sample.breakBefore = true;\n    } else if (point.metric !== \"restarts\") {\n      const match = /^(cpu|memory)(Requests|Limits|Capacity|Allocatable)$/.exec(point.metric);\n      if (match) {\n        sample.resources ??= { cpu: {}, memory: {} };\n        sample.resources[match[1] as \"cpu\" | \"memory\"][\n          match[2].toLowerCase() as \"requests\" | \"limits\" | \"capacity\" | \"allocatable\"\n        ] = point.avg;\n      }\n    }\n    if (point.gap) sample.resourceStatus = \"Partial historical bucket; missing samples are gaps\";\n    buckets.set(point.time, sample);\n  }\n  for (const sample of live)\n    if (sample.time >= from) {\n      for (const point of points)\n        if (sample.time >= point.time && sample.time < point.time + point.resolution) buckets.delete(point.time);\n      buckets.set(sample.time, sample);\n    }\n  const samples = [...buckets.values()]\n    .filter((sample) => Number.isFinite(sample.cpu) && Number.isFinite(sample.memory))\n    .sort((a, b) => a.time - b.time);\n  const resolution = (sample: MonitoringSample) =>\n    Math.max(sample.historical?.cpu?.resolution ?? 30_000, sample.historical?.memory?.resolution ?? 30_000);\n  return samples.map((sample, index) =>\n    index > 0 &&\n    sample.time - samples[index - 1].time > 1.8 * Math.max(resolution(sample), resolution(samples[index - 1]))\n      ? { ...sample, breakBefore: true }\n      : sample,\n  );\n}\nexport function useMonitoringHistory(identity: HistoryIdentity | undefined, liveSamples: MonitoringSample[]) {\n  const preferences = MonitoringPreferencesStore.getInstanceOrCreate<MonitoringPreferencesStore>();\n  const [enabled, setEnabled] = useState(preferences.historyEnabled === true);\n  useEffect(\n    () => reaction(() => preferences.historyEnabled === true, setEnabled, { fireImmediately: true }),\n    [preferences],\n  );\n  const [range, setRange] = useState<HistoryRange>(\"30m\");\n  const [points, setPoints] = useState<HistoryPoint[]>([]);\n  const [status, setStatus] = useState(\"\");\n  const key = identity ? `${identity.clusterId}/${identity.scope}/${identity.uid}` : \"\";\n  useEffect(() => {\n    let current = true;\n    setPoints([]);\n    setStatus(\"\");\n    if (!identity || !enabled) return;\n    const query = () => {\n      const to = Date.now();\n      void Promise.resolve()\n        .then(() => monitoringHistory.query({ ...identity, from: to - HISTORY_RANGES[range] + 1000, to }))\n        .then((value) => {\n          if (current) {\n            setPoints(value);\n            setStatus(\n              value.length\n                ? \"Historical averages; min/max available in stored buckets\"\n                : \"No local history for this range. Collection starts when enabled.\",\n            );\n          }\n        })\n        .catch(() => {\n          if (current) setStatus(\"Local history unavailable. Live samples remain visible.\");\n        });\n    };\n    query();\n    const timer = window.setInterval(query, 30_000);\n    return () => {\n      current = false;\n      window.clearInterval(timer);\n    };\n  }, [key, range, enabled]);\n  return {\n    range,\n    setRange,\n    samples: mergeHistorySamples(points, liveSamples, Date.now() - HISTORY_RANGES[range]),\n    points,\n    status,\n  };\n}\nexport function MonitoringHistoryRange({\n  range,\n  onChange,\n  native = false,\n}: {\n  range: HistoryRange;\n  onChange: (value: HistoryRange) => void;\n  // host [Select] requires injected context unavailable in detached chart roots\n  native?: boolean;\n}) {\n  return (\n    <label style={{ display: \"inline-flex\", alignItems: \"center\", gap: 8 }}>\n      History range\n      <span style={{ width: 120 }}>\n        {native ? (\n          <Renderer.Component.Select\n            aria-label=\"History range\"\n            value={range}\n            options={Object.keys(HISTORY_RANGES).map((value) => ({ value: value as HistoryRange, label: value }))}\n            onChange={(option) => {\n              if (option) onChange(option.value);\n            }}\n            isClearable={false}\n          />\n        ) : (\n          <select\n            aria-label=\"History range\"\n            value={range}\n            onChange={(event) => onChange(event.target.value as HistoryRange)}\n            style={{\n              width: \"100%\",\n              padding: \"6px 8px\",\n              color: \"var(--textColorPrimary)\",\n              background: \"var(--contentColor)\",\n              border: \"1px solid var(--borderColor)\",\n              borderRadius: 4,\n            }}\n          >\n            {Object.keys(HISTORY_RANGES).map((value) => (\n              <option key={value} value={value}>\n                {value}\n              </option>\n            ))}\n          </select>\n        )}\n      </span>\n    </label>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"monitoring-history-view.js","names":[],"sources":["../../src/renderer/monitoring-history-view.tsx"],"sourcesContent":["import { Renderer } from \"@freelensapp/extensions\";\nimport { reaction } from \"mobx\";\nimport { useEffect, useState } from \"react\";\nimport ReactSelect from \"react-select\";\nimport { MonitoringPreferencesStore } from \"../common/store/monitoring-preferences-store\";\nimport { monitoringHistory } from \"./monitoring-history\";\n\nimport type { HistoryIdentity, HistoryPoint } from \"../common/monitoring-history\";\nimport type { MonitoringSample } from \"../common/monitoring-math\";\nexport const HISTORY_RANGES = {\n  \"5m\": 300_000,\n  \"30m\": 1_800_000,\n  \"2h\": 7_200_000,\n  \"24h\": 86_400_000,\n  \"7d\": 604_800_000,\n} as const;\nexport type HistoryRange = keyof typeof HISTORY_RANGES;\nconst RANGE_LABELS: Record<HistoryRange, string> = {\n  \"5m\": \"5 min\",\n  \"30m\": \"30 min\",\n  \"2h\": \"2 hours\",\n  \"24h\": \"24 hours\",\n  \"7d\": \"7 days\",\n};\nexport function mergeHistorySamples(\n  points: HistoryPoint[],\n  live: MonitoringSample[],\n  from: number,\n): MonitoringSample[] {\n  const buckets = new Map<number, MonitoringSample>();\n  for (const point of points) {\n    if (point.time < from) continue;\n    const sample = buckets.get(point.time) ?? { time: point.time, cpu: NaN, memory: NaN };\n    if (point.metric === \"cpu\" || point.metric === \"memory\") {\n      sample[point.metric] = point.avg;\n      sample.historical ??= {};\n      sample.historical[point.metric] = {\n        min: point.min,\n        max: point.max,\n        count: point.count,\n        resolution: point.resolution,\n        gap: point.gap,\n      };\n      if (point.gap) sample.breakBefore = true;\n    } else if (point.metric !== \"restarts\") {\n      const match = /^(cpu|memory)(Requests|Limits|Capacity|Allocatable)$/.exec(point.metric);\n      if (match) {\n        sample.resources ??= { cpu: {}, memory: {} };\n        sample.resources[match[1] as \"cpu\" | \"memory\"][\n          match[2].toLowerCase() as \"requests\" | \"limits\" | \"capacity\" | \"allocatable\"\n        ] = point.avg;\n      }\n    }\n    if (point.gap) sample.resourceStatus = \"Partial historical bucket; missing samples are gaps\";\n    buckets.set(point.time, sample);\n  }\n  for (const sample of live)\n    if (sample.time >= from) {\n      for (const point of points)\n        if (sample.time >= point.time && sample.time < point.time + point.resolution) buckets.delete(point.time);\n      buckets.set(sample.time, sample);\n    }\n  const samples = [...buckets.values()]\n    .filter((sample) => Number.isFinite(sample.cpu) && Number.isFinite(sample.memory))\n    .sort((a, b) => a.time - b.time);\n  const resolution = (sample: MonitoringSample) =>\n    Math.max(sample.historical?.cpu?.resolution ?? 30_000, sample.historical?.memory?.resolution ?? 30_000);\n  return samples.map((sample, index) =>\n    index > 0 &&\n    sample.time - samples[index - 1].time > 1.8 * Math.max(resolution(sample), resolution(samples[index - 1]))\n      ? { ...sample, breakBefore: true }\n      : sample,\n  );\n}\nexport function useMonitoringHistory(identity: HistoryIdentity | undefined, liveSamples: MonitoringSample[]) {\n  const preferences = MonitoringPreferencesStore.getInstanceOrCreate<MonitoringPreferencesStore>();\n  const [enabled, setEnabled] = useState(preferences.historyEnabled === true);\n  useEffect(\n    () => reaction(() => preferences.historyEnabled === true, setEnabled, { fireImmediately: true }),\n    [preferences],\n  );\n  const [range, setRange] = useState<HistoryRange>(\"5m\");\n  const [points, setPoints] = useState<HistoryPoint[]>([]);\n  const [status, setStatus] = useState(\"\");\n  const key = identity ? `${identity.clusterId}/${identity.scope}/${identity.uid}` : \"\";\n  useEffect(() => {\n    let current = true;\n    setPoints([]);\n    setStatus(\"\");\n    if (!identity || !enabled) return;\n    const query = () => {\n      const to = Date.now();\n      void Promise.resolve()\n        .then(() => monitoringHistory.query({ ...identity, from: to - HISTORY_RANGES[range] + 1000, to }))\n        .then((value) => {\n          if (current) {\n            setPoints(value);\n            setStatus(value.length ? \"\" : \"No local history for this range. Collection starts when enabled.\");\n          }\n        })\n        .catch(() => {\n          if (current) setStatus(\"Local history unavailable. Live samples remain visible.\");\n        });\n    };\n    query();\n    const timer = window.setInterval(query, 30_000);\n    return () => {\n      current = false;\n      window.clearInterval(timer);\n    };\n  }, [key, range, enabled]);\n  return {\n    range,\n    setRange,\n    samples: mergeHistorySamples(points, liveSamples, Date.now() - HISTORY_RANGES[range]),\n    points,\n    status,\n  };\n}\nexport function MonitoringHistoryRange({\n  range,\n  onChange,\n  native = false,\n  status,\n  compact = false,\n}: {\n  range: HistoryRange;\n  onChange: (value: HistoryRange) => void;\n  // host [Select] requires injected context unavailable in detached chart roots\n  native?: boolean;\n  status?: string;\n  compact?: boolean;\n}) {\n  return (\n    <div\n      className={compact ? \"power-history-compact\" : undefined}\n      style={{\n        display: \"flex\",\n        flexDirection: \"column\",\n        alignItems: \"flex-start\",\n        gap: 8,\n        marginBottom: compact ? 0 : 12,\n      }}\n    >\n      <style>{`\n        .power-history-select.Select { min-width: 0; width: 100%; }\n        .power-history-select .Select__control { min-height: 32px; }\n        .power-history-select .Select__value-container { padding: 6px 10px; }\n        .power-history-compact .Select__control { min-height: 26px; height:26px; font-size:12px; }\n        .power-history-compact .Select__value-container { padding:4px 8px; }\n        .power-history-compact .Select__indicator { padding:3px; }\n        .power-history-compact .Select__indicator svg { width:14px;height:14px; }\n      `}</style>\n      <label\n        style={{\n          display: \"inline-flex\",\n          alignItems: \"center\",\n          gap: 12,\n          minHeight: compact ? 26 : 32,\n          color: \"var(--textColorSecondary)\",\n        }}\n      >\n        {!compact && \"Period\"}\n        <span style={{ width: compact ? 88 : 140, position: \"relative\", display: \"inline-flex\", alignItems: \"center\" }}>\n          {native ? (\n            <Renderer.Component.Select\n              className=\"power-history-select\"\n              aria-label=\"History range\"\n              value={range}\n              options={Object.keys(HISTORY_RANGES).map((value) => ({\n                value: value as HistoryRange,\n                label: RANGE_LABELS[value as HistoryRange],\n              }))}\n              onChange={(option) => {\n                if (option) onChange(option.value);\n              }}\n              isClearable={false}\n            />\n          ) : (\n            <ReactSelect\n              aria-label=\"History range\"\n              className=\"Select power-history-select\"\n              classNamePrefix=\"Select\"\n              unstyled\n              isSearchable={false}\n              isClearable={false}\n              value={{ value: range, label: RANGE_LABELS[range] }}\n              options={Object.keys(HISTORY_RANGES).map((value) => ({\n                value: value as HistoryRange,\n                label: RANGE_LABELS[value as HistoryRange],\n              }))}\n              onChange={(option) => {\n                if (option) onChange(option.value);\n              }}\n              onKeyDown={(event) => {\n                if (event.key === \"Escape\") event.stopPropagation();\n              }}\n              menuPortalTarget={document.body}\n              menuPlacement=\"auto\"\n              styles={{\n                menuPortal: (base) => ({ ...base, zIndex: 10000 }),\n                ...(compact\n                  ? {\n                      menu: (base) => ({ ...base, minWidth: 88, width: \"100%\" }),\n                      menuList: (base) => ({ ...base, padding: 4 }),\n                      option: (base) => ({\n                        ...base,\n                        fontSize: 12,\n                        lineHeight: \"16px\",\n                        padding: \"4px 8px\",\n                        minHeight: 24,\n                      }),\n                    }\n                  : {}),\n              }}\n            />\n          )}\n        </span>\n      </label>\n      {status && (\n        <small role=\"status\" style={{ color: \"var(--textColorSecondary)\", lineHeight: 1.4 }}>\n          {status}\n        </small>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/out/renderer/monitoring.js

@@ -4,6 +4,7 @@ const require_monitoring_preferences_store = require("./src/common/store/monitor
 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");
+const require_date_time = require("./src/common/date-time.js");
 const require_monitoring_math = require("./src/common/monitoring-math.js");
 const require_monitoring_collector = require("./monitoring-collector.js");
 const require_monitoring_history_view = require("./monitoring-history-view.js");
@@ -37,7 +38,7 @@ function ResourceTitle({ metric, label }) {
 		}), label ?? (metric === "cpu" ? "CPU" : "Memory")]
 	});
 }
-function MetricChart({ metric, samples, status, scope = "node" }) {
+function MetricChart({ metric, samples, status, scope = "node", headerAction }) {
 	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);
@@ -138,11 +139,19 @@ function MetricChart({ metric, samples, status, scope = "node" }) {
 			position: "relative"
 		},
 		children: [
+			headerAction && /* @__PURE__ */ require_jsx_runtime.jsx("div", {
+				className: "power-monitoring-period-action",
+				children: headerAction
+			}),
 			/* @__PURE__ */ require_jsx_runtime.jsxs("div", {
+				"data-monitoring-heading": "",
 				style: {
 					display: "flex",
 					alignItems: "center",
-					gap: 12
+					flexWrap: "wrap",
+					gap: 12,
+					paddingRight: headerAction ? 100 : 0,
+					minHeight: headerAction ? 32 : void 0
 				},
 				children: [/* @__PURE__ */ require_jsx_runtime.jsx(ResourceTitle, { metric }), /* @__PURE__ */ require_jsx_runtime.jsx("span", { children: status ? "Unavailable" : last ? format(last[metric]) : "Collecting…" })]
 			}),
@@ -226,25 +235,52 @@ function MetricChart({ metric, samples, status, scope = "node" }) {
 							strokeWidth: 4
 						}, `range:${sample.time}`);
 					}),
-					visibleSeries.map((line) => /* @__PURE__ */ require_jsx_runtime.jsx("path", {
-						"data-monitoring-series": line.key,
-						d: samples.reduce((path, sample, index) => {
+					visibleSeries.map((line) => {
+						let path = "";
+						let gaps = "";
+						let previous;
+						let interrupted = false;
+						for (const sample of samples) {
 							const value = line.value(sample);
-							if (value === void 0) return path;
-							return `${path} ${(index ? line.value(samples[index - 1]) : void 0) === void 0 || sample.breakBefore || sample.time - samples[index - 1].time > 1.8 * Math.max(sample.historical?.[metric]?.resolution ?? 3e4, samples[index - 1].historical?.[metric]?.resolution ?? 3e4) ? "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)),
+							if (value === void 0 || !Number.isFinite(value)) {
+								interrupted = true;
+								continue;
+							}
+							const point = `${x(sample)},${208 - value / max * 184}`;
+							const gap = previous && (interrupted || sample.breakBefore || sample.time - previous.sample.time > 1.8 * Math.max(sample.historical?.[metric]?.resolution ?? 3e4, previous.sample.historical?.[metric]?.resolution ?? 3e4));
+							path += ` ${!previous || gap ? "M" : "L"}${point}`;
+							if (previous && gap) gaps += ` M${previous.point} L${point}`;
+							previous = {
+								sample,
+								point
+							};
+							interrupted = false;
+						}
+						return /* @__PURE__ */ require_jsx_runtime.jsxs("g", { children: [/* @__PURE__ */ require_jsx_runtime.jsx("path", {
+							"data-monitoring-series": line.key,
+							d: path,
+							fill: "none",
+							stroke: line.color,
+							strokeWidth: "2",
+							strokeDasharray: line.key === "capacity" || line.key === "allocatable" ? "5 3" : void 0
+						}), gaps && /* @__PURE__ */ require_jsx_runtime.jsx("path", {
+							"data-monitoring-gap": line.key,
+							d: gaps,
+							fill: "none",
+							stroke: line.color,
+							strokeWidth: "2",
+							strokeDasharray: "3 4",
+							opacity: ".65",
+							children: /* @__PURE__ */ require_jsx_runtime.jsx("title", { children: "Dashed connections span missing measurements; intermediate values are unknown" })
+						})] }, 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),
+							require_date_time.formatDateTime(sample.time),
 							": ",
 							format(sample[metric])
 						] })
@@ -290,7 +326,10 @@ function MetricChart({ metric, samples, status, scope = "node" }) {
 					pointerEvents: "none"
 				},
 				children: [
-					/* @__PURE__ */ require_jsx_runtime.jsxs("div", { children: [formatMonitoringTime(selected.time), pinned ? " · Pinned" : ""] }),
+					/* @__PURE__ */ require_jsx_runtime.jsxs("div", {
+						style: { whiteSpace: "pre-wrap" },
+						children: [require_date_time.formatDateTime(selected.time), pinned ? " · Pinned" : ""]
+					}),
 					visibleSeries.map((line) => /* @__PURE__ */ require_jsx_runtime.jsxs("div", {
 						style: { color: line.color },
 						children: [
@@ -569,6 +608,7 @@ function MonitoringCharts({ samples, status }) {
 			/* @__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 }
+      .power-monitoring-period-action { position:absolute;right:16px;top:19px }
       @container (min-width: 961px) {
         [data-monitoring-summaries] > section { --power-monitoring-summary-top:16px }
       }
@@ -578,23 +618,19 @@ function MonitoringCharts({ samples, status }) {
       }
       @container (max-width: 580px) {
         [data-monitoring-layout] { grid-template-columns:minmax(0,1fr) }
+        .power-monitoring-period-action { left:16px;right:auto;top:15px }
+        [data-monitoring-trends] > section:first-child { --power-monitoring-trend-top:56px }
         .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", {
+			history.status && /* @__PURE__ */ require_jsx_runtime.jsx("small", {
+				role: "status",
 				style: {
-					display: "flex",
-					alignItems: "center",
-					gap: 12,
+					display: "block",
+					color: "var(--textColorSecondary)",
 					marginBottom: 8
 				},
-				children: [/* @__PURE__ */ require_jsx_runtime.jsx(require_monitoring_history_view.MonitoringHistoryRange, {
-					range: history.range,
-					onChange: history.setRange
-				}), /* @__PURE__ */ require_jsx_runtime.jsx("small", {
-					role: "status",
-					children: history.status
-				})]
+				children: history.status
 			}),
 			/* @__PURE__ */ require_jsx_runtime.jsxs("div", {
 				"data-monitoring-layout": "",
@@ -603,7 +639,12 @@ function MonitoringCharts({ samples, status }) {
 					children: ["cpu", "memory"].map((metric) => /* @__PURE__ */ require_jsx_runtime.jsx(MetricChart, {
 						metric,
 						samples: history.samples,
-						status
+						status,
+						headerAction: metric === "cpu" ? /* @__PURE__ */ require_jsx_runtime.jsx(require_monitoring_history_view.MonitoringHistoryRange, {
+							compact: true,
+							range: history.range,
+							onChange: history.setRange
+						}) : void 0
 					}, metric))
 				}), /* @__PURE__ */ require_jsx_runtime.jsx("div", {
 					"data-monitoring-summaries": "",