feat(ui): i18n for alerting settings

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
     }

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>
   );

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"
+    }
   }
 }

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": "更新设置"
+    }
   }
 }