diff options
Diffstat (limited to 'src/zenserver/frontend/html/pages')
| -rw-r--r-- | src/zenserver/frontend/html/pages/platform_icons.js | 61 | ||||
| -rw-r--r-- | src/zenserver/frontend/html/pages/sessions.js | 1015 |
2 files changed, 895 insertions, 181 deletions
diff --git a/src/zenserver/frontend/html/pages/platform_icons.js b/src/zenserver/frontend/html/pages/platform_icons.js new file mode 100644 index 000000000..65a04c840 --- /dev/null +++ b/src/zenserver/frontend/html/pages/platform_icons.js @@ -0,0 +1,61 @@ +// Copyright Epic Games, Inc. All Rights Reserved. + +// SimpleIcons-style platform glyphs (viewBox 0 0 24 24, fill: currentColor) +// used by the sessions table to render a recognizable icon instead of a raw +// platform label. Lives in its own module because the data table is bulky and +// other pages may want to reuse the resolver. + +"use strict"; + +// Path data is intentionally one-line per entry to keep the icon table dense. +// Unknown platforms fall through to a text cell at the call site. +export const PLATFORM_ICONS = { + windows: { label: "Windows", path: "M0 3.449L9.75 2.1v9.451H0m10.949-9.602L24 0v11.4H10.949M0 12.6h9.75v9.451L0 20.699M10.949 12.6H24V24l-13.051-1.351" }, + macos: { label: "macOS", path: "M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z" }, + ios: { label: "iOS", path: "M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z" }, + linux: { label: "Linux", path: "M12.504 0c-.155 0-.315.008-.48.021-4.226.333-3.105 4.807-3.17 6.298-.076 1.092-.3 1.953-1.05 3.02-.885 1.051-2.127 2.75-2.716 4.521-.278.832-.41 1.684-.287 2.489a.424.424 0 00-.11.135c-.26.268-.45.6-.663.839-.2.271-.53.4-.953.58-.42.17-.94.33-1.31.84-.5.84-.33 1.83.03 2.72.39.89.95 1.64.89 2.13-.06.72.21 1.24.59 1.48.38.24.83.24 1.17.24.34 0 .57-.01.67-.06.19-.1.38-.25.55-.26.22-.02.43.11.72.26.67.35 1.3.43 1.88.3.57-.13 1.08-.44 1.52-.78.9-.74 1.7-1.5 2.6-1.63.24-.03.5-.05.78-.05.13 0 .25 0 .39.02.11.01.26.1.5.26.25.17.6.4 1 .59.4.17.87.32 1.4.3.59-.02 1.18-.22 1.73-.63 1.57-1.19 4.21-.97 5.13-2.08.11-.14.18-.3.2-.48.02-.18 0-.36-.07-.54-.06-.19-.17-.38-.32-.57-.15-.19-.35-.38-.56-.55-.38-.31-.58-.67-.57-1.11.01-.28.14-.58.28-.85.11-.28.24-.54.24-.81-.02-.28-.13-.55-.36-.77-.23-.23-.55-.42-1.01-.51a.424.424 0 00-.14-.02c-.3-.04-.57-.04-.87-.04-.13-.31-.28-.62-.43-.91-.9-1.72-2.23-3.13-3.27-4.31-.92-1.02-1.55-2-1.62-3.07-.12-.9-.07-1.94-.1-2.93-.02-.92-.15-1.81-.67-2.5-.49-.7-1.32-1.22-2.73-1.22z" }, + wine: { label: "Wine", path: "M8 2h8l-1 7a4 4 0 01-3 4v5h3v2H9v-2h3v-5a4 4 0 01-3-4L8 2z" }, + android: { label: "Android", path: "M17.523 15.3414c-.5511 0-.9993-.4486-.9993-.9997s.4482-.9993.9993-.9993c.5511 0 .9993.4482.9993.9993.0001.5511-.4482.9997-.9993.9997m-11.046 0c-.5511 0-.9993-.4486-.9993-.9997s.4482-.9993.9993-.9993c.5511 0 .9993.4482.9993.9993 0 .5511-.4482.9997-.9993.9997m11.4045-6.02l1.9973-3.4592a.416.416 0 00-.1521-.5676.416.416 0 00-.5677.1521l-2.0223 3.503C15.5902 8.2439 13.8533 7.8508 12 7.8508s-3.5902.3931-5.1367 1.0989L4.841 5.4467a.4161.4161 0 00-.5677-.1521.4157.4157 0 00-.1521.5676l1.9973 3.4592C2.6889 11.1867.3432 14.6589 0 18.761h24c-.3432-4.1021-2.6889-7.5743-6.1185-9.4396" }, + playstation: { label: "PlayStation", path: "M8.985 2.596v17.548l3.915 1.261V6.688c0-.69.304-1.151.794-.991.636.181.76.814.76 1.505v5.875c2.441 1.193 4.362 0 4.362-3.118 0-3.198-1.13-4.63-4.442-5.76-1.313-.444-3.697-1.203-5.389-1.603zM0 17.81c.069.24.213.489.487.728C4.024 21.22 9.45 22.395 15.03 22.395c.58 0 1.142-.034 1.725-.08-5.423-1.39-9.33-3.77-15.203-4.87a5.78 5.78 0 01-1.55-.364v.728zm18.7-8.97c.057-.035.114-.057.194-.08.695-.148 1.15.217 1.15.908 0 .706-.478 1.283-1.162 1.486-.08.023-.137.034-.194.057v4.74c.079-.023.148-.034.228-.057 3.426-1.193 4.374-2.796 4.374-5.502 0-2.637-1.37-4.063-3.357-4.748-.387-.137-.764-.228-1.162-.32l-.068-.023v3.54l-.003-.001z" }, + xbox: { label: "Xbox", path: "M4.102 21.033C6.211 22.881 8.977 24 12 24c3.026 0 5.789-1.119 7.902-2.965 1.16-1.016-4.553-6.929-7.902-9.518-3.349 2.589-9.063 8.499-7.898 9.516zm11.08-18.52c2.699-1.159 5.062-1.169 6.52-.546l.025.033c-1.377-2.152-3.624-4.001-7.004-3.978-2.049 0-4.062.826-5.725 2.208 1.964.468 4.114 1.404 6.184 2.283zM2.27 1.976l.025-.033c1.458-.623 3.82-.613 6.519.546 2.07-.879 4.22-1.815 6.184-2.283C13.335.824 11.32-.002 9.272 0 5.891-.02 3.646 1.828 2.27 1.976zM1.62 19.46l-.012.003C.597 17.8 0 15.838 0 13.749c0-1.749.425-3.399 1.157-4.85.9-1.784 4.126-5.59 5.73-7.37.118-.131-4.425 1.976-5.267 9.931-.025.221-.025.442-.025.663 0 2.586.741 5 2.025 7.017zm20.763 0l-.011-.003c1.283-2.017 2.025-4.431 2.025-7.017 0-.22 0-.442-.025-.663-.842-7.955-5.386-10.062-5.267-9.93 1.604 1.779 4.83 5.585 5.73 7.37.732 1.45 1.157 3.1 1.157 4.849 0 2.09-.596 4.051-1.609 5.714l.013.003-.014-.324z" }, + nintendo: { label: "Nintendo", path: "M14.176 24h3.674c3.376 0 6.15-2.774 6.15-6.15V6.15C24 2.775 21.226 0 17.85 0H14.16c-.205 0-.38.174-.38.38v23.24c0 .206.19.38.396.38zM8.252 24c.212 0 .39-.174.39-.384V.374c0-.21-.178-.374-.39-.374h-2.1A6.167 6.167 0 0 0 0 6.15v11.7C0 21.224 2.775 24 6.152 24h2.1zm-4.59-15.763a2.578 2.578 0 0 1 2.58-2.58 2.577 2.577 0 0 1 2.578 2.58 2.579 2.579 0 1 1-5.157 0zm12.556 11.928a3.063 3.063 0 0 1 3.067-3.065 3.063 3.063 0 0 1 3.065 3.065 3.067 3.067 0 0 1-3.065 3.07 3.065 3.065 0 0 1-3.067-3.07z" }, +}; + +// Resolve a platform string (as reported by the client) to an icon entry. +// Intentionally liberal so UE-style variants like "Win64", "PS5", "XSX", +// "NintendoSwitch" all land on the right icon. +export function resolve_platform_icon(platform) +{ + const p = platform.toLowerCase(); + if (p.includes("windows") || p === "win32" || p === "win64" || p === "win") return PLATFORM_ICONS.windows; + if (p === "wine") return PLATFORM_ICONS.wine; + if (p.includes("android")) return PLATFORM_ICONS.android; + if (p === "ios" || p === "iphone" || p === "ipad" || p === "ipados" || p === "tvos") return PLATFORM_ICONS.ios; + if (p === "mac" || p === "macos" || p === "osx" || p === "darwin") return PLATFORM_ICONS.macos; + if (p === "linux") return PLATFORM_ICONS.linux; + if (p.includes("playstation") || /^ps\d/.test(p) || p === "psvita") return PLATFORM_ICONS.playstation; + if (p.includes("xbox") || p === "xsx" || p === "xss") return PLATFORM_ICONS.xbox; + if (p.includes("nintendo") || p === "switch") return PLATFORM_ICONS.nintendo; + return null; +} + +// Build a <span> element representing the platform — either an inline SVG +// glyph (when the platform resolves) or a plain text fallback. +export function make_platform_cell(platform) +{ + const el = document.createElement("span"); + if (!platform) { return el; } + const icon = resolve_platform_icon(platform); + if (!icon) + { + // Unknown platform — fall back to the raw label. + el.textContent = platform; + return el; + } + el.className = "platform-icon"; + el.title = icon.label; + el.setAttribute("aria-label", icon.label); + // Paths are hard-coded (no user-controlled input), so innerHTML is safe. + el.innerHTML = `<svg viewBox="0 0 24 24" role="img" focusable="false"><path d="${icon.path}"/></svg>`; + return el; +} diff --git a/src/zenserver/frontend/html/pages/sessions.js b/src/zenserver/frontend/html/pages/sessions.js index c74ede14e..70b850698 100644 --- a/src/zenserver/frontend/html/pages/sessions.js +++ b/src/zenserver/frontend/html/pages/sessions.js @@ -4,7 +4,69 @@ import { ZenPage } from "./page.js" import { Fetcher } from "../util/fetcher.js" +import { CbObject } from "../util/compactbinary.js" import { Table, PropTable } from "../util/widgets.js" +import { make_platform_cell } from "./platform_icons.js" + +// Run @p fn and swallow any thrown error, but log it at debug level under +// @p label so the failure isn't completely invisible. Use this in places +// where the failure mode is genuinely "drop the frame and move on" — JSON / +// CB parse failures, optional WebSocket setup, transient send errors. The +// debug-level log keeps normal consoles clean; surface them by enabling +// "Verbose" in DevTools. +function quietly(label, fn) +{ + try { return fn(); } + catch (e) + { + console.debug(`[sessions] ${label}:`, e); + return undefined; + } +} + +// Dev tools read better with 24h + zero-padded fields; don't defer to the +// browser's default locale which is 12h AM/PM for en-US. +const TIME_OPTS = { hour12: false, hour: "2-digit", minute: "2-digit", second: "2-digit" }; +const DATE_OPTS = { year: "numeric", month: "2-digit", day: "2-digit", ...TIME_OPTS }; + +// UE log levels in ascending order of severity. Each incoming entry's +// level string (lowercased) maps to a numeric rank we can compare against +// the user-selected threshold when filtering. Both the short ("warn") and +// long ("warning") spellings are covered because zencore emits the long +// form but older clients / tests may use the short one. +const LEVEL_RANK = { + trace: 0, + debug: 1, + info: 2, + warning: 3, warn: 3, + error: 4, err: 4, + critical: 5, +}; + +// Cap on the in-DOM log line count. The server's deque is bounded +// (MaxLogEntries on the C++ side) but the WS push delivers every new +// entry forever during a long Cook, so the browser DOM would grow +// without bound. At 5000 lines the panel still feels live for tail- +// following while keeping the page responsive. Older entries fall off +// the far end on every append. +const MAX_LOG_LINES_IN_DOM = 5000; + +// Level-filter dropdown options. `rank` is the minimum rank that survives +// — entries with a lower rank are hidden. -1 disables level filtering. +const LEVEL_FILTER_OPTIONS = [ + { value: "all", label: "All levels", rank: -1 }, + { value: "debug", label: "Debug+", rank: 1 }, + { value: "info", label: "Info+", rank: 2 }, + { value: "warn", label: "Warn+", rank: 3 }, + { value: "error", label: "Error+", rank: 4 }, +]; + +// Double-chevron icons for the expand / collapse panel toggle. Up when +// collapsed (click to grow the log panel upward into the table's space); +// down when expanded (click to shrink back down). currentColor so the +// surrounding button styles control tinting. +const ICON_CHEVRON_UP = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 17 12 11 18 17"/><polyline points="6 11 12 5 18 11"/></svg>'; +const ICON_CHEVRON_DOWN = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 7 12 13 18 7"/><polyline points="6 13 12 19 18 13"/></svg>'; function fmt_date(iso) { @@ -13,15 +75,15 @@ function fmt_date(iso) const now = new Date(); if (d.getFullYear() === now.getFullYear() && d.getMonth() === now.getMonth() && d.getDate() === now.getDate()) { - return d.toLocaleTimeString(); + return d.toLocaleTimeString([], TIME_OPTS); } - return d.toLocaleString(); + return d.toLocaleString([], DATE_OPTS); } function fmt_time(iso) { if (!iso) { return ""; } - return new Date(iso).toLocaleTimeString(); + return new Date(iso).toLocaleTimeString([], TIME_OPTS); } //////////////////////////////////////////////////////////////////////////////// @@ -33,32 +95,43 @@ export class Page extends ZenPage { this.set_title("sessions"); - this._status = this.get_param("status", "active"); + this._status = this.get_param("status", "all"); const section = this.add_section("Sessions"); - section._parent.inner().classList.add("sessions-section"); - - this._init_status_tabs(section, this._status); + const section_dom = section._parent.inner(); + section_dom.classList.add("sessions-section"); + // The "Sessions" nav item in the banner already identifies the page; + // drop the auto-generated section heading so it doesn't duplicate. + const heading = section_dom.querySelector(":scope > h1, :scope > h2"); + if (heading) { heading.remove(); } const query = (this._status === "ended" || this._status === "all") ? "?status=" + this._status : ""; const data = await new Fetcher().resource("/sessions/" + query).json(); const sessions = data.sessions || []; this._self_id = data.self_id || null; - // Layout: table on the left, detail panel on the right - this._container = section.tag().classify("sessions-layout"); - this._table_host = this._container.tag().classify("sessions-table"); - this._detail_panel = this._container.tag().classify("sessions-detail"); - this._detail_panel.tag().classify("sessions-detail-placeholder").text("Select a session to view details."); + // Flat vertical layout: header row, then table, then the bottom panel + // (tabs for log and metadata). All session-level info that used to + // live in a side panel is now shown inline in the table columns. + this._init_status_tabs(section, this._status); + this._table_host = section.tag().classify("sessions-table"); this._selected_id = this._self_id; this._selected_row = null; - this._page_size = 25; + this._page_size = 10; this._page = 0; - - // Log panel below the table/detail layout - this._log_panel = section.tag().classify("sessions-log-panel"); - this._log_panel.inner().style.display = "none"; - this._log_poll_timer = null; + this._text_filter = ""; + this._sort_key = "created_at"; + this._sort_asc = false; + + this._panel = section.tag().classify("sessions-log-panel"); + this._panel.inner().style.display = "none"; + this._active_tab = "log"; + this._log_expanded = false; + // Persist the level threshold across session selections so users + // don't have to re-pick after clicking a different session. + this._log_min_level = -1; + this._log_min_level_name = "all"; + this._collapsed_session_groups = new Set(); this._render_sessions(sessions); this._connect_ws(); @@ -68,8 +141,16 @@ export class Page extends ZenPage { const status = this._status; - // Clear existing table content + // Clear existing table content (and any prior pager contents; the + // pager lives in the header row but its state depends on what we're + // about to render). this._table_host.inner().replaceChildren(); + if (this._pager_host) + { + this._pager_host.replaceChildren(); + } + + this._last_sessions = sessions; if (sessions.length === 0) { @@ -79,74 +160,247 @@ export class Page extends ZenPage return; } - let columns; + // Apply the text filter (case-insensitive substring match across the + // session fields a user is likely to scan for: id, appname, mode). + const filter = this._text_filter; + let filtered = filter + ? sessions.filter(s => { + const haystack = [s.id, s.appname, s.mode].filter(v => v).join(" ").toLowerCase(); + return haystack.includes(filter); + }) + : sessions; + + if (filtered.length === 0) + { + this._table_host.tag().classify("empty-state").text("No sessions match the filter."); + this._selected_row = null; + return; + } + + // When the log panel is expanded, collapse the row set to just the + // selected session so the log gets the maximum vertical real estate. + // The expand toggle lives in the panel header — see _show_session_panel. + if (this._log_expanded && this._selected_id) + { + const selected = sessions.find(s => s.id === this._selected_id); + if (selected) { filtered = [selected]; } + } + + // Column specs carry both the header label and how to extract the + // real sort value so date columns compare chronologically rather + // than by locale-formatted text. + const str_val = (field) => (s) => (s[field] || "").toLowerCase(); + const date_val = (field) => (s) => s[field] ? new Date(s[field]).getTime() : 0; + + const common = [ + { name: "appname", key: "appname", kind: "str", get: str_val("appname") }, + { name: "mode", key: "mode", kind: "str", get: str_val("mode") }, + { name: "platform", key: "platform", kind: "str", get: str_val("platform") }, + { name: "id", key: "id", kind: "str", get: str_val("id") }, + { name: "created", key: "created_at", kind: "date", get: date_val("created_at") }, + ]; + let last_col; if (status === "all") { - columns = ["id", "appname", "mode", "created", "last activity"]; + last_col = { name: "last activity", key: "last_activity", kind: "date", + get: s => new Date(s.ended_at || s.updated_at || 0).getTime() }; } else if (status === "ended") { - columns = ["id", "appname", "mode", "created", "ended"]; + last_col = { name: "ended", key: "ended_at", kind: "date", get: date_val("ended_at") }; } else { - columns = ["id", "appname", "mode", "created", "updated"]; + last_col = { name: "updated", key: "updated_at", kind: "date", get: date_val("updated_at") }; } - this._last_sessions = sessions; - const total = sessions.length; + const col_specs = [...common, last_col]; + + // Pick the active sort column (fall back to created_at if the current + // sort key isn't in this tab's column set — e.g. switching from "all" + // back to "ended" after sorting by last_activity). + const sort_col = col_specs.find(c => c.key === this._sort_key) || col_specs.find(c => c.key === "created_at"); + const dir = this._sort_asc ? 1 : -1; + const compare_sessions = (a, b) => { + const av = sort_col.get(a), bv = sort_col.get(b); + if (av < bv) return -1 * dir; + if (av > bv) return 1 * dir; + return 0; + }; + const grouped = this._build_session_groups(filtered); + grouped.parents.sort(compare_sessions); + for (const parent of grouped.parents) + { + grouped.children.get(parent.id)?.sort(compare_sessions); + } + + const total = grouped.parents.length; const page_count = this._page_size > 0 ? Math.ceil(total / this._page_size) : 1; if (this._page >= page_count) { this._page = Math.max(0, page_count - 1); } const start = this._page_size > 0 ? this._page * this._page_size : 0; - const visible = this._page_size > 0 ? sessions.slice(start, start + this._page_size) : sessions; + const visible = this._page_size > 0 ? grouped.parents.slice(start, start + this._page_size) : grouped.parents; - const table = new Table(this._table_host, columns, Table.Flag_FitLeft); + const column_names = col_specs.map(c => c.name); + const table = new Table(this._table_host, column_names, Table.Flag_FitLeft, -1); + + // Attach header click handlers + active-column indicator. + const zen_table = this._table_host.inner().querySelector(".zen_table"); + const header_elem = zen_table ? zen_table.firstElementChild : null; + if (header_elem) + { + const header_cells = header_elem.children; + for (let i = 0; i < col_specs.length; i++) + { + const col = col_specs[i]; + const cell = header_cells[i]; + if (!cell) { continue; } + cell.style.cursor = "pointer"; + cell.style.userSelect = "none"; + if (col.key === sort_col.key) + { + cell.textContent = col.name + (this._sort_asc ? " \u25B2" : " \u25BC"); + cell.classList.add("sessions-sort-active"); + } + cell.addEventListener("click", () => { + if (this._sort_key === col.key) + { + this._sort_asc = !this._sort_asc; + } + else + { + this._sort_key = col.key; + // New column defaults: dates start descending (newest + // first — the natural reading for timestamps); string + // columns start ascending (A→Z). + this._sort_asc = col.kind !== "date"; + } + this._page = 0; + this._render_sessions(this._last_sessions); + }); + } + } let new_selected_row = null; let new_selected_session = null; - for (const session of visible) - { + const render_session_row = (session, is_child = false, child_count = 0) => { const created = fmt_date(session.created_at); const updated = fmt_date(session.updated_at); const ended = fmt_date(session.ended_at); const mode = session.mode || "-"; + const appname = session.appname || "-"; + const platform = session.platform || ""; + const full_id = session.id || ""; + // Elide the middle of the 24-char OID so the column stays narrow; + // the full id is still available as a tooltip on the cell below. + const id_display = full_id.length > 12 + ? full_id.slice(0, 8) + "\u2026" + full_id.slice(-4) + : (full_id || "-"); + let row_values; if (status === "all") { const last_activity = session.ended_at ? ended : updated; - row_values = [session.id || "-", session.appname || "-", mode, created, last_activity]; + row_values = [appname, mode, platform, id_display, created, last_activity]; } else if (status === "ended") { - row_values = [session.id || "-", session.appname || "-", mode, created, ended]; + row_values = [appname, mode, platform, id_display, created, ended]; } else { - row_values = [session.id || "-", session.appname || "-", mode, created, updated]; + row_values = [appname, mode, platform, id_display, created, updated]; } const row = table.add_row(...row_values); + // Swap the platform cell's text for a recognizable icon. Sort + // already runs on session.platform so the cell content doesn't + // affect ordering. + const platform_cell = row.get_cell(2).inner(); + platform_cell.replaceChildren(make_platform_cell(platform)); + + if (full_id) + { + row.get_cell(3).inner().title = full_id; + } + + // Indicator layout in the appname cell: [group toggle] [child elbow] + // [dot] appname [this] [log]. The pills sit after the name so their + // widths don't push names around and misalign the column across rows. + const appname_cell = row.get_cell(0); + if (child_count > 0) + { + const collapsed = this._collapsed_session_groups.has(session.id); + const toggle = document.createElement("button"); + toggle.type = "button"; + toggle.className = "sessions-group-toggle"; + toggle.textContent = collapsed ? "\u25B8" : "\u25BE"; + toggle.title = collapsed ? "Expand child sessions" : "Collapse child sessions"; + toggle.addEventListener("click", (ev) => { + ev.stopPropagation(); + if (collapsed) + { + this._collapsed_session_groups.delete(session.id); + } + else + { + this._collapsed_session_groups.add(session.id); + } + this._render_sessions(this._last_sessions); + }); + appname_cell.inner().prepend(toggle); + } + else if (is_child) + { + const spacer = document.createElement("span"); + spacer.className = "sessions-group-child-spacer"; + spacer.textContent = "\u2514"; + appname_cell.inner().prepend(spacer); + } + else + { + const spacer = document.createElement("span"); + spacer.className = "sessions-group-toggle-spacer"; + appname_cell.inner().prepend(spacer); + } + if (status === "all" && !session.ended_at) { - const id_cell = row.get_cell(0); const dot = document.createElement("span"); dot.className = "health-dot health-green"; dot.style.marginRight = "6px"; dot.style.width = "8px"; dot.style.height = "8px"; dot.title = "active"; - id_cell.inner().prepend(dot); + appname_cell.inner().insertBefore(dot, appname_cell.inner().firstChild.nextSibling); } if (this._self_id && session.id === this._self_id) { const pill = document.createElement("span"); - pill.className = "sessions-self-pill"; + pill.className = "sessions-pill sessions-self-pill"; pill.textContent = "this"; - row.get_cell(1).inner().prepend(pill); + appname_cell.inner().appendChild(pill); + } + + if (session.log_count) + { + const log_pill = document.createElement("span"); + log_pill.className = "sessions-pill sessions-log-indicator-pill"; + log_pill.textContent = "log"; + log_pill.title = session.log_count + " log entr" + (session.log_count === 1 ? "y" : "ies"); + appname_cell.inner().appendChild(log_pill); + } + + const row_elem = row.inner(); + if (is_child) + { + for (const cell of row_elem.children) + { + cell.classList.add("sessions-child-row"); + } } // Restore selection @@ -157,12 +411,28 @@ export class Page extends ZenPage } // Table rows use display:contents so we attach click to each cell - const row_elem = row.inner(); for (const cell of row_elem.children) { cell.style.cursor = "pointer"; cell.addEventListener("click", () => this._select_session(row, session)); } + }; + + const render_session_tree = (session, is_child = false) => { + const children = grouped.children.get(session.id) || []; + render_session_row(session, is_child, children.length); + if (!this._collapsed_session_groups.has(session.id)) + { + for (const child of children) + { + render_session_tree(child, true); + } + } + }; + + for (const session of visible) + { + render_session_tree(session); } this._selected_row = null; @@ -171,40 +441,106 @@ export class Page extends ZenPage this._select_session(new_selected_row, new_selected_session); } - if (this._page_size > 0 && total > this._page_size) + this._render_pager(total, page_count); + } + + _build_session_groups(sessions) + { + const by_id = new Map(); + for (const session of sessions) { - const footer = document.createElement("div"); - footer.className = "sessions-pager"; + if (session.id) + { + by_id.set(session.id, session); + } + } - const make_btn = (label, enabled, on_click) => { - const btn = document.createElement("button"); - btn.className = "history-tab"; - btn.textContent = label; - btn.disabled = !enabled; - if (enabled) + const parents = []; + const children = new Map(); + for (const session of sessions) + { + const parent_id = session.parent_session_id; + if (parent_id && by_id.has(parent_id) && parent_id !== session.id) + { + let group = children.get(parent_id); + if (!group) { - btn.addEventListener("click", on_click); + group = []; + children.set(parent_id, group); } - return btn; - }; + group.push(session); + } + else + { + parents.push(session); + } + } - footer.appendChild(make_btn("\u25C0", this._page > 0, () => { - this._page--; - this._render_sessions(sessions); - })); + // Keep the currently selected child visible when live updates rebuild the + // table by automatically expanding the group that contains it. + if (this._selected_id) + { + for (const [parent_id, group] of children) + { + if (group.some(s => s.id === this._selected_id)) + { + this._collapsed_session_groups.delete(parent_id); + break; + } + } + } - const label = document.createElement("span"); - label.className = "sessions-pager-label"; - label.textContent = `${this._page + 1} / ${page_count}`; - footer.appendChild(label); + return { parents, children }; + } - footer.appendChild(make_btn("\u25B6", this._page < page_count - 1, () => { - this._page++; - this._render_sessions(sessions); - })); + // Shared button.history-tab builder used for both the pager arrows and + // the status-mode tab strip. opts: { active?, disabled?, on_click? }. + _make_history_tab(label, opts) + { + const btn = document.createElement("button"); + btn.className = "history-tab"; + btn.textContent = label; + if (opts.active) { btn.classList.add("active"); } + if (opts.disabled) { btn.disabled = true; } + if (opts.on_click && !opts.disabled) + { + btn.addEventListener("click", opts.on_click); + } + return btn; + } - this._table_host.inner().appendChild(footer); + _render_pager(total, page_count) + { + if (!this._pager_host) + { + return; + } + this._pager_host.replaceChildren(); + if (!(this._page_size > 0 && total > this._page_size)) + { + return; } + + this._pager_host.appendChild(this._make_history_tab("\u25C0", { + disabled: this._page === 0, + on_click: () => { + this._page--; + this._render_sessions(this._last_sessions); + }, + })); + + const label = document.createElement("span"); + label.className = "sessions-pager-label"; + label.textContent = `${this._page + 1} / ${page_count}`; + this._pager_host.appendChild(label); + + this._pager_host.appendChild(this._make_history_tab("\u25B6", { + disabled: this._page >= page_count - 1, + on_click: () => { + this._page++; + this._render_sessions(this._last_sessions); + }, + })); } _filter_sessions(all_sessions) @@ -222,11 +558,15 @@ export class Page extends ZenPage _connect_ws() { - try - { + quietly("ws connect", () => { const proto = location.protocol === "https:" ? "wss:" : "ws:"; const ws = new WebSocket(`${proto}//${location.host}/sessions/ws`); - try { this._ws_paused = localStorage.getItem("zen-ws-paused") === "true"; } catch (e) { this._ws_paused = false; } + // Log-push frames arrive as compact-binary over binary frames; + // asking for ArrayBuffer (default in modern browsers, explicit + // here) lets us feed the bytes straight into our CB parser. + ws.binaryType = "arraybuffer"; + this._ws_paused = quietly("ws-paused storage read", () => + localStorage.getItem("zen-ws-paused") === "true") === true; document.addEventListener("zen-ws-toggle", (e) => { this._ws_paused = e.detail.paused; }); @@ -236,52 +576,189 @@ export class Page extends ZenPage { return; } - try + // Two transports share this socket: + // - text/JSON: the session-list snapshots broadcast on a + // timer (untyped for backward compat). + // - binary/CB: event-driven log deltas, stamped with + // type="log" so future frame types can be added. + if (typeof ev.data === "string") { - const data = JSON.parse(ev.data); - if (data.self_id) { this._self_id = data.self_id; } - const all_sessions = data.sessions || []; - const filtered = this._filter_sessions(all_sessions); - this._render_sessions(filtered); + quietly("ws json frame", () => { + const data = JSON.parse(ev.data); + if (data.self_id) { this._self_id = data.self_id; } + const all_sessions = data.sessions || []; + const filtered = this._filter_sessions(all_sessions); + this._render_sessions(filtered); + }); + } + else if (ev.data instanceof ArrayBuffer) + { + quietly("ws cb frame", () => { + const bytes = new Uint8Array(ev.data); + // CbObject extends CbFieldView, not CbObjectView — + // to_js_object() lives on CbObjectView.prototype. + // Bridge via as_object() which wraps the field as + // a view of the same underlying bytes. + const frame = new CbObject(bytes).as_object().to_js_object(); + this._handle_ws_frame(frame); + }); } - catch (e) { /* ignore parse errors */ } }; + ws.onopen = () => { + // Resubscribe after a (re)connect if a session is already + // selected, so live tailing resumes without a reselect. + this._resubscribe_log(); + }; ws.onclose = () => { this._ws = null; }; ws.onerror = () => { ws.close(); }; this._ws = ws; + }); + } + + _handle_ws_frame(frame) + { + if (frame && frame.type === "log") + { + // Guard against stale deltas that arrive after the user has + // switched sessions — the server does its best but there's + // always a window. + if (frame.session !== this._log_session_id) + { + return; + } + if (typeof frame.cursor === "number" && frame.cursor < this._log_cursor) + { + // Cursor regressed (session reset while we were subscribed). + this._resync_log_from_zero(); + return; + } + this._log_cursor = frame.cursor || this._log_cursor; + if (Array.isArray(frame.entries) && frame.entries.length > 0) + { + this._append_log_entries(frame.entries); + } } - catch (e) { /* WebSocket not available */ } + } + + // Wipe the panel and re-replay the log from cursor 0, then re- + // subscribe so the WS feeds deltas from the fresh tail. Used both + // when the WS frame reports a cursor regression (session reset + // while we were subscribed) and when an HTTP refetch sees the same. + // Returns the underlying fetch promise so callers can await if they + // need ordering guarantees. + _resync_log_from_zero() + { + this._log_cursor = 0; + if (this._log_body) { this._log_body.replaceChildren(); } + return this._fetch_log().then(() => this._subscribe_log()); + } + + _ws_send(obj) + { + const ws = this._ws; + if (!ws || ws.readyState !== WebSocket.OPEN) { return false; } + return quietly("ws send", () => { ws.send(JSON.stringify(obj)); return true; }) === true; + } + + _subscribe_log() + { + if (!this._log_session_id) { return; } + // Don't subscribe until the initial replay has resolved — the + // cursor is stale 0 until then and the server would flush the + // entire history we're about to fetch via HTTP, duplicating + // every line in the DOM. + if (!this._log_fetch_done) { return; } + this._ws_send({ type: "sub_log", session: this._log_session_id, cursor: this._log_cursor | 0 }); + } + + _unsubscribe_log() + { + this._ws_send({ type: "unsub_log" }); + } + + // Called on ws.onopen to restore the subscription after a reconnect. + _resubscribe_log() + { + this._subscribe_log(); } _init_status_tabs(host, active_status) { + const row = document.createElement("div"); + row.className = "sessions-header-row"; + host.tag().inner().appendChild(row); + const tabs_el = document.createElement("div"); tabs_el.className = "history-tabs"; - tabs_el.style.marginBottom = "8px"; - tabs_el.style.width = "fit-content"; - host.tag().inner().appendChild(tabs_el); + row.appendChild(tabs_el); const make_tab = (label, mode) => { - const btn = document.createElement("button"); - btn.className = "history-tab"; - btn.textContent = label; - if (mode === active_status) - { - btn.classList.add("active"); - } - btn.addEventListener("click", () => { - if (mode === active_status) { return; } - this.set_param("status", mode); - this.reload(); - }); - tabs_el.appendChild(btn); + tabs_el.appendChild(this._make_history_tab(label, { + active: mode === active_status, + on_click: mode === active_status ? null : () => { + this.set_param("status", mode); + this.reload(); + }, + })); }; make_tab("Active", "active"); make_tab("Ended", "ended"); make_tab("All", "all"); + + const filter_input = document.createElement("input"); + filter_input.type = "search"; + filter_input.className = "sessions-list-filter"; + filter_input.placeholder = "Filter\u2026"; + filter_input.autocomplete = "off"; + filter_input.spellcheck = false; + filter_input.addEventListener("input", () => { + this._text_filter = filter_input.value.toLowerCase().trim(); + this._page = 0; + if (this._last_sessions) + { + this._render_sessions(this._last_sessions); + } + }); + row.appendChild(filter_input); + + // Right-aligned pager host; populated per-render in _render_sessions + // so the arrows don't live inside the table (where they'd shift + // vertically as the table grows/shrinks between pages). + const spacer = document.createElement("span"); + spacer.style.flex = "1"; + row.appendChild(spacer); + + this._pager_host = document.createElement("div"); + this._pager_host.className = "sessions-header-pager"; + row.appendChild(this._pager_host); + } + + _session_detail_metadata(session) + { + const details = { + status: session.ended_at ? "ended" : "active", + session_id: session.id || "-", + parent_session_id: session.parent_session_id || "-", + appname: session.appname || "-", + mode: session.mode || "-", + platform: session.platform || "-", + pid: session.pid || "-", + jobid: session.jobid || "-", + created_at: session.created_at ? fmt_date(session.created_at) : "-", + updated_at: session.updated_at ? fmt_date(session.updated_at) : "-", + }; + if (session.ended_at) + { + details.ended_at = fmt_date(session.ended_at); + } + if (session.log_count) + { + details.log_count = session.log_count; + } + return details; } _select_session(row, session) @@ -304,72 +781,89 @@ export class Page extends ZenPage cell.classList.add("sessions-selected"); } - // Only rebuild the detail panel and log when the session changes - if (!changed) - { - return; - } - - // Rebuild detail panel - const panel = this._detail_panel; - panel.inner().replaceChildren(); - - panel.tag("h3").text("Session Details"); - - const props = new PropTable(panel); - props.add_property("id", session.id || "-"); - props.add_property("appname", session.appname || "-"); - if (session.mode) + // Rebuild the bottom panel only when the selection actually changes. + if (changed) { - props.add_property("mode", session.mode); + this._show_session_panel(session); } - if (session.jobid) - { - props.add_property("jobid", session.jobid); - } - props.add_property("created", fmt_date(session.created_at)); - props.add_property("updated", fmt_date(session.updated_at)); - if (session.ended_at) - { - props.add_property("ended", fmt_date(session.ended_at)); - } - - if (session.metadata && Object.keys(session.metadata).length > 0) - { - panel.tag("h3").text("Metadata"); - const meta_props = new PropTable(panel); - meta_props.add_object(session.metadata); - } - - // Show log panel for this session - this._show_log(session.id); } - _show_log(session_id) + _show_session_panel(session) { - // Stop any existing poll - if (this._log_poll_timer) + // Unsubscribe from the previous session's log stream (if any) + // before we switch. The server treats a subsequent sub_log as a + // replacement, but an explicit unsub makes the intent clear and + // stops any in-flight pushes that could arrive as we're wiping + // the panel. + if (this._log_session_id && this._log_session_id !== session.id) { - clearInterval(this._log_poll_timer); - this._log_poll_timer = null; + this._unsubscribe_log(); } - this._log_session_id = session_id; + this._log_session_id = session.id; this._log_cursor = 0; // monotonic cursor for incremental fetching + this._log_fetch_done = false; // gates _subscribe_log until replay resolves this._log_follow = true; this._log_newest_first = true; + this._log_filter = ""; - this._log_panel.inner().style.display = ""; - this._log_panel.inner().replaceChildren(); + this._panel.inner().style.display = ""; + this._panel.inner().replaceChildren(); - // Header + // Header with tab strip, filter, and log-view controls const header = document.createElement("div"); header.className = "sessions-log-header"; - const title = document.createElement("span"); - title.className = "sessions-log-title"; - title.textContent = "Log"; - header.appendChild(title); + const tabs = document.createElement("div"); + tabs.className = "sessions-panel-tabs"; + header.appendChild(tabs); + + const log_tab = document.createElement("button"); + log_tab.type = "button"; + log_tab.className = "sessions-panel-tab"; + log_tab.textContent = "Log"; + tabs.appendChild(log_tab); + + const meta_tab = document.createElement("button"); + meta_tab.type = "button"; + meta_tab.className = "sessions-panel-tab"; + meta_tab.textContent = "Metadata"; + tabs.appendChild(meta_tab); + + // Spacer sits between the tab strip and the right-hand controls so + // the Expand button stays flush right on both tabs (log_controls is + // hidden on Metadata — if the spacer lived there too, the button + // would jump left). + const spacer = document.createElement("span"); + spacer.className = "sessions-log-spacer"; + header.appendChild(spacer); + + // Log-only controls: filter, newest-first, follow. Hidden when the + // Metadata tab is active since they don't apply there. + const log_controls = document.createElement("span"); + log_controls.className = "sessions-log-controls"; + header.appendChild(log_controls); + + // Level filter: hides entries below the selected severity. Sits + // before the text filter since level is a coarser cut than text. + const level_select = document.createElement("select"); + level_select.className = "sessions-log-level-filter"; + level_select.title = "Hide log entries below this severity level"; + for (const opt of LEVEL_FILTER_OPTIONS) + { + const o = document.createElement("option"); + o.value = opt.value; + o.textContent = opt.label; + level_select.appendChild(o); + } + level_select.value = this._log_min_level_name; + level_select.addEventListener("change", () => { + this._log_min_level_name = level_select.value; + const opt = LEVEL_FILTER_OPTIONS.find(o => o.value === level_select.value); + this._log_min_level = opt ? opt.rank : -1; + this._apply_log_filter(); + }); + log_controls.appendChild(level_select); const filter_input = document.createElement("input"); filter_input.type = "text"; @@ -379,12 +873,7 @@ export class Page extends ZenPage this._log_filter = filter_input.value.toLowerCase(); this._apply_log_filter(); }); - header.appendChild(filter_input); - this._log_filter = ""; - - const spacer = document.createElement("span"); - spacer.style.flex = "1"; - header.appendChild(spacer); + log_controls.appendChild(filter_input); const order_btn = document.createElement("button"); order_btn.className = "history-tab active"; @@ -394,7 +883,7 @@ export class Page extends ZenPage order_btn.classList.toggle("active", this._log_newest_first); this._reorder_log(); }); - header.appendChild(order_btn); + log_controls.appendChild(order_btn); const follow_btn = document.createElement("button"); follow_btn.className = "history-tab active"; @@ -407,30 +896,113 @@ export class Page extends ZenPage this._scroll_to_follow(); } }); - header.appendChild(follow_btn); + log_controls.appendChild(follow_btn); this._log_follow_btn = follow_btn; - this._log_panel.inner().appendChild(header); + // Expand / collapse toggle: applies to the whole page layout (table + // vs log panel balance) so it lives outside log_controls and stays + // visible on both tabs. Double-chevron direction mirrors the way + // the panel grows — up when there's room to expand, down when + // expanded and ready to collapse back. + const expand_btn = document.createElement("button"); + expand_btn.type = "button"; + expand_btn.className = "history-tab sessions-panel-toggle"; + const refresh_toggle = () => { + expand_btn.innerHTML = this._log_expanded ? ICON_CHEVRON_DOWN : ICON_CHEVRON_UP; + expand_btn.title = this._log_expanded + ? "Restore the sessions table" + : "Collapse the sessions table to focus on this session's log"; + expand_btn.setAttribute("aria-label", this._log_expanded ? "Collapse log panel" : "Expand log panel"); + expand_btn.classList.toggle("active", this._log_expanded); + }; + refresh_toggle(); + expand_btn.addEventListener("click", () => { + this._log_expanded = !this._log_expanded; + refresh_toggle(); + if (this._last_sessions) { this._render_sessions(this._last_sessions); } + }); + header.appendChild(expand_btn); + + this._panel.inner().appendChild(header); // Log body - const body = document.createElement("div"); - body.className = "sessions-log-body"; - body.addEventListener("scroll", () => { + const log_body = document.createElement("div"); + log_body.className = "sessions-log-body"; + log_body.addEventListener("scroll", () => { const at_follow_edge = this._log_newest_first - ? (body.scrollTop <= 4) - : (body.scrollTop + body.clientHeight >= body.scrollHeight - 4); + ? (log_body.scrollTop <= 4) + : (log_body.scrollTop + log_body.clientHeight >= log_body.scrollHeight - 4); if (this._log_follow !== at_follow_edge) { this._log_follow = at_follow_edge; this._log_follow_btn.classList.toggle("active", this._log_follow); } }); - this._log_panel.inner().appendChild(body); - this._log_body = body; + this._panel.inner().appendChild(log_body); + this._log_body = log_body; + + // Metadata/details body. Keep polling running regardless of which tab is + // visible so cursors stay fresh. Free-form metadata gets the primary + // left-hand panel; core session fields sit beside it on the right. + // Use .tag() so child panels are real Components — PropTable reaches into + // its parent's DOM element through the Component API. + const meta_body_widget = this._panel.tag().classify("sessions-metadata-body"); + const meta_body = meta_body_widget.inner(); + const meta_layout = meta_body_widget.tag().classify("sessions-metadata-layout"); + const metadata_panel = meta_layout.tag().classify("sessions-metadata-panel"); + const details_panel = meta_layout.tag().classify("sessions-metadata-panel").classify("sessions-metadata-core-panel"); + + const metadata_heading = document.createElement("div"); + metadata_heading.className = "sessions-metadata-heading"; + metadata_heading.textContent = "Metadata"; + metadata_panel.inner().appendChild(metadata_heading); + + const has_metadata = session.metadata && Object.keys(session.metadata).length > 0; + if (has_metadata) + { + const meta_props = new PropTable(metadata_panel); + meta_props.add_object(session.metadata); + } + else + { + const empty = document.createElement("div"); + empty.className = "sessions-log-empty"; + empty.textContent = "No metadata."; + metadata_panel.inner().appendChild(empty); + } - // Initial fetch + start polling - this._fetch_log(); - this._log_poll_timer = setInterval(() => this._fetch_log(), 2000); + const details_heading = document.createElement("div"); + details_heading.className = "sessions-metadata-heading"; + details_heading.textContent = "Session Information"; + details_panel.inner().appendChild(details_heading); + + const detail_props = new PropTable(details_panel); + detail_props.add_object(this._session_detail_metadata(session)); + + const set_active_tab = (tab) => { + this._active_tab = tab; + const is_log = tab === "log"; + log_tab.classList.toggle("active", is_log); + meta_tab.classList.toggle("active", !is_log); + log_body.style.display = is_log ? "" : "none"; + meta_body.style.display = is_log ? "none" : ""; + log_controls.style.display = is_log ? "" : "none"; + }; + log_tab.addEventListener("click", () => set_active_tab("log")); + meta_tab.addEventListener("click", () => set_active_tab("meta")); + set_active_tab(this._active_tab || "log"); + + // Initial HTTP fetch gives us the full history in one shot; after + // it returns we hand off to the WebSocket for live deltas. Mark + // the panel as "fetch done" so _resubscribe_log (fired from + // ws.onopen) can avoid racing a too-early subscribe with + // cursor=0 that'd cause a duplicate flush. No more setInterval + // — pushes arrive the moment an entry is appended. See + // _handle_ws_frame. + this._fetch_log().then(() => { + this._log_fetch_done = true; + this._subscribe_log(); + }); } async _fetch_log() @@ -453,10 +1025,10 @@ export class Page extends ZenPage if (cursor < this._log_cursor) { - // Cursor went backwards — session was reset. Full re-render. - this._log_cursor = 0; - this._log_body.replaceChildren(); - this._fetch_log(); + // Cursor went backwards — session was reset. Resync via + // the shared helper so the WS-frame and HTTP-fetch paths + // stay in lockstep. + await this._resync_log_from_zero(); return; } @@ -471,7 +1043,12 @@ export class Page extends ZenPage this._show_log_empty(); } } - catch (e) { /* ignore */ } + catch (e) + { + // quietly() can't wrap an awaited body, so the catch is open-coded + // here — same debug-log policy as the sync paths above. + console.debug("[sessions] fetch log:", e); + } } _show_log_empty() @@ -520,6 +1097,30 @@ export class Page extends ZenPage } } + // Cap DOM size. Drop the oldest lines from whichever end of the + // container holds them — that's the bottom in newest-first mode, + // the top in oldest-first mode. The user can no longer scroll + // further back than MAX_LOG_LINES_IN_DOM until they switch + // sessions and replay from cursor 0. + const overflow = body.children.length - MAX_LOG_LINES_IN_DOM; + if (overflow > 0) + { + if (this._log_newest_first) + { + for (let i = 0; i < overflow; i++) + { + body.removeChild(body.lastElementChild); + } + } + else + { + for (let i = 0; i < overflow; i++) + { + body.removeChild(body.firstElementChild); + } + } + } + if (this._log_follow) { this._scroll_to_follow(); @@ -572,12 +1173,56 @@ export class Page extends ZenPage if (entry.level) { + const key = entry.level.toLowerCase(); + const rank = LEVEL_RANK[key]; + // Stamp the rank so _line_passes_filters can check it later + // without re-parsing the text. Unknown levels leave it unset. + if (rank !== undefined) { line.dataset.levelRank = String(rank); } const lvl = document.createElement("span"); - lvl.className = "sessions-log-level sessions-log-level-" + entry.level.toLowerCase(); + lvl.className = "sessions-log-level sessions-log-level-" + key; lvl.textContent = entry.level; line.appendChild(lvl); } + // Always render the logger column (even if empty) so the message + // column stays aligned across rows whether or not a category is set. + const cat = document.createElement("span"); + cat.className = "sessions-log-logger"; + if (entry.logger) + { + cat.textContent = entry.logger; + cat.title = entry.logger; + } + line.appendChild(cat); + + // Marker for UE_LOGFMT structured entries. The server pre-renders + // `format` against `fields` into `message`, but both raw pieces ride + // along in the JSON so we can flag them visually and let a future UI + // hook in for field-level drill-down. Tooltip shows the raw template + // plus the arguments bag so you can see exactly what UE sent. + if (entry.format) + { + const fmt_marker = document.createElement("span"); + fmt_marker.className = "sessions-log-fmt-marker"; + fmt_marker.textContent = "{\u2026}"; + let tooltip = "format: " + entry.format; + if (entry.fields && Object.keys(entry.fields).length > 0) + { + try + { + tooltip += "\nfields: " + JSON.stringify(entry.fields, null, 2); + } + catch (_e) + { + // Shouldn't happen for server-produced JSON, but guard + // against self-referential structures just in case. + tooltip += "\nfields: <unserializable>"; + } + } + fmt_marker.title = tooltip; + line.appendChild(fmt_marker); + } + if (entry.message) { const msg = document.createElement("span"); @@ -586,20 +1231,36 @@ export class Page extends ZenPage line.appendChild(msg); } - if (entry.data && Object.keys(entry.data).length > 0) + if (!this._line_passes_filters(line)) { - const data_span = document.createElement("span"); - data_span.className = "sessions-log-data"; - data_span.textContent = JSON.stringify(entry.data); - line.appendChild(data_span); + line.style.display = "none"; } + return line; + } + + // Shared predicate for both the initial render (_create_log_line) and + // full sweeps (_apply_log_filter). Keeps the two paths in sync. + _line_passes_filters(line) + { + if (this._log_min_level >= 0) + { + const rank_str = line.dataset.levelRank; + // Entries without a known level rank pass through — they may + // carry info that shouldn't be silently dropped (e.g. the + // synthetic "session ended" line or legacy entries without a + // level field). + if (rank_str !== undefined && rank_str !== "") + { + const rank = Number(rank_str); + if (!Number.isNaN(rank) && rank < this._log_min_level) { return false; } + } + } if (this._log_filter && !line.textContent.toLowerCase().includes(this._log_filter)) { - line.style.display = "none"; + return false; } - - return line; + return true; } _apply_log_filter() @@ -608,17 +1269,9 @@ export class Page extends ZenPage { return; } - const filter = this._log_filter; for (const line of this._log_body.querySelectorAll(".sessions-log-line")) { - if (!filter || line.textContent.toLowerCase().includes(filter)) - { - line.style.display = ""; - } - else - { - line.style.display = "none"; - } + line.style.display = this._line_passes_filters(line) ? "" : "none"; } } } |