Add pop-out button to open a section in its own tab (ticket 036)

Each of the four primary sections (Log viewer, Params, Metrics,
Dashboards) gets a PopOutButton next to its CollapseToggle/HelpIcon that
opens `?section=<id>` in a new tab via window.open. App.tsx branches on
that query param to render just the one section full-page, with no
NavMenu/FilterBar/sibling chrome — Metrics/Dashboards get the range that
was active at pop-out time via startMs/endMs query params (they have no
LogTimeline of their own to pick one), Params gets a small self-contained
params fetch since it has no LogPreview sibling to share state with, and
the popped-out Log viewer owns its own copy of the log/timeline polling
state.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XFUNZwCvz3kcod3352ZR2o
This commit is contained in:
Hugh Kaznowski
2026-09-05 16:49:12 +01:00
co-authored by Claude Sonnet 5
parent 7db1e0f055
commit 0c4b596e3c
6 changed files with 206 additions and 48 deletions
+3 -1
View File
@@ -14,7 +14,7 @@ import {
type Panel,
type PromqlSeries,
} from '../lib/api'
import { CollapseToggle, useSectionCollapsed } from './CollapsibleSection'
import { CollapseToggle, PopOutButton, useSectionCollapsed } from './CollapsibleSection'
import { HelpIcon } from './HelpIcon'
const CHART_TYPES: ChartType[] = ['line', 'bar', 'pie']
@@ -234,6 +234,7 @@ export function Dashboards({ range }: { range: TimeRange | null }) {
<div className="flex items-center gap-1.5 border-b border-border p-3 text-xs text-text-faint">
<HelpIcon sectionId="dashboards" label="Help: Dashboards" />
<CollapseToggle collapsed={collapsed} onToggle={() => setCollapsed(!collapsed)} />
<PopOutButton section="dashboards" range={range} />
Dashboards — activate a profile (see the settings menu) to create and save dashboards.
</div>
)
@@ -244,6 +245,7 @@ export function Dashboards({ range }: { range: TimeRange | null }) {
<div className="mb-2 flex items-center gap-1.5 text-xs text-text-subtle">
<HelpIcon sectionId="dashboards" label="Help: Dashboards" />
<CollapseToggle collapsed={collapsed} onToggle={() => setCollapsed(!collapsed)} />
<PopOutButton section="dashboards" range={range} />
Dashboards — profile "{activeProfile}"
</div>
{error && !collapsed && (