Show device identity details and resolve hostnames

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

@@ -49,12 +49,13 @@ test('Gateway device inventory uses the existing accessible responsive drawer',
   assert.match(deviceRoute, /pathname === '\/api\/devices\/refresh'[\s\S]*deviceInventory\.refresh\(\)/);
   assert.match(deviceRoute, /DEVICE_POLICY_PATH[\s\S]*deviceInventory\.setPolicy/);
   assert.match(panel, /<Tooltip>Изменить название<\/Tooltip>/);
-  assert.match(panel, /copyText\(device\.ip\)/);
+  assert.match(panel, /copyText\(value\)/);
   assert.match(panel, /const hasName = Boolean\(device\.alias \|\| device\.hostname\)/);
-  assert.match(panel, /client-device-alias-trigger[\s\S]*client-device-name-separator[\s\S]*client-device-ip/);
+  assert.match(panel, /const title = device\.alias \|\| device\.hostname \|\| device\.ip \|\| 'Неизвестное устройство'/);
+  assert.match(panel, /client-device-fallback-name[\s\S]*client-device-identity-details[\s\S]*<b>IP<\/b>[\s\S]*<b>MAC<\/b>[\s\S]*<b>Host<\/b>/);
   assert.match(panel, /onClick=\{\(\) => startEditing\(device\)\}/);
   assert.match(panel, /\{!hasName && !editing && <span className="client-device-edit-wrap client-tooltip-anchor">/);
-  assert.match(panel, /client-device-name-heading client-tooltip-anchor\$\{hasName \? '' : ' is-address-only'\}\$\{editing \? ' is-editing' : ''\}/);
+  assert.match(panel, /className=\{`client-device-name-heading\$\{hasName \? '' : ' is-address-only'\}\$\{editing \? ' is-editing' : ''\}`\}/);
   assert.match(panel, /className="client-device-alias-input"[\s\S]*onBlur=\{\(\) => saveAlias\(device\)\}[\s\S]*event\.key === 'Enter'[\s\S]*event\.currentTarget\.blur\(\)/);
   assert.match(panel, /aliasBaseline\.current = \{ id: device\.id, value \}/);
   assert.match(panel, /style=\{\{ '--alias-width': `\$\{Math\.max\(1, alias\.length\)\}ch` \} as CSSProperties\}/);
@@ -64,7 +65,7 @@ test('Gateway device inventory uses the existing accessible responsive drawer',
   assert.match(panel, /pencilAnimationId === device\.id \? ' is-writing'/);
   assert.match(panel, /onAnimationEnd=\{\(\) => setPencilAnimationId/);
   assert.match(panel, /COPY_FEEDBACK_MS = 800/);
-  assert.match(panel, /IP \$\{device\.ip\} скопирован/);
+  assert.match(panel, /`\$\{field\} \$\{value\} скопирован`/);
   assert.doesNotMatch(panel, /client-device-name-feedback|client-device-name-primary/);
   assert.doesNotMatch(panel, /client-device-title/);
   assert.match(panel, /online \? 'В сети' : <TextMorph from="Не в сети" to=\{seen\.relative\} \/>/);
@@ -73,9 +74,11 @@ test('Gateway device inventory uses the existing accessible responsive drawer',
   assert.doesNotMatch(panel, /client-text-morph-goo/);
   assert.doesNotMatch(panel, /client-device-addresses|client-device-manufacturer|client-device-meta/);
   assert.doesNotMatch(panel, /device\.interface/);
-  assert.match(panel, /identityTooltipId = `device-identity-\$\{device\.id\}`/);
-  assert.match(panel, /<Tooltip id=\{identityTooltipId\}>Hostname: \{device\.hostname \|\| '—'\} · MAC: \{device\.mac\}<\/Tooltip>/);
-  assert.match(panel, /aria-describedby=\{identityTooltipId\}/);
+  assert.match(panel, /role="group" aria-label=\{`Технические данные устройства \$\{title\}`\}/);
+  assert.match(panel, /onClick=\{\(\) => copyDeviceValue\(device, 'IP', device\.ip!\)\}/);
+  assert.match(panel, /onClick=\{\(\) => copyDeviceValue\(device, 'MAC', device\.mac\)\}/);
+  assert.match(panel, /\{device\.hostname && <button[\s\S]*copyDeviceValue\(device, 'Hostname', device\.hostname!\)/);
+  assert.doesNotMatch(panel, /identityTooltipId|Hostname: \{device\.hostname/);
   assert.match(panel, /device\.confidence === 'ambiguous'/);
   assert.match(panel, /stabilizeDevicesByTraffic\(snapshot\?\.devices, sortDirection, previousIds\)/);
   assert.match(panel, /Трафик временно не обновляется/);
@@ -162,13 +165,14 @@ test('Gateway device inventory uses the existing accessible responsive drawer',
   assert.match(styles, /\.client-device-alias-input \{[\s\S]*width: var\(--alias-width\)[\s\S]*caret-color: var\(--client-accent\)[\s\S]*font: var\(--type-section-title\)[\s\S]*client-device-alias-edit-in 360ms/);
   assert.match(styles, /@keyframes client-device-alias-edit-in[\s\S]*color: var\(--client-accent\)[\s\S]*filter: blur\(2px\)/);
   assert.doesNotMatch(styles, /\.client-device-alias \{/);
-  assert.match(styles, /\.client-device-ip \{[\s\S]*font: var\(--type-data\)/);
+  assert.match(styles, /\.client-device-identity-copy span \{[\s\S]*font: var\(--type-data\)/);
   assert.match(styles, /\.client-device-last-seen \{[\s\S]*position: absolute;[\s\S]*top: 0;[\s\S]*left: 0;[\s\S]*font: var\(--type-micro\)/);
   assert.match(styles, /\.client-device-traffic strong \{[\s\S]*font: var\(--type-control\)/);
-  assert.match(styles, /\.client-device-name-separator \{[\s\S]*color: var\(--client-muted\)/);
-  assert.match(styles, /\.client-device-ip\.is-copied \{[\s\S]*client-device-ip-copy 800ms/);
+  assert.match(styles, /\.client-device-identity-details \{[\s\S]*top: 100%;[\s\S]*pointer-events: none/);
+  assert.match(styles, /\.client-device-name-heading:hover > \.client-device-identity-details,[\s\S]*pointer-events: auto/);
+  assert.match(styles, /\.client-device-identity-copy\.is-copied \{[\s\S]*client-device-copy 800ms/);
   assert.match(styles, /\.client-device-main \{[^}]*height: 34px[\s\S]*align-items: flex-end[\s\S]*padding: 11px 0 0/);
-  assert.match(styles, /\.client-device-main > h4\.is-address-only \{[\s\S]*flex: 0 1 auto/);
+  assert.match(styles, /\.client-device-main > h4 \{[\s\S]*flex: 0 1 auto/);
   assert.match(styles, /\.client-device-last-seen \{[^}]*height: 10px[\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\)/);
@@ -185,15 +189,15 @@ test('Gateway device inventory uses the existing accessible responsive drawer',
   assert.match(styles, /\.client-device-traffic-plot svg \{[\s\S]*height: 100%;[\s\S]*overflow: hidden/);
   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-alias-trigger[\s\S]*\.client-device-ip[\s\S]*\.client-device-traffic-value > span[\s\S]*\.client-device-traffic-breakdown[\s\S]*\.client-device-traffic-lines[\s\S]*\.client-text-morph-value[\s\S]*transition: none;[\s\S]*animation: none/);
+  assert.match(styles, /@media \(prefers-reduced-motion: reduce\)[\s\S]*\.client-device-policy svg[\s\S]*\.client-device-alias-trigger[\s\S]*\.client-device-identity-details[\s\S]*\.client-device-identity-copy[\s\S]*\.client-device-traffic-value > span[\s\S]*\.client-device-traffic-breakdown[\s\S]*\.client-device-traffic-lines[\s\S]*\.client-text-morph-value[\s\S]*transition: none;[\s\S]*animation: none/);
   assert.match(styles, /\.client-drawer \{[\s\S]*z-index: 50;[\s\S]*box-shadow:/);
   assert.match(styles, /\.harbor-versions \{[\s\S]*z-index: 40/);
 });
 
 test('device copy feedback stays keyed per device', () => {
   assert.match(panel, /copyTimers = useRef\(new Map[\s\S]*copyTimers\.current\.get\(device\.id\)[\s\S]*copyTimers\.current\.set\(device\.id/);
-  assert.match(panel, /copyAttempts = useRef\(new Map[\s\S]*copyAttempts\.current\.set\(device\.id, attempt\)[\s\S]*await copyText\(device\.ip\)[\s\S]*copyAttempts\.current\.get\(device\.id\) !== attempt/);
-  assert.match(panel, /setCopyFeedback\(\(current\) => \(\{ \.\.\.current, \[device\.id\]: feedback \}\)\)/);
+  assert.match(panel, /copyAttempts = useRef\(new Map[\s\S]*copyAttempts\.current\.set\(device\.id, attempt\)[\s\S]*await copyText\(value\)[\s\S]*copyAttempts\.current\.get\(device\.id\) !== attempt/);
+  assert.match(panel, /setCopyFeedback\(\(current\) => \(\{ \.\.\.current, \[device\.id\]: \{ \.\.\.feedback, field \} \}\)\)/);
   assert.match(panel, /const feedback = copyFeedback\[device\.id\]/);
 });