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 552409185 fix(web): key the protocol tag map by the values the API
returns (#4741)
552409185 is described below
commit 5524091858e9aa7217d524539447819d6db718a2
Author: Apulupie <[email protected]>
AuthorDate: Mon Sep 21 21:12:30 2026 +0800
fix(web): key the protocol tag map by the values the API returns (#4741)
`PROTOCOL_MAP` in `web/src/constants/theme.ts` was keyed by `REMOTING` and
`GRPC`, but `Protocol` is `{ gRPC, Remoting }` with no `@JsonValue` or custom
serializer, so `ConsumerInstanceVO.protocol` reaches the browser as the enum
name. The consumer page looks the value up with a fallback that real data
always took: `t()`'s key fallback happened to render the label correctly, which
hid the fact that the colour degraded to the grey default. Mock mode looked
fine because `mock/consumers. [...]
The map is rekeyed to the enum names, and the mock union type, the mock
rows and the two `ConsumerPage` fixtures that copied the uppercase spelling
follow. `cluster/clients.tsx` keeps its own local `protocolConfig`, which was
already keyed correctly, and a new case in `theme.test.ts` pins the key set so
the map cannot drift from the enum again.
Two inert fixtures in `consumerGroupDiagnostics.test.ts` still spell the
protocol in uppercase; that util never reads the field, so they are a cosmetic
follow-up.
Fixes #4742
---
web/src/constants/__tests__/theme.test.ts | 7 ++
web/src/constants/theme.ts | 4 +-
web/src/mock/consumers.ts | 82 +++++++++++-----------
.../pages/instance/__tests__/ConsumerPage.test.tsx | 4 +-
4 files changed, 52 insertions(+), 45 deletions(-)
diff --git a/web/src/constants/__tests__/theme.test.ts
b/web/src/constants/__tests__/theme.test.ts
index c3945f0dd..789322570 100644
--- a/web/src/constants/__tests__/theme.test.ts
+++ b/web/src/constants/__tests__/theme.test.ts
@@ -84,6 +84,13 @@ describe('theme constants', () => {
expect(val.color, `PROTOCOL_MAP[${key}].color should
exist`).toBeDefined();
}
});
+
+ it('is keyed by the values the Protocol enum returns on the wire', () => {
+ // The server serializes
org.apache.rocketmq.studio.common.domain.enums.Protocol
+ // by its enum name, which is `gRPC` / `Remoting` — not the uppercase
shells this
+ // map used to be keyed by.
+ expect(Object.keys(PROTOCOL_MAP).sort()).toEqual(['Remoting', 'gRPC']);
+ });
});
describe('THEME_COLORS', () => {
diff --git a/web/src/constants/theme.ts b/web/src/constants/theme.ts
index 58ff5406e..08ea91088 100644
--- a/web/src/constants/theme.ts
+++ b/web/src/constants/theme.ts
@@ -64,6 +64,6 @@ export const TOPIC_TYPE_MAP: Record<string, { labelKey:
string; color: TagProps[
* Protocol map — labels are i18n keys, resolved at render time via t().
*/
export const PROTOCOL_MAP: Record<string, { labelKey: string; color:
TagProps['color'] }> = {
- REMOTING: { labelKey: 'theme.protocolRemoting', color: 'geekblue' },
- GRPC: { labelKey: 'theme.protocolGrpc', color: 'green' },
+ Remoting: { labelKey: 'theme.protocolRemoting', color: 'geekblue' },
+ gRPC: { labelKey: 'theme.protocolGrpc', color: 'green' },
};
diff --git a/web/src/mock/consumers.ts b/web/src/mock/consumers.ts
index 1898563de..9275aa797 100644
--- a/web/src/mock/consumers.ts
+++ b/web/src/mock/consumers.ts
@@ -19,7 +19,7 @@
export interface ConsumerInstance {
clientId: string;
- protocol: 'REMOTING' | 'GRPC';
+ protocol: 'gRPC' | 'Remoting';
address: string;
subscribedTopics: string[];
lastHeartbeat: string;
@@ -82,7 +82,7 @@ export const mockConsumerGroups: ConsumerGroup[] = [
instances: [
{
clientId: '[email protected]',
- protocol: 'GRPC',
+ protocol: 'gRPC',
address: '10.0.1.12:49152',
subscribedTopics: ['order-create', 'order-status-change'],
lastHeartbeat: '2026-07-01 18:32:05',
@@ -90,7 +90,7 @@ export const mockConsumerGroups: ConsumerGroup[] = [
},
{
clientId: '[email protected]',
- protocol: 'GRPC',
+ protocol: 'gRPC',
address: '10.0.1.13:49200',
subscribedTopics: ['order-create', 'payment-callback'],
lastHeartbeat: '2026-07-01 18:32:03',
@@ -98,7 +98,7 @@ export const mockConsumerGroups: ConsumerGroup[] = [
},
{
clientId: '[email protected]',
- protocol: 'GRPC',
+ protocol: 'gRPC',
address: '10.0.1.14:49300',
subscribedTopics: ['order-status-change', 'payment-callback'],
lastHeartbeat: '2026-07-01 18:32:01',
@@ -106,7 +106,7 @@ export const mockConsumerGroups: ConsumerGroup[] = [
},
{
clientId: '[email protected]',
- protocol: 'REMOTING',
+ protocol: 'Remoting',
address: '10.0.1.15:49400',
subscribedTopics: ['order-create', 'order-status-change',
'payment-callback'],
lastHeartbeat: '2026-07-01 18:31:58',
@@ -114,7 +114,7 @@ export const mockConsumerGroups: ConsumerGroup[] = [
},
{
clientId: '[email protected]',
- protocol: 'GRPC',
+ protocol: 'gRPC',
address: '10.0.1.16:49500',
subscribedTopics: ['order-create'],
lastHeartbeat: '2026-07-01 18:32:04',
@@ -122,7 +122,7 @@ export const mockConsumerGroups: ConsumerGroup[] = [
},
{
clientId: '[email protected]',
- protocol: 'GRPC',
+ protocol: 'gRPC',
address: '10.0.1.17:49600',
subscribedTopics: ['order-status-change', 'payment-callback'],
lastHeartbeat: '2026-07-01 18:32:02',
@@ -148,7 +148,7 @@ export const mockConsumerGroups: ConsumerGroup[] = [
instances: [
{
clientId: '[email protected]',
- protocol: 'GRPC',
+ protocol: 'gRPC',
address: '10.0.2.10:50100',
subscribedTopics: ['payment-callback', 'refund-event'],
lastHeartbeat: '2026-07-01 18:32:00',
@@ -156,7 +156,7 @@ export const mockConsumerGroups: ConsumerGroup[] = [
},
{
clientId: '[email protected]',
- protocol: 'GRPC',
+ protocol: 'gRPC',
address: '10.0.2.11:50200',
subscribedTopics: ['payment-callback'],
lastHeartbeat: '2026-07-01 18:31:58',
@@ -164,7 +164,7 @@ export const mockConsumerGroups: ConsumerGroup[] = [
},
{
clientId: '[email protected]',
- protocol: 'GRPC',
+ protocol: 'gRPC',
address: '10.0.2.12:50300',
subscribedTopics: ['refund-event'],
lastHeartbeat: '2026-07-01 18:32:02',
@@ -172,7 +172,7 @@ export const mockConsumerGroups: ConsumerGroup[] = [
},
{
clientId: '[email protected]',
- protocol: 'REMOTING',
+ protocol: 'Remoting',
address: '10.0.2.13:50400',
subscribedTopics: ['payment-callback', 'refund-event'],
lastHeartbeat: '2026-07-01 18:31:55',
@@ -198,7 +198,7 @@ export const mockConsumerGroups: ConsumerGroup[] = [
instances: [
{
clientId: '[email protected]',
- protocol: 'GRPC',
+ protocol: 'gRPC',
address: '10.0.3.20:51100',
subscribedTopics: ['user-activity-log', 'user-profile-change'],
lastHeartbeat: '2026-07-01 18:31:50',
@@ -206,7 +206,7 @@ export const mockConsumerGroups: ConsumerGroup[] = [
},
{
clientId: '[email protected]',
- protocol: 'GRPC',
+ protocol: 'gRPC',
address: '10.0.3.21:51200',
subscribedTopics: ['user-activity-log'],
lastHeartbeat: '2026-07-01 18:31:48',
@@ -214,7 +214,7 @@ export const mockConsumerGroups: ConsumerGroup[] = [
},
{
clientId: '[email protected]',
- protocol: 'REMOTING',
+ protocol: 'Remoting',
address: '10.0.3.22:51300',
subscribedTopics: ['user-activity-log', 'user-profile-change'],
lastHeartbeat: '2026-07-01 18:31:52',
@@ -241,7 +241,7 @@ export const mockConsumerGroups: ConsumerGroup[] = [
instances: [
{
clientId: '[email protected]',
- protocol: 'GRPC',
+ protocol: 'gRPC',
address: '10.0.4.30:52100',
subscribedTopics: ['inventory-sync', 'stock-alert'],
lastHeartbeat: '2026-07-01 18:31:45',
@@ -249,7 +249,7 @@ export const mockConsumerGroups: ConsumerGroup[] = [
},
{
clientId: '[email protected]',
- protocol: 'GRPC',
+ protocol: 'gRPC',
address: '10.0.4.31:52200',
subscribedTopics: ['inventory-sync'],
lastHeartbeat: '2026-07-01 18:31:42',
@@ -275,7 +275,7 @@ export const mockConsumerGroups: ConsumerGroup[] = [
instances: [
{
clientId: '[email protected]',
- protocol: 'GRPC',
+ protocol: 'gRPC',
address: '10.0.5.40:53100',
subscribedTopics: ['app-log', 'access-log'],
lastHeartbeat: '2026-07-01 18:32:08',
@@ -283,7 +283,7 @@ export const mockConsumerGroups: ConsumerGroup[] = [
},
{
clientId: '[email protected]',
- protocol: 'GRPC',
+ protocol: 'gRPC',
address: '10.0.5.41:53200',
subscribedTopics: ['app-log', 'error-log'],
lastHeartbeat: '2026-07-01 18:32:06',
@@ -291,7 +291,7 @@ export const mockConsumerGroups: ConsumerGroup[] = [
},
{
clientId: '[email protected]',
- protocol: 'GRPC',
+ protocol: 'gRPC',
address: '10.0.5.42:53300',
subscribedTopics: ['access-log', 'error-log'],
lastHeartbeat: '2026-07-01 18:32:04',
@@ -299,7 +299,7 @@ export const mockConsumerGroups: ConsumerGroup[] = [
},
{
clientId: '[email protected]',
- protocol: 'GRPC',
+ protocol: 'gRPC',
address: '10.0.5.43:53400',
subscribedTopics: ['app-log'],
lastHeartbeat: '2026-07-01 18:32:02',
@@ -307,7 +307,7 @@ export const mockConsumerGroups: ConsumerGroup[] = [
},
{
clientId: '[email protected]',
- protocol: 'GRPC',
+ protocol: 'gRPC',
address: '10.0.5.44:53500',
subscribedTopics: ['access-log'],
lastHeartbeat: '2026-07-01 18:32:00',
@@ -315,7 +315,7 @@ export const mockConsumerGroups: ConsumerGroup[] = [
},
{
clientId: '[email protected]',
- protocol: 'GRPC',
+ protocol: 'gRPC',
address: '10.0.5.45:53600',
subscribedTopics: ['error-log'],
lastHeartbeat: '2026-07-01 18:31:58',
@@ -323,7 +323,7 @@ export const mockConsumerGroups: ConsumerGroup[] = [
},
{
clientId: '[email protected]',
- protocol: 'REMOTING',
+ protocol: 'Remoting',
address: '10.0.5.46:53700',
subscribedTopics: ['app-log', 'access-log', 'error-log'],
lastHeartbeat: '2026-07-01 18:31:55',
@@ -331,7 +331,7 @@ export const mockConsumerGroups: ConsumerGroup[] = [
},
{
clientId: '[email protected]',
- protocol: 'GRPC',
+ protocol: 'gRPC',
address: '10.0.5.47:53800',
subscribedTopics: ['app-log', 'error-log'],
lastHeartbeat: '2026-07-01 18:31:52',
@@ -357,7 +357,7 @@ export const mockConsumerGroups: ConsumerGroup[] = [
instances: [
{
clientId: '[email protected]',
- protocol: 'GRPC',
+ protocol: 'gRPC',
address: '10.0.6.50:54100',
subscribedTopics: ['notification-push'],
lastHeartbeat: '2026-07-01 18:32:10',
@@ -365,7 +365,7 @@ export const mockConsumerGroups: ConsumerGroup[] = [
},
{
clientId: '[email protected]',
- protocol: 'GRPC',
+ protocol: 'gRPC',
address: '10.0.6.51:54200',
subscribedTopics: ['notification-push', 'sms-gateway'],
lastHeartbeat: '2026-07-01 18:32:08',
@@ -373,7 +373,7 @@ export const mockConsumerGroups: ConsumerGroup[] = [
},
{
clientId: '[email protected]',
- protocol: 'GRPC',
+ protocol: 'gRPC',
address: '10.0.6.52:54300',
subscribedTopics: ['sms-gateway'],
lastHeartbeat: '2026-07-01 18:32:06',
@@ -399,7 +399,7 @@ export const mockConsumerGroups: ConsumerGroup[] = [
instances: [
{
clientId: '[email protected]',
- protocol: 'GRPC',
+ protocol: 'gRPC',
address: '10.0.7.60:55100',
subscribedTopics: ['ai-task-dispatch', 'model-inference-request'],
lastHeartbeat: '2026-07-01 18:32:12',
@@ -407,7 +407,7 @@ export const mockConsumerGroups: ConsumerGroup[] = [
},
{
clientId: '[email protected]',
- protocol: 'GRPC',
+ protocol: 'gRPC',
address: '10.0.7.61:55200',
subscribedTopics: ['ai-task-dispatch'],
lastHeartbeat: '2026-07-01 18:32:10',
@@ -415,7 +415,7 @@ export const mockConsumerGroups: ConsumerGroup[] = [
},
{
clientId: '[email protected]',
- protocol: 'GRPC',
+ protocol: 'gRPC',
address: '10.0.7.62:55300',
subscribedTopics: ['model-inference-request'],
lastHeartbeat: '2026-07-01 18:32:08',
@@ -423,7 +423,7 @@ export const mockConsumerGroups: ConsumerGroup[] = [
},
{
clientId: '[email protected]',
- protocol: 'GRPC',
+ protocol: 'gRPC',
address: '10.0.7.63:55400',
subscribedTopics: ['ai-task-dispatch', 'model-inference-request'],
lastHeartbeat: '2026-07-01 18:32:06',
@@ -449,7 +449,7 @@ export const mockConsumerGroups: ConsumerGroup[] = [
instances: [
{
clientId: '[email protected]',
- protocol: 'GRPC',
+ protocol: 'gRPC',
address: '10.0.8.70:56100',
subscribedTopics: ['metrics-raw', 'trace-span'],
lastHeartbeat: '2026-07-01 18:31:40',
@@ -457,7 +457,7 @@ export const mockConsumerGroups: ConsumerGroup[] = [
},
{
clientId: '[email protected]',
- protocol: 'REMOTING',
+ protocol: 'Remoting',
address: '10.0.8.71:56200',
subscribedTopics: ['metrics-raw', 'trace-span'],
lastHeartbeat: '2026-07-01 18:31:38',
@@ -483,7 +483,7 @@ export const mockConsumerGroups: ConsumerGroup[] = [
instances: [
{
clientId: '[email protected]',
- protocol: 'GRPC',
+ protocol: 'gRPC',
address: '10.0.9.80:57100',
subscribedTopics: ['transaction-event', 'login-event'],
lastHeartbeat: '2026-07-01 18:32:15',
@@ -491,7 +491,7 @@ export const mockConsumerGroups: ConsumerGroup[] = [
},
{
clientId: '[email protected]',
- protocol: 'GRPC',
+ protocol: 'gRPC',
address: '10.0.9.81:57200',
subscribedTopics: ['transaction-event', 'payment-callback'],
lastHeartbeat: '2026-07-01 18:32:13',
@@ -499,7 +499,7 @@ export const mockConsumerGroups: ConsumerGroup[] = [
},
{
clientId: '[email protected]',
- protocol: 'GRPC',
+ protocol: 'gRPC',
address: '10.0.9.82:57300',
subscribedTopics: ['login-event', 'payment-callback'],
lastHeartbeat: '2026-07-01 18:32:11',
@@ -507,7 +507,7 @@ export const mockConsumerGroups: ConsumerGroup[] = [
},
{
clientId: '[email protected]',
- protocol: 'GRPC',
+ protocol: 'gRPC',
address: '10.0.9.83:57400',
subscribedTopics: ['transaction-event', 'login-event',
'payment-callback'],
lastHeartbeat: '2026-07-01 18:32:09',
@@ -515,7 +515,7 @@ export const mockConsumerGroups: ConsumerGroup[] = [
},
{
clientId: '[email protected]',
- protocol: 'REMOTING',
+ protocol: 'Remoting',
address: '10.0.9.84:57500',
subscribedTopics: ['transaction-event'],
lastHeartbeat: '2026-07-01 18:32:07',
@@ -542,7 +542,7 @@ export const mockConsumerGroups: ConsumerGroup[] = [
instances: [
{
clientId: '[email protected]',
- protocol: 'GRPC',
+ protocol: 'gRPC',
address: '10.0.10.90:58100',
subscribedTopics: ['binlog-event', 'schema-change'],
lastHeartbeat: '2026-07-01 18:31:55',
@@ -550,7 +550,7 @@ export const mockConsumerGroups: ConsumerGroup[] = [
},
{
clientId: '[email protected]',
- protocol: 'GRPC',
+ protocol: 'gRPC',
address: '10.0.10.91:58200',
subscribedTopics: ['binlog-event'],
lastHeartbeat: '2026-07-01 18:31:53',
@@ -558,7 +558,7 @@ export const mockConsumerGroups: ConsumerGroup[] = [
},
{
clientId: '[email protected]',
- protocol: 'GRPC',
+ protocol: 'gRPC',
address: '10.0.10.92:58300',
subscribedTopics: ['binlog-event', 'schema-change'],
lastHeartbeat: '2026-07-01 18:31:50',
diff --git a/web/src/pages/instance/__tests__/ConsumerPage.test.tsx
b/web/src/pages/instance/__tests__/ConsumerPage.test.tsx
index f77e4477c..1873a3993 100644
--- a/web/src/pages/instance/__tests__/ConsumerPage.test.tsx
+++ b/web/src/pages/instance/__tests__/ConsumerPage.test.tsx
@@ -710,7 +710,7 @@ describe('Consumer page', () => {
instances: [
{
clientId: '[email protected]',
- protocol: 'GRPC',
+ protocol: 'gRPC',
address: '10.0.0.1:49152',
subscribedTopics: ['remote-topic'],
lastHeartbeat: '2026-07-23T00:00:00Z',
@@ -718,7 +718,7 @@ describe('Consumer page', () => {
},
{
clientId: '[email protected]',
- protocol: 'REMOTING',
+ protocol: 'Remoting',
address: '10.0.0.2:49152',
subscribedTopics: [],
lastHeartbeat: '2026-07-23T00:00:00Z',
