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

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

@ -34,6 +34,7 @@ const Settings: React.FC<SettingsPageProps> = ({
const [callbacks, setCallbacks] = useState<string[]>([]);
const [isModalVisible, setIsModalVisible] = useState(false);
const [form] = Form.useForm();
const [selectedCallback, setSelectedCallback] = useState<string | null>(null);
useEffect(() => {
if (!accessToken || !userRole || !userID) {
@ -55,6 +56,7 @@ const Settings: React.FC<SettingsPageProps> = ({
const handleCancel = () => {
setIsModalVisible(false);
form.resetFields();
setSelectedCallback(null);
};
const handleOk = () => {
@ -64,8 +66,8 @@ const Settings: React.FC<SettingsPageProps> = ({
// Handle form submission
form.validateFields().then((values) => {
// Call API to add the callback
console.log("Form values:", values);
let payload;
console.log("Callback values:", values);
if (values.callback === 'langfuse') {
payload = {
environment_variables: {
@ -80,8 +82,19 @@ const Settings: React.FC<SettingsPageProps> = ({
// add langfuse to callbacks
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 {
payload = {
error: 'Invalid callback value'
@ -89,9 +102,14 @@ const Settings: React.FC<SettingsPageProps> = ({
}
setIsModalVisible(false);
form.resetFields();
setSelectedCallback(null);
});
};
const handleCallbackChange = (value: string) => {
setSelectedCallback(value);
};
return (
<div className="w-full mx-4">
<Grid numItems={1} className="gap-2 p-8 h-[75vh] w-full mt-2">
@ -138,12 +156,14 @@ const Settings: React.FC<SettingsPageProps> = ({
name="callback"
rules={[{ required: true, message: "Please select a callback" }]}
>
<Select>
<Select onChange={handleCallbackChange}>
<Select.Option value="langfuse">langfuse</Select.Option>
<Select.Option value="slack">slack</Select.Option>
<Select.Option value="slack">slack alerting</Select.Option>
</Select>
</Form.Item>
{selectedCallback === 'langfuse' && (
<>
<Form.Item
label="LANGFUSE_PUBLIC_KEY"
name="langfusePublicKey"
@ -163,7 +183,20 @@ const Settings: React.FC<SettingsPageProps> = ({
>
<Input.Password />
</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" }}>
<Button2 htmlType="submit">Save</Button2>