Alert rules section: a severity filter with counts, each rule's condition and channels, and a switch that saves at once, shows its progress and puts itself back with a message when the save fails. From the Ops Dashboards Pack → ai.osagi.finance/kits/ops-dashboards
"use client";
import { useCallback, useRef, useState } from "react";
import { type AlertRule, AlertRules } from "@/components/ui/alert-rules";
const settings = {
canEdit: true,
failEveryThird: true,
latencyMs: 700,
};
const RULES: AlertRule[] = [
{
channels: ["On-call pager", "#incidents"],
condition: "http_5xx_rate > 2% for 5m",
enabled: true,
id: "error-rate",
name: "Error rate spike",
severity: "critical",
},
{
channels: ["On-call pager"],
condition: "health_check == down for 2m",
enabled: true,
id: "service-down",
name: "Service down",
severity: "critical",
},
{
channels: ["#ops"],
condition: "disk_used > 90% for 10m",
enabled: true,
id: "disk-space",
name: "Disk almost full",
severity: "warning",
},
{
channels: ["#ops", "ops@acme.dev"],
condition: "p95_latency > 800ms for 15m",
enabled: true,
id: "latency",
name: "Slow responses",
severity: "warning",
},
{
channels: ["#databases"],
condition: "replica_lag > 30s for 5m",
enabled: false,
id: "replica-lag",
name: "Replica lag",
severity: "warning",
},
{
channels: ["ops@acme.dev"],
condition: "tls_cert_expires_in < 14d",
enabled: true,
id: "certificate",
name: "Certificate expiring",
severity: "info",
},
{
channels: ["#deploys"],
condition: "deploy.finished",
enabled: true,
id: "deploys",
name: "Deploy finished",
severity: "info",
},
];
/** Alert rules of a small platform: switch them on and off; every third save fails on purpose. */
export default function Demo(props: Partial<typeof settings>) {
const s = { ...settings, ...props };
const [rules, setRules] = useState(RULES);
const saves = useRef(0);
const toggle = useCallback(
async (rule: AlertRule, enabled: boolean) => {
await new Promise((resolve) => setTimeout(resolve, s.latencyMs));
saves.current += 1;
if (s.failEveryThird && saves.current % 3 === 0) {
throw new Error(`${rule.name} was not saved: the server timed out.`);
}
setRules((current) =>
current.map((r) => (r.id === rule.id ? { ...r, enabled } : r))
);
},
[s.failEveryThird, s.latencyMs]
);
return (
<div className="flex min-h-[640px] w-full items-start justify-center bg-background p-4 sm:p-8">
<AlertRules
className="max-w-3xl"
onToggle={s.canEdit ? toggle : undefined}
rules={rules}
/>
</div>
);
}