From 95158813b974e6ee0120a12e29a12d51f8c61ab8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=88=B1=E5=96=9D=E8=8D=AF=E7=9A=84=E5=A4=A7=E9=83=8E?= <43955116+HZSUZJ@users.noreply.github.com> Date: Fri, 20 Oct 2023 09:34:29 +0800 Subject: [PATCH] =?UTF-8?q?[Bugfix]=E4=BF=AE=E5=A4=8D=E6=B6=88=E8=B4=B9?= =?UTF-8?q?=E7=BB=84Offset=E9=87=8D=E7=BD=AE=E5=90=8E=EF=BC=8C=E6=8F=90?= =?UTF-8?q?=E7=A4=BA=E9=87=8D=E7=BD=AE=E6=88=90=E5=8A=9F=EF=BC=8C=E4=BD=86?= =?UTF-8?q?=E6=98=AF=E5=89=8D=E7=AB=AF=E4=B8=8D=E5=88=B7=E6=96=B0=E6=95=B0?= =?UTF-8?q?=E6=8D=AE=EF=BC=8COffset=E6=97=A0=E5=8F=98=E5=8C=96=E7=9A=84?= =?UTF-8?q?=E9=97=AE=E9=A2=98=20(#1090)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 请不要在没有先创建Issue的情况下创建Pull Request。 ## 变更的目的是什么 修复消费组Offset重置后，提示重置成功，但是前端不刷新数据，Offset无变化的问题 ## 简短的更新日志 使用pubsub-js解决问题 ## 验证这一变化 ### 重置前： ![7c90f21063995e7a155d30a24f70c82](https://github.com/didi/KnowStreaming/assets/43955116/db10a87d-2353-48f6-bd29-71b6eb47dab9) ### 重置指定分区 ![039cf8a01ced8783ea957ab72187d83](https://github.com/didi/KnowStreaming/assets/43955116/f8cd4ac0-d093-4df2-aab3-915571bdd8de) ![84580ab27f725b68456793a47e0ad72](https://github.com/didi/KnowStreaming/assets/43955116/5ce85211-95a0-4809-accd-d57b141b4132) ### 重置最新offset ![image](https://github.com/didi/KnowStreaming/assets/43955116/227b7939-40ac-4c6c-8e92-03fc16413dce) ### 重置最旧offset ![image](https://github.com/didi/KnowStreaming/assets/43955116/56d08648-ac58-43c9-86cd-f88a2a8ae8dd) 请遵循此清单，以帮助我们快速轻松地整合您的贡献： * [x] 一个 PR（Pull Request的简写）只解决一个问题，禁止一个 PR 解决多个问题； * [x] 确保 PR 有对应的 Issue（通常在您开始处理之前创建），除非是书写错误之类的琐碎更改不需要 Issue ； * [x] 格式化 PR 及 Commit-Log 的标题及内容，例如 #861 。PS：Commit-Log 需要在 Git Commit 代码时进行填写，在 GitHub 上修改不了； * [x] 编写足够详细的 PR 描述，以了解 PR 的作用、方式和原因； * [x] 编写必要的单元测试来验证您的逻辑更正。如果提交了新功能或重大更改，请记住在 test 模块中添加 integration-test； * [x] 确保编译通过，集成测试通过； --- km-console/packages/layout-clusters-fe/package.json | 1 + .../src/pages/ConsumerGroup/ExpandedRow.tsx | 6 ++++++ .../src/pages/ConsumerGroup/ResetOffsetDrawer.tsx | 3 +++ .../src/pages/TopicDetail/ConsumerGroupDetail.tsx | 6 ++++++ .../src/pages/TopicDetail/ResetOffsetDrawer.tsx | 8 ++++++++ 5 files changed, 24 insertions(+) diff --git a/km-console/packages/layout-clusters-fe/package.json b/km-console/packages/layout-clusters-fe/package.json index 62fe6f9c..4453210b 100644 --- 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", diff --git a/km-console/packages/layout-clusters-fe/src/pages/ConsumerGroup/ExpandedRow.tsx b/km-console/packages/layout-clusters-fe/src/pages/ConsumerGroup/ExpandedRow.tsx index 3e951943..85ab81cc 100644 --- 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; diff --git a/km-console/packages/layout-clusters-fe/src/pages/ConsumerGroup/ResetOffsetDrawer.tsx b/km-console/packages/layout-clusters-fe/src/pages/ConsumerGroup/ResetOffsetDrawer.tsx index 75cc390a..f2fa3c83 100644 --- 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失败', diff --git a/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/ConsumerGroupDetail.tsx b/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/ConsumerGroupDetail.tsx index bd502b1a..0183dca5 100644 --- 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); diff --git a/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/ResetOffsetDrawer.tsx b/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/ResetOffsetDrawer.tsx index ed948e8c..25674eaa 100644 --- 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失败',