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.
This commit is contained in:
Donald Zou
2025-12-19 07:04:07 +08:00
parent b1d7199e84
commit 40e2dddc00
5 changed files with 43 additions and 15 deletions
@@ -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>