- F3: give the <mark> search highlight the full theme-token tier set
(light / th-dark / th-highcontrast, with a legible text colour) so it reads
correctly in every theme now that the viewer is theme-aware.
- F6: restore the transient 'Copied' acknowledgement on the Copy button via
useCopy's copiedSuccessfully (Check icon + 'Copied' label).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Per maintainer feedback ('сделай поддержку светлой/темной темы', 'цвета фона
карточки подтяни к стандартным', and the white gap below):
- Drop the hardcoded dark palette; style the card/header/toolbar with the
project's standard theme tokens (Card/Card.Header token set) + th-dark: /
th-highcontrast: variants, so it adapts to light/dark/high-contrast like every
other Portainer view. Reuse project Button/Input/Checkbox/Icon components; the
log body uses the themed .log_viewer class; the range picker inherits themed
form-control styling.
- Fill the available page height (root flex column, calc(100vh - nav/header),
log body flex:1 min-h:0 overflow-y) so there's no dead white space below.
Layout (single toolbar row, three toggles, gutter), real data, and props are
unchanged.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- F1: cover the hook's riskiest path — a following stream that ends with an
unwritten tail fragment then resumes (tail:0 + nano-since), asserting the
fragment is dropped, resume params are correct, and the boundary line is
deduped to one; plus MAX_LOG_LINES head-trim and buffer reset on
resourceId/lineCount change.
- F2: clear the error banner on a SUCCESSFUL reconnect (via a new onOpen signal
on StreamLogsFn), not only when new lines arrive — an idle-but-healthy
reconnect no longer leaves a stuck 'unable to stream' banner.
- F4: update the stale comment in the React logs view registration (the React
logs migration is now complete).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Reproduce the maintainer-provided ContainerLogs mockup faithfully: dark card
(#0c0c0d), his header + single toolbar row styling, his custom search box /
'Filter search results' checkbox / Copy+Download buttons, his toggle-button
style (Line numbers / Timestamp / Wrap — no Auto refresh), and the dark log
area with a right-aligned line-number gutter. Palette carried inline in this one
component (deliberate dark log-viewer design).
Deviations from the mockup, by design: fonts/sizes use the project scale and
monospace (no Google Fonts / hardcoded Inter/JetBrains); real streaming data via
useLogViewer rendered as safe React span nodes (no dangerouslySetInnerHTML);
mock page chrome dropped (Portainer's page provides breadcrumb/title); the
datetime range keeps the functional react-datetimerange-picker. Live-tails by
default; selecting an upper bound in the range picker shows a bounded snapshot.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Close the visual gaps vs the maintainer's reference viewer:
- Replace the two separate From/To DateTimeField controls with a single combined
datetime range picker (@wojtekmaj/react-datetimerange-picker, sibling of the
react-datetime-picker / react-daterange-picker already used), from-to with time
in one control — mirrors the existing DateRangePicker wrapper.
- Add icons to the Line numbers (List), Timestamp (Clock) and Wrap lines
(WrapText) toggles (Auto refresh already had one).
- Line numbers gutter on by default.
Adds one dependency (@wojtekmaj/react-datetimerange-picker); all its transitive
deps were already present via the sibling pickers.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Replace the legacy AngularJS <log-viewer> on the container logs page with a
modern React log viewer, reusing the existing streaming (#6) and formatting/
coloring pipeline. Features: line-number gutter, zerolog level + key=value
coloring (from the existing formatter spans), from/to datetime range, Lines
limit, Line numbers / Timestamp / Wrap lines toggles, Auto refresh (live tail
on/off), Search + 'Filter search results', Copy, Download logs, and fullscreen.
The viewer is source-agnostic (StreamLogsFn), so service/task logs can adopt it
later; this PR wires container logs only. containerLogsController.js no longer
opens its own live stream (React owns fetching now), preventing a double stream.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
