From 55664071694552c536ac6c004904d670234a7704 Mon Sep 17 00:00:00 2001 From: ishaan-jaff Date: Mon, 29 Jan 2024 18:44:20 -0800 Subject: [PATCH 01/10] (ui) add form for /key/gen params --- .../src/components/create_key_button.tsx | 115 +++++++++++------- 1 file changed, 74 insertions(+), 41 deletions(-) diff --git a/ui/litellm-dashboard/src/components/create_key_button.tsx b/ui/litellm-dashboard/src/components/create_key_button.tsx index d0b0c20307c..7a90cc8ac40 100644 --- a/ui/litellm-dashboard/src/components/create_key_button.tsx +++ b/ui/litellm-dashboard/src/components/create_key_button.tsx @@ -1,11 +1,9 @@ -"use client"; - -import React, { useState, useEffect, useRef } from "react"; -import { Button, TextInput, Grid, Col } from "@tremor/react"; -import { message } from "antd"; -import { Card, Metric, Text } from "@tremor/react"; +import React, { useState } from "react"; +import { Button, Modal, Form, Input, InputNumber, Select, message } from "antd"; import { keyCreateCall } from "./networking"; -// Define the props type + +const { Option } = Select; + interface CreateKeyProps { userID: string; accessToken: string; @@ -14,8 +12,6 @@ interface CreateKeyProps { setData: React.Dispatch>; } -import { Modal, Button as Button2 } from "antd"; - const CreateKey: React.FC = ({ userID, accessToken, @@ -23,68 +19,105 @@ const CreateKey: React.FC = ({ data, setData, }) => { + const [form] = Form.useForm(); const [isModalVisible, setIsModalVisible] = useState(false); const [apiKey, setApiKey] = useState(null); + const handleOk = () => { - // Handle the OK action - console.log("OK Clicked"); setIsModalVisible(false); + form.resetFields(); }; const handleCancel = () => { - // Handle the cancel action or closing the modal - console.log("Modal closed"); setIsModalVisible(false); setApiKey(null); }; - const handleCreate = async () => { - if (data == null) { - return; - } + const handleCreate = async (values) => { try { message.info("Making API Call"); setIsModalVisible(true); - const response = await keyCreateCall(proxyBaseUrl, accessToken, userID); - // Successfully completed the deletion. Update the state to trigger a rerender. + const response = await keyCreateCall(proxyBaseUrl, accessToken, userID, values); setData([...data, response]); setApiKey(response["key"]); message.success("API Key Created"); } catch (error) { - console.error("Error deleting the key:", error); - // Handle any error situations, such as displaying an error message to the user. + console.error("Error creating the key:", error); } }; return (
- - - -

- Please save this secret key somewhere safe and accessible. For - security reasons, you will not be able to view it again{" "} - through your LiteLLM account. If you lose this secret key, you will - need to generate a new one. -

