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

Merge pull request #3148 from BerriAI/ui_show_keys_in_users_page

Browse source 
ui - show key_aliases on `Users` Tab
This commit is contained in:
Ishaan Jaff 2024-04-18 20:11:47 -07:00 • committed by GitHub
commit 9073960c00
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 47 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -19,12 +19,16 @@ import {
TabPanel,
Select,
SelectItem,
Dialog,
DialogPanel,
Icon
} from "@tremor/react";
import { userInfoCall, adminTopEndUsersCall } from "./networking";
import { Badge, BadgeDelta, Button } from "@tremor/react";
import RequestAccess from "./request_model_access";
import CreateUser from "./create_user_button";
import Paragraph from "antd/es/skeleton/Paragraph";
import InformationCircleIcon from "@heroicons/react/outline/InformationCircleIcon";
interface ViewUserDashboardProps {
accessToken: string | null;
@ -46,6 +50,8 @@ const ViewUserDashboard: React.FC<ViewUserDashboardProps> = ({
const [userData, setUserData] = useState<null | any[]>(null);
const [endUsers, setEndUsers] = useState<null | any[]>(null);
const [currentPage, setCurrentPage] = useState(0);
const [openDialogId, setOpenDialogId] = React.useState<null | number>(null);
const [selectedItem, setSelectedItem] = useState<null | any>(null);
const defaultPageSize = 25;
useEffect(() => {
@ -159,10 +165,10 @@ const ViewUserDashboard: React.FC<ViewUserDashboardProps> = ({
<TableRow>
<TableHeaderCell>User ID</TableHeaderCell>
<TableHeaderCell>User Email</TableHeaderCell>
<TableHeaderCell>User Role</TableHeaderCell>
<TableHeaderCell>User Models</TableHeaderCell>
<TableHeaderCell>User Spend ($ USD)</TableHeaderCell>
<TableHeaderCell>User Max Budget ($ USD)</TableHeaderCell>
<TableHeaderCell>User API Key Aliases</TableHeaderCell>
</TableRow>
</TableHead>
<TableBody>
@ -170,9 +176,7 @@ const ViewUserDashboard: React.FC<ViewUserDashboardProps> = ({
<TableRow key={user.user_id}>
<TableCell>{user.user_id}</TableCell>
<TableCell>{user.user_email}</TableCell>
<TableCell>
{user.user_role ? user.user_role : ""}
</TableCell>
<TableCell>
{user.models && user.models.length > 0
? user.models
@ -182,6 +186,23 @@ const ViewUserDashboard: React.FC<ViewUserDashboardProps> = ({
<TableCell>
{user.max_budget ? user.max_budget : "Unlimited"}
</TableCell>
<TableCell>
<Grid numItems={2}>
{user && user.key_aliases
? user.key_aliases.filter((key: any) => key !== null).length > 0
? <Badge size={"xs"} color={"indigo"}>{user.key_aliases.filter((key: any) => key !== null).join(', ') }</Badge>
: <Badge size={"xs"} color={"gray"}>No Keys</Badge>
: <Badge size={"xs"} color={"gray"}>No Keys</Badge>}
{/* <Text>{user.key_aliases.filter(key => key !== null).length} Keys</Text> */}
{/* <Icon icon={InformationCircleIcon} onClick= {() => {
setOpenDialogId(user.user_id)
setSelectedItem(user)
}}>View Keys</Icon> */}
</Grid>
</TableCell>
</TableRow>
))}
</TableBody>
@ -238,7 +259,29 @@ const ViewUserDashboard: React.FC<ViewUserDashboardProps> = ({
</Card>
{renderPagination()}
</Grid>
{/* <Dialog
open={openDialogId !== null}
onClose={() => {
setOpenDialogId(null);
}}
>
<DialogPanel>
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
<Title>Key Aliases</Title>
<Text>
{selectedItem && selectedItem.key_aliases
? selectedItem.key_aliases.filter(key => key !== null).length > 0
? selectedItem.key_aliases.filter(key => key !== null).join(', ')
: 'No Keys'
: "No Keys"}
</Text>
</div>
</DialogPanel>
</Dialog> */}
</div>
);
};