openstatus.dev
Openstatus
www.openstatus.dev
1"use client";
2
3import type { UseFormReturn } from "react-hook-form";
4
5import type { InsertMonitor } from "@openstatus/db/src/schema";
6import {
7 FormControl,
8 FormDescription,
9 FormField,
10 FormItem,
11 FormLabel,
12 FormMessage,
13 Select,
14 SelectContent,
15 SelectItem,
16 SelectTrigger,
17 SelectValue,
18} from "@openstatus/ui";
19
20import { formatDuration } from "@/lib/utils";
21import { SectionHeader } from "../shared/section-header";
22
23interface Props {
24 form: UseFormReturn<InsertMonitor>;
25}
26
27// FIXME: replace with enum
28// TODO: can be also replaced by a custom number input with max value (+ validation)
29const limits = [100, 250, 500, 1_000, 2_000, 5_000, 10_000, 20_000, 40_000];
30
31export function SectionLimits({ form }: Props) {
32 return (
33 <div className="grid w-full gap-4">
34 <SectionHeader
35 title="Response Time Limits"
36 description="Check when your endpoint is taking too long to respond. And set the limit to be considered degraded."
37 />
38 <FormField
39 control={form.control}
40 name="id" // FIXME: should be something like 'limitDegraded'
41 render={({ field }) => (
42 <FormItem>
43 <FormLabel>Degraded limit</FormLabel>
44 <Select
45 onValueChange={(value) => field.onChange(Number.parseInt(value))}
46 defaultValue={String(field.value)}
47 >
48 <FormControl>
49 <SelectTrigger className="sm:w-[200px]">
50 <SelectValue placeholder="Select" />
51 </SelectTrigger>
52 </FormControl>
53 <SelectContent>
54 {limits.map((limit) => (
55 <SelectItem key={limit} value={String(limit)}>
56 {formatDuration(limit)}
57 </SelectItem>
58 ))}
59 </SelectContent>
60 </Select>
61 <FormDescription>
62 When the response time exceeds this limit, the monitor is will be
63 considered as{" "}
64 <span className="text-status-degraded">degraded</span>.
65 </FormDescription>
66 <FormMessage />
67 </FormItem>
68 )}
69 />
70 <FormField
71 control={form.control}
72 name="id" // FIXME: should be something like 'limitFailed'
73 render={({ field }) => (
74 <FormItem>
75 <FormLabel>Failed limit</FormLabel>
76 <Select
77 onValueChange={(value) => field.onChange(Number.parseInt(value))}
78 defaultValue={String(field.value)}
79 >
80 <FormControl>
81 <SelectTrigger className="sm:w-[200px]">
82 <SelectValue placeholder="Select" />
83 </SelectTrigger>
84 </FormControl>
85 <SelectContent>
86 {limits.map((limit) => (
87 <SelectItem key={limit} value={String(limit)}>
88 {formatDuration(limit)}
89 </SelectItem>
90 ))}
91 </SelectContent>
92 </Select>
93 <FormDescription>
94 When the response time exceeds this limit, the monitor is will be
95 considered as <span className="text-status-down">failed</span>.
96 </FormDescription>
97 <FormMessage />
98 </FormItem>
99 )}
100 />
101 </div>
102 );
103}