feat(traffic, users): enhance interface and peer management features

Added support for managing peer information in interface bindings, including new fields for peerPublicKey and peerName in the BoundIfaceTraffic interface. Updated the database schema to include these fields in user_interface_bindings and traffic_samples tables. Enhanced the UI components to display peer details alongside interface names, improving user experience and clarity in the traffic management system. Updated relevant functions and services to handle peer-specific logic, ensuring robust integration across the application.

backend/src/services/traffic-rate.ts

@@ -4,6 +4,7 @@ export const SERIES_POINTS = 60
 
 export interface TrafficSampleLike {
   interfaceName: string
+  peerPublicKey?: string
   sampledAt: string
   rxBytes: number
   txBytes: number
@@ -94,11 +95,16 @@ function parseIsoMs(iso: string): number {
   return Number.isFinite(t) ? t : 0
 }
 
+export function sampleSeriesKey(interfaceName: string, peerPublicKey = ""): string {
+  return `${interfaceName}\0${peerPublicKey}`
+}
+
 export function buildTrafficFromSamples(
   rows: TrafficSampleLike[],
   rangeStartMs: number,
   rangeEndMs: number,
   onlyInterface?: string | readonly string[],
+  peerPublicKey?: string,
 ): BuiltTrafficSeries {
   const empty: BuiltTrafficSeries = {
     rxNow: 0,
@@ -113,11 +119,12 @@ export function buildTrafficFromSamples(
   }
   if (rows.length === 0) return empty
 
-  const byIface = new Map<string, TrafficSampleLike[]>()
+  const bySeries = new Map<string, TrafficSampleLike[]>()
   for (const r of rows) {
-    const arr = byIface.get(r.interfaceName) ?? []
+    const peer = r.peerPublicKey ?? ""
+    const arr = bySeries.get(sampleSeriesKey(r.interfaceName, peer)) ?? []
     arr.push(r)
-    byIface.set(r.interfaceName, arr)
+    bySeries.set(sampleSeriesKey(r.interfaceName, peer), arr)
   }
 
   const allowList = Array.isArray(onlyInterface)
@@ -132,12 +139,20 @@ export function buildTrafficFromSamples(
   let txBytesDelta = 0
   let sessions = 0
 
-  for (const [name, arr] of byIface) {
+  for (const [key, arr] of bySeries) {
+    const sep = key.indexOf("\0")
+    const name = sep >= 0 ? key.slice(0, sep) : key
+    const peer = sep >= 0 ? key.slice(sep + 1) : ""
     if (allowList) {
       if (!allowList.includes(name)) continue
     } else if (isLoopbackName(name)) {
       continue
     }
+    if (peerPublicKey === undefined) {
+      if (peer !== "") continue
+    } else if (peer !== peerPublicKey) {
+      continue
+    }
 
     const sorted = [...arr].sort((a, b) => a.sampledAt.localeCompare(b.sampledAt))
     const last = sorted[sorted.length - 1]