Enhance device traffic feedback and totals

test/web/device-inventory-contract.test.js

@@ -6,6 +6,7 @@ import { fileURLToPath } from 'node:url';
 import {
   formatByteString,
   formatLastSeen,
+  positiveByteDelta,
   sortDevicesByTraffic,
 } from '../../src/web/utils/format.js';
 
@@ -31,7 +32,8 @@ test('Gateway device inventory uses the existing accessible responsive drawer',
   assert.match(panel, /<Tooltip>Изменить название<\/Tooltip>/);
   assert.match(panel, /copyText\(device\.ip\)/);
   assert.match(panel, /client-device-name-primary[\s\S]*client-device-name-ip[\s\S]*client-device-name-feedback/);
-  assert.match(panel, /client-device-name-feedback[\s\S]*'Скопировано'/);
+  assert.match(panel, /client-device-name-feedback[\s\S]*'copied!'/);
+  assert.match(panel, /COPY_FEEDBACK_MS = 5_000/);
   assert.match(panel, /client-device-name-feedback[\s\S]*client-device-edit-wrap[\s\S]*client-device-last-seen/);
   assert.doesNotMatch(panel, /client-device-title/);
   assert.match(panel, /online \? 'В сети' : <TextMorph from=\{seen\.label\} to=\{seen\.relative\} \/>/);
@@ -46,8 +48,11 @@ test('Gateway device inventory uses the existing accessible responsive drawer',
   assert.match(panel, /sortDevicesByTraffic\(snapshot\?\.devices, sortDirection\)/);
   assert.match(panel, /Трафик временно не обновляется/);
   assert.match(panel, /Учитывается только трафик, который прошёл через Harbor/);
-  assert.match(panel, /<b>Gateway<\/b><strong>\{gatewayTraffic\}<\/strong>/);
-  assert.match(panel, /className="is-proxy"><b>Прокси<\/b><strong>\{proxyTraffic\}<\/strong>/);
+  assert.match(panel, /<b>Gateway<\/b><TrafficValue value=\{gatewayTraffic\} delta=\{trafficDelta\.gateway\}/);
+  assert.match(panel, /className="is-proxy"><b>Прокси<\/b><TrafficValue value=\{proxyTraffic\} delta=\{trafficDelta\.proxy\}/);
+  assert.match(panel, /className="is-total"><b>Всего<\/b><strong>\{totalTraffic\}<\/strong>/);
+  assert.match(panel, /positiveByteDelta\(previous\.gateway, gateway\)[\s\S]*positiveByteDelta\(previous\.proxy, proxy\)/);
+  assert.match(panel, /setTimeout\(\(\) => setTrafficDeltas\(\{\}\), TRAFFIC_DELTA_MS\)/);
   assert.doesNotMatch(panel, /client-device-traffic client-tooltip-anchor|<Tooltip>\{trafficLabel\}<\/Tooltip>/);
   assert.match(panel, /source\?\.traffic\?\.proxy\?\.error/);
   assert.match(panel, /client-device-pin-wrap[\s\S]*client-device-main[\s\S]*client-device-traffic[\s\S]*client-device-policy-wrap/);
@@ -66,16 +71,21 @@ test('Gateway device inventory uses the existing accessible responsive drawer',
   assert.match(styles, /\.client-device \{[\s\S]*grid-template-columns: 34px minmax\(0, 1fr\) 112px 34px;[\s\S]*padding: 10px 8px/);
   assert.match(styles, /\.client-device-main \{[\s\S]*display: flex;[\s\S]*align-items: center/);
   assert.match(styles, /\.client-device-traffic-sources \{[\s\S]*display: grid/);
-  assert.match(styles, /\.client-device-traffic-sources span \{[\s\S]*grid-template-columns: 46px minmax\(0, 1fr\)/);
+  assert.match(styles, /\.client-device-traffic-sources > span \{[\s\S]*grid-template-columns: 46px minmax\(0, 1fr\)/);
   assert.match(styles, /\.client-device-policy \{[\s\S]*width: 34px;[\s\S]*border-radius: 50%/);
   assert.match(styles, /\.client-device-name \{[\s\S]*font: 700 15px\/1\.2/);
   assert.match(styles, /\.client-device-last-seen \{[\s\S]*font-size: 10px/);
   assert.match(styles, /\.client-device-traffic-sources strong \{[\s\S]*font-size: 10px/);
   assert.match(styles, /\.client-device-name > span \{[^}]*opacity: 0/);
   assert.match(styles, /\.client-device-name > \.client-device-name-primary \{[^}]*opacity: 1/);
-  assert.match(styles, /\.client-device-name:hover \.client-device-name-ip[\s\S]*opacity: 1/);
+  assert.match(styles, /\.client-device-name > span \{[^}]*transition: opacity 360ms[^}]*transform 480ms/);
+  assert.match(styles, /\.client-device-name:hover \.client-device-name-primary[\s\S]*translateY\(-0\.18em\)/);
+  assert.match(styles, /\.client-device-name:hover \.client-device-name-ip[\s\S]*opacity: 1[\s\S]*translateY\(0\) scale\(1\)/);
   assert.match(styles, /\.client-device-name\.is-copied \.client-device-name-feedback[\s\S]*opacity: 1/);
-  assert.doesNotMatch(styles, /\.client-device-name > span \{[^}]*transition:/);
+  assert.match(styles, /\.client-device-name-feedback \{[^}]*font-size: 9px/);
+  assert.match(styles, /\.client-device-main \{[^}]*height: 34px[\s\S]*align-items: center/);
+  assert.match(styles, /\.client-device-last-seen \{[^}]*height: 32px[\s\S]*align-items: center/);
+  assert.match(styles, /\.client-device-traffic-value\.has-delta > \.is-total[\s\S]*translateY\(-0\.18em\)/);
   assert.match(styles, /\.client-device-last-seen\.is-online \{[\s\S]*color: var\(--client-accent\)/);
   assert.match(styles, /\.client-text-morph-value \{[\s\S]*transition: opacity 360ms[\s\S]*filter 480ms/);
   assert.match(styles, /\.client-device-last-seen:hover \.client-text-morph-value\.is-relative[\s\S]*opacity: 1/);
@@ -85,7 +95,7 @@ test('Gateway device inventory uses the existing accessible responsive drawer',
   assert.match(styles, /\.client-device-edit:hover svg[\s\S]*translate\(1px, -1px\) rotate\(-4deg\)/);
   assert.match(styles, /\.client-devices-sort:hover \.client-devices-sort-icon[\s\S]*rotate\(360deg\)/);
   assert.match(styles, /\.client-devices-refresh-ring circle[\s\S]*client-devices-refresh-progress 15s/);
-  assert.match(styles, /@media \(prefers-reduced-motion: reduce\)[\s\S]*\.client-device-policy svg[\s\S]*\.client-text-morph-value/);
+  assert.match(styles, /@media \(prefers-reduced-motion: reduce\)[\s\S]*\.client-device-policy svg[\s\S]*\.client-device-name > span[\s\S]*\.client-device-traffic-value > span[\s\S]*\.client-text-morph-value/);
   assert.match(styles, /\.client-drawer \{[\s\S]*z-index: 50;[\s\S]*box-shadow:/);
   assert.match(styles, /\.harbor-versions \{[\s\S]*z-index: 40/);
 });
@@ -107,6 +117,9 @@ test('device traffic formatting and sorting preserve uint64 precision and canoni
   assert.equal(formatByteString('9007199254740993'), '8,0 ПБ');
   assert.equal(formatByteString('1536'), '1,5 КБ');
   assert.equal(formatByteString('invalid'), '0 Б');
+  assert.equal(positiveByteDelta('1048576', '3145728'), '2,0 МБ');
+  assert.equal(positiveByteDelta('3145728', '3145728'), '');
+  assert.equal(positiveByteDelta('3145728', '1048576'), '');
 
   const devices = [
     { id: 'a', uploadBytes: '9007199254740993', downloadBytes: '0', proxyUploadBytes: '0' },