feat(ui): i18n for Dashboard (Phase 1)

RoyLee1224 · RoyLee1224 · commit c7ee6d6fb1d5 · 2025-05-15T02:40:16.000+08:00
diff --git a/airflow-core/src/airflow/ui/src/i18n/locales/en/dashboard.json b/airflow-core/src/airflow/ui/src/i18n/locales/en/dashboard.json
@@ -1,20 +1,30 @@
 {
   "welcome": "Welcome",
-  "stats": "Stats",
-  "failedDags": "Failed DAGs",
-  "runningDags": "Running DAGs",
-  "activeDags": "Active DAGs",
-  "health": "Health",
+  "stats": {
+    "stats": "Stats",
+    "failedDags": "Failed DAGs",
+    "runningDags": "Running DAGs",
+    "activeDags": "Active DAGs"
+  },
+  "health": {
+    "health": "Health",
+    "metaDatabase": "MetaDatabase",
+    "scheduler": "Scheduler",
+    "triggerer": "Triggerer",
+    "dagProcessor": "Dag Processor"
+  },
   "poolSlots": "Pool Slots",
   "managePools": "Manage Pools",
-  "history": "History",
-  "dagRuns": "DAG Runs",
-  "queued": "Queued",
-  "running": "Running",
-  "success": "Success",
-  "failed": "Failed",
-  "taskInstances": "Task Instances",
-  "upstreamFailed": "Upstream Failed",
+  "history": {
+    "history": "History",
+    "dagRuns": "DAG Runs",
+    "queued": "Queued",
+    "running": "Running",
+    "success": "Success",
+    "failed": "Failed",
+    "taskInstances": "Task Instances",
+    "upstreamFailed": "Upstream Failed"
+  },
   "assetEvents": "Asset Events",
   "noAssetEvents": "No Asset Events found."
 }
diff --git a/airflow-core/src/airflow/ui/src/i18n/locales/zh_TW/common.json b/airflow-core/src/airflow/ui/src/i18n/locales/zh_TW/common.json
@@ -15,7 +15,7 @@
     "home": "首頁",
     "assets": "資產",
     "browse": "瀏覽",
-    "admin": "管理",
-    "docs": "文檔"
+    "admin": "管理者",
+    "docs": "文件"
   }
 }
diff --git a/airflow-core/src/airflow/ui/src/i18n/locales/zh_TW/dashboard.json b/airflow-core/src/airflow/ui/src/i18n/locales/zh_TW/dashboard.json
@@ -1,20 +1,30 @@
 {
   "welcome": "歡迎",
-  "stats": "統計",
-  "failedDags": "失敗的 DAG",
-  "runningDags": "執行中的 DAG",
-  "activeDags": "活躍的 DAG",
-  "health": "健康狀態",
+  "stats": {
+    "stats": "統計",
+    "failedDags": "失敗的 DAGs",
+    "runningDags": "執行中的 DAGs",
+    "activeDags": "活躍的 DAGs"
+  },
+  "health": {
+    "health": "健康狀態",
+    "metaDatabase": "元資料庫",
+    "scheduler": "排程器",
+    "triggerer": "觸發器",
+    "dagProcessor": "DAG 處理器"
+  },
   "poolSlots": "資源池配額",
   "managePools": "管理資源池",
-  "history": "歷史記錄",
-  "dagRuns": "DAG 執行",
-  "queued": "等待中",
-  "running": "執行中",
-  "success": "成功",
-  "failed": "失敗",
-  "taskInstances": "任務實例",
-  "upstreamFailed": "上游失敗",
+  "history": {
+    "history": "歷史記錄",
+    "dagRuns": "DAG 執行",
+    "queued": "等待中",
+    "running": "執行中",
+    "success": "成功",
+    "failed": "失敗",
+    "taskInstances": "任務實例",
+    "upstreamFailed": "上游失敗"
+  },
   "assetEvents": "資產事件",
-  "noAssetEvents": "未找到資產事件。"
+  "noAssetEvents": "未找到資產事件"
 }
