Block · engineering

Incident MTTR

Recent incidents as severity-colored duration bars with MTTR, the trend vs last quarter, and the longest outage.

State

Size

Mode

Acme · Incident MTTR

2.3h

MTTR · 10 incidents this quarter

SEV1
SEV2
SEV3

MTTR improved to 2.3h (-50% QoQ); the longest was INC-267 at 7.2h.

Acme · Incident MTTR — time to restore per incident
Incident	Severity	Hours
INC-267	SEV1	7.2h
INC-251	SEV3	1.5h
INC-242	SEV2	2.8h
INC-237	SEV3	0.9h
INC-231	SEV2	2.1h
INC-224	SEV3	1.2h
INC-219	SEV3	0.8h
INC-212	SEV2	2.5h
INC-205	SEV3	1.0h
INC-198	SEV2	3.2h

Acme ops analytics · updated every 2 hours

Demo data is illustrative. Replace with your own typed data prop.

How it computes

Mean time to restore = arithmetic mean of incident durations, with per-incident severity bars.

MTTR = mean(incident.hours);  QoQ = (MTTR − priorMttr) / priorMttr;  worst = argmax(hours)

Assumptions

Prior MTTR is supplied externally for the QoQ delta.
Severity is a label (SEV1–3), not a numeric weight.
Every incident counts equally toward the mean.

Honest about

MTTR is an unweighted mean — one long SEV1 pulls it up as much as several short SEV3s would.
The QoQ delta is divide-by-zero guarded.
The "worst" incident is ranked by absolute hours, not by severity or business impact.

Use it with your data

Data contract

Passed via the data prop — an object: validated at runtime, so a bad shape degrades to the error state rather than crashing.

Field	Type	Required
priorMttr	number	yes
incidents	array	yes

Static props

import { EngIncidentTimeline } from "@/components/blocks/eng-incident-timeline/eng-incident-timeline";

<EngIncidentTimeline data={myData} />

Client fetch (SWR)

const { data, isLoading, error } = useSWR("/api/metric", fetcher);
// route isLoading/error through <ChartStates>, then:
<EngIncidentTimeline data={data} />

Server component (RSC)

const data = await fetch(url, {
  next: { revalidate: 3600 },
}).then((r) => r.json());

<EngIncidentTimeline data={data} />

Map arbitrary rows

import { mapRows } from "@/lib/sextant/column-map";

const out = mapRows(rows, { /* contractKey: "yourColumn" */ }, dataSchema);
if (out.ok) <EngIncidentTimeline data={out.data} />;

Make it yours

Every customization below is an optional prop — omit them all and you get the defaults shown above. Recolor, reformat, restyle, or drop the card chrome without forking the component.

Recolor or rename a series (sev1, sev2, sev3)

<EngIncidentTimeline
  series={{ sev1: { color: "var(--chart-3)", label: "…" } }}
/>

Format numbers (currency / locale)

const eur = new Intl.NumberFormat("de-DE", {
  style: "currency",
  currency: "EUR",
  notation: "compact",
});

<EngIncidentTimeline valueFormatter={(n) => eur.format(n)} />

Replace or hide the narrative

<EngIncidentTimeline narrative="Your own one-liner." />

// …or hide it entirely:
<EngIncidentTimeline narrative={false} />

Restyle any region

<EngIncidentTimeline
  className="max-w-xl"
  classNames={{ body: "bg-muted/20" }}
/>

Drop the card chrome (headless plot)

import { EngIncidentTimelinePlot } from "@/components/blocks/eng-incident-timeline/eng-incident-timeline";

// Just the chart body — bring your own card/layout:
<EngIncidentTimelinePlot data={data} config={config} />