From 1009a38ff49eadbe8e4374b438a5242fea4e30c9 Mon Sep 17 00:00:00 2001 From: Ishaan Jaffer Date: Fri, 26 Sep 2025 12:02:14 -0700 Subject: [PATCH] Add key expiry and auto-rotation settings - Create KeyLifecycleSettings component grouping expiry and auto-rotation - Add dedicated 'Key Expiry & Auto-Rotation' accordion section - Fix auto-rotation toggle visibility with proper layout - Move expire key field from Optional Settings to new section - Remove old AutoRotationSettings component - Integrate auto-rotation metadata in form submission --- .../index.html} | 0 .../proxy/_experimental/out/onboarding.html | 1 - .../KeyLifecycleSettings.tsx | 93 +++++++++++++++++++ .../organisms/create_key_button.tsx | 47 +++++++--- 4 files changed, 126 insertions(+), 15 deletions(-) rename litellm/proxy/_experimental/out/{model_hub_table.html => model_hub_table/index.html} (100%) delete mode 100644 litellm/proxy/_experimental/out/onboarding.html create mode 100644 ui/litellm-dashboard/src/components/common_components/KeyLifecycleSettings.tsx diff --git a/litellm/proxy/_experimental/out/model_hub_table.html b/litellm/proxy/_experimental/out/model_hub_table/index.html similarity index 100% rename from litellm/proxy/_experimental/out/model_hub_table.html rename to litellm/proxy/_experimental/out/model_hub_table/index.html diff --git a/litellm/proxy/_experimental/out/onboarding.html b/litellm/proxy/_experimental/out/onboarding.html deleted file mode 100644 index 1dc5fdb1f8..0000000000 --- a/litellm/proxy/_experimental/out/onboarding.html +++ /dev/null @@ -1 +0,0 @@ -LiteLLM Dashboard \ No newline at end of file diff --git a/ui/litellm-dashboard/src/components/common_components/KeyLifecycleSettings.tsx b/ui/litellm-dashboard/src/components/common_components/KeyLifecycleSettings.tsx new file mode 100644 index 0000000000..d3b009599d --- /dev/null +++ b/ui/litellm-dashboard/src/components/common_components/KeyLifecycleSettings.tsx @@ -0,0 +1,93 @@ +import React from "react"; +import { Form, Switch, Select, Typography, Tooltip } from "antd"; +import { InfoCircleOutlined } from "@ant-design/icons"; +import { TextInput } from "@tremor/react"; + +const { Text } = Typography; +const { Option } = Select; + +interface KeyLifecycleSettingsProps { + form: any; // Form instance from parent + autoRotationEnabled: boolean; + onAutoRotationChange: (enabled: boolean) => void; + rotationInterval: string; + onRotationIntervalChange: (interval: string) => void; +} + +const KeyLifecycleSettings: React.FC = ({ + form, + autoRotationEnabled, + onAutoRotationChange, + rotationInterval, + onRotationIntervalChange, +}) => { + return ( +
+ + Expire Key{' '} + + + + + } + name="duration" + className="mb-4" + > + + + +
+
+
+ Enable Auto-Rotation + + + +
+ +
+ + {autoRotationEnabled && ( +
+ + Rotation Interval{' '} + + + + + } + name="rotation_interval" + className="mb-2" + > + + + + + When rotation occurs, you'll receive a notification with the new key. The old key will be deactivated after a brief grace period. + +
+ )} +
+
+ ); +}; + +export default KeyLifecycleSettings; diff --git a/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx b/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx index 3771ea5b1b..df9e30d252 100644 --- a/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx +++ b/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx @@ -34,6 +34,7 @@ import { callback_map, mapDisplayToInternalNames } from "../callback_info_helper import MCPServerSelector from "../mcp_server_management/MCPServerSelector" import ModelAliasManager from "../common_components/ModelAliasManager" import NotificationsManager from "../molecules/notifications_manager" +import KeyLifecycleSettings from "../common_components/KeyLifecycleSettings" const { Option } = Select; @@ -169,6 +170,8 @@ const CreateKey: React.FC = ({ const [disabledCallbacks, setDisabledCallbacks] = useState([]); const [keyType, setKeyType] = useState("default"); const [modelAliases, setModelAliases] = useState<{ [key: string]: string }>({}); + const [autoRotationEnabled, setAutoRotationEnabled] = useState(false); + const [rotationInterval, setRotationInterval] = useState("30d"); const handleOk = () => { setIsModalVisible(false); @@ -177,6 +180,8 @@ const CreateKey: React.FC = ({ setDisabledCallbacks([]); setKeyType("default"); setModelAliases({}); + setAutoRotationEnabled(false); + setRotationInterval("30d"); }; const handleCancel = () => { @@ -188,6 +193,8 @@ const CreateKey: React.FC = ({ setDisabledCallbacks([]); setKeyType("default"); setModelAliases({}); + setAutoRotationEnabled(false); + setRotationInterval("30d"); }; useEffect(() => { @@ -320,6 +327,15 @@ const CreateKey: React.FC = ({ }; } + // Add auto-rotation settings to the metadata + if (autoRotationEnabled) { + metadata = { + ...metadata, + auto_rotation_enabled: true, + rotation_interval: rotationInterval + }; + } + // Update the formValues with the final metadata formValues.metadata = JSON.stringify(metadata); @@ -823,20 +839,6 @@ const CreateKey: React.FC = ({ > - - Expire Key{' '} - - - - - } - name="duration" - className="mt-4" - > - - @@ -1053,6 +1055,23 @@ const CreateKey: React.FC = ({ + + + + Key Expiry & Auto-Rotation + + +
+ +
+ +