feat(api, utils, cluster): add data replication management (#105)

Author: Yuiham

apps/main/[3]cluster/[1]instances/[-2]_clusterId/Layout.tsx

@@ -27,6 +27,10 @@ const Layout: FC = ({ children }) => {
       { key: resolveRoute('alert', clusterId), tab: t('pages.alert') },
       { key: resolveRoute('params', clusterId), tab: t('pages.params') },
       { key: resolveRoute('backup', clusterId), tab: t('pages.backup') },
+      {
+        key: resolveRoute('replication', clusterId),
+        tab: t('pages.replication'),
+      },
     ],
     [clusterId, i18n.language]
   )

apps/main/[3]cluster/[1]instances/[-2]_clusterId/[6]replication/[-1]new/components/CreationPanel/index.tsx

@@ -0,0 +1,71 @@
+import { FC, useCallback } from 'react'
+import { useQueryClient } from 'react-query'
+import { loadI18n, useI18n } from '@i18n-macro'
+import { ClusterDataReplicationDownstreamType } from '@/api/model'
+import {
+  invalidateClusterDataReplicationList,
+  useCreateClusterDataReplication,
+} from '@/api/hooks/cluster'
+import { EditSumbitValues } from '../../../components/ReplicationEdit/helper'
+import EditBlock from '../../../components/ReplicationEdit/EditBlock'
+
+loadI18n()
+
+interface CreationPanelProps {
+  clusterId: string
+  back: () => void
+}
+
+const CreationPanel: FC<CreationPanelProps> = ({ clusterId, back }) => {
+  const { t, i18n } = useI18n()
+
+  const queryClient = useQueryClient()
+
+  const createDataReplication = useCreateClusterDataReplication()
+
+  const onFinish = useCallback(
+    async (fields: EditSumbitValues) => {
+      try {
+        await createDataReplication.mutateAsync({
+          payload: {
+            clusterId,
+            name: fields.name,
+            startTS: fields.tso,
+            rules: fields.filterRuleList?.filter((el) => el),
+            downstreamType: fields.downstreamType as any,
+            downstream: fields.downstream,
+          },
+          options: {
+            actionName: t('message.name'),
+          },
+        })
+
+        back()
+      } finally {
+        invalidateClusterDataReplicationList(queryClient)
+      }
+    },
+    [i18n.language, queryClient, createDataReplication, clusterId]
+  )
+
+  return (
+    <EditBlock
+      mode="new"
+      initialValues={{
+        tso: '0',
+        downstreamType: ClusterDataReplicationDownstreamType.tidb,
+        downstream: {
+          mysql: {
+            concurrentThreads: 16,
+          },
+          tidb: {
+            concurrentThreads: 16,
+          },
+        },
+      }}
+      onEditSubmit={onFinish}
+    />
+  )
+}
+
+export default CreationPanel

apps/main/[3]cluster/[1]instances/[-2]_clusterId/[6]replication/[-1]new/components/CreationPanel/translations/en.yaml

@@ -0,0 +1,2 @@
+message:
+  name: Create

apps/main/[3]cluster/[1]instances/[-2]_clusterId/[6]replication/[-1]new/components/CreationPanel/translations/zh.yaml

@@ -0,0 +1,2 @@
+message:
+  name: 创建

apps/main/[3]cluster/[1]instances/[-2]_clusterId/[6]replication/[-1]new/components/HeaderBar/index.tsx

@@ -0,0 +1,12 @@
+import { useI18n } from '@i18n-macro'
+import Header from '@/components/Header'
+
+interface HeaderBarProps {
+  back: () => void
+}
+
+export default function HeaderBar({ back }: HeaderBarProps) {
+  const { t } = useI18n()
+
+  return <Header onBack={back} title={t('header.title')} />
+}

apps/main/[3]cluster/[1]instances/[-2]_clusterId/[6]replication/[-1]new/index.tsx

