From afba10c9c3d2dbe879ddea9db3404cd35d8e1384 Mon Sep 17 00:00:00 2001 From: Krrish Dholakia Date: Tue, 23 Apr 2024 22:49:30 -0700 Subject: [PATCH] build(ui): fixes --- .../src/components/model_dashboard.tsx | 180 +++++++++--------- .../src/components/user_dashboard.tsx | 23 ++- 2 files changed, 112 insertions(+), 91 deletions(-) diff --git a/ui/litellm-dashboard/src/components/model_dashboard.tsx b/ui/litellm-dashboard/src/components/model_dashboard.tsx index 9735bb83c..499ddcd0a 100644 --- a/ui/litellm-dashboard/src/components/model_dashboard.tsx +++ b/ui/litellm-dashboard/src/components/model_dashboard.tsx @@ -74,6 +74,96 @@ const provider_map: Record = { }; +const handleSubmit = async (formValues: Record, 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 = 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 = {}; + const modelInfoObj: Record = {}; + // 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 = ({ accessToken, token, @@ -295,93 +385,7 @@ const ModelDashboard: React.FC = ({ } }; - const handleSubmit = async (formValues: Record) => { - 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 = 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 = {}; - const modelInfoObj: Record = {}; - // 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 = ({ form .validateFields() .then((values) => { - handleSubmit(values); + handleSubmit(values, accessToken, form); // form.resetFields(); }) .catch((error) => { @@ -686,4 +690,4 @@ const ModelDashboard: React.FC = ({ ); }; -export default ModelDashboard; +export default ModelDashboard; \ No newline at end of file diff --git a/ui/litellm-dashboard/src/components/user_dashboard.tsx b/ui/litellm-dashboard/src/components/user_dashboard.tsx index d0dac5180..c55e42424 100644 --- a/ui/litellm-dashboard/src/components/user_dashboard.tsx +++ b/ui/litellm-dashboard/src/components/user_dashboard.tsx @@ -32,6 +32,12 @@ interface UserDashboardProps { setKeys: React.Dispatch>; } +type TeamInterface = { + models: any[]; + team_id: null; + team_alias: String +} + const UserDashboard: React.FC = ({ userID, userRole, @@ -56,8 +62,13 @@ const UserDashboard: React.FC = ({ const [accessToken, setAccessToken] = useState(null); const [teamSpend, setTeamSpend] = useState(null); const [userModels, setUserModels] = useState([]); + const defaultTeam: TeamInterface = { + "models": [], + "team_alias": "Default Team", + "team_id": null + } const [selectedTeam, setSelectedTeam] = useState( - 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 = ({ } 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 = ({ ); }; -export default UserDashboard; +export default UserDashboard; \ No newline at end of file