Skip to content
Permalink
Browse files
[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>
  • Loading branch information
wangyf0555 and wangyf0555 committed Apr 1, 2022
1 parent cba05d4 commit 5dcc31755bcb3ab3150f53ff8cb563f9ae51a34f
Showing 7 changed files with 89 additions and 32 deletions.
@@ -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"
}
@@ -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": "记录该表最近发生表结构变更的时间"
}

@@ -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>
@@ -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 />
@@ -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>
@@ -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']} />
) : (
'-'
)}
@@ -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']}>

0 comments on commit 5dcc317

Please sign in to comment.