dm(ui): support start/pause/resume/delete task

dm/ui/locales/en.json

@@ -5,6 +5,7 @@
   "add new source": "Add new source",
   "add source config": "Add source config",
   "address": "address",
+  "are you sure to delete task {{name}}": "Are you sure to delete task \"{{name}}\"?",
   "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",
@@ -33,6 +34,7 @@
   "enable gtid": "Enable GTID",
   "enable relay": "Enable relay",
   "enabled": "Enabled",
+  "error": "Error",
   "event filter": "Event filter",
   "event filter ignore event": "Ignore event",
   "event filter ignore sql": "Ignore SQL",
@@ -71,14 +73,15 @@
   "password is required": "Password is required",
   "pause": "Pause",
   "please check the log": "Please check the log",
+  "please select at least one task": "Please select at least one task",
   "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",
+  "replication detail": "Replication Detail",
   "request success": "Request success",
   "requesting": "Requesting",
   "resume": "Resume",
@@ -93,9 +96,10 @@
   "source name": "Source name",
   "source name is required": "Source name is required",
   "start import": "Start import",
+  "start task": "Start",
+  "start task and remove meta data": "Remove meta and tart task",
   "status": "Status",
   "sync config": "Replication config",
-  "sync detail": "Sync Detail",
   "synchronous concurrency": "Sync concurrency",
   "table": "Table",
   "target": "Target",
@@ -113,10 +117,6 @@
   "user name": "User",
   "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"
+  "{{val}} and {{count}} others": "{{val}} and {{count}} in total",
+  "{{val}} and {{count}} others_plural": "{{val}} and {{count}} in total"
 }

dm/ui/locales/zh.json

@@ -5,6 +5,7 @@
   "add new source": "添加上游",
   "add source config": "添加上游配置",
   "address": "地址",
+  "are you sure to delete task {{name}}": "确定要删除任务 \"{{name}}\" 吗?",
   "are you sure to offline this master": "确定要下线此主节点吗？",
   "are you sure to offline this worker": "确定要下线此从节点吗？",
   "basic info": "基本信息",
@@ -33,6 +34,7 @@
   "enable gtid": "启用 GTID",
   "enable relay": "启用 Relay log",
   "enabled": "已启用",
+  "error": "错误",
   "event filter": "事件过滤",
   "event filter ignore event": "忽略事件",
   "event filter ignore sql": "忽略 SQL",
@@ -71,14 +73,15 @@
   "password is required": "密码不能为空",
   "pause": "暂停",
   "please check the log": "请查看日志",
+  "please select at least one task": "请选择至少一个任务",
   "port": "端口",
   "port is required": "端口不能为空",
   "previous": "上一步",
   "processing imports": "正在导入中",
   "reading task list": "读取任务列表",
   "refresh": "刷新",
   "relay config (optional)": "Relay 配置 (可选)",
-  "relay log": "Relay 日志",
+  "replication detail": "同步详情",
   "request success": "请求成功",
   "requesting": "请求中",
   "resume": "恢复",
@@ -93,9 +96,10 @@
   "source name": "名称",
   "source name is required": "名称不能为空",
   "start import": "开始导入",
+  "start task": "启动任务",
+  "start task and remove meta data": "清理元数据启动",
   "status": "状态",
   "sync config": "同步配置",
-  "sync detail": "同步详情",
   "synchronous concurrency": "同步并发数",
   "table": "表",
   "target": "下游",
@@ -113,7 +117,6 @@
   "user name": "用户名",
   "user name is required": "用户名不能为空",
   "view": "查看",
-  "{{count}} filters_0": "{{count}} 条",
-  "{{count}} rules_0": "{{count}} 条",
-  "{{val}} and other {{count}}_0": "{{val}} 等 {{count}} 个"
+  "{{val}} and {{count}} others": "{{val}} 等总计 {{count}} 个",
+  "{{val}} and {{count}} others_plural": "{{val}} 等总计 {{count}} 个"
 }

dm/ui/package.json