- - - {apiKey != null ? ( - API Key: {apiKey} - ) : ( - Key being created, this might take 30s - )} - - +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+ {apiKey && ( + + {/* Display the result here */} +

+ API Key: {apiKey}
+ {/* Display other API response details here */} +

+ + )}
); }; From 5dcb3a6ffdf7f7dd0d748ef51fb89c2389e34b40 Mon Sep 17 00:00:00 2001 From: ishaan-jaff Date: Mon, 29 Jan 2024 19:00:30 -0800 Subject: [PATCH 02/10] (fix) chore - ui --- .../src/components/create_key_button.tsx | 9 +++++++-- 1 file changed, 7 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 7a90cc8ac40..7b549b33c3c 100644 --- a/ui/litellm-dashboard/src/components/create_key_button.tsx +++ b/ui/litellm-dashboard/src/components/create_key_button.tsx @@ -1,5 +1,10 @@ -import React, { useState } from "react"; -import { Button, Modal, Form, Input, InputNumber, Select, message } from "antd"; + +"use client"; + +import React, { useState, useEffect, useRef } from "react"; +import { Button, TextInput, Grid, Col } from "@tremor/react"; +import { Card, Metric, Text } from "@tremor/react"; +import { Button as Button2, Modal, Form, Input, InputNumber, Select, message } from "antd"; import { keyCreateCall } from "./networking"; const { Option } = Select; From bde91c585e60334963585fa06760e7c9211bdb0a Mon Sep 17 00:00:00 2001 From: ishaan-jaff Date: Mon, 29 Jan 2024 19:03:30 -0800 Subject: [PATCH 03/10] (ui) align form values --- ui/litellm-dashboard/src/components/create_key_button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/litellm-dashboard/src/components/create_key_button.tsx b/ui/litellm-dashboard/src/components/create_key_button.tsx index 7b549b33c3c..1a647d4e5b8 100644 --- a/ui/litellm-dashboard/src/components/create_key_button.tsx +++ b/ui/litellm-dashboard/src/components/create_key_button.tsx @@ -62,7 +62,7 @@ const CreateKey: React.FC = ({ onOk={handleOk} onCancel={handleCancel} > -
+ Date: Mon, 29 Jan 2024 19:17:53 -0800 Subject: [PATCH 04/10] (ui) nice looking create key form --- .../src/components/create_key_button.tsx | 34 ++++++++----------- 1 file changed, 15 insertions(+), 19 deletions(-) diff --git a/ui/litellm-dashboard/src/components/create_key_button.tsx b/ui/litellm-dashboard/src/components/create_key_button.tsx index 1a647d4e5b8..4e7300b2e70 100644 --- a/ui/litellm-dashboard/src/components/create_key_button.tsx +++ b/ui/litellm-dashboard/src/components/create_key_button.tsx @@ -59,16 +59,11 @@ const CreateKey: React.FC = ({ - - - - + + = ({ - + - + = ({ > - - - + +
+ +
{apiKey && ( Date: Mon, 29 Jan 2024 19:49:44 -0800 Subject: [PATCH 05/10] (ui) pass formValues to API --- .../src/components/create_key_button.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/ui/litellm-dashboard/src/components/create_key_button.tsx b/ui/litellm-dashboard/src/components/create_key_button.tsx index 4e7300b2e70..9d6a3ba2212 100644 --- a/ui/litellm-dashboard/src/components/create_key_button.tsx +++ b/ui/litellm-dashboard/src/components/create_key_button.tsx @@ -38,11 +38,11 @@ const CreateKey: React.FC = ({ setApiKey(null); }; - const handleCreate = async (values) => { + const handleCreate = async (formValues) => { try { message.info("Making API Call"); setIsModalVisible(true); - const response = await keyCreateCall(proxyBaseUrl, accessToken, userID, values); + const response = await keyCreateCall(proxyBaseUrl, accessToken, userID, formValues); setData([...data, response]); setApiKey(response["key"]); message.success("API Key Created"); @@ -50,6 +50,7 @@ const CreateKey: React.FC = ({ console.error("Error creating the key:", error); } }; + return (
@@ -97,13 +98,12 @@ const CreateKey: React.FC = ({ > - +
+ +
-
- -
{apiKey && ( Date: Mon, 29 Jan 2024 19:49:56 -0800 Subject: [PATCH 06/10] (UI) pas form values to API --- ui/litellm-dashboard/src/components/networking.tsx | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/ui/litellm-dashboard/src/components/networking.tsx b/ui/litellm-dashboard/src/components/networking.tsx index b0a0ede62f1..92170accedb 100644 --- a/ui/litellm-dashboard/src/components/networking.tsx +++ b/ui/litellm-dashboard/src/components/networking.tsx @@ -3,11 +3,13 @@ */ export const keyCreateCall = async ( - proxyBaseUrl: String, - accessToken: String, - userID: String + proxyBaseUrl: string, + accessToken: string, + userID: string, + formValues: Record // Assuming formValues is an object ) => { try { + console.log("Form Values in keyCreateCall:", formValues); // Log the form values before making the API call const response = await fetch(`${proxyBaseUrl}/key/generate`, { method: "POST", headers: { @@ -16,15 +18,18 @@ export const keyCreateCall = async ( }, body: JSON.stringify({ user_id: userID, + ...formValues, // Include formValues in the request body }), }); if (!response.ok) { + const errorData = await response.json(); + console.error("Error response from the server:", errorData); throw new Error("Network response was not ok"); } const data = await response.json(); - console.log(data); + console.log("API Response:", data); return data; // Handle success - you might want to update some state or UI based on the created key } catch (error) { @@ -33,6 +38,7 @@ export const keyCreateCall = async ( } }; + export const keyDeleteCall = async ( proxyBaseUrl: String, accessToken: String, From d7375a58f4f6d51ac3c5100b8238260ef0c1b9f8 Mon Sep 17 00:00:00 2001 From: ishaan-jaff Date: Mon, 29 Jan 2024 19:53:58 -0800 Subject: [PATCH 07/10] (ui) correctly pass models --- ui/litellm-dashboard/src/components/create_key_button.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/ui/litellm-dashboard/src/components/create_key_button.tsx b/ui/litellm-dashboard/src/components/create_key_button.tsx index 9d6a3ba2212..5e5f5a6964c 100644 --- a/ui/litellm-dashboard/src/components/create_key_button.tsx +++ b/ui/litellm-dashboard/src/components/create_key_button.tsx @@ -41,6 +41,14 @@ const CreateKey: React.FC = ({ const handleCreate = async (formValues) => { try { message.info("Making API Call"); + // Check if "models" exists and is not an empty string + if (formValues.models && formValues.models.trim() !== '') { + // Format the "models" field as an array + formValues.models = formValues.models.split(',').map(model => model.trim()); + } else { + // If "models" is undefined or an empty string, set it to an empty array + formValues.models = []; + } setIsModalVisible(true); const response = await keyCreateCall(proxyBaseUrl, accessToken, userID, formValues); setData([...data, response]); From 5063a7ab5e72ba20499de078424c1e7913634b14 Mon Sep 17 00:00:00 2001 From: ishaan-jaff Date: Mon, 29 Jan 2024 19:58:42 -0800 Subject: [PATCH 08/10] (ui) stable UI version --- ui/litellm-dashboard/src/components/create_key_button.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/ui/litellm-dashboard/src/components/create_key_button.tsx b/ui/litellm-dashboard/src/components/create_key_button.tsx index 5e5f5a6964c..2e90e23c567 100644 --- a/ui/litellm-dashboard/src/components/create_key_button.tsx +++ b/ui/litellm-dashboard/src/components/create_key_button.tsx @@ -36,6 +36,7 @@ const CreateKey: React.FC = ({ const handleCancel = () => { setIsModalVisible(false); setApiKey(null); + form.resetFields(); }; const handleCreate = async (formValues) => { @@ -54,6 +55,7 @@ const CreateKey: React.FC = ({ setData([...data, response]); setApiKey(response["key"]); message.success("API Key Created"); + form.resetFields(); } catch (error) { console.error("Error creating the key:", error); } @@ -70,6 +72,8 @@ const CreateKey: React.FC = ({ visible={isModalVisible} width={800} footer={null} + onOk={handleOk} + onCancel={handleCancel} >
From 7a1cab83dbf0b9427d3592f8ae303ce906f9ba66 Mon Sep 17 00:00:00 2001 From: ishaan-jaff Date: Mon, 29 Jan 2024 20:08:33 -0800 Subject: [PATCH 09/10] (ui) working npm build --- .../src/components/create_key_button.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/ui/litellm-dashboard/src/components/create_key_button.tsx b/ui/litellm-dashboard/src/components/create_key_button.tsx index 2e90e23c567..ce24c72b7dd 100644 --- a/ui/litellm-dashboard/src/components/create_key_button.tsx +++ b/ui/litellm-dashboard/src/components/create_key_button.tsx @@ -39,20 +39,20 @@ const CreateKey: React.FC = ({ form.resetFields(); }; - const handleCreate = async (formValues) => { + const handleCreate = async (formValues: Record) => { try { message.info("Making API Call"); // Check if "models" exists and is not an empty string if (formValues.models && formValues.models.trim() !== '') { // Format the "models" field as an array - formValues.models = formValues.models.split(',').map(model => model.trim()); + formValues.models = formValues.models.split(',').map((model: string) => model.trim()); } else { // If "models" is undefined or an empty string, set it to an empty array formValues.models = []; } setIsModalVisible(true); const response = await keyCreateCall(proxyBaseUrl, accessToken, userID, formValues); - setData([...data, response]); + setData((prevData) => (prevData ? [...prevData, response] : [response])); // Check if prevData is null setApiKey(response["key"]); message.success("API Key Created"); form.resetFields(); @@ -111,9 +111,9 @@ const CreateKey: React.FC = ({
- +
From eb3aeff37f3a3f8b0b87340a8de070956fefcde5 Mon Sep 17 00:00:00 2001 From: ishaan-jaff Date: Mon, 29 Jan 2024 20:12:00 -0800 Subject: [PATCH 10/10] (ui) show message again --- .../src/components/create_key_button.tsx | 23 +++++++++++++++---- 1 file changed, 18 insertions(+), 5 deletions(-) diff --git a/ui/litellm-dashboard/src/components/create_key_button.tsx b/ui/litellm-dashboard/src/components/create_key_button.tsx index ce24c72b7dd..a76b3b1e390 100644 --- a/ui/litellm-dashboard/src/components/create_key_button.tsx +++ b/ui/litellm-dashboard/src/components/create_key_button.tsx @@ -123,12 +123,25 @@ const CreateKey: React.FC = ({ visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} + footer={null} > - {/* Display the result here */} -

- API Key: {apiKey}
- {/* Display other API response details here */} -

+ + +

+ Please save this secret key somewhere safe and accessible. For + security reasons, you will not be able to view it again{" "} + through your LiteLLM account. If you lose this secret key, you will + need to generate a new one. +

+ + + {apiKey != null ? ( + API Key: {apiKey} + ) : ( + Key being created, this might take 30s + )} + + )}