Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add capitalize and titleCase method for i18n #168

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

feat: add capitalize and titleCase method for i18n #168

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
36eeb97
feat: add capitalize and titleCase method for i18n
warjiang Jan 16, 2025
926ab84
feat: add lowerCase method for i18n; add precheck for capitalize & ti…
warjiang Jan 18, 2025
a645653
feat: titleCase for sidebar、table column title、card title and segment…
warjiang Jan 18, 2025
b37e258
feat: set default language for i18n
warjiang Jan 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 42 additions & 43 deletions ui/apps/dashboard/src/main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,57 +1,56 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.tsx';
import i18nInstance, {getLang} from '@/utils/i18n';
import {initReactI18next} from 'react-i18next';
import {loader} from '@monaco-editor/react';
import i18nInstance, { getLang } from '@/utils/i18n';
import { initReactI18next } from 'react-i18next';
import { loader } from '@monaco-editor/react';
import * as monaco from 'monaco-editor';
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
// https://github.com/remcohaszing/monaco-yaml/issues/150
import yamlWorker from '@/utils/workaround-yaml.worker?worker';
import enTexts from '../locales/en-US.json';
import zhTexts from '../locales/zh-CN.json';
import {initRoute} from '@/routes/route.tsx';
import { initRoute } from '@/routes/route.tsx';

window.MonacoEnvironment = {
getWorker(_, label) {
if (label === 'yaml') {
return new yamlWorker();
}
return new editorWorker();
},
getWorker(_, label) {
if (label === 'yaml') {
return new yamlWorker();
}
return new editorWorker();
},
};
loader.config({monaco});
loader.config({ monaco });

