build(ui/litellm-dashboard): ui cleanup

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

@@ -1,7 +1,7 @@
 "use client";
-import React, { useEffect, useState } from "react";
-import { userInfoCall } from "./networking";
-import { StatusOnlineIcon } from "@heroicons/react/outline";
+import React, { useEffect } from "react";
+import { keyDeleteCall } from "./networking";
+import { StatusOnlineIcon, TrashIcon } from "@heroicons/react/outline";
 import {
   Badge,
   Card,
@@ -13,6 +13,7 @@ import {
   TableRow,
   Text,
   Title,
+  Icon,
 } from "@tremor/react";
 
 // Define the props type
@@ -20,96 +21,75 @@ interface ViewKeyTableProps {
   userID: string;
   accessToken: string;
   proxyBaseUrl: string;
+  data: any[] | null;
+  setData: React.Dispatch<React.SetStateAction<any[] | null>>;
 }
 
-const data = [
-  {
-    key_alias: "my test key",
-    key_name: "sk-...hd74",
-    spend: 23.0,
-    expires: "active",
-    token: "23902dwojd90",
-  },
-  {
-    key_alias: "my test key",
-    key_name: "sk-...hd74",
-    spend: 23.0,
-    expires: "active",
-    token: "23902dwojd90",
-  },
-  {
-    key_alias: "my test key",
-    key_name: "sk-...hd74",
-    spend: 23.0,
-    expires: "active",
-    token: "23902dwojd90",
-  },
-  {
-    key_alias: "my test key",
-    key_name: "sk-...hd74",
-    spend: 23.0,
-    expires: "active",
-    token: "23902dwojd90",
-  },
-];
-
 const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
   userID,
   accessToken,
   proxyBaseUrl,
+  data,
+  setData,
 }) => {
-  const [data, setData] = useState(null); // State to store the data from the API
-
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const response = await userInfoCall(
-          (proxyBaseUrl = proxyBaseUrl),
-          (accessToken = accessToken),
-          (userID = userID)
-        );
-        setData(response["keys"]); // Update state with the fetched data
-      } catch (error) {
-        console.error("There was an error fetching the data", error);
-        // Optionally, update your UI to reflect the error state
-      }
-    };
-
-    fetchData(); // Call the async function to fetch data
-  }, []); // Empty dependency array
+  const handleDelete = async (token: String) => {
+    if (data == null) {
+      return;
+    }
+    try {
+      await keyDeleteCall(proxyBaseUrl, accessToken, token);
+      // Successfully completed the deletion. Update the state to trigger a rerender.
+      const filteredData = data.filter((item) => item.token !== token);
+      setData(filteredData);
+    } catch (error) {
+      console.error("Error deleting the key:", error);
+      // Handle any error situations, such as displaying an error message to the user.
+    }
+  };
 
   if (data == null) {
     return;
   }
+  console.log("RERENDER TRIGGERED");
   return (
-    <Card className="flex-auto overflow-y-auto max-h-[50vh] mb-4">
+    <Card className="w-full mx-auto flex-auto overflow-y-auto max-h-[50vh] mb-4">
       <Title>API Keys</Title>
       <Table className="mt-5">
         <TableHead>
           <TableRow>
-            <TableHeaderCell>Alias</TableHeaderCell>
             <TableHeaderCell>Secret Key</TableHeaderCell>
             <TableHeaderCell>Spend</TableHeaderCell>
-            <TableHeaderCell>Status</TableHeaderCell>
+            <TableHeaderCell>Expires</TableHeaderCell>
           </TableRow>
         </TableHead>
         <TableBody>
-          {data.map((item) => (
-            <TableRow key={item.token}>
-              <TableCell>{item.key_alias}</TableCell>
-              <TableCell>
-                <Text>{item.key_name}</Text>
-              </TableCell>
-              <TableCell>
-                <Text>{item.spend}</Text>
-              </TableCell>
-              <TableCell>
-                <Badge color="emerald" icon={StatusOnlineIcon}>
-                  {item.expires}
-                </Badge>
-              </TableCell>
-            </TableRow>
-          ))}
+          {data.map((item) => {
+            console.log(item);
+            return (
+              <TableRow key={item.token}>
+                <TableCell>
+                  <Text>{item.key_name}</Text>
+                </TableCell>
+                <TableCell>
+                  <Text>{item.spend}</Text>
+                </TableCell>
+                <TableCell>
+                  {item.expires != null ? (
+                    <Text>{item.expires}</Text>
+                  ) : (
+                    <Text>Never expires</Text>
+                  )}
+                </TableCell>
+                <TableCell>
+                  <Icon
+                    onClick={() => handleDelete(item.token)}
+                    icon={TrashIcon}
+                    size="xs"
+                  />
+                </TableCell>
+              </TableRow>
+            );
+          })}
         </TableBody>
       </Table>
     </Card>