Improve device traffic chart tooltips

src/shared/versions.js

@@ -1,6 +1,6 @@
 export const HARBOR_VERSIONS = Object.freeze({
-  macClient: '0.14.0',
+  macClient: '0.14.1',
-  gatewayClient: '0.15.0',
+  gatewayClient: '0.15.1',
   gatewayBackend: '0.15.0',
 });
 

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 <i
-          className="client-device-traffic-bar"
+          className={`client-device-traffic-bar${edge}`}
           key={`${sample.observedAt}-${index}`}
-          style={{ height: `${height}%`, gridColumnStart: capacity - samples.length + index + 1 }}
+          style={{ height: `${height}%`, gridColumnStart: slot + 1 }}
-          title={`${time} · Всего ${formatByteString(total)} · Gateway ${formatByteString(gateway)} · Прокси ${formatByteString(proxy)}`}
         >
-          <span className="is-gateway" style={{ height: `${gatewayShare}%` }} />
+          <span className="client-device-traffic-bar-fill" aria-hidden="true">
-          <span className="is-proxy" style={{ height: `${100 - gatewayShare}%` }} />
+            <span className="is-gateway" style={{ height: `${gatewayShare}%` }} />
+            <span className="is-proxy" style={{ height: `${100 - gatewayShare}%` }} />
+          </span>
+          <span className="client-device-traffic-bar-tooltip" aria-hidden="true">
+            <time dateTime={sample.observedAt}>{time}</time>
+            <strong>Всего {formatByteString(total)}</strong>
+            <span>{routeLabel} {formatByteString(gateway)}</span>
+            {proxy > 0n && <span className="is-proxy">Proxy {formatByteString(proxy)}</span>}
+          </span>
         </i>;
       })}
     </span>
@@ -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 }) {
                 </span>
               </div>
 
-              <span className="client-device-traffic" role="group" tabIndex="0" aria-label={`Всего ${totalTraffic}. Gateway ${gatewayTraffic}, Прокси ${proxyTraffic}`}>
+              <span
+                className="client-device-traffic"
+                role="group"
+                tabIndex="0"
+                aria-label={`Всего ${totalTraffic}. Gateway ${gatewayTraffic}${hasProxyTraffic ? `, Прокси ${proxyTraffic}` : ''}`}
+              >
                 <span className="client-device-traffic-total" aria-hidden="true">
                   <b>Всего</b><TrafficValue value={totalTraffic} delta={trafficDelta.total} />
                 </span>
                 <span className="client-device-traffic-breakdown" aria-hidden="true">
                   <span><b>Gateway</b><TrafficValue value={gatewayTraffic} delta={trafficDelta.gateway} /></span>
-                  <span className="is-proxy"><b>Прокси</b><TrafficValue value={proxyTraffic} delta={trafficDelta.proxy} /></span>
+                  {hasProxyTraffic && <span className="is-proxy"><b>Прокси</b><TrafficValue value={proxyTraffic} delta={trafficDelta.proxy} /></span>}
                 </span>
               </span>
 
@@ -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'}
               />
             </article>;
           })}

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);
+  transition: visibility 0s 420ms;
-  transform-origin: top center;
+}
-  transition: opacity 220ms ease, filter 300ms ease, transform 360ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 360ms;
+
+.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 {
+.client-device-traffic-bar-fill > span {
-  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 {
   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,

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>Всего<\/b><TrafficValue value=\{totalTraffic\} delta=\{trafficDelta\.total\}/);
   assert.match(panel, /client-device-traffic-breakdown[\s\S]*<b>Gateway<\/b><TrafficValue value=\{gatewayTraffic\} delta=\{trafficDelta\.gateway\}/);
-  assert.match(panel, /client-device-traffic-breakdown[\s\S]*className="is-proxy"><b>Прокси<\/b><TrafficValue value=\{proxyTraffic\} delta=\{trafficDelta\.proxy\}/);
+  assert.match(panel, /const hasProxyTraffic = proxyTotal > 0n/);
+  assert.match(panel, /client-device-traffic-breakdown[\s\S]*\{hasProxyTraffic && <span className="is-proxy"><b>Прокси<\/b><TrafficValue value=\{proxyTraffic\} delta=\{trafficDelta\.proxy\}/);
   assert.match(panel, /TrafficChart[\s\S]*samples=\{device\.trafficHistory \|\| \[\]\}[\s\S]*scale=\{trafficScale\}[\s\S]*capacity=\{snapshot\.trafficHistoryCapacity/);
   assert.doesNotMatch(panel, /setTrafficHistory|TRAFFIC_HISTORY_LIMIT/);
   assert.match(panel, /aria-pressed=\{trafficScale === 'linear'\}[\s\S]*aria-pressed=\{trafficScale === 'log'\}/);
-  assert.match(panel, /title=\{`\$\{time\} · Всего \$\{formatByteString\(total\)\} · Gateway/);
+  assert.match(panel, /client-device-traffic-bar-tooltip[\s\S]*<time dateTime=\{sample\.observedAt\}>\{time\}<\/time>[\s\S]*<strong>Всего \{formatByteString\(total\)\}<\/strong>/);
+  assert.match(panel, /routeLabel=\{device\.appliedPolicy === 'direct' \? 'Напрямую' : 'Gateway'\}/);
+  assert.match(panel, /\{proxy > 0n && <span className="is-proxy">Proxy \{formatByteString\(proxy\)\}<\/span>\}/);
   assert.match(panel, /<time dateTime=\{samples\[0\]\.observedAt\}>[\s\S]*<span>15 с<\/span>/);
   assert.match(panel, /positiveByteDelta\(previous\.gateway, gateway\)[\s\S]*positiveByteDelta\(previous\.proxy, proxy\)/);
   assert.match(panel, /setTimeout\(\(\) => setTrafficDeltas\(\{\}\), TRAFFIC_DELTA_MS\)/);
@@ -77,9 +80,12 @@ 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]*grid-template-rows: 34px 42px;[\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-total,[\s\S]*\.client-device-traffic-breakdown > span \{[\s\S]*grid-template-columns: 46px minmax\(0, 1fr\)/);
-  assert.match(styles, /\.client-device-traffic:hover \.client-device-traffic-breakdown,[\s\S]*opacity: 1[\s\S]*translateY\(0\)/);
+  assert.match(styles, /\.client-device-traffic-breakdown > span \{[\s\S]*translateY\(-12px\)[\s\S]*\.client-device-traffic:hover \.client-device-traffic-breakdown > span,[\s\S]*opacity: 1[\s\S]*translateY\(0\)/);
-  assert.match(styles, /\.client-device-traffic-chart \{[\s\S]*grid-column: 2 \/ 4;[\s\S]*grid-row: 2/);
+  assert.doesNotMatch(styles, /\.client-device-traffic-breakdown \{[^}]*background:|\.client-device-traffic-breakdown \{[^}]*box-shadow:/);
+  assert.match(styles, /\.client-device-traffic-chart \{[\s\S]*grid-column: 2 \/ 3;[\s\S]*grid-row: 2/);
   assert.match(styles, /\.client-device-traffic-track \{[\s\S]*client-device-traffic-shift 420ms/);
+  assert.match(styles, /\.client-device-traffic-bar:hover \.client-device-traffic-bar-tooltip \{[\s\S]*opacity: 1[\s\S]*visibility: visible/);
+  assert.match(styles, /\.client-device-traffic-bar\.is-edge-left[\s\S]*\.client-device-traffic-bar\.is-edge-right/);
   assert.match(styles, /@keyframes client-device-traffic-shift[\s\S]*translateX\(8px\)[\s\S]*translateX\(0\)/);
   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/);