From 4feceaa1d10c056cbf6bcc60c495bd8c5c5b98a5 Mon Sep 17 00:00:00 2001 From: MacRimi Date: Fri, 6 Mar 2026 20:13:31 +0100 Subject: [PATCH] Update latency-detail-modal.tsx --- AppImage/components/latency-detail-modal.tsx | 117 ++++++++++++++++++- 1 file changed, 114 insertions(+), 3 deletions(-) diff --git a/AppImage/components/latency-detail-modal.tsx b/AppImage/components/latency-detail-modal.tsx index 81fa6653..c55de82b 100644 --- a/AppImage/components/latency-detail-modal.tsx +++ b/AppImage/components/latency-detail-modal.tsx @@ -462,14 +462,121 @@ ${report.isRealtime && report.realtimeResults.length > 0 ? ` + +
+
\${report.isRealtime ? '4' : '3'}. Latency Graph
+
+ \${(() => { + const chartData = report.isRealtime + ? report.realtimeResults.map(r => r.latency_avg || 0) + : report.data.map(d => d.value || 0); + if (chartData.length < 2) return '

Not enough data points for chart

'; + + const minVal = Math.min(...chartData); + const maxVal = Math.max(...chartData); + const range = maxVal - minVal || 1; + const width = 700; + const height = 120; + const padding = 30; + + const points = chartData.map((val, i) => { + const x = padding + (i / (chartData.length - 1)) * (width - padding * 2); + const y = height - padding - ((val - minVal) / range) * (height - padding * 2); + return \`\${x},\${y}\`; + }).join(' '); + + const areaPoints = \`\${padding},\${height - padding} \${points} \${width - padding},\${height - padding}\`; + + return \` + + + + + + + + + + + + + \${maxVal.toFixed(0)}ms + \${((minVal + maxVal) / 2).toFixed(0)}ms + \${minVal.toFixed(0)}ms + + + + + + \${chartData.length} samples + + \`; + })()} +
+
+ + +
+
\${report.isRealtime ? '5' : '4'}. Performance Thresholds
+
+
+

Excellent (< 50ms): Optimal for real-time applications, gaming, and video calls.

+
+
+
+

Good (50-100ms): Acceptable for most applications with minimal impact.

+
+
+
+

Fair (100-200ms): Noticeable delay. May affect VoIP and interactive applications.

+
+
+
+

Poor (> 200ms): Significant latency. Investigation recommended.

+
+
+
-
${report.isRealtime ? '5' : '4'}. Methodology
+
\${report.isRealtime ? '6' : '5'}. Methodology
Test Method
ICMP Echo Request (Ping)
+
+
Samples per Test
+
3 consecutive pings
+
+
+
Target
+
\${report.targetLabel}
+
+
+
Target IP
+
\${report.target === 'gateway' ? 'Default Gateway' : report.target === 'cloudflare' ? '1.1.1.1' : '8.8.8.8'}
+
+
+
+

Performance Assessment

+

\${ + statusText === 'Excellent' ? 'Network latency is excellent. No action required.' : + statusText === 'Good' ? 'Network latency is within acceptable parameters.' : + statusText === 'Fair' ? 'Network latency is elevated. Consider investigating network congestion or routing issues.' : + statusText === 'Poor' ? 'Network latency is critically high. Immediate investigation recommended.' : + 'Unable to determine network status.' + }

+
+
+ + +
+
+ ProxMenux + ProxMenux Monitor - Network Performance Report +
+
Generated: \${now} | Report ID: PMXL-\${Date.now().toString(36).toUpperCase()}
+
Samples per Test
3 consecutive pings
@@ -655,8 +762,12 @@ export function LatencyDetailModal({ open, onOpenChange, currentLatency }: Laten const statusInfo = getStatusInfo(displayStats.current) - // Calculate test duration for report - const testDuration = testStartTime ? Math.round((Date.now() - testStartTime) / 1000) : 0 + // Calculate test duration for report based on first and last result timestamps + const testDuration = realtimeResults.length >= 2 + ? Math.round(((realtimeResults[realtimeResults.length - 1].timestamp || Date.now()) - (realtimeResults[0].timestamp || Date.now())) / 1000) + : realtimeResults.length === 1 + ? 5 // Single sample = 5 seconds (one test) + : 0 return (