43 lines
1.9 KiB
Markdown
43 lines
1.9 KiB
Markdown
# 036 — Open a section in its own tab
|
|
|
|
## Summary
|
|
|
|
`App.tsx` has no routing at all — `NavMenu`, `FilterBar`, `LogTimeline` +
|
|
`LogPreview`, Params ([034](034-params-declaration-ui.md)), `Metrics`, and
|
|
`Dashboards` all render together in one fixed layout
|
|
(`webapp/src/App.tsx:94-108`). Add a small icon next to each section's
|
|
collapse toggle ([035](035-collapsible-sections.md)) that opens *just that
|
|
section* in a new browser tab — no `NavMenu`, no other sections — for
|
|
pop-out/multi-monitor use.
|
|
|
|
## Scope
|
|
|
|
- A "pop out" icon button in each of the four section headers (Log viewer,
|
|
Params, Metrics, Dashboards), alongside the collapse toggle and "?" help
|
|
icon.
|
|
- Clicking it opens a new tab (`window.open`, not same-tab navigation) at a
|
|
URL identifying that section, e.g. `?section=metrics`.
|
|
- Minimal client-side routing in `App.tsx`/`main.tsx`: when a `section`
|
|
query param is present, render only that one section full-page — no
|
|
`NavMenu`, no `FilterBar` unless the Log viewer section needs it, no
|
|
sibling sections.
|
|
- The standalone view keeps the section's own functionality intact (e.g. the
|
|
popped-out Metrics tab can still declare metrics; popped-out Dashboards
|
|
can still edit/autosave panels) — it's a layout change, not a read-only
|
|
view.
|
|
- The popped-out tab reflects the current `range` state (time range) at the
|
|
moment it's opened, passed via query params, since it has no `LogTimeline`
|
|
of its own to select one (unless the Log viewer section itself is what's
|
|
popped out).
|
|
|
|
## Acceptance criteria
|
|
|
|
- Clicking a section's pop-out icon opens a new tab showing only that
|
|
section, with no nav bar and no other sections.
|
|
- The popped-out section is fully functional (not a static snapshot).
|
|
- Closing the popped-out tab has no effect on the original tab's state.
|
|
|
|
## Depends on
|
|
|
|
- [035 — Collapsible primary UI sections](035-collapsible-sections.md)
|