fix(alerts/ui): bell position, content tabs hidden, filters, novice labels
Surfaced during second smoke:
1. Notification bell moved — was first child of TopBar (left of
breadcrumb); now rendered inside the `environment` slot so it
sits between the env selector and the user menu, matching user
expectations.
2. Content tabs (Exchanges/Dashboard/Runtime/Deployments) hidden on
`/alerts/*` — the operational tabs don't apply there.
3. Inbox / All alerts filters now actually filter. `AlertController.list`
accepts only `limit` — `state`/`severity` query params are dropped
server-side. Move `useAlerts` to fetch once per env (limit 200) and
apply filters client-side via react-query `select`, with a stable
queryKey so filter toggles are instant and don't re-request. True
server-side filter needs a backend change (follow-up).
4. Novice-friendly labels:
- Inbox subtitle: "99 firing · 100 total" → "99 need attention ·
100 total in inbox"
- All alerts filter: Open/Firing/Acked/All →
"Currently open"/"Firing now"/"Acknowledged"/"All states"
- All alerts subtitle: "N shown" → "N matching your filter"
- History subtitle: "N resolved" → "N resolved alert(s) in range"
- Rules subtitle: "N total" → "N rule(s) configured"
- Silences subtitle: "N active" → "N active silence(s)" or
"Nothing silenced right now"
- Column headers: "State" → "Status", rules "Kind" → "Type",
rules "Targets" → "Notifies"
- Buttons: "Ack" → "Acknowledge", silence "End" → "End early"
Updated alerts.test.tsx and e2e selector to match new behavior/labels.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -80,7 +80,7 @@ export default function InboxPage() {
|
||||
row.severity ? <SeverityBadge severity={row.severity} /> : null,
|
||||
},
|
||||
{
|
||||
key: 'state', header: 'State', width: '140px',
|
||||
key: 'state', header: 'Status', width: '140px',
|
||||
render: (_, row) =>
|
||||
row.state ? <AlertStateChip state={row.state} silenced={row.silenced} /> : null,
|
||||
},
|
||||
@@ -108,11 +108,11 @@ export default function InboxPage() {
|
||||
) : '—',
|
||||
},
|
||||
{
|
||||
key: 'ack', header: '', width: '70px',
|
||||
key: 'ack', header: '', width: '120px',
|
||||
render: (_, row) =>
|
||||
row.state === 'FIRING' ? (
|
||||
<Button size="sm" variant="secondary" onClick={() => onAck(row.id, row.title ?? undefined)}>
|
||||
Ack
|
||||
Acknowledge
|
||||
</Button>
|
||||
) : null,
|
||||
},
|
||||
@@ -126,7 +126,7 @@ export default function InboxPage() {
|
||||
const subtitle =
|
||||
selectedIds.length > 0
|
||||
? `${selectedIds.length} selected`
|
||||
: `${unreadIds.length} firing · ${rows.length} total`;
|
||||
: `${unreadIds.length} need attention · ${rows.length} total in inbox`;
|
||||
|
||||
return (
|
||||
<div className={css.page}>
|
||||
|
||||
Reference in New Issue
Block a user