diff options
Diffstat (limited to 'app/assets/javascripts/issue_show/components/incidents/highlight_bar.vue')
-rw-r--r-- | app/assets/javascripts/issue_show/components/incidents/highlight_bar.vue | 42 |
1 files changed, 42 insertions, 0 deletions
diff --git a/app/assets/javascripts/issue_show/components/incidents/highlight_bar.vue b/app/assets/javascripts/issue_show/components/incidents/highlight_bar.vue new file mode 100644 index 00000000000..a47fe4c84cf --- /dev/null +++ b/app/assets/javascripts/issue_show/components/incidents/highlight_bar.vue @@ -0,0 +1,42 @@ +<script> +import { GlLink } from '@gitlab/ui'; +import { formatDate } from '~/lib/utils/datetime_utility'; + +export default { + components: { + GlLink, + }, + props: { + alert: { + type: Object, + required: true, + }, + }, + computed: { + startTime() { + return formatDate(this.alert.startedAt, 'yyyy-mm-dd Z'); + }, + }, +}; +</script> + +<template> + <div + class="gl-border-solid gl-border-1 gl-border-gray-100 gl-p-5 gl-mb-3 gl-rounded-base gl-display-flex gl-justify-content-space-between" + > + <div class="text-truncate gl-pr-3"> + <span class="gl-font-weight-bold">{{ s__('HighlightBar|Original alert:') }}</span> + <gl-link :href="alert.detailsUrl">{{ alert.title }}</gl-link> + </div> + + <div class="gl-pr-3 gl-white-space-nowrap"> + <span class="gl-font-weight-bold">{{ s__('HighlightBar|Alert start time:') }}</span> + {{ startTime }} + </div> + + <div class="gl-white-space-nowrap"> + <span class="gl-font-weight-bold">{{ s__('HighlightBar|Alert events:') }}</span> + <span>{{ alert.eventCount }}</span> + </div> + </div> +</template> |