zhaohai666 opened a new pull request, #482:
URL: https://github.com/apache/rocketmq-dashboard/pull/482
# PR Title
`[studio] feat: add Proxy management page`
## PR Description
```markdown
## Branch Info
- Branch: feature/studio-proxy-page (target repo: rocketmq-studio)
- Total changed files: 5, +568 lines
- Total commits: 3
## Changed Files List
| File | Line Changes | Description |
|------|--------------|-------------|
| proxy.ts | +53 | Proxy API layer including 2 interfaces and 2 request
functions |
| proxy.test.ts | +76 | Proxy API unit tests with 4 test cases |
| Proxy.tsx | +431 | Full Proxy management page component |
| translations.ts | +6 | Add 6 new i18n translation keys for proxy module |
| App.tsx | +2 | Register new proxy page route |
## API Layer (proxy.ts)
### Type Interfaces
1. ProxyHomePageData
```typescript
{ proxyAddrList: string[], currentProxyAddr: string }
```
2. ProxyNode
```typescript
{ address, status, version, connections, tps, memory, cpu, uptime,
isSelected }
```
### API Functions
1. `queryProxyHomePage()`
- Method: GET
- Endpoint: `/proxy/homePage.query`
- Return: ProxyHomePageData
2. `addProxyAddr(address)`
- Method: POST
- Endpoint: `/proxy/addProxyAddr.do`
- Request Body: form-urlencoded with `newProxyAddr` parameter
## API Test Coverage (proxy.test.ts, 4 cases total)
1. queries proxy home page data
Verify GET response returns valid `proxyAddrList` and `currentProxyAddr`
2. handles empty proxy address list
Test empty address list and blank current proxy address response
3. adds a proxy address with form-urlencoded content type
Validate request header `Content-Type: application/x-www-form-urlencoded`
4. adds a proxy address with localhost
Confirm colon `:` in localhost address is URL encoded to `%3A`
## Page Component Features (Proxy.tsx)
### 1. Cluster Statistics Cards
Four statistic panels: Total nodes, Healthy nodes / All nodes, Total
connections, Total TPS
### 2. Proxy Node Table
Table columns:
Address (highlighted & tagged for current selected node), status colored
tag, version, sortable connections, sortable TPS, memory progress bar (red
highlight when >80%), CPU progress bar (red highlight when >80%), uptime,
operation buttons
### 3. View Node Config
Pop up Modal with Descriptions component to display all node configuration
items
### 4. Add New Proxy Node
Modal form with address input; regex validation enforces `host:port` format
### 5. Remove Proxy Node
Popconfirm secondary confirmation before deletion; the currently selected
node cannot be removed
### 6. Manual Refresh Button
Trigger re-fetch of full proxy node list
### Status Render Logic
The `renderStatus()` function returns colored tags based on node status
value:
- Healthy: Green CheckCircle
- Unhealthy: Red XCircle
- Warning: Yellow Warning icon
## New I18n Keys (6 total)
| Key | English Text |
|-----|--------------|
| proxy.version | Version |
| proxy.status | Status |
| proxy.healthy | Healthy |
| proxy.unhealthy | Unhealthy |
| proxy.warning | Warning |
| proxy.confirmRemove | Are you sure to remove this node? |
## Routing Setup
Add route entry in App.tsx:
`<Route path="studio/proxy" element={<ProxyPage />} />`
## Build Fixes
1. Missing Dashboard icon from `@phosphor-icons/react`: replaced with Gauge
icon
2. Remove unsupported `icon={Gauge}` prop from PageHeader component to
resolve type error
3. Add optional chaining `config.headers?.` to avoid undefined access error
in proxy.test.ts
## Validation Results
✅ `npm run build` completes successfully
✅ All 32 test cases across 6 test files pass (including 4 Proxy API tests)
```
--
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]
