Problem
The two log views in the web admin render the log console at a fixed height (520px on the per-module Logs tab, 600px on the All Logs page), which is too small to follow a lively log stream — especially during an observing run or a long update, where you want the tail visible while you keep an eye on everything else. There is currently no way to enlarge a log, so users resort to browser zoom / DevTools to make the console bigger.
Affected views
Both log views render essentially the same console (<pre id="log-output">, dark "console" styling, toolbar with filter / min-level / time range / refresh / acknowledge / auto-refresh / unacknowledged-only):
- All Logs page —
templates/modules/all_logs.html (<pre id="log-output">, fixed height: 600px)
- Per-module Logs tab —
templates/modules/detail.html, #tab-logs (<pre id="log-output">, fixed height: 520px)
The log JS in the two templates is intentionally duplicated "in lockstep" (see the comment at the top of the notifications block in detail.html), so whatever is added here must be kept in sync in both files.
No fullscreen code exists anywhere in the repo yet (no requestFullscreen / fullscreen CSS anywhere).
Desired behavior
Add a fullscreen toggle button to the log toolbar of both views that expands the log console to fill the whole viewport, with the toolbar and all its controls still visible and functional (filter, level, time range, refresh, acknowledge, auto-refresh, unacknowledged-only, click/Shift+click to set time range, scroll-to-top to load older logs).
Details
- Button: bootstrap-icons
bi-arrows-fullscreen in the toolbar; while active, switch to bi-fullscreen-exit. Tooltip like "Expand log to fullscreen" / "Exit fullscreen". On the per-module tab it sits in the #tab-logs toolbar; on All Logs in the toolbar under the module checkboxes.
- Layout while expanded: the
<pre> should grow to fill all available space instead of its fixed height — make the toolbar + console a flex column and let #log-output take flex-grow / full height. The fixed inline height: 520/600px should only apply in the normal (collapsed) state; on exit the original size must be restored so the page doesn't stay "stretched" (and ideally the scroll position is preserved).
- Page chrome while expanded: the sidebar, page header, and (on mobile) the top navbar should not take up space. Two options, see "Implementation approach".
- Everything keeps working while expanded: auto-refresh polling (
logTimer, 3s) must keep running, the ack "NEW" badge logic, older-log loading on scroll-to-top, and the time-range click/Shift+click interactions. Fullscreen must not break the scroll-position-preserving re-render in renderLogs().
- Exit: via the button and via
Esc (native fullscreen). Handle the browser fullscreenchange / fullscreenerror events so the button icon stays in sync even when the user exits with Esc, and so an error (e.g. gesture requirement) doesn't leave the UI stuck.
Implementation approach (pick one or combine)
Option A — native Fullscreen API (Element.requestFullscreen() on the log container):
- True viewport takeover, standard
Esc handling, matches the issue wording "expand to fill the whole viewport".
- Caveats: requires a user gesture; iOS Safari does not support
requestFullscreen() on arbitrary elements (only <video>), so this alone leaves iPhone/iPad users out.
Option B — in-page expanded overlay (no Fullscreen API): toggle a class that makes the log container position: fixed; inset: 0; z-index: … with its own background, hiding/covering the sidebar and navbar.
- Works on every browser including iOS Safari, and gives full control over exactly what's shown (e.g. keep or hide the module checkboxes / unreachable-host alerts on All Logs).
- Slightly more CSS work (theme-aware background, backdrop, z-index above the sidebar/overlay which use z-index 1044–1045, mobile navbar z-index 1043).
A pragmatic combination: try native fullscreen first, fall back to the overlay when requestFullscreen is unavailable or fails (iOS / fullscreenerror). Recommend Option B as the baseline since it works everywhere and keeps the implementation simple to test.
Acceptance criteria
Out of scope / optional
- The transient operation-log panel on the Packages page (
#update-panel-log in templates/modules/packages.html) is a different kind of "log" (short-lived update output) — not required here, but could be a follow-up if it's cheap.
- Optional nicety, if wanted: keyboard shortcut (e.g.
f) to toggle fullscreen on log pages only.
Related
Problem
The two log views in the web admin render the log console at a fixed height (
520pxon the per-module Logs tab,600pxon the All Logs page), which is too small to follow a lively log stream — especially during an observing run or a long update, where you want the tail visible while you keep an eye on everything else. There is currently no way to enlarge a log, so users resort to browser zoom / DevTools to make the console bigger.Affected views
Both log views render essentially the same console (
<pre id="log-output">, dark "console" styling, toolbar with filter / min-level / time range / refresh / acknowledge / auto-refresh / unacknowledged-only):templates/modules/all_logs.html(<pre id="log-output">, fixedheight: 600px)templates/modules/detail.html,#tab-logs(<pre id="log-output">, fixedheight: 520px)The log JS in the two templates is intentionally duplicated "in lockstep" (see the comment at the top of the notifications block in
detail.html), so whatever is added here must be kept in sync in both files.No fullscreen code exists anywhere in the repo yet (no
requestFullscreen/ fullscreen CSS anywhere).Desired behavior
Add a fullscreen toggle button to the log toolbar of both views that expands the log console to fill the whole viewport, with the toolbar and all its controls still visible and functional (filter, level, time range, refresh, acknowledge, auto-refresh, unacknowledged-only, click/Shift+click to set time range, scroll-to-top to load older logs).
Details
bi-arrows-fullscreenin the toolbar; while active, switch tobi-fullscreen-exit. Tooltip like "Expand log to fullscreen" / "Exit fullscreen". On the per-module tab it sits in the#tab-logstoolbar; on All Logs in the toolbar under the module checkboxes.<pre>should grow to fill all available space instead of its fixed height — make the toolbar + console a flex column and let#log-outputtakeflex-grow/ full height. The fixed inlineheight: 520/600pxshould only apply in the normal (collapsed) state; on exit the original size must be restored so the page doesn't stay "stretched" (and ideally the scroll position is preserved).logTimer, 3s) must keep running, the ack "NEW" badge logic, older-log loading on scroll-to-top, and the time-range click/Shift+click interactions. Fullscreen must not break the scroll-position-preserving re-render inrenderLogs().Esc(native fullscreen). Handle the browserfullscreenchange/fullscreenerrorevents so the button icon stays in sync even when the user exits with Esc, and so an error (e.g. gesture requirement) doesn't leave the UI stuck.Implementation approach (pick one or combine)
Option A — native Fullscreen API (
Element.requestFullscreen()on the log container):Eschandling, matches the issue wording "expand to fill the whole viewport".requestFullscreen()on arbitrary elements (only<video>), so this alone leaves iPhone/iPad users out.Option B — in-page expanded overlay (no Fullscreen API): toggle a class that makes the log container
position: fixed; inset: 0; z-index: …with its own background, hiding/covering the sidebar and navbar.A pragmatic combination: try native fullscreen first, fall back to the overlay when
requestFullscreenis unavailable or fails (iOS /fullscreenerror). Recommend Option B as the baseline since it works everywhere and keeps the implementation simple to test.Acceptance criteria
Esc; icon state stays in sync; no stuck states onfullscreenerror.Out of scope / optional
#update-panel-logintemplates/modules/packages.html) is a different kind of "log" (short-lived update output) — not required here, but could be a follow-up if it's cheap.f) to toggle fullscreen on log pages only.Related