Refine device traffic display and sorting

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

@@ -32,6 +32,8 @@ test('Gateway device inventory uses the existing accessible responsive drawer',
   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]*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\} \/>/);
   assert.match(panel, /aria-label=\{`\$\{online \? 'В сети' : 'Не в сети'\}\. Последний контакт: \$\{seen\.tooltip\}`\}/);
   assert.doesNotMatch(panel, /client-device-status|STATUS_LABELS/);
@@ -44,10 +46,9 @@ 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, /Gateway: получено \$\{download\}, отдано \$\{upload\}/);
-  assert.match(panel, /Прокси: получено \$\{proxyDownload\}, отдано \$\{proxyUpload\}/);
   assert.match(panel, /<b>Gateway<\/b><strong>\{gatewayTraffic\}<\/strong>/);
   assert.match(panel, /className="is-proxy"><b>Прокси<\/b><strong>\{proxyTraffic\}<\/strong>/);
+  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/);
   assert.doesNotMatch(panel, /client-device-details/);
@@ -69,6 +70,7 @@ test('Gateway device inventory uses the existing accessible responsive drawer',
   assert.match(styles, /\.client-device-policy \{[\s\S]*width: 32px;[\s\S]*border-radius: 50%/);
   assert.match(styles, /\.client-device-name:hover \.client-device-name-ip[\s\S]*opacity: 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-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/);
@@ -78,7 +80,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-device-name > span[\s\S]*\.client-text-morph-value/);
+  assert.match(styles, /@media \(prefers-reduced-motion: reduce\)[\s\S]*\.client-device-policy svg[\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/);
 });
@@ -104,8 +106,8 @@ test('device traffic formatting and sorting preserve uint64 precision and canoni
   const devices = [
     { id: 'a', uploadBytes: '9007199254740993', downloadBytes: '0', proxyUploadBytes: '0' },
     { id: 'b', uploadBytes: '9007199254740992', downloadBytes: '2' },
-    { id: 'c', uploadBytes: '10', downloadBytes: '10', proxyDownloadBytes: '100' },
     { id: 'd', uploadBytes: '15', downloadBytes: '5', proxyUploadBytes: '100' },
+    { id: 'c', uploadBytes: '10', downloadBytes: '10', proxyDownloadBytes: '100' },
     { id: 'e', pinned: true, uploadBytes: '0', downloadBytes: '0' },
   ];
   assert.deepEqual(sortDevicesByTraffic(devices, 'desc').map(({ id }) => id), ['e', 'b', 'a', 'c', 'd']);