feat: Implement dees-statsgrid in DCRouter UI for enhanced stats visualization
- Added new readme.statsgrid.md outlining the implementation plan for dees-statsgrid component. - Replaced custom stats cards in ops-view-overview.ts and ops-view-network.ts with dees-statsgrid for better visualization. - Introduced consistent color scheme for success, warning, error, and info states. - Enhanced interactive features including click actions, context menus, and real-time updates. - Developed ops-view-emails.ts for email management with features like composing, searching, and viewing emails. - Integrated mock data generation for emails and network requests to facilitate testing. - Added responsive design elements and improved UI consistency across components.
This commit is contained in:
46
readme.statsgrid.md
Normal file
46
readme.statsgrid.md
Normal file
@ -0,0 +1,46 @@
|
||||
# Plan: Implement dees-statsgrid in DCRouter UI
|
||||
|
||||
Command to reread CLAUDE.md: `Read /home/centraluser/eu.central.ingress-2/CLAUDE.md`
|
||||
|
||||
## Overview
|
||||
Replace the current stats cards with the new dees-statsgrid component from @design.estate/dees-catalog for better visualization and consistency.
|
||||
|
||||
## Implementation Plan
|
||||
|
||||
### 1. Update Overview View (`ops-view-overview.ts`)
|
||||
- Replace the custom stats cards with dees-statsgrid
|
||||
- Use appropriate tile types for different metrics:
|
||||
- `gauge` for CPU and Memory usage
|
||||
- `number` for Active Connections, Total Requests, etc.
|
||||
- `trend` for time-series data like requests over time
|
||||
|
||||
### 2. Update Network View (`ops-view-network.ts`)
|
||||
- Replace the current stats cards section with dees-statsgrid
|
||||
- Configure tiles for:
|
||||
- Active Connections (number)
|
||||
- Requests/sec (number with trend)
|
||||
- Throughput In/Out (number with units)
|
||||
- Protocol distribution (percentage)
|
||||
|
||||
### 3. Create Consistent Color Scheme
|
||||
- Success/Normal: #22c55e (green)
|
||||
- Warning: #f59e0b (amber)
|
||||
- Error/Critical: #ef4444 (red)
|
||||
- Info: #3b82f6 (blue)
|
||||
|
||||
### 4. Add Interactive Features
|
||||
- Click actions to show detailed views
|
||||
- Context menu for refresh, export, etc.
|
||||
- Real-time updates from metrics data
|
||||
|
||||
### 5. Integration Points
|
||||
- Connect to existing appstate for data
|
||||
- Use MetricsManager data for real values
|
||||
- Update on the 1-second refresh interval
|
||||
|
||||
## Benefits
|
||||
- Consistent UI component usage
|
||||
- Better visual hierarchy
|
||||
- Built-in responsive design
|
||||
- More visualization options (gauges, trends)
|
||||
- Reduced custom CSS maintenance
|
Reference in New Issue
Block a user