From 98d1113e893951f649cffe547a22d4a7b8add936 Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Sat, 24 Aug 2024 12:42:39 -0700
Subject: [PATCH] ui allow setting tpm / rpm limits on ui

---
 .../src/components/view_key_table.tsx         | 45 +++++++++++++++----
 1 file changed, 37 insertions(+), 8 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/view_key_table.tsx b/ui/litellm-dashboard/src/components/view_key_table.tsx
index 77225d1aa9d..d3b073ef9fb 100644
--- a/ui/litellm-dashboard/src/components/view_key_table.tsx
+++ b/ui/litellm-dashboard/src/components/view_key_table.tsx
@@ -172,14 +172,6 @@ const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
           labelAlign="left"
         >
                 <>
-                <Form.Item 
-                label="Key Name" 
-                name="key_alias"
-                rules={[{ required: true, message: 'Please input a key name' }]}
-                help="required"
-              >
-                <Input />
-              </Form.Item>
 
               <Form.Item label="Models" name="models" rules={[
                 {
@@ -270,6 +262,43 @@ const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
                   ))}
               </Select3>
               </Form.Item>
+
+              <Form.Item 
+                className="mt-8"
+                label="TPM Limit (tokens per minute)" 
+                name="tpm_limit" 
+                help={`tpm_limit cannot exceed team tpm_limit ${keyTeam?.tpm_limit !== null && keyTeam?.tpm_limit !== undefined ? keyTeam?.tpm_limit : 'unlimited'}`}
+                rules={[
+                  {
+                      validator: async (_, value) => {
+                          if (value && keyTeam && keyTeam.tpm_limit !== null && value > keyTeam.tpm_limit) {
+                              console.log(`keyTeam.tpm_limit: ${keyTeam.tpm_limit}`)
+                              throw new Error(`tpm_limit cannot exceed team max tpm_limit: $${keyTeam.tpm_limit}`);
+                          }
+                      },
+                  },
+              ]}
+              >
+                <InputNumber step={1} precision={1} width={200} />
+              </Form.Item>
+              <Form.Item 
+                className="mt-8"
+                label="RPM Limit (requests per minute)" 
+                name="rpm_limit" 
+                help={`rpm_limit cannot exceed team max tpm_limit: ${keyTeam?.rpm_limit !== null && keyTeam?.rpm_limit !== undefined ? keyTeam?.rpm_limit : 'unlimited'}`}
+                rules={[
+                  {
+                      validator: async (_, value) => {
+                          if (value && keyTeam && keyTeam.rpm_limit !== null && value > keyTeam.rpm_limit) {
+                              console.log(`keyTeam.rpm_limit: ${keyTeam.rpm_limit}`)
+                              throw new Error(`rpm_limit cannot exceed team max rpm_limit: $${keyTeam.rpm_limit}`);
+                          }
+                      },
+                  },
+              ]}
+              >
+                <InputNumber step={1} precision={1} width={200} />
+              </Form.Item>
             </>
           <div style={{ textAlign: "right", marginTop: "10px" }}>
             <Button2 htmlType="submit">Edit Key</Button2>