From 8926a8877d7e9a71d48a5f2786e26049a6a329b7 Mon Sep 17 00:00:00 2001 From: Dmitriy Petrov Date: Fri, 7 Aug 2026 19:39:54 +0300 Subject: [PATCH] Improve device traffic chart tooltips --- src/shared/versions.js | 4 +- src/web/components/DevicesPanel.jsx | 32 +++-- src/web/styles.css | 143 ++++++++++++++++----- test/web/device-inventory-contract.test.js | 14 +- 4 files changed, 150 insertions(+), 43 deletions(-) diff --git a/src/shared/versions.js b/src/shared/versions.js index a305535..a9c9ffc 100644 --- a/src/shared/versions.js +++ b/src/shared/versions.js @@ -1,6 +1,6 @@ export const HARBOR_VERSIONS = Object.freeze({ - macClient: '0.14.0', - gatewayClient: '0.15.0', + macClient: '0.14.1', + gatewayClient: '0.15.1', gatewayBackend: '0.15.0', }); diff --git a/src/web/components/DevicesPanel.jsx b/src/web/components/DevicesPanel.jsx index 53110fd..1b43166 100644 --- a/src/web/components/DevicesPanel.jsx +++ b/src/web/components/DevicesPanel.jsx @@ -41,7 +41,7 @@ function chartTime(value) { }); } -function TrafficChart({ samples, scale, capacity }) { +function TrafficChart({ samples, scale, capacity, routeLabel }) { const max = samples.reduce((largest, sample) => { const total = byteString(sample.gatewayBytes) + byteString(sample.proxyBytes); return total > largest ? total : largest; @@ -54,15 +54,24 @@ function TrafficChart({ samples, scale, capacity }) { const proxy = byteString(sample.proxyBytes); const total = gateway + proxy; const time = chartTime(sample.observedAt); + const slot = capacity - samples.length + index; + const edge = slot < 28 ? ' is-edge-left' : slot >= capacity - 28 ? ' is-edge-right' : ''; const { height, gatewayShare } = trafficSampleMetrics(gateway, proxy, max, scale); return - - + ; })} @@ -370,6 +379,7 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) { const gatewayTraffic = formatByteString(gatewayTotal.toString()); const proxyTraffic = formatByteString(proxyTotal.toString()); const totalTraffic = formatByteString((gatewayTotal + proxyTotal).toString()); + const hasProxyTraffic = proxyTotal > 0n; const trafficDelta = trafficDeltas[device.id] || {}; const copied = copyFeedback?.id === device.id; const policyBusy = device.policyStatus === 'applying'; @@ -474,13 +484,18 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) { - + @@ -507,6 +522,7 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) { samples={device.trafficHistory || []} scale={trafficScale} capacity={snapshot.trafficHistoryCapacity || device.trafficHistory?.length || 1} + routeLabel={device.appliedPolicy === 'direct' ? 'Напрямую' : 'Gateway'} /> ; })} diff --git a/src/web/styles.css b/src/web/styles.css index 08e56ff..948d6d1 100644 --- a/src/web/styles.css +++ b/src/web/styles.css @@ -1230,30 +1230,39 @@ p { .client-device-traffic-breakdown { position: absolute; - top: 30px; + top: 27px; right: 0; width: 112px; display: grid; gap: 2px; - padding: 7px 0 6px; - background: color-mix(in oklch, var(--client-bg) 98%, var(--client-panel)); - box-shadow: 0 10px 22px oklch(0.08 0.015 145 / 0.12); - opacity: 0; visibility: hidden; - filter: blur(5px); pointer-events: none; - transform: translateY(-7px); - transform-origin: top center; - transition: opacity 220ms ease, filter 300ms ease, transform 360ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 360ms; + transition: visibility 0s 420ms; +} + +.client-device-traffic-breakdown > span { + opacity: 0; + filter: blur(5px); + transform: translateY(-12px); + transform-origin: top right; + transition: opacity 180ms ease, filter 300ms ease, transform 420ms cubic-bezier(0.16, 1, 0.3, 1); +} + +.client-device-traffic-breakdown > span:nth-child(2) { + transition-delay: 45ms; } .client-device-traffic:hover .client-device-traffic-breakdown, .client-device-traffic:focus .client-device-traffic-breakdown { - opacity: 1; visibility: visible; + transition-delay: 0s; +} + +.client-device-traffic:hover .client-device-traffic-breakdown > span, +.client-device-traffic:focus .client-device-traffic-breakdown > span { + opacity: 1; filter: blur(0); transform: translateY(0); - transition-delay: 0s; } .client-device-traffic b { @@ -1322,11 +1331,12 @@ p { } .client-device-traffic-chart { - grid-column: 2 / 4; + grid-column: 2 / 3; grid-row: 2; height: 42px; position: relative; - overflow: hidden; + z-index: 4; + overflow: visible; } .client-device-traffic-chart::after { @@ -1341,7 +1351,7 @@ p { .client-device-traffic-track { position: absolute; - inset: 0 0 14px; + inset: 0 3px 14px; display: grid; grid-template-columns: repeat(var(--sample-count), minmax(1px, 1fr)); align-items: flex-end; @@ -1350,38 +1360,111 @@ p { } .client-device-traffic-bar { + position: relative; min-height: 2px; + cursor: help; +} + +.client-device-traffic-time { + position: absolute; + right: 2px; + bottom: 0; + left: 2px; + z-index: 2; + display: flex; + justify-content: space-between; + color: color-mix(in oklch, var(--client-text) 46%, var(--client-muted)); + font-size: 8.5px; + line-height: 10px; + text-shadow: 0 1px 5px var(--client-bg); +} + +.client-device-traffic-bar-fill { + position: absolute; + inset: 0; display: flex; overflow: hidden; border-radius: 2px 2px 0 0; flex-direction: column-reverse; } -.client-device-traffic-time { - position: absolute; - right: 0; - bottom: 0; - left: 0; - display: flex; - justify-content: space-between; - color: var(--client-muted); - font-size: 8px; - line-height: 10px; -} - -.client-device-traffic-bar > span { +.client-device-traffic-bar-fill > span { width: 100%; display: block; } -.client-device-traffic-bar > .is-gateway { +.client-device-traffic-bar-fill > .is-gateway { background: color-mix(in oklch, var(--client-text) 58%, var(--client-muted)); } -.client-device-traffic-bar > .is-proxy { +.client-device-traffic-bar-fill > .is-proxy { background: var(--client-accent); } +.client-device-traffic-bar-tooltip { + position: absolute; + bottom: calc(100% + 7px); + left: 50%; + z-index: 20; + width: max-content; + display: grid; + gap: 3px; + padding: 7px 8px; + border-radius: 7px; + background: oklch(0.14 0.012 145); + box-shadow: 0 8px 24px oklch(0.08 0.015 145 / 0.18); + color: oklch(0.92 0.008 145); + font: 600 9px/1.25 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace; + white-space: nowrap; + opacity: 0; + visibility: hidden; + filter: blur(3px); + pointer-events: none; + transform: translate(-50%, 4px); + transition: opacity 100ms ease, filter 140ms ease, transform 180ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 180ms; +} + +.client-device-traffic-bar-tooltip time { + color: oklch(0.68 0.012 145); + font-size: 8px; +} + +.client-device-traffic-bar-tooltip strong { + color: oklch(0.98 0.006 145); + font-size: 10px; +} + +.client-device-traffic-bar-tooltip .is-proxy { + color: var(--client-accent); +} + +.client-device-traffic-bar:hover .client-device-traffic-bar-tooltip { + opacity: 1; + visibility: visible; + filter: blur(0); + transform: translate(-50%, 0); + transition-delay: 0s; +} + +.client-device-traffic-bar.is-edge-left .client-device-traffic-bar-tooltip { + left: 0; + transform: translate(0, 4px); +} + +.client-device-traffic-bar.is-edge-left:hover .client-device-traffic-bar-tooltip { + transform: translate(0, 0); +} + +.client-device-traffic-bar.is-edge-right .client-device-traffic-bar-tooltip { + right: 0; + left: auto; + transform: translate(0, 4px); +} + +.client-device-traffic-bar.is-edge-right:hover .client-device-traffic-bar-tooltip { + transform: translate(0, 0); +} + @keyframes client-device-traffic-shift { from { opacity: 0.52; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } @@ -4449,6 +4532,8 @@ p { .client-device-name > span, .client-device-traffic-value > span, .client-device-traffic-breakdown, + .client-device-traffic-breakdown > span, + .client-device-traffic-bar-tooltip, .client-device-traffic-track, .client-device-edit, .client-device-edit svg, diff --git a/test/web/device-inventory-contract.test.js b/test/web/device-inventory-contract.test.js index bc7a724..6bf4cce 100644 --- a/test/web/device-inventory-contract.test.js +++ b/test/web/device-inventory-contract.test.js @@ -51,11 +51,14 @@ test('Gateway device inventory uses the existing accessible responsive drawer', assert.match(panel, /Учитывается только трафик, который прошёл через Harbor/); assert.match(panel, /client-device-traffic-total[\s\S]*Всего<\/b>Gateway<\/b>Прокси<\/b> 0n/); + assert.match(panel, /client-device-traffic-breakdown[\s\S]*\{hasProxyTraffic && Прокси<\/b>\{time\}<\/time>[\s\S]*Всего \{formatByteString\(total\)\}<\/strong>/); + assert.match(panel, /routeLabel=\{device\.appliedPolicy === 'direct' \? 'Напрямую' : 'Gateway'\}/); + assert.match(panel, /\{proxy > 0n && Proxy \{formatByteString\(proxy\)\}<\/span>\}/); assert.match(panel, /