diff --git a/src/server/services/deviceInventoryService.js b/src/server/services/deviceInventoryService.js
index 8e78539..daf4f0c 100644
--- a/src/server/services/deviceInventoryService.js
+++ b/src/server/services/deviceInventoryService.js
@@ -9,6 +9,7 @@ export const DEVICE_INVENTORY_SCHEMA_VERSION = 2;
const ONLINE_MS = 2 * 60 * 1000;
const RECENT_MS = 24 * 60 * 60 * 1000;
const RETENTION_MS = 30 * 24 * 60 * 60 * 1000;
+const TRAFFIC_HISTORY_LIMIT = 120;
const COUNTER_PATTERN = /^\d+$/;
const DEVICE_ID_PATTERN = /^dev_[a-f0-9]{16}$/;
const MAC_PATTERN = /^[0-9a-f]{2}(?::[0-9a-f]{2}){5}$/;
@@ -302,6 +303,36 @@ export function createDeviceInventoryService({
}) {
let refreshPromise = null;
let policyQueue = Promise.resolve();
+ const trafficHistoryByMac = new Map();
+ const trafficCursorByMac = new Map();
+
+ function captureTrafficHistory(state) {
+ const knownMacs = new Set(state.devices.map(({ mac }) => mac));
+ for (const device of state.devices) {
+ const traffic = state.traffic.totalsByMac[device.mac];
+ const proxy = state.traffic.proxy.totalsByMac[device.mac];
+ const signature = `${traffic?.observedAt || ''}|${proxy?.observedAt || ''}`;
+ if (signature === '|') continue;
+ const gateway = BigInt(traffic?.uploadBytes || '0') + BigInt(traffic?.downloadBytes || '0');
+ const proxyTotal = BigInt(proxy?.uploadBytes || '0') + BigInt(proxy?.downloadBytes || '0');
+ const previous = trafficCursorByMac.get(device.mac);
+ trafficCursorByMac.set(device.mac, { signature, gateway, proxy: proxyTotal });
+ if (!previous || previous.signature === signature) continue;
+ const observedAt = [traffic?.observedAt, proxy?.observedAt].filter(Boolean).sort().at(-1);
+ const samples = trafficHistoryByMac.get(device.mac) || [];
+ trafficHistoryByMac.set(device.mac, [...samples, {
+ observedAt,
+ gatewayBytes: gateway > previous.gateway ? (gateway - previous.gateway).toString() : '0',
+ proxyBytes: proxyTotal > previous.proxy ? (proxyTotal - previous.proxy).toString() : '0',
+ }].slice(-TRAFFIC_HISTORY_LIMIT));
+ }
+ for (const mac of trafficCursorByMac.keys()) {
+ if (!knownMacs.has(mac)) {
+ trafficCursorByMac.delete(mac);
+ trafficHistoryByMac.delete(mac);
+ }
+ }
+ }
function serializePolicy(action) {
const result = policyQueue.then(action, action);
@@ -363,6 +394,7 @@ export function createDeviceInventoryService({
proxyUploadBytes: proxyTraffic?.uploadBytes || '0',
proxyDownloadBytes: proxyTraffic?.downloadBytes || '0',
proxyTrafficObservedAt: proxyTraffic?.observedAt || null,
+ trafficHistory: trafficHistoryByMac.get(device.mac) || [],
desiredPolicy: policy.desired,
appliedPolicy: policy.applied,
policyStatus: policy.status,
@@ -376,6 +408,7 @@ export function createDeviceInventoryService({
));
return {
revision: state.revision,
+ trafficHistoryCapacity: TRAFFIC_HISTORY_LIMIT,
source: {
kind: 'neighbor',
lastObservedAt: state.lastObservedAt,
@@ -534,7 +567,7 @@ export function createDeviceInventoryService({
identitiesByMac.get(mac).add(`${observation.ip}|${observation.interface || ''}`);
}
return serializePolicy(async () => {
- store.update((stored) => {
+ const nextState = store.update((stored) => {
const state = migrateDeviceInventoryState(stored);
const byMac = new Map(state.devices.map((device) => [device.mac, device]));
for (const observation of observations) {
@@ -752,6 +785,7 @@ export function createDeviceInventoryService({
devices,
};
});
+ captureTrafficHistory(nextState);
if (policyResult?.transportError) commitPolicyFailure(new Error(policyResult.transportError));
return reconcileLocked(policyResult, false);
});
diff --git a/src/shared/versions.js b/src/shared/versions.js
index c3391f2..a305535 100644
--- a/src/shared/versions.js
+++ b/src/shared/versions.js
@@ -1,7 +1,7 @@
export const HARBOR_VERSIONS = Object.freeze({
- macClient: '0.13.6',
- gatewayClient: '0.14.6',
- gatewayBackend: '0.14.0',
+ macClient: '0.14.0',
+ gatewayClient: '0.15.0',
+ gatewayBackend: '0.15.0',
});
export function parseVersion(value) {
diff --git a/src/web/components/DevicesPanel.jsx b/src/web/components/DevicesPanel.jsx
index 53bb530..53110fd 100644
--- a/src/web/components/DevicesPanel.jsx
+++ b/src/web/components/DevicesPanel.jsx
@@ -14,7 +14,6 @@ const AUTO_REFRESH_MS = 15_000;
const DEVICE_MOVE_MS = 520;
const COPY_FEEDBACK_MS = 5_000;
const TRAFFIC_DELTA_MS = 2_200;
-const TRAFFIC_HISTORY_LIMIT = 18;
function Tooltip({ children }) {
return {children};
@@ -36,24 +35,42 @@ function TrafficValue({ value, delta }) {
;
}
-function TrafficChart({ samples }) {
+function chartTime(value) {
+ return new Date(value).toLocaleTimeString('ru-RU', {
+ hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false,
+ });
+}
+
+function TrafficChart({ samples, scale, capacity }) {
const max = samples.reduce((largest, sample) => {
- const total = byteString(sample.gateway) + byteString(sample.proxy);
+ const total = byteString(sample.gatewayBytes) + byteString(sample.proxyBytes);
return total > largest ? total : largest;
}, 0n);
- const latest = samples.at(-1)?.id || 'empty';
- return
-
- {samples.map((sample) => {
- const gateway = byteString(sample.gateway);
- const proxy = byteString(sample.proxy);
- const { height, gatewayShare } = trafficSampleMetrics(gateway, proxy, max);
- return
+ const latest = samples.at(-1)?.observedAt || 'empty';
+ return
+
+ {samples.map((sample, index) => {
+ const gateway = byteString(sample.gatewayBytes);
+ const proxy = byteString(sample.proxyBytes);
+ const total = gateway + proxy;
+ const time = chartTime(sample.observedAt);
+ const { height, gatewayShare } = trafficSampleMetrics(gateway, proxy, max, scale);
+ return
;
})}
+ {samples.length > 0 &&
+
+ 15 с
+
+ }
;
}
@@ -67,15 +84,14 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
const [refreshing, setRefreshing] = useState(false);
const [refreshCycle, setRefreshCycle] = useState(0);
const [sortDirection, setSortDirection] = useState('desc');
+ const [trafficScale, setTrafficScale] = useState('linear');
const [copyFeedback, setCopyFeedback] = useState(null);
const [trafficDeltas, setTrafficDeltas] = useState({});
- const [trafficHistory, setTrafficHistory] = useState({});
const deviceNodes = useRef(new Map());
const previousPositions = useRef(new Map());
const previousTraffic = useRef(new Map());
const copyTimer = useRef(null);
const trafficDeltaTimer = useRef(null);
- const trafficSequence = useRef(0);
const devices = useMemo(
() => sortDevicesByTraffic(snapshot?.devices, sortDirection),
[snapshot?.devices, sortDirection],
@@ -125,7 +141,6 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
const next = new Map();
const deltas = {};
- const historyChanges = {};
for (const device of snapshot?.devices || []) {
const gateway = byteString(device.downloadBytes) + byteString(device.uploadBytes);
const proxy = byteString(device.proxyDownloadBytes) + byteString(device.proxyUploadBytes);
@@ -137,22 +152,10 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
if (!gatewayDelta && !proxyDelta) continue;
const totalDelta = positiveByteDelta(previous.gateway + previous.proxy, gateway + proxy);
deltas[device.id] = { gateway: gatewayDelta, proxy: proxyDelta, total: totalDelta };
- historyChanges[device.id] = {
- id: ++trafficSequence.current,
- gateway: gateway > previous.gateway ? (gateway - previous.gateway).toString() : '0',
- proxy: proxy > previous.proxy ? (proxy - previous.proxy).toString() : '0',
- };
}
previousTraffic.current = next;
if (!Object.keys(deltas).length) return;
setTrafficDeltas(deltas);
- setTrafficHistory((current) => {
- const updated = { ...current };
- for (const [id, change] of Object.entries(historyChanges)) {
- updated[id] = [...(current[id] || []), change].slice(-TRAFFIC_HISTORY_LIMIT);
- }
- return updated;
- });
clearTimeout(trafficDeltaTimer.current);
trafficDeltaTimer.current = setTimeout(() => setTrafficDeltas({}), TRAFFIC_DELTA_MS);
}, [snapshot?.devices, open]);
@@ -309,6 +312,10 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
Сначала {sortDirection === 'desc' ? 'больше' : 'меньше'} трафика
+
+
+
+
Устройства
@@ -496,7 +503,11 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
{policyTooltip}
-
+
;
})}
diff --git a/src/web/styles.css b/src/web/styles.css
index 46b3a87..08e56ff 100644
--- a/src/web/styles.css
+++ b/src/web/styles.css
@@ -753,6 +753,28 @@ p {
position: relative;
}
+.client-devices-scale {
+ display: flex;
+ padding: 2px;
+ border: 1px solid color-mix(in oklch, var(--client-border) 72%, transparent);
+ border-radius: 999px;
+}
+
+.client-devices-scale button {
+ padding: 4px 6px;
+ border: 0;
+ border-radius: 999px;
+ background: transparent;
+ color: var(--client-muted);
+ font: 700 9px/1 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
+ cursor: pointer;
+}
+
+.client-devices-scale button[aria-pressed="true"] {
+ background: color-mix(in oklch, var(--client-accent) 14%, transparent);
+ color: var(--client-accent);
+}
+
.client-devices-sort {
min-height: 28px;
display: flex;
@@ -902,7 +924,7 @@ p {
.client-device {
display: grid;
grid-template-columns: 34px minmax(0, 1fr) 112px 34px;
- grid-template-rows: 34px 28px;
+ grid-template-rows: 34px 42px;
align-items: start;
column-gap: 8px;
row-gap: 6px;
@@ -1302,7 +1324,7 @@ p {
.client-device-traffic-chart {
grid-column: 2 / 4;
grid-row: 2;
- height: 28px;
+ height: 42px;
position: relative;
overflow: hidden;
}
@@ -1310,7 +1332,7 @@ p {
.client-device-traffic-chart::after {
position: absolute;
right: 0;
- bottom: 0;
+ bottom: 13px;
left: 0;
height: 1px;
background: color-mix(in oklch, var(--client-border) 58%, transparent);
@@ -1319,24 +1341,34 @@ p {
.client-device-traffic-track {
position: absolute;
- inset: 0 0 1px;
- display: flex;
+ inset: 0 0 14px;
+ display: grid;
+ grid-template-columns: repeat(var(--sample-count), minmax(1px, 1fr));
align-items: flex-end;
- justify-content: flex-end;
- gap: 3px;
+ gap: 1px;
animation: client-device-traffic-shift 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
.client-device-traffic-bar {
- width: 5px;
min-height: 2px;
- flex: 0 0 5px;
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 {
width: 100%;
display: block;
diff --git a/src/web/utils/format.js b/src/web/utils/format.js
index 6d0712d..3558ed7 100644
--- a/src/web/utils/format.js
+++ b/src/web/utils/format.js
@@ -37,13 +37,16 @@ export function positiveByteDelta(previous, current) {
return after > before ? formatByteString((after - before).toString()) : '';
}
-export function trafficSampleMetrics(gatewayValue, proxyValue, maxValue) {
+export function trafficSampleMetrics(gatewayValue, proxyValue, maxValue, scale = 'linear') {
const gateway = byteString(gatewayValue);
const proxy = byteString(proxyValue);
const total = gateway + proxy;
const max = byteString(maxValue);
+ const ratio = scale === 'log'
+ ? Math.log1p(Number(total)) / Math.log1p(Number(max))
+ : Number(total * 100n / (max || 1n)) / 100;
return {
- height: max && total ? Math.max(10, Math.min(100, Number(total * 100n / max))) : 0,
+ height: max && total ? Math.max(10, Math.min(100, Math.round(ratio * 100))) : 0,
gatewayShare: total ? Number(gateway * 100n / total) : 0,
};
}
diff --git a/test/server/device-inventory.test.js b/test/server/device-inventory.test.js
index a00d3a5..28b67a1 100644
--- a/test/server/device-inventory.test.js
+++ b/test/server/device-inventory.test.js
@@ -273,6 +273,51 @@ test('device traffic totals persist exact deltas across polls and process epochs
assert.equal(snapshot.source.traffic.error, 'traffic unavailable');
});
+test('device traffic history stays in bounded service memory and survives client snapshots', async (t) => {
+ const directory = fs.mkdtempSync(path.join(os.tmpdir(), 'harbor-device-history-'));
+ t.after(() => fs.rmSync(directory, { recursive: true, force: true }));
+ const filePath = path.join(directory, 'devices.json');
+ const store = createJsonStore({ filePath, defaultValue: {}, migrate: migrateDeviceInventoryState });
+ const mac = '00:11:22:33:44:55';
+ let observedAt = '2026-08-07T12:00:00.000Z';
+ let uploadBytes = '100';
+ let proxyDownloadBytes = '20';
+ const createService = () => createDeviceInventoryService({
+ store,
+ observe: () => ({
+ observedAt,
+ error: null,
+ observations: [{ ip: '192.168.50.7', mac, interface: 'eth0', observedAt, active: true }],
+ }),
+ observeTraffic: () => ({
+ epoch: 'epoch-a',
+ generation: 'rules-a',
+ observedAt,
+ source: { error: null },
+ devices: [{
+ ip: '192.168.50.7', mac, interface: 'eth0', uploadBytes, downloadBytes: '0',
+ proxyUploadBytes: '0', proxyDownloadBytes,
+ }],
+ }),
+ });
+ const service = createService();
+ assert.deepEqual((await service.refresh()).devices[0].trafficHistory, []);
+
+ observedAt = '2026-08-07T12:00:15.000Z';
+ uploadBytes = '130';
+ proxyDownloadBytes = '25';
+ const snapshot = await service.refresh();
+ assert.equal(snapshot.trafficHistoryCapacity, 120);
+ assert.deepEqual(snapshot.devices[0].trafficHistory, [{
+ observedAt,
+ gatewayBytes: '30',
+ proxyBytes: '5',
+ }]);
+ assert.deepEqual(service.snapshot().devices[0].trafficHistory, snapshot.devices[0].trafficHistory);
+ assert.doesNotMatch(fs.readFileSync(filePath, 'utf8'), /trafficHistory/);
+ assert.deepEqual(createService().snapshot().devices[0].trafficHistory, []);
+});
+
test('legacy dataplane samples preserve saved proxy totals while Gateway totals keep advancing', async (t) => {
const directory = fs.mkdtempSync(path.join(os.tmpdir(), 'harbor-device-proxy-legacy-'));
t.after(() => fs.rmSync(directory, { recursive: true, force: true }));
diff --git a/test/web/device-inventory-contract.test.js b/test/web/device-inventory-contract.test.js
index 037ae42..bc7a724 100644
--- a/test/web/device-inventory-contract.test.js
+++ b/test/web/device-inventory-contract.test.js
@@ -52,8 +52,11 @@ test('Gateway device inventory uses the existing accessible responsive drawer',
assert.match(panel, /client-device-traffic-total[\s\S]*Всего<\/b>Gateway<\/b>Прокси<\/b>[\s\S]*15 с<\/span>/);
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|\{trafficLabel\}<\/Tooltip>/);
@@ -71,7 +74,7 @@ test('Gateway device inventory uses the existing accessible responsive drawer',
assert.doesNotMatch(panel, /Закрепите устройство, чтобы изменить маршрут|Сначала верните маршрут через Gateway/);
assert.match(panel, /maxLength="64"[\s\S]*autoFocus/);
assert.match(styles, /\.client-devices \{\s*width: min\(580px, 100vw\)/);
- assert.match(styles, /\.client-device \{[\s\S]*grid-template-columns: 34px minmax\(0, 1fr\) 112px 34px;[\s\S]*grid-template-rows: 34px 28px;[\s\S]*padding: 10px 8px/);
+ 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\)/);
@@ -129,6 +132,7 @@ test('device traffic formatting and sorting preserve uint64 precision and canoni
assert.deepEqual(trafficSampleMetrics('75', '25', '200'), { height: 50, gatewayShare: 75 });
assert.deepEqual(trafficSampleMetrics('1', '0', '1000'), { height: 10, gatewayShare: 100 });
assert.deepEqual(trafficSampleMetrics('0', '0', '0'), { height: 0, gatewayShare: 0 });
+ assert.deepEqual(trafficSampleMetrics('10', '0', '100', 'log'), { height: 52, gatewayShare: 100 });
const devices = [
{ id: 'a', uploadBytes: '9007199254740993', downloadBytes: '0', proxyUploadBytes: '0' },