From 772e753c2e795f62db29701456dc8852c0c2a183 Mon Sep 17 00:00:00 2001 From: erge Date: Sun, 10 Sep 2023 15:41:40 +0800 Subject: [PATCH 1/2] =?UTF-8?q?'[Feature]=E6=96=B0=E5=A2=9E=E5=88=A0?= =?UTF-8?q?=E9=99=A4Group=E6=88=96GroupOffset=E5=8A=9F=E8=83=BD(#1040)'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../layout-clusters-fe/src/api/index.ts | 2 +- .../src/pages/ConsumerGroup/Delete.tsx | 104 ++++++++++++++++++ .../src/pages/ConsumerGroup/Detail.tsx | 21 +++- .../src/pages/ConsumerGroup/config.tsx | 29 ++++- .../src/pages/ConsumerGroup/index.tsx | 7 +- 5 files changed, 157 insertions(+), 6 deletions(-) create mode 100644 km-console/packages/layout-clusters-fe/src/pages/ConsumerGroup/Delete.tsx diff --git a/km-console/packages/layout-clusters-fe/src/api/index.ts b/km-console/packages/layout-clusters-fe/src/api/index.ts index 95b847491..d07599524 100755 --- 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`), 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 new file mode 100644 index 000000000..ae7f959aa --- /dev/null +++ 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 ( + <> + + { + setDelDialogVisble(false); + }} + okText="删除" + okButtonProps={{ + danger: true, + size: 'small', + style: { + paddingLeft: '16px', + paddingRight: '16px', + }, + }} + cancelButtonProps={{ + size: 'small', + style: { + paddingLeft: '16px', + paddingRight: '16px', + }, + }} + > + {/*
+ + 会删除Topic的全部消息数据和ACL权限！请再次输入Topic名称进行确认！ +
*/} +
+ {record.name} + ({ + validator(_, value) { + if (!value) { + return Promise.reject(new Error('请输入Group名称')); + } else if (value !== record.name) { + return Promise.reject(new Error('请输入正确的Group名称')); + } + return Promise.resolve(); + }, + }), + ]} + > + + +
+ + + ); +}; 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 index f01bee14d..44d613740 100644 --- 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 index 8edd92802..40b4a7f4c 100644 --- 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 ( +
+ +
+ ); + }, + }, ]; 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 (
arg.resetOffset(record)}>重置Offset + arg.deleteOffset(record)} + okText="是" + cancelText="否" + > + +
); }, 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 index 8e0bb6fba..b54a5878a 100644 --- 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: { From 876e8d35e735f0d69e92d0d1772ff6e9359b1700 Mon Sep 17 00:00:00 2001 From: erge Date: Sun, 24 Sep 2023 23:40:01 +0800 Subject: [PATCH 2/2] =?UTF-8?q?[Optimize]Connect=E6=8F=90=E4=BA=A4?= =?UTF-8?q?=E4=BB=BB=E5=8A=A1=E5=8F=98=E6=9B=B4=E4=B8=BA=E5=8F=AA=E4=BF=9D?= =?UTF-8?q?=E5=AD=98=E7=94=A8=E6=88=B7=E4=BF=AE=E6=94=B9=E7=9A=84=E9=85=8D?= =?UTF-8?q?=E7=BD=AE,=E5=B9=B6=E4=BF=AE=E5=A4=8DJSON=E6=A8=A1=E5=BC=8F?= =?UTF-8?q?=E4=B8=8B=E9=85=8D=E7=BD=AE=E5=B1=95=E7=A4=BA=E4=B8=8D=E5=85=A8?= =?UTF-8?q?(#1047)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/pages/Connect/AddConnector.tsx | 23 +++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/km-console/packages/layout-clusters-fe/src/pages/Connect/AddConnector.tsx b/km-console/packages/layout-clusters-fe/src/pages/Connect/AddConnector.tsx index ef6a55bdf..a95d966ae 100644 --- 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)); @@ -957,6 +964,7 @@ export default forwardRef( }) => void ) => { const promises: Promise[] = []; + const compareConfig = stepsFormRef.current[0].getFieldValue('configs'); // 获取步骤一的form信息 Object.values(stepsFormRef.current).forEach((form, i) => { const promise = form .validateFields() @@ -987,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, + configs: newCompareConfig, }, }); },