From 86758c2b8993ee5f18246e1096c969070893e289 Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Thu, 25 Apr 2024 11:50:54 -0700
Subject: [PATCH 1/3] ui - show key alias on "end users tab"

---
 ui/litellm-dashboard/src/components/view_users.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/view_users.tsx b/ui/litellm-dashboard/src/components/view_users.tsx
index 192ff490a..2f26126ce 100644
--- a/ui/litellm-dashboard/src/components/view_users.tsx
+++ b/ui/litellm-dashboard/src/components/view_users.tsx
@@ -155,7 +155,7 @@ const ViewUserDashboard: React.FC<ViewUserDashboardProps> = ({
     <div style={{ width: "100%" }}>
       <Grid className="gap-2 p-2 h-[75vh] w-full mt-8">
         <CreateUser userID={userID} accessToken={accessToken} teams={teams}/>
-        <Card className="w-full mx-auto flex-auto overflow-y-auto max-h-[50vh] mb-4">
+        <Card className="w-full mx-auto flex-auto overflow-y-auto max-h-[70vh] mb-4">
           <TabGroup>
             <TabList variant="line" defaultValue="1">
               <Tab value="1">Key Owners</Tab>
@@ -220,8 +220,8 @@ const ViewUserDashboard: React.FC<ViewUserDashboardProps> = ({
                       {keys?.map((key: any, index: number) => {
                         if (
                           key &&
-                          key["key_name"] !== null &&
-                          key["key_name"].length > 0
+                          key["key_alias"] !== null &&
+                          key["key_alias"].length > 0
                         ) {
                           return (
                             <SelectItem
@@ -229,7 +229,7 @@ const ViewUserDashboard: React.FC<ViewUserDashboardProps> = ({
                               value={String(index)}
                               onClick={() => onKeyClick(key["token"])}
                             >
-                              {key["key_name"]}
+                              {key["key_alias"]}
                             </SelectItem>
                           );
                         }
@@ -237,7 +237,7 @@ const ViewUserDashboard: React.FC<ViewUserDashboardProps> = ({
                     </Select>
                   </div>
                 </div>
-                <Table>
+                <Table className="max-h-[70vh] min-h-[500px]">
                   <TableHead>
                     <TableRow>
                       <TableHeaderCell>End User</TableHeaderCell>

From a1784b4387afce7a89d205b816634ec6d6771a39 Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Thu, 25 Apr 2024 11:51:07 -0700
Subject: [PATCH 2/3] ui - fix view key table size

---
 ui/litellm-dashboard/src/components/view_key_table.tsx | 2 +-
 1 file changed, 1 insertion(+), 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 669547396..8fdbd88fd 100644
--- a/ui/litellm-dashboard/src/components/view_key_table.tsx
+++ b/ui/litellm-dashboard/src/components/view_key_table.tsx
@@ -425,7 +425,7 @@ const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
   return (
     <div>
     <Card className="w-full mx-auto flex-auto overflow-y-auto max-h-[50vh] mb-4 mt-2">
-      <Table className="mt-5">
+      <Table className="mt-5 max-h-[300px] min-h-[300px]">
         <TableHead>
           <TableRow>
             <TableHeaderCell>Key Alias</TableHeaderCell>

From 612bc080c2721720bb3d7b4b8791697fe1d0fd31 Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Thu, 25 Apr 2024 12:12:23 -0700
Subject: [PATCH 3/3] ui - cleanup key owners tab vs end users tab

---
 ui/litellm-dashboard/src/components/view_users.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/view_users.tsx b/ui/litellm-dashboard/src/components/view_users.tsx
index 2f26126ce..b3960965c 100644
--- a/ui/litellm-dashboard/src/components/view_users.tsx
+++ b/ui/litellm-dashboard/src/components/view_users.tsx
@@ -153,9 +153,13 @@ const ViewUserDashboard: React.FC<ViewUserDashboardProps> = ({
 
   return (
     <div style={{ width: "100%" }}>
-      <Grid className="gap-2 p-2 h-[75vh] w-full mt-8">
+      <Grid className="gap-2 p-2 h-[80vh] w-full mt-8">
         <CreateUser userID={userID} accessToken={accessToken} teams={teams}/>
-        <Card className="w-full mx-auto flex-auto overflow-y-auto max-h-[70vh] mb-4">
+        <Card className="w-full mx-auto flex-auto overflow-y-auto max-h-[80vh] mb-4">
+        <div className="mb-4 mt-1">
+        <Text><b>Key Owners: </b> Users on LiteLLM that created API Keys. Automatically tracked by LiteLLM</Text>
+        <Text className="mt-1"><b>End Users: </b>End Users of your LLM API calls. Tracked When a `user` param is passed in your LLM calls</Text>
+        </div>
           <TabGroup>
             <TabList variant="line" defaultValue="1">
               <Tab value="1">Key Owners</Tab>
@@ -163,6 +167,7 @@ const ViewUserDashboard: React.FC<ViewUserDashboardProps> = ({
             </TabList>
             <TabPanels>
               <TabPanel>
+                
                 <Table className="mt-5">
                   <TableHead>
                     <TableRow>