prometheus / prometheus/alertmanager

UI: implement the accessible application shell, theme, and settings

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

@siavashs is already working on this.

Since Aug 29, 2026.

component/ui kind/enhancement
Dominant language
Go
Stars
8.6k
Forks
2.5k
Avg merge
2d 6h
Merged PRs (30d)
61

Description

Parent: #5451

Summary

Build the shared Mantine application shell, responsive navigation, theme, persistent settings, and accessibility foundations used by every v3alpha-backed page.

Application shell

  • Centralize page and route metadata so the Router and Header do not maintain duplicate definitions.
  • Build a responsive Mantine AppShell with desktop navigation and a keyboard-accessible mobile burger/drawer.
  • Include current-route state, Alertmanager branding and favicon, Documentation, and a route-prefix-safe Classic UI link.
  • Add a real not-found page and reusable loading, empty, unavailable, and error states.
  • Reset page error boundaries on route changes and lazy-load substantive routes where useful.
  • Hide routes whose v3alpha services have not landed rather than exposing non-functional placeholder pages.

Theme and settings

  • Define Alertmanager theme tokens, spacing, radius, typography, contrast, and focus behavior centrally.
  • Support automatic, light, and dark color schemes and persist explicit selection.
  • Integrate/rebase #5106 where suitable and include its requested interaction and accessibility tests.
  • Add persistent settings for first day of week, default silence creator, expand-all alert groups, local/UTC time display, and page sizes.
  • Preserve compatible Elm localStorage keys (firstDayOfWeek, defaultCreator, and groupExpandAll) and tolerate malformed or missing values.

Accessibility and responsiveness

  • Restore browser zoom; do not use user-scalable=no.
  • Use semantic page headings, landmarks, table structures, labels, and status/error announcements.
  • Ensure all navigation and interactive controls work with keyboard and visible focus.
  • Correct the current mobile navigation gap and title visibility breakpoints.
  • Prevent fixed-width skeletons, tables, code blocks, labels, and menus from overflowing narrow viewports.
  • Do not globally suppress keyboard-equivalent click lint rules.

Acceptance criteria

  • One route registry drives navigation and route rendering.
  • Every available page is usable by keyboard at mobile and desktop widths.
  • Mobile navigation exposes all routes and actions available on desktop.
  • Auto/light/dark theme selection is clear, accessible, and persistent.
  • Existing Elm preferences migrate without throwing and malformed storage values fall back safely.
  • Documentation and Classic UI links work at root and non-root route prefixes.
  • Not-found, loading, empty, unavailable, and error states are consistent and announced appropriately.
  • Browser zoom, semantic headings/tables, focus visibility, labels, and responsive overflow pass automated and manual checks.
  • Interaction tests cover navigation, theme cycling, settings persistence, error resets, and mobile controls.

Dependencies and related work

  • Runtime UI path/bootstrap: #5486.
  • Can proceed in parallel with Connect client work in #5487.
  • Theme work should coordinate with #5106 and dark-mode request #2556.
  • Local/UTC settings relate to #3861.

Likely code areas

  • ui/mantine-ui/src/{App,main,theme}.tsx
  • ui/mantine-ui/src/components/Header*, ErrorBoundary.tsx, and new shell components
  • new route and settings modules/tests
  • ui/mantine-ui/index.html, biome.json
  • shared test utilities

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.