Add Gateway traffic totals and dashboard chart
This commit is contained in:
@@ -1,5 +1,4 @@
|
||||
import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { api } from '../api.js';
|
||||
import { copyText } from '../utils/clientControls.js';
|
||||
import {
|
||||
@@ -8,16 +7,12 @@ import {
|
||||
formatLastSeen,
|
||||
positiveByteDelta,
|
||||
stabilizeDevicesByTraffic,
|
||||
trafficAxisMid,
|
||||
trafficScaleRatio,
|
||||
} from '../utils/format.js';
|
||||
import { TrafficChart } from './TrafficChart.jsx';
|
||||
|
||||
const AUTO_REFRESH_MS = 15_000;
|
||||
const DEVICE_MOVE_MS = 520;
|
||||
const COPY_FEEDBACK_MS = 800;
|
||||
const TRAFFIC_DELTA_MS = 2_200;
|
||||
const TRAFFIC_CHART_HEADROOM = 10;
|
||||
const trafficChartY = (ratio) => 100 - ratio * (100 - TRAFFIC_CHART_HEADROOM);
|
||||
|
||||
function Tooltip({ children }) {
|
||||
return <span className="client-tooltip" role="tooltip">{children}</span>;
|
||||
@@ -39,167 +34,13 @@ function TrafficValue({ value, delta }) {
|
||||
</strong>;
|
||||
}
|
||||
|
||||
function chartTime(value) {
|
||||
return new Date(value).toLocaleTimeString('ru-RU', {
|
||||
hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false,
|
||||
});
|
||||
}
|
||||
|
||||
function smoothTrafficPath(points, valueKey) {
|
||||
if (!points.length) return '';
|
||||
return points.slice(1).reduce((path, point, index) => {
|
||||
const previous = points[index];
|
||||
const midX = (previous.x + point.x) / 2;
|
||||
return `${path} C ${midX},${previous[valueKey]} ${midX},${point[valueKey]} ${point.x},${point[valueKey]}`;
|
||||
}, `M ${points[0].x},${points[0][valueKey]}`);
|
||||
}
|
||||
|
||||
function TrafficChart({ samples, scale, capacity, routeLabel, pinned }) {
|
||||
const [hovered, setHovered] = useState(null);
|
||||
const previousPoints = useRef([]);
|
||||
const previousScale = useRef(scale);
|
||||
const max = samples.reduce((largest, sample) => {
|
||||
const gateway = byteString(sample.gatewayBytes);
|
||||
const proxy = byteString(sample.proxyBytes);
|
||||
return gateway > largest ? gateway : proxy > largest ? proxy : largest;
|
||||
}, 0n);
|
||||
const mid = trafficAxisMid(max, scale);
|
||||
const firstSlot = capacity - samples.length;
|
||||
const points = samples.map((sample, index) => {
|
||||
const gateway = byteString(sample.gatewayBytes);
|
||||
const proxy = byteString(sample.proxyBytes);
|
||||
return {
|
||||
sample,
|
||||
x: (firstSlot + index) * 100 / Math.max(1, capacity - 1),
|
||||
gateway,
|
||||
proxy,
|
||||
gatewayY: trafficChartY(trafficScaleRatio(gateway, max, scale)),
|
||||
proxyY: trafficChartY(trafficScaleRatio(proxy, max, scale)),
|
||||
};
|
||||
});
|
||||
const previous = points.slice(0, -1);
|
||||
const penultimate = points.at(-2);
|
||||
const newest = points.at(-1);
|
||||
const hasProxy = points.some(({ proxy }) => proxy > 0n);
|
||||
const scaleFrom = previousPoints.current;
|
||||
const animateScale = previousScale.current !== scale
|
||||
&& scaleFrom.length === points.length
|
||||
&& !(typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
previousPoints.current = points;
|
||||
previousScale.current = scale;
|
||||
}, [points, scale]);
|
||||
|
||||
function trackPointer(event) {
|
||||
const bounds = event.currentTarget.getBoundingClientRect();
|
||||
const slot = Math.round(Math.max(0, Math.min(1, (event.clientX - bounds.left) / bounds.width)) * (capacity - 1));
|
||||
const index = slot - firstSlot;
|
||||
if (index < 0 || index >= points.length) {
|
||||
setHovered(null);
|
||||
return;
|
||||
}
|
||||
setHovered({ ...points[index], clientX: event.clientX, clientY: event.clientY });
|
||||
}
|
||||
|
||||
const tooltip = hovered && typeof document !== 'undefined' && createPortal(
|
||||
<span
|
||||
className="client-device-traffic-point-tooltip"
|
||||
style={{
|
||||
left: `${Math.max(8, Math.min(hovered.clientX + 12, globalThis.innerWidth - 190))}px`,
|
||||
top: `${hovered.clientY < 150 ? hovered.clientY + 14 : hovered.clientY - 12}px`,
|
||||
transform: hovered.clientY < 150 ? 'none' : 'translateY(-100%)',
|
||||
}}
|
||||
>
|
||||
<time dateTime={hovered.sample.observedAt}>{chartTime(hovered.sample.observedAt)}</time>
|
||||
<strong>Всего {formatByteString(hovered.gateway + hovered.proxy)}</strong>
|
||||
<span>{routeLabel} {formatByteString(hovered.gateway)}</span>
|
||||
{hovered.proxy > 0n && <span className="is-proxy">Proxy {formatByteString(hovered.proxy)}</span>}
|
||||
</span>,
|
||||
document.body,
|
||||
);
|
||||
|
||||
return <span
|
||||
className="client-device-traffic-chart"
|
||||
role="img"
|
||||
aria-label={`История трафика, шкала ${scale === 'log' ? 'логарифмическая' : 'линейная'}, максимум ${formatByteString(max)}`}
|
||||
style={{
|
||||
'--traffic-chart-top': `${TRAFFIC_CHART_HEADROOM}%`,
|
||||
'--traffic-chart-mid': `${(100 + TRAFFIC_CHART_HEADROOM) / 2}%`,
|
||||
}}
|
||||
>
|
||||
{pinned && max > 0n && <span className="client-device-traffic-axis" aria-hidden="true">
|
||||
<span className="is-max">{formatByteString(max)}</span>
|
||||
<span className="is-mid">{formatByteString(mid)}</span>
|
||||
<span className="is-zero">0</span>
|
||||
</span>}
|
||||
<span className="client-device-traffic-plot" onPointerMove={trackPointer} onPointerLeave={() => setHovered(null)}>
|
||||
<svg viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
|
||||
{pinned && <g className="client-device-traffic-grid">
|
||||
<line x1="0" x2="100" y1={TRAFFIC_CHART_HEADROOM} y2={TRAFFIC_CHART_HEADROOM} />
|
||||
<line x1="0" x2="100" y1={(100 + TRAFFIC_CHART_HEADROOM) / 2} y2={(100 + TRAFFIC_CHART_HEADROOM) / 2} />
|
||||
<line x1="0" x2="100" y1="100" y2="100" />
|
||||
</g>}
|
||||
<g className="client-device-traffic-lines" style={{ '--sample-count': Math.max(1, capacity) }}>
|
||||
{previous.length > 0 && <path className="is-gateway" d={smoothTrafficPath(previous, 'gatewayY')}>
|
||||
{animateScale && <animate
|
||||
key={`gateway-${scale}`}
|
||||
attributeName="d"
|
||||
from={smoothTrafficPath(scaleFrom.slice(0, -1), 'gatewayY')}
|
||||
to={smoothTrafficPath(previous, 'gatewayY')}
|
||||
dur="520ms"
|
||||
calcMode="spline"
|
||||
keyTimes="0;1"
|
||||
keySplines="0.16 1 0.3 1"
|
||||
fill="freeze"
|
||||
/>}
|
||||
</path>}
|
||||
{hasProxy && previous.length > 0 && <path className="is-proxy" d={smoothTrafficPath(previous, 'proxyY')}>
|
||||
{animateScale && <animate
|
||||
key={`proxy-${scale}`}
|
||||
attributeName="d"
|
||||
from={smoothTrafficPath(scaleFrom.slice(0, -1), 'proxyY')}
|
||||
to={smoothTrafficPath(previous, 'proxyY')}
|
||||
dur="520ms"
|
||||
calcMode="spline"
|
||||
keyTimes="0;1"
|
||||
keySplines="0.16 1 0.3 1"
|
||||
fill="freeze"
|
||||
/>}
|
||||
</path>}
|
||||
{penultimate && newest && <path className="is-gateway is-new" pathLength="1" d={smoothTrafficPath([penultimate, newest], 'gatewayY')}>
|
||||
{animateScale && <animate key={`gateway-new-${scale}`} attributeName="d" from={smoothTrafficPath(scaleFrom.slice(-2), 'gatewayY')} to={smoothTrafficPath([penultimate, newest], 'gatewayY')} dur="520ms" fill="freeze" />}
|
||||
</path>}
|
||||
{hasProxy && penultimate && newest && <path className="is-proxy is-new" pathLength="1" d={smoothTrafficPath([penultimate, newest], 'proxyY')}>
|
||||
{animateScale && <animate key={`proxy-new-${scale}`} attributeName="d" from={smoothTrafficPath(scaleFrom.slice(-2), 'proxyY')} to={smoothTrafficPath([penultimate, newest], 'proxyY')} dur="520ms" fill="freeze" />}
|
||||
</path>}
|
||||
{!penultimate && newest && <line className="is-gateway is-point" x1={newest.x} x2={newest.x} y1={newest.gatewayY} y2={newest.gatewayY} />}
|
||||
</g>
|
||||
{hovered && <g className="client-device-traffic-cursor">
|
||||
<line className="is-guide" x1={hovered.x} x2={hovered.x} y1={TRAFFIC_CHART_HEADROOM} y2="100" />
|
||||
<line className="is-point is-gateway" x1={hovered.x} x2={hovered.x} y1={hovered.gatewayY} y2={hovered.gatewayY} />
|
||||
{hovered.proxy > 0n && <line className="is-point is-proxy" x1={hovered.x} x2={hovered.x} y1={hovered.proxyY} y2={hovered.proxyY} />}
|
||||
</g>}
|
||||
</svg>
|
||||
</span>
|
||||
{samples.length > 0 && <span className="client-device-traffic-time" aria-hidden="true">
|
||||
<time dateTime={samples[0].observedAt}>{chartTime(samples[0].observedAt)}</time>
|
||||
<span>15 с</span>
|
||||
<time dateTime={samples.at(-1).observedAt}>{chartTime(samples.at(-1).observedAt)}</time>
|
||||
</span>}
|
||||
{tooltip}
|
||||
</span>;
|
||||
}
|
||||
|
||||
export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
|
||||
const [snapshot, setSnapshot] = useState(null);
|
||||
const [status, setStatus] = useState('idle');
|
||||
const [error, setError] = useState(null);
|
||||
export function DevicesPanel({
|
||||
open, panelRef, closeRef, onClose, snapshot, status, error, refreshing, refreshCycle,
|
||||
onLoad, onSnapshot, onError,
|
||||
}) {
|
||||
const [editingId, setEditingId] = useState('');
|
||||
const [alias, setAlias] = useState('');
|
||||
const [savingId, setSavingId] = useState('');
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
const [refreshCycle, setRefreshCycle] = useState(0);
|
||||
const [sortDirection, setSortDirection] = useState('desc');
|
||||
const [trafficScale, setTrafficScale] = useState('linear');
|
||||
const [copyFeedback, setCopyFeedback] = useState(null);
|
||||
@@ -227,35 +68,6 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
|
||||
[snapshot?.devices, sortDirection],
|
||||
);
|
||||
|
||||
async function load(quiet = false, discover = false) {
|
||||
if (!quiet) setStatus(snapshot ? 'refreshing' : 'loading');
|
||||
setRefreshing(true);
|
||||
try {
|
||||
const next = await (discover ? api.devices.refresh() : api.devices.list());
|
||||
setSnapshot((current) => !current || next.revision > current.revision ? next : current);
|
||||
setError(null);
|
||||
setStatus('ready');
|
||||
} catch (requestError) {
|
||||
setError(requestError);
|
||||
setStatus('error');
|
||||
} finally {
|
||||
setRefreshing(false);
|
||||
setRefreshCycle((cycle) => cycle + 1);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return undefined;
|
||||
load();
|
||||
return undefined;
|
||||
}, [open]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open || refreshing || status === 'loading') return undefined;
|
||||
const timer = setTimeout(() => load(true), AUTO_REFRESH_MS);
|
||||
return () => clearTimeout(timer);
|
||||
}, [open, refreshCycle, refreshing, status]);
|
||||
|
||||
useEffect(() => () => {
|
||||
clearTimeout(copyTimer.current);
|
||||
clearTimeout(trafficDeltaTimer.current);
|
||||
@@ -340,18 +152,18 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
|
||||
} catch (requestError) {
|
||||
if (requestError.code !== 'STATE_CONFLICT') throw requestError;
|
||||
const latest = await api.devices.list();
|
||||
setSnapshot((current) => !current || latest.revision > current.revision ? latest : current);
|
||||
onSnapshot((current) => !current || latest.revision > current.revision ? latest : current);
|
||||
const latestDevice = latest.devices.find((candidate) => candidate.id === device.id);
|
||||
if (!latestDevice || Object.keys(patch).some((key) => latestDevice[key] !== device[key])) {
|
||||
throw requestError;
|
||||
}
|
||||
next = await api.devices.update(device.id, patch, latest.revision);
|
||||
}
|
||||
setSnapshot((current) => !current || next.revision > current.revision ? next : current);
|
||||
setError(null);
|
||||
onSnapshot((current) => !current || next.revision > current.revision ? next : current);
|
||||
onError(null);
|
||||
return true;
|
||||
} catch (requestError) {
|
||||
setError(requestError);
|
||||
onError(requestError);
|
||||
return false;
|
||||
} finally {
|
||||
setSavingId('');
|
||||
@@ -377,23 +189,23 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
|
||||
} catch (requestError) {
|
||||
if (requestError.code !== 'STATE_CONFLICT') throw requestError;
|
||||
const latest = await api.devices.list();
|
||||
setSnapshot((current) => !current || latest.revision > current.revision ? latest : current);
|
||||
onSnapshot((current) => !current || latest.revision > current.revision ? latest : current);
|
||||
const latestDevice = latest.devices.find((candidate) => candidate.id === device.id);
|
||||
if (!latestDevice || latestDevice.desiredPolicy !== device.desiredPolicy) throw requestError;
|
||||
next = await api.devices.setPolicy(device.id, mode, latest.revision);
|
||||
}
|
||||
setSnapshot((current) => !current || next.revision > current.revision ? next : current);
|
||||
setError(null);
|
||||
onSnapshot((current) => !current || next.revision > current.revision ? next : current);
|
||||
onError(null);
|
||||
} catch (requestError) {
|
||||
if (requestError.code === 'DEVICE_POLICY_APPLY_FAILED') {
|
||||
try {
|
||||
const latest = await api.devices.list();
|
||||
setSnapshot((current) => !current || latest.revision > current.revision ? latest : current);
|
||||
onSnapshot((current) => !current || latest.revision > current.revision ? latest : current);
|
||||
} catch {
|
||||
// Keep the policy error as the actionable result.
|
||||
}
|
||||
}
|
||||
setError(requestError);
|
||||
onError(requestError);
|
||||
} finally {
|
||||
setSavingId('');
|
||||
}
|
||||
@@ -445,7 +257,7 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
|
||||
aria-label={refreshing ? 'Обновляем устройства' : 'Обновить устройства сейчас'}
|
||||
aria-busy={refreshing}
|
||||
disabled={refreshing}
|
||||
onClick={() => load(true, true)}
|
||||
onClick={() => onLoad(true, true)}
|
||||
>
|
||||
<svg key={refreshCycle} className="client-devices-refresh-ring" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<circle cx="12" cy="12" r="10" pathLength="1" />
|
||||
@@ -505,7 +317,7 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
|
||||
{error && (
|
||||
<div className="client-devices-error" role="alert">
|
||||
<span>{error.message}</span>
|
||||
<button type="button" onClick={() => load()}>Повторить</button>
|
||||
<button type="button" onClick={() => onLoad()}>Повторить</button>
|
||||
</div>
|
||||
)}
|
||||
{status === 'loading' && <p className="client-devices-empty" role="status">Ищем устройства…</p>}
|
||||
|
||||
Reference in New Issue
Block a user