phoenix/litellm
1
0
Fork 0
forked from phoenix/litellm-mirror
Code Pull requests Activity

fix(usage.tsx): do cost breakdown by model

Browse source
This commit is contained in:
Krrish Dholakia 2024-02-10 16:10:48 -08:00
parent 525b0dc4fd
commit 38154b6e95
2 changed files with 12 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

2
ui/litellm-dashboard/src/components/networking.tsx
View file

@ -178,6 +178,7 @@ export const userSpendLogsCall = async (
} else { } else {
url = `${url}/?start_date=${startTime}&end_date=${endTime}`; url = `${url}/?start_date=${startTime}&end_date=${endTime}`;
} }
message.info("Making spend logs request");
const response = await fetch(url, { const response = await fetch(url, {
method: "GET", method: "GET",
headers: { headers: {
@ -193,6 +194,7 @@ export const userSpendLogsCall = async (
const data = await response.json(); const data = await response.json();
console.log(data); console.log(data);
message.success("Spend Logs received");
return data; return data;
} catch (error) { } catch (error) {
console.error("Failed to create key:", error); console.error("Failed to create key:", error);

24
ui/litellm-dashboard/src/components/usage.tsx
View file

@ -24,17 +24,11 @@ const customTooltip = (props: CustomTooltipTypeBar) => {
const value = payload[0].payload; const value = payload[0].payload;
const date = value["startTime"]; const date = value["startTime"];
const model_values = value["models"];
// Convert the object into an array of key-value pairs // Convert the object into an array of key-value pairs
const entries: [string, number][] = Object.entries(value) const entries: [string, number][] = Object.entries(model_values).map(
.filter( ([key, value]) => [key, value as number]
([key]) => ); // Type assertion to specify the value as number
key !== "spend" &&
key !== "startTime" &&
key !== "models" &&
key !== "users"
)
.map(([key, value]) => [key, value as number]); // Type assertion to specify the value as number
// Sort the array based on the float value in descending order // Sort the array based on the float value in descending order
entries.sort((a, b) => b[1] - a[1]); entries.sort((a, b) => b[1] - a[1]);
@ -48,10 +42,12 @@ const customTooltip = (props: CustomTooltipTypeBar) => {
{topEntries.map(([key, value]) => ( {topEntries.map(([key, value]) => (
<div key={key} className="flex flex-1 space-x-10"> <div key={key} className="flex flex-1 space-x-10">
<div className="p-2"> <div className="p-2">
<p className="text-tremor-content"> <p className="text-tremor-content text-xs">
Token: {key.substring(0, 4)}{" "} {key}
<span className="font-medium text-tremor-content-emphasis"> {":"}
Spend: {value} <span className="text-xs text-tremor-content-emphasis">
{" "}
{value ? (value < 0.01 ? "<$0.01" : value.toFixed(2)) : ""}
</span> </span>
</p> </p>
</div> </div>