From 1832c09d6bd403611fb6df0ebcf6bf116dfcc7e2 Mon Sep 17 00:00:00 2001 From: Ishaan Jaff Date: Tue, 19 Aug 2025 19:06:26 -0700 Subject: [PATCH] [Feat] - UI Allow using Key/Team Based Logging for Langfuse OTEL (#13791) * add langfuse_otel * ui allow setting langfuse OTEL * fixes - using langfuse OTEL * add description for logging integrations * add description --- .../src/components/callback_info_helpers.tsx | 45 +++++++++++++----- .../src/components/settings.tsx | 2 +- .../src/components/team/LoggingSettings.tsx | 46 +++++++++++-------- 3 files changed, 61 insertions(+), 32 deletions(-) diff --git a/ui/litellm-dashboard/src/components/callback_info_helpers.tsx b/ui/litellm-dashboard/src/components/callback_info_helpers.tsx index c72495f29a..6d52292c9f 100644 --- a/ui/litellm-dashboard/src/components/callback_info_helpers.tsx +++ b/ui/litellm-dashboard/src/components/callback_info_helpers.tsx @@ -3,6 +3,7 @@ export enum Callbacks { CustomCallbackAPI = "Custom Callback API", Datadog = "Datadog", Langfuse = "Langfuse", + LangfuseOtel = "LangfuseOtel", LangSmith = "LangSmith", Lago = "Lago", OpenMeter = "OpenMeter", @@ -16,6 +17,7 @@ export const callback_map: Record = { CustomCallbackAPI: "custom_callback_api", Datadog: "datadog", Langfuse: "langfuse", + LangfuseOtel: "langfuse_otel", LangSmith: "langsmith", Lago: "lago", OpenMeter: "openmeter", @@ -45,6 +47,7 @@ interface CallbackInfo { logo: string; supports_key_team_logging: boolean; dynamic_params: Record; + description: string | null; } export const callbackInfo: Record = { @@ -55,7 +58,18 @@ export const callbackInfo: Record = { "langfuse_public_key": "text", "langfuse_secret_key": "password", "langfuse_host": "text" - } + }, + description: "Langfuse v2 Logging Integration" + }, + [Callbacks.LangfuseOtel]: { + logo: `${asset_logos_folder}langfuse.png`, + supports_key_team_logging: true, + dynamic_params: { + "langfuse_public_key": "text", + "langfuse_secret_key": "password", + "langfuse_host": "text" + }, + description: "Langfuse v3 OTEL Logging Integration" }, [Callbacks.Arize]: { logo: `${asset_logos_folder}arize.png`, @@ -63,7 +77,8 @@ export const callbackInfo: Record = { dynamic_params: { "arize_api_key": "password", "arize_space_id": "text", - } + }, + description: "Arize Logging Integration" }, [Callbacks.LangSmith]: { logo: `${asset_logos_folder}langsmith.png`, @@ -72,42 +87,50 @@ export const callbackInfo: Record = { "langsmith_api_key": "password", "langsmith_project": "text", "langsmith_base_url": "text" - } - }, + }, + description: "Langsmith Logging Integration" + }, [Callbacks.Braintrust]: { logo: `${asset_logos_folder}braintrust.png`, supports_key_team_logging: false, - dynamic_params: {} + dynamic_params: {}, + description: "Braintrust Logging Integration" }, [Callbacks.CustomCallbackAPI]: { logo: `${asset_logos_folder}custom.svg`, supports_key_team_logging: true, - dynamic_params: {} + dynamic_params: {}, + description: "Custom Callback API Logging Integration" }, [Callbacks.Datadog]: { logo: `${asset_logos_folder}datadog.png`, supports_key_team_logging: false, - dynamic_params: {} + dynamic_params: {}, + description: "Datadog Logging Integration" }, [Callbacks.Lago]: { logo: `${asset_logos_folder}lago.svg`, supports_key_team_logging: false, - dynamic_params: {} + dynamic_params: {}, + description: "Lago Billing Logging Integration" }, [Callbacks.OpenMeter]: { logo: `${asset_logos_folder}openmeter.png`, supports_key_team_logging: false, - dynamic_params: {} + dynamic_params: {}, + description: "OpenMeter Logging Integration" }, [Callbacks.OTel]: { logo: `${asset_logos_folder}otel.png`, supports_key_team_logging: false, - dynamic_params: {} + dynamic_params: {}, + description: "OpenTelemetry Logging Integration" }, [Callbacks.S3]: { logo: `${asset_logos_folder}aws.svg`, supports_key_team_logging: false, - dynamic_params: {} + dynamic_params: {}, + description: "S3 Bucket (AWS) Logging Integration" } }; \ No newline at end of file diff --git a/ui/litellm-dashboard/src/components/settings.tsx b/ui/litellm-dashboard/src/components/settings.tsx index 61ec64c9db..55997ce95c 100644 --- a/ui/litellm-dashboard/src/components/settings.tsx +++ b/ui/litellm-dashboard/src/components/settings.tsx @@ -315,7 +315,7 @@ const Settings: React.FC = ({ addForm.validateFields().then((values) => { // Call API to add the callback let payload; - if (values.callback === "langfuse") { + if (values.callback === "langfuse" || values.callback === "langfuse_otel") { payload = { environment_variables: { LANGFUSE_PUBLIC_KEY: values.langfusePublicKey, diff --git a/ui/litellm-dashboard/src/components/team/LoggingSettings.tsx b/ui/litellm-dashboard/src/components/team/LoggingSettings.tsx index bfea1e7968..012e4493fa 100644 --- a/ui/litellm-dashboard/src/components/team/LoggingSettings.tsx +++ b/ui/litellm-dashboard/src/components/team/LoggingSettings.tsx @@ -164,18 +164,21 @@ const LoggingSettings: React.FC = ({ > {allCallbacks.map((callbackName) => { const logo = callbackInfo[callbackName]?.logo; + const description = callbackInfo[callbackName]?.description; return ( ); })} @@ -257,18 +260,21 @@ const LoggingSettings: React.FC = ({ > {supportedCallbacks.map((callbackName) => { const logo = callbackInfo[callbackName]?.logo; + const description = callbackInfo[callbackName]?.description; return ( ); })}