build(ui): fixes

ui/litellm-dashboard/src/components/model_dashboard.tsx

@@ -74,6 +74,96 @@ const provider_map: Record <string, string> = {
 };
 
 
+const handleSubmit = async (formValues: Record<string, any>, accessToken: string, form: any) => {
+  try {
+    /**
+     * For multiple litellm model names - create a separate deployment for each 
+     * - get the list
+     * - iterate through it 
+     * - create a new deployment for each
+     * 
+     * For single model name -> make it a 1 item list
+     */
+
+    // get the list of deployments
+    let deployments: Array<string> = Array.isArray(formValues["model"]) ? formValues["model"] : [formValues["model"]];
+    console.log(`received deployments: ${deployments}`)
+    console.log(`received type of deployments: ${typeof deployments}`)
+    deployments.forEach(async (litellm_model) => { 
+      console.log(`litellm_model: ${litellm_model}`)
+      const litellmParamsObj: Record<string, any>  = {};
+      const modelInfoObj: Record<string, any>  = {};
+      // Iterate through the key-value pairs in formValues
+      litellmParamsObj["model"] = litellm_model
+      let modelName: string  = "";
+      for (const [key, value] of Object.entries(formValues)) {
+        if (key == "model_name") {
+          modelName = modelName + value
+        }
+        else if (key == "custom_llm_provider") {
+          // const providerEnumValue = Providers[value as keyof typeof Providers];
+          // const mappingResult = provider_map[providerEnumValue]; // Get the corresponding value from the mapping
+          // modelName = mappingResult + "/" + modelName
+          continue
+        }
+        else if (key == "model") {
+          continue
+        }
+
+        // Check if key is "base_model"
+        else if (key === "base_model") {
+          // Add key-value pair to model_info dictionary
+          modelInfoObj[key] = value;
+        }
+
+        else if (key == "litellm_extra_params") {
+          console.log("litellm_extra_params:", value);
+          let litellmExtraParams = {};
+          if (value && value != undefined) {
+            try {
+              litellmExtraParams = JSON.parse(value);
+            }
+            catch (error) {
+              message.error("Failed to parse LiteLLM Extra Params: " + error, 20);
+              throw new Error("Failed to parse litellm_extra_params: " + error);
+            }
+            for (const [key, value] of Object.entries(litellmExtraParams)) {
+              litellmParamsObj[key] = value;
+            }
+          }
+        }
+
+        // Check if key is any of the specified API related keys
+        else {
+          // Add key-value pair to litellm_params dictionary
+          litellmParamsObj[key] = value;
+        }
+      }
+
+      const new_model: Model = {  
+        "model_name": modelName,
+        "litellm_params": litellmParamsObj,
+        "model_info": modelInfoObj
+      }
+
+      
+
+      const response: any = await modelCreateCall(
+        accessToken,
+        new_model
+      );
+
+      console.log(`response for model create call: ${response["data"]}`);
+    }); 
+    
+    form.resetFields();
+
+    
+    } catch (error) {
+      message.error("Failed to create model: " + error, 20);
+    }
+}
+
 const ModelDashboard: React.FC<ModelDashboardProps> = ({
   accessToken,
   token,
@@ -295,93 +385,7 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
     }
   };
 
