[fix](manager)Internationalize page content and data page Tabs switch…

…ing problem (#30)

* fix the bug that tab title and content do not match when switching between different tables

* Internationalize the data and cluster page

Co-authored-by: wangyf0555 <wangyongfeng@flywheels.com>

frontend/public/locales/en-us.json

@@ -58,6 +58,7 @@
     "loginExpirtMsg":"The login information has expired. Click OK to jump to the login page.",
     "nextStep":"Next",
     "previousStep":"Previous",
+    "Accomplish": "Accomplish",
     "pleaseEnter":"Please enter",
     "cancelButton":"Cancel",
     "loadButton":"Import",
@@ -67,6 +68,13 @@
     "selectWarning": "Please select a table",
     "executionTime": "Execution Time",
     "search":"Search",
+    "addNodes": "Add Nodes",
+    "sshTip": "Complete SSH trust between the Manager node and other nodes in advance, and enter the SSH information of the Manager node below.",
+    "sshTrust": "SSH Trust",
+    "sshTrustHelper": "How to do SSH trust？",
+    "sshUser": "SSH User",
+    "sshPort": "SSH Port",
+    "sshKey": "SSH Key",
 
     "noData":"No data",
     "data": "Data",
@@ -317,5 +325,21 @@
     "Space Register": "Space Register",
     "Please Select Users...": "Please Select Users...",
     "NewPasswordLengthRuleMessage": "Password length is 6-12",
-    "NewPasswordPatternRuleMessage": "Passwords only support uppercase letters, lowercase letters, numbers and underscores, including at least three types."
+    "NewPasswordPatternRuleMessage": "Passwords only support uppercase letters, lowercase letters, numbers and underscores, including at least three types.",
+    "AddHost": "Add Host",
+    "SetupOptions": "Setup Options",
+    "CheckoutHost": "Checkout Host",
+    "PlaningNodes": "Planing Nodes",
+    "SetUpParameters": "Set Up Parameters",
+    "DeployCluster": "Deploy Cluster",
+    "creationComplete": "Creation Complete",
+
+    "BasicInfo": "Basic Info",
+    "DataPreview": "Data Preview",
+    "DataTree": "Data Tree",
+    "TableName": "Table Name",
+    "TableDescription": "Table Description",
+    "CreateTime": "Create Time",
+    "UpdateTime": "Update Time",
+    "UpdateTimeHelper": "Records the time when the last table structure change occurred"
 }

frontend/public/locales/zh-cn.json

@@ -57,6 +57,7 @@
     "loginExpirtMsg": "登录信息已过期。点击确定跳转到登陆页面。",
     "nextStep": "下一步",
     "previousStep": "上一步",
+    "Accomplish": "完成",
     "pleaseEnter": "请输入",
     "cancelButton": "取消",
     "loadButton": "导入",
@@ -66,6 +67,13 @@
     "selectWarning": "请选择表",
     "executionTime": "执行时间",
     "search":"查询",
+    "addNodes": "添加节点",
+    "sshTip": "请提前完成Manager节点与其他节点间SSH信任，并在下方填入Manager节点的SSH信息。",
+    "sshTrust": "SSH信任",
+    "sshTrustHelper": "如何进行SSH信任？",
+    "sshUser": "SSH用户",
+    "sshPort": "SSH端口",
+    "sshKey": "SSH私钥",
 
     "noData":"暂无数据",
     "data": "数据",
@@ -330,6 +338,22 @@
     "Space Register": "注册空间",
     "Please Select Users...": "请选择用户...",
     "NewPasswordLengthRuleMessage": "密码长度为6-12",
