apache · bbovenzi · May 21, 2025 · May 13, 2025 · May 13, 2025 · May 13, 2025
@@ -36,12 +36,15 @@
     "debounce-promise": "^3.1.2",
     "elkjs": "^0.10.0",
     "html-to-image": "^1.11.13",
+    "i18next": "^25.1.2",
+    "i18next-browser-languagedetector": "^8.1.0",
     "next-themes": "^0.3.0",
     "react": "^18.3.1",
     "react-chartjs-2": "^5.3.0",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.56.1",
     "react-hotkeys-hook": "^4.6.1",
+    "react-i18next": "^15.5.1",
     "react-icons": "^5.5.0",
     "react-innertext": "^1.1.5",
     "react-json-view": "^1.21.3",

@@ -17,6 +17,7 @@
  * under the License.
  */
 import { Box, Text, HStack } from "@chakra-ui/react";
+import { useTranslation } from "react-i18next";
 import { FiDatabase } from "react-icons/fi";
 import { Link } from "react-router-dom";
 
@@ -34,6 +35,7 @@ export const AssetEvent = ({
   readonly assetId?: number;
   readonly event: AssetEventResponse;
 }) => {
+  const { t: translate } = useTranslation("dashboard");
   let source = "";
 
   const { from_rest_api: fromRestAPI, from_trigger: fromTrigger, ...extra } = event.extra ?? {};
@@ -57,8 +59,12 @@ export const AssetEvent = ({
           <Tooltip
             content={
               <div>
-                <Text> group: {event.group ?? ""} </Text>
-                <Text> uri: {event.uri ?? ""} </Text>
+                <Text>
+                  {translate("group")}: {event.group ?? ""}
+                </Text>
+                <Text>
+                  {translate("uri")}: {event.uri ?? ""}
+                </Text>
               </div>
             }
             showArrow
@@ -72,7 +78,7 @@ export const AssetEvent = ({
         </HStack>
       )}
       <HStack>
-        <Box>Source: </Box>
+        <Box>{translate("source")}: </Box>
         {source === "" ? (
           <Link
             to={`/dags/${event.source_dag_id}/runs/${event.source_run_id}/tasks/${event.source_task_id}${event.source_map_index > -1 ? `/mapped/${event.source_map_index}` : ""}`}

@@ -19,12 +19,12 @@
 import { Box, Heading, Flex, HStack, Skeleton, Separator } from "@chakra-ui/react";
 import type { BoxProps } from "@chakra-ui/react";
 import { createListCollection } from "@chakra-ui/react/collection";
+import { useTranslation } from "react-i18next";
 import { FiDatabase } from "react-icons/fi";
 
 import type { AssetEventCollectionResponse, AssetEventResponse } from "openapi/requests/types.gen";
 import { StateBadge } from "src/components/StateBadge";
 import { Select } from "src/components/ui";
-import { pluralize } from "src/utils";
 
 import { DataTable } from "../DataTable";
 import type { CardDef, TableState } from "../DataTable/types";
@@ -57,10 +57,11 @@ export const AssetEvents = ({
   title,
   ...rest
 }: AssetEventProps & BoxProps) => {
+  const { t: translate } = useTranslation("dashboard");
   const assetSortOptions = createListCollection({
     items: [
-      { label: "Newest first", value: "-timestamp" },
-      { label: "Oldest first", value: "timestamp" },
+      { label: translate("sortBy.newestFirst"), value: "-timestamp" },
+      { label: translate("sortBy.oldestFirst"), value: "timestamp" },
     ],
   });
 
@@ -73,7 +74,7 @@ export const AssetEvents = ({
             {data?.total_entries ?? " "}
           </StateBadge>
           <Heading marginEnd="auto" size="md">
-            {pluralize(title ?? "Asset Event", data?.total_entries ?? 0, undefined, true)}
+            {translate("assetEvent", { count: data?.total_entries ?? 0 })}
           </Heading>
         </HStack>
         {setOrderBy === undefined ? undefined : (
@@ -109,6 +110,7 @@ export const AssetEvents = ({
         initialState={tableUrlState}
         isLoading={isLoading}
         modelName="Asset Event"
+        noRowsMessage={translate("noAssetEvents")}
         onStateChange={setTableUrlState}
         skeletonCount={5}
         total={data?.total_entries}

@@ -19,6 +19,7 @@
 import { HStack, Text, type SelectValueChangeDetails } from "@chakra-ui/react";
 import { createListCollection, type ListCollection } from "@chakra-ui/react/collection";
 import dayjs from "dayjs";
+import { useTranslation } from "react-i18next";
 import { FiCalendar } from "react-icons/fi";
 
 import Time from "src/components/Time";
@@ -33,23 +34,27 @@ type Props = {
   readonly timeOptions?: ListCollection<{ label: string; value: string }>;
 };
 
-const defaultTimeOptions = createListCollection({
-  items: [
-    { label: "Last 1 hour", value: "1" },
-    { label: "Last 12 hours", value: "12" },
-    { label: "Last 24 hours", value: "24" },
-    { label: "Past week", value: "168" },
-  ],
-});
-
 const TimeRangeSelector = ({
   defaultValue,
   endDate,
   setEndDate,
   setStartDate,
   startDate,
-  timeOptions = defaultTimeOptions,
+  timeOptions: customTimeOptions,
 }: Props) => {
+  const { t: translate } = useTranslation();
+
+  const defaultTimeOptions = createListCollection({
+    items: [
+      { label: translate("timeRange.lastHour"), value: "1" },
+      { label: translate("timeRange.last12Hours"), value: "12" },
+      { label: translate("timeRange.last24Hours"), value: "24" },
+      { label: translate("timeRange.pastWeek"), value: "168" },
+    ],
+  });
+
+  const timeOptions = customTimeOptions ?? defaultTimeOptions;
+
   const handleTimeChange = ({ value }: SelectValueChangeDetails<Array<string>>) => {
     const cnow = dayjs();
 
@@ -68,7 +73,7 @@ const TimeRangeSelector = ({
         width="200px"
       >
         <Select.Trigger>
-          <Select.ValueText placeholder="Duration" />
+          <Select.ValueText placeholder={translate("timeRange.duration")} />
         </Select.Trigger>
         <Select.Content>
           {timeOptions.items.map((option) => (

@@ -0,0 +1,72 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import i18n from "i18next";
+import LanguageDetector from "i18next-browser-languagedetector";
+import { initReactI18next } from "react-i18next";
+
+import enCommon from "./locales/en/common.json";
+import enDashboard from "./locales/en/dashboard.json";
+import zhTWCommon from "./locales/zh_TW/common.json";
+import zhTWDashboard from "./locales/zh_TW/dashboard.json";
+
+// TODO: Dynamically load translation files
+// import Backend from 'i18next-http-backend';
+
+export const supportedLanguages = [
+  { code: "en", name: "English" },
+  { code: "zh_TW", name: "繁體中文" },
+] as const;
+
+export const defaultLanguage = "en";
+export const namespaces = ["common", "dashboard"] as const;
+
+const resources = {
+  en: {
+    common: enCommon,
+    dashboard: enDashboard,
+  },
+  zh_TW: {
+    common: zhTWCommon,
+    dashboard: zhTWDashboard,
+  },
+};
+
+void i18n
+  // .use(Backend) // TODO: Dynamically load translation files
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    defaultNS: "common",
+    detection: {
+      caches: ["localStorage"],
+      order: ["localStorage", "navigator", "htmlTag"],
+    },
+    fallbackLng: defaultLanguage,
+    interpolation: {
+      escapeValue: false,
+    },
+    ns: namespaces,
+    react: {
+      useSuspense: false,
+    },
+    resources,
+    supportedLngs: supportedLanguages.map((lang) => lang.code),
+  });
+
+export { default } from "i18next";