Dm portal speical week and i18n (#480)

dm/portal/dm-fe/README.md → dm/portal/frontend/README.md

@@ -11,7 +11,7 @@ in the repo root folder:
 
 ### Run dm-fe
 
-in the repo `dm-portal/dm-fe` folder:
+in the repo `dm/dm/portal/frontend` folder:
 
 1. `yarn install`
 1. `yarn start`

dm/portal/dm-fe/package.json → dm/portal/frontend/package.json

@@ -18,6 +18,7 @@
     "react-app-rewired": "^2.1.3",
     "react-dom": "^16.8.6",
     "react-hot-loader": "^4.11.1",
+    "react-intl": "^3.12.0",
     "react-scripts": "3.0.1",
     "styled-components": "^4.3.2",
     "typescript": "3.5.2"

dm/portal/dm-fe/src/App.tsx → dm/portal/frontend/src/App.tsx

@@ -1,4 +1,5 @@
 import React, { useState, createContext } from 'react'
+
 import StartStep from './components/StartStep'
 import NamingStep from './components/NamingStep'
 import InstancesStep from './components/InstancesStep'
@@ -114,4 +115,4 @@ function App() {
   )
 }
 
-export default (process.env.NODE_ENV === 'development' ? hot(App) : App)
+export default process.env.NODE_ENV === 'development' ? hot(App) : App

dm/portal/dm-fe/src/components/BinlogFilterModal.tsx → dm/portal/frontend/src/components/BinlogFilterModal.tsx

@@ -1,7 +1,8 @@
 import React, { useState } from 'react'
 import { Modal, Tree } from 'antd'
-import { IFullSchema, IFullTable } from '../types'
 import styled from 'styled-components'
+import { FormattedMessage, useIntl } from 'react-intl'
+import { IFullSchema, IFullTable } from '../types'
 import { ALL_DML, DDL_FOR_SCHEMA, DDL_FOR_TABLE } from '../utils/config-util'
 const { TreeNode } = Tree
 
