#951 Frontend component to display service config values Pull request opened by javuto Follow up for #950 Summary Adds a read-only frontend view for the database-backed service configuration, completing phase 1 of the service config design. Problem Phase 1 backend (PR #N) introduced

pkg/serviceconfig

with YAML→DB seeding and three read-only GET endpoints, but the frontend had no way to display the persisted configuration sections. Operators could not inspect the seeded logger, carver, SAML, OIDC, metrics, TLS, or debug sections from the UI. Changes API client (

frontend/src/api/service-config.ts

) •

ServiceConfig

interface matching the Go

pkg/serviceconfig.ServiceConfig

wire shape. •

listAllServiceConfig

,

listServiceConfig

,

getServiceConfig

— typed wrappers over the three GET endpoints. ServiceConfigPage (

frontend/src/features/service-config/ServiceConfigPage.tsx

) • Reuses the existing `api`/`tls` tab pattern from

SettingsPage

. • Each section renders as a card with: • Section name,

source

badge (`yaml`/`db`), `editable`/`read-only` badge, info text, and relative timestamp. • JSON viewer using the existing lazy-loaded

CodeEditor

in read-only mode, with pretty-printing so the content is syntax-highlighted, foldable, and scrollable. • Skeleton loading state, error state with retry, and empty state — matching existing component conventions. Route (

frontend/src/routes/_app/config.$service.tsx

) •

/_app/config/$service

registered in the router. Navigation (

frontend/src/components/chrome/SideNav.tsx

) • New "Service Config" nav item below "Settings", active when the path is under

/_app/config

. Tests (

frontend/src/features/service-config/ServiceConfigPage.test.tsx

) • 6 tests covering: section rendering with badges, service tab switching, empty state, error state with retry, JSON pretty-printing, and raw-value passthrough for non-JSON. • Monaco editor mocked per the existing

CodeEditor.test.tsx

pattern. Validation •

npm run check

— TypeScript typecheck clean •

npm test

— 34 test files / 197 tests pass (191 existing + 6 new) •

go build ./...

— backend still builds clean Phase 1 status Phase 1 is now fully complete: YAML → DB seeding, read-only API, and read-only frontend view. The next step is phase 2 — the PUT handler for editable sections plus frontend editing. jmpsec/osctrl