-    "NewPasswordPatternRuleMessage": "密码仅支持大写字母、小写字母、数字、下划线，至少包含三种"
+    "NewPasswordPatternRuleMessage": "密码仅支持大写字母、小写字母、数字、下划线，至少包含三种",
+    "AddHost": "添加主机",
+    "SetupOptions": "安装选项",
+    "CheckoutHost": "校验主机",
+    "PlaningNodes": "规划节点",
+    "SetUpParameters": "设置参数",
+    "DeployCluster": "部署集群",
+    "creationComplete": "创建完成",
+
+    "BasicInfo": "基本信息",
+    "DataPreview": "数据预览",
+    "DataTree": "数据目录树",
+    "TableName": "表名称",
+    "TableDescription": "数据表描述信息",
+    "CreateTime": "创建时间",
+    "UpdateTime": "最近修改时间",
+    "UpdateTimeHelper": "记录该表最近发生表结构变更的时间"
 }
 

frontend/src/routes/space/new-cluster/new-cluster.tsx

@@ -39,12 +39,15 @@ import { SpaceAPI } from '../space.api';
 import { isSuccess } from '@src/utils/http';
 import { requestInfoState, stepDisabledState } from '../access-cluster/access-cluster.recoil';
 import { checkParam } from '../space.utils';
+import { useTranslation } from 'react-i18next';
+
 const { Step } = Steps;
 
 const PREV_DISABLED_STEPS = [NewClusterStepsEnum[3], NewClusterStepsEnum[6], NewClusterStepsEnum[7]];
 const NEXT_DISABLED_STEPS = [NewClusterStepsEnum[3], NewClusterStepsEnum[6]];
 
 export function NewCluster(props: any) {
+    const {t} = useTranslation()
     const match = useRouteMatch<{ requestId: string }>();
     const history = useHistory();
     const [step, setStep] = React.useState(0);
@@ -188,17 +191,17 @@ export function NewCluster(props: any) {
                 <ProCard style={{ marginTop: 20 }}>
                     <div style={{ position: 'fixed', top: 80, right: 80 }}>
                         <Steps direction="vertical" current={step} style={{ padding: '20px 0 40px 0' }}>
-                            <Step title="注册空间" description="&nbsp;&nbsp;" />
-                            <Step title="添加主机" description="&nbsp;&nbsp;" />
-                            <Step title="安装选项" description="&nbsp;&nbsp;" />
-                            <Step title="校验主机" description="&nbsp;&nbsp;" />
-                            <Step title="规划节点" description="&nbsp;&nbsp;" />
-                            <Step title="配置参数" description="&nbsp;&nbsp;" />
-                            <Step title="部署集群" description="&nbsp;&nbsp;" />
-                            <Step title="完成创建" description="&nbsp;&nbsp;" />
+                            <Step title={t`Space Register`} description="&nbsp;&nbsp;" />
+                            <Step title={t`AddHost`} description="&nbsp;&nbsp;" />
+                            <Step title={t`SetupOptions`} description="&nbsp;&nbsp;" />
+                            <Step title={t`CheckoutHost`} description="&nbsp;&nbsp;" />
+                            <Step title={t`PlaningNodes`} description="&nbsp;&nbsp;" />
+                            <Step title={t`SetUpParameters`} description="&nbsp;&nbsp;" />
+                            <Step title={t`DeployCluster`} description="&nbsp;&nbsp;" />
+                            <Step title={t`creationComplete`} description="&nbsp;&nbsp;" />
                         </Steps>
                     </div>
-                    <div style={{ marginRight: 240 }}>
+                    <div style={{ marginRight: 300 }}>
                         <CacheSwitch>
                             <CacheRoute path={`${match.path}/register-space`} component={SpaceRegister} />
                             <CacheRoute path={`${match.path}/add-node`} component={AddNode} />
@@ -222,7 +225,7 @@ export function NewCluster(props: any) {
                                         }}
                                         disabled={stepDisabled.prev}
                                     >
-                                        上一步
+                                        {t`previousStep`}
                                     </Button>
                                 )}
                                 {step === NewClusterStepsEnum['finish'] ? (
@@ -233,7 +236,7 @@ export function NewCluster(props: any) {
                                             finish();
                                         }}
                                     >
-                                        完成
+                                        {t`Accomplish`}
                                     </Button>
                                 ) : (
                                     <Button
@@ -244,7 +247,7 @@ export function NewCluster(props: any) {
                                         disabled={stepDisabled.next}
                                         loading={loading}
                                     >
-                                        下一步
+                                        {t`nextStep`}
                                     </Button>
                                 )}
                             </Space>