i18nInstance
.use(initReactI18next) // passes i18n down to react-i18next
.init({
debug: true,
lng: getLang(), // if you're using a language detector, do not define the lng option
fallbackLng: ['zh-CN'],
resources: {
zh: {
translation: zhTexts,
},
en: {
translation: enTexts,
},
},
interpolation: {
escapeValue: false, // react already safes from xss => https://www.i18next.com/translation-function/interpolation#unescape
},
saveMissing: true, // send not translated keys to endpoint,
react: {
useSuspense: false,
},
})
.then(() => {
initRoute();
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App/>
</React.StrictMode>,
);
})
.catch(() => {

})
.use(initReactI18next) // passes i18n down to react-i18next
.init({
debug: true,
lng: getLang(), // if you're using a language detector, do not define the lng option
// fallbackLng: ['zh-CN'],
fallbackLng: ['en-US'],
resources: {
zh: {
translation: zhTexts,
},
en: {
translation: enTexts,
},
},
interpolation: {
escapeValue: false, // react already safes from xss => https://www.i18next.com/translation-function/interpolation#unescape
},
saveMissing: true, // send not translated keys to endpoint,
react: {
useSuspense: false,
},
})
.then(() => {
initRoute();
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />
</React.StrictMode>,
);
})
.catch(() => {});
35 changes: 24 additions & 11 deletions ui/apps/dashboard/src/pages/cluster-manage/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import i18nInstance from '@/utils/i18n';
import i18nInstance, { titleCase } from '@/utils/i18n';
import Panel from '@/components/panel';
import { useQuery } from '@tanstack/react-query';
import { GetClusters } from '@/services';
Expand Down Expand Up @@ -54,7 +54,9 @@ const ClusterManagePage = () => {
});
const columns: TableColumnProps<Cluster>[] = [
{
title: i18nInstance.t('c3f28b34bbdec501802fa403584267e6', '集群名称'),
title: titleCase(
i18nInstance.t('c3f28b34bbdec501802fa403584267e6', '集群名称'),
),
key: 'clusterName',
width: 150,
render: (_, r) => {
Expand All @@ -63,17 +65,18 @@ const ClusterManagePage = () => {
},
},
{
title: i18nInstance.t(
'bd17297989ec345cbc03ae0b8a13dc0a',
'kubernetes版本',
title: titleCase(
i18nInstance.t('bd17297989ec345cbc03ae0b8a13dc0a', 'kubernetes版本'),
),
dataIndex: 'kubernetesVersion',
key: 'kubernetesVersion',
width: 150,
align: 'center',
},
{
title: i18nInstance.t('ee00813361387a116d274c608ba8bb13', '集群状态'),
title: titleCase(
i18nInstance.t('ee00813361387a116d274c608ba8bb13', '集群状态'),
),
dataIndex: 'ready',
key: 'ready',
align: 'center',
Expand Down Expand Up @@ -113,7 +116,9 @@ const ClusterManagePage = () => {
},
},
{
title: i18nInstance.t('f0789e79d48f135e5d870753f7a85d05', '模式'),
title: titleCase(
i18nInstance.t('f0789e79d48f135e5d870753f7a85d05', '模式'),
),
dataIndex: 'syncMode',
width: 150,
align: 'center',
Expand All @@ -126,7 +131,9 @@ const ClusterManagePage = () => {
},
},
{
title: i18nInstance.t('b86224e030e5948f96b70a4c3600b33f', '节点状态'),
title: titleCase(
i18nInstance.t('b86224e030e5948f96b70a4c3600b33f', '节点状态'),
),
dataIndex: 'nodeStatus',
align: 'center',
width: 150,
Expand All @@ -143,7 +150,9 @@ const ClusterManagePage = () => {
},
},
{
title: i18nInstance.t('763a78a5fc84dbca6f0137a591587f5f', 'cpu用量'),
title: titleCase(
i18nInstance.t('763a78a5fc84dbca6f0137a591587f5f', 'cpu用量'),
),
dataIndex: 'cpuFraction',
width: '15%',
render: (_, r) => {
Expand All @@ -159,7 +168,9 @@ const ClusterManagePage = () => {
},
},
{
title: i18nInstance.t('8b2e672e8b847415a47cc2dd25a87a07', 'memory用量'),
title: titleCase(
i18nInstance.t('8b2e672e8b847415a47cc2dd25a87a07', 'memory用量'),
),
dataIndex: 'memoryFraction',
width: '15%',
render: (_, r) => {
Expand All @@ -175,7 +186,9 @@ const ClusterManagePage = () => {
},
},
{
title: i18nInstance.t('2b6bc0f293f5ca01b006206c2535ccbc', '操作'),
title: titleCase(
i18nInstance.t('2b6bc0f293f5ca01b006206c2535ccbc', '操作'),
),
key: 'op',
width: 200,
render: (_, r) => {
Expand Down
36 changes: 22 additions & 14 deletions ui/apps/dashboard/src/pages/multicloud-policy-manage/override-policy/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import i18nInstance from '@/utils/i18n';
import i18nInstance, { titleCase } from '@/utils/i18n';
import { useMemo, useState } from 'react';
import Panel from '@/components/panel';
import {
Expand Down Expand Up @@ -90,25 +90,28 @@ const OverridePolicyManage = () => {
});
const columns = [
filter.policyScope === 'namespace-scope' && {
title: i18nInstance.t('a4b28a416f0b6f3c215c51e79e517298', '命名空间'),
title: titleCase(
i18nInstance.t('a4b28a416f0b6f3c215c51e79e517298', '命名空间'),
),
key: 'namespaceName',
width: 200,
render: (_v: string, r: OverridePolicy | ClusterOverridePolicy) => {
return r.objectMeta.namespace;
},
},
{
title: i18nInstance.t('53cf41060c577315071a7c14bb612852', '策略名称'),
title: titleCase(
i18nInstance.t('53cf41060c577315071a7c14bb612852', '策略名称'),
),
key: 'policyName',
width: 200,
render: (_v: string, r: OverridePolicy | ClusterOverridePolicy) => {
return r.objectMeta.name;
},
},
{
title: i18nInstance.t(
'8a59b316f11d99f01ebe9b1b466ba8de',
'差异化策略类型',
title: titleCase(
i18nInstance.t('8a59b316f11d99f01ebe9b1b466ba8de', '差异化策略类型'),
),
key: 'ruleTypes',
dataIndex: 'ruleTypes',
Expand All @@ -125,7 +128,9 @@ const OverridePolicyManage = () => {
},
},
{
title: i18nInstance.t('ab7e397dd8c88360e441f1c1525a5758', '关联集群'),
title: titleCase(
i18nInstance.t('ab7e397dd8c88360e441f1c1525a5758', '关联集群'),
),
key: 'cluster',
render: (_v: string, r: OverridePolicy | ClusterOverridePolicy) => {
const clusters = extractClusterNames(r);
Expand All @@ -140,7 +145,9 @@ const OverridePolicyManage = () => {
},
},
{
title: i18nInstance.t('2b6bc0f293f5ca01b006206c2535ccbc', '操作'),
title: titleCase(
i18nInstance.t('2b6bc0f293f5ca01b006206c2535ccbc', '操作'),
),
key: 'op',
width: 200,
render: (_v: string, r: OverridePolicy | ClusterOverridePolicy) => {
Expand Down Expand Up @@ -263,16 +270,17 @@ const OverridePolicyManage = () => {
}}
options={[
{
label: i18nInstance.t(
'bf15e71b2553d369585ace795d15ac3b',
'命名空间级别',
label: titleCase(
i18nInstance.t(
'bf15e71b2553d369585ace795d15ac3b',
'命名空间级别',
),
),
value: 'namespace-scope',
},
{
label: i18nInstance.t(
'860f29d8fc7a68113902db52885111d4',
'集群级别',
label: titleCase(
i18nInstance.t('860f29d8fc7a68113902db52885111d4', '集群级别'),
),
value: 'cluster-scope',
},
Expand Down
39 changes: 26 additions & 13 deletions ui/apps/dashboard/src/pages/multicloud-policy-manage/propagation-policy/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import i18nInstance from '@/utils/i18n';
import i18nInstance, { titleCase } from '@/utils/i18n';
import { useState } from 'react';
import Panel from '@/components/panel';
import {
Expand Down Expand Up @@ -79,29 +79,37 @@ const PropagationPolicyManage = () => {
});
const columns = [
filter.policyScope === PolicyScope.Namespace && {
title: i18nInstance.t('a4b28a416f0b6f3c215c51e79e517298', '命名空间'),
title: titleCase(
i18nInstance.t('a4b28a416f0b6f3c215c51e79e517298', '命名空间'),
),
key: 'namespaceName',
width: 200,
render: (_v: string, r: PropagationPolicy) => {
return r.objectMeta.namespace;
},
},
{
title: i18nInstance.t('53cf41060c577315071a7c14bb612852', '策略名称'),
title: titleCase(
i18nInstance.t('53cf41060c577315071a7c14bb612852', '策略名称'),
),
key: 'policyName',
width: 200,
render: (_v: string, r: PropagationPolicy) => {
return r.objectMeta.name;
},
},
{
title: i18nInstance.t('915f48c8fcbe25e3dc5875c471b0ce3e', '调度器名称'),
title: titleCase(
i18nInstance.t('915f48c8fcbe25e3dc5875c471b0ce3e', '调度器名称'),
),
key: 'schedulerName',
dataIndex: 'schedulerName',
width: 200,
},
{
title: i18nInstance.t('ab7e397dd8c88360e441f1c1525a5758', '关联集群'),
title: titleCase(
i18nInstance.t('ab7e397dd8c88360e441f1c1525a5758', '关联集群'),
),
key: 'cluster',
render: (_v: string, r: PropagationPolicy) => {
if (!r?.clusterAffinity?.clusterNames) {
Expand All @@ -117,7 +125,9 @@ const PropagationPolicyManage = () => {
},
},
{
title: i18nInstance.t('8c0921045b741bc4e19d61426b99c938', '关联资源'),
title: titleCase(
i18nInstance.t('8c0921045b741bc4e19d61426b99c938', '关联资源'),
),
key: 'deployments',
render: (_v: string, r: PropagationPolicy) => {
return r?.deployments?.map((d) => (
Expand All @@ -126,7 +136,9 @@ const PropagationPolicyManage = () => {
},
},
{
title: i18nInstance.t('2b6bc0f293f5ca01b006206c2535ccbc', '操作'),
title: titleCase(
i18nInstance.t('2b6bc0f293f5ca01b006206c2535ccbc', '操作'),
),
key: 'op',
width: 200,
render: (_v: string, r: PropagationPolicy) => {
Expand Down Expand Up @@ -257,16 +269,17 @@ const PropagationPolicyManage = () => {
}}
options={[
{
label: i18nInstance.t(
'bf15e71b2553d369585ace795d15ac3b',
'命名空间级别',
label: titleCase(
i18nInstance.t(
'bf15e71b2553d369585ace795d15ac3b',
'命名空间级别',
),
),
value: PolicyScope.Namespace,
},
{
label: i18nInstance.t(
'860f29d8fc7a68113902db52885111d4',
'集群级别',
label: titleCase(
i18nInstance.t('860f29d8fc7a68113902db52885111d4', '集群级别'),
),
value: PolicyScope.Cluster,
},
Expand Down
Loading