Add Params declaration UI (ticket 034)

New Params panel (Log viewer / Params / Metrics / Dashboards) declares a
bare param via POST /api/params, mirroring Metrics' declare-then-list
pattern including inline 400 error surfacing. Lifted the params list from
LogPreview's own effect into App.tsx so declaring a param there updates
the Columns picker immediately, without a page reload.

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:43:53 +01:00
co-authored by Claude Sonnet 5
parent 41c9a3660b
commit dd1a0a234d
6 changed files with 147 additions and 68 deletions
+3 -22
View File
@@ -1,9 +1,5 @@
import { useEffect, useRef, useState } from 'react'
import {
fetchParamDeclarations,
metricPrimitiveToDisplayString,
type LogEntry,
} from '../lib/api'
import { metricPrimitiveToDisplayString, type LogEntry, type ParamDeclaration } from '../lib/api'
import { HelpIcon } from './HelpIcon'
/// localStorage key for LogPreview's selected param columns. Namespaced
@@ -89,25 +85,10 @@ function ColumnPicker({
)
}
export function LogPreview({ logs }: { logs: LogEntry[] }) {
const [paramNames, setParamNames] = useState<string[]>([])
export function LogPreview({ logs, params }: { logs: LogEntry[]; params: ParamDeclaration[] }) {
const paramNames = params.map((d) => d.name)
const [visibleParamColumns, setVisibleParamColumns] = useState<string[]>(loadVisibleParamColumns)
useEffect(() => {
let cancelled = false
fetchParamDeclarations()
.then((declarations) => {
if (!cancelled) setParamNames(declarations.map((d) => d.name))
})
.catch(() => {
// params API not reachable yet; column picker just stays empty until
// the next successful fetch.
})
return () => {
cancelled = true
}
}, [])
const visible = new Set(visibleParamColumns)
function toggleColumn(name: string) {