46 lines
1.5 KiB
Markdown
46 lines
1.5 KiB
Markdown
|
# 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
|