59 lines
2.7 KiB
Markdown
59 lines
2.7 KiB
Markdown
# UX Roadmap: React UI Unification & Infrastructure Scaling
|
|
|
|
## Goal
|
|
Consolidate all administrative functionality into the React-based `control-plane-ui`, retiring the legacy Vue/CDN implementation, and introducing premium infrastructure management features.
|
|
|
|
---
|
|
|
|
## Phase 1: Feature Parity (Migration) [DONE]
|
|
Bring over the core "Studio" features from the Vue implementation to React.
|
|
|
|
### 1.1 Auth Management [DONE]
|
|
- [x] **User List:** Data grid with search/filter (MUI `DataGrid`).
|
|
- [x] **User Details:** Sidebar or modal showing user metadata and actions (Ban, Reset Password, Delete).
|
|
|
|
### 1.2 Storage Browser [DONE]
|
|
- [x] **Bucket Explorer:** Sidebar to switch between buckets.
|
|
- [x] **File Manager:** Table view with file type icons, size estimation, and direct upload/download/delete support.
|
|
|
|
### 1.3 Database & Functions [DONE]
|
|
- [x] **Data View:** Schema-aware table browser with pagination.
|
|
- [x] **Edge Functions:** Monaco-style editor for Deno functions with a sleek "Deploy" animation.
|
|
|
|
### 1.4 Observability [DONE]
|
|
- [x] **Realtime Console:** Live event stream with color-coded "IN/OUT/SYS" messages.
|
|
- [x] **Logs Viewer:** Integrated LogQL search for Loki logs.
|
|
|
|
---
|
|
|
|
## Phase 2: Pillar Scaling & "Wow" Factor [DONE]
|
|
Implement the advanced infrastructure management features.
|
|
|
|
### 2.1 Dashboard Overhaul [DONE]
|
|
- [x] **Pillar Cards:** Dynamic, animated cards for `Worker`, `Database`, `ProxyAPI`, and `System`.
|
|
- [x] **Live Sparklines:** Small charts showing real-time resource usage per pillar.
|
|
- [x] **Scaling Status:** Pulse animations and progress bars during active scaling operations.
|
|
|
|
### 2.2 Premium Scaling Workflow [DONE]
|
|
- [x] **Glassmorphism Modals:** Replace browser `confirm()` with high-fidelity modals.
|
|
- [x] **Financial Transparency:** Real-time cost impact calculation (e.g., "This will add €5.20/mo to your bill").
|
|
- [x] **Time Estimation:** Visual countdown or progress indicator for node provisioning.
|
|
|
|
### 2.3 Visual Excellence [DONE]
|
|
- [x] **Deep Dark Mode:** Refine the MUI theme with custom HSL colors and subtle borders.
|
|
- [x] **Micro-animations:** Framer Motion for page transitions and button interactions.
|
|
|
|
---
|
|
|
|
## Phase 3: Unification & Cleanup [DONE]
|
|
- [x] **Internal Routing:** Ensure consistent breadcrumbs and navigation.
|
|
- [x] **Proxy Integration:** Update the Gateway to serve the React build at `/dashboard` (SPA).
|
|
- [x] **Deprecation:** Remove the `web/` directory and all Vue dependencies.
|
|
|
|
---
|
|
|
|
## Phase 4: Verification [IN PROGRESS]
|
|
- [ ] **E2E Expansion:** Add Playwright tests for every migrated feature.
|
|
- [ ] **Visual Regression:** Ensure layout consistency across different viewports.
|
|
- [ ] **Podman Validation:** Full stack deployment and verification.
|