nessi/NexaPG
1
0
Fork 0
Code Issues 20 Pull Requests Actions Packages Projects Releases 12 Activity

Optimize metric updates and disable line animation.

Browse Source 
Introduced a utility function to detect changes in metric series to prevent unnecessary updates. Extended the update interval from 1s to 3s and disabled animations for line charts to improve performance.
This commit is contained in:
Sascha Nesterovic
2026-02-12 14:02:01 +01:00
parent 7957052172
commit d4f176c731
1 changed files with 21 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/pages/TargetDetailPage.jsx
View File

@@ -54,6 +54,15 @@ function MetricsTooltip({ active, payload, label }) {
);
}
function didMetricSeriesChange(prev = [], next = []) {
if (!Array.isArray(prev) || !Array.isArray(next)) return true;
if (prev.length !== next.length) return true;
if (prev.length === 0 && next.length === 0) return false;
const prevLast = prev[prev.length - 1];
const nextLast = next[next.length - 1];
return prevLast?.ts !== nextLast?.ts || Number(prevLast?.value) !== Number(nextLast?.value);
}
async function loadMetric(targetId, metric, range, tokens, refresh) {
const { from, to } = toQueryRange(range);
return apiFetch(
@@ -129,11 +138,18 @@ export function TargetDetailPage() {
loadMetric(id, "cache_hit_ratio", "15m", tokens, refreshRef.current),
]);
if (!active) return;
setSeries({ connections, xacts, cache });
const nextSeries = { connections, xacts, cache };
setSeries((prev) => {
const changed =
didMetricSeriesChange(prev.connections, nextSeries.connections) ||
didMetricSeriesChange(prev.xacts, nextSeries.xacts) ||
didMetricSeriesChange(prev.cache, nextSeries.cache);
return changed ? nextSeries : prev;
});
} catch {
// Keep previous chart values if a live tick fails.
}
}, 1000);
}, 3000);
return () => {
active = false;
@@ -429,9 +445,9 @@ export function TargetDetailPage() {
<YAxis yAxisId="left" />
<YAxis yAxisId="right" orientation="right" domain={[0, 100]} />
<Tooltip content={<MetricsTooltip />} />
<Line yAxisId="left" type="monotone" dataKey="connections" stroke="#38bdf8" dot={false} strokeWidth={2} />
<Line yAxisId="left" type="monotone" dataKey="tps" stroke="#22c55e" dot={false} strokeWidth={2} />
<Line yAxisId="right" type="monotone" dataKey="cache" stroke="#f59e0b" dot={false} strokeWidth={2} />
<Line yAxisId="left" type="monotone" dataKey="connections" stroke="#38bdf8" dot={false} strokeWidth={2} isAnimationActive={false} />
<Line yAxisId="left" type="monotone" dataKey="tps" stroke="#22c55e" dot={false} strokeWidth={2} isAnimationActive={false} />
<Line yAxisId="right" type="monotone" dataKey="cache" stroke="#f59e0b" dot={false} strokeWidth={2} isAnimationActive={false} />
</LineChart>
</ResponsiveContainer>
</div>