feat(NetworkMapDashboard, NetworkMapUnifi): add stale data handling for ping and speed metrics, enhancing UI feedback with visual indicators
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 1m59s
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 1m59s
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
import { useMemo, useCallback, useState, useRef, useEffect } from 'react';
|
||||
import { IconRefresh, IconMaximize, IconMinimize } from '@tabler/icons-react';
|
||||
import { IconRefresh, IconMaximize, IconMinimize, IconClock } from '@tabler/icons-react';
|
||||
|
||||
const FLAG_CDN = 'https://flagcdn.com';
|
||||
|
||||
@@ -86,7 +86,7 @@ function speedKey(key1, key2) {
|
||||
return [String(key1), String(key2)].sort().join(':');
|
||||
}
|
||||
|
||||
export default function NetworkMapUnifi({ servers = [], connections = [], pingMap = {}, speedMap = {} }) {
|
||||
export default function NetworkMapUnifi({ servers = [], connections = [], pingMap = {}, speedMap = {}, pingStaleMap = {}, speedStaleMap = {} }) {
|
||||
const containerRef = useRef(null);
|
||||
const svgRef = useRef(null);
|
||||
const [size, setSize] = useState({ w: 800, h: 520 });
|
||||
@@ -209,10 +209,13 @@ export default function NetworkMapUnifi({ servers = [], connections = [], pingMa
|
||||
const to = String(c.to);
|
||||
const p1 = positions[from];
|
||||
const p2 = positions[to];
|
||||
const ms = pingMap[edgePingKey(from, to)];
|
||||
const ekey = edgePingKey(from, to);
|
||||
const ms = pingMap[ekey];
|
||||
const pingStale = pingStaleMap[ekey] === true;
|
||||
const pingLabel = typeof ms === 'number' ? `${ms} ms` : null;
|
||||
const sk = speedKey(c.fromKey, c.toKey);
|
||||
const speed = speedMap[sk];
|
||||
const speedStale = speedStaleMap[sk] === true;
|
||||
const speedLabel =
|
||||
speed && (speed.tcpDownloadBps != null || speed.tcpUploadBps != null)
|
||||
? formatSpeedShort(speed.tcpDownloadBps, speed.tcpUploadBps)
|
||||
@@ -225,12 +228,14 @@ export default function NetworkMapUnifi({ servers = [], connections = [], pingMa
|
||||
p2,
|
||||
pingLabel,
|
||||
speedLabel,
|
||||
pingStale,
|
||||
speedStale,
|
||||
speed,
|
||||
tunnelType: c.tunnelType,
|
||||
raw: c,
|
||||
};
|
||||
}).filter((e) => e.p1 && e.p2);
|
||||
}, [connections, positions, pingMap, speedMap]);
|
||||
}, [connections, positions, pingMap, speedMap, pingStaleMap, speedStaleMap]);
|
||||
|
||||
// Вычисляем старт/финиш и одну контрольную точку:
|
||||
// рёбра выходят из карточек под 90°, дальше сразу плавная дуга без прямых сегментов.
|
||||
@@ -348,7 +353,10 @@ export default function NetworkMapUnifi({ servers = [], connections = [], pingMa
|
||||
opacity={dimFactor}
|
||||
/>
|
||||
{(() => {
|
||||
const labels = [e.pingLabel, e.speedLabel].filter(Boolean);
|
||||
const labels = [
|
||||
e.pingLabel ? { text: e.pingLabel, stale: e.pingStale } : null,
|
||||
e.speedLabel ? { text: e.speedLabel, stale: e.speedStale } : null,
|
||||
].filter(Boolean);
|
||||
if (labels.length === 0) return null;
|
||||
const totalH = labels.length * LABEL_H + (labels.length - 1) * LABEL_GAP;
|
||||
const minDist = 70;
|
||||
@@ -367,25 +375,49 @@ export default function NetworkMapUnifi({ servers = [], connections = [], pingMa
|
||||
used.push({ x, y });
|
||||
|
||||
const pad = 8;
|
||||
const staleColor = '#f59e0b';
|
||||
return (
|
||||
<g>
|
||||
{labels.map((text, i) => {
|
||||
{labels.map((label, i) => {
|
||||
const yy = y + i * (LABEL_H + LABEL_GAP) + LABEL_H / 2;
|
||||
const w = Math.max(LABEL_W, Math.min(text.length * 6 + pad * 2, 160));
|
||||
const isStale = label.stale === true;
|
||||
const textWidth = label.text.length * 6;
|
||||
const iconWidth = isStale ? 14 : 0;
|
||||
const w = Math.max(LABEL_W, Math.min(textWidth + pad * 2 + iconWidth, 180));
|
||||
const h = LABEL_H + 4;
|
||||
const textX = x - (iconWidth / 2);
|
||||
return (
|
||||
<g key={i}>
|
||||
<rect x={x - w / 2} y={yy - h / 2} width={w} height={h} rx={4} fill="rgba(15,23,42,0.92)" stroke={UNIFI_GREEN} strokeWidth={1} />
|
||||
<rect
|
||||
x={x - w / 2}
|
||||
y={yy - h / 2}
|
||||
width={w}
|
||||
height={h}
|
||||
rx={4}
|
||||
fill="rgba(15,23,42,0.92)"
|
||||
stroke={isStale ? staleColor : UNIFI_GREEN}
|
||||
strokeWidth={1}
|
||||
strokeDasharray={isStale ? '2,2' : 'none'}
|
||||
/>
|
||||
{isStale && (
|
||||
<circle
|
||||
cx={x - w / 2 + 10}
|
||||
cy={yy}
|
||||
r={5}
|
||||
fill={staleColor}
|
||||
opacity={0.9}
|
||||
/>
|
||||
)}
|
||||
<text
|
||||
x={x}
|
||||
x={textX}
|
||||
y={yy}
|
||||
textAnchor="middle"
|
||||
dominantBaseline="middle"
|
||||
fill={UNIFI_GREEN}
|
||||
fill={isStale ? staleColor : UNIFI_GREEN}
|
||||
fontSize={i === 0 ? 12 : 11}
|
||||
fontWeight={600}
|
||||
>
|
||||
{text}
|
||||
{label.text}
|
||||
</text>
|
||||
</g>
|
||||
);
|
||||
@@ -476,9 +508,12 @@ export default function NetworkMapUnifi({ servers = [], connections = [], pingMa
|
||||
{selectedEdge && (() => {
|
||||
const fromServer = servers.find((s) => String(s.ip) === selectedEdge.from);
|
||||
const toServer = servers.find((s) => String(s.ip) === selectedEdge.to);
|
||||
const pingMs = pingMap[edgePingKey(selectedEdge.from, selectedEdge.to)];
|
||||
const ekey = edgePingKey(selectedEdge.from, selectedEdge.to);
|
||||
const pingMs = pingMap[ekey];
|
||||
const pingStale = pingStaleMap[ekey] === true;
|
||||
const sk = speedKey(selectedEdge.raw?.fromKey, selectedEdge.raw?.toKey);
|
||||
const speed = speedMap[sk] ?? selectedEdge.speed;
|
||||
const speedStale = speedStaleMap[sk] === true;
|
||||
return (
|
||||
<div
|
||||
className="network-map-edge-modal-backdrop"
|
||||
@@ -556,8 +591,14 @@ export default function NetworkMapUnifi({ servers = [], connections = [], pingMa
|
||||
</div>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<div className="text-muted text-uppercase mb-1" style={{ fontSize: 11 }}>
|
||||
<div className="text-muted text-uppercase mb-1 d-flex align-items-center" style={{ fontSize: 11 }}>
|
||||
Пинг
|
||||
{pingStale && (
|
||||
<span className="badge bg-warning text-dark ms-2" style={{ fontSize: 9 }}>
|
||||
<IconClock size={10} className="me-1" />
|
||||
Устаревшие данные
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
{typeof pingMs === 'number' ? `${pingMs} ms` : 'нет данных'}
|
||||
@@ -565,11 +606,17 @@ export default function NetworkMapUnifi({ servers = [], connections = [], pingMa
|
||||
</div>
|
||||
{speed && (speed.tcpDownloadBps != null || speed.tcpUploadBps != null) && (
|
||||
<div className="mb-1">
|
||||
<div className="text-muted text-uppercase mb-1" style={{ fontSize: 11 }}>
|
||||
<div className="text-muted text-uppercase mb-1 d-flex align-items-center" style={{ fontSize: 11 }}>
|
||||
Скорость по туннелю
|
||||
{speed.cached && (
|
||||
<span className="ms-1 badge bg-secondary" style={{ fontSize: 10 }}>кеш</span>
|
||||
)}
|
||||
{speedStale && (
|
||||
<span className="ms-1 badge bg-warning text-dark" style={{ fontSize: 9 }}>
|
||||
<IconClock size={10} className="me-1" />
|
||||
Устаревшие данные
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
|
||||
Reference in New Issue
Block a user