ui - v0 show users callbacks set

ui/litellm-dashboard/src/app/page.tsx

@@ -164,6 +164,9 @@ const CreateKeyPage = () => {
             />
           ) : page == "settings" ? (
             <Settings
+              userID={userID}
+              userRole={userRole}
+              accessToken={accessToken}
             />
           ) : (
             <Usage

ui/litellm-dashboard/src/components/networking.tsx

@@ -1120,3 +1120,42 @@ export const slackBudgetAlertsHealthCheck = async (accessToken: String) => {
   }
 };
 
+
+
+export const getCallbacksCall = async (
+  accessToken: String,
+  userID: String,
+  userRole: String
+) => {
+  /**
+   * Get all the models user has access to
+   */
+  try {
+    let url = proxyBaseUrl ? `${proxyBaseUrl}/get/config/callbacks` : `/get/config/callbacks`;
+
+    //message.info("Requesting model data");
+    const response = await fetch(url, {
+      method: "GET",
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+        "Content-Type": "application/json",
+      },
+    });
+
+    if (!response.ok) {
+      const errorData = await response.text();
+      message.error(errorData);
+      throw new Error("Network response was not ok");
+    }
+
+    const data = await response.json();
+    //message.info("Received model data");
+    return data;
+    // Handle success - you might want to update some state or UI based on the created key
+  } catch (error) {
+    console.error("Failed to get callbacks:", error);
+    throw error;
+  }
+};
+
+

ui/litellm-dashboard/src/components/settings.tsx

@@ -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 = () => {
+interface SettingsPageProps {
- const [callbacks, setCallbacks] = useState([
+    accessToken: string | null;
-   { name: "Callback 1", envVars: ["sk-243******", "SECRET_KEY_2", "SECRET_KEY_3"] },
+    userRole: string | null;
-   { name: "Callback 2", envVars: ["sk-456******", "SECRET_KEY_4", "SECRET_KEY_5"] },
+    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>
+
+        <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>
-         <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>
        </Card>
      </Grid>
    </div>