diff --git a/ui/litellm-dashboard/src/components/create_key_button.tsx b/ui/litellm-dashboard/src/components/create_key_button.tsx index 75edb2ef3..0af3a064c 100644 --- a/ui/litellm-dashboard/src/components/create_key_button.tsx +++ b/ui/litellm-dashboard/src/components/create_key_button.tsx @@ -21,6 +21,7 @@ import { InputNumber, Select, message, + Radio, } from "antd"; import { keyCreateCall, @@ -53,6 +54,8 @@ const CreateKey: React.FC = ({ const [softBudget, setSoftBudget] = useState(null); const [userModels, setUserModels] = useState([]); const [modelsToPick, setModelsToPick] = useState([]); + const [keyOwner, setKeyOwner] = useState("you"); + const handleOk = () => { setIsModalVisible(false); form.resetFields(); @@ -108,6 +111,21 @@ const CreateKey: React.FC = ({ message.info("Making API Call"); setIsModalVisible(true); + + // If it's a service account, add the service_account_id to the metadata + if (keyOwner === "service_account") { + // Parse existing metadata or create an empty object + let metadata: Record = {}; + try { + metadata = JSON.parse(formValues.metadata || "{}"); + } catch (error) { + console.error("Error parsing metadata:", error); + } + metadata["service_account_id"] = formValues.key_alias; + // Update the formValues with the new metadata + formValues.metadata = JSON.stringify(metadata); + } + const response = await keyCreateCall(accessToken, userID, formValues); console.log("key create Response:", response); @@ -172,11 +190,21 @@ const CreateKey: React.FC = ({ labelAlign="left" > <> + + setKeyOwner(e.target.value)} + value={keyOwner} + > + You + Service Account + + +