Providers
Resend for email · Twilio for SMS
Env vars override the values saved via UI. Files live in backend/ with mode 0600.
{err && {err}}
);
}
function RulesCard({ data, onConfigSave }) {
const r = data?.rules || {};
const [form, setForm] = React.useState(r);
const [busy, setBusy] = React.useState(false);
const [err, setErr] = React.useState(null);
React.useEffect(() => { setForm(r); }, [JSON.stringify(r)]);
function set(k, v) { setForm(f => ({ ...f, [k]: v })); }
function setQH(k, v) { setForm(f => ({ ...f, quietHours: { ...f.quietHours, [k]: v } })); }
async function save() {
setBusy(true); setErr(null);
try { await onConfigSave({ rules: form }); }
catch (e) { setErr(e.message); }
finally { setBusy(false); }
}
const num = (k, label, hint) => (
Rules
how the engine decides when and how much to send
{num('consecutiveFailures', 'consecutive failures', 'debounce flaps')}
{num('cooldownMinutes', 'cooldown (min)', 'between notifications per incident')}
{num('escalateAfterMinutes', 'escalate after (min)', 'email → email+SMS')}
{num('reminderIntervalMinutes', 'reminder interval (min)', 'while still down')}
{num('maxEmailsPerHour', 'max emails / hour', 'global rate cap')}
{num('maxSmsPerDay', 'max SMS / day', 'global rate cap')}
Anomaly detection (statistical, no ML)
Trigger statuses: {(form.triggerStatuses || []).join(', ')}
{err && {err}}
);
}
function RecipientsCard({ data, groups, onAdd, onPatch, onDelete }) {
const [form, setForm] = React.useState({ name:'', email:'', phone:'', channels:['email'], groups:['*'], enabled:true });
const [busy, setBusy] = React.useState(false);
const [err, setErr] = React.useState(null);
const [editing, setEditing] = React.useState(null); // recipient being edited inline
const [confirmDelete, setConfirmDelete] = React.useState(null);
React.useEffect(() => {
if (!confirmDelete) return;
const t = setTimeout(() => setConfirmDelete(null), 4000);
return () => clearTimeout(t);
}, [confirmDelete]);
const recipients = data?.recipients || [];
function toggleList(list, item) {
return list.includes(item) ? list.filter(x => x !== item) : [...list, item];
}
async function submit(e) {
e.preventDefault(); setBusy(true); setErr(null);
try {
await onAdd(form);
setForm({ name:'', email:'', phone:'', channels:['email'], groups:['*'], enabled:true });
} catch (e2) { setErr(e2.message); }
finally { setBusy(false); }
}
return (
Recipients
{recipients.length} configured
{err &&
{err}
}
| name | email | phone | channels | groups |
status | actions |
{recipients.map(r => (
| {r.name} |
{r.email || —} |
{r.phone || —} |
{(r.channels || []).map(c => {c})} |
{(r.groups || ['*']).map(g => {g})} |
{r.enabled ? 'enabled' : 'disabled'}
|
{confirmDelete === r.id ? (
) : (
)}
|
))}
{recipients.length === 0 && (
|
No recipients yet — add one above to start receiving alerts.
|
)}
);
}
function TestSendCard({ onSend, providersStatus }) {
const [channel, setChannel] = React.useState('email');
const [to, setTo] = React.useState('');
const [busy, setBusy] = React.useState(false);
const [result, setResult] = React.useState(null);
const ready = channel === 'email' ? providersStatus?.email?.ready : providersStatus?.sms?.ready;
async function send(e) {
e.preventDefault(); setBusy(true); setResult(null);
try {
const r = await onSend(channel, to.trim());
setResult(r);
} catch (e2) {
setResult({ ok: false, error: e2.message });
} finally { setBusy(false); }
}
return (