ui(dm): spec v3 updates (#5447)

ref #5442

.gitignore

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

dm/ui/locales/en.json

@@ -14,7 +14,6 @@
   "confirm": "Confirm",
   "confirm to delete source": "Confirm to delete source",
   "confirm to delete task?": "Confirm to delete task?",
-  "confirm to start task?": "Confirm to start task?",
   "confirm to stop task?": "Confirm to stop task?",
   "consistency requirement": "Consistency",
   "create task": "Create Task",
@@ -114,9 +113,12 @@
   "request success": "Request success",
   "requesting": "Requesting",
   "runtime config": "Runtime Config",
+  "safe mode time duration": "Safe-Mode Duration",
+  "safe mode time duration tooltip": "How long safe mode lasts after the task is started. This time is binlog time and not physical time. For a detailed description of Safe Mode and this configuration, please refer to the documentation",
   "save": "Save",
   "save and run": "Save and start",
   "search placeholder": "Search...",
+  "second": "Seconds",
   "source": "Source",
   "source detail": "Source Detail",
   "source form gtid tooltip": "It is recommended to replicate by GTID(except AWS Aurora), of course the upstream needs to configure GTID first",
@@ -132,6 +134,12 @@
   "source schema": "Source Database",
   "source table": "Source Table",
   "start": "Start",
+  "start task with params": "Start with params",
+  "start task with params desc": "The task will start according to the specified parameters, be sure to read the document about those parameters",
+  "start task without params": "Start",
+  "start task without params desc": "Tasks will continue to sync based on the checkpoint at the last end. If it is started for the first time, it will start at the specified location or time according to the configuration file",
+  "start time on copy": "Start time",
+  "start time on copy tooltip": "Synchronize all upstreams from the specified point in time, the saved location information (checkpoint) will be ignored",
   "status": "Status",
   "stop": "Stop",
   "stop_task list": "Stop",

dm/ui/locales/zh.json

@@ -14,7 +14,6 @@
   "confirm": "确认",
   "confirm to delete source": "确认删除上游",
   "confirm to delete task?": "确认删除任务？",
-  "confirm to start task?": "确认开始任务？",
   "confirm to stop task?": "确认停止任务？",
   "consistency requirement": "一致性要求",
   "create task": "创建任务",
@@ -114,9 +113,12 @@
   "request success": "请求成功",
   "requesting": "请求中",
   "runtime config": "运行配置",
+  "safe mode time duration": "Safe-Mode 持续时间",
+  "safe mode time duration tooltip": "定义任务启动后 safe mode 持续时长。此时间为 binlog 时间非物理时间。关于 safe mode 及此配置的详细说明，请参阅在线文档",
   "save": "保存",
   "save and run": "保存并运行",
   "search placeholder": "搜索",
+  "second": "秒",
   "source": "上游",
   "source detail": "上游详情",
   "source form gtid tooltip": "除 Aurora 外的 MySQL 上游建议启用，上游需先行配置 GTID",
@@ -132,6 +134,12 @@
   "source schema": "上游库",
   "source table": "上游表",
   "start": "开始",
+  "start task with params": "条件启动",
+  "start task with params desc": "任务将根据指定条件启动，请务必阅读参数说明",
+  "start task without params": "直接启动",
+  "start task without params desc": "任务将根据上次结束时的 checkpoint 继续同步。若第一次启动则根据配置文件指定位置或时间启动",
+  "start time on copy": "复制起始时间",
+  "start time on copy tooltip": "从指定时间点同步所有上游，已保存的同步位置信息（checkpoint）将被忽略",
   "status": "状态",
   "stop": "停用",
   "stop_task list": "停止",

dm/ui/package.json

@@ -3,7 +3,6 @@
   "version": "0.1.0",
   "scripts": {
     "start": "vite",
-    "start:mock": "vite --mode=mock",
     "build": "vite build",
     "type-check": "vite optimize --force && tsc --noEmit",
     "serve": "vite preview",
@@ -51,7 +50,7 @@
     "less": "^4.1.2",
     "lint-staged": "^12.1.2",
     "msw": "^0.36.3",
-    "msw-auto-mock": "^0.5.2",
+    "msw-auto-mock": "^0.6.0",
     "prettier": "^2.5.1",
     "rollup-plugin-visualizer": "^5.5.2",
     "typescript": "4.5.4",
@@ -66,5 +65,6 @@
   "license": "Apache-2.0",
   "msw": {
     "workerDirectory": "public"
-  }
+  },
+  "sideEffects": false
 }

dm/ui/public/mockServiceWorker.js

@@ -16,7 +16,7 @@ self.addEventListener('install', function () {
   return self.skipWaiting()
 })
 
-self.addEventListener('activate', async function () {
+self.addEventListener('activate', async function (event) {
   return self.clients.claim()
 })
 
@@ -332,7 +332,7 @@ function respondWithMock(clientMessage) {
 function uuidv4() {
   return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
     const r = (Math.random() * 16) | 0
-    const v = c === 'x' ? r : (r & 0x3) | 0x8
+    const v = c == 'x' ? r : (r & 0x3) | 0x8
     return v.toString(16)
   })
 }

dm/ui/src/components/CreateOrUpdateTask/index.tsx

@@ -106,11 +106,15 @@ const CreateTaskConfig: React.FC<{
     const key = 'createTask-' + Date.now()
     message.loading({ content: t('requesting'), key })
     try {
-      await handler({ task: payload as Task }).unwrap()
+      const data = await handler({ task: payload as Task }).unwrap()
       if (startAfterSaved) {
         await startTask({ taskName: payload.name }).unwrap()
       }
-      message.success({ content: t('request success'), key })
+      if (data.check_result) {
+        message.success({ content: data.check_result, key })
+      } else {
+        message.success({ content: t('request success'), key })
+      }
       navigate('/migration/task')
     } catch (e) {
       message.destroy(key)

dm/ui/src/layouts/SiderMenu.tsx

@@ -59,7 +59,6 @@ const SiderMenu: React.FC<{
 
   const items = useMemo(
     () => [
-      { itemKey: '/', text: 'Dashboard', icon: <DashboardOutlined /> },
       {
         itemKey: '/migration',
         text: t('migration'),

dm/ui/src/main.tsx

@@ -16,12 +16,4 @@ function mountApp() {
   )
 }
 
-if (import.meta.env.MODE === 'mock') {
-  // @ts-ignore
-  import('./mock').then(({ startWorker }) => {
-    startWorker()
-    mountApp()
-  })
-} else {
-  mountApp()
-}
+mountApp()