diff --git a/airflow-core/src/airflow/ui/src/layouts/Nav/Nav.tsx b/airflow-core/src/airflow/ui/src/layouts/Nav/Nav.tsx
@@ -61,7 +61,7 @@ export const Nav = () => {
         <NavButton
           disabled={!authLinks?.authorized_menu_items.includes("Dags")}
           icon={<DagIcon height="1.75rem" width="1.75rem" />}
-          title="dags"
+          title="DAGs"
           to="dags"
         />
         <NavButton
diff --git a/airflow-core/src/airflow/ui/src/pages/Dashboard/Dashboard.tsx b/airflow-core/src/airflow/ui/src/pages/Dashboard/Dashboard.tsx
@@ -17,6 +17,7 @@
  * under the License.
  */
 import { Box, Heading, VStack } from "@chakra-ui/react";
+import { useTranslation } from "react-i18next";
 
 import type { UIAlert } from "openapi/requests/types.gen";
 import ReactMarkdown from "src/components/ReactMarkdown";
@@ -30,6 +31,7 @@ import { Stats } from "./Stats";
 
 export const Dashboard = () => {
   const alerts = useConfig("dashboard_alert") as Array<UIAlert>;
+  const { t: translate } = useTranslation("dashboard");
 
   return (
     <Box overflow="auto" px={4}>
@@ -56,7 +58,7 @@ export const Dashboard = () => {
           </Accordion.Root>
         ) : undefined}
         <Heading mb={2} size="2xl">
-          Welcome
+          {translate("welcome")}
         </Heading>
       </VStack>
       <Box>
diff --git a/airflow-core/src/airflow/ui/src/pages/Dashboard/Health/Health.tsx b/airflow-core/src/airflow/ui/src/pages/Dashboard/Health/Health.tsx
@@ -17,6 +17,7 @@
  * under the License.
  */
 import { Box, Flex, Heading, HStack } from "@chakra-ui/react";
+import { useTranslation } from "react-i18next";
 import { MdOutlineHealthAndSafety } from "react-icons/md";
 
 import { useMonitorServiceGetHealth } from "openapi/queries";
@@ -31,36 +32,41 @@ export const Health = () => {
   const { data, error, isLoading } = useMonitorServiceGetHealth(undefined, {
     refetchInterval,
   });
+  const { t: translate } = useTranslation("dashboard");
 
   return (
     <Box>
       <Flex color="fg.muted" mb={2}>
         <MdOutlineHealthAndSafety />
         <Heading ml={1} size="xs">
-          Health
+          {translate("health.health")}
         </Heading>
       </Flex>
       <ErrorAlert error={error} />
       <HStack alignItems="center" gap={2}>
-        <HealthBadge isLoading={isLoading} status={data?.metadatabase.status} title="MetaDatabase" />
+        <HealthBadge
+          isLoading={isLoading}
+          status={data?.metadatabase.status}
+          title={translate("health.metaDatabase")}
+        />
         <HealthBadge
           isLoading={isLoading}
           latestHeartbeat={data?.scheduler.latest_scheduler_heartbeat}
           status={data?.scheduler.status}
-          title="Scheduler"
+          title={translate("health.scheduler")}
         />
         <HealthBadge
           isLoading={isLoading}
           latestHeartbeat={data?.triggerer.latest_triggerer_heartbeat}
           status={data?.triggerer.status}
-          title="Triggerer"
+          title={translate("health.triggerer")}
         />
         {data?.dag_processor ? (
           <HealthBadge
             isLoading={isLoading}
             latestHeartbeat={data.dag_processor.latest_dag_processor_heartbeat}
             status={data.dag_processor.status}
-            title="Dag Processor"
+            title={translate("health.dagProcessor")}
           />
         ) : undefined}
       </HStack>
diff --git a/airflow-core/src/airflow/ui/src/pages/Dashboard/HistoricalMetrics/DagRunMetrics.tsx b/airflow-core/src/airflow/ui/src/pages/Dashboard/HistoricalMetrics/DagRunMetrics.tsx
@@ -18,6 +18,7 @@
  */
 import { Box, Separator, Heading, HStack, Stack } from "@chakra-ui/react";
 import type { DAGRunStates } from "openapi-gen/requests/types.gen";
+import { useTranslation } from "react-i18next";
 import { FiBarChart } from "react-icons/fi";
 import { Link as RouterLink } from "react-router-dom";
 
@@ -34,32 +35,36 @@ type DagRunMetricsProps = {
 
 const DAGRUN_STATES: Array<keyof DAGRunStates> = ["queued", "running", "success", "failed"];
 
-export const DagRunMetrics = ({ dagRunStates, endDate, startDate, total }: DagRunMetricsProps) => (
-  <Box borderRadius={5} borderWidth={1} p={4}>
-    <HStack>
-      <RouterLink
-        to={`/dag_runs?start_date=${startDate}${endDate === undefined ? "" : `&end_date=${endDate}`}`}
-      >
-        <StateBadge colorPalette="blue" fontSize="md" variant="solid">
-          <FiBarChart />
-          {total}
-        </StateBadge>
-      </RouterLink>
-      <Heading size="md">Dag Runs</Heading>
-    </HStack>
-    <Separator my={3} />
-    <Stack gap={4}>
-      {DAGRUN_STATES.map((state) => (
-        <MetricSection
-          endDate={endDate}
-          key={state}
-          kind="dag_runs"
-          runs={dagRunStates[state]}
-          startDate={startDate}
-          state={state}
-          total={total}
-        />
-      ))}
-    </Stack>
-  </Box>
-);
+export const DagRunMetrics = ({ dagRunStates, endDate, startDate, total }: DagRunMetricsProps) => {
+  const { t: translate } = useTranslation("dashboard");
+
+  return (
+    <Box borderRadius={5} borderWidth={1} p={4}>
+      <HStack>
+        <RouterLink
+          to={`/dag_runs?start_date=${startDate}${endDate === undefined ? "" : `&end_date=${endDate}`}`}
+        >
+          <StateBadge colorPalette="blue" fontSize="md" variant="solid">
+            <FiBarChart />
+            {total}
+          </StateBadge>
+        </RouterLink>
+        <Heading size="md">{translate("history.dagRuns")}</Heading>
+      </HStack>
+      <Separator my={3} />
+      <Stack gap={4}>
+        {DAGRUN_STATES.map((state) => (
+          <MetricSection
+            endDate={endDate}
+            key={state}
+            kind="dag_runs"
+            runs={dagRunStates[state]}
+            startDate={startDate}
+            state={state}
+            total={total}
+          />
+        ))}
+      </Stack>
+    </Box>
+  );
+};
diff --git a/airflow-core/src/airflow/ui/src/pages/Dashboard/HistoricalMetrics/HistoricalMetrics.tsx b/airflow-core/src/airflow/ui/src/pages/Dashboard/HistoricalMetrics/HistoricalMetrics.tsx
@@ -19,6 +19,7 @@
 import { Box, VStack, SimpleGrid, GridItem, Flex, Heading } from "@chakra-ui/react";
 import dayjs from "dayjs";
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 import { PiBooks } from "react-icons/pi";
 
 import { useAssetServiceGetAssetEvents, useDashboardServiceHistoricalMetrics } from "openapi/queries";
@@ -34,6 +35,7 @@ import { TaskInstanceMetrics } from "./TaskInstanceMetrics";
 const defaultHour = "24";
 
 export const HistoricalMetrics = () => {
+  const { t: translate } = useTranslation("dashboard");
   const now = dayjs();
   const [startDate, setStartDate] = useState(now.subtract(Number(defaultHour), "hour").toISOString());
   const [endDate, setEndDate] = useState(now.toISOString());
@@ -71,7 +73,7 @@ export const HistoricalMetrics = () => {
       <Flex color="fg.muted" my={2}>
         <PiBooks />
         <Heading ml={1} size="xs">
-          History
+          {translate("history.history")}
         </Heading>
       </Flex>
       <ErrorAlert error={error} />
diff --git a/airflow-core/src/airflow/ui/src/pages/Dashboard/HistoricalMetrics/TaskInstanceMetrics.tsx b/airflow-core/src/airflow/ui/src/pages/Dashboard/HistoricalMetrics/TaskInstanceMetrics.tsx
@@ -18,6 +18,7 @@
  */
 import { Box, Separator, Heading, HStack, Stack } from "@chakra-ui/react";
 import type { TaskInstanceState, TaskInstanceStateCount } from "openapi-gen/requests/types.gen";
+import { useTranslation } from "react-i18next";
 import { MdOutlineTask } from "react-icons/md";
 import { Link as RouterLink } from "react-router-dom";
 
@@ -53,36 +54,40 @@ export const TaskInstanceMetrics = ({
   startDate,
   taskInstanceStates,
   total,
-}: TaskInstanceMetricsProps) => (
-  <Box borderRadius={5} borderWidth={1} mt={2} p={4}>
-    <HStack>
-      <RouterLink
-        to={`/task_instances?start_date=${startDate}${endDate === undefined ? "" : `&end_date=${endDate}`}`}
-      >
-        <StateBadge colorPalette="blue" fontSize="md" variant="solid">
-          <MdOutlineTask />
-          {total}
-        </StateBadge>
-      </RouterLink>
-      <Heading size="md">Task Instances</Heading>
-    </HStack>
-    <Separator my={3} />
-    <Stack gap={4}>
-      {TASK_STATES.sort((stateA, stateB) =>
-        taskInstanceStates[stateA] > taskInstanceStates[stateB] ? -1 : 1,
-      ).map((state) =>
-        taskInstanceStates[state] > 0 ? (
-          <MetricSection
-            endDate={endDate}
-            key={state}
-            kind="task_instances"
-            runs={taskInstanceStates[state]}
-            startDate={startDate}
-            state={state as TaskInstanceState}
-            total={total}
-          />
-        ) : undefined,
-      )}
-    </Stack>
-  </Box>
-);
+}: TaskInstanceMetricsProps) => {
+  const { t: translate } = useTranslation("dashboard");
+
+  return (
+    <Box borderRadius={5} borderWidth={1} mt={2} p={4}>
+      <HStack>
+        <RouterLink
+          to={`/task_instances?start_date=${startDate}${endDate === undefined ? "" : `&end_date=${endDate}`}`}
+        >
+          <StateBadge colorPalette="blue" fontSize="md" variant="solid">
+            <MdOutlineTask />
+            {total}
+          </StateBadge>
+        </RouterLink>
+        <Heading size="md">{translate("history.taskInstances", { count: total })}</Heading>
+      </HStack>
+      <Separator my={3} />
+      <Stack gap={4}>
+        {TASK_STATES.sort((stateA, stateB) =>
+          taskInstanceStates[stateA] > taskInstanceStates[stateB] ? -1 : 1,
+        ).map((state) =>
+          taskInstanceStates[state] > 0 ? (
+            <MetricSection
+              endDate={endDate}
+              key={state}
+              kind="task_instances"
+              runs={taskInstanceStates[state]}
+              startDate={startDate}
+              state={state as TaskInstanceState}
+              total={total}
+            />
+          ) : undefined,
+        )}
+      </Stack>
+    </Box>
+  );
+};
diff --git a/airflow-core/src/airflow/ui/src/pages/Dashboard/PoolSummary/PoolSummary.tsx b/airflow-core/src/airflow/ui/src/pages/Dashboard/PoolSummary/PoolSummary.tsx
@@ -17,6 +17,7 @@
  * under the License.
  */
 import { Box, Heading, Flex, Skeleton, Link } from "@chakra-ui/react";
+import { useTranslation } from "react-i18next";
 import { BiTargetLock } from "react-icons/bi";
 import { Link as RouterLink } from "react-router-dom";
 
@@ -27,6 +28,7 @@ import { useAutoRefresh } from "src/utils";
 import { type Slots, slotKeys } from "src/utils/slots";
 
 export const PoolSummary = () => {
+  const { t: translate } = useTranslation("dashboard");
   const refetchInterval = useAutoRefresh({});
   const { data, isLoading } = usePoolServiceGetPools(undefined, undefined, {
     refetchInterval,
@@ -71,12 +73,12 @@ export const PoolSummary = () => {
         <Flex alignItems="center">
           <BiTargetLock />
           <Heading ml={1} size="xs">
-            Pool Slots
+            {translate("poolSlots")}
           </Heading>
         </Flex>
         {hasPoolsAccess ? (
           <Link asChild color="fg.info" fontSize="xs" h={4}>
-            <RouterLink to="/pools">Manage Pools</RouterLink>
+            <RouterLink to="/pools">{translate("managePools")}</RouterLink>
           </Link>
         ) : undefined}
       </Flex>
diff --git a/airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/Stats.tsx b/airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/Stats.tsx
diff --git a/airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/StatsCard.tsx b/airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/StatsCard.tsx

Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@`
`15`	`15`	`"home": "首頁",`
`16`	`16`	`"assets": "資產",`
`17`	`17`	`"browse": "瀏覽",`
`18`		`- "admin": "管理",`
`19`		`- "docs": "文檔"`
	`18`	`+ "admin": "管理者",`
	`19`	`+ "docs": "文件"`
`20`	`20`	`}`
`21`	`21`	`}`