From f293c01f8596fc944b40578e17d104604321fb1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B9=E9=9B=AA?= <2b@yorha.xyz>
Date: Thu, 11 Jun 2026 06:51:19 +0900
Subject: [PATCH] feat(ui): i18n for alerting settings

---
 .../src/components/alerting/alerting_settings.tsx    |  4 +++-
 .../src/components/alerting/dynamic_form.tsx         | 12 +++++++-----
 ui/litellm-dashboard/src/locales/en.json             | 12 ++++++++++++
 ui/litellm-dashboard/src/locales/zh-CN.json          | 12 ++++++++++++
 4 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/alerting/alerting_settings.tsx b/ui/litellm-dashboard/src/components/alerting/alerting_settings.tsx
index 9730bca338f..83b86fca16f 100644
--- a/ui/litellm-dashboard/src/components/alerting/alerting_settings.tsx
+++ b/ui/litellm-dashboard/src/components/alerting/alerting_settings.tsx
@@ -2,6 +2,7 @@
  * UI for controlling slack alerting settings
  */
 import React, { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
 
 import { alertingSettingsCall, updateConfigFieldSetting } from "../networking";
 import DynamicForm from "./dynamic_form";
@@ -22,6 +23,7 @@ interface AlertingSettingsProps {
 }
 
 const AlertingSettings: React.FC<AlertingSettingsProps> = ({ accessToken, premiumUser }) => {
+  const { t } = useTranslation();
   const [alertingSettings, setAlertingSettings] = useState<alertingSettingsItem[]>([]);
 
   useEffect(() => {
@@ -77,7 +79,7 @@ const AlertingSettings: React.FC<AlertingSettingsProps> = ({ accessToken, premiu
         }
       }
       // update value in state
-      NotificationsManager.success("Wait 10s for proxy to update.");
+      NotificationsManager.success(t("alerting.alertingSettings.saveSuccess"));
     } catch (error) {
       // do something
     }
diff --git a/ui/litellm-dashboard/src/components/alerting/dynamic_form.tsx b/ui/litellm-dashboard/src/components/alerting/dynamic_form.tsx
index a0c7586ce4f..c74a392f6ca 100644
--- a/ui/litellm-dashboard/src/components/alerting/dynamic_form.tsx
+++ b/ui/litellm-dashboard/src/components/alerting/dynamic_form.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { useTranslation } from "react-i18next";
 import { Form, Input, InputNumber, Button as Button2 } from "antd";
 import { TrashIcon, CheckCircleIcon } from "@heroicons/react/outline";
 import { Button, Badge, Icon, Text, TableRow, TableCell, Switch } from "@tremor/react";
@@ -26,6 +27,7 @@ const DynamicForm: React.FC<DynamicFormProps> = ({
   handleSubmit,
   premiumUser,
 }) => {
+  const { t } = useTranslation();
   const [form] = Form.useForm();
 
   const onFinish = () => {
@@ -86,7 +88,7 @@ const DynamicForm: React.FC<DynamicFormProps> = ({
               <TableCell>
                 <Button className="flex items-center justify-center">
                   <a href="https://forms.gle/W3U4PZpJGFHWtHyA9" target="_blank">
-                    ✨ Enterprise Feature
+                    {t("alerting.dynamicForm.enterpriseFeature")}
                   </a>
                 </Button>
               </TableCell>
@@ -122,12 +124,12 @@ const DynamicForm: React.FC<DynamicFormProps> = ({
           <TableCell>
             {value.stored_in_db == true ? (
               <Badge icon={CheckCircleIcon} className="text-white">
-                In DB
+                {t("alerting.dynamicForm.inDb")}
               </Badge>
             ) : value.stored_in_db == false ? (
-              <Badge className="text-gray bg-white outline">In Config</Badge>
+              <Badge className="text-gray bg-white outline">{t("alerting.dynamicForm.inConfig")}</Badge>
             ) : (
-              <Badge className="text-gray bg-white outline">Not Set</Badge>
+              <Badge className="text-gray bg-white outline">{t("alerting.dynamicForm.notSet")}</Badge>
             )}
           </TableCell>
           <TableCell>
@@ -138,7 +140,7 @@ const DynamicForm: React.FC<DynamicFormProps> = ({
         </TableRow>
       ))}
       <div>
-        <Button2 htmlType="submit">Update Settings</Button2>
+        <Button2 htmlType="submit">{t("alerting.dynamicForm.updateSettings")}</Button2>
       </div>
     </Form>
   );
diff --git a/ui/litellm-dashboard/src/locales/en.json b/ui/litellm-dashboard/src/locales/en.json
index a18ce226591..452079ac72d 100644
--- a/ui/litellm-dashboard/src/locales/en.json
+++ b/ui/litellm-dashboard/src/locales/en.json
@@ -8138,5 +8138,17 @@
       "modelIdLabel": "Model ID:",
       "noModelsFound": "No models found"
     }
+  },
+  "alerting": {
+    "alertingSettings": {
+      "saveSuccess": "Wait 10s for proxy to update."
+    },
+    "dynamicForm": {
+      "enterpriseFeature": "✨ Enterprise Feature",
+      "inDb": "In DB",
+      "inConfig": "In Config",
+      "notSet": "Not Set",
+      "updateSettings": "Update Settings"
+    }
   }
 }
diff --git a/ui/litellm-dashboard/src/locales/zh-CN.json b/ui/litellm-dashboard/src/locales/zh-CN.json
index 4ff36387c12..8b091096586 100644
--- a/ui/litellm-dashboard/src/locales/zh-CN.json
+++ b/ui/litellm-dashboard/src/locales/zh-CN.json
@@ -8138,5 +8138,17 @@
       "modelIdLabel": "模型 ID：",
       "noModelsFound": "未找到模型"
     }
+  },
+  "alerting": {
+    "alertingSettings": {
+      "saveSuccess": "等待代理更新，约需 10 秒。"
+    },
+    "dynamicForm": {
+      "enterpriseFeature": "✨ 企业版功能",
+      "inDb": "已存入数据库",
+      "inConfig": "来自配置文件",
+      "notSet": "未设置",
+      "updateSettings": "更新设置"
+    }
   }
 }