From 8039bbc0f0c600d21499c779ae3d2956163f8249 Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Sat, 13 Apr 2024 15:47:22 -0700
Subject: [PATCH] fix - edit callbacks on admin ui

---
 .../src/components/settings.tsx               | 100 +++++++++++++-----
 1 file changed, 72 insertions(+), 28 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/settings.tsx b/ui/litellm-dashboard/src/components/settings.tsx
index 9c0aa163c3..4a7aca5a88 100644
--- a/ui/litellm-dashboard/src/components/settings.tsx
+++ b/ui/litellm-dashboard/src/components/settings.tsx
@@ -14,10 +14,11 @@ import {
   Text,
   Grid,
   Button,
+  TextInput,
   Col,
 } from "@tremor/react";
 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";
 
 interface SettingsPageProps {
@@ -31,7 +32,7 @@ const Settings: React.FC<SettingsPageProps> = ({
   userRole,
   userID,
 }) => {
-  const [callbacks, setCallbacks] = useState<string[]>([]);
+  const [callbacks, setCallbacks] = useState<any[]>([]);
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [form] = Form.useForm();
   const [selectedCallback, setSelectedCallback] = useState<string | null>(null);
@@ -43,8 +44,7 @@ const Settings: React.FC<SettingsPageProps> = ({
     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);
+      setCallbacks(callbacks_data);
     });
   }, [accessToken, userRole, userID]);
 
@@ -59,6 +59,23 @@ const Settings: React.FC<SettingsPageProps> = ({
     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 = () => {
     if (!accessToken) {
       return;
@@ -113,34 +130,61 @@ const Settings: React.FC<SettingsPageProps> = ({
 
   return (
     <div className="w-full mx-4">
-      <Grid numItems={1} className="gap-2 p-8 h-[75vh] w-full mt-2">
-        <Card className="h-[15vh]">
-          <Grid numItems={2} className="mt-2">
-            <Col>
-              <Title>Logging Callbacks</Title>
-            </Col>
-            <Col>
-            <div>
-            {!callbacks ? (
-                <Badge color={"red"}>None</Badge>
-                ) : callbacks.length === 0 ? (
-                <Badge>None</Badge>
-                ) : (
-                callbacks.map((callback, index) => (
-                    <Badge key={index} color={"sky"}>
-                    {callback}
-                    </Badge>
-                ))
-                )}
-            </div>
-            </Col>
-          </Grid>
-          <Col>
+      <Grid numItems={1} className="gap-2 p-8 w-full mt-2">
+      <Title>Logging Callbacks</Title>
+        <Card >
+          <Table>
+            <TableHead>
+              <TableRow>
+                <TableHeaderCell>Callback</TableHeaderCell>
+                <TableHeaderCell>Callback Env Vars</TableHeaderCell>
+                <TableHeaderCell></TableHeaderCell>
+                {/* <TableHeaderCell>Test Callback</TableHeaderCell> */}
+              </TableRow>
+            </TableHead>
+            <TableBody>
+  {callbacks.map((callback, index) => (
+    <TableRow key={index}>
+      <TableCell>
+        <Badge color="emerald">{callback.name}</Badge>
+      </TableCell>
+      <TableCell>
+        <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}>
               Add Callback
             </Button>
-          </Col>
         </Card>
+        
       </Grid>
 
       <Modal