@cryptotaxi247 / CoPilot
Code Commits Issues Pulls Sessions CI/CD
main
main
vue 137 lines 4.55 KB
Raw
1 <template>
2 <n-tabs v-if="alert" type="line" animated :tabs-padding="24">
3 <n-tab-pane name="Context" tab="Context" display-directive="show:lazy">
4 <SocAlertItemContext :alert class="p-6 pt-3" />
5 </n-tab-pane>
6 <n-tab-pane name="Note" tab="Note" display-directive="show:lazy">
7 <div class="p-6 pt-3">
8 {{ alert.alert_note ?? "No notes for this alert" }}
9 </div>
10 </n-tab-pane>
11 <n-tab-pane name="Customer" tab="Customer" display-directive="show:lazy">
12 <div class="grid-auto-fit-200 grid gap-2 p-6 pt-3">
13 <CardKV v-for="(value, key) of alert.customer" :key>
14 <template #key>
15 {{ key }}
16 </template>
17 <template #value>
18 <template v-if="key === 'customer_code' && value && value !== 'Customer Not Found'">
19 <code
20 class="text-primary cursor-pointer"
21 @click="routeCustomer({ code: value.toString() }).navigate()"
22 >
23 #{{ value }}
24 <Icon :name="LinkIcon" :size="13" class="relative top-0.5" />
25 </code>
26 </template>
27 <template v-else>
28 {{ value || "-" }}
29 </template>
30 </template>
31 </CardKV>
32 </div>
33 </n-tab-pane>
34 <n-tab-pane name="Owner" tab="Owner" display-directive="show:lazy">
35 <div class="grid gap-2 px-6 pt-3">
36 <Badge
37 type="active"
38 style="max-width: 145px"
39 class="cursor-pointer"
40 @click="routeSocUsers(ownerId).navigate()"
41 >
42 <template #iconRight>
43 <Icon :name="LinkIcon" :size="14" />
44 </template>
45 <template #label>Go to users page</template>
46 </Badge>
47 </div>
48 <div class="grid-auto-fit-200 grid gap-2 p-6 pt-3">
49 <CardKV>
50 <template #key>user_login</template>
51 <template #value>
52 <SocAssignUser v-slot="{ loading }" :alert :users @updated="emit('updated', $event)">
53 <div class="text-primary flex cursor-pointer items-center gap-2">
54 <n-spin :size="16" :show="loading">
55 <Icon :name="EditIcon" :size="16" />
56 </n-spin>
57 <span>{{ ownerName || "Assign a user" }}</span>
58 </div>
59 </SocAssignUser>
60 </template>
61 </CardKV>
62 <CardKV v-if="alert.owner">
63 <template #key>user_name</template>
64 <template #value>
65 <span>#{{ alert.owner.id }}</span>
66 {{ alert.owner.user_name }}
67 </template>
68 </CardKV>
69 <CardKV v-if="alert.owner">
70 <template #key>user_email</template>
71 <template #value>
72 {{ alert.owner.user_email }}
73 </template>
74 </CardKV>
75 </div>
76 </n-tab-pane>
77 <n-tab-pane name="History" tab="History" display-directive="show:lazy">
78 <div class="p-6 pt-3">
79 <SocAlertItemTimeline :alert />
80 </div>
81 </n-tab-pane>
82 <n-tab-pane name="Details" tab="Details" display-directive="show:lazy">
83 <div class="p-6 pt-3">
84 <SimpleJsonViewer class="vuesjv-override" :model-value="socAlertDetail" :initial-expanded-depth="1" />
85 </div>
86 </n-tab-pane>
87 <n-tab-pane name="Assets" tab="Assets" display-directive="show:lazy">
88 <SocAlertAssetsList v-if="alert" :alert-id="alert.alert_id" />
89 </n-tab-pane>
90 </n-tabs>
91 </template>
92
93 <script setup lang="ts">
94 import type { SocAlert } from "@/types/soc/alert.d"
95 import type { SocUser } from "@/types/soc/user.d"
96 import { NSpin, NTabPane, NTabs } from "naive-ui"
97 import { computed, defineAsyncComponent } from "vue"
98 import { SimpleJsonViewer } from "vue-sjv"
99 import Badge from "@/components/common/Badge.vue"
100 import CardKV from "@/components/common/cards/CardKV.vue"
101 import Icon from "@/components/common/Icon.vue"
102 import { useNavigation } from "@/composables/useNavigation"
103 import "@/assets/scss/overrides/vuesjv-override.scss"
104
105 const { alert } = defineProps<{
106 alert: SocAlert
107 users?: SocUser[]
108 }>()
109 const emit = defineEmits<{
110 (e: "updated", value: SocAlert): void
111 }>()
112 const SocAlertItemTimeline = defineAsyncComponent(() => import("./SocAlertItemTimeline.vue"))
113 const SocAssignUser = defineAsyncComponent(() => import("./SocAssignUser.vue"))
114 const SocAlertItemContext = defineAsyncComponent(() => import("./SocAlertItemContext.vue"))
115 const SocAlertAssetsList = defineAsyncComponent(() => import("../SocAlertAssets/SocAlertAssetsList.vue"))
116
117 const LinkIcon = "carbon:launch"
118 const EditIcon = "uil:edit-alt"
119
120 const { routeCustomer, routeSocUsers } = useNavigation()
121
122 const ownerName = computed(() => alert?.owner?.user_login)
123 const ownerId = computed(() => alert?.owner?.id)
124
125 const socAlertDetail = computed<Partial<SocAlert>>(() => {
126 const clone: Partial<SocAlert> = JSON.parse(JSON.stringify(alert))
127
128 delete clone.alert_context
129 delete clone.alert_source_content
130 delete clone.customer
131 delete clone.modification_history
132 delete clone.alert_note
133 delete clone.alert_source_link
134
135 return clone
136 })
137 </script>