add node graph and editor

src/app/[orgId]/settings/access/users/create/page.tsx

@@ -340,15 +340,16 @@ export default function Page() {
 
         const roleIds = values.roles.map((r) => parseInt(r.id, 10));
 
-        const res = await api.post<AxiosResponse<InviteUserResponse>>(
-            `/org/${orgId}/create-invite`,
-            {
-                email: values.email,
-                roleIds,
-                validHours: parseInt(values.validForHours),
-                sendEmail
-            }
-        )
+        const res = await api
+            .post<AxiosResponse<InviteUserResponse>>(
+                `/org/${orgId}/create-invite`,
+                {
+                    email: values.email,
+                    roleIds,
+                    validHours: parseInt(values.validForHours),
+                    sendEmail
+                }
+            )
             .catch((e) => {
                 if (e.response?.status === 409) {
                     toast({

src/app/[orgId]/settings/alerting/[ruleId]/page.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import AlertRuleGraphEditor from "@app/components/alert-rule-editor/AlertRuleGraphEditor";
+import { ruleToFormValues } from "@app/lib/alertRuleForm";
+import type { AlertRule } from "@app/lib/alertRulesLocalStorage";
+import { getRule } from "@app/lib/alertRulesLocalStorage";
+import { useParams, useRouter } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { useEffect, useState } from "react";
+
+export default function EditAlertRulePage() {
+    const t = useTranslations();
+    const params = useParams();
+    const router = useRouter();
+    const orgId = params.orgId as string;
+    const ruleId = params.ruleId as string;
+    const [rule, setRule] = useState<AlertRule | null | undefined>(undefined);
+
+    useEffect(() => {
+        const r = getRule(orgId, ruleId);
+        setRule(r ?? null);
+    }, [orgId, ruleId]);
+
+    useEffect(() => {
+        if (rule === null) {
+            router.replace(`/${orgId}/settings/alerting`);
+        }
+    }, [rule, orgId, router]);
+
+    if (rule === undefined) {
+        return (
+            <div className="min-h-[12rem] flex items-center justify-center text-muted-foreground text-sm">
+                {t("loading")}
+            </div>
+        );
+    }
+
+    if (rule === null) {
+        return null;
+    }
+
+    return (
+        <AlertRuleGraphEditor
+            key={rule.id}
+            orgId={orgId}
+            ruleId={rule.id}
+            createdAt={rule.createdAt}
+            initialValues={ruleToFormValues(rule)}
+            isNew={false}
+        />
+    );
+}

src/app/[orgId]/settings/alerting/create/page.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import AlertRuleGraphEditor from "@app/components/alert-rule-editor/AlertRuleGraphEditor";
+import { defaultFormValues } from "@app/lib/alertRuleForm";
+import { isoNow, newRuleId } from "@app/lib/alertRulesLocalStorage";
+import { useParams } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { useEffect, useState } from "react";
+
+export default function NewAlertRulePage() {
+    const t = useTranslations();
+    const params = useParams();
+    const orgId = params.orgId as string;
+    const [meta, setMeta] = useState<{ id: string; createdAt: string } | null>(
+        null
+    );
+
+    useEffect(() => {
+        setMeta({ id: newRuleId(), createdAt: isoNow() });
+    }, []);
+
+    if (!meta) {
+        return (
+            <div className="min-h-[12rem] flex items-center justify-center text-muted-foreground text-sm">
+                {t("loading")}
+            </div>
+        );
+    }
+
+    return (
+        <AlertRuleGraphEditor
+            key={meta.id}
+            orgId={orgId}
+            ruleId={meta.id}
+            createdAt={meta.createdAt}
+            initialValues={defaultFormValues()}
+            isNew
+        />
+    );
+}