aboutsummaryrefslogtreecommitdiff
path: root/src/zenserver/frontend/html/pages/start.js
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/pages/start.js
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/pages/start.js')
-rw-r--r--src/zenserver/frontend/html/pages/start.js81
1 files changed, 24 insertions, 57 deletions
diff --git a/src/zenserver/frontend/html/pages/start.js b/src/zenserver/frontend/html/pages/start.js
index 580045060..df70ea2f4 100644
--- a/src/zenserver/frontend/html/pages/start.js
+++ b/src/zenserver/frontend/html/pages/start.js
@@ -17,6 +17,29 @@ export class Page extends ZenPage
const api_data = await new Fetcher().resource("/api/").json();
const available = new Set((api_data.services || []).map(s => s.base_uri));
+ // stats tiles
+ const safe_lookup = (obj, path, pretty=undefined) => {
+ const ret = path.split(".").reduce((a,b) => a && a[b], obj);
+ if (ret === undefined) return undefined;
+ return pretty ? pretty(ret) : ret;
+ };
+
+ var section = this.add_section("Activity");
+ section.tag().classify("dropall").text("metrics dashboard →").on_click(() => {
+ window.location = "?page=metrics";
+ });
+
+ var providers_data = await new Fetcher().resource("stats").json();
+ var provider_list = providers_data["providers"] || [];
+ var all_stats = {};
+ await Promise.all(provider_list.map(async (provider) => {
+ all_stats[provider] = await new Fetcher().resource("stats", provider).json();
+ }));
+
+ this._stats_grid = section.tag().classify("grid").classify("stats-tiles");
+ this._safe_lookup = safe_lookup;
+ this._render_stats(all_stats);
+
// project list
var project_table = null;
if (available.has("/prj/"))
@@ -102,29 +125,6 @@ export class Page extends ZenPage
}
}
- // stats tiles
- const safe_lookup = (obj, path, pretty=undefined) => {
- const ret = path.split(".").reduce((a,b) => a && a[b], obj);
- if (ret === undefined) return undefined;
- return pretty ? pretty(ret) : ret;
- };
-
- var section = this.add_section("Stats");
- section.tag().classify("dropall").text("metrics dashboard →").on_click(() => {
- window.location = "?page=metrics";
- });
-
- var providers_data = await new Fetcher().resource("stats").json();
- var provider_list = providers_data["providers"] || [];
- var all_stats = {};
- await Promise.all(provider_list.map(async (provider) => {
- all_stats[provider] = await new Fetcher().resource("stats", provider).json();
- }));
-
- this._stats_grid = section.tag().classify("grid").classify("stats-tiles");
- this._safe_lookup = safe_lookup;
- this._render_stats(all_stats);
-
// version
var ver_tag = this.tag().id("version");
var version = new Fetcher().resource("health", "version");
@@ -135,40 +135,7 @@ export class Page extends ZenPage
this._cache_table = cache_table;
// WebSocket for live stats updates
- this._connect_stats_ws();
- }
-
- _connect_stats_ws()
- {
- try
- {
- const proto = location.protocol === "https:" ? "wss:" : "ws:";
- const ws = new WebSocket(`${proto}//${location.host}/stats`);
-
- try { this._ws_paused = localStorage.getItem("zen-ws-paused") === "true"; } catch (e) { this._ws_paused = false; }
- document.addEventListener("zen-ws-toggle", (e) => {
- this._ws_paused = e.detail.paused;
- });
-
- ws.onmessage = (ev) => {
- if (this._ws_paused)
- {
- return;
- }
- try
- {
- const all_stats = JSON.parse(ev.data);
- this._render_stats(all_stats);
- }
- catch (e) { /* ignore parse errors */ }
- };
-
- ws.onclose = () => { this._stats_ws = null; };
- ws.onerror = () => { ws.close(); };
-
- this._stats_ws = ws;
- }
- catch (e) { /* WebSocket not available */ }
+ this.connect_stats_ws((all_stats) => this._render_stats(all_stats));
}
_render_stats(all_stats)