125 lines
3.8 KiB
Markdown
125 lines
3.8 KiB
Markdown
# Network Traffic Graph Fix Plan
|
|
|
|
## Command: `pnpm run reread`
|
|
|
|
## Issue Summary
|
|
The network traffic graph in ops-view-network.ts is not displaying data due to three critical issues:
|
|
1. Timestamp format mismatch - chart expects ISO strings but receives numeric timestamps
|
|
2. Empty data when no active connections exist
|
|
3. Potential bucket alignment issues
|
|
|
|
## Root Causes
|
|
|
|
### 1. Timestamp Format Issue
|
|
- **Current**: `x: time` (numeric timestamp like 1703123456789)
|
|
- **Expected**: `x: new Date(time).toISOString()` (ISO string like "2023-12-20T12:34:56.789Z")
|
|
- **Impact**: ApexCharts cannot parse the x-axis values, resulting in no visible data
|
|
|
|
### 2. Empty Data Handling
|
|
- When no active connections exist, `networkRequests` array is empty
|
|
- Empty array leads to no buckets being created
|
|
- Chart shows flat line at 0
|
|
|
|
### 3. Data Bucketing Logic
|
|
- Current logic creates buckets but uses numeric timestamps as Map keys
|
|
- This works for calculation but fails when looking up values for chart display
|
|
|
|
## Implementation Plan
|
|
|
|
### Step 1: Fix Timestamp Format in updateTrafficData()
|
|
```typescript
|
|
// In ops-view-network.ts, line 548-554
|
|
this.trafficData = Array.from({ length: 60 }, (_, i) => {
|
|
const time = now - (i * bucketSize);
|
|
return {
|
|
x: new Date(time).toISOString(), // Convert to ISO string
|
|
y: buckets.get(time) || 0,
|
|
};
|
|
}).reverse();
|
|
```
|
|
|
|
### Step 2: Add Data Generation for Empty States
|
|
Create synthetic data points when no connections exist to show the chart grid:
|
|
```typescript
|
|
private updateTrafficData() {
|
|
// ... existing code ...
|
|
|
|
// If no data, create zero-value points to show grid
|
|
if (this.networkRequests.length === 0) {
|
|
this.trafficData = Array.from({ length: 60 }, (_, i) => {
|
|
const time = now - (i * bucketSize);
|
|
return {
|
|
x: new Date(time).toISOString(),
|
|
y: 0,
|
|
};
|
|
}).reverse();
|
|
return;
|
|
}
|
|
|
|
// ... rest of existing bucketing logic ...
|
|
}
|
|
```
|
|
|
|
### Step 3: Improve Bucket Alignment (Optional Enhancement)
|
|
Align buckets to start of time periods for cleaner data:
|
|
```typescript
|
|
// Calculate bucket start time
|
|
const bucketStartTime = Math.floor(req.timestamp / bucketSize) * bucketSize;
|
|
buckets.set(bucketStartTime, (buckets.get(bucketStartTime) || 0) + 1);
|
|
```
|
|
|
|
### Step 4: Add Debug Logging (Temporary)
|
|
Add console logs to verify data flow:
|
|
```typescript
|
|
console.log('Traffic data generated:', this.trafficData);
|
|
console.log('Network requests count:', this.networkRequests.length);
|
|
```
|
|
|
|
### Step 5: Update Chart Configuration
|
|
Ensure chart component has proper configuration:
|
|
```typescript
|
|
<!-- Already correct in the template -->
|
|
<dees-chart-area
|
|
.label=${'Network Traffic'}
|
|
.series=${[{
|
|
name: 'Requests/min',
|
|
data: this.trafficData,
|
|
}]}
|
|
></dees-chart-area>
|
|
```
|
|
|
|
## Testing Plan
|
|
|
|
1. **Test with no connections**: Verify chart shows grid with zero line
|
|
2. **Test with active connections**: Verify chart shows actual traffic data
|
|
3. **Test time range changes**: Verify chart updates when selecting different time ranges
|
|
4. **Test auto-refresh**: Verify chart updates every second with new data
|
|
|
|
## Expected Outcome
|
|
|
|
- Network traffic chart displays properly with time on x-axis
|
|
- Chart shows grid and zero line even when no data exists
|
|
- Real-time updates work correctly
|
|
- Time ranges (1m, 5m, 15m, 1h, 24h) all function properly
|
|
|
|
## Implementation Order
|
|
|
|
1. Fix timestamp format (critical fix)
|
|
2. Add empty state handling
|
|
3. Test basic functionality
|
|
4. Add debug logging if issues persist
|
|
5. Implement bucket alignment improvement if needed
|
|
|
|
## Success Criteria
|
|
|
|
- [ ] Chart displays time labels on x-axis
|
|
- [ ] Chart shows data points when connections exist
|
|
- [ ] Chart shows zero line when no connections exist
|
|
- [ ] Chart updates in real-time as new connections arrive
|
|
- [ ] All time range selections work correctly
|
|
|
|
## Estimated Effort
|
|
|
|
- Implementation: 30 minutes
|
|
- Testing: 15 minutes
|
|
- Total: 45 minutes |