Round Network stat's rate before formatting to fix layout-breaking decimals

README.md

@@ -12,7 +12,7 @@
     <img alt="Docker" src="https://img.shields.io/badge/Docker-ready-2496ED?logo=docker&logoColor=white">
     <img alt="Architectures" src="https://img.shields.io/badge/platform-amd64%20%7C%20arm64-5965F2">
     <img alt="Caddy" src="https://img.shields.io/badge/powered%20by-Caddy-1F88C0">
-    <img alt="Version" src="https://img.shields.io/badge/version-0.16.30-62E6A7">
+    <img alt="Version" src="https://img.shields.io/badge/version-0.16.33-62E6A7">
   </p>
   <p>
     <a href="#why-site-gateway">Why Site Gateway</a> ·
@@ -94,6 +94,7 @@ Automatic HTTPS requires valid public DNS and inbound access to port 80 or 443.
 | `ADMIN_PORT` | `8080` | Dashboard port inside the container |
 | `SITE_PORT_MIN` / `SITE_PORT_MAX` | `9000` / `9099` | Direct-LAN port range Hosted Sites can bind to |
 | `DATA_DIR` | `/data` | Persistent state location |
+| `DATA_DIR_LIMIT_GB` | empty | Optional display-only allowance for the System tab's Disk stat (e.g. a smaller dedicated share); usage/free space still come from the real volume |
 | `BACKUP_PASSWORD` | empty | Encryption password used only when encrypted scheduled backups are enabled |
 | `PUID` / `PGID` | `1000` / `1000` | User/group the container writes files as (Unraid: `99`/`100`) |
 | `ACME_EMAIL` | empty | Optional certificate account email |

ROADMAP.md

