From 6b125a99defa7be7de15b28b65b370da4d92e42f Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Thu, 25 Apr 2024 16:00:42 -0700
Subject: [PATCH] ui - switch alerts on / off

---
 .../src/components/settings.tsx               | 30 ++++++++++++++-----
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/settings.tsx b/ui/litellm-dashboard/src/components/settings.tsx
index 7eae54f2e21..29069b0547a 100644
--- a/ui/litellm-dashboard/src/components/settings.tsx
+++ b/ui/litellm-dashboard/src/components/settings.tsx
@@ -53,13 +53,15 @@ const Settings: React.FC<SettingsPageProps> = ({
   const [selectedAlertValues, setSelectedAlertValues] = useState([]);
   const [catchAllWebhookURL, setCatchAllWebhookURL] = useState<string>("");
   const [alertToWebhooks, setAlertToWebhooks] = useState<any[]>([]);
+  const [activeAlerts, setActiveAlerts] = useState<string[]>([]);
 
-  const [isAlertOn, setIsAlertOn] = useState<Record<string, boolean>>({}); // alert_name: boolean
 
-  
-
-  const handleSwitchChange = (value: boolean) => {
-    //setIsAlertOn(value);
+  const handleSwitchChange = (alertName: string) => {
+    if (activeAlerts.includes(alertName)) {
+      setActiveAlerts(activeAlerts.filter((alert) => alert !== alertName));
+    } else {
+      setActiveAlerts([...activeAlerts, alertName]);
+    }
   };
   const alerts_to_UI_NAME: Record<string, string> = {
     "llm_exceptions": "LLM Exceptions",
@@ -85,8 +87,12 @@ const Settings: React.FC<SettingsPageProps> = ({
           console.log("_alert_info", _alert_info);
           let catch_all_webhook = _alert_info.variables.SLACK_WEBHOOK_URL;
           console.log("catch_all_webhook", catch_all_webhook);
+
+          let active_alerts = _alert_info.active_alerts;
+          setActiveAlerts(active_alerts);
           setCatchAllWebhookURL(catch_all_webhook);
           setAlertToWebhooks(_alert_info.alerts_to_webhook);
+
         }
       }
 
@@ -94,6 +100,11 @@ const Settings: React.FC<SettingsPageProps> = ({
     });
   }, [accessToken, userRole, userID]);
 
+
+  const isAlertOn = (alertName: string) => {
+    return activeAlerts && activeAlerts.includes(alertName);
+  }
+
   const handleAddCallback = () => {
     console.log("Add callback clicked");
     setIsModalVisible(true);
@@ -127,12 +138,15 @@ const Settings: React.FC<SettingsPageProps> = ({
     });
 
     console.log("updatedAlertToWebhooks", updatedAlertToWebhooks);
-  
+
     const payload = {
       general_settings: {
         alert_to_webhook_url: updatedAlertToWebhooks,
+        alert_types: activeAlerts
       },
     };
+
+    console.log("payload", payload);
   
     try {
       setCallbacksCall(accessToken, payload);
@@ -323,8 +337,8 @@ const Settings: React.FC<SettingsPageProps> = ({
               <Switch
                     id="switch"
                     name="switch"
-                    // checked={isSwitchOn}
-                    onChange={handleSwitchChange}
+                    checked={isAlertOn(key)}
+                    onChange={() => handleSwitchChange(key)}
                   />
               </TableCell>
               <TableCell>