Append real-time stats to CPU/RAM charts on each 15s tick
Zero extra Prometheus queries - reuses existing instant stats data to grow chart series between 60s range query refreshes. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -68,7 +68,28 @@ export function useEventStream() {
|
||||
es.addEventListener('stats', (e) => {
|
||||
try {
|
||||
const stats = JSON.parse(e.data);
|
||||
setState(prev => ({ ...prev, stats }));
|
||||
setState(prev => {
|
||||
// Append latest stats as new chart data points (real-time feed)
|
||||
if (prev.metrics) {
|
||||
const now = Math.floor(Date.now() / 1000);
|
||||
const sixHoursAgo = now - 6 * 3600;
|
||||
const append = (series: Array<[number, number]>, value: number): Array<[number, number]> => {
|
||||
const filtered = series.filter(([ts]) => ts > sixHoursAgo);
|
||||
filtered.push([now, value]);
|
||||
return filtered;
|
||||
};
|
||||
return {
|
||||
...prev,
|
||||
stats,
|
||||
metrics: {
|
||||
...prev.metrics,
|
||||
cpu: append(prev.metrics.cpu, stats.cpu_percent),
|
||||
ram: append(prev.metrics.ram, stats.ram_percent),
|
||||
},
|
||||
};
|
||||
}
|
||||
return { ...prev, stats };
|
||||
});
|
||||
} catch { /* ignore */ }
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user