[Feature]新增删除Group或GroupOffset功能(#1040) (#1144)

请不要在没有先创建Issue的情况下创建Pull Request。

## 变更的目的是什么

XXXXX

## 简短的更新日志

XX

## 验证这一变化

XXXX

请遵循此清单，以帮助我们快速轻松地整合您的贡献：

* [ ] 一个 PR（Pull Request的简写）只解决一个问题，禁止一个 PR 解决多个问题；
* [ ] 确保 PR 有对应的 Issue（通常在您开始处理之前创建），除非是书写错误之类的琐碎更改不需要 Issue ；
* [ ] 格式化 PR 及 Commit-Log 的标题及内容，例如 #861 。PS：Commit-Log 需要在 Git Commit
代码时进行填写，在 GitHub 上修改不了；
* [ ] 编写足够详细的 PR 描述，以了解 PR 的作用、方式和原因；
* [ ] 编写必要的单元测试来验证您的逻辑更正。如果提交了新功能或重大更改，请记住在 test 模块中添加 integration-test；
* [ ] 确保编译通过，集成测试通过；

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`),

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>
+    </>
+  );
+};

km-console/packages/layout-clusters-fe/src/pages/ConsumerGroup/Detail.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { useParams, useHistory } from 'react-router-dom';
-import { Button, Space, Divider, 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';
@@ -112,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 });
@@ -199,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,

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>
         );
       },

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: {