feat: display agent count badge for provisioned customers (#671)
oliver-oat committed
Feb 3, 2026 at 19:22 UTC
c3eef2a6cf27269bc4faabcbdb54b2f1764769a8
1 file changed
+29
frontend/src/components/customers/CustomerItem.vue
+29
@@ -110,6 +110,16 @@
110
{{ customer.is_provisioned ? "Provisioned" : "Not Provisioned" }}
111
</template>
112
</Badge>
113
+
114
+ <Badge v-if="customer.is_provisioned && agentCount !== null" type="splitted" color="primary">
115
+ <template #iconLeft>
116
+ <Icon :name="AgentsIcon" :size="13" />
117
+ </template>
118
+ <template #label>Agents</template>
119
+ <template #value>
120
+ {{ agentCount }}
121
+ </template>
122
+ </Badge>
123
</div>
124
</template>
125
@@ -298,6 +308,7 @@ const ArrowIcon = "carbon:arrow-left"
308
const LocationIcon = "carbon:location"
309
const PhoneIcon = "carbon:phone"
310
const ProvisionIcon = "carbon:network-3"
311
+const AgentsIcon = "carbon:devices"
312
313
const showDetails = ref(false)
314
const selectedTabsGroup = ref<"customer" | "agents" | "wazuh_worker">("customer")
@@ -307,6 +318,7 @@ const message = useMessage()
318
const customerInfo = ref<Customer | null>(null)
319
const customerMeta = ref<CustomerMeta | null>(null)
320
const customerPortainerStackId = ref<number | null>(null)
321
+const agentCount = ref<number | null>(null)
322
const { healthcheckFilters } = useCustomerHealthcheckFilters()
323
324
const loading = computed(() => loadingFull.value || loadingDelete.value)
@@ -359,6 +371,19 @@ function getPortainerStackId() {
371
})
372
}
373
374
+function getAgentCount() {
375
+ Api.customers
376
+ .getCustomerAgents(customer.value.customer_code)
377
+ .then(res => {
378
+ if (res.data.success) {
379
+ agentCount.value = res.data.agents?.length || 0
380
+ }
381
+ })
382
+ .catch(err => {
383
+ console.error("Failed to fetch agent count:", err)
384
+ })
385
+}
386
+
387
function deletedItem() {
388
showDetails.value = false
389
emit("delete")
@@ -387,6 +412,10 @@ onBeforeMount(() => {
412
if (customer.value.customer_code && !customer.value.customer_name) {
413
getFull()
414
}
415
+
416
+ if (customer.value.is_provisioned) {
417
+ getAgentCount()
418
+ }
419
})
420
</script>
421