diff --git a/keep-ui/app/alerts/alert-push-alert-to-server-modal.tsx b/keep-ui/app/alerts/alert-push-alert-to-server-modal.tsx index d46bedf79..6362abc54 100644 --- a/keep-ui/app/alerts/alert-push-alert-to-server-modal.tsx +++ b/keep-ui/app/alerts/alert-push-alert-to-server-modal.tsx @@ -1,11 +1,19 @@ import React, { useState, useEffect } from "react"; -import { Button, Textarea, Select, SelectItem,Subtitle, Callout } from "@tremor/react"; +import { + Button, + Textarea, + Select, + SelectItem, + Subtitle, + Callout, +} from "@tremor/react"; import Modal from "@/components/ui/Modal"; import { useSession } from "next-auth/react"; import { getApiURL } from "utils/apiUrl"; import { useProviders } from "utils/hooks/useProviders"; import ImageWithFallback from "@/components/ImageWithFallback"; import { useAlerts } from "utils/hooks/useAlerts"; +import { usePresets } from "utils/hooks/usePresets"; interface PushAlertToServerModalProps { handleClose: () => void; @@ -18,14 +26,22 @@ interface AlertSource { alertExample: string; } -const PushAlertToServerModal = ({ handleClose, presetName }: PushAlertToServerModalProps) => { +const PushAlertToServerModal = ({ + handleClose, + presetName, +}: PushAlertToServerModalProps) => { const [alertSources, setAlertSources] = useState([]); - const [selectedSource, setSelectedSource] = useState(null); + const [selectedSource, setSelectedSource] = useState( + null + ); const [alertJson, setAlertJson] = useState(""); + const { useAllPresets } = usePresets(); + const { mutate: presetsMutator } = useAllPresets({ + revalidateIfStale: false, + revalidateOnFocus: false, + }); const { usePresetAlerts } = useAlerts(); - const { - mutate: mutateAlerts, - } = usePresetAlerts(presetName); + const { mutate: mutateAlerts } = usePresetAlerts(presetName); const { data: session } = useSession(); const { data: providersData } = useProviders(); @@ -34,8 +50,8 @@ const PushAlertToServerModal = ({ handleClose, presetName }: PushAlertToServerMo useEffect(() => { if (providers) { const sources = providers - .filter(provider => provider.alertExample) - .map(provider => { + .filter((provider) => provider.alertExample) + .map((provider) => { return { name: provider.display_name, type: provider.type, @@ -47,7 +63,7 @@ const PushAlertToServerModal = ({ handleClose, presetName }: PushAlertToServerMo }, [providers]); const handleSourceChange = (value: string) => { - const source = alertSources.find(source => source.name === value); + const source = alertSources.find((source) => source.name === value); if (source) { setSelectedSource(source); setAlertJson(source.alertExample); @@ -65,18 +81,22 @@ const PushAlertToServerModal = ({ handleClose, presetName }: PushAlertToServerMo } try { - const response = await fetch(`${getApiURL()}/alerts/event/${selectedSource.type}`, { - method: "POST", - headers: { - "Content-Type": "application/json", - Authorization: `Bearer ${session?.accessToken}`, - }, - body: alertJson, - }); + const response = await fetch( + `${getApiURL()}/alerts/event/${selectedSource.type}`, + { + method: "POST", + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${session?.accessToken}`, + }, + body: alertJson, + } + ); if (response.ok) { console.log("Alert pushed successfully"); mutateAlerts(); + presetsMutator(); handleClose(); } else { console.error("Failed to push alert"); @@ -86,7 +106,11 @@ const PushAlertToServerModal = ({ handleClose, presetName }: PushAlertToServerMo } }; - const CustomSelectValue = ({ selectedSource }: { selectedSource: AlertSource }) => ( + const CustomSelectValue = ({ + selectedSource, + }: { + selectedSource: AlertSource; + }) => (
+