Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/openstatusHQ/openstatus. 🫖 Status page with uptime monitoring & API monitoring as code 🫖 openstatus.dev
bun drizzle-orm monitoring monitoring-as-code nextjs observability on-call open-source shadcn-ui status-page statuspage synthetic-monitoring tinybird turso uptime uptime-checker uptime-monitor
Something went wrong. Try again.
4.1 kB · 156 lines
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157"use client";
import { zodResolver } from "@hookform/resolvers/zod";import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage,} from "@openstatus/ui/components/ui/form";import { Form } from "@openstatus/ui/components/ui/form";import { Input } from "@openstatus/ui/components/ui/input";import { cn } from "@openstatus/ui/lib/utils";import { useTransition } from "react";import { useForm } from "react-hook-form";import { toast } from "sonner";import { z } from "zod";
import { CheckboxTree } from "@/components/ui/checkbox-tree";
const schema = z.object({ name: z.string(), provider: z.enum([ "slack", "ms-teams", "discord", "email", "sms", "webhook", "opsgenie", "pagerduty", "ntfy", "telegram", "whatsapp", "google-chat", "grafana-oncall", ]), data: z.record(z.string(), z.any()).or(z.string()), monitors: z.array(z.number()),});
export type FormValues = z.infer<typeof schema>;
export function NotifierForm({ defaultValues, className, onSubmit, monitors, ...props}: Omit<React.ComponentProps<"form">, "onSubmit"> & { defaultValues?: FormValues; onSubmit?: (values: FormValues) => Promise<void> | void; monitors: { id: number; name: string }[];}) { const form = useForm<FormValues>({ resolver: zodResolver(schema), defaultValues: defaultValues ?? { name: "", data: { webhook: "", }, monitors: [], }, }); const [isPending, startTransition] = useTransition();
function submitAction(values: FormValues) { if (isPending) return;
startTransition(async () => { try { const promise = new Promise((resolve) => setTimeout(resolve, 1000)); toast.promise(promise, { loading: "Saving...", success: () => JSON.stringify(values), error: "Failed to save", }); await promise; onSubmit?.(values); } catch (error) { console.error(error); } }); }
return ( <Form {...form}> <form id="notifier-form" className={cn("grid gap-4", className)} onSubmit={form.handleSubmit(submitAction)} {...props} > <FormField control={form.control} name="name" render={({ field }) => ( <FormItem> <FormLabel>Name</FormLabel> <FormControl> <Input placeholder="My Notifier" {...field} /> </FormControl> <FormMessage /> <FormDescription> Enter a descriptive name for your notifier. </FormDescription> </FormItem> )} /> <FormField control={form.control} name="data.webhook" render={({ field }) => ( <FormItem> <FormLabel>Webhook URL</FormLabel> <FormControl> <Input placeholder="https://example.com/webhook" {...field} /> </FormControl> <FormMessage /> </FormItem> )} /> <FormField control={form.control} name="monitors" render={({ field }) => ( <FormItem> <FormLabel>Monitors</FormLabel> <FormDescription> Select the monitors you want to notify. </FormDescription> <FormControl> <CheckboxTree items={[ { id: -1, label: "Select all", children: monitors.map((m) => ({ id: m.id, label: m.name, })), }, ]} value={field.value ?? []} onValueChange={field.onChange} /> </FormControl> <FormMessage /> </FormItem> )} /> </form> </Form> );}