Alert Rules

Component

About

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

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Alert Rules to your project and fits it to your theme.

Code

How Alert Rules is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"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>
  );
}