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

ui - add slack alerting

Browse source
This commit is contained in:
Ishaan Jaff 2024-04-08 20:10:50 -07:00
parent 9b7db7ea47
commit 8bb80ca6ea
2 changed files with 59 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

6
ui/litellm-dashboard/src/components/leftnav.tsx
View file

@ -46,8 +46,8 @@ const Sidebar: React.FC<SidebarProps> = ({
); );
} }
return ( return (
<Layout style={{ minHeight: "100vh", maxWidth: "100px" }}> <Layout style={{ minHeight: "100vh", maxWidth: "120px" }}>
<Sider width={100}> <Sider width={120}>
<Menu <Menu
mode="inline" mode="inline"
defaultSelectedKeys={defaultSelectedKey ? defaultSelectedKey : ["1"]} defaultSelectedKeys={defaultSelectedKey ? defaultSelectedKey : ["1"]}
@ -89,7 +89,7 @@ const Sidebar: React.FC<SidebarProps> = ({
) : null} ) : null}
<Menu.Item key="8" onClick={() => setPage("settings")}> <Menu.Item key="8" onClick={() => setPage("settings")}>
<Text> <Text>
Settings Integrations
</Text> </Text>
</Menu.Item> </Menu.Item>
{userRole == "Admin" ? ( {userRole == "Admin" ? (

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

@ -34,6 +34,7 @@ const Settings: React.FC<SettingsPageProps> = ({
const [callbacks, setCallbacks] = useState<string[]>([]); const [callbacks, setCallbacks] = useState<string[]>([]);
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);
useEffect(() => { useEffect(() => {
if (!accessToken || !userRole || !userID) { if (!accessToken || !userRole || !userID) {
@ -55,6 +56,7 @@ const Settings: React.FC<SettingsPageProps> = ({
const handleCancel = () => { const handleCancel = () => {
setIsModalVisible(false); setIsModalVisible(false);
form.resetFields(); form.resetFields();
setSelectedCallback(null);
}; };
const handleOk = () => { const handleOk = () => {
@ -64,8 +66,8 @@ const Settings: React.FC<SettingsPageProps> = ({
// Handle form submission // Handle form submission
form.validateFields().then((values) => { form.validateFields().then((values) => {
// Call API to add the callback // Call API to add the callback
console.log("Form values:", values);
let payload; let payload;
console.log("Callback values:", values);
if (values.callback === 'langfuse') { if (values.callback === 'langfuse') {
payload = { payload = {
environment_variables: { environment_variables: {
@ -80,8 +82,19 @@ const Settings: React.FC<SettingsPageProps> = ({
// add langfuse to callbacks // add langfuse to callbacks
setCallbacks(callbacks ? [...callbacks, values.callback] : [values.callback]); setCallbacks(callbacks ? [...callbacks, values.callback] : [values.callback]);
} else if (values.callback === 'slack') {
payload = {
litellm_settings: {
success_callback: [values.callback]
},
environment_variables: {
SLACK_WEBHOOK_URL: values.slackWebhookUrl
}
};
setCallbacksCall(accessToken, payload);
// add slack to callbacks
setCallbacks(callbacks ? [...callbacks, values.callback] : [values.callback]);
} else { } else {
payload = { payload = {
error: 'Invalid callback value' error: 'Invalid callback value'
@ -89,9 +102,14 @@ const Settings: React.FC<SettingsPageProps> = ({
} }
setIsModalVisible(false); setIsModalVisible(false);
form.resetFields(); form.resetFields();
setSelectedCallback(null);
}); });
}; };
const handleCallbackChange = (value: string) => {
setSelectedCallback(value);
};
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 h-[75vh] w-full mt-2">
@ -138,33 +156,48 @@ const Settings: React.FC<SettingsPageProps> = ({
name="callback" name="callback"
rules={[{ required: true, message: "Please select a callback" }]} rules={[{ required: true, message: "Please select a callback" }]}
> >
<Select> <Select onChange={handleCallbackChange}>
<Select.Option value="langfuse">langfuse</Select.Option> <Select.Option value="langfuse">langfuse</Select.Option>
<Select.Option value="slack">slack</Select.Option> <Select.Option value="slack">slack alerting</Select.Option>
</Select> </Select>
</Form.Item> </Form.Item>
<Form.Item {selectedCallback === 'langfuse' && (
label="LANGFUSE_PUBLIC_KEY" <>
name="langfusePublicKey" <Form.Item
rules={[ label="LANGFUSE_PUBLIC_KEY"
{ required: true, message: "Please enter the public key" }, name="langfusePublicKey"
]} rules={[
> { required: true, message: "Please enter the public key" },
<Input.Password /> ]}
</Form.Item> >
<Input.Password />
</Form.Item>
<Form.Item <Form.Item
label="LANGFUSE_PRIVATE_KEY" label="LANGFUSE_PRIVATE_KEY"
name="langfusePrivateKey" name="langfusePrivateKey"
rules={[ rules={[
{ required: true, message: "Please enter the private key" }, { required: true, message: "Please enter the private key" },
]} ]}
> >
<Input.Password /> <Input.Password />
</Form.Item> </Form.Item>
</>
)}
{selectedCallback === 'slack' && (
<Form.Item
label="SLACK_WEBHOOK_URL"
name="slackWebhookUrl"
rules={[
{ required: true, message: "Please enter the Slack webhook URL" },
]}
>
<Input />
</Form.Item>
)}
<div style={{ textAlign: "right", marginTop: "10px" }}> <div style={{ textAlign: "right", marginTop: "10px" }}>
<Button2 htmlType="submit">Save</Button2> <Button2 htmlType="submit">Save</Button2>
</div> </div>