diff --git a/examples/monitor-web/monitor_web.html b/examples/monitor-web/monitor_web.html index 7e14b5c..91d8182 100644 --- a/examples/monitor-web/monitor_web.html +++ b/examples/monitor-web/monitor_web.html @@ -252,6 +252,12 @@ Number.isFinite(v) ? v.toFixed(1) + "%" : "—"; const fmtC = (v) => (Number.isFinite(v) ? v.toFixed(0) + " °C" : "—"); const fmtW = (v) => (Number.isFinite(v) ? v.toFixed(1) + " W" : "—"); + const fmtGibUsage = (value) => { + if (!Number.isFinite(value)) return "—"; + if (Math.abs(value) >= 1024) return (value / 1024).toFixed(1) + "TiB"; + if (Math.abs(value) < 1) return (value * 1024).toFixed(0) + "MiB"; + return value.toFixed(1) + "GiB"; + }; const fmtAge = (s) => { if (!Number.isFinite(s) || s < 0) return "—"; if (s < 60) return s.toFixed(0) + "s"; @@ -340,8 +346,18 @@ return NaN; }; - const traceName = (label, value) => + const latestVisibleHostMemoryUsage = () => { + const samples = visibleChartSamples(); + for (let i = samples.length - 1; i >= 0; i -= 1) { + const value = pickHostMean(samples[i].metrics, "memory_used"); + if (Number.isFinite(value)) return value; + } + return NaN; + }; + + const tracePercentName = (label, value) => Number.isFinite(value) ? `${label} ${fmtPercentOne(value)}` : `${label} —`; + const traceUsageName = (label, value) => `${label} ${fmtGibUsage(value)}`; const setActiveHistoryRange = (activeButton) => { const rangeEl = $("history-range"); @@ -442,7 +458,7 @@ { line: { color: "#4ade80", width: 2 }, mode: "lines", - name: traceName("CPU", latestVisiblePercent("cpu_percent")), + name: tracePercentName("CPU", latestVisiblePercent("cpu_percent")), type: "scatter", x, y: cpu, @@ -450,7 +466,7 @@ { line: { color: "#38bdf8", width: 2 }, mode: "lines", - name: traceName("Host Memory", latestVisiblePercent("memory_percent")), + name: traceUsageName("Host Memory", latestVisibleHostMemoryUsage()), type: "scatter", x, y: memory,