fix(ui): update presets after pushing an alert (keephq#1954)

rajesh-jonnalagadda · Sep 18, 2024 · 51167c9 · 51167c9
1 parent f97c63b
commit 51167c9
Showing 1 changed file with 59 additions and 21 deletions.
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
@@ -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<AlertSource[]>([]);
-  const [selectedSource, setSelectedSource] = useState<AlertSource | null>(null);
+  const [selectedSource, setSelectedSource] = useState<AlertSource | null>(
+    null
+  );
   const [alertJson, setAlertJson] = useState<string>("");
+  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;
+  }) => (
     <div className="flex items-center">
       <ImageWithFallback
         src={`/icons/${selectedSource.type}-icon.png`}
@@ -101,7 +125,12 @@ const PushAlertToServerModal = ({ handleClose, presetName }: PushAlertToServerMo
   );
 
   return (
-    <Modal isOpen={true} onClose={handleClose} title="Simulate alert" className="w-[600px]">
+    <Modal
+      isOpen={true}
+      onClose={handleClose}
+      title="Simulate alert"
+      className="w-[600px]"
+    >
       <div className="relative bg-white p-6 rounded-lg">
         <div className="mt-4">
           <label className="block text-sm font-medium text-gray-700">
@@ -113,7 +142,9 @@ const PushAlertToServerModal = ({ handleClose, presetName }: PushAlertToServerMo
             placeholder="Select alert source"
             className="mt-2"
           >
-            {selectedSource && <CustomSelectValue selectedSource={selectedSource} />}
+            {selectedSource && (
+              <CustomSelectValue selectedSource={selectedSource} />
+            )}
             {alertSources.map((source) => (
               <SelectItem key={source.name} value={source.name}>
                 <div className="flex items-center">
@@ -130,7 +161,14 @@ const PushAlertToServerModal = ({ handleClose, presetName }: PushAlertToServerMo
               </SelectItem>
             ))}
           </Select>
-          <Callout title="About alert payload" color="orange" className="break-words mt-4">Feel free to edit the payload as you want. However, some of the providers expects specific fields, so be careful.</Callout>
+          <Callout
+            title="About alert payload"
+            color="orange"
+            className="break-words mt-4"
+          >
+            Feel free to edit the payload as you want. However, some of the
+            providers expects specific fields, so be careful.
+          </Callout>
         </div>
         {selectedSource && (
           <>