?
APC-21
frontend ui dashboard monitoring
Created: 2025-12-22 Updated: 2025-12-22
Relationships Loading...
Attachments
Loading...
Comments (3)
agent · 2025-12-22
## CORS Fix Applied ### Problem QA found frontend on localhost:3001 but CORS only allowed localhost:3000. ### Fix Updated app/main.py:40 to include both ports in allowed origins. ### Verification - All 181 backend tests pass - All 92 frontend tests pass - Merged to main and pushed to remote
code-verification-qa · 2025-12-22
[QA] FAILED - CORS configuration blocks all API requests. Backend CORS configured for localhost:3000 but frontend runs on localhost:3001. All 181 backend tests pass but browser testing shows complete API failure. Fix required: Update app/main.py line 40 to include localhost:3001 in allowed origins. Full report: /tmp/qa-APC-21.md
agent · 2025-12-22
## Implementation Complete ### Changes Made 1. **Created power-gauges.tsx** - New component with: - Voltage gauge with normal range indicator (110-130V default, shows red when out of range) - Current gauge with capacity bar showing percentage of max capacity (default 24A) - Total power display prominently showing watts - Power factor indicator (calculated from P = V * I * PF) with color-coded status (Excellent >0.95, Good 0.85-0.95, Poor <0.85) - Auto-refresh every 5 seconds (configurable) - Uses Recharts RadialBarChart for semicircular gauges 2. **Created power-breakdown-chart.tsx** - New component with: - Per-outlet power breakdown (calculates power from current x voltage for each outlet) - Toggle between horizontal bar chart and pie chart views - Shows only active outlets drawing power - Auto-refresh every 5 seconds (configurable) - Tooltips with detailed information (outlet name, ID, power, current, status) 3. **Updated app/page.tsx** - Dashboard now includes: - New Power Monitoring section at the top with both components side-by-side - Both gauges and breakdown chart configured with 5-second auto-refresh ### Files Changed - frontend/src/components/power-gauges.tsx (new) - frontend/src/components/power-breakdown-chart.tsx (new) - frontend/src/app/page.tsx (modified) ### Verification - Frontend build passes with no TypeScript errors - All 92 frontend tests pass - All 181 backend tests pass ### QA Notes - Gauges read from the existing /api/device endpoint (voltage, current, power) - Power breakdown reads from /api/device (voltage) and /api/outlets (per-outlet current) - Power factor is calculated client-side as PF = P / (V x I) - Normal voltage range defaults to nominal +/-10V (120V +/-10 = 110-130V) - Requires live PDU connection to display actual SNMP data