phughk/ottyl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Carry over rolling preset id to popout tabs and add range controls to standalone Metrics/Dashboards

Browse Source 
Popped-out tabs now carry the active TimeRangePresetId (e.g. "5m") via a
`preset` query param instead of only resolved absolute startMs/endMs, so a
rolling preset keeps independently sliding in the new tab on its own polling
cadence rather than freezing to the source tab's window at open time. A
fixed/dragged range is still carried over as absolute bounds. StandaloneRanged
(metrics/dashboards standalone pages) now owns its own preset/range state and
renders LogTimeline for its own preset buttons and drag-to-select UI, instead
of only ever showing a frozen, uncontrollable range. log and params standalone
pages are unchanged.

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 19:34:20 +01:00
co-authored by Claude Sonnet 5
parent e6e5bc8f50
commit 7463050357
4 changed files with 135 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webapp/src/App.tsx
+110 -12
View File
@@ -1,7 +1,14 @@
import { useEffect, useRef, useState, type ReactNode } from 'react'
import { NavMenu } from './components/NavMenu'
import { FilterBar } from './components/FilterBar'
import { LogTimeline, computeBucketMs, computePresetRange, type TimeRange, type TimeRangePresetId } from './components/LogTimeline'
import {
LogTimeline,
TIME_RANGE_PRESETS,
computeBucketMs,
computePresetRange,
type TimeRange,
type TimeRangePresetId,
} from './components/LogTimeline'
import { LogPreview } from './components/LogPreview'
import { Params } from './components/Params'
import { Metrics } from './components/Metrics'
@@ -22,16 +29,18 @@ import { DocsNavProvider } from './lib/docsNav'
const POLL_MS = 2000
/// Reads the routing params `PopOutButton` writes: `section` picks which primary section to render full-page, and `startMs`/`endMs` carry over the range for sections with no `LogTimeline` of their own to pick one.
function parsePopOutQuery(): { section: PopOutSectionId | null; range: TimeRange | null } {
/// Reads the routing params `PopOutButton` writes: `section` picks which primary section to render full-page. `preset` carries over which rolling preset (e.g. `5m`) was active, so the popped-out tab can resolve and keep re-resolving its own independent window of the same size instead of freezing whatever absolute bounds happened to be active at click time. `startMs`/`endMs` carry over a fixed/dragged (non-preset) range as absolute bounds, same as before.
function parsePopOutQuery(): { section: PopOutSectionId | null; presetId: TimeRangePresetId | null; fixedRange: TimeRange | null } {
const query = new URLSearchParams(window.location.search)
const section = query.get('section') as PopOutSectionId | null
const presetParam = query.get('preset')
const presetId = TIME_RANGE_PRESETS.some((p) => p.id === presetParam) ? (presetParam as TimeRangePresetId) : null
const startMs = Number(query.get('startMs'))
const endMs = Number(query.get('endMs'))
const range = query.has('startMs') && query.has('endMs') && Number.isFinite(startMs) && Number.isFinite(endMs)
const fixedRange = query.has('startMs') && query.has('endMs') && Number.isFinite(startMs) && Number.isFinite(endMs)
? { startMs, endMs }
: null
return { section, range }
return { section, presetId, fixedRange }
}
function StandalonePage({ children }: { children: ReactNode }) {
@@ -65,9 +74,97 @@ function StandaloneParams() {
)
}
/// Metrics/Dashboards own their own data fetching — they only need the range carried over via query params.
function StandaloneRanged({ section, range }: { section: 'metrics' | 'dashboards'; range: TimeRange | null }) {
return <StandalonePage>{section === 'metrics' ? <Metrics range={range} /> : <Dashboards range={range} />}</StandalonePage>
/// Metrics/Dashboards own their own data fetching — they only need the range. Unlike the log viewer's standalone page, there's no pre-existing per-section timeline to seed buckets from, so this owns its own minimal timeline poll purely to drive `LogTimeline`'s picker UI (preset buttons + drag-to-select) and, when a preset was carried over, to keep independently re-resolving that rolling window on its own cadence — it never tracks or freezes to whatever the source tab's window does after this tab was opened.
function StandaloneRanged({
section,
initialPresetId,
initialFixedRange,
}: {
section: 'metrics' | 'dashboards'
initialPresetId: TimeRangePresetId | null
initialFixedRange: TimeRange | null
}) {
const [buckets, setBuckets] = useState<TimelineBucket[]>([])
const [range, setRange] = useState<TimeRange | null>(
initialPresetId ? computePresetRange(initialPresetId) : initialFixedRange,
)
// No preset and no fixed range means the popout was opened with nothing carried over (e.g. a bare URL) — default to 'all', matching FullApp's own default.
const [activePreset, setActivePreset] = useState<TimeRangePresetId | null>(
initialPresetId ?? (initialFixedRange ? null : 'all'),
)
const rangeRef = useRef(range)
useEffect(() => {
rangeRef.current = range
}, [range])
function selectPreset(id: TimeRangePresetId) {
setActivePreset(id)
setRange(computePresetRange(id))
}
function handleManualRangeSelect(next: TimeRange | null) {
if (next === null) {
selectPreset('all')
} else {
setActivePreset(null)
setRange(next)
}
}
useEffect(() => {
let cancelled = false
async function poll() {
// Rolling presets re-resolve on this same polling cadence instead of freezing the window at selection time — this is what makes a carried-over preset independently slide rather than track the source tab.
const effectiveRange =
activePreset && activePreset !== 'all' ? computePresetRange(activePreset) : rangeRef.current
if (activePreset && activePreset !== 'all') {
setRange((current) =>
current && effectiveRange && current.startMs === effectiveRange.startMs && current.endMs === effectiveRange.endMs
? current
: effectiveRange,
)
}
try {
const nextBuckets = await fetchTimeline({
startMs: effectiveRange?.startMs,
endMs: effectiveRange?.endMs,
bucketMs: effectiveRange ? computeBucketMs(effectiveRange.endMs - effectiveRange.startMs) : undefined,
})
if (!cancelled) setBuckets(nextBuckets)
} catch {
// engine not reachable yet; leave the previous buckets in place
}
}
poll()
const id = setInterval(poll, POLL_MS)
return () => {
cancelled = true
clearInterval(id)
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [activePreset])
return (
<StandalonePage>
<div className="flex h-full min-h-0 flex-col overflow-y-auto">
<LogTimeline
buckets={buckets}
range={range}
onSelectRange={handleManualRangeSelect}
activePreset={activePreset}
onSelectPreset={selectPreset}
/>
{section === 'metrics' ? (
<Metrics range={range} activePreset={activePreset} />
) : (
<Dashboards range={range} activePreset={activePreset} />
)}
</div>
</StandalonePage>
)
}
/// The log viewer has its own `LogTimeline`, so it needs its own copy of App's log/timeline polling state instead of a carried-over range.
@@ -172,10 +269,11 @@ function StandaloneLog() {
}
export default function App() {
const { section, range: standaloneRange } = parsePopOutQuery()
const { section, presetId, fixedRange } = parsePopOutQuery()
if (section === 'log') return <StandaloneLog />
if (section === 'params') return <StandaloneParams />
if (section === 'metrics' || section === 'dashboards') return <StandaloneRanged section={section} range={standaloneRange} />
if (section === 'metrics' || section === 'dashboards')
return <StandaloneRanged section={section} initialPresetId={presetId} initialFixedRange={fixedRange} />
return <FullApp />
}
@@ -301,8 +399,8 @@ function FullApp() {
<LogPreview logs={logs} params={params} />
</div>
<Params params={params} onDeclared={loadParams} />
<Metrics range={range} />
<Dashboards range={range} />
<Metrics range={range} activePreset={activePreset} />
<Dashboards range={range} activePreset={activePreset} />
<Alerts />
</div>
</div>