prometheus / prometheus/alertmanager

UI: generate Connect TypeScript clients and establish the data layer

Open
#5,487 0 comments 0 reactions 1 assignee View on GitHub

@siavashs is already working on this.

Since Aug 29, 2026.

component/api component/ui kind/enhancement
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-query runtimes.
  • 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 under ui/mantine-ui/src/.
  • Integrate frontend generation with scripts/genproto.sh and make 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, and apiBaseURL values from #5486.
  • Target <route-prefix>/api with 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 ConnectError codes 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 createRouterTransport for 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-proto run produces no diff.
  • Root and prefixed transports target the correct <route-prefix>/api endpoint.
  • 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/v2 call 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.yaml or a UI-specific Buf template
  • scripts/genproto.sh, Makefile
  • ui/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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.