[PR] [Studio] feat: add Proxy management page [rocketmq-dashboard]

["zhaohai666 (via GitHub)" <gi...@apache.org>]

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: commits-unsubscribe@rocketmq.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

Re: [PR] [Studio] feat: add Proxy management page [rocketmq-dashboard]

["lizhimins (via GitHub)" <gi...@apache.org>]

lizhimins merged PR #482:
URL: https://github.com/apache/rocketmq-dashboard/pull/482


-- 
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: commits-unsubscribe@rocketmq.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org