diff --git a/ui/litellm-dashboard/src/components/budgets/budget_modal.tsx b/ui/litellm-dashboard/src/components/budgets/budget_modal.tsx index b5ad8aaff34..5ff11da85ce 100644 --- a/ui/litellm-dashboard/src/components/budgets/budget_modal.tsx +++ b/ui/litellm-dashboard/src/components/budgets/budget_modal.tsx @@ -1,6 +1,7 @@ import React from "react"; import { TextInput, Accordion, AccordionHeader, AccordionBody } from "@tremor/react"; import { Button as Button2, Modal, Form, InputNumber, Select } from "antd"; +import { useTranslation } from "react-i18next"; import { useCreateBudget } from "@/app/(dashboard)/hooks/budgets/useBudgets"; import NotificationsManager from "../molecules/notifications_manager"; @@ -9,6 +10,7 @@ interface BudgetModalProps { setIsModalVisible: React.Dispatch>; } const BudgetModal: React.FC = ({ isModalVisible, setIsModalVisible }) => { + const { t } = useTranslation(); const [form] = Form.useForm(); const createBudget = useCreateBudget(); @@ -24,20 +26,20 @@ const BudgetModal: React.FC = ({ isModalVisible, setIsModalVis const handleCreate = async (formValues: Record) => { try { - NotificationsManager.info("Making API Call"); + NotificationsManager.info(t("budgets.budgetModal.makingApiCall")); await createBudget.mutateAsync(formValues); - NotificationsManager.success("Budget Created"); + NotificationsManager.success(t("budgets.budgetModal.budgetCreated")); form.resetFields(); setIsModalVisible(false); } catch (error) { console.error("Error creating the budget:", error); - NotificationsManager.fromBackend(`Error creating the budget: ${error}`); + NotificationsManager.fromBackend(t("budgets.budgetModal.errorCreating", { error })); } }; return ( = ({ isModalVisible, setIsModalVis
<> - + - + - Optional Settings + {t("budgets.budgetModal.optionalSettings")} - + - + @@ -86,7 +96,7 @@ const BudgetModal: React.FC = ({ isModalVisible, setIsModalVis
- Create Budget + {t("budgets.budgetModal.createBudgetButton")}
diff --git a/ui/litellm-dashboard/src/components/budgets/budget_panel.tsx b/ui/litellm-dashboard/src/components/budgets/budget_panel.tsx index 744fac64a18..dcce4b81775 100644 --- a/ui/litellm-dashboard/src/components/budgets/budget_panel.tsx +++ b/ui/litellm-dashboard/src/components/budgets/budget_panel.tsx @@ -20,6 +20,7 @@ import { Text, } from "@tremor/react"; import React, { useState } from "react"; +import { useTranslation } from "react-i18next"; import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"; import DeleteResourceModal from "../common_components/DeleteResourceModal"; import TableIconActionButton from "../common_components/IconActionButton/TableIconActionButtons/TableIconActionButton"; @@ -44,6 +45,7 @@ export interface budgetItem { } const BudgetPanel: React.FC = ({ accessToken }) => { + const { t } = useTranslation(); const [isCreateModelVisible, setIsCreateModelVisible] = useState(false); const [isEditModalVisible, setIsEditModalVisible] = useState(false); const [selectedBudget, setSelectedBudget] = useState(null); @@ -75,13 +77,13 @@ const BudgetPanel: React.FC = ({ accessToken }) => { } try { await deleteBudget.mutateAsync(selectedBudget.budget_id); - NotificationsManager.success("Budget deleted."); + NotificationsManager.success(t("budgets.budgetPanel.budgetDeleted")); } catch (error) { console.error("Error deleting budget:", error); if (typeof NotificationsManager.fromBackend === "function") { - NotificationsManager.fromBackend("Failed to delete budget"); + NotificationsManager.fromBackend(t("budgets.budgetPanel.failedToDelete")); } else { - NotificationsManager.info("Failed to delete budget"); + NotificationsManager.info(t("budgets.budgetPanel.failedToDelete")); } } finally { setIsDeleteModalVisible(false); @@ -97,13 +99,13 @@ const BudgetPanel: React.FC = ({ accessToken }) => {
{canModify && ( )} - Budgets - Examples + {t("budgets.budgetPanel.tabBudgets")} + {t("budgets.budgetPanel.tabExamples")} @@ -117,14 +119,14 @@ const BudgetPanel: React.FC = ({ accessToken }) => { /> )} - Create a budget to assign to customers. + {t("budgets.budgetPanel.createBudgetDescription")} - Budget ID - Max Budget - TPM - RPM + {t("budgets.budgetPanel.colBudgetId")} + {t("budgets.budgetPanel.colMaxBudget")} + {t("budgets.budgetPanel.colTpm")} + {t("budgets.budgetPanel.colRpm")} @@ -142,13 +144,13 @@ const BudgetPanel: React.FC = ({ accessToken }) => { <> handleEditCall(value)} dataTestId="edit-budget-button" /> handleDeleteClick(value)} dataTestId="delete-budget-button" /> @@ -161,14 +163,14 @@ const BudgetPanel: React.FC = ({ accessToken }) => { = ({ accessToken }) => {
- How to use budget id + {t("budgets.budgetPanel.howToUseBudgetId")} - Assign Budget to Customer - Test it (Curl) - Test it (OpenAI SDK) + {t("budgets.budgetPanel.tabAssignBudget")} + {t("budgets.budgetPanel.tabTestCurl")} + {t("budgets.budgetPanel.tabTestSdk")} diff --git a/ui/litellm-dashboard/src/components/budgets/edit_budget_modal.tsx b/ui/litellm-dashboard/src/components/budgets/edit_budget_modal.tsx index 8b95a8366fa..55c1ebeca1d 100644 --- a/ui/litellm-dashboard/src/components/budgets/edit_budget_modal.tsx +++ b/ui/litellm-dashboard/src/components/budgets/edit_budget_modal.tsx @@ -1,6 +1,7 @@ import React, { useEffect } from "react"; import { TextInput, Accordion, AccordionHeader, AccordionBody } from "@tremor/react"; import { Button as Button2, Modal, Form, InputNumber, Select } from "antd"; +import { useTranslation } from "react-i18next"; import { useUpdateBudget } from "@/app/(dashboard)/hooks/budgets/useBudgets"; import { budgetItem } from "./budget_panel"; import NotificationsManager from "../molecules/notifications_manager"; @@ -11,6 +12,7 @@ interface EditBudgetModalProps { existingBudget: budgetItem; } const EditBudgetModal: React.FC = ({ isModalVisible, setIsModalVisible, existingBudget }) => { + const { t } = useTranslation(); const [form] = Form.useForm(); const updateBudget = useUpdateBudget(); @@ -30,19 +32,26 @@ const EditBudgetModal: React.FC = ({ isModalVisible, setIs const handleUpdate = async (formValues: Record) => { try { - NotificationsManager.info("Making API Call"); + NotificationsManager.info(t("budgets.editBudgetModal.makingApiCall")); await updateBudget.mutateAsync(formValues); - NotificationsManager.success("Budget Updated"); + NotificationsManager.success(t("budgets.editBudgetModal.budgetUpdated")); form.resetFields(); setIsModalVisible(false); } catch (error) { console.error("Error updating the budget:", error); - NotificationsManager.fromBackend(`Error updating the budget: ${error}`); + NotificationsManager.fromBackend(t("budgets.editBudgetModal.errorUpdating", { error })); } }; return ( - +
= ({ isModalVisible, setIs initialValues={existingBudget} > <> - + - + - + - Optional Settings + {t("budgets.editBudgetModal.optionalSettings")} - + - + @@ -82,7 +103,7 @@ const EditBudgetModal: React.FC = ({ isModalVisible, setIs
- Save + {t("common.save")}
diff --git a/ui/litellm-dashboard/src/locales/en.json b/ui/litellm-dashboard/src/locales/en.json index f0667c5887f..5352da828b0 100644 --- a/ui/litellm-dashboard/src/locales/en.json +++ b/ui/litellm-dashboard/src/locales/en.json @@ -7616,5 +7616,64 @@ "needHelp": "Need Help?", "reuseCredentials": "Reuse Credentials" } + }, + "budgets": { + "budgetModal": { + "title": "Create Budget", + "makingApiCall": "Making API Call", + "budgetCreated": "Budget Created", + "errorCreating": "Error creating the budget: {{error}}", + "budgetIdLabel": "Budget ID", + "budgetIdRequired": "Please input a human-friendly name for the budget", + "budgetIdHelp": "A human-friendly name for the budget", + "tpmLimitLabel": "Max Tokens per minute", + "rpmLimitLabel": "Max Requests per minute", + "defaultModelLimit": "Default is model limit.", + "optionalSettings": "Optional Settings", + "maxBudgetLabel": "Max Budget (USD)", + "resetBudgetLabel": "Reset Budget", + "daily": "daily", + "weekly": "weekly", + "monthly": "monthly", + "createBudgetButton": "Create Budget" + }, + "budgetPanel": { + "budgetDeleted": "Budget deleted.", + "failedToDelete": "Failed to delete budget", + "createBudgetButton": "+ Create Budget", + "tabBudgets": "Budgets", + "tabExamples": "Examples", + "createBudgetDescription": "Create a budget to assign to customers.", + "colBudgetId": "Budget ID", + "colMaxBudget": "Max Budget", + "colTpm": "TPM", + "colRpm": "RPM", + "editBudgetTooltip": "Edit budget", + "deleteBudgetTooltip": "Delete budget", + "deleteTitle": "Delete Budget?", + "deleteMessage": "Are you sure you want to delete this budget? This action cannot be undone.", + "budgetInformation": "Budget Information", + "howToUseBudgetId": "How to use budget id", + "tabAssignBudget": "Assign Budget to Customer", + "tabTestCurl": "Test it (Curl)", + "tabTestSdk": "Test it (OpenAI SDK)" + }, + "editBudgetModal": { + "title": "Edit Budget", + "makingApiCall": "Making API Call", + "budgetUpdated": "Budget Updated", + "errorUpdating": "Error updating the budget: {{error}}", + "budgetIdLabel": "Budget ID", + "budgetIdHelp": "Budget ID cannot be changed after creation", + "tpmLimitLabel": "Max Tokens per minute", + "rpmLimitLabel": "Max Requests per minute", + "defaultModelLimit": "Default is model limit.", + "optionalSettings": "Optional Settings", + "maxBudgetLabel": "Max Budget (USD)", + "resetBudgetLabel": "Reset Budget", + "daily": "daily", + "weekly": "weekly", + "monthly": "monthly" + } } } diff --git a/ui/litellm-dashboard/src/locales/zh-CN.json b/ui/litellm-dashboard/src/locales/zh-CN.json index 3b972d28efe..2d1324c08f6 100644 --- a/ui/litellm-dashboard/src/locales/zh-CN.json +++ b/ui/litellm-dashboard/src/locales/zh-CN.json @@ -7616,5 +7616,64 @@ "needHelp": "需要帮助?", "reuseCredentials": "复用凭据" } + }, + "budgets": { + "budgetModal": { + "title": "创建预算", + "makingApiCall": "正在调用 API", + "budgetCreated": "预算已创建", + "errorCreating": "创建预算时出错:{{error}}", + "budgetIdLabel": "预算 ID", + "budgetIdRequired": "请输入一个易于识别的预算名称", + "budgetIdHelp": "一个易于识别的预算名称", + "tpmLimitLabel": "每分钟最大 Token 数", + "rpmLimitLabel": "每分钟最大请求数", + "defaultModelLimit": "默认使用模型限制。", + "optionalSettings": "可选设置", + "maxBudgetLabel": "最大预算(美元)", + "resetBudgetLabel": "重置预算", + "daily": "每天", + "weekly": "每周", + "monthly": "每月", + "createBudgetButton": "创建预算" + }, + "budgetPanel": { + "budgetDeleted": "预算已删除。", + "failedToDelete": "删除预算失败", + "createBudgetButton": "+ 创建预算", + "tabBudgets": "预算", + "tabExamples": "示例", + "createBudgetDescription": "创建预算以分配给客户。", + "colBudgetId": "预算 ID", + "colMaxBudget": "最大预算", + "colTpm": "TPM", + "colRpm": "RPM", + "editBudgetTooltip": "编辑预算", + "deleteBudgetTooltip": "删除预算", + "deleteTitle": "删除预算?", + "deleteMessage": "确定要删除此预算吗?此操作不可撤销。", + "budgetInformation": "预算信息", + "howToUseBudgetId": "如何使用预算 ID", + "tabAssignBudget": "分配预算给客户", + "tabTestCurl": "测试(Curl)", + "tabTestSdk": "测试(OpenAI SDK)" + }, + "editBudgetModal": { + "title": "编辑预算", + "makingApiCall": "正在调用 API", + "budgetUpdated": "预算已更新", + "errorUpdating": "更新预算时出错:{{error}}", + "budgetIdLabel": "预算 ID", + "budgetIdHelp": "预算 ID 创建后不可更改", + "tpmLimitLabel": "每分钟最大 Token 数", + "rpmLimitLabel": "每分钟最大请求数", + "defaultModelLimit": "默认使用模型限制。", + "optionalSettings": "可选设置", + "maxBudgetLabel": "最大预算(美元)", + "resetBudgetLabel": "重置预算", + "daily": "每天", + "weekly": "每周", + "monthly": "每月" + } } }