frontend/src/routes/space/new-cluster/steps/add-node/add-node.tsx

@@ -20,10 +20,12 @@ import React, { useContext, useMemo, useRef, useState, useEffect } from 'react';
 import ProCard from '@ant-design/pro-card';
 import { NewSpaceInfoContext, UserInfoContext } from '@src/common/common.context';
 import { NodeList } from './node-list/node-list';
+import { useTranslation } from 'react-i18next';
 
 const { TextArea } = Input;
 
 export function AddNode(props: any) {
+    const { t } = useTranslation()
     const userInfo = useContext(UserInfoContext);
     const { reqInfo, form } = useContext(NewSpaceInfoContext);
     useEffect(() => {
@@ -37,23 +39,23 @@ export function AddNode(props: any) {
         });
     }, [form, reqInfo.authInfo, reqInfo.hosts]);
     return (
-        <ProCard title={<h2>添加节点</h2>} headerBordered>
-            <PageHeader className="site-page-header" title="SSH信任" style={{ paddingLeft: 0 }} />
+        <ProCard title={<h2>{t`addNodes`}</h2>} headerBordered>
+            <PageHeader className="site-page-header" title={t`sshTrust`} style={{ paddingLeft: 0 }} />
             <span>
-                请提前完成Manager节点与其他节点间SSH信任，并在下方填入Manager节点的SSH信息。<a>如何进行SSH信任？</a>
+                {t`sshTip`}<a>{t`sshTrustHelper`}</a>
             </span>
             <Divider style={{ margin: 0, marginBottom: 24 }} />
             <Form form={form} name="basic" labelCol={{ span: 2 }} wrapperCol={{ span: 10 }} autoComplete="off">
-                <Form.Item label="SSH用户" name="sshUser" rules={[{ required: true, message: '请输入SSH用户!' }]}>
+                <Form.Item label={t`sshUser`} name="sshUser" rules={[{ required: true, message: '请输入SSH用户!' }]}>
                     <Input />
                 </Form.Item>
-                <Form.Item label="SSH端口" name="sshPort" rules={[{ required: true, message: '请输入SSH端口!' }]}>
+                <Form.Item label={t`sshPort`} name="sshPort" rules={[{ required: true, message: '请输入SSH端口!' }]}>
                     <Input />
                 </Form.Item>
-                <Form.Item label="SSH私钥" name="sshKey" rules={[{ required: true, message: '请输入SSH私钥' }]}>
+                <Form.Item label={t`sshKey`} name="sshKey" rules={[{ required: true, message: '请输入SSH私钥' }]}>
                     <TextArea rows={5} />
                 </Form.Item>
-                <PageHeader className="site-page-header" title="节点列表" style={{ paddingLeft: 0 }} />
+                <PageHeader className="site-page-header" title={t`nodeList`} style={{ paddingLeft: 0 }} />
                 <Divider style={{ margin: 0, marginBottom: 24 }} />
                 <Form.Item name="hosts" style={{ width: '100%' }} wrapperCol={{ span: 24 }}>
                     <NodeList />

frontend/src/routes/table-content/index.tsx

@@ -38,11 +38,12 @@ import DataPreview from './tabs/data.pre';
 const { Content, Sider } = Layout;
 const iconTable = <TableOutlined />;
 import { isTableIdSame } from '@src/utils/utils';
+import { useTranslation } from 'react-i18next';
 const { TabPane } = Tabs;
 let id: any = '',
     name: any = '';
 function TableContent(props: any) {
-    console.log(props)
+    const { t } = useTranslation()
     const history = useHistory();
     const { match } = props;
     const [dbId, setDbId] = useState<any>();
@@ -71,13 +72,13 @@ function TableContent(props: any) {
             <div styleName="table-content">
                 <Tabs
                     // defaultActiveKey={`${ma}`}
-                    activeKey={matchedPath ? matchedPath[3] : TableInfoTabTypeEnum.BasicInfo}
+                    activeKey={matchedPath ? matchedPath[2] : TableInfoTabTypeEnum.BasicInfo}
                     onChange={(activeTab: string) => handleTabChange(activeTab)}
                 >
-                    <TabPane tab="基本信息" key={TableInfoTabTypeEnum.BasicInfo}>
+                    <TabPane tab={t`BasicInfo`} key={TableInfoTabTypeEnum.BasicInfo}>
                         {/* <BaseInfo tableInfo={tableInfo} /> */}
                     </TabPane>
-                    <TabPane tab="数据预览" key={TableInfoTabTypeEnum.DataPreview}>
+                    <TabPane tab={t`DataPreview`} key={TableInfoTabTypeEnum.DataPreview}>
                         {/* 12312 */}
                     </TabPane>
                     <TabPane tab="Schema" key={TableInfoTabTypeEnum.Schema}></TabPane>

frontend/src/routes/table-content/tabs/baseInfo.tsx

@@ -27,13 +27,14 @@ import { TableInfoResponse } from '../table.interface';
 import EventEmitter from '@src/utils/event-emitter';
 import { getShowTime } from '../../../utils/utils';
 import { Helper } from '@src/components/helper/helper';
+import { useTranslation } from 'react-i18next';
 const layout = {
     labelCol: { span: 6 },
     wrapperCol: { span: 18 },
 };
 
 function Table(props: any) {
-    console.log('Table', props)
+    const { t } = useTranslation()
     // const history = useHistory();
     const [tableInfo, setTableInfo] = useState<TableInfoResponse>({
         createTime: '',
@@ -64,13 +65,13 @@ function Table(props: any) {
     return (
         <div styleName="table-content-des">
             <Form {...layout} labelAlign="left">
-                <Form.Item label="表名称">{tableInfo.name}</Form.Item>
-                <Form.Item label="数据表描述信息">{tableInfo.describe ? tableInfo.describe : '-'}</Form.Item>
-                <Form.Item label="创建时间">{getShowTime(tableInfo.createTime)? getShowTime(tableInfo.createTime) : '-'}</Form.Item>
-                <Form.Item label="最近修改时间">
+                <Form.Item label={t`TableName`}>{tableInfo.name}</Form.Item>
+                <Form.Item label={t`TableDescription`}>{tableInfo.describe ? tableInfo.describe : '-'}</Form.Item>
+                <Form.Item label={t`CreateTime`}>{getShowTime(tableInfo.createTime)? getShowTime(tableInfo.createTime) : '-'}</Form.Item>
+                <Form.Item label={t`UpdateTime`}>
                     {getShowTime(tableInfo.updateTime)}
                     {tableInfo.updateTime ? (
-                        <Helper title="记录该表最近发生表结构变更的时间" className={styles['table-content-tips']} />
+                        <Helper title={t`UpdateTimeHelper`} className={styles['table-content-tips']} />
                     ) : (
                         '-'
                     )}

frontend/src/routes/tree/index.tsx

@@ -28,12 +28,14 @@ import { ContentRouteKeyEnum } from './tree.data';
 import CreateMenu from './create-menu/index';
 import styles from './tree.module.less';
 import EventEmitter from '@src/utils/event-emitter';
+import { useTranslation } from 'react-i18next';
 // import { LoadingWrapper } from '@src/components/loadingwrapper/loadingwrapper';
 const initTreeDate: DataNode[] = [];
 export function MetaBaseTree(props: any) {
     const [treeData, setTreeData] = useState(initTreeDate);
     const [loading, setLoading] = useState(true);
     const history = useHistory();
+    const { t } = useTranslation()
     useEffect(() => {
         initTreeData();
         EventEmitter.on('refreshData', initTreeData);
@@ -125,7 +127,7 @@ export function MetaBaseTree(props: any) {
         <div className={styles['palo-tree-container']}>
             <h2 className={styles['palo-tree-title']}>
                 <HomeOutlined onClick={goHome} />
-                数据目录树
+                { t`DataTree` }
             </h2>
             {/* <LoadingWrapper loading={loading}> */}
             <div className={styles['palo-tree-wrapper']}>