@@ -23,6 +24,7 @@ function BinlogFilterModal({
   targetItem,
   onUpdateItem
 }: Props) {
+  const intl = useIntl()
   const forTable = (targetItem as IFullTable).type === 'table'
   const [checkedKeys, setCheckedKeys] = useState<string[]>(targetItem.filters)
   const [filtersChanged, setFiltersChanged] = useState(false)
@@ -46,15 +48,18 @@ function BinlogFilterModal({
 
   return (
     <Modal
-      title={`Binlog 过滤 (${targetItem.key})`}
+      title={intl.formatMessage(
+        { id: 'binlog_filter' },
+        { target: targetItem.key }
+      )}
       visible={modalVisible}
       onCancel={onCancel}
       onOk={onOk}
       okButtonProps={{ disabled: !filtersChanged }}
     >
       {!forTable && (
         <WaringText>
-          注意：修改库的过滤规则会重置所有此库的上游表的过滤规则
+          <FormattedMessage id="binlog_modify_warning" />
         </WaringText>
       )}
       <Tree

dm/portal/dm-fe/src/components/InstancesStep.tsx → dm/portal/frontend/src/components/InstancesStep.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useContext } from 'react'
 import styled from 'styled-components'
 import { Form, Input, Icon, Button, Divider, message } from 'antd'
+import { FormattedMessage, useIntl } from 'react-intl'
 import {
   IPageAction,
   ITargetInstance,
@@ -70,6 +71,7 @@ type DatabaseConfigProps = {
 }
 
 function DatabaseConfig({ dbConfig, onData }: DatabaseConfigProps) {
+  const intl = useIntl()
   const edit = useContext(EditContext)
 
   const [config, setConfig] = useState<IDatabase>(dbConfig)
@@ -100,7 +102,7 @@ function DatabaseConfig({ dbConfig, onData }: DatabaseConfigProps) {
           onChange={changeHandler}
         />
       </Form.Item>
-      <Form.Item label="端口:">
+      <Form.Item label={intl.formatMessage({ id: 'port' })}>
         <Input
           disabled={edit}
           placeholder="3306"
@@ -109,7 +111,7 @@ function DatabaseConfig({ dbConfig, onData }: DatabaseConfigProps) {
           onChange={changeHandler}
         />
       </Form.Item>
-      <Form.Item label="用户名:">
+      <Form.Item label={intl.formatMessage({ id: 'user' })}>
         <Input
           disabled={edit}
           placeholder="root"
@@ -118,7 +120,7 @@ function DatabaseConfig({ dbConfig, onData }: DatabaseConfigProps) {
           onChange={changeHandler}
         />
       </Form.Item>
-      <Form.Item label="密码:">
+      <Form.Item label={intl.formatMessage({ id: 'pwd' })}>
         <Input
           disabled={edit}
           placeholder="pwd"
@@ -268,6 +270,7 @@ function InstancesStep({
   showBinlog,
   onFetchSourceConfig
 }: InstancesStepProps) {
+  const intl = useIntl()
   const edit = useContext(EditContext)
 
   const [targetInstance, setTargetInstance] = useState<ITargetInstance>(
@@ -336,7 +339,12 @@ function InstancesStep({
     setLoading(true)
     const res = await checkTargetInstance(targetInstance)
     if (res.err) {
-      message.error(`验证下游实例失败！${res.err.message}`)
+      message.error(
+        intl.formatMessage(
+          { id: 'downstream_fail' },
+          { errMsg: res.err.message }
+        )
+      )
       setLoading(false)
       return
     }
@@ -348,7 +356,10 @@ function InstancesStep({
       const res = await checkSourceInstance(instance)
       if (res.err) {
         message.error(
-          `验证上游实例 ${instance.sourceId} 失败！${res.err.message}`
+          intl.formatMessage(
+            { id: 'upstream_fail' },
+            { sourceId: instance.sourceId, errMsg: res.err.message }
+          )
         )
         setLoading(false)
         return
@@ -368,7 +379,9 @@ function InstancesStep({
   return (
     <Container>
       <Form className="config-instances-form">
-        <h2>上游实例</h2>
+        <h2>
+          <FormattedMessage id="upstream" />
+        </h2>
         {sourceInstances.map(item => (
           <SourceInstanceItem
             key={item.uuid}
@@ -382,14 +395,17 @@ function InstancesStep({
         {!edit && (
           <div className="add-button">
             <Button type="dashed" onClick={addSourceInstance}>
-              <Icon type="plus" /> 添加
+              <Icon type="plus" />
+              <FormattedMessage id="add" />
             </Button>
           </div>
         )}
 
         <Divider />
 
-        <h2>下游实例</h2>
+        <h2>
+          <FormattedMessage id="downstream" />
+        </h2>
         <div className="instance-item">
           <DatabaseConfig
             dbConfig={targetInstance}
@@ -398,14 +414,16 @@ function InstancesStep({
         </div>
 
         <div className="action-buttons">
-          <Button onClick={() => onPrev()}>上一步</Button>
+          <Button onClick={() => onPrev()}>
+            <FormattedMessage id="pre" />
+          </Button>
           <Button
             type="primary"
             htmlType="submit"
             onClick={handleSubmit}
             loading={loading}
           >
-            下一步
+            <FormattedMessage id="next" />
           </Button>
         </div>
       </Form>

dm/portal/frontend/src/components/Layout.tsx

@@ -0,0 +1,43 @@
+import React, { useState } from 'react'
+import { Radio } from 'antd'
+import styled from 'styled-components'
+
+import { IntlProvider } from 'react-intl'
+import getMessages from '../locales'
+
+const Container = styled.div`
+  padding-top: 60px;
+
+  .change-locale {
+    position: fixed;
+    right: 12px;
+    top: 12px;
+  }
+`
+
+const DmLayout: React.FC = ({ children }) => {
+  const [locale, setLocale] = useState('en')
+
+  return (
+    <Container>
+      <div className="change-locale">
+        <Radio.Group
+          value={locale}
+          onChange={(e: any) => setLocale(e.target.value)}
+        >
+          <Radio.Button key="en" value={'en'}>
+            English
+          </Radio.Button>
+          <Radio.Button key="zh" value={'zh'}>
+            中文
+          </Radio.Button>
+        </Radio.Group>
+      </div>
+      <IntlProvider locale={locale} messages={getMessages(locale)}>
+        {children}
+      </IntlProvider>
+    </Container>
+  )
+}
+
+export default DmLayout