prometheus / prometheus/alertmanager
UI: implement the accessible application shell, theme, and settings
Open
@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
AppShellwith 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, andgroupExpandAll) 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}.tsxui/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
- 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.