| 1 | <template> |
| 2 | <n-popover overlap placement="top-end" style="max-height: 240px" scrollable to="body" :disabled="hideTimeline"> |
| 3 | <template #trigger> |
| 4 | <div class="time flex items-center gap-2" :class="{ hover: !hideTimeline }"> |
| 5 | <span> |
| 6 | {{ formatDate(alert.alert_source_event_time) }} |
| 7 | </span> |
| 8 | <Icon v-if="!hideTimeline" :name="TimeIcon" :size="16" /> |
| 9 | </div> |
| 10 | </template> |
| 11 | <div class="flex flex-col px-1 py-2"> |
| 12 | <SocAlertItemTimeline :alert /> |
| 13 | </div> |
| 14 | </n-popover> |
| 15 | </template> |
| 16 | |
| 17 | <script setup lang="ts"> |
| 18 | import type { SocAlert } from "@/types/soc/alert.d" |
| 19 | import { NPopover } from "naive-ui" |
| 20 | import { toRefs } from "vue" |
| 21 | import Icon from "@/components/common/Icon.vue" |
| 22 | import { useSettingsStore } from "@/stores/settings" |
| 23 | import dayjs from "@/utils/dayjs" |
| 24 | import SocAlertItemTimeline from "./SocAlertItemTimeline.vue" |
| 25 | |
| 26 | const props = defineProps<{ |
| 27 | alert: SocAlert |
| 28 | hideTimeline?: boolean |
| 29 | }>() |
| 30 | const { alert, hideTimeline } = toRefs(props) |
| 31 | |
| 32 | const TimeIcon = "carbon:time" |
| 33 | |
| 34 | const dFormats = useSettingsStore().dateFormat |
| 35 | |
| 36 | function formatDate(timestamp: string | number, utc: boolean = true): string { |
| 37 | return dayjs(timestamp).utc(utc).format(dFormats.datetimesec) |
| 38 | } |
| 39 | </script> |
| 40 | |
| 41 | <style lang="scss" scoped> |
| 42 | .time { |
| 43 | color: var(--fg-secondary-color); |
| 44 | font-family: var(--font-family-mono); |
| 45 | |
| 46 | &.hover { |
| 47 | cursor: help; |
| 48 | |
| 49 | &:hover { |
| 50 | color: var(--primary-color); |
| 51 | } |
| 52 | } |
| 53 | } |
| 54 | </style> |