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

ui - filter usage by day

Browse source
This commit is contained in:
Ishaan Jaff 2024-05-08 17:34:30 -07:00
parent c7037c20ea
commit 08d37e1b0e
1 changed files with 17 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -132,9 +132,21 @@ const UsagePage: React.FC<UsagePageProps> = ({
let startTime = formatDate(firstDay); let startTime = formatDate(firstDay);
let endTime = formatDate(lastDay); let endTime = formatDate(lastDay);
// const updateEndUserUsage(startTime: string, endTime: string) { const updateEndUserData = async (startTime: Date | undefined, endTime: Date | undefined) => {
if (!startTime || !endTime || !accessToken) {
// } return;
}
let newTopUserData = await adminTopEndUsersCall(
accessToken,
null,
startTime.toISOString(),
endTime.toISOString()
)
console.log("End user data updated successfully", newTopUserData);
setTopUsers(newTopUserData);
}
function formatDate(date: Date) { function formatDate(date: Date) {
const year = date.getFullYear(); const year = date.getFullYear();
@ -361,7 +373,7 @@ const UsagePage: React.FC<UsagePageProps> = ({
value={dateValue} value={dateValue}
onValueChange={(value) => { onValueChange={(value) => {
setDateValue(value); setDateValue(value);
updateModelMetrics(selectedModelGroup, value.from, value.to); // Call updateModelMetrics with the new date range updateEndUserData(value.from, value.to); // Call updateModelMetrics with the new date range
}} }}
/> />
<Text className="mt-4">End Users of your LLM API calls. Tracked When a `user` param is passed in your LLM calls</Text> <Text className="mt-4">End Users of your LLM API calls. Tracked When a `user` param is passed in your LLM calls</Text>
@ -384,7 +396,7 @@ const UsagePage: React.FC<UsagePageProps> = ({
<TableRow key={index}> <TableRow key={index}>
<TableCell>{user.end_user}</TableCell> <TableCell>{user.end_user}</TableCell>
<TableCell>{user.total_spend?.toFixed(4)}</TableCell> <TableCell>{user.total_spend?.toFixed(4)}</TableCell>
<TableCell>{user.total_events}</TableCell> <TableCell>{user.total_count}</TableCell>
</TableRow> </TableRow>
))} ))}
</TableBody> </TableBody>