working test connection

ui/litellm-dashboard/src/components/add_model/add_model_tab.tsx

@@ -9,7 +9,8 @@ import AdvancedSettings from "./advanced_settings";
 import { Providers, providerLogoMap, getPlaceholder } from "../provider_info_helpers";
 import type { Team } from "../key_team_helpers/key_list";
 import { CredentialItem } from "../networking";
-import { testModelConnection } from "./handle_add_model_submit";
+import { testModelConnection } from "./test_connection_handler";
+import ConnectionErrorDisplay from "./ConnectionErrorDisplay";
 
 interface AddModelTabProps {
   form: FormInstance;
@@ -55,19 +56,34 @@ const AddModelTab: React.FC<AddModelTabProps> = ({
   credentials,
   accessToken,
 }) => {
-  // Add state for test mode
+  // Add state for test mode and connection error
   const [testMode, setTestMode] = useState<string>("chat");
   const [isTestModalVisible, setIsTestModalVisible] = useState<boolean>(false);
+  const [connectionError, setConnectionError] = useState<Error | string | null>(null);
 
   // Add a function to handle test connection
   const handleTestConnection = async () => {
-    const formValues = form.getFieldsValue();
-    await testModelConnection(formValues, accessToken, testMode);
-    setIsTestModalVisible(false);
+    // Clear any previous errors
+    setConnectionError(null);
+    
+    try {
+      const formValues = form.getFieldsValue();
+      
+      // Call the existing testModelConnection function
+      const result = await testModelConnection(formValues, accessToken, testMode, setConnectionError);
+      
+      // Only close the modal on success
+      if (result && result.status === "success") {
+        setIsTestModalVisible(false);
+      }
+    } catch (error) {
+      console.error("Test connection failed:", error);
+    }
   };
 
   // Show test modal with mode selection
   const showTestModal = () => {
+    setConnectionError(null);
     setIsTestModalVisible(true);
   };
 
@@ -233,10 +249,16 @@ const AddModelTab: React.FC<AddModelTabProps> = ({
           <Button key="cancel" onClick={() => setIsTestModalVisible(false)}>
             Cancel
           </Button>,
-          <Button key="test" type="primary" onClick={handleTestConnection}>
+          <Button 
+            key="test" 
+            type="primary" 
+            onClick={handleTestConnection}
+            loading={false} // You might want to add a loading state
+          >
             Test Connection
           </Button>
         ]}
+        width={connectionError ? 700 : 520}
       >
         <div className="mb-4">
           <Typography.Text>Select the mode to test this model with:</Typography.Text>
@@ -252,6 +274,19 @@ const AddModelTab: React.FC<AddModelTabProps> = ({
             Different models support different modes. Choose the appropriate mode for your model.
           </Typography.Text>
         </div>
+        
+        {/* Render the ConnectionErrorDisplay when there's an error */}
+        {connectionError && (
+          <div className="mt-4">
+            <Typography.Title level={5} type="danger">Connection Test Failed</Typography.Title>
+            <div className="border border-red-300 rounded-md overflow-hidden">
+              <ConnectionErrorDisplay 
+                error={connectionError} 
+                modelName={form.getFieldValue('model_name') || form.getFieldValue('model')} 
+              />
+            </div>
+          </div>
+        )}
       </Modal>
     </>
   );

ui/litellm-dashboard/src/components/add_model/handle_add_model_submit.tsx

@@ -176,60 +176,4 @@ export const handleAddModelSubmit = async (
     }
   };
 
-export const testModelConnection = async (
-  formValues: Record<string, any>,
-  accessToken: string,
-  testMode: string,
-  setConnectionError?: (error: Error | string | null) => void
-) => {
-  try {
-    // Prepare the model data using the existing function
-    const result = await prepareModelAddRequest(formValues, accessToken, null);
-    
-    if (!result) {
-      throw new Error("Failed to prepare model data");
-    }
-    
-    const { litellmParamsObj, modelInfoObj } = result;
-    
-    // Create the request body for the test connection
-    const requestBody = {
-      ...litellmParamsObj,  // Unfurl the parameters directly
-      mode: testMode
-    };
-    
-    // Call the test connection endpoint
-    const response = await testConnectionRequest(accessToken, requestBody);
-    
-    if (response.status === "success") {
-      message.success("Connection test successful!");
-      // Clear any previous error when successful
-      if (setConnectionError) {
-        setConnectionError(null);
-      }
-    } else {
-      // Set the error for ConnectionErrorDisplay instead of showing a message
-      const errorMessage = response.message || "Unknown error";
-      if (setConnectionError) {
-        setConnectionError(errorMessage);
-      } else {
-        message.error("Connection test failed: " + errorMessage);
-      }
-    }
-    
-    return response;
-  } catch (error) {
-    console.error("Test connection error:", error);
-    
-    // Set the error for ConnectionErrorDisplay
-    if (setConnectionError) {
-      setConnectionError(error);
-    } else {
-      message.error("Test connection failed: " + error, 10);
-    }
-    
-    throw error;
-  }
-};
-
      

ui/litellm-dashboard/src/components/add_model/test_connection_handler.tsx

@@ -0,0 +1,65 @@
+import { message } from "antd";
+import { testConnectionRequest } from "../networking";
+import { prepareModelAddRequest } from "./handle_add_model_submit";
+
+export const testModelConnection = async (
+  formValues: Record<string, any>,
+  accessToken: string,
+  testMode: string,
+  setConnectionError?: (error: Error | string | null) => void
+) => {
+  try {
+    // Prepare the model data using the existing function
+    const result = await prepareModelAddRequest(formValues, accessToken, null);
+    
+    if (!result) {
+      throw new Error("Failed to prepare model data");
+    }
+    
+    const { litellmParamsObj, modelInfoObj } = result;
+    
+    // Create the request body for the test connection
+    const requestBody = {
+      ...litellmParamsObj,  // Unfurl the parameters directly
+      mode: testMode
+    };
+    
+    // Call the test connection endpoint
+    const response = await testConnectionRequest(accessToken, requestBody);
+    
+    if (response.status === "success") {
+      message.success("Connection test successful!");
+      // Clear any previous error when successful
+      if (setConnectionError) {
+        setConnectionError(null);
+      }
+    } else {
+      // Extract the detailed error message from the response
+      let errorMessage = response.message || "Unknown error";
+      
+      // Check if there's a more detailed error in the result
+      if (response.result && response.result.error) {
+        errorMessage = response.result.error;
+      }
+      
+      if (setConnectionError) {
+        setConnectionError(errorMessage);
+      } else {
+        message.error("Connection test failed: " + errorMessage);
+      }
+    }
+    
+    return response;
+  } catch (error) {
+    console.error("Test connection error:", error);
+    
+    // Set the error for ConnectionErrorDisplay
+    if (setConnectionError) {
+      setConnectionError(error);
+    } else {
+      message.error("Test connection failed: " + error, 10);
+    }
+    
+    return { status: "error", message: error instanceof Error ? error.message : String(error) };
+  }
+};