Support all resources,sites,health checks

This commit is contained in:
Owen
2026-04-20 20:48:14 -07:00
parent d7a9e1a517
commit 5e88862e29
5 changed files with 266 additions and 61 deletions

View File

@@ -35,6 +35,7 @@ import {
RadioGroupItem
} from "@app/components/ui/radio-group";
import { Label } from "@app/components/ui/label";
import { StrategySelect } from "@app/components/StrategySelect";
import { TagInput, type Tag } from "@app/components/tags/tag-input";
import { getUserDisplayName } from "@app/lib/getUserDisplayName";
import {
@@ -957,6 +958,58 @@ export function AlertRuleSourceFields({
const t = useTranslations();
const { setValue, getValues } = useFormContext<AlertRuleFormValues>();
const sourceType = useWatch({ control, name: "sourceType" });
const allSites = useWatch({ control, name: "allSites" });
const allHealthChecks = useWatch({ control, name: "allHealthChecks" });
const allResources = useWatch({ control, name: "allResources" });
const siteStrategyOptions = useMemo(
() => [
{
id: "all" as const,
title: t("alertingAllSites"),
description: t("alertingAllSitesDescription")
},
{
id: "specific" as const,
title: t("alertingSpecificSites"),
description: t("alertingSpecificSitesDescription")
}
],
[t]
);
const healthCheckStrategyOptions = useMemo(
() => [
{
id: "all" as const,
title: t("alertingAllHealthChecks"),
description: t("alertingAllHealthChecksDescription")
},
{
id: "specific" as const,
title: t("alertingSpecificHealthChecks"),
description: t("alertingSpecificHealthChecksDescription")
}
],
[t]
);
const resourceStrategyOptions = useMemo(
() => [
{
id: "all" as const,
title: t("alertingAllResources"),
description: t("alertingAllResourcesDescription")
},
{
id: "specific" as const,
title: t("alertingSpecificResources"),
description: t("alertingSpecificResourcesDescription")
}
],
[t]
);
return (
<div className="space-y-4">
<FormField
@@ -1029,55 +1082,131 @@ export function AlertRuleSourceFields({
)}
/>
{sourceType === "site" ? (
<FormField
control={control}
name="siteIds"
render={({ field }) => (
<FormItem>
<FormLabel>{t("alertingPickSites")}</FormLabel>
<SiteMultiSelect
orgId={orgId}
value={field.value}
onChange={field.onChange}
/>
<FormMessage />
</FormItem>
<>
<FormField
control={control}
name="allSites"
render={({ field }) => (
<FormItem>
<StrategySelect
options={siteStrategyOptions}
value={field.value ? "all" : "specific"}
onChange={(v) => {
field.onChange(v === "all");
if (v === "all") {
setValue("siteIds", []);
}
}}
cols={2}
/>
<FormMessage />
</FormItem>
)}
/>
{!allSites && (
<FormField
control={control}
name="siteIds"
render={({ field }) => (
<FormItem>
<FormLabel>
{t("alertingPickSites")}
</FormLabel>
<SiteMultiSelect
orgId={orgId}
value={field.value}
onChange={field.onChange}
/>
<FormMessage />
</FormItem>
)}
/>
)}
/>
</>
) : sourceType === "resource" ? (
<FormField
control={control}
name="resourceIds"
render={({ field }) => (
<FormItem>
<FormLabel>{t("alertingPickResources")}</FormLabel>
<ResourceMultiSelect
orgId={orgId}
value={field.value}
onChange={field.onChange}
/>
<FormMessage />
</FormItem>
<>
<FormField
control={control}
name="allResources"
render={({ field }) => (
<FormItem>
<StrategySelect
options={resourceStrategyOptions}
value={field.value ? "all" : "specific"}
onChange={(v) => {
field.onChange(v === "all");
if (v === "all") {
setValue("resourceIds", []);
}
}}
cols={2}
/>
<FormMessage />
</FormItem>
)}
/>
{!allResources && (
<FormField
control={control}
name="resourceIds"
render={({ field }) => (
<FormItem>
<FormLabel>
{t("alertingPickResources")}
</FormLabel>
<ResourceMultiSelect
orgId={orgId}
value={field.value}
onChange={field.onChange}
/>
<FormMessage />
</FormItem>
)}
/>
)}
/>
</>
) : (
<FormField
control={control}
name="healthCheckIds"
render={({ field }) => (
<FormItem>
<FormLabel>
{t("alertingPickHealthChecks")}
</FormLabel>
<HealthCheckMultiSelect
orgId={orgId}
value={field.value}
onChange={field.onChange}
/>
<FormMessage />
</FormItem>
<>
<FormField
control={control}
name="allHealthChecks"
render={({ field }) => (
<FormItem>
<StrategySelect
options={healthCheckStrategyOptions}
value={field.value ? "all" : "specific"}
onChange={(v) => {
field.onChange(v === "all");
if (v === "all") {
setValue("healthCheckIds", []);
}
}}
cols={2}
/>
<FormMessage />
</FormItem>
)}
/>
{!allHealthChecks && (
<FormField
control={control}
name="healthCheckIds"
render={({ field }) => (
<FormItem>
<FormLabel>
{t("alertingPickHealthChecks")}
</FormLabel>
<HealthCheckMultiSelect
orgId={orgId}
value={field.value}
onChange={field.onChange}
/>
<FormMessage />
</FormItem>
)}
/>
)}
/>
</>
)}
</div>
);

View File

@@ -50,8 +50,11 @@ export type AlertRuleFormValues = {
name: string;
enabled: boolean;
sourceType: "site" | "health_check" | "resource";
allSites: boolean;
siteIds: number[];
allHealthChecks: boolean;
healthCheckIds: number[];
allResources: boolean;
resourceIds: number[];
trigger: AlertTrigger;
actions: AlertRuleFormAction[];
@@ -74,8 +77,11 @@ export type AlertRuleApiPayload = {
| "resource_unhealthy"
| "resource_toggle";
enabled: boolean;
allSites: boolean;
siteIds: number[];
allHealthChecks: boolean;
healthCheckIds: number[];
allResources: boolean;
resourceIds: number[];
userIds: string[];
roleIds: number[];
@@ -136,8 +142,11 @@ export function buildFormSchema(t: (k: string) => string) {
.min(1, { message: t("alertingErrorNameRequired") }),
enabled: z.boolean(),
sourceType: z.enum(["site", "health_check", "resource"]),
allSites: z.boolean(),
siteIds: z.array(z.number()),
allHealthChecks: z.boolean(),
healthCheckIds: z.array(z.number()),
allResources: z.boolean(),
resourceIds: z.array(z.number()),
trigger: z.enum([
"site_online",
@@ -185,7 +194,11 @@ export function buildFormSchema(t: (k: string) => string) {
path: ["actions"]
});
}
if (val.sourceType === "site" && val.siteIds.length === 0) {
if (
val.sourceType === "site" &&
!val.allSites &&
val.siteIds.length === 0
) {
ctx.addIssue({
code: z.ZodIssueCode.custom,
message: t("alertingErrorPickSites"),
@@ -194,6 +207,7 @@ export function buildFormSchema(t: (k: string) => string) {
}
if (
val.sourceType === "health_check" &&
!val.allHealthChecks &&
val.healthCheckIds.length === 0
) {
ctx.addIssue({
@@ -204,6 +218,7 @@ export function buildFormSchema(t: (k: string) => string) {
}
if (
val.sourceType === "resource" &&
!val.allResources &&
val.resourceIds.length === 0
) {
ctx.addIssue({
@@ -295,8 +310,11 @@ export function defaultFormValues(): AlertRuleFormValues {
name: "",
enabled: true,
sourceType: "site",
allSites: true,
siteIds: [],
allHealthChecks: true,
healthCheckIds: [],
allResources: true,
resourceIds: [],
trigger: "site_toggle",
actions: [
@@ -371,12 +389,21 @@ export function apiResponseToFormValues(
});
}
const allSites = sourceType === "site" && rule.siteIds.length === 0;
const allHealthChecks =
sourceType === "health_check" && rule.healthCheckIds.length === 0;
const allResources =
sourceType === "resource" && (rule.resourceIds?.length ?? 0) === 0;
return {
name: rule.name,
enabled: rule.enabled,
sourceType,
allSites,
siteIds: rule.siteIds,
allHealthChecks,
healthCheckIds: rule.healthCheckIds,
allResources,
resourceIds: rule.resourceIds ?? [],
trigger: trigger as AlertTrigger,
actions
@@ -432,9 +459,12 @@ export function formValuesToApiPayload(
name: values.name.trim(),
eventType,
enabled: values.enabled,
siteIds: values.siteIds,
healthCheckIds: values.healthCheckIds,
resourceIds: values.resourceIds,
allSites: values.allSites,
siteIds: values.allSites ? [] : values.siteIds,
allHealthChecks: values.allHealthChecks,
healthCheckIds: values.allHealthChecks ? [] : values.healthCheckIds,
allResources: values.allResources,
resourceIds: values.allResources ? [] : values.resourceIds,
userIds: uniqueUserIds,
roleIds: uniqueRoleIds,
emails: uniqueEmails,