From 0e7fd162f487ad486ec2ec0e086d44f599406a28 Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Fri, 7 Mar 2025 15:43:10 -0800
Subject: [PATCH] (UI) - Keys Page - Show 100 Keys Per Page, Use full height,
 increase width of key alias (#9064)

* show 100 keys + increase height of keys

* fix key_alias

* litellm show key alias full width
---
 .../src/components/all_keys_table.tsx            | 16 +++++++++-------
 .../src/components/view_key_table.tsx            |  2 +-
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/all_keys_table.tsx b/ui/litellm-dashboard/src/components/all_keys_table.tsx
index 274567b732..1f05c243ee 100644
--- a/ui/litellm-dashboard/src/components/all_keys_table.tsx
+++ b/ui/litellm-dashboard/src/components/all_keys_table.tsx
@@ -187,6 +187,14 @@ export function AllKeysTable({
         </div>
       ),
     },
+    {
+      header: "Key Alias",
+      accessorKey: "key_alias",
+      cell: (info) => {
+        const value = info.getValue() as string;
+        return <Tooltip title={value}>{value ? (value.length > 20 ? `${value.slice(0, 20)}...` : value) : "-"}</Tooltip>
+      }
+    },
     {
       header: "Secret Key",
       accessorKey: "key_name",
@@ -206,12 +214,6 @@ export function AllKeysTable({
       accessorKey: "team_id",
       cell: (info) => <Tooltip title={info.getValue() as string}>{info.getValue() ? `${(info.getValue() as string).slice(0, 7)}...` : "-"}</Tooltip>
     },
-
-    {
-      header: "Key Alias",
-      accessorKey: "key_alias",
-      cell: (info) => <Tooltip title={info.getValue() as string}>{info.getValue() ? `${(info.getValue() as string).slice(0, 7)}...` : "-"}</Tooltip>
-    },
     {
       header: "Organization ID",
       accessorKey: "organization_id",
@@ -370,7 +372,7 @@ export function AllKeysTable({
               </div>
             </div>
           </div>
-          <div className="h-[32rem] overflow-auto">
+          <div className="h-[75vh] overflow-auto">
             
             <DataTable
               columns={columns.filter(col => col.id !== 'expander')}
diff --git a/ui/litellm-dashboard/src/components/view_key_table.tsx b/ui/litellm-dashboard/src/components/view_key_table.tsx
index 8aadbc8438..22e786dcbc 100644
--- a/ui/litellm-dashboard/src/components/view_key_table.tsx
+++ b/ui/litellm-dashboard/src/components/view_key_table.tsx
@@ -412,7 +412,7 @@ const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
         isLoading={isLoading}
         pagination={pagination}
         onPageChange={handlePageChange}
-        pageSize={50}
+        pageSize={100}
         teams={teams}
         selectedTeam={selectedTeam}
         setSelectedTeam={setSelectedTeam}