import { Head, router, usePage } from '@inertiajs/react'; import { useState } from 'react'; import { Bell, Plus, Trash2, Play, Power } from 'lucide-react'; type Metric = { key: string; name: string; unit: string }; type Rule = { id: number; name: string; metric_key: string; operator: string; threshold: number; window: string; notify_email: boolean; is_active: boolean; last_triggered_at: string | null; }; const OP_LABEL: Record = { gt: 'is above', gte: 'is at or above', lt: 'is below', lte: 'is at or below', eq: 'equals', pct_change_gt: 'increases more than %', pct_change_lt: 'decreases more than %', }; export default function Alerts() { const props = usePage().props as unknown as { rules: Rule[]; metrics: Metric[]; operators: string[] }; const { rules, metrics, operators } = props; const [form, setForm] = useState({ name: '', metric_key: '', operator: 'gt', threshold: '', notify_email: false }); const create = () => { if (!form.name || !form.metric_key || form.threshold === '') return; router.post('/alerts', { ...form, threshold: parseFloat(form.threshold) }, { preserveScroll: true, onSuccess: () => setForm({ name: '', metric_key: '', operator: 'gt', threshold: '', notify_email: false }), }); }; return ( <>

Alerts

New alert

setForm({ ...form, name: e.target.value })} placeholder="Alert name" className="rounded-md border border-border bg-background px-3 py-2 text-sm sm:col-span-2" />
setForm({ ...form, threshold: e.target.value })} type="number" placeholder="value" className="w-24 rounded-md border border-border bg-background px-3 py-2 text-sm" />
{rules.map((r) => (
{r.name} {!r.is_active && paused} {r.last_triggered_at && triggered {r.last_triggered_at}}

{r.metric_key} {OP_LABEL[r.operator] ?? r.operator} {r.threshold} {r.notify_email && ' · emails you'}

))} {rules.length === 0 && (

No alerts yet. Create one above to get notified when a metric crosses a threshold.

)}
); }