From 9c4bf01bd6c39f4cbc80258c663b14c742dbfe28 Mon Sep 17 00:00:00 2001
From: ishaan-jaff <ishaanjaffer0324@gmail.com>
Date: Mon, 19 Feb 2024 15:14:03 -0800
Subject: [PATCH] (feat) ui set tpm / rpm limits

---
 .../src/components/create_key_button.tsx      | 25 +++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/create_key_button.tsx b/ui/litellm-dashboard/src/components/create_key_button.tsx
index 7e93f0a0a..b27443714 100644
--- a/ui/litellm-dashboard/src/components/create_key_button.tsx
+++ b/ui/litellm-dashboard/src/components/create_key_button.tsx
@@ -70,20 +70,23 @@ const CreateKey: React.FC<CreateKeyProps> = ({
         onOk={handleOk}
         onCancel={handleCancel}
       >
-        <Form form={form} onFinish={handleCreate} labelCol={{ span: 6 }} wrapperCol={{ span: 16 }} labelAlign="left">
+        <Form form={form} onFinish={handleCreate} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} labelAlign="left">
         {userRole === 'App Owner' || userRole === 'Admin' ? (
             <>
+            
             <Form.Item
             label="Key Name"
-            name="key_alias"
+            name="key_alias"          
           >
             <Input />
+            <p style={{ fontStyle: 'italic', color: 'gray' }}>Optional</p>
             </Form.Item>
             <Form.Item
               label="Team ID"
               name="team_id"
             >
               <Input placeholder="ai_team" />
+              <p style={{ fontStyle: 'italic', color: 'gray' }}>Optional</p>
             </Form.Item>
             <Form.Item
             label="Models"
@@ -100,6 +103,7 @@ const CreateKey: React.FC<CreateKeyProps> = ({
                 </Option>
               ))}
             </Select>
+            <p style={{ fontStyle: 'italic', color: 'gray' }}>Optional, defaults to all models</p>
           </Form.Item>
             
 
@@ -108,18 +112,35 @@ const CreateKey: React.FC<CreateKeyProps> = ({
               name="max_budget"
             >
               <InputNumber step={0.01} precision={2} width={200}/>
+              <p style={{ fontStyle: 'italic', color: 'gray' }}>Optional, defaults Unlimited Budget </p>
+            </Form.Item>
+            <Form.Item
+              label="Tokens per minute Limit (TPM)"
+              name="tpm_limit"
+            >
+              <InputNumber step={1} width={400}/>
+              <p style={{ fontStyle: 'italic', color: 'gray' }}>Optional, defaults to Unlimited TPM</p>
+            </Form.Item>
+            <Form.Item
+              label="Requests per minute Limit (RPM)"
+              name="rpm_limit"
+            >
+              <InputNumber step={1} width={400}/>
+              <p style={{ fontStyle: 'italic', color: 'gray' }}>Optional, defaults to Unlimited RPM</p>
             </Form.Item>
             <Form.Item
               label="Duration (eg: 30s, 30h, 30d)"
               name="duration"
             >
               <Input />
+              <p style={{ fontStyle: 'italic', color: 'gray' }}>Optional, defaults to never expiring key</p>
             </Form.Item>
             <Form.Item
               label="Metadata"
               name="metadata"
             >
               <Input.TextArea rows={4} placeholder="Enter metadata as JSON" />
+              <p style={{ fontStyle: 'italic', color: 'gray' }}>Optional, defaults to null</p>
             </Form.Item>
             </>
             ) : (