@@ -0,0 +1,24 @@
+import { useCallback } from 'react'
+import { useHistory } from 'react-router-dom'
+import { resolveRoute } from '@pages-macro'
+import HeaderBar from './components/HeaderBar'
+import { useClusterContext } from '../../context'
+import CreationPanel from './components/CreationPanel'
+
+export default function () {
+  const history = useHistory()
+
+  const { info } = useClusterContext()
+
+  const back = useCallback(
+    () => history.push(resolveRoute('../', info!.clusterId!)),
+    [history]
+  )
+
+  return (
+    <>
+      <HeaderBar back={back} />
+      <CreationPanel clusterId={info!.clusterId!} back={back} />
+    </>
+  )
+}

apps/main/[3]cluster/[1]instances/[-2]_clusterId/[6]replication/[-1]new/meta.tsx

@@ -0,0 +1,3 @@
+import { definePage } from '@/model/page'
+
+export default definePage({})

apps/main/[3]cluster/[1]instances/[-2]_clusterId/[6]replication/[-1]new/translations/en.yaml

@@ -0,0 +1,3 @@
+name: New Replication Task
+header:
+  title: New Replication Task

apps/main/[3]cluster/[1]instances/[-2]_clusterId/[6]replication/[-1]new/translations/zh.yaml

@@ -0,0 +1,3 @@
+name: 创建数据同步任务
+header:
+  title: 创建数据同步任务

apps/main/[3]cluster/[1]instances/[-2]_clusterId/[6]replication/[-2]_replicationId/[-1]edit/components/EditingPanel/index.tsx

@@ -0,0 +1,96 @@
+import { FC, useCallback } from 'react'
+import { useQueryClient } from 'react-query'
+import { loadI18n, useI18n } from '@i18n-macro'
+import { Spin } from 'antd'
+import {
+  invalidateClusterDataReplicationList,
+  useQueryClusterDataReplicationDetail,
+  useUpdateClusterDataReplication,
+} from '@/api/hooks/cluster'
+import EditBlock from '../../../../components/ReplicationEdit/EditBlock'
+import { EditSumbitValues } from '../../../../components/ReplicationEdit/helper'
+
+loadI18n()
+
+const useFetchReplicationDetail = ({ taskId }: { taskId: string }) => {
+  const { data, isLoading } = useQueryClusterDataReplicationDetail(
+    {
+      id: taskId,
+    },
+    {
+      refetchOnWindowFocus: false,
+      enabled: !!taskId,
+    }
+  )
+  const result = data?.data.data
+
+  return {
+    data: result,
+    isLoading,
+  }
+}
+
+interface EditingPanelProps {
+  taskId: string
+  back: () => void
+}
+
+const EditingPanel: FC<EditingPanelProps> = ({ taskId, back }) => {
+  const { t, i18n } = useI18n()
+
+  const { data: dataSource, isLoading } = useFetchReplicationDetail({ taskId })
+
+  const queryClient = useQueryClient()
+
+  const updateDataReplication = useUpdateClusterDataReplication()
+
+  const onFinish = useCallback(
+    async (fields: EditSumbitValues) => {
+      try {
+        await updateDataReplication.mutateAsync({
+          payload: {
+            id: taskId,
+            name: fields.name,
+            rules: fields.filterRuleList?.filter((el) => el),
+            downstreamType: fields.downstreamType as any,
+            downstream: fields.downstream,
+          },
+          options: {
+            actionName: t('message.name'),
+          },
+        })
+
+        back()
+      } finally {
+        invalidateClusterDataReplicationList(queryClient)
+      }
+    },
+    [i18n.language, queryClient, updateDataReplication, taskId]
+  )
+
+  if (isLoading || !dataSource) {
+    return <Spin />
+  }
+
+  return (
+    <EditBlock
+      mode="edit"
+      staticData={{ taskId: taskId }}
+      initialValues={{
+        name: dataSource.name,
+        tso: dataSource.startTS,
+        filterRuleList: dataSource.rules,
+        downstreamType: dataSource.downstreamType as any,
+        downstream: {
+          [dataSource.downstreamType!]: {
+            ...dataSource.downstream,
+            ip: (dataSource.downstream as any)?.ip?.replace(/^https?:\/\//, ''),
+          },
+        },
+      }}
+      onEditSubmit={onFinish}
+    />
+  )
+}
+
+export default EditingPanel