SLO Budget

An error budget and how fast it is burning. Shows the budget remaining rather than availability achieved — 99.4% against a 99.9% target sounds like a near miss and is a six-times overspend.

src/components/ui/slo-budget.tsx

About

From the component's own source, where it was written.

An error budget and how fast it is being spent.

Shows the budget *remaining*, not the availability achieved. 99.4% against a 99.9% target sounds like a near miss and is in fact a six-times overspend — the budget framing is what makes that legible, and it is the number an on-call decision is actually made on.

The burn rate is given as a multiple of the sustainable pace, since "2.4×" answers "will we make it" and a raw percentage does not.

Install

npx astralyx-ui add slo-budget

Usage

import { SloBudget } from '@/components/ui/slo-budget'

<SloBudget target={0.999} actual={0.9994} burnRate={0.6} />

Composer

Change the props and the source below follows.

Checkout availabilitytarget 99.90% · 30 days

40%remaining0.6× burn

Achieved 99.940% — spent 60% of the allowance

Props

actual

burnRate

tsx

<SloBudget
  target={0.999}
  actual={0.9994}
  burnRate={0.6}
/>

Examples

Healthy and exhausted

tsx

<SloBudget target={0.999} actual={0.9994} burnRate={0.6} />
<SloBudget target={0.999} actual={0.994} burnRate={6.2} />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`SloBudget`

An error budget and how fast it is being spent.

Extends Omit<ComponentProps<'div'>, 'children'>.

Prop	Type	Default	Description
target	number	required	Ratios, not percentages — 0.999 and 0.9994.
actual	number	required	Ratios, not percentages — 0.999 and 0.9994.
window	string	'30 days'	The period the budget covers, for the caption.
burnRate	number	—	Multiple of the sustainable pace. "2.4×" answers "will we make it"; a raw percentage does not.
label	ReactNode	—	—
hint	ReactNode	—	—
targetLabel	ReactNode	'target'	Precedes the objective in the subheading.
remainingLabel	ReactNode	'remaining'	Follows the remaining percentage.
meterLabel	string	'Error budget remaining'	Accessible name for the budget meter.
achievedLabel	ReactNode	'Achieved'	Precedes the achieved availability.
spentLabel	ReactNode	'spent'	Precedes the consumed share.

Behaviour

Topic	Detail	Description
thresholds	automatic	Green, amber past three quarters spent, red once exhausted.