feat: 新增Topic 复制功能

km-console/packages/layout-clusters-fe/src/pages/TopicDetail/Replicator.tsx

@@ -0,0 +1,173 @@
+import React, { useState, useEffect } from 'react';
+import { AppContainer, ProTable, Utils, Tag, Modal, Tooltip } from 'knowdesign';
+import Api from '@src/api';
+import { useParams } from 'react-router-dom';
+import { getDataUnit } from '@src/constants/chartConfig';
+import message from '@src/components/Message';
+import { ClustersPermissionMap } from '../CommonConfig';
+import { ControlStatusMap } from '../CommonRoute';
+const { request } = Utils;
+
+const getColmns = (arg: any) => {
+  const formattedBytes = (v: number) => {
+    const [unit, size] = getDataUnit['Memory'](v);
+    return `${(v / size).toFixed(2)}${unit}/s`;
+  };
+  const tagEle = (
+    <Tag
+      style={{
+        color: '#5664FF',
+        padding: '2px 5px',
+        background: '#eff1fd',
+        marginLeft: '-4px',
+        transform: 'scale(0.83,0.83)',
+      }}
+    >
+      当前集群
+    </Tag>
+  );
+  const baseColumns: any = [
+    {
+      title: '源集群',
+      dataIndex: 'sourceClusterName',
+      key: 'sourceClusterName',
+      render: (t: string, record: any) => (
+        <>
+          <span>{t || '-'}</span>
+          {record.sourceClusterId == arg.clusterId && tagEle}
+        </>
+      ),
+    },
+    {
+      title: '目标集群',
+      dataIndex: 'destClusterName',
+      key: 'destClusterName',
+      render: (t: string, record: any) => (
+        <>
+          <span>{t || '-'}</span>
+          {record.destClusterId == arg.clusterId && tagEle}
+        </>
+      ),
+    },
+    {
+      title: '消息写入速率',
+      dataIndex: 'bytesIn',
+      key: 'bytesIn',
+      width: 150,
+      render: (t: number) => (t !== null && t !== undefined ? formattedBytes(t) : '-'),
+    },
+    {
+      title: '消息复制速率',
+      dataIndex: 'replicationBytesIn',
+      key: 'replicationBytesIn',
+      width: 150,
+      render: (t: number) => (t !== null && t !== undefined ? formattedBytes(t) : '-'),
+    },
+    {
+      title: '延迟（个消息）',
+      dataIndex: 'lag',
+      key: 'lag',
+      width: 150,
+    },
+    {
+      title: '操作',
+      dataIndex: 'option',
+      key: 'option',
+      width: 100,
+      render: (_t: any, r: any) => {
+        return arg.global.hasPermission(ClustersPermissionMap.TOPIC_CANCEL_REPLICATOR) ? (
+          <a onClick={() => arg.cancelSync(r)}>取消同步</a>
+        ) : (
+          '-'
+        );
+      },
+    },
+  ];
+
+  return baseColumns;
+};
+
+const Replicator = (props: any) => {
+  const { hashData } = props;
+  const urlParams = useParams<any>(); // 获取地址栏参数
+  const [global] = AppContainer.useGlobalValue();
+  const [loading, setLoading] = useState(false);
+  const [data, setData] = useState([]);
+  const [pagination, setPagination] = useState<any>({
+    current: 1,
+    pageSize: 10,
+    position: 'bottomRight',
+    showSizeChanger: true,
+    pageSizeOptions: ['10', '20', '50', '100', '200', '500'],
+  });
+
+  const genData = () => {
+    if (urlParams?.clusterId === undefined || hashData?.topicName === undefined) return;
+    setLoading(true);
+    request(Api.getTopicMirrorList(urlParams?.clusterId, hashData?.topicName))
+      .then((res: any = []) => {
+        setData(res);
+      })
+      .finally(() => setLoading(false));
+  };
+
+  const cancelSync = (item: any) => {
+    Modal.confirm({
+      title: `确认取消此Topic同步吗？`,
+      okType: 'primary',
+      centered: true,
+      okButtonProps: {
+        size: 'small',
+        danger: true,
+      },
+      cancelButtonProps: {
+        size: 'small',
+      },
+      maskClosable: false,
+      onOk(close) {
+        close();
+        const data = [
+          {
+            destClusterPhyId: item.destClusterId,
+            sourceClusterPhyId: item.sourceClusterId,
+            topicName: item.topicName,
+          },
+        ];
+        Utils.delete(Api.handleTopicMirror(), { data }).then(() => {
+          message.success('成功取消Topic同步');
+          genData();
+        });
+      },
+    });
+  };
+
+  const onTableChange = (pagination: any, filters: any, sorter: any, extra: any) => {
+    setPagination(pagination);
+  };
+
+  useEffect(() => {
+    props.positionType === 'Replicator' && genData();
+  }, []);
+
+  return (
+    <div className="pro-table-wrap">
+      <ProTable
+        showQueryForm={false}
+        tableProps={{
+          loading,
+          showHeader: false,
+          rowKey: 'unique',
+          columns: getColmns({ global, cancelSync, clusterId: urlParams?.clusterId }),
+          dataSource: data,
+          paginationProps: pagination,
+          attrs: {
+            onChange: onTableChange,
+            scroll: { y: 'calc(100vh - 400px)' },
+          },
+        }}
+      />
+    </div>
+  );
+};
+
+export default Replicator;

km-console/packages/layout-clusters-fe/src/pages/TopicDetail/index.tsx

@@ -10,6 +10,7 @@ import ConsumerGroups from './ConsumerGroups';
 import ACLs from './ACLs';
 import Configuration from './Configuration';
 import Consumers from './ConsumerGroups';
+import Replicator from './Replicator';
 // import Consumers from '@src/pages/Consumers';
 import './index.less';
 import TopicDetailHealthCheck from '@src/components/CardBar/TopicDetailHealthCheck';
@@ -206,6 +207,9 @@ const TopicDetail = (props: any) => {
             <Configuration searchKeywords={searchKeywords} positionType={positionType} hashData={hashData} />
           )}
         </TabPane>
+        <TabPane tab="Replicator" key="Replicator">
+          {positionType === 'Replicator' && <Replicator searchKeywords={searchKeywords} positionType={positionType} hashData={hashData} />}
+        </TabPane>
       </Tabs>
     </Drawer>
   );