mirror of
https://github.com/fosrl/pangolin.git
synced 2026-05-05 12:04:14 +00:00
749 lines
29 KiB
TypeScript
749 lines
29 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
ActionBlock,
|
|
AlertRuleSourceFields,
|
|
AlertRuleTriggerFields,
|
|
DropdownAddAction
|
|
} from "@app/components/alert-rule-editor/AlertRuleFields";
|
|
import { SettingsContainer } from "@app/components/Settings";
|
|
import { Button } from "@app/components/ui/button";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle
|
|
} from "@app/components/ui/card";
|
|
import {
|
|
Form,
|
|
FormControl,
|
|
FormField,
|
|
FormItem,
|
|
FormLabel,
|
|
FormMessage
|
|
} from "@app/components/ui/form";
|
|
import { Input } from "@app/components/ui/input";
|
|
import { Switch } from "@app/components/ui/switch";
|
|
import { toast } from "@app/hooks/useToast";
|
|
import {
|
|
buildFormSchema,
|
|
defaultFormValues,
|
|
formValuesToApiPayload,
|
|
type AlertRuleFormAction,
|
|
type AlertRuleFormValues
|
|
} from "@app/lib/alertRuleForm";
|
|
import { createApiClient, formatAxiosError } from "@app/lib/api";
|
|
import { useEnvContext } from "@app/hooks/useEnvContext";
|
|
import type { CreateAlertRuleResponse } from "@server/private/routers/alertRule";
|
|
import type { AxiosResponse } from "axios";
|
|
import { cn } from "@app/lib/cn";
|
|
import {
|
|
Background,
|
|
Handle,
|
|
Position,
|
|
ReactFlow,
|
|
ReactFlowProvider,
|
|
useEdgesState,
|
|
useNodesState,
|
|
type Edge,
|
|
type Node,
|
|
type NodeProps,
|
|
type NodeTypes
|
|
} from "@xyflow/react";
|
|
import "@xyflow/react/dist/style.css";
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import { Check, ChevronLeft } from "lucide-react";
|
|
import Link from "next/link";
|
|
import { useRouter } from "next/navigation";
|
|
import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
import { useFieldArray, useForm, useWatch } from "react-hook-form";
|
|
import { useTranslations } from "next-intl";
|
|
import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
|
|
import { tierMatrix } from "@server/lib/billing/tierMatrix";
|
|
|
|
type AlertRuleT = ReturnType<typeof useTranslations>;
|
|
|
|
export type AlertStepId = "source" | "trigger" | "actions";
|
|
|
|
type AlertStepNodeData = {
|
|
roleLabel: string;
|
|
title: string;
|
|
subtitle: string;
|
|
configured: boolean;
|
|
accent: string;
|
|
topBorderClass: string;
|
|
};
|
|
|
|
function summarizeSource(v: AlertRuleFormValues, t: AlertRuleT) {
|
|
if (v.sourceType === "site") {
|
|
if (v.siteIds.length === 0) {
|
|
return t("alertingNodeNotConfigured");
|
|
}
|
|
return t("alertingSummarySites", { count: v.siteIds.length });
|
|
}
|
|
if (v.healthCheckIds.length === 0) {
|
|
return t("alertingNodeNotConfigured");
|
|
}
|
|
return t("alertingSummaryHealthChecks", { count: v.healthCheckIds.length });
|
|
}
|
|
|
|
function summarizeTrigger(v: AlertRuleFormValues, t: AlertRuleT) {
|
|
switch (v.trigger) {
|
|
case "site_online":
|
|
return t("alertingTriggerSiteOnline");
|
|
case "site_offline":
|
|
return t("alertingTriggerSiteOffline");
|
|
case "site_toggle":
|
|
return t("alertingTriggerSiteToggle");
|
|
case "health_check_healthy":
|
|
return t("alertingTriggerHcHealthy");
|
|
case "health_check_unhealthy":
|
|
return t("alertingTriggerHcUnhealthy");
|
|
case "health_check_toggle":
|
|
return t("alertingTriggerHcToggle");
|
|
default:
|
|
return v.trigger;
|
|
}
|
|
}
|
|
|
|
function oneActionConfigured(a: AlertRuleFormAction): boolean {
|
|
if (a.type === "notify") {
|
|
return (
|
|
a.userTags.length > 0 ||
|
|
a.roleTags.length > 0 ||
|
|
a.emailTags.length > 0
|
|
);
|
|
}
|
|
|
|
try {
|
|
new URL(a.url.trim());
|
|
return true;
|
|
} catch {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
function actionTypeLabel(a: AlertRuleFormAction, t: AlertRuleT): string {
|
|
switch (a.type) {
|
|
case "notify":
|
|
return t("alertingActionNotify");
|
|
case "webhook":
|
|
return t("alertingActionWebhook");
|
|
}
|
|
}
|
|
|
|
function summarizeOneAction(a: AlertRuleFormAction, t: AlertRuleT): string {
|
|
if (a.type === "notify") {
|
|
if (
|
|
a.userTags.length === 0 &&
|
|
a.roleTags.length === 0 &&
|
|
a.emailTags.length === 0
|
|
) {
|
|
return t("alertingNodeNotConfigured");
|
|
}
|
|
const parts: string[] = [];
|
|
if (a.userTags.length > 0) {
|
|
parts.push(t("alertingUsersSelected", { count: a.userTags.length }));
|
|
}
|
|
if (a.roleTags.length > 0) {
|
|
parts.push(t("alertingRolesSelected", { count: a.roleTags.length }));
|
|
}
|
|
if (a.emailTags.length > 0) {
|
|
parts.push(
|
|
`${t("alertingNotifyEmails")} (${a.emailTags.length})`
|
|
);
|
|
}
|
|
return parts.join(" · ");
|
|
}
|
|
const url = a.url.trim();
|
|
if (!url) {
|
|
return t("alertingNodeNotConfigured");
|
|
}
|
|
try {
|
|
return new URL(url).hostname;
|
|
} catch {
|
|
return t("alertingNodeNotConfigured");
|
|
}
|
|
}
|
|
|
|
function stepConfigured(
|
|
step: "source" | "trigger",
|
|
v: AlertRuleFormValues
|
|
): boolean {
|
|
if (step === "source") {
|
|
return v.sourceType === "site"
|
|
? v.siteIds.length > 0
|
|
: v.healthCheckIds.length > 0;
|
|
}
|
|
return Boolean(v.trigger);
|
|
}
|
|
|
|
function buildActionStepNodeData(
|
|
index: number,
|
|
action: AlertRuleFormAction,
|
|
t: AlertRuleT
|
|
): AlertStepNodeData {
|
|
return {
|
|
roleLabel: `${t("alertingNodeRoleAction")} ${index + 1}`,
|
|
title: actionTypeLabel(action, t),
|
|
subtitle: summarizeOneAction(action, t),
|
|
configured: oneActionConfigured(action),
|
|
accent: "text-amber-600 dark:text-amber-400",
|
|
topBorderClass: "border-t-amber-500"
|
|
};
|
|
}
|
|
|
|
function buildActionsPlaceholderNodeData(t: AlertRuleT): AlertStepNodeData {
|
|
return {
|
|
roleLabel: t("alertingNodeRoleAction"),
|
|
title: t("alertingSectionActions"),
|
|
subtitle: t("alertingNodeNotConfigured"),
|
|
configured: false,
|
|
accent: "text-amber-600 dark:text-amber-400",
|
|
topBorderClass: "border-t-amber-500"
|
|
};
|
|
}
|
|
|
|
const AlertStepNode = memo(function AlertStepNodeFn({
|
|
data,
|
|
selected
|
|
}: NodeProps<Node<AlertStepNodeData>>) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"relative rounded-xl border-2 border-t-[3px] bg-card px-5 py-4 shadow-sm min-w-[260px] max-w-[320px] transition-shadow",
|
|
data.topBorderClass,
|
|
selected
|
|
? "border-primary ring-2 ring-primary/25 shadow-md"
|
|
: "border-border"
|
|
)}
|
|
>
|
|
<Handle
|
|
type="target"
|
|
position={Position.Top}
|
|
className="!bg-muted-foreground !w-2 !h-2"
|
|
/>
|
|
{data.configured && (
|
|
<Check
|
|
className="absolute top-3 right-3 h-5 w-5 text-green-600"
|
|
aria-hidden
|
|
/>
|
|
)}
|
|
<p
|
|
className={cn(
|
|
"text-[11px] font-semibold uppercase tracking-wide",
|
|
data.accent
|
|
)}
|
|
>
|
|
{data.roleLabel}
|
|
</p>
|
|
<p className="font-semibold text-base mt-1">{data.title}</p>
|
|
<p className="text-sm text-muted-foreground mt-1.5 line-clamp-3 leading-snug">
|
|
{data.subtitle}
|
|
</p>
|
|
<Handle
|
|
type="source"
|
|
position={Position.Bottom}
|
|
className="!bg-muted-foreground !w-2 !h-2"
|
|
/>
|
|
</div>
|
|
);
|
|
});
|
|
|
|
const nodeTypes: NodeTypes = {
|
|
alertStep: AlertStepNode
|
|
};
|
|
|
|
const ACTION_NODE_X_GAP = 280;
|
|
const ACTION_NODE_Y = 468;
|
|
const SOURCE_NODE_POS = { x: 120, y: 28 };
|
|
const TRIGGER_NODE_POS = { x: 120, y: 248 };
|
|
|
|
function buildNodeData(
|
|
stepId: "source" | "trigger",
|
|
v: AlertRuleFormValues,
|
|
t: AlertRuleT
|
|
): AlertStepNodeData {
|
|
const accents: Record<
|
|
"source" | "trigger",
|
|
{ accent: string; topBorderClass: string; role: string; title: string }
|
|
> = {
|
|
source: {
|
|
accent: "text-blue-600 dark:text-blue-400",
|
|
topBorderClass: "border-t-blue-500",
|
|
role: t("alertingNodeRoleSource"),
|
|
title: t("alertingSectionSource")
|
|
},
|
|
trigger: {
|
|
accent: "text-emerald-600 dark:text-emerald-400",
|
|
topBorderClass: "border-t-emerald-500",
|
|
role: t("alertingNodeRoleTrigger"),
|
|
title: t("alertingSectionTrigger")
|
|
}
|
|
};
|
|
const meta = accents[stepId];
|
|
const subtitle =
|
|
stepId === "source"
|
|
? summarizeSource(v, t)
|
|
: summarizeTrigger(v, t);
|
|
return {
|
|
roleLabel: meta.role,
|
|
title: meta.title,
|
|
subtitle,
|
|
configured: stepConfigured(stepId, v),
|
|
accent: meta.accent,
|
|
topBorderClass: meta.topBorderClass
|
|
};
|
|
}
|
|
|
|
type AlertRuleGraphEditorProps = {
|
|
orgId: string;
|
|
alertRuleId?: number;
|
|
initialValues: AlertRuleFormValues;
|
|
isNew: boolean;
|
|
disabled?: boolean;
|
|
};
|
|
|
|
const FORM_ID = "alert-rule-graph-form";
|
|
|
|
export default function AlertRuleGraphEditor({
|
|
orgId,
|
|
alertRuleId,
|
|
initialValues,
|
|
isNew,
|
|
disabled = false
|
|
}: AlertRuleGraphEditorProps) {
|
|
const t = useTranslations();
|
|
const router = useRouter();
|
|
const api = createApiClient(useEnvContext());
|
|
const [isSaving, setIsSaving] = useState(false);
|
|
const schema = useMemo(() => buildFormSchema(t), [t]);
|
|
const form = useForm<AlertRuleFormValues>({
|
|
resolver: zodResolver(schema),
|
|
defaultValues: initialValues ?? defaultFormValues()
|
|
});
|
|
|
|
const { fields, append, remove, update } = useFieldArray({
|
|
control: form.control,
|
|
name: "actions"
|
|
});
|
|
|
|
const wName = useWatch({ control: form.control, name: "name" }) ?? "";
|
|
const wEnabled =
|
|
useWatch({ control: form.control, name: "enabled" }) ?? true;
|
|
const wSourceType =
|
|
useWatch({ control: form.control, name: "sourceType" }) ?? "site";
|
|
const wSiteIds =
|
|
useWatch({ control: form.control, name: "siteIds" }) ?? [];
|
|
const wHealthCheckIds =
|
|
useWatch({ control: form.control, name: "healthCheckIds" }) ?? [];
|
|
const wTrigger =
|
|
useWatch({ control: form.control, name: "trigger" }) ??
|
|
"site_offline";
|
|
const wActions =
|
|
useWatch({ control: form.control, name: "actions" }) ?? [];
|
|
|
|
const flowValues: AlertRuleFormValues = useMemo(
|
|
() => ({
|
|
name: wName,
|
|
enabled: wEnabled,
|
|
sourceType: wSourceType,
|
|
siteIds: wSiteIds,
|
|
healthCheckIds: wHealthCheckIds,
|
|
trigger: wTrigger,
|
|
actions: wActions
|
|
}),
|
|
[
|
|
wName,
|
|
wEnabled,
|
|
wSourceType,
|
|
wSiteIds,
|
|
wHealthCheckIds,
|
|
wTrigger,
|
|
wActions
|
|
]
|
|
);
|
|
|
|
const [selectedStep, setSelectedStep] = useState<string>("source");
|
|
|
|
const [nodes, setNodes, onNodesChange] = useNodesState<Node>([]);
|
|
const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
|
|
|
|
const nodesSyncKeyRef = useRef("");
|
|
useEffect(() => {
|
|
const key = JSON.stringify({ flowValues, selectedStep });
|
|
if (key === nodesSyncKeyRef.current) {
|
|
return;
|
|
}
|
|
nodesSyncKeyRef.current = key;
|
|
|
|
const nActions = flowValues.actions.length;
|
|
const actionNodes: Node[] =
|
|
nActions === 0
|
|
? [
|
|
{
|
|
id: "actions",
|
|
type: "alertStep",
|
|
position: {
|
|
x: TRIGGER_NODE_POS.x,
|
|
y: ACTION_NODE_Y
|
|
},
|
|
data: buildActionsPlaceholderNodeData(t),
|
|
selected:
|
|
selectedStep === "actions" ||
|
|
selectedStep.startsWith("action-")
|
|
}
|
|
]
|
|
: flowValues.actions.map((action, i) => {
|
|
const totalWidth =
|
|
(nActions - 1) * ACTION_NODE_X_GAP;
|
|
const originX =
|
|
TRIGGER_NODE_POS.x - totalWidth / 2;
|
|
return {
|
|
id: `action-${i}`,
|
|
type: "alertStep",
|
|
position: {
|
|
x: originX + i * ACTION_NODE_X_GAP,
|
|
y: ACTION_NODE_Y
|
|
},
|
|
data: buildActionStepNodeData(i, action, t),
|
|
selected: selectedStep === `action-${i}`
|
|
};
|
|
});
|
|
|
|
setNodes([
|
|
{
|
|
id: "source",
|
|
type: "alertStep",
|
|
position: SOURCE_NODE_POS,
|
|
data: buildNodeData("source", flowValues, t),
|
|
selected: selectedStep === "source"
|
|
},
|
|
{
|
|
id: "trigger",
|
|
type: "alertStep",
|
|
position: TRIGGER_NODE_POS,
|
|
data: buildNodeData("trigger", flowValues, t),
|
|
selected: selectedStep === "trigger"
|
|
},
|
|
...actionNodes
|
|
]);
|
|
|
|
const nextEdges: Edge[] = [
|
|
{
|
|
id: "e-src-trg",
|
|
source: "source",
|
|
target: "trigger",
|
|
animated: true
|
|
},
|
|
...(nActions === 0
|
|
? [
|
|
{
|
|
id: "e-trg-act",
|
|
source: "trigger",
|
|
target: "actions",
|
|
animated: true
|
|
} as const
|
|
]
|
|
: flowValues.actions.map((_, i) => ({
|
|
id: `e-trg-act-${i}`,
|
|
source: "trigger",
|
|
target: `action-${i}`,
|
|
animated: true
|
|
})))
|
|
];
|
|
setEdges(nextEdges);
|
|
}, [flowValues, selectedStep, t, setNodes, setEdges]);
|
|
|
|
useEffect(() => {
|
|
if (selectedStep === "actions" && wActions.length > 0) {
|
|
setSelectedStep("action-0");
|
|
}
|
|
}, [selectedStep, wActions.length]);
|
|
|
|
useEffect(() => {
|
|
if (wActions.length === 0 && /^action-\d+$/.test(selectedStep)) {
|
|
setSelectedStep("actions");
|
|
}
|
|
}, [wActions.length, selectedStep]);
|
|
|
|
useEffect(() => {
|
|
const m = /^action-(\d+)$/.exec(selectedStep);
|
|
if (!m) {
|
|
return;
|
|
}
|
|
const i = parseInt(m[1], 10);
|
|
if (i >= wActions.length) {
|
|
setSelectedStep(
|
|
wActions.length > 0
|
|
? `action-${wActions.length - 1}`
|
|
: "actions"
|
|
);
|
|
}
|
|
}, [wActions.length, selectedStep]);
|
|
|
|
const onNodeClick = useCallback((_event: unknown, node: Node) => {
|
|
setSelectedStep(node.id);
|
|
}, []);
|
|
|
|
const onSubmit = form.handleSubmit(async (values) => {
|
|
setIsSaving(true);
|
|
try {
|
|
const payload = formValuesToApiPayload(values);
|
|
if (isNew) {
|
|
const res = await api.put<
|
|
AxiosResponse<CreateAlertRuleResponse>
|
|
>(`/org/${orgId}/alert-rule`, payload);
|
|
toast({ title: t("alertingRuleSaved") });
|
|
router.replace(
|
|
`/${orgId}/settings/alerting/${res.data.data.alertRuleId}`
|
|
);
|
|
} else {
|
|
await api.post(
|
|
`/org/${orgId}/alert-rule/${alertRuleId}`,
|
|
payload
|
|
);
|
|
toast({ title: t("alertingRuleSaved") });
|
|
}
|
|
} catch (e) {
|
|
toast({
|
|
title: t("error"),
|
|
description: formatAxiosError(e),
|
|
variant: "destructive"
|
|
});
|
|
} finally {
|
|
setIsSaving(false);
|
|
}
|
|
});
|
|
|
|
const isActionsSidebar =
|
|
selectedStep === "actions" || selectedStep.startsWith("action-");
|
|
|
|
const sidebarTitle = isActionsSidebar
|
|
? t("alertingConfigureActions")
|
|
: selectedStep === "source"
|
|
? t("alertingConfigureSource")
|
|
: t("alertingConfigureTrigger");
|
|
|
|
return (
|
|
<Form {...form}>
|
|
<form id={FORM_ID} onSubmit={onSubmit}>
|
|
<SettingsContainer>
|
|
<PaidFeaturesAlert tiers={tierMatrix.alertingRules} />
|
|
<Card>
|
|
<CardContent className="p-4 sm:p-5 space-y-4">
|
|
<fieldset
|
|
disabled={disabled}
|
|
className={disabled ? "opacity-50 pointer-events-none" : ""}
|
|
>
|
|
<div className="flex flex-col gap-4 md:flex-row md:flex-wrap md:items-center">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<Button variant="outline" size="sm" asChild>
|
|
<Link href={`/${orgId}/settings/alerting`}>
|
|
<ChevronLeft className="h-4 w-4 mr-1" />
|
|
{t("alertingBackToRules")}
|
|
</Link>
|
|
</Button>
|
|
{isNew && (
|
|
<span className="text-xs rounded-md border bg-muted px-2 py-1 text-muted-foreground">
|
|
{t("alertingDraftBadge")}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<FormField
|
|
control={form.control}
|
|
name="name"
|
|
render={({ field }) => (
|
|
<FormItem className="flex-1 min-w-0 md:min-w-[12rem] md:max-w-md">
|
|
<FormLabel className="sr-only">
|
|
{t("name")}
|
|
</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
{...field}
|
|
placeholder={t(
|
|
"alertingRuleNamePlaceholder"
|
|
)}
|
|
className="font-medium"
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<div className="flex flex-wrap items-center gap-3 md:ml-auto">
|
|
<FormField
|
|
control={form.control}
|
|
name="enabled"
|
|
render={({ field }) => (
|
|
<FormItem className="flex flex-row items-center gap-2 space-y-0">
|
|
<FormLabel className="text-sm font-normal cursor-pointer whitespace-nowrap">
|
|
{t("alertingRuleEnabled")}
|
|
</FormLabel>
|
|
<FormControl>
|
|
<Switch
|
|
checked={field.value}
|
|
onCheckedChange={
|
|
field.onChange
|
|
}
|
|
/>
|
|
</FormControl>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<Button type="submit" disabled={isSaving}>
|
|
{isSaving ? t("saving") : t("save")}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 items-start">
|
|
<Card className="flex flex-col w-full overflow-hidden">
|
|
<CardHeader className="pb-2 pt-5 px-5 space-y-1 sm:px-6">
|
|
<CardTitle className="text-lg font-bold tracking-tight">
|
|
{t("alertingGraphCanvasTitle")}
|
|
</CardTitle>
|
|
<CardDescription className="pt-0">
|
|
{t("alertingGraphCanvasDescription")}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="p-4 sm:p-5 sm:px-6 pt-0">
|
|
<div
|
|
className={cn(
|
|
"rounded-md border bg-muted/30 overflow-hidden",
|
|
"min-h-[min(66vh,560px)] lg:min-h-[680px]"
|
|
)}
|
|
>
|
|
<ReactFlowProvider>
|
|
<ReactFlow
|
|
nodes={nodes}
|
|
edges={edges}
|
|
onNodesChange={onNodesChange}
|
|
onEdgesChange={onEdgesChange}
|
|
nodeTypes={nodeTypes}
|
|
onNodeClick={onNodeClick}
|
|
fitView
|
|
fitViewOptions={{
|
|
padding: 0.35
|
|
}}
|
|
minZoom={0.5}
|
|
maxZoom={1.25}
|
|
nodesDraggable={false}
|
|
nodesConnectable={false}
|
|
elementsSelectable
|
|
panOnScroll
|
|
zoomOnScroll
|
|
proOptions={{
|
|
hideAttribution: true
|
|
}}
|
|
className="bg-transparent !h-full !w-full min-h-[min(66vh,560px)] lg:min-h-[680px]"
|
|
>
|
|
<Background gap={16} size={1} />
|
|
</ReactFlow>
|
|
</ReactFlowProvider>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="flex flex-col w-full">
|
|
<CardHeader className="pb-2 pt-5 px-5 space-y-1 sm:px-6">
|
|
<CardTitle className="text-lg font-bold tracking-tight">
|
|
{sidebarTitle}
|
|
</CardTitle>
|
|
<CardDescription className="pt-0">
|
|
{t("alertingSidebarHint")}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="p-4 sm:p-5 sm:px-6 pt-0">
|
|
<fieldset
|
|
disabled={disabled}
|
|
className={disabled ? "opacity-50 pointer-events-none" : ""}
|
|
>
|
|
<div className="space-y-6">
|
|
{selectedStep === "source" && (
|
|
<AlertRuleSourceFields
|
|
orgId={orgId}
|
|
control={form.control}
|
|
/>
|
|
)}
|
|
{selectedStep === "trigger" && (
|
|
<AlertRuleTriggerFields
|
|
control={form.control}
|
|
/>
|
|
)}
|
|
{isActionsSidebar && (
|
|
<div className="space-y-4">
|
|
<div className="flex flex-wrap items-center justify-between gap-2">
|
|
<span className="text-sm font-medium">
|
|
{t(
|
|
"alertingSectionActions"
|
|
)}
|
|
</span>
|
|
<DropdownAddAction
|
|
onAdd={(type) => {
|
|
const newIndex =
|
|
fields.length;
|
|
if (type === "notify") {
|
|
append({
|
|
type: "notify",
|
|
userTags: [],
|
|
roleTags: [],
|
|
emailTags: []
|
|
});
|
|
} else {
|
|
append({
|
|
type: "webhook",
|
|
url: "",
|
|
method: "POST",
|
|
headers: [
|
|
{
|
|
key: "",
|
|
value: ""
|
|
}
|
|
],
|
|
authType: "none",
|
|
bearerToken: "",
|
|
basicCredentials: "",
|
|
customHeaderName: "",
|
|
customHeaderValue: ""
|
|
});
|
|
}
|
|
setSelectedStep(
|
|
`action-${newIndex}`
|
|
);
|
|
}}
|
|
/>
|
|
</div>
|
|
{fields.map((f, index) => (
|
|
<ActionBlock
|
|
key={f.id}
|
|
orgId={orgId}
|
|
index={index}
|
|
control={form.control}
|
|
form={form}
|
|
onRemove={() =>
|
|
remove(index)
|
|
}
|
|
onUpdate={(val) =>
|
|
update(index, val)
|
|
}
|
|
canRemove
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</fieldset>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</SettingsContainer>
|
|
</form>
|
|
</Form>
|
|
);
|
|
}
|