Merge pull request #1801 from BerriAI/litellm_ui_app_owner_role

[UI] view role on ui

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,
@@ -74,51 +76,83 @@ 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"
           >
             <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="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"
+            <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>
+            </>
+            ) : (
+              <>
+              <Form.Item
+            label="Key Name"
+            name="key_alias"
           >
             <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>
+            </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
+              </Button2>
+              </div>
         </Form>
       </Modal>
       {apiKey && (

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>
             

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",

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

@@ -20,8 +20,28 @@ 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 "demo_app_owner":
+          return "AppOwner";
+      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 +53,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,17 +100,20 @@ const UserDashboard = () => {
     <div>
       <Navbar
         userID={userID}
+        userRole={userRole}
       />
       <Grid numItems={1} className="gap-0 p-10 h-[75vh] w-full">
       <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}