From 84d70d75cc92333d4aeeab6f719616e52f959d25 Mon Sep 17 00:00:00 2001 From: Krrish Dholakia Date: Thu, 13 Jun 2024 14:51:45 -0700 Subject: [PATCH 1/2] build(ui/teams.tsx): allow resetting teams budget --- litellm/proxy/_experimental/out/404.html | 1 - .../proxy/_experimental/out/model_hub.html | 1 - .../proxy/_experimental/out/onboarding.html | 1 - .../src/components/create_key_button.tsx | 1 + ui/litellm-dashboard/src/components/teams.tsx | 22 +++++++++++++++++++ 5 files changed, 23 insertions(+), 3 deletions(-) delete mode 100644 litellm/proxy/_experimental/out/404.html delete mode 100644 litellm/proxy/_experimental/out/model_hub.html delete mode 100644 litellm/proxy/_experimental/out/onboarding.html diff --git a/litellm/proxy/_experimental/out/404.html b/litellm/proxy/_experimental/out/404.html deleted file mode 100644 index e97c72fc132..00000000000 --- a/litellm/proxy/_experimental/out/404.html +++ /dev/null @@ -1 +0,0 @@ -404: This page could not be found.LiteLLM Dashboard

404

This page could not be found.

\ No newline at end of file diff --git a/litellm/proxy/_experimental/out/model_hub.html b/litellm/proxy/_experimental/out/model_hub.html deleted file mode 100644 index 5b965b3bdc2..00000000000 --- a/litellm/proxy/_experimental/out/model_hub.html +++ /dev/null @@ -1 +0,0 @@ -LiteLLM Dashboard \ No newline at end of file diff --git a/litellm/proxy/_experimental/out/onboarding.html b/litellm/proxy/_experimental/out/onboarding.html deleted file mode 100644 index 33efe1f8ea1..00000000000 --- a/litellm/proxy/_experimental/out/onboarding.html +++ /dev/null @@ -1 +0,0 @@ -LiteLLM Dashboard \ No newline at end of file diff --git a/ui/litellm-dashboard/src/components/create_key_button.tsx b/ui/litellm-dashboard/src/components/create_key_button.tsx index 83e8d926474..75edb2ef3bc 100644 --- a/ui/litellm-dashboard/src/components/create_key_button.tsx +++ b/ui/litellm-dashboard/src/components/create_key_button.tsx @@ -261,6 +261,7 @@ const CreateKey: React.FC = ({ > diff --git a/ui/litellm-dashboard/src/components/teams.tsx b/ui/litellm-dashboard/src/components/teams.tsx index 9e5758a283d..95f097bf09c 100644 --- a/ui/litellm-dashboard/src/components/teams.tsx +++ b/ui/litellm-dashboard/src/components/teams.tsx @@ -151,6 +151,17 @@ const Team: React.FC = ({ + + + daily + weekly + monthly + + @@ -635,6 +646,17 @@ const Team: React.FC = ({ + + + daily + weekly + monthly + + Date: Thu, 13 Jun 2024 15:10:01 -0700 Subject: [PATCH 2/2] build: allow resetting customer budget weekly + edit customer budget panel --- .../src/components/budgets/budget_modal.tsx | 1 + .../src/components/budgets/budget_panel.tsx | 28 +++- .../components/budgets/edit_budget_modal.tsx | 145 ++++++++++++++++++ ui/litellm-dashboard/src/components/teams.tsx | 20 +-- 4 files changed, 183 insertions(+), 11 deletions(-) create mode 100644 ui/litellm-dashboard/src/components/budgets/edit_budget_modal.tsx diff --git a/ui/litellm-dashboard/src/components/budgets/budget_modal.tsx b/ui/litellm-dashboard/src/components/budgets/budget_modal.tsx index 2c32d88bd09..551e8d37a02 100644 --- a/ui/litellm-dashboard/src/components/budgets/budget_modal.tsx +++ b/ui/litellm-dashboard/src/components/budgets/budget_modal.tsx @@ -122,6 +122,7 @@ const BudgetModal: React.FC = ({ > diff --git a/ui/litellm-dashboard/src/components/budgets/budget_panel.tsx b/ui/litellm-dashboard/src/components/budgets/budget_panel.tsx index c52ca163188..4d2752a9b59 100644 --- a/ui/litellm-dashboard/src/components/budgets/budget_panel.tsx +++ b/ui/litellm-dashboard/src/components/budgets/budget_panel.tsx @@ -6,6 +6,7 @@ import React, { useState, useEffect } from "react"; import BudgetSettings from "./budget_settings"; import BudgetModal from "./budget_modal"; +import EditBudgetModal from "./edit_budget_modal"; import { Table, TableBody, @@ -43,7 +44,7 @@ interface BudgetSettingsPageProps { accessToken: string | null; } -interface budgetItem { +export interface budgetItem { budget_id: string; max_budget: string | null; rpm_limit: number | null; @@ -52,6 +53,8 @@ interface budgetItem { const BudgetPanel: React.FC = ({ accessToken }) => { const [isModalVisible, setIsModalVisible] = useState(false); + const [isEditModalVisible, setIsEditModalVisible] = useState(false); + const [selectedBudget, setSelectedBudget] = useState(null); const [budgetList, setBudgetList] = useState([]); useEffect(() => { if (!accessToken) { @@ -62,6 +65,15 @@ const BudgetPanel: React.FC = ({ accessToken }) => { }); }, [accessToken]); + + const handleEditCall = async (budget_id: string, index: number) => { + if (accessToken == null) { + return; + } + setSelectedBudget(budgetList[index]) + setIsEditModalVisible(true) + }; + const handleDeleteCall = async (budget_id: string, index: number) => { if (accessToken == null) { return; @@ -94,6 +106,15 @@ const BudgetPanel: React.FC = ({ accessToken }) => { setIsModalVisible={setIsModalVisible} setBudgetList={setBudgetList} /> + { + selectedBudget && + } Create a budget to assign to customers. @@ -119,6 +140,11 @@ const BudgetPanel: React.FC = ({ accessToken }) => { {value.rpm_limit ? value.rpm_limit : "n/a"} + handleEditCall(value.budget_id, index)} + /> >; + setBudgetList: React.Dispatch>; + existingBudget: budgetItem +} +const EditBudgetModal: React.FC = ({ + isModalVisible, + accessToken, + setIsModalVisible, + setBudgetList, + existingBudget +}) => { + const [form] = Form.useForm(); + const handleOk = () => { + setIsModalVisible(false); + form.resetFields(); + }; + + const handleCancel = () => { + setIsModalVisible(false); + form.resetFields(); + }; + + const handleCreate = async (formValues: Record) => { + if (accessToken == null || accessToken == undefined) { + return; + } + try { + message.info("Making API Call"); + // setIsModalVisible(true); + const response = await budgetCreateCall(accessToken, formValues); + console.log("key create Response:", response); + setBudgetList((prevData) => + prevData ? [...prevData, response] : [response] + ); // Check if prevData is null + message.success("API Key Created"); + form.resetFields(); + } catch (error) { + console.error("Error creating the key:", error); + message.error(`Error creating the key: ${error}`, 20); + } + }; + + return ( + +
+ <> + + + + + + + + + + + + + Optional Settings + + + + + + + + + + + + +
+ Edit Budget +
+ + + ); +}; + +export default EditBudgetModal; diff --git a/ui/litellm-dashboard/src/components/teams.tsx b/ui/litellm-dashboard/src/components/teams.tsx index 95f097bf09c..d11d7a84234 100644 --- a/ui/litellm-dashboard/src/components/teams.tsx +++ b/ui/litellm-dashboard/src/components/teams.tsx @@ -152,16 +152,16 @@ const Team: React.FC = ({ - - daily - weekly - monthly - - + className="mt-8" + label="Reset Budget" + name="budget_duration" + > + + daily + weekly + monthly + +