From 59790c6cef34185067c11dd2e8841aafea820f1c Mon Sep 17 00:00:00 2001
From: ishaan-jaff <ishaanjaffer0324@gmail.com>
Date: Sat, 3 Feb 2024 12:32:49 -0800
Subject: [PATCH 1/4] (feat) view role on ui

---
 .../src/components/navbar.tsx                 |  8 ++---
 .../src/components/user_dashboard.tsx         | 29 ++++++++++++++++++-
 2 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/navbar.tsx b/ui/litellm-dashboard/src/components/navbar.tsx
index 75b5ada9be4..f775a4138ec 100644
--- a/ui/litellm-dashboard/src/components/navbar.tsx
+++ b/ui/litellm-dashboard/src/components/navbar.tsx
@@ -9,14 +9,13 @@ import { Button, Text, Metric,Title, TextInput, Grid, Col } from "@tremor/react"
 // Define the props type
 interface NavbarProps {
     userID: string | null;
+    userRole: string | null;
 }
-const Navbar: React.FC<NavbarProps> = ({ userID }) => {
-    const searchParams = useSearchParams();
-    const token = searchParams.get("token");
+const Navbar: React.FC<NavbarProps> = ({ userID, userRole }) => {
     console.log("User ID:", userID);
 
     return (
-        <nav className="left-0 right-0 top-0 flex justify-between items-center h-12">
+        <nav className="left-0 right-0 top-0 flex justify-between items-center h-12 mb-4">
             <div className="text-left mx-4 my-2 absolute top-0 left-0">
                 <div className="flex flex-col items-center">
                 <Link href="/">
@@ -27,6 +26,7 @@ const Navbar: React.FC<NavbarProps> = ({ userID }) => {
             <div className="text-right mx-4 my-2 absolute top-0 right-0">
                 <Button color="white">
                 <Title>{userID}</Title>
+                <Text>Role: {userRole}</Text>
                 </Button>
             </div>
             
diff --git a/ui/litellm-dashboard/src/components/user_dashboard.tsx b/ui/litellm-dashboard/src/components/user_dashboard.tsx
index db09cd8d1b7..560c30b6d40 100644
--- a/ui/litellm-dashboard/src/components/user_dashboard.tsx
+++ b/ui/litellm-dashboard/src/components/user_dashboard.tsx
@@ -20,8 +20,26 @@ const UserDashboard = () => {
 
   const token = searchParams.get("token");
   const [accessToken, setAccessToken] = useState<string | null>(null);
+  const [userRole, setUserRole] = useState<string | null>(null);
 
 
+  function formatUserRole(userRole: string) {
+    if (!userRole) {
+      return "Undefined Role";
+    }
+  
+    switch (userRole.toLowerCase()) {
+      case "app_owner":
+        return "App Owner";
+      case "admin":
+        return "Admin";
+      case "app_user":
+        return "App User";
+      default:
+        return "Unknown Role";
+    }
+  }
+
   // Moved useEffect inside the component and used a condition to run fetch only if the params are available
   useEffect(() => {
     if (token){
@@ -33,8 +51,16 @@ const UserDashboard = () => {
         console.log("Decoded key:", decoded.key);
         // set accessToken
         setAccessToken(decoded.key);
-      }
 
+        // check if userRole is defined
+        if (decoded.user_role) {
+          const formattedUserRole = formatUserRole(decoded.user_role);
+          console.log("Decoded user_role:", formattedUserRole);
+          setUserRole(formattedUserRole);
+        } else {
+          console.log("User role not defined");
+        }
+      }
     }
     if (userID && accessToken  && !data) {
       const fetchData = async () => {
@@ -72,6 +98,7 @@ const UserDashboard = () => {
     <div>
       <Navbar
         userID={userID}
+        userRole={userRole}
       />
       <Grid numItems={1} className="gap-0 p-10 h-[75vh] w-full">
       <Col numColSpan={1}>

From 6de6774509de9b5bc5433b518af1433912e4f091 Mon Sep 17 00:00:00 2001
From: ishaan-jaff <ishaanjaffer0324@gmail.com>
Date: Sat, 3 Feb 2024 12:50:30 -0800
Subject: [PATCH 2/4] (feat) ui - conditionally show form based on userRole

---
 .../src/components/create_key_button.tsx      | 87 +++++++++++--------
 .../src/components/user_dashboard.tsx         |  4 +
 2 files changed, 54 insertions(+), 37 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/create_key_button.tsx b/ui/litellm-dashboard/src/components/create_key_button.tsx
index c06ef8e9e37..391e535d547 100644
--- a/ui/litellm-dashboard/src/components/create_key_button.tsx
+++ b/ui/litellm-dashboard/src/components/create_key_button.tsx
@@ -11,6 +11,7 @@ const { Option } = Select;
 
 interface CreateKeyProps {
   userID: string;
+  userRole: string;
   accessToken: string;
   data: any[] | null;
   setData: React.Dispatch<React.SetStateAction<any[] | null>>;
@@ -18,6 +19,7 @@ interface CreateKeyProps {
 
 const CreateKey: React.FC<CreateKeyProps> = ({
   userID,
+  userRole,
   accessToken,
   data,
   setData,
@@ -80,45 +82,56 @@ const CreateKey: React.FC<CreateKeyProps> = ({
             name="key_alias"
           >
             <Input />
-          </Form.Item>
+            </Form.Item>
+            <Form.Item
+              label="Team ID"
+              name="team_id"
+            >
+              <Input placeholder="ai_team" />
+            </Form.Item>
 
-          <Form.Item
-            label="Models (Comma Separated). Eg: gpt-3.5-turbo,gpt-4"
-            name="models"
-          >
-            <Input placeholder="gpt-4,gpt-3.5-turbo" />
-          </Form.Item>
-          
+            <Form.Item
+              label="Description"
+              name="description"
+            >
+              <Input placeholder="ai_team" />
+            </Form.Item>
 
-          <Form.Item
-            label="Max Budget (USD)"
-            name="max_budget"
-          >
-            <InputNumber step={0.01} precision={2} width={200}/>
-          </Form.Item>
-          <Form.Item
-            label="Duration (eg: 30s, 30h, 30d)"
-            name="duration"
-          >
-            <Input />
-          </Form.Item>
-          <Form.Item
-            label="Team ID"
-            name="team_id"
-          >
-            <Input placeholder="ai_team" />
-          </Form.Item>
-          <Form.Item
-            label="Metadata"
-            name="metadata"
-          >
-            <Input.TextArea rows={4} placeholder="Enter metadata as JSON" />
-          </Form.Item>
-          <div style={{ textAlign: 'right', marginTop: '10px' }}>
-            <Button2 htmlType="submit">
-              Create Key
-            </Button2>
-          </div>
+          {userRole === 'App Owner' || userRole === 'Admin' ? (
+            <>
+            <Form.Item
+              label="Models (Comma Separated). Eg: gpt-3.5-turbo,gpt-4"
+              name="models"
+            >
+              <Input placeholder="gpt-4,gpt-3.5-turbo" />
+            </Form.Item>
+            
+
+            <Form.Item
+              label="Max Budget (USD)"
+              name="max_budget"
+            >
+              <InputNumber step={0.01} precision={2} width={200}/>
+            </Form.Item>
+            <Form.Item
+              label="Duration (eg: 30s, 30h, 30d)"
+              name="duration"
+            >
+              <Input />
+            </Form.Item>
+            <Form.Item
+              label="Metadata"
+              name="metadata"
+            >
+              <Input.TextArea rows={4} placeholder="Enter metadata as JSON" />
+            </Form.Item>
+            </>
+            ) : null}
+            <div style={{ textAlign: 'right', marginTop: '10px' }}>
+              <Button2 htmlType="submit">
+                Create Key
+              </Button2>
+              </div>
         </Form>
       </Modal>
       {apiKey && (
diff --git a/ui/litellm-dashboard/src/components/user_dashboard.tsx b/ui/litellm-dashboard/src/components/user_dashboard.tsx
index 560c30b6d40..f8054751eb6 100644
--- a/ui/litellm-dashboard/src/components/user_dashboard.tsx
+++ b/ui/litellm-dashboard/src/components/user_dashboard.tsx
@@ -31,6 +31,8 @@ const UserDashboard = () => {
     switch (userRole.toLowerCase()) {
       case "app_owner":
         return "App Owner";
+      case "demo_app_owner":
+          return "AppOwner";
       case "admin":
         return "Admin";
       case "app_user":
@@ -104,12 +106,14 @@ const UserDashboard = () => {
       <Col numColSpan={1}>
         <ViewKeyTable
           userID={userID}
+          userRole={userRole}
           accessToken={accessToken}
           data={data}
           setData={setData}
         />
         <CreateKey
           userID={userID}
+          userRole={userRole}
           accessToken={accessToken}
           data={data}
           setData={setData}

From bcd36865d9144b9908a7f717a7fcc87947ce10d5 Mon Sep 17 00:00:00 2001
From: ishaan-jaff <ishaanjaffer0324@gmail.com>
Date: Sat, 3 Feb 2024 13:01:05 -0800
Subject: [PATCH 3/4] (feat) ui - show different form based on userRole

---
 .../src/components/create_key_button.tsx      | 33 +++++++++++++++----
 1 file changed, 27 insertions(+), 6 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/create_key_button.tsx b/ui/litellm-dashboard/src/components/create_key_button.tsx
index 391e535d547..f9cf5854d68 100644
--- a/ui/litellm-dashboard/src/components/create_key_button.tsx
+++ b/ui/litellm-dashboard/src/components/create_key_button.tsx
@@ -76,8 +76,9 @@ const CreateKey: React.FC<CreateKeyProps> = ({
         onCancel={handleCancel}
       >
         <Form form={form} onFinish={handleCreate} labelCol={{ span: 6 }} wrapperCol={{ span: 16 }} labelAlign="left">
-        
-          <Form.Item
+        {userRole === 'App Owner' || userRole === 'Admin' ? (
+            <>
+            <Form.Item
             label="Key Name"
             name="key_alias"
           >
@@ -96,9 +97,6 @@ const CreateKey: React.FC<CreateKeyProps> = ({
             >
               <Input placeholder="ai_team" />
             </Form.Item>
-
-          {userRole === 'App Owner' || userRole === 'Admin' ? (
-            <>
             <Form.Item
               label="Models (Comma Separated). Eg: gpt-3.5-turbo,gpt-4"
               name="models"
@@ -126,7 +124,30 @@ const CreateKey: React.FC<CreateKeyProps> = ({
               <Input.TextArea rows={4} placeholder="Enter metadata as JSON" />
             </Form.Item>
             </>
-            ) : null}
+            ) : (
+              <>
+              <Form.Item
+            label="Key Name"
+            name="key_alias"
+          >
+            <Input />
+            </Form.Item>
+            <Form.Item
+              label="Team ID (Contact Group)"
+              name="team_id"
+            >
+              <Input placeholder="ai_team" />
+            </Form.Item>
+
+            <Form.Item
+              label="Description"
+              name="description"
+            >
+              <Input.TextArea placeholder="Enter description" rows={4}/>
+            </Form.Item>
+              </>
+            )
+          }        
             <div style={{ textAlign: 'right', marginTop: '10px' }}>
               <Button2 htmlType="submit">
                 Create Key

From 644c55d41c09fe99bc07c9eb3e28239fda40895a Mon Sep 17 00:00:00 2001
From: ishaan-jaff <ishaanjaffer0324@gmail.com>
Date: Sat, 3 Feb 2024 13:48:24 -0800
Subject: [PATCH 4/4] (feat) enter key description on ui

---
 .../src/components/networking.tsx                | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/ui/litellm-dashboard/src/components/networking.tsx b/ui/litellm-dashboard/src/components/networking.tsx
index 7859c6a8cd9..13add039ba7 100644
--- a/ui/litellm-dashboard/src/components/networking.tsx
+++ b/ui/litellm-dashboard/src/components/networking.tsx
@@ -14,15 +14,31 @@ export const keyCreateCall = async (
   try {
     console.log("Form Values in keyCreateCall:", formValues); // Log the form values before making the API call    
     
+    // check if formValues.description is not undefined, make it a string and add it to formValues.metadata
+    if (formValues.description) {
+      // add to formValues.metadata
+      if (!formValues.metadata) {
+        formValues.metadata = {}
+      }
+      // value needs to be in "", valid JSON
+      formValues.metadata.description = formValues.description;
+      // remove descrption from formValues
+      delete formValues.description;
+      formValues.metadata = JSON.stringify(formValues.metadata);
+    }
     // if formValues.metadata is not undefined, make it a valid dict 
     if (formValues.metadata) {
+      console.log("formValues.metadata:", formValues.metadata);
       // if there's an exception JSON.parse, show it in the message
       try {
         formValues.metadata = JSON.parse(formValues.metadata);
       } catch (error) {
         message.error("Failed to parse metadata: " + error);
+        throw new Error("Failed to parse metadata: " + error);
       }
     }
+
+    console.log("Form Values after check:", formValues);
     const url = proxyBaseUrl ? `${proxyBaseUrl}/key/generate` : `/key/generate`;
     const response = await fetch(url, {
       method: "POST",