Accordion
Mantine Accordion per scrape pool. Each item has a 5px-solid colored left border — green when all children are UP, red when any child is DOWN. Control row shows pool name, 'N/M up' counter, Status Indicator dot, chevron.
DO
Surface aggregate health in two places: colored border AND the 'N/M up' counter.
DON'T
Rely on color alone — the Status Indicator dot and counter make the state readable without color.
Design
ok
demo3/3 up▾
All targets UP — green left border.
error
prometheus1/2 up▾
Any target DOWN — red left border.
Component reference (screenshots)
Placeholder screenshots — the audited app is live at prometheus-e83j.onrender.com.
Implementation
<Accordion>
{pools.map(p => <Accordion.Item value={p.name} data-state={p.allUp ? 'ok' : 'error'}>…</Accordion.Item>)}
</Accordion>Layout
| Property | Value |
|---|---|
| border-left-width | 5px accordion-left-border-width |
| padding | 0 16px |
| border-radius | 4px sm |
Accessibility
| ARIA | Each Accordion.Control has aria-expanded; header label conveys state in text. |
| Keyboard | Enter/Space toggle; arrow keys move between panels. |