diff options
Diffstat (limited to 'app/assets/javascripts/issues/show/components/incidents/timeline_events_list_item.vue')
-rw-r--r-- | app/assets/javascripts/issues/show/components/incidents/timeline_events_list_item.vue | 71 |
1 files changed, 71 insertions, 0 deletions
diff --git a/app/assets/javascripts/issues/show/components/incidents/timeline_events_list_item.vue b/app/assets/javascripts/issues/show/components/incidents/timeline_events_list_item.vue new file mode 100644 index 00000000000..fef9bf713b7 --- /dev/null +++ b/app/assets/javascripts/issues/show/components/incidents/timeline_events_list_item.vue @@ -0,0 +1,71 @@ +<script> +import { GlIcon, GlSafeHtmlDirective, GlSprintf } from '@gitlab/ui'; +import { formatDate } from '~/lib/utils/datetime_utility'; +import { __ } from '~/locale'; +import { getEventIcon } from './utils'; + +export default { + name: 'IncidentTimelineEventListItem', + i18n: { + timeUTC: __('%{time} UTC'), + }, + components: { + GlIcon, + GlSprintf, + }, + directives: { + SafeHtml: GlSafeHtmlDirective, + }, + props: { + isLastItem: { + type: Boolean, + required: true, + }, + occurredAt: { + type: String, + required: true, + }, + action: { + type: String, + required: true, + }, + noteHtml: { + type: String, + required: true, + }, + }, + computed: { + time() { + return formatDate(this.occurredAt, 'HH:MM', true); + }, + }, + methods: { + getEventIcon, + }, +}; +</script> +<template> + <li + class="timeline-entry timeline-entry-vertical-line note system-note note-wrapper gl-my-2! gl-pr-0!" + > + <div class="gl-display-flex gl-align-items-center"> + <div + class="gl-display-flex gl-align-items-center gl-justify-content-center gl-bg-white gl-text-gray-200 gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-full gl-mt-n2 gl-mr-3 gl-w-8 gl-h-8 gl-p-3 gl-z-index-1" + > + <gl-icon :name="getEventIcon(action)" class="note-icon" /> + </div> + <div + class="timeline-event-note gl-w-full" + :class="{ 'gl-pb-3 gl-border-gray-50 gl-border-1 gl-border-b-solid': !isLastItem }" + data-testid="event-text-container" + > + <strong class="gl-font-lg" data-testid="event-time"> + <gl-sprintf :message="$options.i18n.timeUTC"> + <template #time>{{ time }}</template> + </gl-sprintf> + </strong> + <div v-safe-html="noteHtml"></div> + </div> + </div> + </li> +</template> |