Patterns
31 UI patterns cataloged during the visual audit.
| Pattern | Category | Instances | Variations | Description | Pages |
|---|---|---|---|---|---|
| Header | navigation | 10 | 1 | Top navigation bar — full-width, height 56px, fixed dark slate background rgb(65, 73, 81) in BOTH light and dark themes. Contains logo/brand, primary nav button… | /query, /alerts, /targets, /rules, /service-discovery, /status, /tsdb-status, /f… |
| Navbar | navigation | 10 | 2 | Primary navigation buttons inside the header. Three top-level items (Query, Alerts, Status). Active button uses rgb(34,139,230) blue fill + white text. Inactive… | /query, /alerts, /targets, /rules, /service-discovery, /status, /tsdb-status, /f… |
| Dropdown Menu | overlay | 10 | 1 | Status menu in the top nav — Mantine Menu with two section-labeled groups ('Monitoring status', 'Server status') each containing icon+label menu items linking t… | /query, /alerts, /targets, /rules, /service-discovery, /status, /tsdb-status, /f… |
| Breadcrumb | navigation | 8 | 1 | On Status sub-pages, the active nav button expands to 'Status > Target health' (or equivalent) to serve as a breadcrumb. Rendered inside the same Navbar slot as… | /targets, /rules, /service-discovery, /status, /tsdb-status, /flags, /config, /a… |
| Primary Button | input | 2 | 1 | Solid blue fill. 'Execute' on /query. bg rgb(34, 139, 230), color white, padding 0 18px, fontSize 14px, fontWeight 600, height 36px. | /query |
| Secondary Button | input | 1 | 1 | Light/subtle variant. 'Add query' on /query. Transparent-ish bg, blue text/icon, padding 8px 16px, fontSize 14px, fontWeight 500, height 36px. | /query |
| Icon Button | input | 30 | 2 | Mantine ActionIcon. In header: rgb(134,142,150) bg, 32px × 32px. In content: transparent bg, colored icon. Used for theme toggle, settings, docs, collapse-all, … | /query, /alerts, /targets, /rules, /service-discovery, /status, /tsdb-status, /f… |
| Text Input | input | 1 | 1 | Expression editor input (CodeMirror-backed). Full-width, borderRadius 4px, blue focus ring, padding-right for options menu + Execute action slot. | /query |
| Search Input | input | 5 | 1 | Mantine Input with leading search icon. bg white (light) / rgb(46,46,46) (dark). borderRadius 4px, height 36px, padding 0px 12px 0px 34px. Placeholder wording v… | /alerts, /targets, /rules, /service-discovery, /flags |
| Filter Input (Pills) | input | 4 | 1 | Mantine PillsInput + Combobox for multi-select state filter. Selected values render as Pills inside the field; placeholder otherwise. Shares borderRadius/height… | /alerts, /targets, /rules, /service-discovery |
| Select | input | 2 | 1 | Mantine Combobox/Select for 'Select scrape pool'. Single-value. bg white/dark, borderRadius 4px, height 36px, trailing chevron. | /targets, /service-discovery |
| Date Picker | input | 1 | 1 | Mantine DateTimePicker labeled 'Evaluation time' with prev/next ActionIcons flanking the picker. | /query |
| Tab Control | navigation | 1 | 1 | Mantine Tabs for Table / Graph / Explain. Active tab: borderBottom 2px solid rgb(34, 139, 230). Inactive: transparent bottom border. Both fontSize 14px fontWeig… | /query |
| Card | layout | 8 | 3 | Mantine Card (+ Paper). bg rgb(255,255,255) light / rgb(36,36,36) dark. border 1px solid rgb(222, 226, 230). borderRadius 4px. padding 16px. boxShadow: 2-layer … | /status, /tsdb-status, /flags, /alertmanager-discovery |
| Card Title with Icon | layout | 4 | 1 | Card heading = leading Tabler icon (monochrome black/~20px) + heading text. Observed titles: 'Build information', 'Runtime information', 'Active Alertmanagers',… | /status, /alertmanager-discovery |
| Card Title without Icon | layout | 4 | 1 | Card heading = plain text heading, NO leading icon. Observed: 'TSDB Head Status', 'Top 10 label names with value count', 'Top 10 label names with highest memory… | /tsdb-status |
| Accordion | layout | 2 | 1 | Mantine Accordion. Each item: bg surface-0, borderRadius 4px, borderLeft 5px solid — GREEN (rgb(140,233,154) light / rgb(47,158,68) dark) when all children UP, … | /targets, /service-discovery |
| Status Indicator | data-display | 2 | 2 | Small ~16px SVG circle next to pool-level 'N/M up' counter. Filled green when all UP, filled red when any DOWN. Purely visual — no text. | /targets, /service-discovery |
| Health Status Badge | data-display | 4 | 2 | Pill-shaped badge for per-target state. UP: bg rgb(211,249,216) / color rgb(43,138,62) light; inverted in dark. DOWN: bg rgb(255,236,236) / color rgb(201,42,42)… | /targets |
| Label Badge | data-display | 24 | 1 | Pill-shaped key=value badge for scrape/target/discovered labels. bg rgb(241,243,245) light / rgb(52,58,64) dark. color rgb(73,80,87) light / rgb(173,181,189) da… | /targets, /service-discovery |
| Stats Badge | data-display | 8 | 1 | Pill-shaped gray badge with leading icon used for 'last scrape' duration + 'N ms ago' timestamp. Same bg/color tokens as Label Badge. textTransform at root is u… | /targets |
| Table | data-display | 6 | 1 | Mantine Table. th fontSize 14px fontWeight 700 padding 7px 10px text-align left. td fontSize 14px padding 7px 10px. Visual bottom-border between rows (Mantine d… | /status, /tsdb-status |
| Sortable Table | data-display | 1 | 1 | Same Mantine Table base but both th have a stacked up/down chevron icon indicating sortability. Only on /flags. | /flags |
| Key-Value Table | data-display | 6 | 1 | Two-column table with a bold label column and a value column. Used for Build/Runtime info (system fields) and Top-N label stats (monospace fields). | /status, /tsdb-status |
| Inline Code | data-display | 100 | 1 | Bare <code> tag used inside table cells. Browser-default monospace, no bg, no padding, no border. Used for label names, flag names, flag values. | /tsdb-status, /flags |
| YAML Code Block | data-display | 1 | 1 | Mantine CodeHighlight rendering the YAML config. pre uses bare 'monospace' font-family keyword — no explicit stack. fontSize 16px. In light: bg transparent; in … | /config |
| Syntax Highlighted Code | data-display | 1 | 2 | highlight.js tokenization over the CodeHighlight pre. Light theme token colors: hljs-attr rgb(92,148,13) (green), hljs-string rgb(24,100,171) (blue), hljs-liter… | /config |
| Copy Button | input | 1 | 1 | Mantine ActionIcon (mantine-CodeHighlight-control) floating at top-right of the code block. aria-label 'Copy code'. | /config |
| Mantine Alert Info Callout | feedback | 5 | 1 | Mantine Alert with color='blue' (info). bg rgba(34,139,230,0.1), title color rgb(34,139,230) (blue bold), body color rgb(0,0,0) (black) regular. borderRadius 4p… | /query, /alerts, /rules, /alertmanager-discovery |
| Empty State | feedback | 5 | 1 | Implemented as a Mantine Alert Info Callout with a title + body pair. Title + body often contain near-duplicate strings (see INC-001). | /query, /alerts, /rules, /alertmanager-discovery |
| Link | data-display | 5 | 1 | Mantine Anchor / plain <a>. color rgb(34, 139, 230) (primary blue), textDecoration none. Used for endpoint URLs on /targets and 'show relabeling' disclosure on … | /targets, /service-discovery |