zhaohai666 opened a new pull request, #480:
URL: https://github.com/apache/rocketmq-dashboard/pull/480
## Basic Info
- Branch: feature/studio-group-management-page (target repo: rocketmq-studio)
- Total commits: 2
- 9fd182f [studio] feat: add GroupManagement page
- b05f6d7 [studio] test: add GroupManagement page component tests
- Code changes: 4 files changed, +709 lines
## Changed Files
| File | Changes | Description |
|------|---------|-------------|
| web/src/App.tsx | +2 | Register route `studio/group-management` mapped to
GroupManagementPage |
| web/src/i18n/translations.ts | +59 | Add 25 `brokerCluster.*` keys and 34
new `groupMgmt.*` i18n translation keys |
| web/src/pages/studio/GroupManagement.tsx | +551 | Consumer group
management page component with static mock data |
| web/src/pages/studio/__tests__/GroupManagement.test.tsx | +97 | Implement
7 page component test cases |
## Page Functionalities
### Consumer Group Table
Table columns:
Consumer group name (clickable to open detail modal), namespace, cluster,
online instance count, consume mode tag (CLUSTERING = blue, BROADCASTING =
orange), message backlog (threshold colored), group status tag
(running/warning/stopped), action buttons (Detail / Config)
Backlog coloring rules:
- Backlog > 10000: Red
- Backlog > 0: Orange
- Backlog = 0: Green
### Search & Filter
Real-time fuzzy filtering by consumer group name via text input box.
### Detail Modal with Multi Tabs
1. Overview Tab
- Three statistic cards: Online Instances / Total Message Backlog /
Subscribed Topic Count
- Descriptions panel showing full group info: group name, namespace,
cluster, consume mode, consume type, consume delay, max retry times, creation
time, subscribed topic list
- Subscription table: Topic, consistency flag, subscription mode, filter
expression, view distribution button
2. Online Instances Tab
Table: Instance ID, address, version, running status
3. Consume Progress Tab
Table: Topic, QueueId, Broker Offset, Consumer Offset, offset diff value
Highlight diff values over 100 with red text
### Auto Refresh Toggle
Switch component to switch between real-time auto refresh and manual refresh
mode.
> ⚠️ Note: This page uses hardcoded static mock data, no real backend API
integration yet.
## Internal TypeScript Interfaces
- GroupRecord: group, namespace, cluster, count, consumeType, messageModel,
diff, status
- SubscriptionRecord: topic, consistency, subMode, expression
- InstanceRecord: instanceId, address, version, status
- ProgressRecord: topic, queueId, brokerOffset, consumerOffset, diff
## I18n Keys (34 groupMgmt series)
groupMgmt.title, groupName, namespace, cluster, onlineInstances,
consumeMode, clustering, broadcasting, diff, backlogAlert, stopped,
createGroup, searchPlaceholder, manual, overview, totalDiff, subscribedTopics,
online, consumeType, consumeDelay, maxRetry, createdAt, subscription, topic,
consistency, consistent, inconsistent, subMode, expression, viewDistribution,
instanceId, consumeProgress
## Test Coverage (7 component test cases)
1. Should render the page title correctly
2. Should render search input with matching placeholder text
3. Should render create group button
4. Should render reset button
5. Should display mock consumer group data (order-consumer-group,
payment-consumer-group) in table
6. Should render detail action button for each table row
7. Should filter group list when typing keyword "order" (only
order-consumer-group remains)
## Build & Test Validation
✅ `npm run build` compiles successfully
✅ All 24 test cases across 4 test files passed
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
