facae93e4b
- 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.
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 |