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

ui - v0 show users callbacks set

Browse source
This commit is contained in:
Ishaan Jaff 2024-04-08 16:01:04 -07:00
parent 3ee345477e
commit 7c315d25b4
3 changed files with 94 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

81
ui/litellm-dashboard/src/components/settings.tsx
View file

@ -1,39 +1,62 @@
import React, { useState, useEffect } from "react";
import { Card, Title, Subtitle, Table, TableHead, TableRow, TableHeaderCell, TableCell, TableBody, Metric, Text, Grid, Button, } from "@tremor/react";
import { Card, Title, Subtitle, Table, TableHead, TableRow, Badge, TableHeaderCell, TableCell, TableBody, Metric, Text, Grid, Button, Col, } from "@tremor/react";
import { getCallbacksCall } from "./networking";
const Settings = () => {
const [callbacks, setCallbacks] = useState([
{ name: "Callback 1", envVars: ["sk-243******", "SECRET_KEY_2", "SECRET_KEY_3"] },
{ name: "Callback 2", envVars: ["sk-456******", "SECRET_KEY_4", "SECRET_KEY_5"] },
]);
interface SettingsPageProps {
accessToken: string | null;
userRole: string | null;
userID: string | null;
}
const Settings: React.FC<SettingsPageProps> = ({
accessToken,
userRole,
userID,
}) => {
const [callbacks, setCallbacks] = useState(["None"]);
useEffect(() => {
if (!accessToken || !userRole || !userID) {
return;
}
getCallbacksCall(accessToken, userID, userRole).then((data) => {
console.log("callbacks",data);
let callbacks_data = data.data;
let callback_names = callbacks_data.success_callback // ["callback1", "callback2"]
setCallbacks(callback_names);
});
}, [accessToken, userRole, userID]);
return (
<div className="w-full mx-4">
<Grid numItems={1} className="gap-2 p-8 h-[75vh] w-full mt-2">
<Card>
<Title>Settings</Title>
<Subtitle>Logging Callbacks</Subtitle>
<Button>Add Callback</Button>
<Table>
<TableHead>
<TableRow>
<TableHeaderCell>Callback Name</TableHeaderCell>
<TableHeaderCell>Environment Variables</TableHeaderCell>
</TableRow>
</TableHead>
<TableBody>
{callbacks.map((callback, index) => (
<TableRow key={index}>
<TableCell>{callback.name}</TableCell>
<TableCell>
{callback.envVars.map((envVar, index) => (
<Text key={index}>{envVar}</Text>
))}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
<Title>Settings</Title>
<Grid numItems={2}>
<Col>
<Subtitle>Logging Callbacks</Subtitle>
</Col>
<Col>
<div>
{callbacks.length === 0 ? (
<Badge>None</Badge>
) : (
callbacks.map((callback, index) => (
<Badge key={index} color={"sky"}>
{callback}
</Badge>
))
)}
</div>
</Col>
</Grid>
<Button>Add Callback</Button>
</Card>
</Grid>
</div>