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

(ui) show budget, models etc

Browse source
This commit is contained in:
Ishaan Jaff 2024-03-29 07:49:17 -07:00
parent 15dfb6a076
commit 971ba05bc1
1 changed files with 66 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

77
ui/litellm-dashboard/src/components/view_key_table.tsx
View file

@ -1,7 +1,7 @@
"use client"; "use client";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { keyDeleteCall } from "./networking"; import { keyDeleteCall } from "./networking";
import { StatusOnlineIcon, TrashIcon } from "@heroicons/react/outline"; import { InformationCircleIcon, StatusOnlineIcon, TrashIcon } from "@heroicons/react/outline";
import { import {
Badge, Badge,
Card, Card,
@ -12,6 +12,8 @@ import {
TableHead, TableHead,
TableHeaderCell, TableHeaderCell,
TableRow, TableRow,
Dialog,
DialogPanel,
Text, Text,
Title, Title,
Icon, Icon,
@ -35,6 +37,7 @@ const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
const [isButtonClicked, setIsButtonClicked] = useState(false); const [isButtonClicked, setIsButtonClicked] = useState(false);
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false); const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const [keyToDelete, setKeyToDelete] = useState<string | null>(null); const [keyToDelete, setKeyToDelete] = useState<string | null>(null);
const [openDialogId, setOpenDialogId] = React.useState<null | number>(null);
const handleDelete = async (token: string) => { const handleDelete = async (token: string) => {
if (data == null) { if (data == null) {
@ -86,7 +89,7 @@ const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
<TableHeaderCell>Key Alias</TableHeaderCell> <TableHeaderCell>Key Alias</TableHeaderCell>
<TableHeaderCell>Secret Key</TableHeaderCell> <TableHeaderCell>Secret Key</TableHeaderCell>
<TableHeaderCell>Spend (USD)</TableHeaderCell> <TableHeaderCell>Spend (USD)</TableHeaderCell>
{/* <TableHeaderCell>Budget (USD)</TableHeaderCell> */} <TableHeaderCell>Budget (USD)</TableHeaderCell>
{/* <TableHeaderCell>Spend Report</TableHeaderCell> */} {/* <TableHeaderCell>Spend Report</TableHeaderCell> */}
{/* <TableHeaderCell>Team</TableHeaderCell> */} {/* <TableHeaderCell>Team</TableHeaderCell> */}
{/* <TableHeaderCell>Metadata</TableHeaderCell> */} {/* <TableHeaderCell>Metadata</TableHeaderCell> */}
@ -123,15 +126,16 @@ const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
return item.spend; return item.spend;
} }
})()} })()}
</Text> </Text>
</TableCell> </TableCell>
{/* <TableCell style={{ maxWidth: "2px", whiteSpace: "pre-wrap", overflow: "hidden" }}> <TableCell style={{ maxWidth: "2px", whiteSpace: "pre-wrap", overflow: "hidden" }}>
{item.max_budget != null ? ( {item.max_budget != null ? (
<Text>{item.max_budget}</Text> <Text>{item.max_budget}</Text>
) : ( ) : (
<Text>Unlimited</Text> <Text>Unlimited</Text>
)} )}
</TableCell> */} </TableCell>
{/* <TableCell style={{ maxWidth: '2px' }}> {/* <TableCell style={{ maxWidth: '2px' }}>
<ViewKeySpendReport <ViewKeySpendReport
token={item.token} token={item.token}
@ -152,17 +156,21 @@ const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
<TableCell> <TableCell>
{Array.isArray(item.models) ? ( {Array.isArray(item.models) ? (
<div style={{ display: "flex", flexDirection: "column" }}> <div style={{ display: "flex", flexDirection: "column" }}>
{item.models.map((model: string, index: number) => ( {item.models.length === 0 ? (
<Badge key={index} size={"xs"} className="mb-1" color="blue"> <Badge size={"xs"} className="mb-1" color="purple">
<Text> <Text>All Models</Text>
{model.length > 30 ? `${model.slice(0, 30)}...` : model}
</Text>
</Badge> </Badge>
))} ) : (
item.models.map((model: string, index: number) => (
<Badge key={index} size={"xs"} className="mb-1" color="blue">
<Text>{model.length > 30 ? `${model.slice(0, 30)}...` : model}</Text>
</Badge>
))
)}
</div> </div>
) : null} ) : null}
</TableCell> </TableCell>
<TableCell style={{ maxWidth: "2px", overflowWrap: "break-word" }}> <TableCell>
<Text> <Text>
TPM: {item.tpm_limit ? item.tpm_limit : "Unlimited"}{" "} TPM: {item.tpm_limit ? item.tpm_limit : "Unlimited"}{" "}
<br></br> RPM:{" "} <br></br> RPM:{" "}
@ -176,7 +184,52 @@ const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
<Text>Never</Text> <Text>Never</Text>
)} )}
</TableCell> */} </TableCell> */}
<TableCell style={{ maxWidth: "2px", wordWrap: "break-word" }}> <TableCell>
<Icon
onClick={() => setOpenDialogId(item.id)}
icon={InformationCircleIcon}
size="sm"
/>
<Dialog
key={item.token}
open={openDialogId === item.id}
onClose={() => setOpenDialogId(null)}
static={true}
className="z-[100]"
>
<DialogPanel className="max-w-sm">
<Title>Max Budget</Title>
{item.max_budget != null ? (
<Text>{item.max_budget}</Text>
) : (
<Text>Unlimited</Text>
)}
<Title>Metadata</Title>
<Text>{JSON.stringify(item.metadata).slice(0, 400)}</Text>
{/* <ViewKeySpendReport
token={item.token}
accessToken={accessToken}
keySpend={item.spend}
keyBudget={item.max_budget}
keyName={item.key_name}
/> */}
{/* {item.expires != null ? (
<Text>{item.expires}</Text>
) : (
<Text>Never</Text>
)} */}
<Button
variant="light"
className="mx-auto flex items-center"
onClick={() => setOpenDialogId(item.id)}
>
Close
</Button>
</DialogPanel>
</Dialog>
<Icon <Icon
onClick={() => handleDelete(item.token)} onClick={() => handleDelete(item.token)}
icon={TrashIcon} icon={TrashIcon}