From 169b085e9c3d57c57a66ae9d324223cd16652945 Mon Sep 17 00:00:00 2001
From: ishaan-jaff <ishaanjaffer0324@gmail.com>
Date: Sat, 2 Mar 2024 16:47:00 -0800
Subject: [PATCH] (ui) link to slack docs to test soft limit budget alerts

---
 .../src/components/create_key_button.tsx              | 11 +++++++----
 ui/litellm-dashboard/src/components/networking.tsx    |  9 ++++++---
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/create_key_button.tsx b/ui/litellm-dashboard/src/components/create_key_button.tsx
index 6c88fc568..fa80556b5 100644
--- a/ui/litellm-dashboard/src/components/create_key_button.tsx
+++ b/ui/litellm-dashboard/src/components/create_key_button.tsx
@@ -71,10 +71,8 @@ const CreateKey: React.FC<CreateKeyProps> = ({
   const sendSlackAlert = async () => {
     try {
       console.log("Sending Slack alert...");
-      message.info("Sending Test Slack alert...");
       const response = await slackBudgetAlertsHealthCheck(accessToken);
       console.log("slackBudgetAlertsHealthCheck Response:", response);
-      message.success("Test Slack Alert worked - check your Slack!");
       console.log("Testing Slack alert successful");
     } catch (error) {
       console.error("Error sending Slack alert:", error);
@@ -198,9 +196,14 @@ const CreateKey: React.FC<CreateKeyProps> = ({
                     <Title className="mt-6">Budgets</Title>
                       <Text>Soft Limit Budget: ${softBudget}</Text>
                       <Button className="mt-3" onClick={sendSlackAlert}>
-                        Test Alert
+                        Test Slack Alert
                       </Button>
-
+                      <Text className="mt-2">
+                        (LiteLLM Docs - 
+                        <a href="https://docs.litellm.ai/docs/proxy/alerting" target="_blank" className="text-blue-500">
+                           Set Up Slack Alerting)
+                        </a>
+                      </Text>
                   </div>
                 ) : (
                   <Text>Key being created, this might take 30s</Text>
diff --git a/ui/litellm-dashboard/src/components/networking.tsx b/ui/litellm-dashboard/src/components/networking.tsx
index 9e85a5ca4..a8ff29c00 100644
--- a/ui/litellm-dashboard/src/components/networking.tsx
+++ b/ui/litellm-dashboard/src/components/networking.tsx
@@ -818,6 +818,7 @@ export const slackBudgetAlertsHealthCheck = async (accessToken: String) => {
       : `health/services?service=slack_budget_alerts`;
 
     console.log("Checking Slack Budget Alerts service health");
+    message.info("Sending Test Slack alert...");
 
     const response = await fetch(url, {
       method: "GET",
@@ -829,11 +830,13 @@ export const slackBudgetAlertsHealthCheck = async (accessToken: String) => {
 
     if (!response.ok) {
       const errorData = await response.text();
-      console.error("Health Check failed:", errorData);
-      throw new Error("Health Check failed");
+      message.error("Failed Slack Alert test: " + errorData);
+      // throw error with message
+      throw new Error(errorData);
     }
-
+    
     const data = await response.json();
+    message.success("Test Slack Alert worked - check your Slack!");
     console.log("Service Health Response:", data);
 
     // You can add additional logic here based on the response if needed