| 1 | <template> |
| 2 | <n-spin :show="loading"> |
| 3 | <div class="grid grid-cols-1 gap-6 @xl:grid-cols-2 @4xl:grid-cols-4"> |
| 4 | <CardStats title="Total" :value="stats.total"> |
| 5 | <template #icon> |
| 6 | <Icon :name="ICONS.agents" :size="24" class="text-info" /> |
| 7 | </template> |
| 8 | </CardStats> |
| 9 | |
| 10 | <CardStats title="Active" :value="stats.active"> |
| 11 | <template #icon> |
| 12 | <Icon name="carbon:checkmark-outline" :size="24" class="text-success" /> |
| 13 | </template> |
| 14 | </CardStats> |
| 15 | |
| 16 | <CardStats title="Critical" :value="stats.critical"> |
| 17 | <template #icon> |
| 18 | <Icon name="carbon:warning-alt" :size="24" class="text-warning" /> |
| 19 | </template> |
| 20 | </CardStats> |
| 21 | |
| 22 | <CardStats title="Offline" :value="stats.offline"> |
| 23 | <template #icon> |
| 24 | <Icon name="carbon:close-outline" :size="24" class="text-error" /> |
| 25 | </template> |
| 26 | </CardStats> |
| 27 | </div> |
| 28 | </n-spin> |
| 29 | </template> |
| 30 | |
| 31 | <script setup lang="ts"> |
| 32 | import { NSpin } from "naive-ui" |
| 33 | import CardStats from "@/components/common/cards/CardStats.vue" |
| 34 | import Icon from "@/components/common/Icon.vue" |
| 35 | import { ICONS } from "@/const" |
| 36 | |
| 37 | export interface AgentsStats { |
| 38 | total: number |
| 39 | active: number |
| 40 | critical: number |
| 41 | offline: number |
| 42 | } |
| 43 | |
| 44 | const { stats } = defineProps<{ |
| 45 | stats: AgentsStats |
| 46 | loading: boolean |
| 47 | }>() |
| 48 | </script> |