diff options
| author | Stefan Boberg <[email protected]> | 2026-03-23 14:19:57 +0100 |
|---|---|---|
| committer | GitHub Enterprise <[email protected]> | 2026-03-23 14:19:57 +0100 |
| commit | 2a445406e09328cb4cf320300f2678997d6775b7 (patch) | |
| tree | a92f02d94c92144cb6ae32160397298533e4c822 /src/zenserver/frontend/html/pages/start.js | |
| parent | add hub instance crash recovery (#885) (diff) | |
| download | zen-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.js | 81 |
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) |