From 805fbf55a273a089759bc29c9d70442989c21657 Mon Sep 17 00:00:00 2001 From: Ishaan Jaff Date: Sat, 19 Jul 2025 15:15:44 -0700 Subject: [PATCH] [QA] Disable Logging settings for Keys (#12774) * fix keyData metadata access * fix helpers --- .../src/components/callback_info_helpers.tsx | 15 +++++++++++++ .../src/components/create_key_button.tsx | 6 ++++-- .../src/components/key_edit_view.tsx | 20 +++++++++++++----- .../src/components/key_info_view.tsx | 21 +++++++++++++------ .../src/components/logging_settings_view.tsx | 10 +++++---- .../src/components/team/LoggingSettings.tsx | 6 ++++-- 6 files changed, 59 insertions(+), 19 deletions(-) diff --git a/ui/litellm-dashboard/src/components/callback_info_helpers.tsx b/ui/litellm-dashboard/src/components/callback_info_helpers.tsx index 095ae54ea77..c72495f29a7 100644 --- a/ui/litellm-dashboard/src/components/callback_info_helpers.tsx +++ b/ui/litellm-dashboard/src/components/callback_info_helpers.tsx @@ -24,6 +24,21 @@ export const callback_map: Record = { Arize: "arize", } +// Reverse mapping from internal values to display names +export const reverse_callback_map: Record = Object.fromEntries( + Object.entries(callback_map).map(([key, value]) => [value, key]) +); + +// Utility function to convert internal callback values to display names +export const mapInternalToDisplayNames = (internalValues: string[]): string[] => { + return internalValues.map(value => reverse_callback_map[value] || value); +}; + +// Utility function to convert display names to internal callback values +export const mapDisplayToInternalNames = (displayValues: string[]): string[] => { + return displayValues.map(value => callback_map[value] || value); +}; + const asset_logos_folder = '/assets/logos/'; interface CallbackInfo { diff --git a/ui/litellm-dashboard/src/components/create_key_button.tsx b/ui/litellm-dashboard/src/components/create_key_button.tsx index 17e26c8e2ca..e54b6ba1a23 100644 --- a/ui/litellm-dashboard/src/components/create_key_button.tsx +++ b/ui/litellm-dashboard/src/components/create_key_button.tsx @@ -48,7 +48,7 @@ import debounce from 'lodash/debounce'; import { rolesWithWriteAccess } from '../utils/roles'; import BudgetDurationDropdown from "./common_components/budget_duration_dropdown"; import { formatNumberWithCommas } from "@/utils/dataUtils"; - +import { callback_map, mapDisplayToInternalNames } from "./callback_info_helpers"; const { Option } = Select; @@ -311,9 +311,11 @@ const CreateKey: React.FC = ({ // Add disabled callbacks to the metadata if (disabledCallbacks.length > 0) { + // Map display names to internal callback values + const mappedDisabledCallbacks = mapDisplayToInternalNames(disabledCallbacks); metadata = { ...metadata, - litellm_disabled_callbacks: disabledCallbacks + litellm_disabled_callbacks: mappedDisabledCallbacks }; } diff --git a/ui/litellm-dashboard/src/components/key_edit_view.tsx b/ui/litellm-dashboard/src/components/key_edit_view.tsx index 33405d8034e..e06cdf91e90 100644 --- a/ui/litellm-dashboard/src/components/key_edit_view.tsx +++ b/ui/litellm-dashboard/src/components/key_edit_view.tsx @@ -10,6 +10,7 @@ import MCPServerSelector from "./mcp_server_management/MCPServerSelector"; import EditLoggingSettings from "./team/EditLoggingSettings"; import { extractLoggingSettings, formatMetadataForDisplay } from "./key_info_utils"; import { fetchMCPAccessGroups } from "./networking"; +import { mapInternalToDisplayNames, mapDisplayToInternalNames } from "./callback_info_helpers"; interface KeyEditViewProps { keyData: KeyResponse; @@ -57,7 +58,11 @@ export function KeyEditView({ const [availableModels, setAvailableModels] = useState([]); const [mcpAccessGroups, setMcpAccessGroups] = useState([]); const [mcpAccessGroupsLoaded, setMcpAccessGroupsLoaded] = useState(false); - const [disabledCallbacks, setDisabledCallbacks] = useState(Array.isArray(keyData.metadata?.litellm_disabled_callbacks) ? keyData.metadata.litellm_disabled_callbacks : []); + const [disabledCallbacks, setDisabledCallbacks] = useState( + Array.isArray(keyData.metadata?.litellm_disabled_callbacks) + ? mapInternalToDisplayNames(keyData.metadata.litellm_disabled_callbacks) + : [] + ); const fetchMcpAccessGroups = async () => { if (!accessToken) return; @@ -128,7 +133,9 @@ export function KeyEditView({ accessGroups: keyData.object_permission?.mcp_access_groups || [] }, logging_settings: extractLoggingSettings(keyData.metadata), - disabled_callbacks: Array.isArray(keyData.metadata?.litellm_disabled_callbacks) ? keyData.metadata.litellm_disabled_callbacks : [] + disabled_callbacks: Array.isArray(keyData.metadata?.litellm_disabled_callbacks) + ? mapInternalToDisplayNames(keyData.metadata.litellm_disabled_callbacks) + : [] }; return ( @@ -237,9 +244,12 @@ export function KeyEditView({ value={form.getFieldValue('logging_settings')} onChange={(values) => form.setFieldValue('logging_settings', values)} disabledCallbacks={disabledCallbacks} - onDisabledCallbacksChange={(values) => { - setDisabledCallbacks(values); - form.setFieldValue('disabled_callbacks', values); + onDisabledCallbacksChange={(internalValues) => { + // Convert internal values back to display names for UI state + const displayNames = mapInternalToDisplayNames(internalValues); + setDisabledCallbacks(displayNames); + // Store internal values in form for submission + form.setFieldValue('disabled_callbacks', internalValues); }} /> diff --git a/ui/litellm-dashboard/src/components/key_info_view.tsx b/ui/litellm-dashboard/src/components/key_info_view.tsx index d525d98e225..ad60c078352 100644 --- a/ui/litellm-dashboard/src/components/key_info_view.tsx +++ b/ui/litellm-dashboard/src/components/key_info_view.tsx @@ -27,6 +27,7 @@ import LoggingSettingsView from "./logging_settings_view"; import { copyToClipboard as utilCopyToClipboard, formatNumberWithCommas } from "@/utils/dataUtils"; import { extractLoggingSettings, formatMetadataForDisplay } from "./key_info_utils"; import { CopyIcon, CheckIcon } from "lucide-react"; +import { callback_map, mapInternalToDisplayNames, mapDisplayToInternalNames } from "./callback_info_helpers"; interface KeyInfoViewProps { keyId: string; @@ -105,7 +106,9 @@ export default function KeyInfoView({ keyId, onClose, keyData, accessToken, user ? { logging: formValues.logging_settings } : {}), ...(formValues.disabled_callbacks?.length > 0 - ? { litellm_disabled_callbacks: formValues.disabled_callbacks } + ? { + litellm_disabled_callbacks: mapDisplayToInternalNames(formValues.disabled_callbacks) + } : {}), }; } catch (error) { @@ -123,7 +126,9 @@ export default function KeyInfoView({ keyId, onClose, keyData, accessToken, user ? { logging: formValues.logging_settings } : {}), ...(formValues.disabled_callbacks?.length > 0 - ? { litellm_disabled_callbacks: formValues.disabled_callbacks } + ? { + litellm_disabled_callbacks: mapDisplayToInternalNames(formValues.disabled_callbacks) + } : {}), }; } @@ -335,8 +340,10 @@ export default function KeyInfoView({ keyId, onClose, keyData, accessToken, user @@ -458,9 +465,11 @@ export default function KeyInfoView({ keyId, onClose, keyData, accessToken, user diff --git a/ui/litellm-dashboard/src/components/logging_settings_view.tsx b/ui/litellm-dashboard/src/components/logging_settings_view.tsx index 43c63121b36..6fbebb18862 100644 --- a/ui/litellm-dashboard/src/components/logging_settings_view.tsx +++ b/ui/litellm-dashboard/src/components/logging_settings_view.tsx @@ -1,7 +1,7 @@ import React from "react"; import { Text, Badge } from "@tremor/react"; import { CogIcon, BanIcon } from "@heroicons/react/outline"; -import { callbackInfo, callback_map } from "./callback_info_helpers"; +import { callbackInfo, callback_map, reverse_callback_map } from "./callback_info_helpers"; interface LoggingConfig { callback_name: string; @@ -127,7 +127,9 @@ export function LoggingSettingsView({ {disabledCallbacks.length > 0 ? (
{disabledCallbacks.map((callbackName, index) => { - const logoUrl = callbackInfo[callbackName]?.logo; + // Handle both display names and internal values + const displayName = reverse_callback_map[callbackName] || callbackName; + const logoUrl = callbackInfo[displayName]?.logo; return (
) : ( )}
- {callbackName} + {displayName} Disabled for this key diff --git a/ui/litellm-dashboard/src/components/team/LoggingSettings.tsx b/ui/litellm-dashboard/src/components/team/LoggingSettings.tsx index 8aeb60ee21d..bfea1e7968a 100644 --- a/ui/litellm-dashboard/src/components/team/LoggingSettings.tsx +++ b/ui/litellm-dashboard/src/components/team/LoggingSettings.tsx @@ -5,7 +5,7 @@ import { Form, Select, Space, Tooltip, Divider } from 'antd'; import { InfoCircleOutlined } from '@ant-design/icons'; import { Button, Card, TextInput } from '@tremor/react'; import { PlusIcon, TrashIcon, CogIcon, BanIcon } from '@heroicons/react/outline'; -import { callbackInfo, Callbacks, callback_map } from '../callback_info_helpers'; +import { callbackInfo, Callbacks, callback_map, mapDisplayToInternalNames } from '../callback_info_helpers'; const { Option } = Select; @@ -41,7 +41,9 @@ const LoggingSettings: React.FC = ({ }; const handleDisabledCallbacksChange = (newDisabledCallbacks: string[]) => { - onDisabledCallbacksChange?.(newDisabledCallbacks); + // Map display names to internal callback values + const mappedDisabledCallbacks = mapDisplayToInternalNames(newDisabledCallbacks); + onDisabledCallbacksChange?.(mappedDisabledCallbacks); }; const addLoggingConfig = () => {