@@ -50,7 +50,7 @@
     "less": "^4.1.2",
     "lint-staged": "^12.1.2",
     "msw": "^0.36.3",
-    "msw-auto-mock": "^0.5.0",
+    "msw-auto-mock": "^0.5.2",
     "prettier": "^2.5.1",
     "rollup-plugin-visualizer": "^5.5.2",
     "typescript": "4.5.4",

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

@@ -24,7 +24,7 @@ const BlinkingText: React.FC<{ text: string; active: boolean }> = ({
 
   useEffect(() => {
     if (active) {
-      timer.current = window.setInterval(() => setCount(c => c + 1), 300)
+      timer.current = window.setInterval(() => setCount(c => (c + 1) % 4), 300)
     }
     return () => {
       if (timer.current) {
@@ -49,7 +49,7 @@ const BatchImportTaskConfig: React.FC = () => {
   const [overwrite, setOverwrite] = useState(false)
   const [batchImportTaskConfig] = useDmapiBatchImportTaskConfigMutation()
   const timerId = useRef<number>()
-  const stopTimer = useRef<boolean>(false)
+  const stopTimer = useRef(false)
 
   const calcStepStatus = (thisStep: number): Pick<StepProps, 'status'> => {
     if (currentStep === thisStep) {

dm/ui/src/components/CreateTaskConfig/MigrateRule.tsx

@@ -21,12 +21,13 @@ const itemLayout = {
   wrapperCol: { span: 18 },
 }
 
-const createPattern = (name: string[]) => name.join('|')
+const createPattern = (name: string[]) =>
+  name.length === 0 ? '*' : name.join('|')
 
 const MigrateRule: StepCompnent = ({ prev, initialValues }) => {
   const [t] = useTranslation()
   const [currentSource, setCurrentSource] = useState('')
-  const [cascaderValue, setCascaderValue] = useState<string[]>([])
+  const [cascaderValue, setCascaderValue] = useState<string[][]>([])
   const [form] = Form.useForm()
   const { data } = useDmapiGetSourceListQuery({ withStatus: false })
   const [getSourceTable] = useDmapiGetSourceTableListMutation()
@@ -59,6 +60,28 @@ const MigrateRule: StepCompnent = ({ prev, initialValues }) => {
     setCascaderOptions([...cascaderOptions])
   }
 
+  const handelSchemaSelectInCascader = (value: string[][], field: any) => {
+    setCascaderValue(value)
+    const dbPattern = createPattern([
+      ...new Set(value.map((item: string[]) => item[0])),
+    ] as string[])
+    const tablePattern = createPattern([
+      ...new Set(value.map((item: string[]) => item[1]).filter(Boolean)),
+    ] as string[])
+    const newData = [...form.getFieldValue('table_migrate_rule')]
+    newData[field.key] = {
+      ...newData[field.key],
+      source: {
+        ...newData[field.key].source,
+        schema: dbPattern,
+        table: tablePattern,
+      },
+    }
+    form.setFieldsValue({
+      table_migrate_rule: newData,
+    })
+  }
+
   useEffect(() => {
     if (schemas) {
       setCascaderOptions(
@@ -124,35 +147,9 @@ const MigrateRule: StepCompnent = ({ prev, initialValues }) => {
                               multiple
                               maxTagCount="responsive"
                               value={cascaderValue}
-                              onChange={(value: any) => {
-                                setCascaderValue(value)
-                                const dbPattern = createPattern([
-                                  ...new Set(
-                                    value.map((item: string[]) => item[0])
-                                  ),
-                                ] as string[])
-                                const tablePattern = createPattern([
-                                  ...new Set(
-                                    value
-                                      .map((item: string[]) => item[1])
-                                      .filter(Boolean)
-                                  ),
-                                ] as string[])
-                                const newData = [
-                                  ...form.getFieldValue('table_migrate_rule'),
-                                ]
-                                newData[field.key] = {
-                                  ...newData[field.key],
-                                  source: {
-                                    ...newData[field.key].source,
-                                    schema: dbPattern,
-                                    table: tablePattern,
-                                  },
-                                }
-                                form.setFieldsValue({
-                                  table_migrate_rule: newData,
-                                })
-                              }}
+                              onChange={(val: any) =>
+                                handelSchemaSelectInCascader(val, field)
+                              }
                             >
                               {isFetching ? (
                                 <LoadingOutlined />

dm/ui/src/components/CreateTaskConfig/TargetInfo.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { Form, Input, Button } from '~/uikit'
+import { Form, Input, Button, InputNumber } from '~/uikit'
 import { StepCompnent } from '~/components/CreateTaskConfig/shared'
 
 const IPv4Pattern =
@@ -38,7 +38,7 @@ const TargetInfo: StepCompnent = ({ prev, initialValues }) => {
             name={['target_config', 'port']}
             rules={[{ required: true, message: t('port is required') }]}
           >
-            <Input placeholder="3306" />
+            <InputNumber min={1} max={65535} />
           </Form.Item>
 
           <Form.Item
@@ -55,17 +55,7 @@ const TargetInfo: StepCompnent = ({ prev, initialValues }) => {
             <Input placeholder="root" />
           </Form.Item>
 
-          <Form.Item
-            label={t('password')}
-            name={['target_config', 'password']}
-            rules={[
-              {
-                required: true,
-                whitespace: true,
-                message: t('password is required'),
-              },
-            ]}
-          >
+          <Form.Item label={t('password')} name={['target_config', 'password']}>
             <Input type="password" />
           </Form.Item>
         </div>

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

@@ -1,7 +1,7 @@
-import React, { useState, useCallback } from 'react'
+import React, { useState, useCallback, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { merge } from 'lodash'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate, useLocation } from 'react-router-dom'
 
 import { Card, Form, Steps, message } from '~/uikit'
 import {
@@ -15,7 +15,10 @@ import SourceInfo from '~/components/CreateTaskConfig/SourceInfo'
 import TargetInfo from '~/components/CreateTaskConfig/TargetInfo'
 import EventFilters from '~/components/CreateTaskConfig/EventFilter'
 import MigrateRule from '~/components/CreateTaskConfig/MigrateRule'
-import { useDmapiCreateTaskConfigMutation } from '~/models/taskConfig'
+import {
+  useDmapiCreateTaskConfigMutation,
+  useDmapiGetTaskConfigQuery,
+} from '~/models/taskConfig'
 
 const { Step } = Steps
 
@@ -48,10 +51,16 @@ const stepComponents = [
 const CreateTaskConfig: React.FC = () => {
   const [t] = useTranslation()
   const navigate = useNavigate()
+  const loc = useLocation()
+  const shouldFetch = loc.hash.startsWith('#edit')
+  const [loading, setLoading] = useState(true)
   const [currentStep, setCurrentStep] = useState(0)
   const [taskData, setTaskData] = useState<TaskFormData>(defaultValue)
   const [createTaskConfig] = useDmapiCreateTaskConfigMutation()
-
+  const { data } = useDmapiGetTaskConfigQuery(
+    { taskName: loc.hash.split('-')[1] },
+    { skip: !shouldFetch }
+  )
   const goNextStep = useCallback(() => {
     setCurrentStep(c => c + 1)
   }, [])
@@ -94,8 +103,21 @@ const CreateTaskConfig: React.FC = () => {
     })
   }
 
+  useEffect(() => {
+    if (shouldFetch && data) {
+      setTaskData(
+        merge({}, defaultValue, data, {
+          binlog_filter_rule_array: Object.entries(
+            data?.binlog_filter_rule ?? {}
+          ).map(([name, value]) => ({ name, ...value })),
+        })
+      )
+      setLoading(false)
+    }
+  }, [shouldFetch, data])
+
   return (
-    <Card className="!m-4">
+    <Card className="!m-4" loading={shouldFetch && loading}>
       <Steps current={currentStep}>
         <Step title={t('basic info')} />
         <Step title={t('source info')} />