zhaohai666 opened a new pull request, #481:
URL: https://github.com/apache/rocketmq-dashboard/pull/481
## Basic Info
- Branch: feature/studio-litetopic-page (target repo: rocketmq-studio)
- Total commits: 3
1. 4004284 [studio] feat: add LiteTopic page
2. 39a75da [studio] test: add LiteTopic API unit tests
3. 7bcda6b [studio] fix: remove unsupported icon prop from PageHeader in
LiteTopic
- Code changes: 5 files changed, +1021 lines
## Changed Files
| File | Changes | Description |
|------|---------|-------------|
| web/src/App.tsx | +2 | Register route `studio/lite-topic` mapped to
LiteTopicPage |
| web/src/api/liteTopic.ts | +105 | LiteTopic API module with complete
TypeScript type definitions |
| web/src/api/liteTopic.test.ts | +156 | 8 unit test cases for LiteTopic
backend APIs |
| web/src/i18n/translations.ts | +14 | Add 14 translation keys prefixed with
`liteTopic.*` |
| web/src/pages/studio/LiteTopic.tsx | +744 | Full LiteTopic management page
component |
## API Layer (liteTopic.ts)
| Function | HTTP Method | Endpoint | Return Type |
|----------|-------------|----------|-------------|
| queryLiteTopicList(pattern?, namespace?) | GET |
/liteTopic/list?pattern=&namespace= | LiteTopicItem[] |
| queryLiteTopicSession(sessionId) | GET | /liteTopic/session/{sessionId} |
LiteTopicSession |
| extendLiteTopicTTL(topicPattern, newTTL) | POST | /liteTopic/extendTTL |
void |
| queryLiteTopicQuota(namespace?) | GET | /liteTopic/quota?namespace= |
LiteTopicQuota |
| queryLiteTopicCapability() | GET | /liteTopic/capability |
LiteTopicCapability |
### TypeScript Interfaces
1. LiteTopicQuota
`currentTopicCount, maxTopicCount, currentSessionCount, maxSessionCount,
currentCreationRate, maxCreationRate, usageRate?, sessionUsageRate?,
defaultTTL?, maxTTL?, remainingQuota?, consumerDensity?`
2. LiteTopicItem
`topicPattern, topicCount?, consumerCount?, totalBacklog?, averageTTL?,
ttlStatus?, lastActiveTime?, sessionIds?`
3. LiteTopicSession
`sessionId, clientId?, clientAddress?, parentTopic?, consumerGroup?,
createTime?, lastActiveTime?, ttl?, ttlRemaining?, status?, totalMessages?,
consumedMessages?, pendingMessages?, popProgress?, liteTopicCreationCount?,
liteTopics?`
4. LiteTopicCapability
`supported`
## Page Functionalities
### 1. Capability Check
Invoke `queryLiteTopicCapability()` on page mount; show Alert warning if
LiteTopic feature is unsupported.
### 2. Quota Dashboard
- 3 circular progress charts: Topic usage rate / Session usage rate /
Creation rate
- 4 statistic cards: Default TTL, Max TTL, Remaining Quota, Consumer Density
### 3. Search & Filter Bar
Text input for topic pattern, namespace dropdown selector, search trigger
button.
### 4. LiteTopic Data Table
Columns: Topic Pattern, sortable Topic Count, sortable Consumer Count,
sortable total backlog (threshold color), sortable formatted average TTL,
colored TTL status tag, sortable last active time, action buttons (Extend TTL /
View Session)
### 5. Session Detail Drawer
- Descriptions panel: sessionId, clientId, clientAddress, parentTopic,
consumerGroup, createTime, lastActive, ttl, ttlRemaining, status, creationCount
- 3 statistic cards: total messages, consumed messages, pending messages
- Progress bars for consume rate and pop progress
- Embedded LiteTopic sub table
### 6. Extend TTL Modal
Form fields: read-only topicPattern, numeric input for newTTL
### TTL Status Tag Color Rules
- ACTIVE: Green
- EXPIRING_SOON: Orange
- EXPIRED: Red
## I18n Keys (14 liteTopic series)
liteTopic.defaultTtl, maxTtl, remainingQuota, consumerDensity, newTtl,
newTtlPlaceholder, extendTtlModalTitle, popProgress, sessionStatus,
creationCount, liteTopics
## API Test Coverage (8 test cases total)
1. Query lite topic list without filter parameters, validate returned
topicPattern
2. Query lite topic list with pattern and namespace, verify request query
params
3. Query single lite topic session by sessionId, validate sessionId and
popProgress fields
4. Extend lite topic TTL via POST API, verify request body carries
topicPattern and newTTL
5. Query namespace-free lite topic quota, validate currentTopicCount,
maxTopicCount and defaultTTL
6. Query lite topic quota with specified namespace, verify namespace query
param
7. Check lite topic capability when feature is supported (supported: true)
8. Check lite topic capability when feature is unsupported (supported: false)
## Build Fix
Fix TS2322 type error in PageHeader: removed two unsupported `icon={Gauge}`
props which violate component prop constraints.
## Build & Test Validation
✅ `npm run build` compiles without errors
✅ All 36 test cases across 6 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]
