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

fix - edit callbacks on admin ui

Browse source
This commit is contained in:
Ishaan Jaff 2024-04-13 15:47:22 -07:00
parent 39ed7dfa5d
commit 8039bbc0f0
1 changed files with 72 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -14,10 +14,11 @@ import {
Text, Text,
Grid, Grid,
Button, Button,
TextInput,
Col, Col,
} from "@tremor/react"; } from "@tremor/react";
import { getCallbacksCall, setCallbacksCall } from "./networking"; import { getCallbacksCall, setCallbacksCall } from "./networking";
import { Modal, Form, Input, Select, Button as Button2 } from "antd"; import { Modal, Form, Input, Select, Button as Button2, message } from "antd";
import StaticGenerationSearchParamsBailoutProvider from "next/dist/client/components/static-generation-searchparams-bailout-provider"; import StaticGenerationSearchParamsBailoutProvider from "next/dist/client/components/static-generation-searchparams-bailout-provider";
interface SettingsPageProps { interface SettingsPageProps {
@ -31,7 +32,7 @@ const Settings: React.FC<SettingsPageProps> = ({
userRole, userRole,
userID, userID,
}) => { }) => {
const [callbacks, setCallbacks] = useState<string[]>([]); const [callbacks, setCallbacks] = useState<any[]>([]);
const [isModalVisible, setIsModalVisible] = useState(false); const [isModalVisible, setIsModalVisible] = useState(false);
const [form] = Form.useForm(); const [form] = Form.useForm();
const [selectedCallback, setSelectedCallback] = useState<string | null>(null); const [selectedCallback, setSelectedCallback] = useState<string | null>(null);
@ -43,8 +44,7 @@ const Settings: React.FC<SettingsPageProps> = ({
getCallbacksCall(accessToken, userID, userRole).then((data) => { getCallbacksCall(accessToken, userID, userRole).then((data) => {
console.log("callbacks", data); console.log("callbacks", data);
let callbacks_data = data.data; let callbacks_data = data.data;
let callback_names = callbacks_data.success_callback; // ["callback1", "callback2"] setCallbacks(callbacks_data);
setCallbacks(callback_names);
}); });
}, [accessToken, userRole, userID]); }, [accessToken, userRole, userID]);
@ -59,6 +59,23 @@ const Settings: React.FC<SettingsPageProps> = ({
setSelectedCallback(null); setSelectedCallback(null);
}; };
const handleSaveChanges = (callback: any) => {
if (!accessToken) {
return;
}
const updatedVariables = Object.fromEntries(
Object.entries(callback.variables).map(([key, value]) => [key, (document.querySelector(`input[name="${key}"]`) as HTMLInputElement)?.value || value])
);
const payload = {
environment_variables: updatedVariables,
};
setCallbacksCall(accessToken, payload);
message.success("Callback updated successfully");
};
const handleOk = () => { const handleOk = () => {
if (!accessToken) { if (!accessToken) {
return; return;
@ -113,34 +130,61 @@ const Settings: React.FC<SettingsPageProps> = ({
return ( return (
<div className="w-full mx-4"> <div className="w-full mx-4">
<Grid numItems={1} className="gap-2 p-8 h-[75vh] w-full mt-2"> <Grid numItems={1} className="gap-2 p-8 w-full mt-2">
<Card className="h-[15vh]">
<Grid numItems={2} className="mt-2">
<Col>
<Title>Logging Callbacks</Title> <Title>Logging Callbacks</Title>
</Col> <Card >
<Col> <Table>
<div> <TableHead>
{!callbacks ? ( <TableRow>
<Badge color={"red"}>None</Badge> <TableHeaderCell>Callback</TableHeaderCell>
) : callbacks.length === 0 ? ( <TableHeaderCell>Callback Env Vars</TableHeaderCell>
<Badge>None</Badge> <TableHeaderCell></TableHeaderCell>
) : ( {/* <TableHeaderCell>Test Callback</TableHeaderCell> */}
callbacks.map((callback, index) => ( </TableRow>
<Badge key={index} color={"sky"}> </TableHead>
{callback} <TableBody>
</Badge> {callbacks.map((callback, index) => (
)) <TableRow key={index}>
)} <TableCell>
</div> <Badge color="emerald">{callback.name}</Badge>
</Col> </TableCell>
</Grid> <TableCell>
<Col> <ul>
{Object.entries(callback.variables).map(([key, value]) => (
<li key={key}>
<Text>{key}</Text>
<TextInput
name={key}
defaultValue={value}
type="password"
/>
</li>
))}
</ul>
<Button className="mt-2" onClick={() => handleSaveChanges(callback)}>
Save Changes
</Button>
</TableCell>
<TableCell>
</TableCell>
<TableCell>
<Button onClick={() => console.log(`Test Callback ${callback.name} clicked`)}>
Test Callback
</Button>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
<Button size="xs" className="mt-2" onClick={handleAddCallback}> <Button size="xs" className="mt-2" onClick={handleAddCallback}>
Add Callback Add Callback
</Button> </Button>
</Col>
</Card> </Card>
</Grid> </Grid>
<Modal <Modal