ai-workspace-services/litellm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

(ui) use daily spend for a key

Browse Source
This commit is contained in:
ishaan-jaff 2024-02-29 18:19:24 -08:00
parent a49605a25e
commit 45b56030de
2 changed files with 4 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -280,7 +280,7 @@ export const modelAvailableCall = async (
export const keySpendLogsCall = async (accessToken: String, token: String) => {
try {
const url = proxyBaseUrl ? `${proxyBaseUrl}/spend/logs` : `/spend/logs`;
const url = proxyBaseUrl ? `${proxyBaseUrl}/global/spend/logs` : `/global/spend/logs`;
console.log("in keySpendLogsCall:", url);
const response = await fetch(`${url}/?api_key=${token}`, {
method: "GET",

84
ui/litellm-dashboard/src/components/view_key_spend_report.tsx
View File

@ -78,85 +78,12 @@ const ViewKeySpendReport: React.FC<ViewKeySpendReportProps> = ({
(token = token)
);
console.log("Response:", response);
// loop through response
// get spend, startTime for each element, place in new array
const pricePerDay: Record<string, number> = (
Object.values(response) as ResponseValueType[]
).reduce((acc: Record<string, number>, value) => {
const startTime = new Date(value.startTime);
const day = new Intl.DateTimeFormat("en-US", {
day: "2-digit",
month: "short",
}).format(startTime);
acc[day] = (acc[day] || 0) + value.spend;
return acc;
}, {});
// sort pricePerDay by day
// Convert object to array of key-value pairs
const pricePerDayArray = Object.entries(pricePerDay);
// Sort the array based on the date (key)
pricePerDayArray.sort(([aKey], [bKey]) => {
const dateA = new Date(aKey);
const dateB = new Date(bKey);
return dateA.getTime() - dateB.getTime();
});
// Convert the sorted array back to an object
const sortedPricePerDay = Object.fromEntries(pricePerDayArray);
console.log(sortedPricePerDay);
const pricePerUser: Record<string, number> = (
Object.values(response) as ResponseValueType[]
).reduce((acc: Record<string, number>, value) => {
const user = value.user;
acc[user] = (acc[user] || 0) + value.spend;
return acc;
}, {});
console.log(pricePerDay);
console.log(pricePerUser);
const arrayBarChart = [];
// [
// {
// "day": "02 Feb",
// "spend": pricePerDay["02 Feb"],
// }
// ]
for (const [key, value] of Object.entries(sortedPricePerDay)) {
arrayBarChart.push({ day: key, spend: value });
}
// get 5 most expensive users
const sortedUsers = Object.entries(pricePerUser).sort(
(a, b) => b[1] - a[1]
);
const top5Users = sortedUsers.slice(0, 5);
const userChart = top5Users.map(([key, value]) => ({
name: key,
value: value,
}));
setData(arrayBarChart);
setUserData(userChart);
console.log("arrayBarChart:", arrayBarChart);
setData(response);
} catch (error) {
console.error("There was an error fetching the data", error);
// Optionally, update your UI to reflect the error state here as well
}
};
// useEffect(() => {
// // Fetch data only when the token changes
// fetchData();
// }, [token]); // Dependency array containing the 'token' variable
if (!token) {
return null;
@ -184,18 +111,13 @@ const ViewKeySpendReport: React.FC<ViewKeySpendReportProps> = ({
className="mt-6"
data={data}
colors={["blue"]}
index="day"
index="date"
categories={["spend"]}
yAxisWidth={48}
/>
)}
</Card>
<Title className="mt-6">Top 5 Users Spend (USD)</Title>
<Card className="mb-6">
{userData && (
<BarList className="mt-6" data={userData} color="blue" />
)}
</Card>
</Modal>
</div>
);