aboutsummaryrefslogtreecommitdiff
path: root/src/zenserver/frontend/html/util
diff options
context:
space:
mode:
authorStefan Boberg <[email protected]>2026-03-23 14:19:57 +0100
committerGitHub Enterprise <[email protected]>2026-03-23 14:19:57 +0100
commit2a445406e09328cb4cf320300f2678997d6775b7 (patch)
treea92f02d94c92144cb6ae32160397298533e4c822 /src/zenserver/frontend/html/util
parentadd hub instance crash recovery (#885) (diff)
downloadzen-2a445406e09328cb4cf320300f2678997d6775b7.tar.xz
zen-2a445406e09328cb4cf320300f2678997d6775b7.zip
Dashboard refresh (logs, storage, network, object store, docs) (#835)
## Summary This PR adds a session management service, several new dashboard pages, and a number of infrastructure improvements. ### Sessions Service - `SessionsServiceClient` in `zenutil` announces sessions to a remote zenserver with a 15s heartbeat (POST/PUT/DELETE lifecycle) - Storage server registers itself with its own local sessions service on startup - Session mode attribute coupled to server mode (Compute, Proxy, Hub, etc.) - Ended sessions tracked with `ended_at` timestamp; status filtering (Active/Ended/All) - `--sessions-url` config option for remote session announcement - In-process log sink (`InProcSessionLogSink`) forwards server log output to the server's own session, visible in the dashboard ### Session Log Viewer - POST/GET endpoints for session logs (`/sessions/{id}/log`) supporting raw text and structured JSON/CbObject with batch `entries` array - In-memory log storage per session (capped at 10k entries) with cursor-based pagination for efficient incremental fetching - Log panel in the sessions dashboard with incremental DOM updates, auto-scroll (Follow toggle), newest-first toggle, text filter, and log-level coloring - Auto-selects the server's own session on page load ### TCP Log Streaming - `LogStreamListener` and `TcpLogStreamSink` for log delivery over TCP - Sequence numbers on each message with drop detection and synthetic "dropped" notice on gaps - Gathered buffer writes to reduce syscall overhead when flushing batches - Tests covering basic delivery, multi-line splitting, drop detection, and sequencing ### New Dashboard Pages - **Sessions**: master-detail layout with selectable rows, metadata panel, live WebSocket updates, paging, abbreviated date formatting, and "this" pill for the local session - **Object Store**: summary stats tiles and bucket table with click-to-expand inline object listing (`GET /obj/`) - **Storage**: per-volume disk usage breakdown (`GET /admin/storage`), Garbage Collection status section (next-run countdown, last-run stats), and GC History table with paginated rows and expandable detail panels - **Network**: overview tiles, per-service request table, proxy connections, and live WebSocket updates; distinct client IPs and session counts via HyperLogLog ### Documentation Page - In-dashboard Docs page with sidebar navigation, markdown rendering (via `marked`), Mermaid diagram support (theme-aware), collapsible sections, text filtering with highlighting, and cross-document linking - New user-facing docs: `overview.md` (with architecture and per-mode diagrams), `sessions.md`, `cache.md`, `projects.md`; updated `compute.md` - Dev docs moved to `docs/dev/` ### Infrastructure & Bug Fixes - **Deflate compression** for the embedded frontend zip (~3.4MB → ~950KB); zlib inflate support added to `ZipFs` with cached decompressed buffers - **Local IP addresses**: `GetLocalIpAddresses()` (Windows via `GetAdaptersAddresses`, Linux/Mac via `getifaddrs`); surfaced in `/status/status`, `/health/info`, and the dashboard banner - **Dashboard nav**: unified into `zen-nav` web component with `MutationObserver` for dynamically added links, CSS `::part()` to merge banner/nav border radii, and prefix-based active link detection - Stats broadcast refactored from manual JSON string concatenation to `CbObjectWriter`; `CbObject`-to-JS conversion improved for `TimeSpan`, `DateTime`, and large integers - Stats WebSocket boilerplate consolidated into `ZenPage.connect_stats_ws()`
Diffstat (limited to 'src/zenserver/frontend/html/util')
-rw-r--r--src/zenserver/frontend/html/util/compactbinary.js41
-rw-r--r--src/zenserver/frontend/html/util/friendly.js53
-rw-r--r--src/zenserver/frontend/html/util/widgets.js18
3 files changed, 104 insertions, 8 deletions
diff --git a/src/zenserver/frontend/html/util/compactbinary.js b/src/zenserver/frontend/html/util/compactbinary.js
index 415fa4be8..270c96a2f 100644
--- a/src/zenserver/frontend/html/util/compactbinary.js
+++ b/src/zenserver/frontend/html/util/compactbinary.js
@@ -369,6 +369,14 @@ CbObjectView.prototype[Symbol.iterator] = function()
////////////////////////////////////////////////////////////////////////////////
CbObjectView.prototype.to_js_object = function()
{
+ const TicksPerMs = 10000;
+ const UnixEpochTicks = 621355968000000000n; // .NET ticks at 1970-01-01
+
+ const readTicks = function(data) {
+ const dv = new DataView(data.buffer, data.byteOffset, 8);
+ return dv.getBigInt64(0, false);
+ };
+
const impl = function(node)
{
if (node.is_object())
@@ -388,9 +396,40 @@ CbObjectView.prototype.to_js_object = function()
}
if (node.is_string()) return node.as_value();
- if (node.is_integer()) return node.as_value();
if (node.is_float()) return node.as_value();
+ if (node.is_integer())
+ {
+ const v = node.as_value();
+ if (v >= -9007199254740991n && v <= 9007199254740991n)
+ return Number(v);
+ return v;
+ }
+
+ const type = CbFieldTypeOps.get_type(node.get_type());
+
+ if (type == CbFieldType.DateTime)
+ {
+ const ticks = readTicks(node.as_value());
+ const unixMs = Number((ticks - UnixEpochTicks) / BigInt(TicksPerMs));
+ return new Date(unixMs).toISOString();
+ }
+
+ if (type == CbFieldType.TimeSpan)
+ {
+ const ticks = readTicks(node.as_value());
+ const absTicks = ticks < 0n ? -ticks : ticks;
+ const totalMs = Number(absTicks / BigInt(TicksPerMs));
+ const ms = totalMs % 1000;
+ const totalSec = Math.floor(totalMs / 1000);
+ const sec = totalSec % 60;
+ const totalMin = Math.floor(totalSec / 60);
+ const min = totalMin % 60;
+ const hours = Math.floor(totalMin / 60);
+ const sign = ticks < 0n ? "-" : "";
+ return `${sign}${hours}:${String(min).padStart(2, "0")}:${String(sec).padStart(2, "0")}.${String(ms).padStart(3, "0")}0000`;
+ }
+
var ret = node.as_value();
if (ret instanceof Uint8Array)
{
diff --git a/src/zenserver/frontend/html/util/friendly.js b/src/zenserver/frontend/html/util/friendly.js
index 5d4586165..f400bbce0 100644
--- a/src/zenserver/frontend/html/util/friendly.js
+++ b/src/zenserver/frontend/html/util/friendly.js
@@ -30,6 +30,59 @@ export class Friendly
return Friendly.sep(v * 1000000000, 0) + " ns";
}
+ /** Format a .NET-style TimeSpan string (e.g. "0:05:23.4560000") as a human-readable duration. */
+ static timespan(value)
+ {
+ if (typeof value === "number")
+ {
+ return Friendly._formatDurationMs(value);
+ }
+
+ const str = String(value);
+ const match = str.match(/^[+-]?(?:(\d+)\.)?(\d+):(\d+):(\d+)(?:\.(\d+))?$/);
+ if (!match)
+ {
+ return str;
+ }
+
+ const days = parseInt(match[1] || "0", 10);
+ const hours = parseInt(match[2], 10);
+ const minutes = parseInt(match[3], 10);
+ const seconds = parseInt(match[4], 10);
+ const frac = match[5] ? parseInt(match[5].substring(0, 3).padEnd(3, "0"), 10) : 0;
+ const totalMs = ((days * 86400 + hours * 3600 + minutes * 60 + seconds) * 1000) + frac;
+
+ return Friendly._formatDurationMs(totalMs);
+ }
+
+ static _formatDurationMs(ms)
+ {
+ const seconds = Math.floor(ms / 1000);
+ const minutes = Math.floor(seconds / 60);
+ const hours = Math.floor(minutes / 60);
+ const days = Math.floor(hours / 24);
+
+ if (days > 0) return `${days}d ${hours % 24}h ${minutes % 60}m`;
+ if (hours > 0) return `${hours}h ${minutes % 60}m`;
+ if (minutes > 0) return `${minutes}m ${seconds % 60}s`;
+ if (seconds > 0) return `${seconds}.${String(ms % 1000).padStart(3, "0")}s`;
+ return `${ms}ms`;
+ }
+
+ /** Format an ISO / .NET datetime string as a friendly local date+time. */
+ static datetime(value)
+ {
+ const d = new Date(value);
+ if (isNaN(d.getTime()))
+ {
+ return String(value);
+ }
+ return d.toLocaleString(undefined, {
+ year: "numeric", month: "short", day: "numeric",
+ hour: "2-digit", minute: "2-digit", second: "2-digit",
+ });
+ }
+
static bytes(x)
{
const v = BigInt(Math.trunc(Number(x)));
diff --git a/src/zenserver/frontend/html/util/widgets.js b/src/zenserver/frontend/html/util/widgets.js
index 2964f92f2..17bd2fde7 100644
--- a/src/zenserver/frontend/html/util/widgets.js
+++ b/src/zenserver/frontend/html/util/widgets.js
@@ -243,7 +243,7 @@ export class Table extends Widget
var row = this._add_row(args);
this._rows.push(row);
- if ((this._flags & Table.Flag_AlignNumeric) && this._rows.length === 1)
+ if (this._flags & Table.Flag_AlignNumeric)
{
this._align_header();
}
@@ -253,19 +253,23 @@ export class Table extends Widget
_align_header()
{
- const first_row = this._rows[0];
- if (!first_row)
+ if (this._rows.length === 0)
{
return;
}
const header_elem = this._element.firstElementChild;
const header_cells = header_elem.children;
- const data_cells = first_row.inner().children;
- for (let i = 0; i < data_cells.length && i < header_cells.length; i++)
+
+ // A column is numeric if any data row has right-aligned content in it.
+ for (const row of this._rows)
{
- if (data_cells[i].style.textAlign === "right")
+ const data_cells = row.inner().children;
+ for (let i = 0; i < data_cells.length && i < header_cells.length; i++)
{
- header_cells[i].style.textAlign = "right";
+ if (data_cells[i].style.textAlign === "right")
+ {
+ header_cells[i].style.textAlign = "right";
+ }
}
}
}