(null);
+
+ // Initialize form once the existing or source rule loads.
+ const ready = useMemo(() => {
+ if (form) return true;
+ if (isEdit && existingQuery.data) {
+ setForm(initialForm(existingQuery.data));
+ return true;
+ }
+ if (promoteFrom && sourceRuleQuery.data) {
+ setForm(prefillFromPromotion(sourceRuleQuery.data));
+ return true;
+ }
+ if (!isEdit && !promoteFrom) {
+ setForm(initialForm());
+ return true;
+ }
+ return false;
+ }, [form, isEdit, existingQuery.data, promoteFrom, sourceRuleQuery.data]);
+
+ const create = useCreateAlertRule();
+ const update = useUpdateAlertRule(id ?? '');
+
+ if (!ready || !form) return ;
+
+ const idx = WIZARD_STEPS.indexOf(step);
+ const errors = validateStep(step, form);
+
+ const onNext = () => {
+ if (errors.length > 0) {
+ toast({ title: 'Fix validation errors before continuing', description: errors.join(' · '), variant: 'error' });
+ return;
+ }
+ if (idx < WIZARD_STEPS.length - 1) setStep(WIZARD_STEPS[idx + 1]);
+ };
+ const onBack = () => { if (idx > 0) setStep(WIZARD_STEPS[idx - 1]); };
+
+ const onSave = async () => {
+ try {
+ if (isEdit) {
+ await update.mutateAsync(toRequest(form));
+ toast({ title: 'Rule updated', description: form.name, variant: 'success' });
+ } else {
+ await create.mutateAsync(toRequest(form));
+ toast({ title: 'Rule created', description: form.name, variant: 'success' });
+ }
+ navigate('/alerts/rules');
+ } catch (e) {
+ toast({ title: 'Save failed', description: String(e), variant: 'error' });
+ }
+ };
+
+ const body =
+ step === 'scope' ? :
+ step === 'condition' ? :
+ step === 'trigger' ? :
+ step === 'notify' ? :
+ ;
+
+ return (
+
+
+
{isEdit ? `Edit rule: ${form.name}` : 'New alert rule'}
+ {promoteFrom && (
+
+ Promoting from {promoteFrom} — review and adjust, then save.
+
+ )}
+
+
+
{body}
+
+
+ {idx < WIZARD_STEPS.length - 1 ? (
+
+ ) : (
+
+ )}
+
+
Scope step — TODO Task 20
;
+}
+```
+
+And `promotion-prefill.ts`:
+
+```ts
+// ui/src/pages/Alerts/RuleEditor/promotion-prefill.ts
+import { initialForm, type FormState } from './form-state';
+import type { AlertRuleResponse } from '../../../api/queries/alertRules';
+
+export function prefillFromPromotion(source: AlertRuleResponse): FormState {
+ // Reuse the edit-prefill for now; Task 24 adds scope-adjustment + warnings.
+ const f = initialForm(source);
+ f.name = `${source.name} (copy)`;
+ return f;
+}
+```
+
+- [ ] **Step 6: TypeScript compile + commit**
+
+```bash
+cd ui && npx tsc -p tsconfig.app.json --noEmit
+cd ui && npm test -- form-state
+git add ui/src/pages/Alerts/RuleEditor/
+git commit -m "feat(ui/alerts): rule editor wizard shell + form-state module
+
+Wizard navigates steps (scope/condition/trigger/notify/review) with
+per-step validation. form-state module is the single source of truth for
+the rule form; initialForm/toRequest/validateStep are unit-tested. Step
+components are stubbed and implemented in Tasks 20–24."
+```
+
+---
+
+### Task 20: `ScopeStep`
+
+**Files:**
+- Replace: `ui/src/pages/Alerts/RuleEditor/ScopeStep.tsx`
+
+- [ ] **Step 1: Implement the scope form**
+
+```tsx
+// ui/src/pages/Alerts/RuleEditor/ScopeStep.tsx
+import { FormField, Input, Select } from '@cameleer/design-system';
+import { useCatalog } from '../../../api/queries/catalog';
+import { useAgents } from '../../../api/queries/agents';
+import { useSelectedEnv } from '../../../api/queries/alertMeta';
+import type { FormState } from './form-state';
+
+const SEVERITY_OPTIONS = [
+ { value: 'CRITICAL', label: 'Critical' },
+ { value: 'WARNING', label: 'Warning' },
+ { value: 'INFO', label: 'Info' },
+];
+
+const SCOPE_OPTIONS = [
+ { value: 'env', label: 'Environment-wide' },
+ { value: 'app', label: 'Single app' },
+ { value: 'route', label: 'Single route' },
+ { value: 'agent', label: 'Single agent' },
+];
+
+export function ScopeStep({ form, setForm }: { form: FormState; setForm: (f: FormState) => void }) {
+ const env = useSelectedEnv();
+ const { data: catalog } = useCatalog(env);
+ const { data: agents } = useAgents();
+
+ const apps = (catalog ?? []).map((a: any) => ({ slug: a.slug, name: a.displayName ?? a.slug, routes: a.routes ?? [] }));
+ const selectedApp = apps.find((a) => a.slug === form.appSlug);
+ const routes = selectedApp?.routes ?? [];
+ const appAgents = (agents ?? []).filter((a: any) => a.applicationId === form.appSlug);
+
+ return (
+
+
+ setForm({ ...form, name: e.target.value })} placeholder="Order API error rate" />
+
+
+ setForm({ ...form, description: e.target.value })} />
+
+
+
+
+
+ {form.scopeKind !== 'env' && (
+
+
+ )}
+ {form.scopeKind === 'route' && (
+
+
+ )}
+ {form.scopeKind === 'agent' && (
+
+
+ )}
+
+ );
+}
+```
+
+- [ ] **Step 2: TypeScript compile + commit**
+
+```bash
+cd ui && npx tsc -p tsconfig.app.json --noEmit
+git add ui/src/pages/Alerts/RuleEditor/ScopeStep.tsx
+git commit -m "feat(ui/alerts): ScopeStep (name, severity, env/app/route/agent selectors)"
+```
+
+---
+
+### Task 21: `ConditionStep` + condition-form subcomponents
+
+**Files:**
+- Replace: `ui/src/pages/Alerts/RuleEditor/ConditionStep.tsx`
+- Create: `ui/src/pages/Alerts/RuleEditor/condition-forms/RouteMetricForm.tsx`
+- Create: `ui/src/pages/Alerts/RuleEditor/condition-forms/ExchangeMatchForm.tsx`
+- Create: `ui/src/pages/Alerts/RuleEditor/condition-forms/AgentStateForm.tsx`
+- Create: `ui/src/pages/Alerts/RuleEditor/condition-forms/DeploymentStateForm.tsx`
+- Create: `ui/src/pages/Alerts/RuleEditor/condition-forms/LogPatternForm.tsx`
+- Create: `ui/src/pages/Alerts/RuleEditor/condition-forms/JvmMetricForm.tsx`
+
+- [ ] **Step 1: `ConditionStep` routes to the kind-specific sub-form**
+
+```tsx
+// ui/src/pages/Alerts/RuleEditor/ConditionStep.tsx
+import { FormField, Select } from '@cameleer/design-system';
+import type { FormState } from './form-state';
+import { RouteMetricForm } from './condition-forms/RouteMetricForm';
+import { ExchangeMatchForm } from './condition-forms/ExchangeMatchForm';
+import { AgentStateForm } from './condition-forms/AgentStateForm';
+import { DeploymentStateForm } from './condition-forms/DeploymentStateForm';
+import { LogPatternForm } from './condition-forms/LogPatternForm';
+import { JvmMetricForm } from './condition-forms/JvmMetricForm';
+
+const KIND_OPTIONS = [
+ { value: 'ROUTE_METRIC', label: 'Route metric (error rate, latency, throughput)' },
+ { value: 'EXCHANGE_MATCH', label: 'Exchange match (specific failures)' },
+ { value: 'AGENT_STATE', label: 'Agent state (DEAD / STALE)' },
+ { value: 'DEPLOYMENT_STATE', label: 'Deployment state (FAILED / DEGRADED)' },
+ { value: 'LOG_PATTERN', label: 'Log pattern (count of matching logs)' },
+ { value: 'JVM_METRIC', label: 'JVM metric (heap, GC, inflight)' },
+];
+
+export function ConditionStep({ form, setForm }: { form: FormState; setForm: (f: FormState) => void }) {
+ const onKindChange = (v: string) => {
+ setForm({ ...form, conditionKind: v as FormState['conditionKind'], condition: { kind: v as any } });
+ };
+
+ return (
+
+
+
+
+ {form.conditionKind === 'ROUTE_METRIC' &&
}
+ {form.conditionKind === 'EXCHANGE_MATCH' &&
}
+ {form.conditionKind === 'AGENT_STATE' &&
}
+ {form.conditionKind === 'DEPLOYMENT_STATE' &&
}
+ {form.conditionKind === 'LOG_PATTERN' &&
}
+ {form.conditionKind === 'JVM_METRIC' &&
}
+
+ {OPTIONS.map((s) => (
+
+ ))}
+
+
+ );
+}
+```
+
+```tsx
+// ui/src/pages/Alerts/RuleEditor/condition-forms/LogPatternForm.tsx
+import { FormField, Input, Select } from '@cameleer/design-system';
+import type { FormState } from '../form-state';
+
+export function LogPatternForm({ form, setForm }: { form: FormState; setForm: (f: FormState) => void }) {
+ const c: any = form.condition;
+ const patch = (p: any) => setForm({ ...form, condition: { ...form.condition, ...p } });
+ return (
+ <>
+
+
+
+ patch({ logger: e.target.value || undefined })} />
+
+
+ patch({ pattern: e.target.value })} />
+
+
+ patch({ threshold: Number(e.target.value) })} />
+
+
+ patch({ windowSeconds: Number(e.target.value) })} />
+
+
+ );
+}
+```
+
+```tsx
+// ui/src/pages/Alerts/RuleEditor/condition-forms/JvmMetricForm.tsx
+import { FormField, Input, Select } from '@cameleer/design-system';
+import type { FormState } from '../form-state';
+
+export function JvmMetricForm({ form, setForm }: { form: FormState; setForm: (f: FormState) => void }) {
+ const c: any = form.condition;
+ const patch = (p: any) => setForm({ ...form, condition: { ...form.condition, ...p } });
+ return (
+ <>
+
+ patch({ metric: e.target.value })} placeholder="heap_used_percent" />
+
+
+
+
+
+
+ patch({ threshold: Number(e.target.value) })} />
+
+
+ patch({ windowSeconds: Number(e.target.value) })} />
+
+
+ );
+}
+```
+
+- [ ] **Step 5: TypeScript compile + commit**
+
+```bash
+cd ui && npx tsc -p tsconfig.app.json --noEmit
+git add ui/src/pages/Alerts/RuleEditor/ConditionStep.tsx ui/src/pages/Alerts/RuleEditor/condition-forms/
+git commit -m "feat(ui/alerts): ConditionStep with 6 kind-specific forms
+
+Each kind renders its own payload shape. Kind change resets condition to
+{kind} so stale fields from a previous kind don't leak into save payload."
+```
+
+---
+
+### Task 22: `TriggerStep`
+
+**Files:**
+- Replace: `ui/src/pages/Alerts/RuleEditor/TriggerStep.tsx`
+
+- [ ] **Step 1: Write the step**
+
+```tsx
+// ui/src/pages/Alerts/RuleEditor/TriggerStep.tsx
+import { useState } from 'react';
+import { Button, FormField, Input, useToast } from '@cameleer/design-system';
+import { useTestEvaluate } from '../../../api/queries/alertRules';
+import type { FormState } from './form-state';
+import { toRequest } from './form-state';
+
+export function TriggerStep({ form, setForm, ruleId }: { form: FormState; setForm: (f: FormState) => void; ruleId?: string }) {
+ const testEvaluate = useTestEvaluate();
+ const { toast } = useToast();
+ const [lastResult, setLastResult] = useState(null);
+
+ const onTest = async () => {
+ if (!ruleId) {
+ toast({ title: 'Save rule first to run test evaluate', variant: 'error' });
+ return;
+ }
+ try {
+ const result = await testEvaluate.mutateAsync({ id: ruleId, req: { condition: (toRequest(form).condition as any) } });
+ setLastResult(JSON.stringify(result, null, 2));
+ } catch (e) {
+ toast({ title: 'Test-evaluate failed', description: String(e), variant: 'error' });
+ }
+ };
+
+ return (
+
+ );
+}
+```
+
+- [ ] **Step 2: TypeScript compile + commit**
+
+```bash
+cd ui && npx tsc -p tsconfig.app.json --noEmit
+git add ui/src/pages/Alerts/RuleEditor/TriggerStep.tsx
+git commit -m "feat(ui/alerts): TriggerStep (evaluation interval, for-duration, re-notify, test-evaluate)"
+```
+
+---
+
+### Task 23: `NotifyStep` (MustacheEditor + targets + webhooks)
+
+**Files:**
+- Replace: `ui/src/pages/Alerts/RuleEditor/NotifyStep.tsx`
+
+- [ ] **Step 1: Implement the step**
+
+```tsx
+// ui/src/pages/Alerts/RuleEditor/NotifyStep.tsx
+import { useState } from 'react';
+import { Button, FormField, Select, Input, useToast, Badge } from '@cameleer/design-system';
+import { MustacheEditor } from '../../../components/MustacheEditor/MustacheEditor';
+import { useUsers, useGroups, useRoles } from '../../../api/queries/admin/rbac';
+import { useOutboundConnections } from '../../../api/queries/admin/outboundConnections';
+import { useSelectedEnv } from '../../../api/queries/alertMeta';
+import { useRenderPreview } from '../../../api/queries/alertRules';
+import { toRequest, type FormState } from './form-state';
+
+export function NotifyStep({ form, setForm, ruleId }: { form: FormState; setForm: (f: FormState) => void; ruleId?: string }) {
+ const env = useSelectedEnv();
+ const { data: users } = useUsers(true);
+ const { data: groups } = useGroups(true);
+ const { data: roles } = useRoles(true);
+ const { data: connections } = useOutboundConnections();
+ const preview = useRenderPreview();
+ const { toast } = useToast();
+ const [lastPreview, setLastPreview] = useState(null);
+
+ // Filter connections to those that allow the current env.
+ const availableConnections = (connections ?? []).filter(
+ (c) => c.allowedEnvironmentIds.length === 0 || c.allowedEnvironmentIds.includes(env!),
+ );
+
+ const onPreview = async () => {
+ if (!ruleId) {
+ toast({ title: 'Save rule first to preview', variant: 'error' });
+ return;
+ }
+ try {
+ const res = await preview.mutateAsync({
+ id: ruleId,
+ req: {
+ titleTemplate: form.notificationTitleTmpl,
+ messageTemplate: form.notificationMessageTmpl,
+ },
+ });
+ setLastPreview(`TITLE:\n${(res as any).renderedTitle}\n\nMESSAGE:\n${(res as any).renderedMessage}`);
+ } catch (e) {
+ toast({ title: 'Preview failed', description: String(e), variant: 'error' });
+ }
+ };
+
+ const addTarget = (targetKind: 'USER' | 'GROUP' | 'ROLE', targetId: string) => {
+ if (!targetId) return;
+ if (form.targets.some((t) => t.targetKind === targetKind && t.targetId === targetId)) return;
+ setForm({ ...form, targets: [...form.targets, { targetKind, targetId }] });
+ };
+ const removeTarget = (idx: number) => {
+ setForm({ ...form, targets: form.targets.filter((_, i) => i !== idx) });
+ };
+
+ const addWebhook = (outboundConnectionId: string) => {
+ setForm({
+ ...form,
+ webhooks: [...form.webhooks, { outboundConnectionId, bodyOverride: '', headerOverrides: [] }],
+ });
+ };
+ const removeWebhook = (idx: number) => {
+ setForm({ ...form, webhooks: form.webhooks.filter((_, i) => i !== idx) });
+ };
+ const updateWebhook = (idx: number, patch: Partial) => {
+ setForm({ ...form, webhooks: form.webhooks.map((w, i) => i === idx ? { ...w, ...patch } : w) });
+ };
+
+ return (
+
+
setForm({ ...form, notificationTitleTmpl: v })}
+ kind={form.conditionKind}
+ singleLine
+ />
+ setForm({ ...form, notificationMessageTmpl: v })}
+ kind={form.conditionKind}
+ minHeight={120}
+ />
+
+
+ {lastPreview && (
+
+ {lastPreview}
+
+ )}
+
+ {form.targets.map((t, i) => (
+ removeTarget(i)}
+ />
+ ))}
+
+
+
+
+
+
+
+
+
Name: {form.name}
+
Severity: {form.severity}
+
Scope: {form.scopeKind}
+ {form.scopeKind !== 'env' && ` (app=${form.appSlug}${form.routeId ? `, route=${form.routeId}` : ''}${form.agentId ? `, agent=${form.agentId}` : ''})`}
+
+
Condition kind: {form.conditionKind}
+
Intervals: eval {form.evaluationIntervalSeconds}s · for {form.forDurationSeconds}s · re-notify {form.reNotifyMinutes}m
+
Targets: {form.targets.length}
+
Webhooks: {form.webhooks.length}
+ {setForm && (
+
+ )}
+
+ Raw request JSON
+
+ {JSON.stringify(req, null, 2)}
+
+
+
+
Review before saving:
+
{warnings.map((w) => {w.field}: {w.message}
+
Failed to load silences: {String(error)}
;
+
+ const onCreate = async () => {
+ const now = new Date();
+ const endsAt = new Date(now.getTime() + hours * 3600_000);
+ const matcher: Record = {};
+ if (matcherRuleId) matcher.ruleId = matcherRuleId;
+ if (matcherAppSlug) matcher.appSlug = matcherAppSlug;
+ if (Object.keys(matcher).length === 0) {
+ toast({ title: 'Silence needs at least one matcher field', variant: 'error' });
+ return;
+ }
+ try {
+ await create.mutateAsync({
+ matcher,
+ reason: reason || undefined,
+ startsAt: now.toISOString(),
+ endsAt: endsAt.toISOString(),
+ });
+ setReason(''); setMatcherRuleId(''); setMatcherAppSlug(''); setHours(1);
+ toast({ title: 'Silence created', variant: 'success' });
+ } catch (e) {
+ toast({ title: 'Create failed', description: String(e), variant: 'error' });
+ }
+ };
+
+ const onRemove = async (s: AlertSilenceResponse) => {
+ if (!confirm(`End silence early?`)) return;
+ try {
+ await remove.mutateAsync(s.id);
+ toast({ title: 'Silence removed', variant: 'success' });
+ } catch (e) {
+ toast({ title: 'Remove failed', description: String(e), variant: 'error' });
+ }
+ };
+
+ const rows = data ?? [];
+
+ return (
+
+
Alert silences
+
+
+ {rows.length === 0 ? (
+
No active or scheduled silences.
+ ) : (
+
+
+
+ | Matcher |
+ Reason |
+ Starts |
+ Ends |
+ |
+
+
+
+ {rows.map((s) => (
+
+ {JSON.stringify(s.matcher)} |
+ {s.reason ?? '—'} |
+ {s.startsAt} |
+ {s.endsAt} |
+ |
+
+ ))}
+
+
+ )}
+
+