# SLO Error Budgets block

> Dev Ops SLO Console with Error Budget Burn-Down, Burn Rate Alerts and Objective Sheet

SLO console: KPI tiles, a burn-down you drag to sum spend, an objectives grid with budget and alert columns, incident exclusions and OpenSLO copy. ReUI Data Grid, Filters, Frame. For SRE dashboard, service level objectives, uptime.

- Type: Pro block
- Category: [Dev Ops](https://web.dev.reui.io/blocks/solutions/dev-ops.md)
- Page: https://web.dev.reui.io/blocks/solutions/dev-ops/solution-dev-ops-5
- MCP: `get_block("solution-dev-ops-5")`
- Built with: Alert, Alert Dialog, Avatar, Badge, Button, Button Group, Chart, Data Grid, Dropdown Menu, Empty, Field, Filters, Frame, Hover Card, Icon Tile, Input, Input Group, Item, Number Field, Popover, Select, Separator, Sheet, Switch, Tabs, Textarea, Toggle Group, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

Error budget spend summed by dragging across daily lollipops, a log scale burn rate gauge and event exclusion switches

## Agent notes

- `RAW_SLOS` lists the sample SLOs and `generateSeries` seeds their 90 days of counts and hourly burn; replace both with real SLI data
- `ALERT_RULES` sets the 14.4, 6 and 1 burn factors and page or ticket levels behind the gauge guides and each rule's breach test
- `openSloYaml` writes `indicatorRef` as a made up service-sli name and emits no SLI or alert policy document

## When not to use

- Just the SLO detail panel with its burn gauges and event switches, no page behind it: use [SLO Error Budget](https://web.dev.reui.io/blocks/application/sheet/sheet-20.md) (`get_block("sheet-20")`)

## Third-party libraries

- Recharts v3: [API reference](https://recharts.github.io/en-US/api/), [docs](https://recharts.github.io/en-US/guide/getting-started/)
- TanStack Table v9: [API reference](https://tanstack.com/table/v9/docs/framework/react/reference/index), [docs](https://tanstack.com/table/v9/docs/framework/react/quick-start)
- Motion v12: [API reference](https://motion.dev/docs/react-motion-component), [docs](https://motion.dev/docs/react) (the docs follow the latest Motion, with no React API break since v12)
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started)

## Install

```bash
npx shadcn@latest add @reui/solution-dev-ops-5
```

## About Dev Ops blocks

### When to use

- Platform and SRE consoles for cron jobs, releases, audit trails, SLOs, edge firewalls and data sources
- On call triage of failing jobs, failed deploys, denied access, blocked requests and burning error budgets
- Operator changes made in place: pausing a job, promoting or rolling back, editing rules, rotating credentials

### When not to use

- A single table on your own columns, with no charts, lanes or ops panels around it: use [Data Grid](https://web.dev.reui.io/components/data-grid.md) (`get_component("data-grid")`)
- A table section for business records such as tickets, contacts, deals or timesheets: use the [Base blocks](https://web.dev.reui.io/blocks/data-grid/base.md)
- Only the record detail panel that slides over a list, without the console page: use the [Sheet blocks](https://web.dev.reui.io/blocks/application/sheet.md)

### Agent notes

- Every block pins now to Sep 29, 2026 14:20 UTC in `REFERENCE_MS`, set from `REFERENCE_DATE` in the audit log, and never reads the wall clock; pass your own now
- Writes only update client state and answer with a sonner `toast`; no block calls a server, so add your API at each write point
- Both page.tsx and each root set `min-h-svh`, and the root caps width at 1320px with its own padding; drop both inside an app shell

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.