feat: add live traffic stats (#530) (#616)

frontend/src/stores/auth.js

@@ -2,6 +2,7 @@ import { defineStore } from 'pinia'
 
 import { notify } from "@kyvg/vue3-notification";
 import { apiWrapper } from '@/helpers/fetch-wrapper'
+import { websocketWrapper } from '@/helpers/websocket-wrapper'
 import router from '../router'
 import { browserSupportsWebAuthn,startRegistration,startAuthentication } from '@simplewebauthn/browser';
 import {base64_url_encode} from "@/helpers/encoding";
@@ -295,9 +296,11 @@ export const authStore = defineStore('auth',{
                     }
                 }
                 localStorage.setItem('user', JSON.stringify(this.user))
+                websocketWrapper.connect()
             } else {
                 this.user = null
                 localStorage.removeItem('user')
+                websocketWrapper.disconnect()
             }
         },
         setWebAuthnCredentials(credentials) {

frontend/src/stores/interfaces.js

@@ -14,6 +14,7 @@ export const interfaceStore = defineStore('interfaces', {
     configuration: "",
     selected: "",
     fetching: false,
+    trafficStats: {},
   }),
   getters: {
     Count: (state) => state.interfaces.length,
@@ -24,6 +25,9 @@ export const interfaceStore = defineStore('interfaces', {
     },
     GetSelected: (state) => state.interfaces.find((i) => i.Identifier === state.selected) || state.interfaces[0],
     isFetching: (state) => state.fetching,
+    TrafficStats: (state) => {
+      return (state.selected in state.trafficStats) ? state.trafficStats[state.selected] : { Received: 0, Transmitted: 0 }
+    },
   },
   actions: {
     setInterfaces(interfaces) {
@@ -34,6 +38,14 @@ export const interfaceStore = defineStore('interfaces', {
         this.selected = ""
       }
       this.fetching = false
+      this.trafficStats = {}
+    },
+    updateInterfaceTrafficStats(interfaceStats) {
+      const id = interfaceStats.EntityId;
+      this.trafficStats[id] = {
+        Received: interfaceStats.BytesReceived,
+        Transmitted: interfaceStats.BytesTransmitted,
+      };
     },
     async LoadInterfaces() {
       this.fetching = true

frontend/src/stores/peers.js

@@ -23,6 +23,7 @@ export const peerStore = defineStore('peers', {
     fetching: false,
     sortKey: 'IsConnected', // Default sort key
     sortOrder: -1, // 1 for ascending, -1 for descending
+    trafficStats: {},
   }),
   getters: {
     Find: (state) => {
@@ -76,6 +77,9 @@ export const peerStore = defineStore('peers', {
     Statistics: (state) => {
       return (id) => state.statsEnabled && (id in state.stats) ? state.stats[id] : freshStats()
     },
+    TrafficStats: (state) => {
+      return (id) => (id in state.trafficStats) ? state.trafficStats[id] : { Received: 0, Transmitted: 0 }
+    },
     hasStatistics: (state) => state.statsEnabled,
 
   },
@@ -111,6 +115,7 @@ export const peerStore = defineStore('peers', {
       this.peers = peers
       this.calculatePages()
       this.fetching = false
+      this.trafficStats = {}
     },
     setPeer(peer) {
       this.peer = peer
@@ -126,11 +131,19 @@ export const peerStore = defineStore('peers', {
       if (!statsResponse) {
         this.stats = {}
         this.statsEnabled = false
+        this.trafficStats = {}
       } else {
           this.stats = statsResponse.Stats
           this.statsEnabled = statsResponse.Enabled
       }
     },
+    updatePeerTrafficStats(peerStats) {
+      const id = peerStats.EntityId;
+      this.trafficStats[id] = {
+        Received: peerStats.BytesReceived,
+        Transmitted: peerStats.BytesTransmitted,
+      };
+    },
     async Reset() {
       this.setPeers([])
       this.setStats(undefined)