dm/ui: finish main features of web ui (pingcap#4109)

ref pingcap#3583

.gitignore

@@ -59,6 +59,9 @@ dumped_data/*
 *-coverage.xml
 *-junit-report.xml
 dm/ui/dist
+dm/ui/src/routes.tsx
+dm/ui/src/mock.ts
+dm/ui/stats.html
 
 # npm dependencies
 node_modules

dm/ui/.eslintrc.js

@@ -1,5 +1,6 @@
 module.exports = {
   extends: ['@ti-fe/eslint-config'],
+  ignorePatterns: ['src/routes.tsx'],
   env: {
     // Your custom env variables, e.g., browser: true, jest: true
   },

dm/ui/README.md

@@ -1,7 +1,9 @@
-## DM Web UI
+# DM Web UI
 
 Web UI for TiDB Data Migration Platform, built with TypeScript and React.
 
+## Development
+
 To start to develop it you will need Nodejs environment ready and yarn installed as package manager, following scripts will help you to get started:
 
 ```bash
@@ -16,3 +18,18 @@ yarn build
 ```
 
 See `package.json` for more scripts.
+
+By default, it talks to local DM Server through `http://localhost:8261/api/v1/...`, so you will need to have it running in your machine first.
+
+Make sure you have Golang installed since we'll need to build the server binaries from source, at the root of this project, run `make dm-worker` and `make dm-master` to get them.
+
+Create conf file for them, there are plenty of examples in `dm/tests/openapi/conf` directory. The `openapi` option is still experimental and is off by default so make sure you set it to true.
+
+Then run master and worker with configs you just created respectively. For example:
+
+```bash
+./bin/dm-master -config path/to/conf.yaml
+./bin/dm-worker -config path/to/conf.yaml
+```
+
+Now you can start the front-end development server with `yarn start`!.

dm/ui/locales/en.json

@@ -1,13 +1,29 @@
 {
   "add": "Add",
+  "add event filter": "Add event filter",
+  "add migrate rule": "Add migration rule",
   "add new source": "Add new source",
+  "add source config": "Add source config",
+  "address": "address",
+  "are you sure to offline this master": "Are you sure to offline this master",
+  "are you sure to offline this worker": "Are you sure to offline this worker",
   "basic info": "Basics",
+  "binlog": "binlog",
   "binlog location": "binlog location",
   "binlog name": "binlog name",
   "binlog name or gtid": "binlog name or GTID",
+  "bound stage": "bound stage",
   "cancel": "Cancel",
   "cluster management": "Cluster",
-  "confirm to delete": "Confirm to delete ",
+  "collecting import results": "Collecting import results",
+  "confirm to delete source": "Confirm to delete source",
+  "confirm to delete task?": "Confirm to delete task?",
+  "confirm to pause task?": "Confirm to pause task?",
+  "confirm to resume task?": "Confirm to resume task?",
+  "consistency requirement": "Consistency requirement",
+  "create": "Create",
+  "data dir": "Data dir",
+  "database": "Database",
   "delete": "Delete",
   "deleted": "Deleted!",
   "deleting": "Deleting...",
@@ -17,32 +33,90 @@
   "enable gtid": "Enable GTID",
   "enable relay": "Enable relay",
   "enabled": "Enabled",
+  "event filter": "Event filter",
+  "event filter ignore event": "Ignore event",
+  "event filter ignore sql": "Ignore SQL",
+  "event filter name": "Name",
+  "event filter name is required": "Event filter name is required",
+  "event filter name should be unique": "Event filter name should be unique",
   "export": "Export",
+  "export concurrency": "Export concurrency",
+  "full migrate config": "Full replication config",
+  "gtid": "gtid",
   "host": "Host",
+  "host bad format": "Host has bad format",
   "host is required": "Host is required",
   "import": "Import",
+  "import all task config of dm cluster to web ui": "Import all task config of dm cluster to Web UI",
+  "import concurrency": "Import concurrency",
+  "import failed": "Import failed",
+  "import finished with {{success_count}} success and {{fail_count}} failures": "Import finished with {{success_count}} success and {{fail_count}} failures",
+  "import runtime task config": "Import runtime task configs",
+  "import task config": "Import task config",
+  "incremental migrate config": "Incremental replication config",
   "ip": "IP",
+  "is leader": "Leader",
   "member list": "Members",
+  "meta db": "Meta db",
+  "migrate rules": "Migration rules",
   "migration": "Migration",
   "name": "Name",
+  "next": "Next",
+  "offline": "offline",
+  "on duplicate behavior": "On duplicate behavior",
+  "online schema change": "Online Schema Change",
   "operations": "Operations",
-  "passowrd is required": "Passowrd is required",
+  "overwrite exist task config": "Overwrite existing task config",
   "password": "Password",
+  "password is required": "Password is required",
+  "pause": "Pause",
+  "please check the log": "Please check the log",
   "port": "Port",
   "port is required": "Port is required",
+  "previous": "Previous",
+  "processing imports": "Processing imports",
+  "reading task list": "Reading task list",
+  "refresh": "Refresh",
   "relay config (optional)": "Relay log (optional)",
   "relay log": "Relay Log",
+  "request success": "Request success",
+  "requesting": "Requesting",
+  "resume": "Resume",
   "save": "Save",
   "saved": "Saved!",
   "saving": "Saving...",
   "search placeholder": "Search...",
+  "somthing went wrong with the server": "Somthing went wrong with the server",
+  "source": "Source",
+  "source info": "Source info",
   "source list": "Source",
   "source name": "Source name",
   "source name is required": "Source name is required",
+  "start import": "Start import",
+  "status": "Status",
+  "sync config": "Replication config",
   "sync detail": "Sync Detail",
+  "synchronous concurrency": "Sync concurrency",
+  "table": "Table",
+  "target": "Target",
+  "target info": "Target info",
   "task config": "Task Config",
+  "task detail": "task detail",
   "task list": "Task",
+  "task mode": "Mode",
+  "task name": "Name",
+  "task name is required": "Task name is required",
+  "task shard mode": "Shard mode",
   "tls config (optional)": "TLS (optional)",
+  "transaction batch": "Transaction batch",
+  "type": "Type",
   "user name": "User",
-  "user name is required": "User name is required"
+  "user name is required": "User name is required",
+  "view": "View",
+  "{{count}} filters": "{{count}} filter",
+  "{{count}} filters_plural": "{{count}} filters",
+  "{{count}} rules": "{{count}} rule",
+  "{{count}} rules_plural": "{{count}} rules",
+  "{{val}} and other {{count}}": "{{val}}",
+  "{{val}} and other {{count}}_plural": "{{val}} and {{count}} others"
 }

dm/ui/locales/zh.json

@@ -1,13 +1,29 @@
 {
   "add": "添加",
+  "add event filter": "添加过滤器",
+  "add migrate rule": "添加同步规则",
   "add new source": "添加上游",
+  "add source config": "添加上游配置",
+  "address": "地址",
+  "are you sure to offline this master": "确定要下线此主节点吗？",
+  "are you sure to offline this worker": "确定要下线此从节点吗？",
   "basic info": "基本信息",
+  "binlog": "binlog",
   "binlog location": "binlog 位置",
   "binlog name": "binlog 名称",
   "binlog name or gtid": "binlog 名称或 GTID",
+  "bound stage": "bound stage",
   "cancel": "取消",
   "cluster management": "集群管理",
-  "confirm to delete": "确认删除 ",
+  "collecting import results": "汇总收集导入结果",
+  "confirm to delete source": "确认删除上游",
+  "confirm to delete task?": "确认删除任务？",
+  "confirm to pause task?": "确认暂停任务？",
+  "confirm to resume task?": "确认恢复任务？",
+  "consistency requirement": "一致性要求",
+  "create": "创建",
+  "data dir": "数据存储路径",
+  "database": "数据库",
   "delete": "删除",
   "deleted": "已删除",
   "deleting": "删除中...",
@@ -17,32 +33,87 @@
   "enable gtid": "启用 GTID",
   "enable relay": "启用 Relay log",
   "enabled": "已启用",
+  "event filter": "事件过滤",
+  "event filter ignore event": "忽略事件",
+  "event filter ignore sql": "忽略 SQL",
+  "event filter name": "过滤器名称",
+  "event filter name is required": "过滤器名称不能为空",
+  "event filter name should be unique": "过滤器名称必须唯一",
   "export": "导出",
+  "export concurrency": "导出并发数",
+  "full migrate config": "全量同步配置",
+  "gtid": "GTID",
   "host": "IP",
+  "host bad format": "IP 格式不正确",
   "host is required": "IP 不能为空",
   "import": "导入",
+  "import all task config of dm cluster to web ui": "导入集群所有任务配置到 Web 平台",
+  "import concurrency": "导入并发数",
+  "import failed": "导入失败",
+  "import finished with {{success_count}} success and {{fail_count}} failures": "导入完成，成功 {{success_count}} 条，失败 {{fail_count}} 条",
+  "import runtime task config": "导入运行时任务配置",
+  "import task config": "导入任务配置",
+  "incremental migrate config": "增量同步配置",
   "ip": "IP",
+  "is leader": "是否主节点",
   "member list": "成员列表",
+  "meta db": "Meta 数据库",
+  "migrate rules": "同步规则",
   "migration": "数据迁移",
   "name": "名称",
+  "next": "下一步",
+  "offline": "下线",
+  "on duplicate behavior": "冲突数据行为",
+  "online schema change": "Online Schema Change",
   "operations": "操作",
-  "passowrd is required": "密码不能为空",
+  "overwrite exist task config": "覆盖已存在的任务配置",
   "password": "密码",
+  "password is required": "密码不能为空",
+  "pause": "暂停",
+  "please check the log": "请查看日志",
   "port": "端口",
   "port is required": "端口不能为空",
+  "previous": "上一步",
+  "processing imports": "正在导入中",
+  "reading task list": "读取任务列表",
+  "refresh": "刷新",
   "relay config (optional)": "Relay 配置 (可选)",
   "relay log": "Relay 日志",
+  "request success": "请求成功",
+  "requesting": "请求中",
+  "resume": "恢复",
   "save": "保存",
   "saved": "已保存",
   "saving": "保存中...",
   "search placeholder": "搜索",
+  "somthing went wrong with the server": "服务器开小差了",
+  "source": "上游",
+  "source info": "上游信息",
   "source list": "上游配置",
   "source name": "名称",
   "source name is required": "名称不能为空",
+  "start import": "开始导入",
+  "status": "状态",
+  "sync config": "同步配置",
   "sync detail": "同步详情",
+  "synchronous concurrency": "同步并发数",
+  "table": "表",
+  "target": "下游",
+  "target info": "下游信息",
   "task config": "任务配置",
+  "task detail": "任务详情",
   "task list": "任务列表",
+  "task mode": "任务模式",
+  "task name": "任务名称",
+  "task name is required": "任务名称不能为空",
+  "task shard mode": "协调模式",
   "tls config (optional)": "TLS 配置 (可选)",
+  "transaction batch": "事物批次",
+  "type": "类型",
   "user name": "用户名",
-  "user name is required": "用户名不能为空"
+  "user name is required": "用户名不能为空",
+  "view": "查看",
+  "{{count}} filters_0": "{{count}} 条",
+  "{{count}} rules_0": "{{count}} 条",
+  "{{val}} and other {{count}}_0": "{{val}} 等 {{count}} 个"
 }

dm/ui/package.json

@@ -3,56 +3,67 @@
   "version": "0.1.0",
   "scripts": {
     "start": "vite",
+    "start:mock": "vite --mode=mock",
     "build": "vite build",
-    "type-check": "tsc --noEmit",
+    "type-check": "vite optimize --force && tsc --noEmit",
     "serve": "vite preview",
     "fmt": "prettier src --write",
     "lint": "eslint --ext .tsx,.ts src/",
     "prepare": "is-ci || cd ../../ && husky install dm/ui/.husky"
   },
   "dependencies": {
     "@ant-design/icons": "^4.7.0",
-    "@reduxjs/toolkit": "^1.6.2",
-    "ahooks": "^2.10.12",
-    "antd": "^4.17.2",
+    "@reduxjs/toolkit": "^1.7.0",
+    "ahooks": "^3.0.1",
+    "antd": "^4.17.3",
     "clsx": "^1.1.1",
-    "i18next": "^21.5.3",
+    "fuse.js": "^6.5.3",
+    "i18next": "^21.6.0",
     "i18next-browser-languagedetector": "^6.1.2",
     "lodash": "^4.17.21",
+    "rc-queue-anim": "^2.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-i18next": "^11.14.3",
+    "react-i18next": "^11.15.1",
     "react-redux": "^7.2.6",
-    "react-router-dom": "^6.0.2",
+    "react-router-dom": "^6.1.1",
+    "react-syntax-highlighter": "^15.4.5",
     "reset-css": "^5.0.1"
   },
   "devDependencies": {
+    "@faker-js/faker": "^5.5.3",
     "@ti-fe/cli": "^0.13.0",
     "@ti-fe/eslint-config": "^0.3.1",
     "@ti-fe/prettier-config": "^1.0.3",
-    "@types/lodash": "^4.14.177",
-    "@types/node": "^16.11.7",
-    "@types/react": "^17.0.34",
+    "@types/lodash": "^4.14.178",
+    "@types/node": "^16.11.12",
+    "@types/react": "^17.0.37",
     "@types/react-dom": "^17.0.11",
-    "@types/redux-logger": "^3.0.9",
-    "@typescript-eslint/eslint-plugin": "^5.3.1",
-    "@typescript-eslint/parser": "^5.3.1",
-    "@vitejs/plugin-react-refresh": "^1.3.6",
-    "eslint": "^8.2.0",
+    "@types/react-syntax-highlighter": "^13.5.2",
+    "@typescript-eslint/eslint-plugin": "^5.7.0",
+    "@typescript-eslint/parser": "^5.7.0",
+    "@vitejs/plugin-react": "^1.1.3",
+    "eslint": "^8.4.1",
     "husky": "^7.0.4",
     "i18next-scanner": "^3.1.0",
     "is-ci": "^3.0.1",
     "less": "^4.1.2",
-    "lint-staged": "^12.0.1",
-    "prettier": "^2.4.1",
-    "redux-logger": "^3.0.6",
-    "typescript": "4.3.5",
-    "vite": "^2.6.14",
+    "lint-staged": "^12.1.2",
+    "msw": "^0.36.3",
+    "msw-auto-mock": "^0.5.0",
+    "prettier": "^2.5.1",
+    "rollup-plugin-visualizer": "^5.5.2",
+    "typescript": "4.5.4",
+    "vite": "^2.7.10",
     "vite-plugin-i18next-scanner": "^0.4.0",
-    "vite-plugin-imp": "^2.0.10",
-    "vite-plugin-windicss": "^1.5.1",
+    "vite-plugin-imp": "^2.0.11",
+    "vite-plugin-next-react-router": "^0.6.1",
+    "vite-plugin-windicss": "^1.5.4",
     "vite-tsconfig-paths": "^3.3.17",
-    "windicss": "^3.2.1"
+    "windicss": "^3.3.0"
   },
-  "license": "Apache-2.0"
+  "license": "Apache-2.0",
+  "msw": {
+    "workerDirectory": "public"
+  }
 }