Files

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

2025-06-12 08:04:30 +00:00

1.5 KiB

Raw Blame History

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

1.5 KiB Raw Blame History