Optimize peer tracking table counts API and UI

Enhanced the /api/getPeerTrackingTableCounts endpoint to support returning counts for all configurations when no name is provided. Updated frontend components to fetch all tracking data in a single request, improving efficiency and user experience. Bumped dashboard version to 4.3.2.

src/dashboard.py

@@ -1109,14 +1109,25 @@ def API_GetPeerTraffics():
 @app.get(f'{APP_PREFIX}/api/getPeerTrackingTableCounts')
 def API_GetPeerTrackingTableCounts():
     configurationName = request.args.get("configurationName")
-    if configurationName not in WireguardConfigurations.keys():
+    if configurationName and configurationName not in WireguardConfigurations.keys():
         return ResponseObject(False, "Configuration does not exist")
+    
+    if configurationName:
         c = WireguardConfigurations.get(configurationName)
         return ResponseObject(data={
             "TrafficTrackingTableSize": c.getTransferTableSize(),
             "HistoricalTrackingTableSize": c.getHistoricalEndpointTableSize()
         })
     
+    d = {}
+    for i in WireguardConfigurations.keys():
+        c = WireguardConfigurations.get(i)
+        d[i] = {
+            "TrafficTrackingTableSize": c.getTransferTableSize(),
+            "HistoricalTrackingTableSize": c.getHistoricalEndpointTableSize()
+        }
+    return ResponseObject(data=d)
+
 @app.get(f'{APP_PREFIX}/api/downloadPeerTrackingTable')
 def API_DownloadPeerTackingTable():
     configurationName = request.args.get("configurationName")

src/modules/DashboardConfig.py

@@ -16,7 +16,7 @@ from .DashboardAPIKey import DashboardAPIKey
 
 
 class DashboardConfig:
-    DashboardVersion = 'v4.3.1'
+    DashboardVersion = 'v4.3.2'
     ConfigurationPath = os.getenv('CONFIGURATION_PATH', '.')
     ConfigurationFilePath = os.path.join(ConfigurationPath, 'wg-dashboard.ini')
     

src/static/app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "app",
-  "version": "4.3.1",
+  "version": "4.3.2",
   "private": true,
   "type": "module",
   "module": "es2022",

src/static/app/src/components/settingsComponent/dashboardWireguardConfigurationTracking.vue

@@ -4,8 +4,20 @@ import LocaleText from "@/components/text/localeText.vue";
 import ConfigurationTracking
 	from "@/components/settingsComponent/dashboardWireguardConfigurationTrackingComponents/configurationTracking.vue";
 import {WireguardConfigurationsStore} from "@/stores/WireguardConfigurationsStore.js";
+import {onMounted, ref} from "vue";
+import {fetchGet} from "@/utilities/fetch.js";
 
 const store = WireguardConfigurationsStore()
+const loaded = ref(false)
+const trackingData = ref({})
+onMounted(async () => {
+	await fetchGet("/api/getPeerTrackingTableCounts", {}, (ref) => {
+		if (ref.status){
+			trackingData.value = ref.data
+		}
+		loaded.value = true
+	})
+})
 </script>
 
 <template>
@@ -16,7 +28,14 @@ const store = WireguardConfigurationsStore()
 		</h6>
 	</div>
 	<div class="card-body d-flex flex-column gap-3">
-		<ConfigurationTracking :configuration="configuration" v-for="configuration in store.Configurations"/>
+		<template v-if="!loaded">
+			<div class="spinner-border text-body m-auto"></div>
+		</template>
+		<template v-else>
+			<ConfigurationTracking :configuration="configuration"
+								   :trackingData="trackingData"
+								   v-for="configuration in store.Configurations"/>
+		</template>
 	</div>
 </div>
 </template>

src/static/app/src/components/settingsComponent/dashboardWireguardConfigurationTrackingComponents/configurationTracking.vue

@@ -4,7 +4,7 @@ import {onMounted, ref, watch} from "vue";
 import LocaleText from "@/components/text/localeText.vue";
 import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js";
 
-const props = defineProps(['configuration'])
+const props = defineProps(['configuration', 'trackingData'])
 const sizes = ref({
 	HistoricalTrackingTableSize: 0,
 	TrafficTrackingTableSize: 0
@@ -13,16 +13,15 @@ const sizeDataLoaded = ref(false)
 const toggling = ref(false)
 
 await onMounted(async () => {
-	await loadSizeData();
+	sizes.value = props.trackingData[props.configuration.Name]
 })
 
 const loadSizeData = async () => {
-	sizeDataLoaded.value = false;
+
 	await fetchGet("/api/getPeerTrackingTableCounts", {
 		configurationName: props.configuration.Name
 	}, (res) => {
 		sizes.value = res.data;
-		sizeDataLoaded.value = true;
 	})
 }
 
@@ -148,8 +147,7 @@ const deleteRecord = async (key) => {
 					<hr />
 					<div class="d-flex align-items-start align-items-md-center flex-column flex-md-row gap-2">
 						<div>
-							<h6 class="placeholder animate__animated animate__flash animate__infinite animate__slower w-100 mb-0" v-if="!sizeDataLoaded"></h6>
-							<h6 v-else class="mb-0">
+							<h6 class="mb-0">
 								{{ sizes.HistoricalTrackingTableSize }} <span class="text-muted fw-normal"><LocaleText t="Records"></LocaleText></span>
 							</h6>
 						</div>