-  const handleSubmit = async (formValues: Record<string, any>) => {
-    try {
-      /**
-       * For multiple litellm model names - create a separate deployment for each 
-       * - get the list
-       * - iterate through it 
-       * - create a new deployment for each
-       */
 
-      // get the list of deployments
-      let deployments: Array<string> = Object.values(formValues["model"])
-      console.log(`received deployments: ${deployments}`)
-      console.log(`received type of deployments: ${typeof deployments}`)
-      deployments.forEach(async (litellm_model) => { 
-        console.log(`litellm_model: ${litellm_model}`)
-        const litellmParamsObj: Record<string, any>  = {};
-        const modelInfoObj: Record<string, any>  = {};
-        // Iterate through the key-value pairs in formValues
-        litellmParamsObj["model"] = litellm_model
-        let modelName: string  = "";
-        for (const [key, value] of Object.entries(formValues)) {
-          if (key == "model_name") {
-            modelName = modelName + value
-          }
-          else if (key == "custom_llm_provider") {
-            // const providerEnumValue = Providers[value as keyof typeof Providers];
-            // const mappingResult = provider_map[providerEnumValue]; // Get the corresponding value from the mapping
-            // modelName = mappingResult + "/" + modelName
-            continue
-          }
-          else if (key == "model") {
-            continue
-          }
-
-          // Check if key is "base_model"
-          else if (key === "base_model") {
-            // Add key-value pair to model_info dictionary
-            modelInfoObj[key] = value;
-          }
-
-          else if (key == "litellm_extra_params") {
-            console.log("litellm_extra_params:", value);
-            let litellmExtraParams = {};
-            if (value && value != undefined) {
-              try {
-                litellmExtraParams = JSON.parse(value);
-              }
-              catch (error) {
-                message.error("Failed to parse LiteLLM Extra Params: " + error, 20);
-                throw new Error("Failed to parse litellm_extra_params: " + error);
-              }
-              for (const [key, value] of Object.entries(litellmExtraParams)) {
-                litellmParamsObj[key] = value;
-              }
-            }
-          }
-
-          // Check if key is any of the specified API related keys
-          else {
-            // Add key-value pair to litellm_params dictionary
-            litellmParamsObj[key] = value;
-          }
-        }
-
-        const new_model: Model = {  
-          "model_name": modelName,
-          "litellm_params": litellmParamsObj,
-          "model_info": modelInfoObj
-        }
-  
-        
-  
-        const response: any = await modelCreateCall(
-          accessToken,
-          new_model
-        );
-
-        console.log(`response for model create call: ${response["data"]}`);
-      }); 
-      
-      form.resetFields();
-
-      
-      } catch (error) {
-        message.error("Failed to create model: " + error, 20);
-      }
-  }
 
   const getPlaceholder = (selectedProvider: string): string => {
     if (selectedProvider === Providers.Vertex_AI) {
@@ -401,7 +405,7 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
     form
         .validateFields()
         .then((values) => {
-          handleSubmit(values);
+          handleSubmit(values, accessToken, form);
           // form.resetFields();
         })
         .catch((error) => {
@@ -686,4 +690,4 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
   );
 };
 
-export default ModelDashboard;
+export default ModelDashboard;

ui/litellm-dashboard/src/components/user_dashboard.tsx

@@ -32,6 +32,12 @@ interface UserDashboardProps {
   setKeys: React.Dispatch<React.SetStateAction<Object[] | null>>;
 }
 
+type TeamInterface = {
+  models: any[];
+  team_id: null;
+  team_alias: String
+}
+
 const UserDashboard: React.FC<UserDashboardProps> = ({
   userID,
   userRole,
@@ -56,8 +62,13 @@ const UserDashboard: React.FC<UserDashboardProps> = ({
   const [accessToken, setAccessToken] = useState<string | null>(null);
   const [teamSpend, setTeamSpend] = useState<number | null>(null);
   const [userModels, setUserModels] = useState<string[]>([]);
+  const defaultTeam: TeamInterface = {
+    "models": [],
+    "team_alias": "Default Team",
+    "team_id": null
+  }
   const [selectedTeam, setSelectedTeam] = useState<any | null>(
-    teams ? teams[0] : null
+    teams ? teams[0] : defaultTeam
   );
   // check if window is not undefined
   if (typeof window !== "undefined") {
@@ -141,7 +152,13 @@ const UserDashboard: React.FC<UserDashboardProps> = ({
             }
             setKeys(response["keys"]); // Assuming this is the correct path to your data
             setTeams(response["teams"]);
-            setSelectedTeam(response["teams"] ? response["teams"][0] : null);
+            const teamsArray = [...response['teams']];
+            if (teamsArray.length > 0) {
+                console.log(`response['teams']: ${teamsArray}`);
+                setSelectedTeam(teamsArray[0]);
+            } else {
+                setSelectedTeam(defaultTeam);
+            }
             sessionStorage.setItem(
               "userData" + userID,
               JSON.stringify(response["keys"])
@@ -273,4 +290,4 @@ const UserDashboard: React.FC<UserDashboardProps> = ({
   );
 };
 
-export default UserDashboard;
+export default UserDashboard;