| 1 | <template> |
| 2 | <div class="page @container flex flex-col gap-6"> |
| 3 | <AgentsOverviewStatsCards :stats :loading /> |
| 4 | <AgentsList @loaded="agents = $event" @loading="loading = $event" /> |
| 5 | </div> |
| 6 | </template> |
| 7 | |
| 8 | <script setup lang="ts"> |
| 9 | import type { AgentsStats } from "@/components/agents/AgentsOverviewStatsCards.vue" |
| 10 | import type { Agent } from "@/types/agents" |
| 11 | import { computed, ref } from "vue" |
| 12 | import AgentsOverviewStatsCards from "@/components/agents/AgentsOverviewStatsCards.vue" |
| 13 | import AgentsList from "@/components/agents/List.vue" |
| 14 | |
| 15 | const agents = ref<Agent[]>([]) |
| 16 | const stats = computed<AgentsStats>(() => ({ |
| 17 | total: agents.value.length, |
| 18 | active: agents.value.filter(agent => agent.wazuh_agent_status === "active").length, |
| 19 | critical: agents.value.filter(agent => agent.critical_asset).length, |
| 20 | offline: agents.value.filter( |
| 21 | agent => agent.wazuh_agent_status === "disconnected" || agent.wazuh_agent_status === "never_connected" |
| 22 | ).length |
| 23 | })) |
| 24 | const loading = ref(false) |
| 25 | </script> |