ds
Operations
Alerts

Alerts

Firing, pending and resolved, by severity.

CriticalCheckoutErrorBudgetBurn

Firingfor 14m

checkout-api is burning its 30-day error budget at 14.9× over the last hour.

service=checkout-apiregion=ap-south-1team=payments
WarningKafkaConsumerLagHigh

Pendingfor 3m

orders-enricher is 182,400 messages behind on orders.v2, partition 7.

consumer_group=orders-enrichertopic=orders.v2
WarningNodeDiskPressure

Silenceduntil 18:00

ip-10-4-17-82 has 7% of /var/lib/containerd free. Silenced for the node rotation.
CriticalPostgresReplicaLag

Resolved2h ago, lasted 9m
InfoCertificateExpiresSoon

Firingfor 2d

*.api.example.com expires on 2 Nov 2026. Renewal runs on 26 Oct.

Show code

<ul class="alerts">
  <li class="alert" data-sev="critical">
    <div class="alert-name"><span class="alert-sev">Critical</span><span>CheckoutErrorBudgetBurn</span></div>
    <div class="alert-side"><span class="badge down">Firing</span><span>for 14m</span></div>
    <p class="alert-desc">checkout-api is burning its 30-day error budget at 14.9× over the last hour.</p>
    <div class="chips"><span class="chip">service=checkout-api</span><span class="chip">region=ap-south-1</span><span class="chip">team=payments</span></div>
  </li>
  <li class="alert" data-sev="warning">
    <div class="alert-name"><span class="alert-sev">Warning</span><span>KafkaConsumerLagHigh</span></div>
    <div class="alert-side"><span class="badge warn">Pending</span><span>for 3m</span></div>
    <p class="alert-desc">orders-enricher is 182,400 messages behind on orders.v2, partition 7.</p>
    <div class="chips"><span class="chip">consumer_group=orders-enricher</span><span class="chip">topic=orders.v2</span></div>
  </li>
  <li class="alert silenced" data-sev="warning">
    <div class="alert-name"><span class="alert-sev">Warning</span><span>NodeDiskPressure</span></div>
    <div class="alert-side"><span class="badge outline">Silenced</span><span>until 18:00</span></div>
    <p class="alert-desc">ip-10-4-17-82 has 7% of /var/lib/containerd free. Silenced for the node rotation.</p>
  </li>
  <li class="alert resolved" data-sev="critical">
    <div class="alert-name"><span class="alert-sev">Critical</span><span>PostgresReplicaLag</span></div>
    <div class="alert-side"><span class="badge ok">Resolved</span><span>2h ago, lasted 9m</span></div>
  </li>
  <li class="alert" data-sev="info">
    <div class="alert-name"><span class="alert-sev">Info</span><span>CertificateExpiresSoon</span></div>
    <div class="alert-side"><span class="badge">Firing</span><span>for 2d</span></div>
    <p class="alert-desc">*.api.example.com expires on 2 Nov 2026. Renewal runs on 26 Oct.</p>
  </li>
</ul>

One row per alert, in the shape Alertmanager and most on-call tools use. The stripe on the left is severity and never changes; the badge on the right is state and does. Labels are mono chips because people copy them into queries. Resolved and silenced rows keep their place but drop the stripe to grey, so the list stays stable while the noise goes down.

Severity and state

Value	Stripe and label	Use
`critical`	red	Pages someone now. Users are affected or will be within the hour.
`warning`	amber	A ticket. Look today.
`info`	blue	Worth knowing, needs no action: renewals, scheduled jobs that ran late.

State	Badge	Meaning
`Firing`	.badge.down / .warn	The condition is true and has been for longer than its `for` duration.
`Pending`	.badge.warn	True, but not yet for long enough to notify.
`Silenced`	.badge.outline	Muted by someone, with an end time. The row gets diagonal hatching.
`Resolved`	.badge.ok	No longer true. Say how long it lasted.

API

Class	On	What it does
`.alerts`	ul	The bordered list.
`.alert`	li	One alert. `data-sev`: critical (default), warning, info. `.resolved` and `.silenced` quiet it.
`.alert-name`	div	The severity word in `.alert-sev`, then the alert name.
`.alert-side`	div	State badge and duration on the right. Moves under the name on phones.
`.alert-desc`	p	The summary annotation, with the numbers filled in.
`.chips`	div	Labels as `.chip`s.

Summaries with the measured value: "182,400 messages behind", not "lag is high".
A duration on every row: for how long it has fired, or how long it lasted.
Sort by severity, then by how long it has been firing.

Don't

Red for warnings because they look urgent. Red means someone gets paged.
Hiding resolved alerts immediately. The last few hours are context for the next page.
Labels in a proportional font.

Accessibility

Severity is a word, not only a stripe, and state is a word in the badge.
If the list updates live, announce only new firing alerts in a polite live region, not every change.