feat(ui): i18n for router settings

ui/litellm-dashboard/src/components/router_settings/LatencyBasedConfiguration.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { Input } from "antd";
+import { useTranslation } from "react-i18next";
 
 interface routingStrategyArgs {
   ttl?: number;
@@ -16,18 +17,19 @@ interface LatencyBasedConfigurationProps {
 }
 
 const LatencyBasedConfiguration: React.FC<LatencyBasedConfigurationProps> = ({ routingStrategyArgs }) => {
+  const { t } = useTranslation();
+
   const paramExplanation: { [key: string]: string } = {
-    ttl: "Sliding window to look back over when calculating the average latency of a deployment. Default - 1 hour (in seconds).",
-    lowest_latency_buffer:
-      "Shuffle between deployments within this % of the lowest latency. Default - 0 (i.e. always pick lowest latency).",
+    ttl: t("routerSettings.latencyBasedConfiguration.ttlDescription"),
+    lowest_latency_buffer: t("routerSettings.latencyBasedConfiguration.lowestLatencyBufferDescription"),
   };
 
   return (
     <>
       <div className="space-y-6">
         <div className="max-w-3xl">
-          <h3 className="text-sm font-medium text-gray-900">Latency-Based Configuration</h3>
-          <p className="text-xs text-gray-500 mt-1">Fine-tune latency-based routing behavior</p>
+          <h3 className="text-sm font-medium text-gray-900">{t("routerSettings.latencyBasedConfiguration.title")}</h3>
+          <p className="text-xs text-gray-500 mt-1">{t("routerSettings.latencyBasedConfiguration.subtitle")}</p>
         </div>
 
         <div className="grid grid-cols-1 gap-6 lg:grid-cols-2 xl:grid-cols-3">

ui/litellm-dashboard/src/components/router_settings/ReliabilityRetriesSection.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { Input } from "antd";
+import { useTranslation } from "react-i18next";
 
 interface ReliabilityRetriesSectionProps {
   routerSettings: { [key: string]: any };
@@ -10,11 +11,13 @@ const ReliabilityRetriesSection: React.FC<ReliabilityRetriesSectionProps> = ({
   routerSettings,
   routerFieldsMetadata,
 }) => {
+  const { t } = useTranslation();
+
   return (
     <div className="space-y-6">
       <div className="max-w-3xl">
-        <h3 className="text-sm font-medium text-gray-900">Reliability & Retries</h3>
-        <p className="text-xs text-gray-500 mt-1">Configure retry logic and failure handling</p>
+        <h3 className="text-sm font-medium text-gray-900">{t("routerSettings.reliabilityRetriesSection.title")}</h3>
+        <p className="text-xs text-gray-500 mt-1">{t("routerSettings.reliabilityRetriesSection.subtitle")}</p>
       </div>
 
       <div className="grid grid-cols-1 gap-6 lg:grid-cols-2 xl:grid-cols-3">

ui/litellm-dashboard/src/components/router_settings/RouterSettingsForm.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { useTranslation } from "react-i18next";
 import LatencyBasedConfiguration from "./LatencyBasedConfiguration";
 import ReliabilityRetriesSection from "./ReliabilityRetriesSection";
 import RoutingStrategySelector from "./RoutingStrategySelector";
@@ -25,6 +26,8 @@ const RouterSettingsForm: React.FC<RouterSettingsFormProps> = ({
   availableRoutingStrategies,
   routingStrategyDescriptions,
 }) => {
+  const { t } = useTranslation();
+
   const handleStrategyChange = (strategy: string) => {
     onChange({
       ...value,
@@ -44,8 +47,8 @@ const RouterSettingsForm: React.FC<RouterSettingsFormProps> = ({
       {/* Routing Settings Section */}
       <div className="space-y-6">
         <div className="max-w-3xl">
-          <h3 className="text-sm font-medium text-gray-900">Routing Settings</h3>
-          <p className="text-xs text-gray-500 mt-1">Configure how requests are routed to deployments</p>
+          <h3 className="text-sm font-medium text-gray-900">{t("routerSettings.routerSettingsForm.title")}</h3>
+          <p className="text-xs text-gray-500 mt-1">{t("routerSettings.routerSettingsForm.subtitle")}</p>
         </div>
 
         {/* Routing Strategy */}

ui/litellm-dashboard/src/components/router_settings/TagFilteringToggle.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { Switch } from "antd";
+import { useTranslation } from "react-i18next";
 
 interface TagFilteringToggleProps {
   enabled: boolean;
@@ -8,12 +9,15 @@ interface TagFilteringToggleProps {
 }
 
 const TagFilteringToggle: React.FC<TagFilteringToggleProps> = ({ enabled, routerFieldsMetadata, onToggle }) => {
+  const { t } = useTranslation();
+
   return (
     <div className="space-y-3 max-w-3xl">
       <div className="flex items-start justify-between">
         <div className="flex-1">
           <label className="text-xs font-medium text-gray-700 uppercase tracking-wide">
-            {routerFieldsMetadata["enable_tag_filtering"]?.ui_field_name || "Enable Tag Filtering"}
+            {routerFieldsMetadata["enable_tag_filtering"]?.ui_field_name ||
+              t("routerSettings.tagFilteringToggle.label")}
           </label>
           <p className="text-xs text-gray-500 mt-0.5">
             {routerFieldsMetadata["enable_tag_filtering"]?.field_description || ""}
@@ -26,7 +30,7 @@ const TagFilteringToggle: React.FC<TagFilteringToggleProps> = ({ enabled, router
                   rel="noopener noreferrer"
                   className="text-blue-600 hover:text-blue-800 underline"
                 >
-                  Learn more
+                  {t("common.learnMore")}
                 </a>
               </>
             )}

ui/litellm-dashboard/src/components/router_settings/index.tsx

@@ -1,5 +1,6 @@
 import { Button } from "antd";
 import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 import NotificationsManager from "../molecules/notifications_manager";
 import { getCallbacksCall, getRouterSettingsCall, setCallbacksCall } from "../networking";
 import RouterSettingsForm, { RouterSettingsFormValue } from "./RouterSettingsForm";
@@ -17,6 +18,7 @@ interface routingStrategyArgs {
 }
 
 const RouterSettings: React.FC<RouterSettingsProps> = ({ accessToken, userRole, userID, modelData }) => {
+  const { t } = useTranslation();
   const [formValue, setFormValue] = useState<RouterSettingsFormValue>({
     routerSettings: {},
     selectedStrategy: null,
@@ -169,10 +171,10 @@ const RouterSettings: React.FC<RouterSettingsProps> = ({ accessToken, userRole,
     try {
       setCallbacksCall(accessToken, payload);
     } catch (error) {
-      NotificationsManager.fromBackend("Failed to update router settings: " + error);
+      NotificationsManager.fromBackend(t("routerSettings.index.updateFailed", { error }));
     }
 
-    NotificationsManager.success("router settings updated successfully");
+    NotificationsManager.success(t("routerSettings.index.updateSuccess"));
   };
 
   if (!accessToken) {
@@ -191,9 +193,9 @@ const RouterSettings: React.FC<RouterSettingsProps> = ({ accessToken, userRole,
 
       {/* Actions - Sticky at bottom */}
       <div className="border-t border-gray-200 pt-6 flex justify-end gap-3">
-        <Button onClick={() => window.location.reload()}>Reset</Button>
+        <Button onClick={() => window.location.reload()}>{t("common.reset")}</Button>
         <Button type="primary" onClick={handleSaveChanges}>
-          Save Changes
+          {t("routerSettings.index.saveChanges")}
         </Button>
       </div>
     </div>

ui/litellm-dashboard/src/locales/en.json

@@ -7305,5 +7305,29 @@
       "updateSuccess": "Model storage settings updated successfully",
       "updateFailed": "Failed to save model storage settings: {{error}}"
     }
+  },
+  "routerSettings": {
+    "latencyBasedConfiguration": {
+      "title": "Latency-Based Configuration",
+      "subtitle": "Fine-tune latency-based routing behavior",
+      "ttlDescription": "Sliding window to look back over when calculating the average latency of a deployment. Default - 1 hour (in seconds).",
+      "lowestLatencyBufferDescription": "Shuffle between deployments within this % of the lowest latency. Default - 0 (i.e. always pick lowest latency)."
+    },
+    "reliabilityRetriesSection": {
+      "title": "Reliability & Retries",
+      "subtitle": "Configure retry logic and failure handling"
+    },
+    "routerSettingsForm": {
+      "title": "Routing Settings",
+      "subtitle": "Configure how requests are routed to deployments"
+    },
+    "tagFilteringToggle": {
+      "label": "Enable Tag Filtering"
+    },
+    "index": {
+      "updateFailed": "Failed to update router settings: {{error}}",
+      "updateSuccess": "router settings updated successfully",
+      "saveChanges": "Save Changes"
+    }
   }
 }

ui/litellm-dashboard/src/locales/zh-CN.json

@@ -7305,5 +7305,29 @@
       "updateSuccess": "模型存储设置已成功更新",
       "updateFailed": "保存模型存储设置失败：{{error}}"
     }
+  },
+  "routerSettings": {
+    "latencyBasedConfiguration": {
+      "title": "基于延迟的配置",
+      "subtitle": "精细调整基于延迟的路由行为",
+      "ttlDescription": "计算部署平均延迟时回溯的滑动窗口，默认 1 小时（单位：秒）。",
+      "lowestLatencyBufferDescription": "在最低延迟的此百分比范围内随机选择部署，默认 0（即始终选择最低延迟）。"
+    },
+    "reliabilityRetriesSection": {
+      "title": "可靠性与重试",
+      "subtitle": "配置重试逻辑和故障处理"
+    },
+    "routerSettingsForm": {
+      "title": "路由设置",
+      "subtitle": "配置请求如何路由到各部署"
+    },
+    "tagFilteringToggle": {
+      "label": "启用标签过滤"
+    },
+    "index": {
+      "updateFailed": "更新路由器设置失败：{{error}}",
+      "updateSuccess": "路由器设置已成功更新",
+      "saveChanges": "保存更改"
+    }
   }
 }