diff --git a/ui/litellm-dashboard/src/components/usage.tsx b/ui/litellm-dashboard/src/components/usage.tsx index 4a6abdcc147..32054e78cec 100644 --- a/ui/litellm-dashboard/src/components/usage.tsx +++ b/ui/litellm-dashboard/src/components/usage.tsx @@ -13,6 +13,7 @@ import { } from "@tremor/react"; import React, { useState, useEffect } from "react"; +import { useTranslation, Trans } from "react-i18next"; import ViewUserSpend from "./view_user_spend"; import { ProxySettings } from "./user_dashboard"; @@ -133,6 +134,7 @@ const isAdminOrAdminViewer = (role: string | null): boolean => { }; const UsagePage: React.FC = ({ accessToken, token, userRole, userID, keys, premiumUser }) => { + const { t } = useTranslation(); const currentDate = new Date(); const [keySpendData, setKeySpendData] = useState([]); const [topKeys, setTopKeys] = useState([]); @@ -540,15 +542,15 @@ const UsagePage: React.FC = ({ accessToken, token, userRole, use return (
- Database Query Limit Reached + {t("usage.dbLimitTitle")} - SpendLogs in DB has {proxySettings.NUM_SPEND_LOGS_ROWS} rows. + {t("usage.dbLimitRows", { count: proxySettings.NUM_SPEND_LOGS_ROWS })}

- Please follow our guide to view usage when SpendLogs has more than 1M rows. + {t("usage.dbLimitGuide")}
@@ -560,13 +562,13 @@ const UsagePage: React.FC = ({ accessToken, token, userRole, use
- All Up + {t("usage.tabAllUp")} {isAdminOrAdminViewer(userRole) ? ( <> - Team Based Usage - Customer Usage - Tag Based Usage + {t("usage.tabTeamBased")} + {t("usage.tabCustomer")} + {t("usage.tabTagBased")} ) : ( <> @@ -578,22 +580,24 @@ const UsagePage: React.FC = ({ accessToken, token, userRole, use - Cost - Activity + {t("usage.tabCost")} + {t("usage.tabActivity")} - Project Spend {new Date().toLocaleString("default", { month: "long" })} 1 -{" "} - {new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0).getDate()} + {t("usage.projectSpend", { + month: new Date().toLocaleString("default", { month: "long" }), + days: new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0).getDate(), + })} - Monthly Spend + {t("usage.monthlySpend")} = ({ accessToken, token, userRole, use - Top Virtual Keys + {t("usage.topVirtualKeys")} {}} /> - Top Models + {t("usage.topModels")} = ({ accessToken, token, userRole, use - Spend by Provider + {t("usage.spendByProvider")} <> @@ -650,8 +654,8 @@ const UsagePage: React.FC = ({ accessToken, token, userRole, use - Provider - Spend + {t("usage.colProvider")} + {t("usage.colSpend")} @@ -660,7 +664,7 @@ const UsagePage: React.FC = ({ accessToken, token, userRole, use {provider.provider} {parseFloat(provider.spend.toFixed(2)) < 0.00001 - ? "less than 0.00" + ? t("usage.lessThanZero") : formatNumberWithCommas(provider.spend, 2)} @@ -677,11 +681,11 @@ const UsagePage: React.FC = ({ accessToken, token, userRole, use - All Up + {t("usage.tabAllUp")} - API Requests {valueFormatterNumbers(globalActivity.sum_api_requests)} + {t("usage.apiRequests", { count: valueFormatterNumbers(globalActivity.sum_api_requests) })} = ({ accessToken, token, userRole, use - Tokens {valueFormatterNumbers(globalActivity.sum_total_tokens)} + {t("usage.tokens", { count: valueFormatterNumbers(globalActivity.sum_total_tokens) })} = ({ accessToken, token, userRole, use - API Requests {valueFormatterNumbers(globalActivity.sum_api_requests)} + {t("usage.apiRequests", { + count: valueFormatterNumbers(globalActivity.sum_api_requests), + })} = ({ accessToken, token, userRole, use - Tokens {valueFormatterNumbers(globalActivity.sum_total_tokens)} + {t("usage.tokens", { count: valueFormatterNumbers(globalActivity.sum_total_tokens) })} = ({ accessToken, token, userRole, use - Total Spend Per Team + {t("usage.totalSpendPerTeam")} - Daily Spend Per Team + {t("usage.dailySpendPerTeam")} = ({ accessToken, token, userRole, use

- Customers of your LLM API calls. Tracked when a `user` param is passed in your LLM calls{" "} - - docs here - + + ), + }} + />

@@ -793,7 +803,7 @@ const UsagePage: React.FC = ({ accessToken, token, userRole, use /> - Select Key + {t("usage.selectKey")}
- Customer - Spend - Total Events + {t("usage.colCustomer")} + {t("usage.colSpend")} + {t("usage.colTotalEvents")} @@ -868,7 +878,7 @@ const UsagePage: React.FC = ({ accessToken, token, userRole, use value={"all-tags"} onClick={() => setSelectedTags(["all-tags"])} > - All Tags + {t("usage.allTags")} {allTagNames && allTagNames @@ -890,7 +900,7 @@ const UsagePage: React.FC = ({ accessToken, token, userRole, use value={"all-tags"} onClick={() => setSelectedTags(["all-tags"])} > - All Tags + {t("usage.allTags")} {allTagNames && allTagNames @@ -903,7 +913,7 @@ const UsagePage: React.FC = ({ accessToken, token, userRole, use // @ts-ignore disabled={true} > - ✨ {tag} (Enterprise only Feature) + ✨ {tag} {t("usage.enterpriseOnlyFeature")} ); })} @@ -915,16 +925,20 @@ const UsagePage: React.FC = ({ accessToken, token, userRole, use - Spend Per Tag + {t("usage.spendPerTag")} - Get Started by Tracking cost per tag{" "} - - here - + + ), + }} + /> = ({ accessToken, userRole, dateValue, onDateChange }) => { + const { t } = useTranslation(); // Maximum number of categories to show in charts to prevent color palette overflow const MAX_CATEGORIES = 10; @@ -375,16 +377,16 @@ const UserAgentActivity: React.FC = ({ accessToken, user
- Summary by User Agent - Performance metrics for different user agents + {t("userAgentActivity.summaryTitle")} + {t("userAgentActivity.summarySubtitle")}
{/* User Agent Filter */}
- Filter by User Agents + {t("userAgentActivity.filterLabel")}