合并master分支

2025-12-24 11:52:08 +08:00 · 2023-11-12 15:30:08 +08:00
parent b1aa12bfa5 e24a582067
commit a8be274ca6
73 changed files with 1561 additions and 902 deletions
--- a/km-console/packages/config-manager-fe/src/pages/UserManage/RoleTabContent.tsx
+++ b/km-console/packages/config-manager-fe/src/pages/UserManage/RoleTabContent.tsx
@@ -96,7 +96,7 @@ const RoleDetailAndUpdate = forwardRef((props, ref): JSX.Element => {
          arr.push(permissions[i].id);
        }
      });
-      formData.permissionIdList = formData.permissionIdList.flat();
+      formData.permissionIdList = formData.permissionIdList.flat().filter((item) => item !== undefined);
      setConfirmLoading(true);
      request(api.editRole, {
        method: type === RoleOperate.Add ? 'POST' : 'PUT',
@@ -250,7 +250,7 @@ const RoleDetailAndUpdate = forwardRef((props, ref): JSX.Element => {
                    <CheckboxGroupContainer
                      key={i}
                      formInstance={form}
-                      fieldName="permissionIdList"
+                      fieldName={`permissionIdList`}
                      options={permission.options}
                      initSelectedOptions={initSelectedPermissions[permission.id] || []}
                      groupIdx={i}
--- a/km-console/packages/layout-clusters-fe/config/webpack.dev.js
+++ b/km-console/packages/layout-clusters-fe/config/webpack.dev.js
@@ -34,11 +34,11 @@ module.exports = {
    proxy: {
      '/ks-km/api/v3': {
        changeOrigin: true,
-        target: 'https://api-kylin-xg02.intra.xiaojukeji.com/ks-km/',
+        target: 'http://127.0.0.1/',
      },
      '/logi-security/api/v1': {
        changeOrigin: true,
-        target: 'https://api-kylin-xg02.intra.xiaojukeji.com/ks-km/',
+        target: 'http://127.0.0.1/',
      },
    },
  },
--- a/km-console/packages/layout-clusters-fe/package-lock.json
+++ b/km-console/packages/layout-clusters-fe/package-lock.json
@@ -10004,6 +10004,12 @@
        }
      }
    },
+    "pubsub-js": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmmirror.com/pubsub-js/-/pubsub-js-1.9.4.tgz",
+      "integrity": "sha512-hJYpaDvPH4w8ZX/0Fdf9ma1AwRgU353GfbaVfPjfJQf1KxZ2iHaHl3fAUw1qlJIR5dr4F3RzjGaWohYUEyoh7A==",
+      "dev": true
+    },
    "pump": {
      "version": "3.0.0",
      "resolved": "https://registry.npmmirror.com/pump/-/pump-3.0.0.tgz",
--- a/km-console/packages/layout-clusters-fe/package.json
+++ b/km-console/packages/layout-clusters-fe/package.json
@@ -82,6 +82,7 @@
    "@types/lodash": "^4.14.171",
    "@types/node": "^12.12.25",
    "@types/pubsub-js": "^1.5.18",
+    "pubsub-js": "^1.5.18",
    "@typescript-eslint/eslint-plugin": "4.13.0",
    "@typescript-eslint/parser": "4.13.0",
    "babel-eslint": "10.1.0",
--- a/km-console/packages/layout-clusters-fe/src/api/index.ts
+++ b/km-console/packages/layout-clusters-fe/src/api/index.ts
@@ -95,7 +95,7 @@ const api = {
    getApi(`/clusters/${clusterPhyId}/groups/${groupName}/partitions`),
  resetGroupOffset: () => getApi('/group-offsets'),
  getGroupOverview: (clusterPhyId: number) => getApi(`/clusters/${clusterPhyId}/groups-overview`),
-
+  deleteGroupOffset: () => getApi('/group-offsets'),
  // topics列表
  getTopicsList: (clusterPhyId: number) => getApi(`/clusters/${clusterPhyId}/topics-overview`),
  getReassignmentList: () => getApi(`/reassignment/topics-overview`),
@@ -108,6 +108,7 @@ const api = {
  getTopicState: (clusterPhyId: number, topicName: string) => getApi(`/clusters/${clusterPhyId}/topics/${topicName}/state`),
  getTopicMetadata: (clusterPhyId: number, topicName: string) =>
    getApi(`/clusters/${clusterPhyId}/topics/${topicName}/metadata-combine-exist`),
+  deleteTopicData: () => getApi(`/topics/truncate-topic`),

  // 最新的指标值
  getMetricPointsLatest: (clusterPhyId: number) => getApi(`/physical-clusters/${clusterPhyId}/latest-metrics`),
--- a/km-console/packages/layout-clusters-fe/src/app.tsx
+++ b/km-console/packages/layout-clusters-fe/src/app.tsx
@@ -20,6 +20,7 @@ import { getLicenseInfo } from './constants/common';
 import api from './api';
 import ClusterContainer from './pages/index';
 import ksLogo from './assets/ks-logo.png';
+import {ClustersPermissionMap} from "./pages/CommonConfig";

 interface ILocaleMap {
  [index: string]: any;
@@ -78,6 +79,9 @@ const AppContent = (props: { setlanguage: (language: string) => void }) => {
  const userInfo = localStorage.getItem('userInfo');
  const [curActiveAppName, setCurActiveAppName] = useState('');
  const [versionInfo, setVersionInfo] = useState<VersionInfo>();
+  const [global] = AppContainer.useGlobalValue();
+  const quickEntries=[];
+
  useEffect(() => {
    if (pathname.startsWith('/config')) {
      setCurActiveAppName('config');
@@ -93,6 +97,23 @@ const AppContent = (props: { setlanguage: (language: string) => void }) => {
    });
  }, []);

+  if (global.hasPermission && global.hasPermission(ClustersPermissionMap.CLUSTERS_MANAGE_VIEW)){
+    quickEntries.push({
+      icon: <IconFont type="icon-duojiqunguanli"/>,
+      txt: '多集群管理',
+      ident: '',
+      active: curActiveAppName === 'cluster',
+    });
+  }
+  if (global.hasPermission && global.hasPermission(ClustersPermissionMap.SYS_MANAGE_VIEW)){
+    quickEntries.push({
+      icon: <IconFont type="icon-xitongguanli" />,
+      txt: '系统管理',
+      ident: 'config',
+      active: curActiveAppName === 'config',
+    });
+  }
+
  return (
    <DProLayout.Container
      headerProps={{
@@ -103,20 +124,7 @@ const AppContent = (props: { setlanguage: (language: string) => void }) => {
        ),
        username: userInfo ? JSON.parse(userInfo)?.userName : '',
        icon: <DotChartOutlined />,
-        quickEntries: [
-          {
-            icon: <IconFont type="icon-duojiqunguanli" />,
-            txt: '多集群管理',
-            ident: '',
-            active: curActiveAppName === 'cluster',
-          },
-          {
-            icon: <IconFont type="icon-xitongguanli" />,
-            txt: '系统管理',
-            ident: 'config',
-            active: curActiveAppName === 'config',
-          },
-        ],
+        quickEntries: quickEntries,
        isFixed: false,
        userDropMenuItems: [
          <Menu.Item key={0}>
--- a/km-console/packages/layout-clusters-fe/src/components/utils.ts
+++ b/km-console/packages/layout-clusters-fe/src/components/utils.ts
@@ -0,0 +1,10 @@
+import { useCallback, useState } from 'react';
+
+export function useForceRefresh() {
+  const [refreshKey, setRefresh] = useState<number>(0);
+  const forceRefresh: () => void = useCallback(() => {
+    setRefresh((x) => x + 1);
+  }, []);
+
+  return [refreshKey, forceRefresh];
+}
--- a/km-console/packages/layout-clusters-fe/src/pages/CommonConfig.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/CommonConfig.tsx
@@ -7,6 +7,9 @@ import { goLogin } from '@src/constants/axiosConfig';
 export enum ClustersPermissionMap {
  CLUSTERS_MANAGE = '多集群管理',
  CLUSTERS_MANAGE_VIEW = '多集群管理查看',
+  //仅用作隐藏掉系统管理菜单
+  SYS_MANAGE = '系统管理',
+  SYS_MANAGE_VIEW = '系统管理查看',
  // Cluster
  CLUSTER_ADD = '接入集群',
  CLUSTER_DEL = '删除集群',
@@ -39,6 +42,12 @@ export enum ClustersPermissionMap {
  MM2_DELETE = 'MM2-删除',
  MM2_RESTART = 'MM2-重启',
  MM2_STOP_RESUME = 'MM2-暂停&恢复',
+  // Connector
+  CONNECTOR_ADD = 'Connector-新增',
+  CONNECTOR_CHANGE_CONFIG = 'Connector-编辑',
+  CONNECTOR_DELETE = 'Connector-删除',
+  CONNECTOR_RESTART = 'Connector-重启',
+  CONNECTOR_STOP_RESUME = 'Connector-暂停&恢复',
 }

 export interface PermissionNode {
@@ -88,6 +97,13 @@ const CommonConfig = () => {
      clustersPermissions &&
        clustersPermissions.childList.forEach((node: PermissionNode) => node.has && userPermissions.push(node.permissionName));

+      // 获取用户在系统管理拥有的权限
+      const configPermissions = userPermissionTree.find(
+          (sys: PermissionNode) => sys.permissionName === ClustersPermissionMap.SYS_MANAGE
+      );
+      configPermissions &&
+        configPermissions.childList.forEach((node: PermissionNode) => node.has && userPermissions.push(node.permissionName));
+
      const hasPermission = (permissionName: ClustersPermissionMap) => permissionName && userPermissions.includes(permissionName);

      setGlobal((curState: any) => ({ ...curState, permissions: allPermissions, userPermissions, hasPermission, userInfo }));
--- a/km-console/packages/layout-clusters-fe/src/pages/Connect/AddConnector.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/Connect/AddConnector.tsx
@@ -189,7 +189,14 @@ const StepFormFirst = (props: SubFormProps) => {
        const result: FormConnectorConfigs = {
          pluginConfig: {},
        };
+
+        // 获取一份默认配置
+        const defaultPluginConfig: any = {};
+
        pluginConfig.configs.forEach(({ definition }) => {
+          // 获取一份默认配置
+          defaultPluginConfig[definition.name] = definition?.defaultValue;
+
          if (!getExistFormItems(pluginType).includes(definition.name)) {
            const pluginConfigs = result.pluginConfig;
            const group = definition.group || 'Others';
@@ -205,7 +212,7 @@ const StepFormFirst = (props: SubFormProps) => {

        Object.keys(result).length &&
          form.setFieldsValue({
-            configs: result,
+            configs: { ...result, defaultPluginConfig, editConnectorConfig: result.connectorConfig },
          });
      })
      .finally(() => props.setSubmitLoading(false));
@@ -816,6 +823,8 @@ const StepFormFifth = (props: SubFormProps) => {
                            <InputNumber />
                          ) : type.toUpperCase() === 'BOOLEAN' ? (
                            <Switch size="small" />
+                          ) : type.toUpperCase() === 'PASSWORD' ? (
+                            <Input.Password />
                          ) : (
                            <Input />
                          )}
@@ -947,7 +956,7 @@ export default forwardRef(
        success?: {
          connectClusterId: number;
          connectorName: string;
-          configs: {
+          config: {
            [key: string]: any;
          };
        };
@@ -955,6 +964,7 @@ export default forwardRef(
      }) => void
    ) => {
      const promises: Promise<any>[] = [];
+      const compareConfig = stepsFormRef.current[0].getFieldValue('configs'); // 获取步骤一的form信息
      Object.values(stepsFormRef.current).forEach((form, i) => {
        const promise = form
          .validateFields()
@@ -985,11 +995,22 @@ export default forwardRef(
                const [k, ...v] = l.split('=');
                result[k] = v.join('=');
              });
+
+          const editConnectorConfig = operateInfo.type === 'edit' ? compareConfig.editConnectorConfig : {}; // 编辑状态时拿到config配置
+          const newCompareConfig = { ...compareConfig.defaultPluginConfig, ...editConnectorConfig, ...result }; // 整合后的表单提交信息
+          Object.keys(newCompareConfig).forEach((item) => {
+            if (
+              newCompareConfig[item] === compareConfig.defaultPluginConfig[item] ||
+              newCompareConfig[item]?.toString() === compareConfig.defaultPluginConfig[item]?.toString()
+            ) {
+              delete newCompareConfig[item]; // 清除默认值
+            }
+          });
          callback({
            success: {
              connectClusterId: res[0].connectClusterId,
              connectorName: result['name'],
-              configs: result,
+              config: newCompareConfig,
            },
          });
        },
@@ -1013,7 +1034,7 @@ export default forwardRef(
              curClusterName = cluster.label;
            }
          });
-          (jsonRef as any)?.onOpen(operateInfo.type, curClusterName, info.success.configs);
+          (jsonRef as any)?.onOpen(operateInfo.type, curClusterName, info.success.config);
          onClose();
        }
      });
@@ -1026,9 +1047,9 @@ export default forwardRef(
          setCurrentStep(info.error);
        } else {
          setSubmitLoading(true);
-          Object.entries(info.success.configs).forEach(([key, val]) => {
+          Object.entries(info.success.config).forEach(([key, val]) => {
            if (val === null) {
-              delete info.success.configs[key];
+              delete info.success.config[key];
            }
          });
          Utils.put(api.validateConnectorConfig, info.success).then(
--- a/km-console/packages/layout-clusters-fe/src/pages/Connect/AddConnectorUseJSON.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/Connect/AddConnectorUseJSON.tsx
@@ -10,7 +10,7 @@ const PLACEHOLDER = `配置格式如下

 {
  "connectClusterName": "",  // Connect Cluster 名称
-  "configs": {  // 具体配置项
+  "config": {  // 具体配置项
    "name": "",
    "connector.class": "",
    "tasks.max": 1,
@@ -47,7 +47,7 @@ export default forwardRef((props: any, ref) => {
        configs: JSON.stringify(
          {
            connectClusterName,
-            configs: defaultConfigs,
+            config: defaultConfigs,
          },
          null,
          2
@@ -63,13 +63,13 @@ export default forwardRef((props: any, ref) => {
    form.validateFields().then(
      (data) => {
        const postData = JSON.parse(data.configs);
-        postData.connectorName = postData.configs.name;
+        postData.connectorName = postData.config.name;
        postData.connectClusterId = connectClusters.find((cluster) => cluster.label === postData.connectClusterName).value;
        delete postData.connectClusterName;

-        Object.entries(postData.configs).forEach(([key, val]) => {
+        Object.entries(postData.config).forEach(([key, val]) => {
          if (val === null) {
-            delete postData.configs[key];
+            delete postData.config[key];
          }
        });
        Utils.put(api.validateConnectorConfig, postData).then(
@@ -198,20 +198,20 @@ export default forwardRef((props: any, ref) => {
                    }
                  }

-                  if (!v.configs || typeof v.configs !== 'object') {
-                    return Promise.reject('内容缺少 configs 字段或字段格式错误');
+                  if (!v.config || typeof v.config !== 'object') {
+                    return Promise.reject('内容缺少 config 字段或字段格式错误');
                  } else {
                    // 校验 connectorName 字段
-                    if (!v.configs.name) {
-                      return Promise.reject('configs 字段下缺少 name 项');
+                    if (!v.config.name) {
+                      return Promise.reject('config 字段下缺少 name 项');
                    } else {
-                      if (type === 'edit' && v.configs.name !== defaultConfigs.name) {
+                      if (type === 'edit' && v.config.name !== defaultConfigs.name) {
                        return Promise.reject('编辑模式下不允许修改 name 字段');
                      }
                    }
-                    if (!v.configs['connector.class']) {
-                      return Promise.reject('configs 字段下缺少 connector.class 项');
-                    } else if (type === 'edit' && v.configs['connector.class'] !== defaultConfigs['connector.class']) {
+                    if (!v.config['connector.class']) {
+                      return Promise.reject('config 字段下缺少 connector.class 项');
+                    } else if (type === 'edit' && v.config['connector.class'] !== defaultConfigs['connector.class']) {
                      return Promise.reject('编辑模式下不允许修改 connector.class 字段');
                    }
                  }
@@ -219,13 +219,13 @@ export default forwardRef((props: any, ref) => {
                  if (type === 'create') {
                    // 异步校验 connector 名称是否重复 以及 className 是否存在
                    return Promise.all([
-                      Utils.request(api.isConnectorExist(connectClusterId, v.configs.name)),
+                      Utils.request(api.isConnectorExist(connectClusterId, v.config.name)),
                      Utils.request(api.getConnectorPlugins(connectClusterId)),
                    ]).then(
                      ([data, plugins]: [any, ConnectorPlugin[]]) => {
                        return data?.exist
                          ? Promise.reject('name 与已有 Connector 重复')
-                          : plugins.every((plugin) => plugin.className !== v.configs['connector.class'])
+                          : plugins.every((plugin) => plugin.className !== v.config['connector.class'])
                          ? Promise.reject('该 connectCluster 下不存在 connector.class 项配置的插件')
                          : Promise.resolve();
                      },
--- a/km-console/packages/layout-clusters-fe/src/pages/Connect/config.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/Connect/config.tsx
@@ -1,8 +1,9 @@
 import SmallChart from '@src/components/SmallChart';
 import TagsWithHide from '@src/components/TagsWithHide';
-import { Button, Tag, Tooltip, Utils, Popconfirm } from 'knowdesign';
+import { Button, Tag, Tooltip, Utils, Popconfirm, AppContainer } from 'knowdesign';
 import React from 'react';
 import Delete from './Delete';
+import { ClustersPermissionMap } from '../CommonConfig';
 export const defaultPagination = {
  current: 1,
  pageSize: 10,
@@ -93,7 +94,8 @@ const renderLine = (record: any, metricName: string) => {
 };

 export const getConnectorsColumns = (arg?: any) => {
-  const columns = [
+  const [global] = AppContainer.useGlobalValue();
+  const columns: any = [
    {
      title: 'Connector Name',
      dataIndex: 'connectorName',
@@ -213,7 +215,10 @@ export const getConnectorsColumns = (arg?: any) => {
        return t && t.length > 0 ? <TagsWithHide placement="bottom" list={t} expandTagContent={(num: any) => `共有${num}个`} /> : '-';
      },
    },
-    {
+  ];
+
+  if (global.hasPermission) {
+    columns.push({
      title: '操作',
      dataIndex: 'options',
      key: 'options',
@@ -224,20 +229,24 @@ export const getConnectorsColumns = (arg?: any) => {
      render: (_t: any, r: any) => {
        return (
          <div>
-            <Popconfirm
-              title="是否重启当前任务？"
-              onConfirm={() => arg?.optionConnect(r, 'restart')}
-              // onCancel={cancel}
-              okText="是"
-              cancelText="否"
-              overlayClassName="connect-popconfirm"
-            >
-              <Button key="restart" type="link" size="small">
-                重启
-              </Button>
-            </Popconfirm>
+            {global.hasPermission(ClustersPermissionMap.CONNECTOR_RESTART) ? (
+              <Popconfirm
+                title="是否重启当前任务？"
+                onConfirm={() => arg?.optionConnect(r, 'restart')}
+                // onCancel={cancel}
+                okText="是"
+                cancelText="否"
+                overlayClassName="connect-popconfirm"
+              >
+                <Button key="restart" type="link" size="small">
+                  重启
+                </Button>
+              </Popconfirm>
+            ) : (
+              <></>
+            )}

-            {(r.state === 'RUNNING' || r.state === 'PAUSED') && (
+            {global.hasPermission(ClustersPermissionMap.CONNECTOR_STOP_RESUME) && (r.state === 'RUNNING' || r.state === 'PAUSED') && (
              <Popconfirm
                title={`是否${r.state === 'RUNNING' ? '暂停' : '继续'}当前任务？`}
                onConfirm={() => arg?.optionConnect(r, r.state === 'RUNNING' ? 'stop' : 'resume')}
@@ -252,16 +261,24 @@ export const getConnectorsColumns = (arg?: any) => {
                </Button>
              </Popconfirm>
            )}
+            {global.hasPermission(ClustersPermissionMap.CONNECTOR_CHANGE_CONFIG) ? (
+              <Button type="link" size="small" onClick={() => arg?.editConnector(r)}>
+                编辑
+              </Button>
+            ) : (
+              <></>
+            )}

-            <Button type="link" size="small" onClick={() => arg?.editConnector(r)}>
-              编辑
-            </Button>
-            <Delete record={r} onConfirm={arg?.deleteTesk}></Delete>
+            {global.hasPermission(ClustersPermissionMap.CONNECTOR_DELETE) ? (
+              <Delete record={r} onConfirm={arg?.deleteTesk}></Delete>
+            ) : (
+              <></>
+            )}
          </div>
        );
      },
-    },
-  ];
+    });
+  }
  return columns;
 };

--- a/km-console/packages/layout-clusters-fe/src/pages/Connect/index.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/Connect/index.tsx
@@ -12,6 +12,7 @@ import notification from '@src/components/Notification';
 import './index.less';
 import AddConnectorUseJSON from './AddConnectorUseJSON';
 import HasConnector from './HasConnector';
+import { ClustersPermissionMap } from '../CommonConfig';
 const { request } = Utils;

 const rateMap: any = {
@@ -174,21 +175,25 @@ const Connectors: React.FC = () => {
                    maxLength: 128,
                  }}
                />
-                <span className="add-connect">
-                  <Button
-                    className="add-connect-btn"
-                    icon={<IconFont type="icon-jiahao" />}
-                    type="primary"
-                    onClick={() => addConnectorRef.current?.onOpen('create', addConnectorJsonRef.current)}
-                  >
-                    新增Connector
-                  </Button>
-                  <Dropdown overlayClassName="add-connect-dropdown-menu" overlay={menu}>
-                    <Button className="add-connect-json" type="primary">
-                      <IconFont type="icon-guanwangxiala" />
+                {global.hasPermission && global.hasPermission(ClustersPermissionMap.CONNECTOR_ADD) ? (
+                  <span className="add-connect">
+                    <Button
+                      className="add-connect-btn"
+                      icon={<IconFont type="icon-jiahao" />}
+                      type="primary"
+                      onClick={() => addConnectorRef.current?.onOpen('create', addConnectorJsonRef.current)}
+                    >
+                      新增Connector
                    </Button>
-                  </Dropdown>
-                </span>
+                    <Dropdown overlayClassName="add-connect-dropdown-menu" overlay={menu}>
+                      <Button className="add-connect-json" type="primary">
+                        <IconFont type="icon-guanwangxiala" />
+                      </Button>
+                    </Dropdown>
+                  </span>
+                ) : (
+                  <></>
+                )}
              </div>
            </div>
            <ProTable
--- a/km-console/packages/layout-clusters-fe/src/pages/ConsumerGroup/Delete.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/ConsumerGroup/Delete.tsx
@@ -0,0 +1,104 @@
+import React, { useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { Button, Form, Input, Modal, Utils } from 'knowdesign';
+import notification from '@src/components/Notification';
+import Api from '@src/api/index';
+
+// eslint-disable-next-line react/display-name
+export default (props: { record: any; onConfirm?: () => void }) => {
+  const { record, onConfirm } = props;
+  const routeParams = useParams<{
+    clusterId: string;
+  }>();
+  const [form] = Form.useForm();
+  const [delDialogVisible, setDelDialogVisble] = useState(false);
+  const handleDelOk = () => {
+    form.validateFields().then((e) => {
+      const formVal = form.getFieldsValue();
+      formVal.clusterPhyId = Number(routeParams.clusterId);
+      formVal.deleteType = 0;
+      Utils.delete(Api.deleteGroupOffset(), { data: formVal }).then((res: any) => {
+        if (res === null) {
+          notification.success({
+            message: '删除消费组成功',
+          });
+          setDelDialogVisble(false);
+          onConfirm && onConfirm();
+        } else {
+          notification.error({
+            message: '删除消费组失败',
+          });
+        }
+      });
+    });
+  };
+  return (
+    <>
+      <Button
+        style={{ paddingLeft: 0 }}
+        type="link"
+        onClick={(_) => {
+          setDelDialogVisble(true);
+        }}
+      >
+        删除
+      </Button>
+      <Modal
+        className="custom-modal"
+        title="确定要删除此Topic吗？"
+        centered={true}
+        visible={delDialogVisible}
+        wrapClassName="del-topic-modal"
+        destroyOnClose={true}
+        maskClosable={false}
+        onOk={handleDelOk}
+        onCancel={(_) => {
+          setDelDialogVisble(false);
+        }}
+        okText="删除"
+        okButtonProps={{
+          danger: true,
+          size: 'small',
+          style: {
+            paddingLeft: '16px',
+            paddingRight: '16px',
+          },
+        }}
+        cancelButtonProps={{
+          size: 'small',
+          style: {
+            paddingLeft: '16px',
+            paddingRight: '16px',
+          },
+        }}
+      >
+        {/* <div className="tip-info">
+          <IconFont type="icon-warning-circle"></IconFont>
+          <span>会删除Topic的全部消息数据和ACL权限！请再次输入Topic名称进行确认！</span>
+        </div> */}
+        <Form form={form} labelCol={{ span: 5 }} style={{ marginTop: 18 }}>
+          <Form.Item label="TopicName">{record.name}</Form.Item>
+          <Form.Item
+            name="groupName"
+            label="GroupName"
+            rules={[
+              // { required: true },
+              () => ({
+                validator(_, value) {
+                  if (!value) {
+                    return Promise.reject(new Error('请输入Group名称'));
+                  } else if (value !== record.name) {
+                    return Promise.reject(new Error('请输入正确的Group名称'));
+                  }
+                  return Promise.resolve();
+                },
+              }),
+            ]}
+          >
+            <Input placeholder="请输入" size="small"></Input>
+          </Form.Item>
+        </Form>
+      </Modal>
+    </>
+  );
+};
--- a/km-console/packages/layout-clusters-fe/src/pages/ConsumerGroup/Detail.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/ConsumerGroup/Detail.tsx
@@ -1,12 +1,13 @@
 import React, { useState, useEffect } from 'react';
 import { useParams, useHistory } from 'react-router-dom';
-import { Drawer, ProTable, Utils } from 'knowdesign';
+import { Button, Space, Divider, Drawer, ProTable, Utils, notification } from 'knowdesign';
 import { IconFont } from '@knowdesign/icons';
 import API from '@src/api/index';
 import { defaultPagination, hashDataParse } from '@src/constants/common';
 import { getGtoupTopicColumns } from './config';
 import { ExpandedRow } from './ExpandedRow';
 import ResetOffsetDrawer from './ResetOffsetDrawer';
+import { useForceRefresh } from '@src/components/utils';
 const { request } = Utils;

 export interface MetricLine {
@@ -63,6 +64,7 @@ const GroupDetail = (props: any) => {
  const [openKeys, setOpenKeys] = useState();
  const [resetOffsetVisible, setResetOffsetVisible] = useState(false);
  const [resetOffsetArg, setResetOffsetArg] = useState({});
+  const [refreshKey, forceRefresh] = useForceRefresh();

  const genData = async ({ pageNo, pageSize, groupName }: any) => {
    if (urlParams?.clusterId === undefined) return;
@@ -110,6 +112,23 @@ const GroupDetail = (props: any) => {
      groupName: record?.groupName,
    });
  };
+  // 删除消费组Topic
+  const deleteOffset = (record: any) => {
+    const params = {
+      clusterPhyId: +urlParams?.clusterId,
+      deleteType: 1, // 0:group纬度，1：Topic纬度，2：Partition纬度
+      groupName: record.groupName,
+      topicName: record.topicName,
+    };
+    Utils.delete(API.deleteGroupOffset(), { data: params }).then((data: any) => {
+      if (data === null) {
+        notification.success({
+          message: '删除Topic成功!',
+        });
+        genData({ pageNo: 1, pageSize: pagination.pageSize, groupName: hashData.groupName });
+      }
+    });
+  };

  const onTableChange = (pagination: any, filters: any, sorter: any) => {
    genData({ pageNo: pagination.current, pageSize: pagination.pageSize, filters, sorter, groupName: hashData.groupName });
@@ -160,7 +179,7 @@ const GroupDetail = (props: any) => {
    //   // 获取Consumer列表 表格模式
    //   getTopicGroupMetric(hashData);
    // });
-  }, [hashDataParse(location.hash).groupName]);
+  }, [hashDataParse(location.hash).groupName, refreshKey]);

  return (
    <Drawer
@@ -182,6 +201,14 @@ const GroupDetail = (props: any) => {
      //     <Divider type="vertical" />
      //   </Space>
      // }
+      extra={
+        <Space>
+          <span style={{ display: 'inline-block', fontSize: '15px' }} onClick={forceRefresh as () => void}>
+            <i className="iconfont icon-shuaxin1" style={{ cursor: 'pointer' }} />
+          </span>
+          <Divider type="vertical" />
+        </Space>
+      }
    >
      <ProTable
        showQueryForm={false}
@@ -189,7 +216,7 @@ const GroupDetail = (props: any) => {
          showHeader: false,
          rowKey: 'key',
          loading: loading,
-          columns: getGtoupTopicColumns({ resetOffset }),
+          columns: getGtoupTopicColumns({ resetOffset, deleteOffset }),
          dataSource: topicData,
          paginationProps: { ...pagination },
          // noPagination: true,
--- a/km-console/packages/layout-clusters-fe/src/pages/ConsumerGroup/ExpandedRow.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/ConsumerGroup/ExpandedRow.tsx
@@ -8,6 +8,7 @@ import { IconFont } from '@knowdesign/icons';
 import API from '@src/api/index';
 import { hashDataParse } from '@src/constants/common';
 const { Option } = Select;
+import PubSub from 'pubsub-js'

 export interface MetricLine {
  createTime?: number;
@@ -214,6 +215,11 @@ export const ExpandedRow: any = ({ record, groupName }: any) => {
  //   getTopicGroupMetric();
  // }, [sortObj]);

+  // 订阅重置offset成功的消息
+  PubSub.subscribe('ConsumerGroup-ResetOffset', function(data){
+    getTopicGroupMetric({});
+  })
+
  useEffect(() => {
    const hashData = hashDataParse(location.hash);
    // if (!hashData.groupName) return;
--- a/km-console/packages/layout-clusters-fe/src/pages/ConsumerGroup/ResetOffsetDrawer.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/ConsumerGroup/ResetOffsetDrawer.tsx
@@ -4,6 +4,7 @@ import { useParams } from 'react-router-dom';
 import EditTable from '../TestingProduce/component/EditTable';
 import Api from '@src/api/index';
 import moment from 'moment';
+import PubSub from 'pubsub-js'

 const CustomSelectResetTime = (props: { value?: string; onChange?: (val: Number | String) => void }) => {
  const { value, onChange } = props;
@@ -106,6 +107,8 @@ export default (props: any) => {
          message: '重置offset成功',
        });
        setVisible(false);
+        // 发布重置offset成功的消息
+        PubSub.publish('ConsumerGroup-ResetOffset', '1');
      } else {
        notification.error({
          message: '重置offset失败',
--- a/km-console/packages/layout-clusters-fe/src/pages/ConsumerGroup/config.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/ConsumerGroup/config.tsx
@@ -1,8 +1,9 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 import React from 'react';
-import { AppContainer } from 'knowdesign';
+import { AppContainer, Button, Popconfirm } from 'knowdesign';
 import TagsWithHide from '@src/components/TagsWithHide';
 import { ClustersPermissionMap } from '../CommonConfig';
+import Delete from './Delete';

 export const runningStatusEnum: any = {
  1: 'Doing',
@@ -62,6 +63,21 @@ export const getGroupColumns = (arg?: any) => {
      width: 200,
      render: (t: number) => (t ? t.toLocaleString() : '-'),
    },
+    {
+      title: '操作',
+      dataIndex: 'options',
+      key: 'options',
+      width: 200,
+      filterTitle: true,
+      fixed: 'right',
+      render: (_t: any, r: any) => {
+        return (
+          <div>
+            <Delete record={r} onConfirm={arg?.deleteTesk}></Delete>
+          </div>
+        );
+      },
+    },
  ];
  return columns;
 };
@@ -103,11 +119,20 @@ export const getGtoupTopicColumns = (arg?: any) => {
      title: '操作',
      dataIndex: 'desc',
      key: 'desc',
-      width: 150,
+      width: 200,
      render: (value: any, record: any) => {
        return (
          <div>
            <a onClick={() => arg.resetOffset(record)}>重置Offset</a>
+            <Popconfirm
+              placement="top"
+              title={`是否要删除当前Topic？`}
+              onConfirm={() => arg.deleteOffset(record)}
+              okText="是"
+              cancelText="否"
+            >
+              <Button type="link">删除</Button>
+            </Popconfirm>
          </div>
        );
      },
--- a/km-console/packages/layout-clusters-fe/src/pages/ConsumerGroup/index.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/ConsumerGroup/index.tsx
@@ -58,6 +58,11 @@ const BrokerList: React.FC = (props: any) => {
    genData({ pageNo: pagination.current, pageSize: pagination.pageSize, filters, sorter });
  };

+  // 删除Group
+  const deleteTesk = () => {
+    genData({ pageNo: 1, pageSize: pagination.pageSize });
+  };
+
  useEffect(() => {
    genData({
      pageNo: 1,
@@ -115,7 +120,7 @@ const BrokerList: React.FC = (props: any) => {
            showHeader: false,
            rowKey: 'group_list',
            loading: loading,
-            columns: getGroupColumns(),
+            columns: getGroupColumns(deleteTesk),
            dataSource: data,
            paginationProps: { ...pagination },
            attrs: {
--- a/km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/AccessCluster.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/AccessCluster.tsx
@@ -522,21 +522,15 @@ const ConnectorForm = (props: {
    const params = {
      ...values,
      id: initFieldsValue?.id,
-      jmxProperties: values.jmxProperties ? `{ "jmxProperties": "${values.jmxProperties}" }` : undefined,
+      jmxProperties: values.jmxProperties ? `{ "jmxPort": "${values.jmxProperties}" }` : undefined,
    };
-    Utils.put(api.batchConnectClusters, [params])
-      .then((res) => {
-        // setSelectedTabKey(undefined);
-        getConnectClustersList();
-        notification.success({
-          message: '修改Connect集群成功',
-        });
-      })
-      .catch((error) => {
-        notification.success({
-          message: '修改Connect集群失败',
-        });
+    Utils.put(api.batchConnectClusters, [params]).then((res) => {
+      // setSelectedTabKey(undefined);
+      getConnectClustersList();
+      notification.success({
+        message: '修改Connect集群成功',
      });
+    });
  };

  const onCancel = () => {
--- a/km-console/packages/layout-clusters-fe/src/pages/SecurityACLs/EditDrawer.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/SecurityACLs/EditDrawer.tsx
@@ -135,6 +135,7 @@ const AddDrawer = forwardRef((_, ref) => {

      if (configType === 'custom') {
        // 1. 自定义权限
+        // TODO: 需要和后端联调
        const { resourceType, resourcePatternType, aclPermissionType, aclOperation, aclClientHost } = formData;
        submitData.push({
          clusterId,
@@ -281,6 +282,42 @@ const AddDrawer = forwardRef((_, ref) => {
        </Form.Item>
        <Form.Item dependencies={['configType']} style={{ marginBottom: 0 }}>
          {({ getFieldValue }) => {
+            const SelectFormItems = (props: { type: string }) => {
+              const { type } = props;
+              return (
+                <Form.Item
+                  name={`${type}Name`}
+                  dependencies={[`${type}PatternType`]}
+                  validateTrigger="onBlur"
+                  rules={[
+                    ({ getFieldValue }) => ({
+                      validator: (rule: any, value: string) => {
+                        if (!value) {
+                          return Promise.reject(`${type}Name 不能为空`);
+                        }
+                        if (type === 'topic' && getFieldValue(`${type}PatternType`) === ACL_PATTERN_TYPE['Literal']) {
+                          return Utils.request(api.getTopicMetadata(clusterId as any, value)).then((res: any) => {
+                            return res?.exist ? Promise.resolve() : Promise.reject('该 Topic 不存在');
+                          });
+                        }
+                        return Promise.resolve();
+                      },
+                    }),
+                  ]}
+                >
+                  <AutoComplete
+                    filterOption={(value, option) => {
+                      if (option?.value.includes(value)) {
+                        return true;
+                      }
+                      return false;
+                    }}
+                    options={type === 'topic' ? topicMetaData : groupMetaData}
+                    placeholder={`请输入 ${type}Name`}
+                  />
+                </Form.Item>
+              );
+            };
            const PatternTypeFormItems = (props: { type: string }) => {
              const { type } = props;
              const UpperCaseType = type[0].toUpperCase() + type.slice(1);
@@ -388,6 +425,27 @@ const AddDrawer = forwardRef((_, ref) => {
                      }))}
                    />
                  </Form.Item>
+                  <Form.Item dependencies={['resourceType']}>
+                    {({ getFieldValue }) => {
+                      const type = getFieldValue('resourceType');
+                      if (type === ACL_RESOURCE_TYPE['Cluster'] || type === ACL_RESOURCE_TYPE['TransactionalId']) {
+                        //TODO需要和后端获取集群和事务接口联调
+                        return (
+                          <Form.Item
+                            name={`${type === 4 ? 'cluster' : 'transactionalId'}`}
+                            rules={[{ required: true, message: `${type === 4 ? 'Cluster名称' : 'TransactionalId'} 不能为空` }]}
+                          >
+                            <Input placeholder={`请输入${type === 4 ? 'Cluster名称' : 'TransactionalId'}`}></Input>
+                          </Form.Item>
+                        );
+                      } else if (type === ACL_RESOURCE_TYPE['Topic']) {
+                        return <PatternTypeFormItems type="topic" />;
+                      } else if (type === ACL_RESOURCE_TYPE['Group']) {
+                        return <PatternTypeFormItems type="group" />;
+                      }
+                      return null;
+                    }}
+                  </Form.Item>
                  <Form.Item dependencies={['resourceType']} style={{ marginBottom: 0 }}>
                    {({ getFieldValue }) => {
                      form.resetFields(['aclOperation']);
--- a/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/BrokersDetail.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/BrokersDetail.tsx
@@ -8,6 +8,7 @@ import { useParams } from 'react-router-dom';
 import TagsWithHide from '@src/components/TagsWithHide';
 import SwitchTab from '@src/components/SwitchTab';
 import RenderEmpty from '@src/components/RenderEmpty';
+import { useForceRefresh } from '@src/components/utils';

 interface PropsType {
  hashData: any;
@@ -401,11 +402,18 @@ export default (props: PropsType) => {
  const { hashData } = props;
  const [showMode, setShowMode] = useState<string>('card');

+  const [refreshKey, forceRefresh] = useForceRefresh();
  return (
    <>
-      <div className="brokers-tab-container">
+      <div className="brokers-tab-container" key={`${refreshKey}`}>
        <div className="overview">
          <div className="left">
+            <span
+              style={{ display: 'inline-block', padding: '0 10px', marginRight: '10px', borderRight: '1px solid #ccc', fontSize: '15px' }}
+              onClick={forceRefresh as () => void}
+            >
+              <i className="iconfont icon-shuaxin1" style={{ cursor: 'pointer' }} />
+            </span>
            <PartitionSummary clusterId={clusterId} topicName={hashData.topicName} />
          </div>
          <div className="cases-box">
--- a/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/ConsumerGroupDetail.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/ConsumerGroupDetail.tsx
@@ -10,6 +10,7 @@ import { ClustersPermissionMap } from '../CommonConfig';
 import ResetOffsetDrawer from './ResetOffsetDrawer';
 import SwitchTab from '@src/components/SwitchTab';
 import ContentWithCopy from '@src/components/CopyContent';
+import PubSub from "pubsub-js";

 const { Option } = Select;

@@ -335,6 +336,11 @@ export default (props: any) => {
      });
  }, [visible]);

+// 订阅重置offset成功的消息
+  PubSub.subscribe('TopicDetail-ResetOffset', function(message, data){
+    getTopicGroupMetric({hashData: data});
+  })
+
  useEffect(() => {
    if (partitionList.length === 0) return;
    getTopicGroupMetricHistory(partitionList, hashData);
--- a/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/ResetOffsetDrawer.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/ResetOffsetDrawer.tsx
@@ -4,6 +4,7 @@ import { useParams } from 'react-router-dom';
 import EditTable from '../TestingProduce/component/EditTable';
 import Api from '@src/api/index';
 import moment from 'moment';
+import PubSub from "pubsub-js";

 const CustomSelectResetTime = (props: { value?: string; onChange?: (val: Number | String) => void }) => {
  const { value, onChange } = props;
@@ -106,6 +107,13 @@ export default (props: any) => {
          message: '重置offset成功',
        });
        setResetOffsetVisible(false);
+        // 发布重置offset成功的消息
+        PubSub.publish('TopicDetail-ResetOffset',
+            {
+              groupName: record.groupName,
+              topicName: record.topicName
+            }
+        );
      } else {
        notification.error({
          message: '重置offset失败',
--- a/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/config.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/config.tsx
@@ -81,7 +81,8 @@ export const getTopicMessagesColmns = () => {
      title: 'Offset',
      dataIndex: 'offset',
      key: 'offset',
-      render: (t: number) => (t ? t.toLocaleString() : '-'),
+      sorter: true,
+      render: (t: number) => (+t ? t.toLocaleString() : '-'),
    },
    {
      title: 'Timestamp',
--- a/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/index.less
+++ b/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/index.less
@@ -26,6 +26,7 @@

    .left {
      display: flex;
+      align-items: center;
      .info-box {
        display: flex;
        height: 36px;
--- a/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/index.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/index.tsx
@@ -15,9 +15,21 @@ import Replicator from './Replicator';
 import './index.less';
 import TopicDetailHealthCheck from '@src/components/CardBar/TopicDetailHealthCheck';
 import { hashDataParse } from '@src/constants/common';
+import { useForceRefresh } from '@src/components/utils';

 const { TabPane } = Tabs;

+const Reload = (props: any) => {
+  return (
+    <span
+      style={{ display: 'inline-block', padding: '0 10px', marginRight: '10px', borderRight: '1px solid #ccc', fontSize: '15px' }}
+      onClick={props.forceRefresh as () => void}
+    >
+      <i className="iconfont icon-shuaxin1" style={{ cursor: 'pointer' }} />
+    </span>
+  );
+};
+
 const OperationsSlot: any = {
  // eslint-disable-next-line react/display-name
  // ['Partitions']: (arg: any) => {
@@ -70,17 +82,20 @@ const OperationsSlot: any = {
  // eslint-disable-next-line react/display-name
  ['ConsumerGroups']: (arg: any) => {
    return (
-      <SearchInput
-        onSearch={arg.setSearchKeywords}
-        attrs={{
-          value: arg.searchValue,
-          onChange: arg.setSearchValue,
-          placeholder: '请输入Consumer Group',
-          size: 'small',
-          style: { width: '210px', marginRight: '2px' },
-          maxLength: 128,
-        }}
-      />
+      <>
+        <Reload {...arg} />
+        <SearchInput
+          onSearch={arg.setSearchKeywords}
+          attrs={{
+            value: arg.searchValue,
+            onChange: arg.setSearchValue,
+            placeholder: '请输入Consumer Group',
+            size: 'small',
+            style: { width: '210px', marginRight: '2px' },
+            maxLength: 128,
+          }}
+        />
+      </>
    );
  },
 };
@@ -94,6 +109,7 @@ const TopicDetail = (props: any) => {
  const [searchValue, setSearchValue] = useState<string>('');
  const [visible, setVisible] = useState(false);
  const [hashData, setHashData] = useState<any>({});
+  const [refreshKey, forceRefresh] = useForceRefresh();

  const callback = (key: any) => {
    setSearchValue('');
@@ -184,7 +200,7 @@ const TopicDetail = (props: any) => {
        onChange={callback}
        tabBarExtraContent={
          OperationsSlot[positionType] &&
-          OperationsSlot[positionType]({ ...props, setSearchKeywords, setSearchValue, searchValue, positionType })
+          OperationsSlot[positionType]({ ...props, setSearchKeywords, setSearchValue, searchValue, positionType, forceRefresh })
        }
        destroyInactiveTabPane
      >
@@ -196,7 +212,7 @@ const TopicDetail = (props: any) => {
        </TabPane>
        <TabPane tab="ConsumerGroups" key="ConsumerGroups">
          {positionType === 'ConsumerGroups' && (
-            <Consumers searchKeywords={searchKeywords} positionType={positionType} hashData={hashData} />
+            <Consumers searchKeywords={searchKeywords} positionType={positionType} hashData={hashData} key={`${refreshKey}`} />
          )}
        </TabPane>
        <TabPane tab="ACLs" key="ACLs">
--- a/km-console/packages/layout-clusters-fe/src/pages/TopicList/index.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/TopicList/index.tsx
@@ -1,7 +1,22 @@
 /* eslint-disable react/display-name */
 import React, { useState, useEffect } from 'react';
 import { useHistory, useParams } from 'react-router-dom';
-import { AppContainer, Input, ProTable, Select, Switch, Tooltip, Utils, Dropdown, Menu, Button, Divider, Tag } from 'knowdesign';
+import {
+  AppContainer,
+  Input,
+  ProTable,
+  Select,
+  Switch,
+  Tooltip,
+  Utils,
+  Dropdown,
+  Menu,
+  Button,
+  Divider,
+  Tag,
+  Popconfirm,
+  notification,
+} from 'knowdesign';
 import { IconFont } from '@knowdesign/icons';
 import Create from './Create';
 import './index.less';
@@ -85,6 +100,21 @@ const AutoPage = (props: any) => {
        setTopicListLoading(false);
      });
  };
+  const deleteTopicData = (record: any) => {
+    console.log(record, 'record');
+    const params = {
+      clusterId: Number(routeParams.clusterId),
+      topicName: record.topicName,
+    };
+    Utils.post(Api.deleteTopicData(), params).then((data: any) => {
+      if (data === null) {
+        notification.success({
+          message: '清除数据成功',
+        });
+        getTopicsList();
+      }
+    });
+  };
  useEffect(() => {
    getTopicsList();
  }, [sortObj, showInternalTopics, searchKeywords, pageIndex, pageSize]);
@@ -247,7 +277,7 @@ const AutoPage = (props: any) => {
        dataIndex: 'desc',
        key: 'desc',
        fixed: 'right',
-        width: 140,
+        width: 200,
        render: (value: any, record: any) => {
          return (
            <div className="operation-list">
@@ -257,6 +287,19 @@ const AutoPage = (props: any) => {
                <></>
              )}
              {global.hasPermission(ClustersPermissionMap.TOPIC_DEL) ? <Delete record={record} onConfirm={getTopicsList}></Delete> : <></>}
+              {global.hasPermission(ClustersPermissionMap.TOPIC_DEL) ? ( // TODO：替换为清除数据的权限
+                <Popconfirm
+                  placement="topRight"
+                  title={`是否要清空当前Topic的数据？`}
+                  onConfirm={() => deleteTopicData(record)}
+                  okText="是"
+                  cancelText="否"
+                >
+                  <Button type="link">清除数据</Button>
+                </Popconfirm>
+              ) : (
+                <></>
+              )}
            </div>
          );
        },