@cryptotaxi247 / CoPilot
Code Commits Issues Pulls Sessions CI/CD
main
main
vue 117 lines 3.47 KB
Raw
1 <template>
2 <div class="@container flex flex-wrap items-center gap-3">
3 <n-tooltip placement="top-start" trigger="hover">
4 <template #trigger>
5 <Badge type="splitted" color="primary" hint-cursor>
6 <template #iconLeft>
7 <Icon :name="StatusIcon" :size="14" />
8 </template>
9 <template #label>Status</template>
10 <template #value>
11 {{ alert.status?.status_name || "-" }}
12 </template>
13 </Badge>
14 </template>
15 {{ alert.status.status_description }}
16 </n-tooltip>
17 <Badge type="splitted" :color="alert.severity?.severity_id === 5 ? 'danger' : 'primary'">
18 <template #iconLeft>
19 <Icon :name="SeverityIcon" :size="13" />
20 </template>
21 <template #label>Severity</template>
22 <template #value>
23 {{ alert.severity?.severity_name || "-" }}
24 </template>
25 </Badge>
26 <Badge type="splitted" color="primary" class="hidden! @2xl:flex!">
27 <template #iconLeft>
28 <Icon :name="SourceIcon" :size="13" />
29 </template>
30 <template #label>Source</template>
31 <template #value>
32 {{ alert.alert_source || "-" }}
33 </template>
34 </Badge>
35 <Badge type="splitted" color="primary" class="hidden! @2xl:flex!">
36 <template #iconLeft>
37 <Icon :name="CustomerIcon" :size="13" />
38 </template>
39 <template #label>Customer</template>
40 <template #value>
41 <template v-if="alert.customer?.customer_code && alert.customer.customer_code !== 'Customer Not Found'">
42 <code
43 class="text-primary cursor-pointer"
44 @click="routeCustomer({ code: alert.customer.customer_code }).navigate()"
45 >
46 {{ alert.customer?.customer_name || alert.customer.customer_code || "-" }}
47 <Icon :name="LinkIcon" :size="13" class="relative top-0.5" />
48 </code>
49 </template>
50 <template v-else>
51 {{ alert.customer?.customer_name || "-" }}
52 </template>
53 </template>
54 </Badge>
55
56 <SocAssignUser v-slot="{ loading }" :alert :users @updated="emit('updated', $event)">
57 <Badge type="active" class="cursor-pointer">
58 <template #iconLeft>
59 <n-spin :size="16" :show="loading">
60 <Icon :name="OwnerIcon" :size="16" />
61 </n-spin>
62 </template>
63 <template #label>Owner</template>
64 <template #value>
65 {{ ownerName || "n/d" }}
66 </template>
67 </Badge>
68 </SocAssignUser>
69
70 <Badge
71 v-if="alert.alert_source_link"
72 type="active"
73 :href="alert.alert_source_link"
74 target="_blank"
75 alt="Source link"
76 rel="nofollow noopener noreferrer"
77 >
78 <template #iconRight>
79 <Icon :name="LinkIcon" :size="14" />
80 </template>
81 <template #label>Source link</template>
82 </Badge>
83 </div>
84 </template>
85
86 <script setup lang="ts">
87 import type { SocAlert } from "@/types/soc/alert.d"
88 import type { SocUser } from "@/types/soc/user.d"
89 import { NSpin, NTooltip } from "naive-ui"
90 import { computed, toRefs } from "vue"
91 import Badge from "@/components/common/Badge.vue"
92 import Icon from "@/components/common/Icon.vue"
93 import { useNavigation } from "@/composables/useNavigation"
94 import SocAssignUser from "./SocAssignUser.vue"
95
96 const props = defineProps<{
97 alert: SocAlert
98 users?: SocUser[]
99 }>()
100
101 const emit = defineEmits<{
102 (e: "updated", value: SocAlert): void
103 }>()
104
105 const { alert, users } = toRefs(props)
106
107 const LinkIcon = "carbon:launch"
108 const StatusIcon = "fluent:status-20-regular"
109 const SeverityIcon = "bi:shield-exclamation"
110 const SourceIcon = "lucide:arrow-down-right-from-circle"
111 const CustomerIcon = "carbon:user"
112 const OwnerIcon = "carbon:user-military"
113
114 const { routeCustomer } = useNavigation()
115
116 const ownerName = computed(() => alert.value?.owner?.user_login)
117 </script>