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

build(ui/litellm_dashboard_v_2): allow app owner to create keys and view their keys

Browse source
This commit is contained in:
Krrish Dholakia 2024-01-27 13:48:35 -08:00
parent af8b35d556
commit dda115fcb7
8 changed files with 249 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,6 @@
'use client';
"use client";
import React, { useEffect, useState } from "react";
import { userInfoCall } from "./networking";
import { StatusOnlineIcon } from "@heroicons/react/outline";
import {
Badge,
@ -13,69 +15,105 @@ import {
Title,
} from "@tremor/react";
// Define the props type
interface ViewKeyTableProps {
userID: string;
accessToken: string;
proxyBaseUrl: string;
}
const data = [
{
key_alias: "my test key",
key_name: "sk-...hd74",
spend: 23.0,
expires: "active",
token: "23902dwojd90"
token: "23902dwojd90",
},
{
key_alias: "my test key",
key_name: "sk-...hd74",
spend: 23.0,
expires: "active",
token: "23902dwojd90"
token: "23902dwojd90",
},
{
key_alias: "my test key",
key_name: "sk-...hd74",
spend: 23.0,
expires: "active",
token: "23902dwojd90"
token: "23902dwojd90",
},
{
key_alias: "my test key",
key_name: "sk-...hd74",
spend: 23.0,
expires: "active",
token: "23902dwojd90"
token: "23902dwojd90",
},
];
export default function ViewKeyTable() {
return (
<Card className="flex-auto overflow-y-auto max-h-[50vh] mb-4">
<Title>API Keys</Title>
<Table className="mt-5">
<TableHead>
<TableRow>
<TableHeaderCell>Alias</TableHeaderCell>
<TableHeaderCell>Secret Key</TableHeaderCell>
<TableHeaderCell>Spend</TableHeaderCell>
<TableHeaderCell>Status</TableHeaderCell>
</TableRow>
</TableHead>
<TableBody>
{data.map((item) => (
<TableRow key={item.token}>
<TableCell>{item.key_alias}</TableCell>
<TableCell>
<Text>{item.key_name}</Text>
</TableCell>
<TableCell>
<Text>{item.spend}</Text>
</TableCell>
<TableCell>
<Badge color="emerald" icon={StatusOnlineIcon}>
{item.expires}
</Badge>
</TableCell>
const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
userID,
accessToken,
proxyBaseUrl,
}) => {
const [data, setData] = useState(null); // State to store the data from the API
useEffect(() => {
const fetchData = async () => {
try {
const response = await userInfoCall(
(proxyBaseUrl = proxyBaseUrl),
(accessToken = accessToken),
(userID = userID)
);
setData(response["keys"]); // Update state with the fetched data
} catch (error) {
console.error("There was an error fetching the data", error);
// Optionally, update your UI to reflect the error state
}
};
fetchData(); // Call the async function to fetch data
}, []); // Empty dependency array
if (data == null) {
return;
}
return (
<Card className="flex-auto overflow-y-auto max-h-[50vh] mb-4">
<Title>API Keys</Title>
<Table className="mt-5">
<TableHead>
<TableRow>
<TableHeaderCell>Alias</TableHeaderCell>
<TableHeaderCell>Secret Key</TableHeaderCell>
<TableHeaderCell>Spend</TableHeaderCell>
<TableHeaderCell>Status</TableHeaderCell>
</TableRow>
))}
</TableBody>
</Table>
</Card>
)};
</TableHead>
<TableBody>
{data.map((item) => (
<TableRow key={item.token}>
<TableCell>{item.key_alias}</TableCell>
<TableCell>
<Text>{item.key_name}</Text>
</TableCell>
<TableCell>
<Text>{item.spend}</Text>
</TableCell>
<TableCell>
<Badge color="emerald" icon={StatusOnlineIcon}>
{item.expires}
</Badge>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</Card>
);
};
export default ViewKeyTable;