Alert rule attached to panel

The chart shows the line to watch and the rule lives on it. Drawing the threshold on the same axes as the data is the only way a reader can see how close the current value is to firing.

npx shadcn@latest add card input select
npm i recharts

Tokens this needs: --card, --card-foreground, --muted-foreground, --border, --status-critical, --status-warn, --chart-1
The status, chart, scale, state and direction names are an extension,
not a rename. shadcn has --destructive and five --chart-* and nothing
else in this territory.

────────────────────────────────────────────────────────────────────────
// AlertRule.tsx
────────────────────────────────────────────────────────────────────────

import { Line, LineChart, ReferenceLine, XAxis, YAxis } from "recharts";
import { Card } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";

/**
 * The rule is created from the panel and carries the panel's query, so the
 * line on the chart and the condition that pages someone are one object.
 * Nothing here lets the two be typed separately.
 */
export type Panel = {
  title: string;
  /** The metric as the rule will name it: "error rate", "p95 latency". */
  metric: string;
  unit: string;
  series: number[];
};

/** Grafana's four. A rule that cannot say what silence means is silent during
 *  the outage it was written for, so this is a required choice, not a default. */
export type NoData = "alerting" | "normal" | "no-data" | "keep-last";
export const NO_DATA_LABEL: Record<NoData, string> = {
  alerting: "alerting, not normal",
  normal: "normal",
  "no-data": "no data",
  "keep-last": "keep last state",
};

export type Rule = {
  threshold: number;
  /** Minutes the condition must hold. A single spike is not a page. */
  forMinutes: number;
  noData: NoData;
  routeTo: string;
};

/** "error rate > 1%": computed from the panel, never typed into the rule. */
export const condition = (panel: Panel, rule: Rule) => `${panel.metric} > ${rule.threshold}${panel.unit}`;

const CRITICAL = "hsl(var(--status-critical))";

export function AlertRule({ panel, rule, onChange, width = 280, height = 150 }: {
  panel: Panel;
  rule: Rule;
  onChange: (rule: Rule) => void;
  width?: number;
  height?: number;
}) {
  const data = panel.series.map((value, i) => ({ i, value }));
  const top = Math.max(rule.threshold, ...panel.series) * 1.15;
  const field = "h-7 w-24 text-right text-xs tabular-nums";
  return (
    <div className="grid gap-5 sm:grid-cols-[minmax(0,1fr)_minmax(0,1.15fr)]">
      <Card className="p-4">
        <p className="border-b pb-2 text-xs uppercase tracking-wide text-muted-foreground">{panel.title}</p>
        <div className="mt-3 overflow-x-auto">
          <LineChart width={width} height={height} data={data} margin={{ top: 8, right: 8, bottom: 0, left: 8 }}>
            <XAxis interval={0} dataKey="i" hide />
            <YAxis domain={[0, top]} hide />
            {/* The threshold on the data's own axes. This is the whole reason
                the rule lives on the panel: the reader can see how close it is. */}
            <ReferenceLine y={rule.threshold} stroke={CRITICAL} strokeWidth={2} strokeDasharray="5 4"
              label={{ value: `${rule.threshold}${panel.unit}`, position: "insideTopRight", fill: CRITICAL, fontSize: 10 }} />
            <Line type="linear" dataKey="value" stroke="hsl(var(--chart-1))" strokeWidth={2} dot={false} isAnimationActive={false} />
          </LineChart>
        </div>
      </Card>

      <Card className="p-4">
        <p className="border-b pb-2 text-xs uppercase tracking-wide text-muted-foreground">New rule</p>
        <div className="mt-3 grid grid-cols-[84px_1fr] items-center gap-x-3 gap-y-2.5 text-xs">
          <span className="text-muted-foreground">condition</span>
          <span className="flex items-center justify-end gap-2 font-mono text-card-foreground">
            {condition(panel, rule)}
            <Input type="number" step="0.1" value={rule.threshold} aria-label={`threshold in ${panel.unit}`} className={field}
              onChange={(e) => onChange({ ...rule, threshold: Number(e.target.value) })} />
          </span>

          <span className="text-muted-foreground">for</span>
          <span className="flex items-center justify-end gap-2 tabular-nums text-card-foreground">
            {rule.forMinutes} minutes
            <Input type="number" min={1} value={rule.forMinutes} aria-label="minutes the condition must hold" className={field}
              onChange={(e) => onChange({ ...rule, forMinutes: Number(e.target.value) })} />
          </span>

          <span className="text-muted-foreground">on no data</span>
          <span className="flex justify-end">
            <Select value={rule.noData} onValueChange={(v) => onChange({ ...rule, noData: v as NoData })}>
              <SelectTrigger aria-label="what no data means"
                className={`h-7 w-auto gap-2 text-xs ${rule.noData === "alerting" ? "text-status-warn" : "text-card-foreground"}`}>
                <SelectValue>{NO_DATA_LABEL[rule.noData]}</SelectValue>
              </SelectTrigger>
              <SelectContent>
                {(Object.keys(NO_DATA_LABEL) as NoData[]).map((k) => (
                  <SelectItem key={k} value={k} className="text-xs">{NO_DATA_LABEL[k]}</SelectItem>
                ))}
              </SelectContent>
            </Select>
          </span>

          <span className="text-muted-foreground">routes to</span>
          <span className="text-right text-card-foreground">{rule.routeTo}</span>
        </div>
      </Card>
    </div>
  );
}

────────────────────────────────────────────────────────────────────────
// demo.tsx
────────────────────────────────────────────────────────────────────────

import { useState } from "react";
import { AlertRule, type Rule } from "./AlertRule";

/**
 * The checkout error rate over the last eight samples, crossing 1% twice.
 * Changing the threshold moves the line on the chart, because the rule and
 * the panel are the same object.
 */
const PANEL = {
  title: "Checkout error rate",
  metric: "error rate",
  unit: "%",
  series: [0.24, 0.33, 0.27, 0.48, 1.12, 1.21, 0.61, 0.7],
};

export default function Demo() {
  const [rule, setRule] = useState<Rule>({
    threshold: 1,
    forMinutes: 5,
    noData: "alerting",
    routeTo: "payments on-call",
  });
  return <AlertRule panel={PANEL} rule={rule} onChange={setRule} />;
}