dokril/harbor-net
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Add outbound traffic breakdown to device charts
Build and Deploy Gateway / build-and-push (push) Successful in 20s
Details
Build and Deploy Gateway / deploy (push) Successful in 14s
Details

Browse Source
This commit is contained in:
dokril
2026-08-12 22:18:08 +03:00
parent 9e52ccc24d
commit 9d43e74d97
10 changed files with 403 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/web/styles/features/devices.css
+72
View File
@@ -909,6 +909,25 @@
stroke-dasharray: 5 4;
}
.client-device-traffic-lines .is-vpn {
stroke: var(--harbor-connect);
}
.client-device-traffic-lines .is-direct-tracked {
stroke: var(--harbor-gateway);
stroke-dasharray: 5 4;
}
.client-device-traffic-lines .is-direct-ipv4 {
stroke: var(--harbor-word);
stroke-dasharray: 2 3;
}
.client-device-traffic-lines .is-unknown {
stroke: color-mix(in oklch, var(--client-text) 54%, var(--client-muted));
stroke-dasharray: 1 4;
}
.client-device-traffic-lines .is-point {
stroke-width: 3;
stroke-linecap: round;
@@ -944,6 +963,22 @@
stroke: var(--harbor-gateway);
}
.client-device-traffic-cursor .is-point.is-vpn {
stroke: var(--harbor-connect);
}
.client-device-traffic-cursor .is-point.is-direct-tracked {
stroke: var(--harbor-gateway);
}
.client-device-traffic-cursor .is-point.is-direct-ipv4 {
stroke: var(--harbor-word);
}
.client-device-traffic-cursor .is-point.is-unknown {
stroke: color-mix(in oklch, var(--client-text) 54%, var(--client-muted));
}
.client-device-traffic-time {
grid-column: 2;
grid-row: 2;
@@ -956,6 +991,27 @@
text-transform: var(--type-micro-transform);
}
.client-device-traffic-legend {
display: flex;
gap: 7px;
}
.client-device-traffic-legend .is-vpn {
color: var(--harbor-connect);
}
.client-device-traffic-legend .is-direct-tracked {
color: var(--harbor-gateway);
}
.client-device-traffic-legend .is-direct-ipv4 {
color: var(--harbor-word);
}
.client-device-traffic-legend .is-unknown {
color: color-mix(in oklch, var(--client-text) 54%, var(--client-muted));
}
.client-device-traffic-point-tooltip {
position: fixed;
z-index: 1002;
@@ -1012,6 +1068,22 @@
color: oklch(0.79 0.11 72);
}
.client-device-traffic-point-tooltip .is-vpn {
color: oklch(0.75 0.1 185);
}
.client-device-traffic-point-tooltip .is-direct-tracked {
color: oklch(0.79 0.11 72);
}
.client-device-traffic-point-tooltip .is-direct-ipv4 {
color: oklch(0.78 0.07 232);
}
.client-device-traffic-point-tooltip .is-unknown {
color: oklch(0.68 0.012 145);
}
.client-device-traffic-point-tooltip .is-interval,
.client-device-traffic-point-tooltip .is-direct {
color: oklch(0.72 0.012 145);