Skip to content

Add fullscreen button for logs #74

Description

@thusser

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):

  1. All Logs pagetemplates/modules/all_logs.html (<pre id="log-output">, fixed height: 600px)
  2. Per-module Logs tabtemplates/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

  • Fullscreen toggle button on both the All Logs page and the per-module Logs tab.
  • Expanded log fills the whole viewport (no sidebar/navbar space eaten).
  • Toolbar and all existing controls remain usable while expanded.
  • Auto-refresh, NEW/ack badge, older-log loading on scroll-to-top, and click/Shift+click time-range still work while expanded.
  • Exit via button and via Esc; icon state stays in sync; no stuck states on fullscreenerror.
  • Collapsed state looks/behaves exactly as before (fixed heights restored after exit).
  • Works in current Chrome, Firefox, and Safari (desktop); graceful behavior on iOS Safari (either the overlay fallback or a clearly scoped limitation).
  • Both templates updated in lockstep (same behavior, same helper code).

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

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions