This is an automated email from the ASF dual-hosted git repository.
lizhimins pushed a commit to branch rocketmq-studio
in repository https://gitbox.apache.org/repos/asf/rocketmq-dashboard.git
The following commit(s) were added to refs/heads/rocketmq-studio by this push:
new 2fe29d34c fix(topic): render the consumer message model values the API
returns (#4804)
2fe29d34c is described below
commit 2fe29d34c84717a09f107562274523d28766c0cc
Author: Apulupie <[email protected]>
AuthorDate: Thu Sep 24 18:17:23 2026 +0800
fix(topic): render the consumer message model values the API returns (#4804)
fix(topic): render the consumer model values the API returns
---
web/src/mock/topics.ts | 22 +++++------
.../pages/instance/__tests__/TopicPage.test.tsx | 45 ++++++++++++++++++++++
web/src/pages/instance/topic.tsx | 13 ++++++-
3 files changed, 68 insertions(+), 12 deletions(-)
diff --git a/web/src/mock/topics.ts b/web/src/mock/topics.ts
index 22c0edd40..fd3a0cafa 100644
--- a/web/src/mock/topics.ts
+++ b/web/src/mock/topics.ts
@@ -390,28 +390,28 @@ export const topicConsumers: Record<string,
ConsumerGroupInfo[]> = {
{
group: 'GID_order_service',
consumeType: 'CLUSTERING',
- messageModel: '集群消费',
+ messageModel: 'CLUSTERING',
consumeTps: 640,
diffTotal: 120,
},
{
group: 'GID_inventory_deduction',
consumeType: 'CLUSTERING',
- messageModel: '集群消费',
+ messageModel: 'CLUSTERING',
consumeTps: 320,
diffTotal: 0,
},
{
group: 'GID_risk_control',
consumeType: 'BROADCASTING',
- messageModel: '广播消费',
+ messageModel: 'BROADCASTING',
consumeTps: 180,
diffTotal: 45,
},
{
group: 'GID_notification_trigger',
consumeType: 'CLUSTERING',
- messageModel: '集群消费',
+ messageModel: 'CLUSTERING',
consumeTps: 140,
diffTotal: 0,
},
@@ -420,14 +420,14 @@ export const topicConsumers: Record<string,
ConsumerGroupInfo[]> = {
{
group: 'GID_user_profile_sync',
consumeType: 'CLUSTERING',
- messageModel: '集群消费',
+ messageModel: 'CLUSTERING',
consumeTps: 2100,
diffTotal: 350,
},
{
group: 'GID_recommendation_engine',
consumeType: 'CLUSTERING',
- messageModel: '集群消费',
+ messageModel: 'CLUSTERING',
consumeTps: 1350,
diffTotal: 0,
},
@@ -436,14 +436,14 @@ export const topicConsumers: Record<string,
ConsumerGroupInfo[]> = {
{
group: 'GID_payment_service',
consumeType: 'CLUSTERING',
- messageModel: '集群消费',
+ messageModel: 'CLUSTERING',
consumeTps: 280,
diffTotal: 0,
},
{
group: 'GID_order_status_update',
consumeType: 'CLUSTERING',
- messageModel: '集群消费',
+ messageModel: 'CLUSTERING',
consumeTps: 140,
diffTotal: 12,
},
@@ -452,14 +452,14 @@ export const topicConsumers: Record<string,
ConsumerGroupInfo[]> = {
{
group: 'GID_warehouse_sync',
consumeType: 'CLUSTERING',
- messageModel: '集群消费',
+ messageModel: 'CLUSTERING',
consumeTps: 340,
diffTotal: 0,
},
{
group: 'GID_stock_alert',
consumeType: 'CLUSTERING',
- messageModel: '集群消费',
+ messageModel: 'CLUSTERING',
consumeTps: 340,
diffTotal: 88,
},
@@ -470,7 +470,7 @@ export const defaultConsumers: ConsumerGroupInfo[] = [
{
group: 'GID_default_consumer',
consumeType: 'CLUSTERING',
- messageModel: '集群消费',
+ messageModel: 'CLUSTERING',
consumeTps: 100,
diffTotal: 0,
},
diff --git a/web/src/pages/instance/__tests__/TopicPage.test.tsx
b/web/src/pages/instance/__tests__/TopicPage.test.tsx
index 530ada3e9..ee38da960 100644
--- a/web/src/pages/instance/__tests__/TopicPage.test.tsx
+++ b/web/src/pages/instance/__tests__/TopicPage.test.tsx
@@ -1158,6 +1158,51 @@ describe('TopicPage', () => {
expect(await screen.findAllByText('不可用')).not.toHaveLength(0);
});
+ it('renders the broadcasting consumer model from the API value with the
broadcast color', async () => {
+ const user = userEvent.setup();
+ mockTopicsList([buildTopics(1)[0]]);
+ topicServiceMocks.getTopicConsumerPage.mockResolvedValue({
+ items: [
+ {
+ group: 'cg-broadcast',
+ consumeType: 'BROADCASTING',
+ messageModel: 'BROADCASTING',
+ consumeTps: 0,
+ diffTotal: 0,
+ },
+ {
+ group: 'cg-aliyun-broadcast',
+ consumeType: 'BROADCASTING',
+ messageModel: 'Broadcasting',
+ consumeTps: 0,
+ diffTotal: 0,
+ },
+ {
+ group: 'cg-clustering',
+ consumeType: 'CLUSTERING',
+ messageModel: 'CLUSTERING',
+ consumeTps: 5,
+ diffTotal: 0,
+ },
+ ],
+ total: 3,
+ page: 1,
+ pageSize: 20,
+ });
+ renderWithProviders();
+
+ await user.click(await screen.findByRole('button', { name: /详情/ }));
+
+ const broadcastTags = await screen.findAllByText('广播消费');
+ expect(broadcastTags).toHaveLength(2);
+ for (const tag of broadcastTags) {
+ expect(tag.closest('.ant-tag')).toHaveClass('ant-tag-orange');
+ }
+ const clusteringTags = await screen.findAllByText('集群消费');
+ expect(clusteringTags).toHaveLength(1);
+ expect(clusteringTags[0].closest('.ant-tag')).toHaveClass('ant-tag-blue');
+ });
+
it('renders subscription group names as links in the topic detail modal',
async () => {
const user = userEvent.setup({ pointerEventsCheck: 0 });
mockTopicsList([buildTopics(1)[0]]);
diff --git a/web/src/pages/instance/topic.tsx b/web/src/pages/instance/topic.tsx
index c883ebd18..0cbaf8580 100644
--- a/web/src/pages/instance/topic.tsx
+++ b/web/src/pages/instance/topic.tsx
@@ -949,7 +949,18 @@ const TopicPageContent = ({
title: '消费模式',
dataIndex: 'messageModel',
key: 'messageModel',
- render: (m: string) => <Tag color={m === '广播消费' ? 'orange' :
'blue'}>{m}</Tag>,
+ render: (m: string) => {
+ // The API sends enum values ("BROADCASTING"/"CLUSTERING" and vendor
case
+ // variants), never the legacy display strings the old comparison
matched.
+ const normalized = (m ?? '').trim().toUpperCase();
+ const isBroadcast = normalized.includes('BROADCAST');
+ const label = isBroadcast
+ ? t('topic.broadcast')
+ : normalized.includes('CLUSTER')
+ ? t('topic.clustering')
+ : m;
+ return <Tag color={isBroadcast ? 'orange' : 'blue'}>{label}</Tag>;
+ },
},
{
title: '消费 TPS',
