prometheus / prometheus/alertmanager
UI: generate Connect TypeScript clients and establish the data layer
@siavashs is already working on this.
Since Aug 29, 2026.
- Dominant language
- Go
- Stars
- 8.6k
- Forks
- 2.5k
- Avg merge
- 2d 6h
- Merged PRs (30d)
- 61
Description
Parent: #5451
Related API roadmap: #5450
Summary
Generate TypeScript clients from Alertmanager's public v3alpha protobuf contracts and establish the route-prefix-aware Connect/TanStack Query data layer for the Mantine UI.
Production Mantine code must not use API v2 fallbacks or handwritten wire models.
Code generation
- Add pinned
@bufbuild/protobuf,@connectrpc/connect,@connectrpc/connect-web, and@connectrpc/connect-queryruntimes. - Add pinned local ES and Connect-Query generators.
- Add a frontend Buf template that emits only public
proto/api/**bindings into a clearly generated directory underui/mantine-ui/src/. - Integrate frontend generation with
scripts/genproto.shandmake common-proto. - Ensure generated output changes only with proto sources, generation configuration, or pinned generator versions.
- Keep internal cluster, nflog, silence-storage, and event-recorder protos out of the frontend bundle.
Client infrastructure
- Create one Connect web transport using runtime-injected
routePrefix,uiBasePath, andapiBaseURLvalues from #5486. - Target
<route-prefix>/apiwith same-origin browser credentials. - Define conventions for unary queries, mutations, cancellation, infinite pagination, stable keys, invalidation, and retry/refetch behavior using Connect-Query and TanStack Query.
- Define direct generated-client infrastructure for server streams; do not model streaming through unary-only Connect-Query hooks.
- Translate
ConnectErrorcodes and structured validation, required-feature, and partial-result details into reusable UI error models. - Make provider composition and test utilities supply Transport, QueryClient, Router, Suspense, and error boundaries without cross-test cache leakage.
The current handwritten /api/v2 fetch layer may coexist only while Status is being migrated in its child issue; no new screen may depend on it, and it must be removed before the Mantine UI is shipped from /ui/.
Testing
- Use
createRouterTransportfor focused component and hook tests so requests still pass through generated protobuf schemas and Connect errors. - Retain real-server coverage for route prefixes, HTTP transport, headers, and browser behavior.
- Cover cancellation, structured errors, pagination keys, malformed inputs, and provider isolation.
Acceptance criteria
- TypeScript messages, service descriptors, and query bindings are generated from the same source protos as Go.
- Generation targets only public
proto/api/**contracts. - A second
make common-protorun produces no diff. - Root and prefixed transports target the correct
<route-prefix>/apiendpoint. - Generated unary calls, mutations, pagination, cancellation, and structured errors are covered.
- Test renders receive fresh QueryClient and mock Transport instances.
- Production Mantine code contains no
/api/v2call or arbitrary JSON cast to a handwritten wire type. - Generated files are never edited manually and are committed only with corresponding source/configuration changes.
Dependencies and related work
- Runtime UI/API paths: #5486.
- Delivered StatusService: #5477.
- Coordinate shared messages, pagination, error details, and feature details with #5479.
- Coordinate request and stream transport policy with #5478.
- #5128 has relevant datasource-testing intent, but its API-v2 fetch mocks should be adapted to generated Connect transports and real-server coverage.
Likely code areas
buf.gen.yamlor a UI-specific Buf templatescripts/genproto.sh,Makefileui/mantine-ui/package.json,package-lock.json,tsconfig.json- generated
ui/mantine-ui/src/gen/** - transport, query, error, and provider modules under
ui/mantine-ui/src/ - test utilities and CI generation checks
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.