ui - set permissions on keys

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

@@ -106,6 +106,26 @@ const CreateKey: React.FC<CreateKeyProps> = ({
         );
       }
 
+      if (formValues?.permissions != null) { 
+        /*
+        existing permissions = ["get_spend_logs"]
+        make this a dict like
+        {
+          "get_spend_logs": true
+        }
+        */
+
+        let permissionsForAPI: Record<string, boolean> = {};
+
+        for (let i = 0; i < formValues?.permissions?.length; i++) {
+          let permissionName: string = formValues?.permissions[i];
+          permissionsForAPI[permissionName] = true;
+        }
+        formValues.permissions = permissionsForAPI;
+        
+      } 
+
+
       message.info("Making API Call");
       setIsModalVisible(true);
       const response = await keyCreateCall(accessToken, userID, formValues);
@@ -194,8 +214,7 @@ const CreateKey: React.FC<CreateKeyProps> = ({
             <Form.Item
               label="Models"
               name="models"
-              rules={[{ required: true, message: "Please select a model" }]}
-              help="required"
+              rules={[{ message: "Please select a model" }]}
             >
               <Select
                 mode="multiple"
@@ -327,7 +346,7 @@ const CreateKey: React.FC<CreateKeyProps> = ({
                   
                   help={`Select routes this key is allowed to access`}
                 >
-                  <Select defaultValue={null} placeholder="n/a" mode="multiple" defaultValue={['get_spend_routes', 'llm_routes']}>
+                  <Select placeholder="n/a" mode="multiple" defaultValue={['get_spend_routes', 'llm_routes']} value={['get_spend_routes', 'llm_routes']}>
                     <Select.Option value="get_spend_routes">Spend Reporting Routes (/global/spend/report, etc) </Select.Option>
                     <Select.Option value="llm_routes">LLM routes (/chat, /completions, /embeddings)</Select.Option>
                   </Select>

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

@@ -68,6 +68,7 @@ interface ItemData {
   team_id: string;
   metadata: any;
   expires: any;
+  permissions: Record<string, any> | null;
   // Add any other properties that exist in the item data
 }
 
@@ -597,6 +598,17 @@ const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
         <Text className="my-1">{selectedToken.key_alias ? selectedToken.key_alias : selectedToken.key_name}</Text>
         <Title>Token ID</Title>
         <Text className="my-1 text-[12px]">{selectedToken.token}</Text>
+        {
+          selectedToken.permissions != null ? (
+            <div>
+                <Title>Permissions</Title>
+                <pre>{JSON.stringify(selectedToken.permissions)}</pre>
+            </div>
+          ) : (
+            <></>
+          )
+        }
+              
         <Title>Metadata</Title>
         <Text className="my-1"><pre>{JSON.stringify(selectedToken.metadata)} </pre></Text>
       </Card>