feat: enhance EventFeed timeline and Agent Health page styling

- EventFeed: 28px icon circles with severity colors, stacked message/timestamp, search input with clear button, ReactNode message support with searchText field - Agent Health: timeline wrapped in card panel, instance listing as proper table, colored Badge pills for live counts, removed shift pill - Input primitive: onClear prop with × button for all search fields - Sidebar: Agents section collapsible like Applications, collapse state persisted to localStorage - FilterBar/Sidebar: clear buttons on all search inputs Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-18 19:11:58 +01:00
parent e7668e8144
commit 674444682e
11 changed files with 582 additions and 243 deletions
--- a/src/mocks/agentEvents.ts
+++ b/src/mocks/agentEvents.ts
@@ -1,55 +0,0 @@
-import type { FeedEvent } from '../design-system/composites/EventFeed/EventFeed'
-
-const MINUTE = 60_000
-const HOUR = 3_600_000
-
-export const agentEvents: FeedEvent[] = [
-  {
-    id: 'evt-1',
-    severity: 'error',
-    message: '[notification-hub] notif-1 status changed to DEAD — no heartbeat for 47m',
-    timestamp: new Date(Date.now() - 47 * MINUTE),
-  },
-  {
-    id: 'evt-2',
-    severity: 'warning',
-    message: '[payment-svc] pay-2 status changed to STALE — missed 3 consecutive heartbeats',
-    timestamp: new Date(Date.now() - 3 * MINUTE),
-  },
-  {
-    id: 'evt-3',
-    severity: 'success',
-    message: '[order-service] ord-3 started — instance joined cluster (v3.2.1)',
-    timestamp: new Date(Date.now() - 2 * HOUR - 15 * MINUTE),
-  },
-  {
-    id: 'evt-4',
-    severity: 'warning',
-    message: '[payment-svc] pay-2 error rate elevated: 12 err/h (threshold: 10 err/h)',
-    timestamp: new Date(Date.now() - 5 * MINUTE),
-  },
-  {
-    id: 'evt-5',
-    severity: 'running',
-    message: '[order-service] Route "order-validation" added to ord-1, ord-2, ord-3',
-    timestamp: new Date(Date.now() - 1 * HOUR - 30 * MINUTE),
-  },
-  {
-    id: 'evt-6',
-    severity: 'running',
-    message: '[shipment-svc] Configuration updated — retry policy changed to 3 attempts with exponential backoff',
-    timestamp: new Date(Date.now() - 4 * HOUR),
-  },
-  {
-    id: 'evt-7',
-    severity: 'success',
-    message: '[shipment-svc] ship-1 and ship-2 upgraded to v3.2.0 — rolling restart complete',
-    timestamp: new Date(Date.now() - 7 * 24 * HOUR),
-  },
-  {
-    id: 'evt-8',
-    severity: 'error',
-    message: '[notification-hub] notif-1 failed health check — memory allocation error',
-    timestamp: new Date(Date.now() - 48 * MINUTE),
-  },
-]
--- a/src/mocks/agentEvents.tsx
+++ b/src/mocks/agentEvents.tsx
@@ -0,0 +1,69 @@
+import type { FeedEvent } from '../design-system/composites/EventFeed/EventFeed'
+
+const MINUTE = 60_000
+const HOUR = 3_600_000
+
+const agent = { fontFamily: 'var(--font-mono)', fontWeight: 600 } as const
+const dead = { color: 'var(--error)', fontWeight: 600 } as const
+const stale = { color: 'var(--warning)', fontWeight: 600 } as const
+const started = { color: 'var(--success)', fontWeight: 600 } as const
+const info = { color: 'var(--running)', fontWeight: 600 } as const
+
+export const agentEvents: FeedEvent[] = [
+  {
+    id: 'evt-1',
+    severity: 'error',
+    message: <><span style={agent}>notif-1</span> status changed to <span style={dead}>DEAD</span> — no heartbeat for 47m</>,
+    searchText: 'notif-1 status changed to DEAD — no heartbeat for 47m',
+    timestamp: new Date(Date.now() - 47 * MINUTE),
+  },
+  {
+    id: 'evt-2',
+    severity: 'warning',
+    message: <><span style={agent}>pay-2</span> status changed to <span style={stale}>STALE</span> — missed 3 consecutive heartbeats</>,
+    searchText: 'pay-2 status changed to STALE — missed 3 consecutive heartbeats',
+    timestamp: new Date(Date.now() - 3 * MINUTE),
+  },
+  {
+    id: 'evt-3',
+    severity: 'success',
+    message: <><span style={agent}>ord-3</span> <span style={started}>started</span> — instance joined cluster (v3.2.1)</>,
+    searchText: 'ord-3 started — instance joined cluster (v3.2.1)',
+    timestamp: new Date(Date.now() - 2 * HOUR - 15 * MINUTE),
+  },
+  {
+    id: 'evt-4',
+    severity: 'warning',
+    message: <><span style={agent}>pay-2</span> error rate elevated: <span style={stale}>12 err/h</span> (threshold: 10 err/h)</>,
+    searchText: 'pay-2 error rate elevated: 12 err/h (threshold: 10 err/h)',
+    timestamp: new Date(Date.now() - 5 * MINUTE),
+  },
+  {
+    id: 'evt-5',
+    severity: 'running',
+    message: <>Route <span style={info}>order-validation</span> added to <span style={agent}>ord-1</span>, <span style={agent}>ord-2</span>, <span style={agent}>ord-3</span></>,
+    searchText: 'Route order-validation added to ord-1, ord-2, ord-3',
+    timestamp: new Date(Date.now() - 1 * HOUR - 30 * MINUTE),
+  },
+  {
+    id: 'evt-6',
+    severity: 'running',
+    message: <>Config push to <span style={agent}>ship-1</span>, <span style={agent}>ship-2</span> — retry policy changed to 3 attempts with exponential backoff</>,
+    searchText: 'Config push to ship-1, ship-2 — retry policy changed to 3 attempts with exponential backoff',
+    timestamp: new Date(Date.now() - 4 * HOUR),
+  },
+  {
+    id: 'evt-7',
+    severity: 'success',
+    message: <><span style={agent}>ship-1</span> and <span style={agent}>ship-2</span> <span style={started}>upgraded</span> to v3.2.0 — rolling restart complete</>,
+    searchText: 'ship-1 and ship-2 upgraded to v3.2.0 — rolling restart complete',
+    timestamp: new Date(Date.now() - 7 * 24 * HOUR),
+  },
+  {
+    id: 'evt-8',
+    severity: 'error',
+    message: <><span style={agent}>notif-1</span> failed health check — <span style={dead}>memory allocation error</span></>,
+    searchText: 'notif-1 failed health check — memory allocation error',
+    timestamp: new Date(Date.now() - 48 * MINUTE),
+  },
+]