diff --git a/ui/litellm-dashboard/src/app/page.tsx b/ui/litellm-dashboard/src/app/page.tsx index 96731f7f57..ce69250815 100644 --- a/ui/litellm-dashboard/src/app/page.tsx +++ b/ui/litellm-dashboard/src/app/page.tsx @@ -189,6 +189,7 @@ const CreateKeyPage = () => { userRole={userRole} token={token} accessToken={accessToken} + keys={keys} /> )} diff --git a/ui/litellm-dashboard/src/components/networking.tsx b/ui/litellm-dashboard/src/components/networking.tsx index a05b3848ee..e1375e7d46 100644 --- a/ui/litellm-dashboard/src/components/networking.tsx +++ b/ui/litellm-dashboard/src/components/networking.tsx @@ -797,7 +797,7 @@ export const adminTopEndUsersCall = async ( let body = ""; if (keyToken) { - body = JSON.stringify({ api_key: keyToken }); + body = JSON.stringify({ api_key: keyToken, startTime: startTime, endTime: endTime }); } else { body = JSON.stringify({ startTime: startTime, endTime: endTime }); } diff --git a/ui/litellm-dashboard/src/components/usage.tsx b/ui/litellm-dashboard/src/components/usage.tsx index 9efb346a40..481a418d53 100644 --- a/ui/litellm-dashboard/src/components/usage.tsx +++ b/ui/litellm-dashboard/src/components/usage.tsx @@ -24,6 +24,7 @@ interface UsagePageProps { token: string | null; userRole: string | null; userID: string | null; + keys: any[] | null; } type CustomTooltipTypeBar = { @@ -103,6 +104,7 @@ const UsagePage: React.FC = ({ token, userRole, userID, + keys, }) => { const currentDate = new Date(); const [keySpendData, setKeySpendData] = useState([]); @@ -113,6 +115,7 @@ const UsagePage: React.FC = ({ const [topTagsData, setTopTagsData] = useState([]); const [uniqueTeamIds, setUniqueTeamIds] = useState([]); const [totalSpendPerTeam, setTotalSpendPerTeam] = useState([]); + const [selectedKeyID, setSelectedKeyID] = useState(""); const [dateValue, setDateValue] = useState({ from: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000), to: new Date(), @@ -132,14 +135,18 @@ const UsagePage: React.FC = ({ let startTime = formatDate(firstDay); let endTime = formatDate(lastDay); + console.log("keys in usage", keys); + const updateEndUserData = async (startTime: Date | undefined, endTime: Date | undefined) => { if (!startTime || !endTime || !accessToken) { return; } + console.log("selectedKeyID", selectedKeyID); + let newTopUserData = await adminTopEndUsersCall( accessToken, - null, + selectedKeyID, startTime.toISOString(), endTime.toISOString() ) @@ -376,6 +383,30 @@ const UsagePage: React.FC = ({ updateEndUserData(value.from, value.to); // Call updateModelMetrics with the new date range }} /> + Key + End Users of your LLM API calls. Tracked When a `user` param is passed in your LLM calls