diff --git a/ui/litellm-dashboard/src/components/usage.tsx b/ui/litellm-dashboard/src/components/usage.tsx index 24630699485..933bc0c36b5 100644 --- a/ui/litellm-dashboard/src/components/usage.tsx +++ b/ui/litellm-dashboard/src/components/usage.tsx @@ -115,7 +115,7 @@ const UsagePage: React.FC = ({ const [topTagsData, setTopTagsData] = useState([]); const [uniqueTeamIds, setUniqueTeamIds] = useState([]); const [totalSpendPerTeam, setTotalSpendPerTeam] = useState([]); - const [selectedKeyID, setSelectedKeyID] = useState(""); + const [selectedKeyID, setSelectedKeyID] = useState(""); const [dateValue, setDateValue] = useState({ from: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000), to: new Date(), @@ -137,16 +137,16 @@ const UsagePage: React.FC = ({ console.log("keys in usage", keys); - const updateEndUserData = async (startTime: Date | undefined, endTime: Date | undefined) => { + const updateEndUserData = async (startTime: Date | undefined, endTime: Date | undefined, uiSelectedKey: string | null) => { if (!startTime || !endTime || !accessToken) { return; } - console.log("selectedKeyID", selectedKeyID); + console.log("uiSelectedKey", uiSelectedKey); let newTopUserData = await adminTopEndUsersCall( accessToken, - selectedKeyID, + uiSelectedKey, startTime.toISOString(), endTime.toISOString() ) @@ -391,7 +391,16 @@ const UsagePage: React.FC = ({ Select Key - + { + updateEndUserData(dateValue.from, dateValue.to, null); + }} + > + All Keys + {keys?.map((key: any, index: number) => { if ( key && @@ -399,12 +408,12 @@ const UsagePage: React.FC = ({ key["key_alias"].length > 0 ) { return ( + { - setSelectedKeyID(key["token"]); - updateEndUserData(dateValue.from, dateValue.to); + updateEndUserData(dateValue.from, dateValue.to, key["token"]); }} > {key["key_alias"]}