didi · Wyb7290 · Sep 10, 2023 · Sep 10, 2023
diff --git 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`),

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

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

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

diff --git 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,25 @@ 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();
+      } else {
+        notification.error({
+          message: '清除数据失败',
+        });
+      }
+    });
+  };
   useEffect(() => {
     getTopicsList();
   }, [sortObj, showInternalTopics, searchKeywords, pageIndex, pageSize]);
@@ -247,7 +281,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 +291,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>
           );
         },