Merge pull request #35821 from BerriAI/litellm_dead_locals_2_components

refactor(ui): drop unreferenced locals from shared dashboard components

ui/litellm-dashboard/src/components/add_model/RouterConfigBuilder.tsx

@@ -126,13 +126,6 @@ const RouterConfigBuilder: React.FC<RouterConfigBuilderProps> = ({ modelInfo, va
   };
 
   // Handle utterances change (convert textarea string to array)
-  const handleUtterancesChange = (routeId: string, utterancesText: string) => {
-    const utterancesArray = utterancesText
-      .split("\n")
-      .map((line) => line.trim()) // Only trims leading/trailing whitespace, preserves internal spaces
-      .filter((line) => line.length > 0);
-    updateRoute(routeId, "utterances", utterancesArray);
-  };
 
   // Prepare model options for dropdowns
   const modelOptions = modelInfo.map((model) => ({

ui/litellm-dashboard/src/components/add_model/add_auto_router_tab.tsx

@@ -191,11 +191,6 @@ const AddAutoRouterTab: React.FC<AddAutoRouterTabProps> = ({
 
   const isAdmin = all_admin_roles.includes(userRole);
 
-  const modelGroupOptions = Array.from(new Set(modelInfo.map((option) => option.model_group))).map((model_group) => ({
-    value: model_group,
-    label: model_group,
-  }));
-
   const availability = React.useMemo(
     () =>
       buildModelAvailability(

ui/litellm-dashboard/src/components/add_pass_through.tsx

@@ -37,7 +37,6 @@ const AddPassThroughEndpoint: React.FC<AddFallbacksProps> = ({
   const [form] = Form.useForm();
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
-  const [selectedModel, setSelectedModel] = useState("");
   const [pathValue, setPathValue] = useState("");
   const [targetValue, setTargetValue] = useState("");
   const [includeSubpath, setIncludeSubpath] = useState(true);
@@ -107,11 +106,6 @@ const AddPassThroughEndpoint: React.FC<AddFallbacksProps> = ({
     }
   };
 
-  const copyToClipboard = (text: string) => {
-    navigator.clipboard.writeText(text);
-    NotificationsManager.success("Copied to clipboard!");
-  };
-
   return (
     <div>
       <Button className="mx-auto mb-4 mt-4" onClick={() => setIsModalVisible(true)}>

ui/litellm-dashboard/src/components/bulk_create_users_button.tsx

@@ -80,24 +80,6 @@ const BulkCreateUsersButton: React.FC<BulkCreateUsersProps> = ({
     setBaseUrl(base.toString());
   }, [accessToken]);
 
-  const downloadTemplate = () => {
-    const template = [
-      ["user_email", "user_role", "teams", "max_budget", "budget_duration", "models"],
-      ["user@example.com", "internal_user", "team-id-1,team-id-2", "100", "30d", "gpt-3.5-turbo,gpt-4"],
-    ];
-
-    const csv = Papa.unparse(template);
-    const blob = new Blob([csv], { type: "text/csv" });
-    const url = window.URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = "bulk_users_template.csv";
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-    window.URL.revokeObjectURL(url);
-  };
-
   const handleFileUpload = (file: File) => {
     // Reset all error states
     setParseError(null);

ui/litellm-dashboard/src/components/chat_ui/CodeSnippets.tsx

@@ -43,9 +43,6 @@ export const generateCodeSnippet = (params: GenerateCodeParams): string => {
     selectedVectorStores,
     selectedGuardrails,
     selectedPolicies,
-    selectedMCPServers,
-    mcpServers,
-    mcpServerToolRestrictions,
     selectedVoice,
     endpointType,
     selectedModel,

ui/litellm-dashboard/src/components/chat_ui/MCPEventsDisplay.tsx

@@ -1,8 +1,7 @@
 import React from "react";
-import { Typography, Collapse } from "antd";
+import { Collapse } from "antd";
 import type { MCPEvent } from "@/components/mcp_tools/types";
 
-const { Text } = Typography;
 const { Panel } = Collapse;
 
 interface MCPEventsDisplayProps {

ui/litellm-dashboard/src/components/model_filters.tsx

@@ -121,13 +121,6 @@ const ModelFilters: React.FC<ModelFiltersProps> = ({
   };
 
   // Expose filter values and reset function
-  const filterValues = {
-    searchTerm,
-    selectedProvider,
-    selectedMode,
-    selectedFeature,
-    resetFilters,
-  };
 
   const filtersContent = (
     <div className="flex flex-wrap gap-4 items-center">

ui/litellm-dashboard/src/components/networking.tsx

@@ -390,7 +390,6 @@ export const getAgentCreateMetadata = async (): Promise<AgentCreateInfo[]> => {
 
 // Global variable for the header name
 let globalLitellmHeaderName: string = "Authorization";
-const MCP_AUTH_HEADER: string = "x-mcp-auth";
 
 // Function to set the global header name
 export function setGlobalLitellmHeaderName(headerName: string = "Authorization") {

ui/litellm-dashboard/src/components/pass_through_info.tsx

@@ -72,7 +72,7 @@ const PassThroughInfoView: React.FC<PassThroughInfoProps> = ({
   onEndpointUpdated,
 }) => {
   const [endpointData, setEndpointData] = useState<PassThroughEndpoint | null>(initialEndpointData);
-  const [loading, setLoading] = useState(false);
+  const [loading] = useState(false);
   const [isEditing, setIsEditing] = useState(false);
   const [authEnabled, setAuthEnabled] = useState(initialEndpointData?.auth || false);
   const [selectedMethods, setSelectedMethods] = useState<string[]>(initialEndpointData?.methods || []);

ui/litellm-dashboard/src/components/settings.tsx

@@ -20,13 +20,11 @@ import {
 } from "@tremor/react";
 import React, { useEffect, useState } from "react";
 
-import { Button as Button2, Form, Input, Modal, Select, Typography } from "antd";
+import { Button as Button2, Form, Input, Modal, Select } from "antd";
 import EmailSettings from "./email_settings";
 import { Logo } from "@/components/molecules/logo/Logo";
 import NotificationsManager from "./molecules/notifications_manager";
 
-const { Title, Paragraph } = Typography;
-
 import FormItem from "antd/es/form/FormItem";
 import AlertingSettings from "./alerting/alerting_settings";
 import CloudZeroCostTracking from "./CloudZeroCostTracking/CloudZeroCostTracking";
@@ -48,12 +46,6 @@ interface SettingsPageProps {
   premiumUser: boolean;
 }
 
-interface genericCallbackParams {
-  litellm_callback_name: string; // what to send in request
-  ui_callback_name: string; // what to show on UI
-  litellm_callback_params: string[] | null; // known required params for this callback
-}
-
 const assetsLogoFolder = "/ui/assets/logos/";
 
 export const backendCallbackLogoSrc = (logo: string | null | undefined): string | undefined => {
@@ -214,7 +206,6 @@ const Settings: React.FC<SettingsPageProps> = ({ accessToken, userRole, userID,
   const [callbacks, setCallbacks] = useState<AlertingObject[]>([]);
   const [isLoadingCallbacks, setIsLoadingCallbacks] = useState(true);
   const [alerts, setAlerts] = useState<any[]>([]);
-  const [isModalVisible, setIsModalVisible] = useState(false);
   const [addForm] = Form.useForm();
   const [editForm] = Form.useForm();
   const [selectedCallback, setSelectedCallback] = useState<string | null>(null);
@@ -418,119 +409,6 @@ const Settings: React.FC<SettingsPageProps> = ({ accessToken, userRole, userID,
     }
     NotificationsManager.success("Alerts updated successfully");
   };
-  const handleSaveChanges = (callback: any) => {
-    if (!accessToken) {
-      return;
-    }
-
-    const updatedVariables = Object.fromEntries(
-      Object.entries(callback.variables).map(([key, value]) => [
-        key,
-        (document.querySelector(`input[name="${key}"]`) as HTMLInputElement)?.value || value,
-      ]),
-    );
-
-    const payload = {
-      environment_variables: updatedVariables,
-      litellm_settings: {
-        success_callback: [callback.name],
-      },
-    };
-
-    try {
-      setCallbacksCall(accessToken, payload);
-    } catch (error) {
-      NotificationsManager.fromBackend(error);
-    }
-    NotificationsManager.success("Callback updated successfully");
-  };
-
-  const handleOk = () => {
-    if (!accessToken) {
-      return;
-    }
-    // Handle form submission
-    addForm.validateFields().then((values) => {
-      // Call API to add the callback
-      let payload;
-      if (values.callback === "langfuse" || values.callback === "langfuse_otel") {
-        payload = {
-          environment_variables: {
-            LANGFUSE_PUBLIC_KEY: values.langfusePublicKey,
-            LANGFUSE_SECRET_KEY: values.langfusePrivateKey,
-          },
-          litellm_settings: {
-            success_callback: [values.callback],
-          },
-        };
-        setCallbacksCall(accessToken, payload);
-        let newCallback: AlertingObject = {
-          name: values.callback,
-          variables: {
-            SLACK_WEBHOOK_URL: null,
-            LANGFUSE_HOST: null,
-            LANGFUSE_PUBLIC_KEY: values.langfusePublicKey,
-            LANGFUSE_SECRET_KEY: values.langfusePrivateKey,
-            OPENMETER_API_KEY: null,
-          },
-        };
-        // add langfuse to callbacks
-        setCallbacks(callbacks ? [...callbacks, newCallback] : [newCallback]);
-      } else if (values.callback === "slack") {
-        payload = {
-          general_settings: {
-            alerting: ["slack"],
-            alerting_threshold: 300,
-          },
-          environment_variables: {
-            SLACK_WEBHOOK_URL: values.slackWebhookUrl,
-          },
-        };
-        setCallbacksCall(accessToken, payload);
-
-        let newCallback: AlertingObject = {
-          name: values.callback,
-          variables: {
-            SLACK_WEBHOOK_URL: values.slackWebhookUrl,
-            LANGFUSE_HOST: null,
-            LANGFUSE_PUBLIC_KEY: null,
-            LANGFUSE_SECRET_KEY: null,
-            OPENMETER_API_KEY: null,
-          },
-        };
-        setCallbacks(callbacks ? [...callbacks, newCallback] : [newCallback]);
-      } else if (values.callback == "openmeter") {
-        payload = {
-          environment_variables: {
-            OPENMETER_API_KEY: values.openMeterApiKey,
-          },
-          litellm_settings: {
-            success_callback: [values.callback],
-          },
-        };
-        setCallbacksCall(accessToken, payload);
-        let newCallback: AlertingObject = {
-          name: values.callback,
-          variables: {
-            SLACK_WEBHOOK_URL: null,
-            LANGFUSE_HOST: null,
-            LANGFUSE_PUBLIC_KEY: null,
-            LANGFUSE_SECRET_KEY: null,
-            OPENMETER_API_KEY: values.openMeterAPIKey,
-          },
-        };
-        // add langfuse to callbacks
-        setCallbacks(callbacks ? [...callbacks, newCallback] : [newCallback]);
-      } else {
-        payload = {
-          error: "Invalid callback value",
-        };
-      }
-      setIsModalVisible(false);
-      addForm.resetFields();
-      setSelectedCallback(null);
-    });
-  };
 
   const handleDeleteCallback = (callback: any) => {
     setCallbackToDelete(callback);

ui/litellm-dashboard/src/components/templates/key_edit_view.tsx

@@ -50,22 +50,6 @@ interface KeyEditViewProps {
 }
 
 // Add this helper function
-const getAvailableModelsForKey = (keyData: KeyResponse, teams: any[] | null): string[] => {
-  // If no teams data is available, return empty array
-  if (!teams || !keyData.team_id) {
-    return [];
-  }
-
-  // Find the team that matches the key's team_id
-  const keyTeam = teams.find((team) => team.team_id === keyData.team_id);
-
-  // If team found and has models, return those models
-  if (keyTeam?.models) {
-    return keyTeam.models;
-  }
-
-  return [];
-};
 
 // Helper function to determine key_type display value from allowed_routes
 const getKeyTypeFromRoutes = (allowedRoutes: string[] | null | undefined): string => {

ui/litellm-dashboard/src/components/user_agent_activity.tsx

@@ -38,10 +38,6 @@ interface DistinctTagResponse {
   tag: string;
 }
 
-interface DistinctTagsResponse {
-  results: DistinctTagResponse[];
-}
-
 interface UserAgentActivityProps {
   accessToken: string | null;
   userRole: string | null;
@@ -59,7 +55,7 @@ const UserAgentActivity: React.FC<UserAgentActivityProps> = ({ accessToken, user
   const [mauData, setMauData] = useState<ActiveUsersAnalyticsResponse>({ results: [] });
   const [summaryData, setSummaryData] = useState<TagSummaryResponse>({ results: [] });
 
-  const [userAgentFilter, setUserAgentFilter] = useState<string>("");
+  const [userAgentFilter] = useState<string>("");
 
   // Tag filtering state
   const [availableTags, setAvailableTags] = useState<string[]>([]);

ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/GuardrailViewer.tsx

@@ -235,18 +235,6 @@ const DownloadIcon = () => (
   </svg>
 );
 
-const ExternalLinkIcon = () => (
-  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" className="inline ml-1">
-    <path
-      d="M6 2H3a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8M8 2h4m0 0v4m0-4L6.5 7.5"
-      stroke="currentColor"
-      strokeWidth="1.2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
 // ── Sub-components ──────────────────────────────────────────────────────────
 
 const MatchDetailsTable = ({ matchDetails }: { matchDetails: MatchDetail[] }) => {
@@ -647,10 +635,6 @@ const GuardrailViewer = ({ data, accessToken, logEntry }: GuardrailViewerProps)
     return Math.round(guardrailEntries.reduce((sum, e) => sum + (e.duration ?? 0), 0) * 1000);
   }, [guardrailEntries]);
 
-  const policyTemplates = useMemo(() => {
-    return Array.from(new Set(guardrailEntries.map((e) => e.policy_template).filter(Boolean)));
-  }, [guardrailEntries]);
-
   if (guardrailEntries.length === 0) {
     return null;
   }

ui/litellm-dashboard/src/components/view_user_spend.tsx

@@ -5,11 +5,6 @@ import { formatNumberWithCommas } from "@/utils/dataUtils";
 import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
 
 // Define the props type
-interface UserSpendData {
-  spend: number; // Adjust the type accordingly based on your data
-  max_budget?: number | null; // Optional property with a default of null
-  // Add other properties if needed
-}
 interface ViewUserSpendProps {
   userSpend: number | null;
   userMaxBudget: number | null;