Add persistent device traffic history charts

src/web/components/DevicesPanel.jsx

@@ -14,7 +14,6 @@ const AUTO_REFRESH_MS = 15_000;
 const DEVICE_MOVE_MS = 520;
 const COPY_FEEDBACK_MS = 5_000;
 const TRAFFIC_DELTA_MS = 2_200;
-const TRAFFIC_HISTORY_LIMIT = 18;
 
 function Tooltip({ children }) {
   return <span className="client-tooltip" role="tooltip">{children}</span>;
@@ -36,24 +35,42 @@ function TrafficValue({ value, delta }) {
   </strong>;
 }
 
-function TrafficChart({ samples }) {
+function chartTime(value) {
+  return new Date(value).toLocaleTimeString('ru-RU', {
+    hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false,
+  });
+}
+
+function TrafficChart({ samples, scale, capacity }) {
   const max = samples.reduce((largest, sample) => {
-    const total = byteString(sample.gateway) + byteString(sample.proxy);
+    const total = byteString(sample.gatewayBytes) + byteString(sample.proxyBytes);
     return total > largest ? total : largest;
   }, 0n);
-  const latest = samples.at(-1)?.id || 'empty';
-  return <span className="client-device-traffic-chart" aria-hidden="true">
-    <span className="client-device-traffic-track" key={latest}>
-      {samples.map((sample) => {
-        const gateway = byteString(sample.gateway);
-        const proxy = byteString(sample.proxy);
-        const { height, gatewayShare } = trafficSampleMetrics(gateway, proxy, max);
-        return <i className="client-device-traffic-bar" key={sample.id} style={{ height: `${height}%` }}>
+  const latest = samples.at(-1)?.observedAt || 'empty';
+  return <span className="client-device-traffic-chart" role="img" aria-label={`История трафика, шкала ${scale === 'log' ? 'логарифмическая' : 'линейная'}`}>
+    <span className="client-device-traffic-track" key={latest} style={{ '--sample-count': Math.max(1, capacity) }}>
+      {samples.map((sample, index) => {
+        const gateway = byteString(sample.gatewayBytes);
+        const proxy = byteString(sample.proxyBytes);
+        const total = gateway + proxy;
+        const time = chartTime(sample.observedAt);
+        const { height, gatewayShare } = trafficSampleMetrics(gateway, proxy, max, scale);
+        return <i
+          className="client-device-traffic-bar"
+          key={`${sample.observedAt}-${index}`}
+          style={{ height: `${height}%`, gridColumnStart: capacity - samples.length + index + 1 }}
+          title={`${time} · Всего ${formatByteString(total)} · Gateway ${formatByteString(gateway)} · Прокси ${formatByteString(proxy)}`}
+        >
           <span className="is-gateway" style={{ height: `${gatewayShare}%` }} />
           <span className="is-proxy" style={{ height: `${100 - gatewayShare}%` }} />
         </i>;
       })}
     </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>}
   </span>;
 }
 
@@ -67,15 +84,14 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
   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);
   const [trafficDeltas, setTrafficDeltas] = useState({});
-  const [trafficHistory, setTrafficHistory] = useState({});
   const deviceNodes = useRef(new Map());
   const previousPositions = useRef(new Map());
   const previousTraffic = useRef(new Map());
   const copyTimer = useRef(null);
   const trafficDeltaTimer = useRef(null);
-  const trafficSequence = useRef(0);
   const devices = useMemo(
     () => sortDevicesByTraffic(snapshot?.devices, sortDirection),
     [snapshot?.devices, sortDirection],
@@ -125,7 +141,6 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
 
     const next = new Map();
     const deltas = {};
-    const historyChanges = {};
     for (const device of snapshot?.devices || []) {
       const gateway = byteString(device.downloadBytes) + byteString(device.uploadBytes);
       const proxy = byteString(device.proxyDownloadBytes) + byteString(device.proxyUploadBytes);
@@ -137,22 +152,10 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
       if (!gatewayDelta && !proxyDelta) continue;
       const totalDelta = positiveByteDelta(previous.gateway + previous.proxy, gateway + proxy);
       deltas[device.id] = { gateway: gatewayDelta, proxy: proxyDelta, total: totalDelta };
-      historyChanges[device.id] = {
-        id: ++trafficSequence.current,
-        gateway: gateway > previous.gateway ? (gateway - previous.gateway).toString() : '0',
-        proxy: proxy > previous.proxy ? (proxy - previous.proxy).toString() : '0',
-      };
     }
     previousTraffic.current = next;
     if (!Object.keys(deltas).length) return;
     setTrafficDeltas(deltas);
-    setTrafficHistory((current) => {
-      const updated = { ...current };
-      for (const [id, change] of Object.entries(historyChanges)) {
-        updated[id] = [...(current[id] || []), change].slice(-TRAFFIC_HISTORY_LIMIT);
-      }
-      return updated;
-    });
     clearTimeout(trafficDeltaTimer.current);
     trafficDeltaTimer.current = setTimeout(() => setTrafficDeltas({}), TRAFFIC_DELTA_MS);
   }, [snapshot?.devices, open]);
@@ -309,6 +312,10 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
               </button>
               <Tooltip>Сначала {sortDirection === 'desc' ? 'больше' : 'меньше'} трафика</Tooltip>
             </span>
+            <span className="client-devices-scale" role="group" aria-label="Масштаб графика трафика">
+              <button type="button" aria-pressed={trafficScale === 'linear'} onClick={() => setTrafficScale('linear')}>Лин</button>
+              <button type="button" aria-pressed={trafficScale === 'log'} onClick={() => setTrafficScale('log')}>Лог</button>
+            </span>
           </div>
           <h2 id="client-devices-title">Устройства</h2>
           <div className="client-instructions-intro">
@@ -496,7 +503,11 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
                 </button>
                 <Tooltip>{policyTooltip}</Tooltip>
               </span>
-              <TrafficChart samples={trafficHistory[device.id] || []} />
+              <TrafficChart
+                samples={device.trafficHistory || []}
+                scale={trafficScale}
+                capacity={snapshot.trafficHistoryCapacity || device.trafficHistory?.length || 1}
+              />
             </article>;
           })}
         </div>