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:
hsiegeln
2026-04-21 11:48:33 +02:00
parent 05f420d162
commit c443fc606a
9 changed files with 87 additions and 39 deletions

View File

@@ -957,18 +957,20 @@ function LayoutContent() {
<TopBar
breadcrumb={breadcrumb}
environment={
<EnvironmentSelector
environments={environments}
value={selectedEnv}
onChange={setSelectedEnv}
/>
<>
<EnvironmentSelector
environments={environments}
value={selectedEnv}
onChange={setSelectedEnv}
/>
<NotificationBell />
</>
}
user={username ? { name: username } : undefined}
userMenuItems={userMenuItems}
onLogout={handleLogout}
onNavigate={navigate}
>
<NotificationBell />
<SearchTrigger onClick={() => setPaletteOpen(true)} />
<ButtonGroup
items={STATUS_ITEMS}
@@ -1006,7 +1008,7 @@ function LayoutContent() {
data={searchData}
/>
{!isAdminPage && (
{!isAdminPage && !isAlertsPage && (
<ContentTabs active={scope.tab} onChange={setTab} scope={scope} />
)}