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/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>