From 11683e5a7ecb06628de752c9338ec6b88d5ecdfa Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Tue, 19 Mar 2024 11:54:36 -0700
Subject: [PATCH 1/3] (fix) rename spend report button

---
 ui/litellm-dashboard/src/components/view_key_spend_report.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/litellm-dashboard/src/components/view_key_spend_report.tsx b/ui/litellm-dashboard/src/components/view_key_spend_report.tsx
index f0916ec0176..6741db2a95c 100644
--- a/ui/litellm-dashboard/src/components/view_key_spend_report.tsx
+++ b/ui/litellm-dashboard/src/components/view_key_spend_report.tsx
@@ -106,7 +106,7 @@ const ViewKeySpendReport: React.FC<ViewKeySpendReportProps> = ({
   return (
     <div>
       <Button size = "xs" onClick={showModal} variant="secondary">
-        View Spend Report
+        Spend Report
       </Button>
       <Modal
         visible={isModalVisible}

From 4b33a53f25bd3a4bb9fbf1c73a7d7180b78f3d51 Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Tue, 19 Mar 2024 12:22:49 -0700
Subject: [PATCH 2/3] (feat) admin ui set max_width per column

---
 .../src/components/view_key_table.tsx         | 34 ++++++++++++-------
 1 file changed, 21 insertions(+), 13 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/view_key_table.tsx b/ui/litellm-dashboard/src/components/view_key_table.tsx
index 7f36511e9ba..725466bab62 100644
--- a/ui/litellm-dashboard/src/components/view_key_table.tsx
+++ b/ui/litellm-dashboard/src/components/view_key_table.tsx
@@ -103,27 +103,35 @@ const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
             }
             return (
               <TableRow key={item.token}>
-                <TableCell>
+                <TableCell style={{ maxWidth: "2px", whiteSpace: "pre-wrap", overflow: "hidden"  }}>
                   {item.key_alias != null ? (
                     <Text>{item.key_alias}</Text>
                   ) : (
                     <Text>Not Set</Text>
                   )}
                 </TableCell>
-                <TableCell>
+                <TableCell style={{ maxWidth: "2px", whiteSpace: "pre-wrap", overflow: "hidden"  }}>
                   <Text>{item.key_name}</Text>
                 </TableCell>
-                <TableCell>
-                  <Text>{item.spend}</Text>
+                <TableCell style={{ maxWidth: "2px", whiteSpace: "pre-wrap", overflow: "hidden"  }}>
+                  <Text>
+                    {(() => {
+                      try {
+                        return parseFloat(item.spend).toFixed(4);
+                      } catch (error) {
+                        return item.spend;
+                      }
+                    })()}
+                  </Text>
                 </TableCell>
-                <TableCell>
+                <TableCell style={{ maxWidth: "2px", whiteSpace: "pre-wrap", overflow: "hidden"  }}>
                   {item.max_budget != null ? (
                     <Text>{item.max_budget}</Text>
                   ) : (
                     <Text>Unlimited Budget</Text>
                   )}
                 </TableCell>
-                <TableCell>
+                <TableCell style={{ maxWidth: '2px' }}>
                   <ViewKeySpendReport
                     token={item.token}
                     accessToken={accessToken}
@@ -132,30 +140,30 @@ const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
                     keyName={item.key_name}
                   />
                 </TableCell>
-                <TableCell>
+                <TableCell style={{ maxWidth: "4px", whiteSpace: "pre-wrap", overflow: "hidden"  }}>
                   <Text>{item.team_id}</Text>
                 </TableCell>
-                <TableCell>
+                <TableCell style={{ maxWidth: "4px", whiteSpace: "pre-wrap", overflow: "hidden"  }}>
                   <Text>{JSON.stringify(item.metadata)}</Text>
                 </TableCell>
-                <TableCell>
+                <TableCell style={{ maxWidth: "4px", whiteSpace: "pre-wrap", overflow: "hidden"  }}>
                   <Text>{JSON.stringify(item.models)}</Text>
                 </TableCell>
-                <TableCell>
+                <TableCell style={{ maxWidth: "2px", overflowWrap: "break-word" }}>
                   <Text>
                     TPM Limit: {item.tpm_limit ? item.tpm_limit : "Unlimited"}{" "}
                     <br></br> RPM Limit:{" "}
                     {item.rpm_limit ? item.rpm_limit : "Unlimited"}
                   </Text>
                 </TableCell>
-                <TableCell>
+                <TableCell style={{ maxWidth: "2px", wordWrap: "break-word" }}>
                   {item.expires != null ? (
                     <Text>{item.expires}</Text>
                   ) : (
-                    <Text>Never expires</Text>
+                    <Text>Never</Text>
                   )}
                 </TableCell>
-                <TableCell>
+                <TableCell style={{ maxWidth: "2px", wordWrap: "break-word" }}>
                   <Icon
                     onClick={() => handleDelete(item.token)}
                     icon={TrashIcon}

From 9b330db88f574a4454e97d6a4989653dcc70e847 Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Tue, 19 Mar 2024 12:38:53 -0700
Subject: [PATCH 3/3] (feat) show slice of metadata

---
 ui/litellm-dashboard/src/components/view_key_table.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/ui/litellm-dashboard/src/components/view_key_table.tsx b/ui/litellm-dashboard/src/components/view_key_table.tsx
index 725466bab62..d987e3462ea 100644
--- a/ui/litellm-dashboard/src/components/view_key_table.tsx
+++ b/ui/litellm-dashboard/src/components/view_key_table.tsx
@@ -144,7 +144,8 @@ const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
                   <Text>{item.team_id}</Text>
                 </TableCell>
                 <TableCell style={{ maxWidth: "4px", whiteSpace: "pre-wrap", overflow: "hidden"  }}>
-                  <Text>{JSON.stringify(item.metadata)}</Text>
+                  <Text>{JSON.stringify(item.metadata).slice(0, 400)}</Text>
+                  
                 </TableCell>
                 <TableCell style={{ maxWidth: "4px", whiteSpace: "pre-wrap", overflow: "hidden"  }}>
                   <Text>{JSON.stringify(item.models)}</Text>