Grayscale with alerts

QuietWall.tsxNeutral unless a panel's status says otherwise. Warn is muted, critical is saturated and thicker, and both carry a border and the status glyph.Copy

import { cn } from "@/lib/utils";
import { STATUS_META, type Status } from "../semantic-status-color/status";

/**
 * A monitoring wall that is grey until something is wrong.
 *
 * Chrome, labels and every healthy series are neutral. Colour is spent only
 * on a panel whose status is not nominal, and saturation carries severity:
 * warn is muted, critical is full strength and thicker. A coloured panel also
 * gets a border and the status glyph, so the state survives a projector and
 * a colourblind viewer, and colour is never the only thing saying it.
 *
 * Which status a panel holds is the caller's decision. The thresholds live
 * with whoever owns the rule, not in the drawing.
 */
export type Panel = { key: string; values: number[]; status: Status };

type Props = {
  panels: Panel[];
  unit: string;
  columns?: number;
  onOpen?: (panel: Panel) => void;
};

const STROKE: Record<Status, string> = {
  nominal: "stroke-muted-foreground",
  warn: "stroke-status-warn opacity-60",
  critical: "stroke-status-critical",
  unknown: "stroke-muted-foreground opacity-40",
};

const FRAME: Record<Status, string> = {
  nominal: "border-border",
  warn: "border-status-warn/50",
  critical: "border-status-critical",
  unknown: "border-dashed border-border",
};

const W = 84, H = 40;

export function QuietWall({ panels, unit, columns = 3, onOpen }: Props) {
  // One scale for the wall, so a climb is a climb.
  const all = panels.flatMap((p) => p.values);
  const lo = Math.min(...all), hi = Math.max(...all), span = hi - lo || 1;
  const n = panels[0]?.values.length ?? 1;
  const x = (i: number) => 6 + (i / (n - 1)) * (W - 12);
  const y = (v: number) => H - 4 - ((v - lo) / span) * (H - 8);

  return (
    <div className="grid gap-2" style={{ gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }}>
      {panels.map((panel) => {
        const { label, Icon } = STATUS_META[panel.status];
        const loud = panel.status !== "nominal";
        const last = panel.values[panel.values.length - 1];
        const d = panel.values.map((v, i) => `${i ? "L" : "M"}${x(i).toFixed(1)} ${y(v).toFixed(1)}`).join(" ");
        return (
          <button
            key={panel.key}
            type="button"
            onClick={() => onOpen?.(panel)}
            aria-label={`${panel.key}, ${label}, ${last} ${unit}`}
            className={cn("relative rounded-[2px] border bg-muted p-1.5 text-left", FRAME[panel.status])}
          >
            <span className="block text-[9px] leading-none text-muted-foreground">{panel.key}</span>
            {loud && (
              <Icon
                className={cn("absolute right-1 top-1 size-3", panel.status === "critical" ? "text-status-critical" : "text-status-warn opacity-60")}
                aria-hidden="true"
              />
            )}
            <svg viewBox={`0 0 ${W} ${H}`} className="mt-1 w-full" aria-hidden="true">
              <path
                d={d}
                fill="none"
                strokeWidth={panel.status === "critical" ? 2 : 1.5}
                strokeLinejoin="round"
                className={STROKE[panel.status]}
              />
            </svg>
          </button>
        );
      })}
    </div>
  );
}

demo.tsxHow it is called: six services, four nominal, one warn, one critical. Statuses come from the alert rules.Copy

import { QuietWall, type Panel } from "./QuietWall";

/**
 * Six services, errors per minute. Four are healthy and grey. payments has
 * crossed the warn threshold and is coloured but muted. checkout is critical
 * and is the only saturated thing on the screen. The statuses arrive from the
 * alert rules; the wall only draws them.
 */
const PANELS: Panel[] = [
  { key: "edge", values: [16, 22, 14, 28, 22], status: "nominal" },
  { key: "api", values: [20, 26, 18, 30, 24], status: "nominal" },
  { key: "auth", values: [22, 16, 24, 18, 26], status: "nominal" },
  { key: "queue", values: [16, 24, 18, 26, 20], status: "nominal" },
  { key: "payments", values: [18, 22, 28, 34, 38], status: "warn" },
  { key: "checkout", values: [14, 18, 32, 44, 48], status: "critical" },
];

export default function Demo() {
  return (
    <div className="w-[320px] rounded-lg border bg-card p-4">
      <div className="mb-3 flex gap-2 text-[10px] text-muted-foreground">
        <span className="rounded-[2px] bg-muted px-2 py-0.5 text-foreground">prod</span>
        <span className="rounded-[2px] bg-muted px-2 py-0.5">eu-west</span>
        <span className="rounded-[2px] bg-muted px-2 py-0.5">15m</span>
      </div>
      <QuietWall panels={PANELS} unit="errors/min" onOpen={(p) => { location.hash = `#service-${p.key}`; }} />
    </div>
  );
}