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

fix: stability fixes for ui

Browse source
This commit is contained in:
Krrish Dholakia 2024-02-29 12:50:27 -08:00
parent 034ca95a94
commit 524cdb74a4
16 changed files with 248 additions and 120 deletions
Download patch file Download diff file Expand all files Collapse all files

108
ui/litellm-dashboard/src/components/view_users.tsx
View file

@ -1,7 +1,18 @@
import React, { useState, useEffect } from "react";
import { Card, Title, Subtitle, Table, TableHead, TableRow, TableCell, TableBody, Metric, Grid } from "@tremor/react";
import {
Card,
Title,
Subtitle,
Table,
TableHead,
TableRow,
TableCell,
TableBody,
Metric,
Grid,
} from "@tremor/react";
import { userInfoCall } from "./networking";
import { Badge, BadgeDelta, Button } from '@tremor/react';
import { Badge, BadgeDelta, Button } from "@tremor/react";
import RequestAccess from "./request_model_access";
import CreateUser from "./create_user_button";
@ -21,7 +32,6 @@ const ViewUserDashboard: React.FC<ViewUserDashboardProps> = ({
const [userData, setuserData] = useState<null | any[]>(null);
const [pendingRequests, setPendingRequests] = useState<any[]>([]);
useEffect(() => {
if (!accessToken || !token || !userRole || !userID) {
return;
@ -29,10 +39,14 @@ const ViewUserDashboard: React.FC<ViewUserDashboardProps> = ({
const fetchData = async () => {
try {
// Replace with your actual API call for model data
const userDataResponse = await userInfoCall(accessToken, null, userRole, true);
const userDataResponse = await userInfoCall(
accessToken,
null,
userRole,
true
);
console.log("user data response:", userDataResponse);
setuserData(userDataResponse);
} catch (error) {
console.error("There was an error fetching the model data", error);
}
@ -51,40 +65,62 @@ const ViewUserDashboard: React.FC<ViewUserDashboardProps> = ({
return <div>Loading...</div>;
}
// when users click request access show pop up to allow them to request access
return (
<div style={{ width: "100%" }}>
<Grid className="gap-2 p-10 h-[75vh] w-full">
<CreateUser
userID={userID}
accessToken={accessToken}
/>
<Card>
<Table className="mt-5">
<TableHead>
<TableRow>
<TableCell><Title>User ID </Title></TableCell>
<TableCell><Title>User Role</Title></TableCell>
<TableCell><Title>User Models</Title></TableCell>
<TableCell><Title>User Spend ($ USD)</Title></TableCell>
<TableCell><Title>User Max Budget ($ USD)</Title></TableCell>
</TableRow>
</TableHead>
<TableBody>
{userData.map((user: any) => (
<TableRow key={user.user_id}>
<TableCell><Title>{user.user_id}</Title></TableCell>
<TableCell><Title>{user.user_role ? user.user_role : "app_user"}</Title></TableCell>
<TableCell><Title>{user.models && user.models.length > 0 ? user.models : "All Models"}</Title></TableCell>
<TableCell><Title>{user.spend ? user.spend : 0}</Title></TableCell>
<TableCell><Title>{user.max_budget ? user.max_budget : "Unlimited"}</Title></TableCell>
<Grid className="gap-2 p-10 h-[75vh] w-full">
<CreateUser userID={userID} accessToken={accessToken} />
<Card>
<Table className="mt-5">
<TableHead>
<TableRow>
<TableCell>
<Title>User ID </Title>
</TableCell>
<TableCell>
<Title>User Role</Title>
</TableCell>
<TableCell>
<Title>User Models</Title>
</TableCell>
<TableCell>
<Title>User Spend ($ USD)</Title>
</TableCell>
<TableCell>
<Title>User Max Budget ($ USD)</Title>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</Card>
</TableHead>
<TableBody>
{userData.map((user: any) => (
<TableRow key={user.user_id}>
<TableCell>
<Title>{user.user_id}</Title>
</TableCell>
<TableCell>
<Title>
{user.user_role ? user.user_role : "app_user"}
</Title>
</TableCell>
<TableCell>
<Title>
{user.models && user.models.length > 0
? user.models
: "All Models"}
</Title>
</TableCell>
<TableCell>
<Title>{user.spend ? user.spend : 0}</Title>
</TableCell>
<TableCell>
<Title>
{user.max_budget ? user.max_budget : "Unlimited"}
</Title>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</Card>
</Grid>
</div>
);