@@ -186,3 +186,9 @@ Roughly in priority order:
 `v0.16.29` adds a hero panel to the top of the Administration > System tab -- a single, visually distinct "one-stop shop" for this container's live CPU, memory, swap, disk, and network numbers, plus request throughput, all in one place instead of scattered across the plain status tiles below it. CPU, memory, and swap all read directly from this container's own cgroup v2 files (`cpu.stat`'s `usage_usec`, `memory.current`/`memory.max`, `memory.swap.current`/`memory.swap.max`) rather than host-level figures, on the same reasoning already settled for this feature: Site Gateway is rarely the only thing running on the host, so a host-wide number would be misleading in a dashboard scoped to one container. CPU percent is computed from two samples of the cumulative `usage_usec` counter taken a poll apart, normalized against `cpu.max`'s quota when one is set (or the host's core count when it isn't); memory and swap read straight off their `.current`/`.max` pairs, with swap showing "Off" rather than a stale percentage when the container has none configured. Disk reuses the same `statfs`-on-the-data-volume approach the System tab's storage breakdown already used. Network throughput is new: since `/sys/class/net/*/statistics/{rx_bytes,tx_bytes}` are cumulative counters too, a background sampler reads every non-loopback interface every 5 seconds and keeps a rolling rate in memory, so the hero panel always shows a real, smoothed rate rather than a lifetime total or a jittery two-reads-per-request estimate. Request throughput reuses the exact number already shown on the main Dashboard ("requests in the last minute"), so the two stay in sync without duplicating the underlying query. Each stat degrades independently and visibly rather than silently: a metric with no readable source (cgroup v1 hosts, a sandboxed `/sys/class/net`, and so on) shows a dash and a one-line explanation instead of a wrong number or a blank space, and CPU/memory/swap/disk fills turn amber past 75% and red past 90%, matching the color language already used elsewhere in the app for degraded/warning states.
 
 `v0.16.30` fixes two numbers on the System tab's new hero panel (added in v0.16.29) that were technically correct but meant the wrong thing. CPU percent was always computed against either a real Docker `--cpus` quota or, absent one, the *host's total core count* -- so pinning the container to 2 specific cores (`--cpuset-cpus`, Unraid's CPU pinning field) didn't change the denominator at all, since pinning caps which cores can run without capping how much of them can be used, and `cpu.max` stays `max` either way. CPU now checks `cpuset.cpus.effective` (the actual pinned core list, correctly counting ranges like `0-1,4`) whenever there's no real quota, and the hero panel's detail line now says which denominator applies -- "Of N allocated CPUs" for a real `--cpus` quota, "Of N pinned cores" for cpuset pinning with no quota, or "Of host's N cores -- no limit set" when neither is configured -- instead of always claiming "Of this container's CPU quota" even when there wasn't one. Swap had a similar honesty problem: without an explicit `--memory-swap` limit, `memory.swap.max` reads `max` (unbounded, shared with the host's swap) rather than "0," but the panel showed a bare "0 B" that read like a real, enforced cap. It now only shows a percentage when a real swap limit exists; otherwise it shows the actual bytes in use with "Unlimited -- shares host swap" instead of implying a limit that was never set.
+
+`v0.16.31` adds the two remaining items from the System tab hero panel's fix list. First, the panel now keeps itself current while you're actually looking at it: a lightweight timer polls `/api/system/health` directly every 7 seconds whenever the System tab is the visible admin panel, separate from the app's full `refresh()` (which also refetches sites, proxies, certificates, and everything else) so it stays cheap on a fast interval, and it's a no-op the moment you navigate away rather than continuing to poll in the background. Previously the hero panel only updated on initial page load or whenever *anything else* in the app happened to trigger a `refresh()` -- sitting on the tab watching it did nothing. Second, a new `DATA_DIR_LIMIT_GB` environment variable lets an operator tell the Disk stat what's actually assigned to this deployment -- a dedicated share or zvol smaller than the whole host volume, for instance -- instead of always showing usage against the full underlying filesystem size. This is necessarily display-only, since Docker has no real per-container disk-space quota the way it does for CPU (`cpu.max`) or memory (`memory.max`); actual usage and free space still come straight from `statfs` on the real volume, only the percentage's denominator and the "used of X assigned" label change. Set past 100%, the stat turns red rather than silently capping, since exceeding an assigned allowance is a real, meaningful warning rather than a display bug.
+
+`v0.16.32` fixes a real bug in v0.16.31's `DATA_DIR_LIMIT_GB` disk allowance: the percentage it computed compared an assigned per-app allowance (e.g. 30 GB) against `statfs`'s used-space figure for the *entire filesystem* behind `/data` -- which on a shared array, cache pool, or any volume with other things living on it, has nothing to do with how much Site Gateway itself has actually written. A container assigned 30 GB sitting on a host volume that's 160 GB full of unrelated data showed as "534% used," which is a meaningless number dressed up as a warning. When `DATA_DIR_LIMIT_GB` is set, the Disk stat now compares against Site Gateway's own actual footprint instead -- the same recursive `/data` walk (`directorySize()`) the System tab's storage breakdown already performs -- so the percentage reflects what this app has actually written, not what else happens to share its disk. That walk only runs when the environment variable is actually set, since it isn't free and the whole-volume `statfs` numbers (used with no assigned limit configured) don't need it.
+
+`v0.16.33` fixes the System tab hero panel's Network stat printing absurd, layout-breaking values like "846.7603211009175 B/s" instead of a clean rounded number. Root cause: `formatBytes()` only rounds once a value crosses into KB -- below 1024 it returns the number exactly as given, which has always been fine because every other caller passes it a file size (always a whole integer). The Network stat is the first caller to feed it a computed rate (bytes divided by elapsed seconds), which is almost never a whole number, so sub-1 KB/s readings rendered with a dozen decimal places and wrapped onto a second line, breaking the hero panel's layout. `formatRate()` now rounds to the nearest whole byte before handing off to `formatBytes()`, matching what every other value passing through it already looks like.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "site-gateway",
-  "version": "0.16.30",
+  "version": "0.16.33",
   "private": true,
   "description": "Site Gateway: simple self-hosted website publishing, reverse proxying, and automatic HTTPS.",
   "type": "module",

src/public/features.js

@@ -572,7 +572,10 @@ document.addEventListener("click", async event => {
 
 
 // Formats a byte rate as e.g. "1.2 MB/s"; reuses formatBytes and just appends the rate suffix.
-function formatRate(bytesPerSecond) { return `${formatBytes(bytesPerSecond)}/s`; }
+// formatBytes() only rounds once a value crosses into KB -- below that it echoes the raw
+// number verbatim, which is fine for the file sizes it’s normally fed (always whole integers)
+// but not for a computed rate, so round to a whole byte first.
+function formatRate(bytesPerSecond) { return `${formatBytes(Math.round(bytesPerSecond))}/s`; }
 function setHeroStat(key, { value, percent, detail, tone } = {}) {
   const valueEl = document.querySelector(`#system-hero-${key}-value`), fillEl = document.querySelector(`#system-hero-${key}-fill`), detailEl = document.querySelector(`#system-hero-${key}-detail`);
   if (valueEl) valueEl.textContent = value ?? "\u2014";
@@ -600,7 +603,11 @@ function renderSystemHealthHero(health) {
   else if (health.swap && health.swap.limitBytes) setHeroStat("swap", { value: `${health.swap.percent.toFixed(1)}%`, percent: health.swap.percent, tone: tone(health.swap.percent), detail: `${formatBytes(health.swap.usedBytes)} / ${formatBytes(health.swap.limitBytes)}` });
   else if (health.swap) setHeroStat("swap", { value: formatBytes(health.swap.usedBytes), percent: 0, detail: "Unlimited \u2014 shares host swap" });
   else setHeroStat("swap", { value: "\u2014", detail: "cgroup swap stats unavailable" });
-  if (health.disk) setHeroStat("disk", { value: `${health.disk.percent.toFixed(1)}%`, percent: health.disk.percent, tone: tone(health.disk.percent), detail: `${formatBytes(health.disk.usedBytes)} used \u00b7 ${formatBytes(health.disk.availableBytes)} free` });
+  if (health.disk) {
+    const overAssigned = health.disk.assignedLimitBytes && health.disk.percent > 100;
+    const diskDetail = health.disk.assignedLimitBytes ? `${formatBytes(health.disk.usedBytes)} used of ${formatBytes(health.disk.assignedLimitBytes)} assigned` : `${formatBytes(health.disk.usedBytes)} used \u00b7 ${formatBytes(health.disk.availableBytes)} free`;
+    setHeroStat("disk", { value: `${health.disk.percent.toFixed(1)}%`, percent: Math.min(100, health.disk.percent), tone: overAssigned ? "critical" : tone(health.disk.percent), detail: diskDetail });
+  }
   else setHeroStat("disk", { value: "\u2014", detail: "Disk stats unavailable" });
   if (health.network) setHeroStat("network", { value: formatRate(health.network.rxBytesPerSec + health.network.txBytesPerSec), percent: 0, detail: `\u2193 ${formatRate(health.network.rxBytesPerSec)} \u00b7 \u2191 ${formatRate(health.network.txBytesPerSec)}` });
   else setHeroStat("network", { value: "\u2014", detail: "Sampling\u2026" });
@@ -664,6 +671,16 @@ function renderSystemPanel() {
       }
       catch (error) { toast(error.message, "error"); button.disabled = false; button.textContent = "Restart application"; }
     });
+    // Keep the hero panel's live numbers current while the System tab is actually visible --
+    // a lightweight direct poll of /api/system/health, not a full refresh() (which also
+    // refetches sites/proxies/certificates/etc.), so it stays cheap even on a fast interval.
+    // Stops itself from doing any work (skips the fetch) once the tab isn't in view, mirroring
+    // the guard the Dashboard's own health timer already uses for the same reason.
+    if (!state.systemHealthTimer) state.systemHealthTimer = setInterval(() => {
+      const systemPanel = document.querySelector('[data-admin-panel="system"]');
+      if (state.view !== "administration" || !systemPanel || systemPanel.classList.contains("hidden")) return;
+      api("/api/system/health").then(renderSystemHealthHero).catch(() => {});
+    }, 7000);
   }
   renderSystemStatus(panel);
 }

src/public/index.html

@@ -8,7 +8,7 @@
   <title>Site Gateway</title>
   <meta name="description" content="Host sites, proxy services, and manage HTTPS from one simple dashboard.">
   <link rel="icon" type="image/png" href="/site-gateway-icon-approved.png">
-  <link rel="stylesheet" href="/styles.css?v=0.16.30">
+  <link rel="stylesheet" href="/styles.css?v=0.16.33">
 </head>
 
 <!-- ================================================================
@@ -434,6 +434,6 @@
   <div id="toast" class="toast" role="status"></div>
   <div id="update-banner" class="update-banner hidden" role="status"><span>A new version of Site Gateway is available.</span><div class="update-banner-actions"><button id="update-banner-refresh" class="button primary">Refresh</button><button id="update-banner-dismiss" class="text-button">Dismiss</button></div></div>
   <!-- App scripts: core (app.js) then extended views/admin (features.js) -->
-  <script src="/app.js?v=0.16.30" defer></script><script src="/features.js?v=0.16.30" defer></script><script src="/select-enhance.js?v=0.16.30" defer></script>
+  <script src="/app.js?v=0.16.33" defer></script><script src="/features.js?v=0.16.33" defer></script><script src="/select-enhance.js?v=0.16.33" defer></script>
 </body>
 </html>

src/server.js

@@ -189,17 +189,37 @@ sampleNetworkInterfaces();
 // container-scoped (cgroup v2 + this container's network namespace); disk reuses the same
 // statfs-on-the-data-volume approach as /api/system/storage.
 async function systemHealthSnapshot() {
-  const [cpu, memory, swap, disk] = await Promise.all([
+  const assignedLimitGb = numberEnv("DATA_DIR_LIMIT_GB", null);
+  const assignedLimitBytes = assignedLimitGb && assignedLimitGb > 0 ? assignedLimitGb * 1024 ** 3 : null;
+  const [cpu, memory, swap, disk, appUsedBytes] = await Promise.all([
     cgroupCpuPercent(),
     cgroupMemory(),
     cgroupSwap(),
     fsp.statfs(dataDir).catch(() => null),
+    // Only walk /data (the same directorySize() the storage breakdown below already uses) when
+    // an assigned limit is actually configured -- it's the one case that needs it, and the walk
+    // isn't free, so skip it when the panel is just going to show whole-volume stats anyway.
+    assignedLimitBytes !== null ? directorySize(dataDir) : Promise.resolve(null),
   ]);
   return {
     cpu,
     memory,
     swap,
-    disk: disk ? { totalBytes: disk.blocks * disk.bsize, freeBytes: disk.bfree * disk.bsize, availableBytes: disk.bavail * disk.bsize, usedBytes: disk.blocks * disk.bsize - disk.bfree * disk.bsize, percent: ((disk.blocks - disk.bfree) / disk.blocks) * 100 } : null,
+    disk: disk ? (() => {
+      const totalBytes = disk.blocks * disk.bsize, freeBytes = disk.bfree * disk.bsize, availableBytes = disk.bavail * disk.bsize, volumeUsedBytes = totalBytes - freeBytes;
+      // DATA_DIR_LIMIT_GB lets an operator tell the hero panel what's actually assigned to this
+      // deployment (e.g. a dedicated share/zvol sized smaller than the whole host volume), since
+      // Docker has no real per-container disk-space quota to read the way it does for CPU/memory.
+      // Purely a display denominator -- it doesn't enforce anything -- so usage over 100% is a
+      // real, meaningful warning rather than a bug: it means actual usage has exceeded what was assigned.
+      // Critically, comparing against an assigned allowance has to use Site Gateway's own actual
+      // footprint (appUsedBytes, a real walk of /data), not the whole filesystem's used space --
+      // statfs reports usage for the entire volume behind /data, which on a shared array or pool
+      // includes everything else living on that mount, not just what this app has written.
+      const usedBytes = assignedLimitBytes !== null ? appUsedBytes : volumeUsedBytes;
+      const denominatorBytes = assignedLimitBytes || totalBytes;
+      return { totalBytes, freeBytes, availableBytes, usedBytes, assignedLimitBytes, percent: (usedBytes / denominatorBytes) * 100 };
+    })() : null,
     network: networkRate,
     throughput: { liveRequests: storage.performanceLiveCount(60) },
   };