Design handoff · operator overview
Show whether ingestion is healthy without requiring dashboard archaeology
Build a read-only overview that names the current state, exposes queue lag and shed behavior, and routes operators to the existing runbook rather than inventing control UI.
Primary user flow
- Open the overview from the on-call page.
- Read the global written status and last refresh time.
- Identify the queue with rising lag or shed count.
- Open the existing runbook; do not operate the service from this page.
Screen anatomy
desktop + mobileGlobal status
Degraded — queue B unavailable
Written label, last updated time, environment, and active incident link.
Queue A
Healthy · 24s lag
Lag, depth, shed count, last event, and trend description.
Queue B
Unavailable · 184 sheds
Error text plus the time the state began; never color alone.
Next action
Open queue-lag runbook
One link. No scale, restart, or destructive control on this surface.
Required states
acceptanceHappy
All queues written as healthy; lag and shed values visible.
Idle
No recent events; explain that zero traffic is not a failure.
Loading
Reserve layout and announce refresh without presenting stale values as current.
Partial data
Show available queues and name the missing source.
Error
Written failure, last known update, retry behavior, and runbook link.
Recovered
Success label with recovery time; avoid celebratory animation during incidents.
Components and interaction
system-first| Component | Use | Do not add |
|---|---|---|
| Status banner | Global written state, environment, refresh time | Color-only state |
| Queue card | Lag, depth, shed, last event, written trend | Custom charts or hidden hover facts |
| Runbook link | Primary recovery action | Inline operational controls |
| Incident link | Visible only when an active incident exists | Automatic incident creation |
Refresh every 15 seconds. Preserve keyboard focus across refresh. The tab order follows global status, queue cards, runbook, then incident link.
Responsive, content, and accessibility rules
non-negotiable- Desktop uses a two-column queue grid; mobile uses one column in the same information order.
- Never truncate queue names, status labels, timestamps, or error messages.
- Announce status changes through a polite live region; do not announce every unchanged refresh.
- Meet AA contrast and keep visible focus on every link.
- Use real headings and lists; cards do not replace document structure.
Acceptance: all six states render at 390 and 1440 pixels, status survives grayscale, keyboard order is stable during refresh, and every failure path still exposes the runbook link.