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

(fix) neatly show models on table

Browse source
This commit is contained in:
Ishaan Jaff 2024-03-28 23:27:20 -07:00
parent 1d9f02fa9b
commit c9fecc11ed
1 changed files with 18 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -86,13 +86,13 @@ 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> */}
<TableHeaderCell>Models</TableHeaderCell> <TableHeaderCell>Models</TableHeaderCell>
<TableHeaderCell>TPM / RPM Limits</TableHeaderCell> <TableHeaderCell>TPM / RPM Limits</TableHeaderCell>
<TableHeaderCell>Expires</TableHeaderCell> {/* <TableHeaderCell>Expires</TableHeaderCell> */}
</TableRow> </TableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>
@ -125,14 +125,14 @@ const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
})()} })()}
</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}
accessToken={accessToken} accessToken={accessToken}
@ -140,21 +140,23 @@ const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
keyBudget={item.max_budget} keyBudget={item.max_budget}
keyName={item.key_name} keyName={item.key_name}
/> />
</TableCell> </TableCell> */}
<TableCell style={{ maxWidth: "4px", whiteSpace: "pre-wrap", overflow: "hidden" }}> {/* <TableCell style={{ maxWidth: "4px", whiteSpace: "pre-wrap", overflow: "hidden" }}>
<Text>{item.team_alias && item.team_alias != "None" ? item.team_alias : item.team_id}</Text> <Text>{item.team_alias && item.team_alias != "None" ? item.team_alias : item.team_id}</Text>
</TableCell> </TableCell> */}
<TableCell style={{ maxWidth: "4px", whiteSpace: "pre-wrap", overflow: "hidden" }}> {/* <TableCell style={{ maxWidth: "4px", whiteSpace: "pre-wrap", overflow: "hidden" }}>
<Text>{JSON.stringify(item.metadata).slice(0, 400)}</Text> <Text>{JSON.stringify(item.metadata).slice(0, 400)}</Text>
</TableCell> </TableCell> */}
<TableCell style={{ maxWidth: "8-x", whiteSpace: "pre-wrap", overflow: "hidden" }}> <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.map((model: string, index: number) => (
<Badge key={index} size={"xs"} className="mb-1" color="blue"> <Badge key={index} size={"xs"} className="mb-1" color="blue">
<Text>
{model.length > 30 ? `${model.slice(0, 30)}...` : model} {model.length > 30 ? `${model.slice(0, 30)}...` : model}
</Text>
</Badge> </Badge>
))} ))}
</div> </div>
@ -167,13 +169,13 @@ const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
{item.rpm_limit ? item.rpm_limit : "Unlimited"} {item.rpm_limit ? item.rpm_limit : "Unlimited"}
</Text> </Text>
</TableCell> </TableCell>
<TableCell style={{ maxWidth: "2px", wordWrap: "break-word" }}> {/* <TableCell style={{ maxWidth: "2px", wordWrap: "break-word" }}>
{item.expires != null ? ( {item.expires != null ? (
<Text>{item.expires}</Text> <Text>{item.expires}</Text>
) : ( ) : (
<Text>Never</Text> <Text>Never</Text>
)} )}
</TableCell> </TableCell> */}
<TableCell style={{ maxWidth: "2px", wordWrap: "break-word" }}> <TableCell style={{ maxWidth: "2px", wordWrap: "break-word" }}>
<Icon <Icon
onClick={() => handleDelete(item.token)} onClick={() => handleDelete(item.token)}