1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
|
<script>
import { GlLink, GlIcon, GlSprintf } from '@gitlab/ui';
import { s__ } from '~/locale';
import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
import HistoryItem from '~/vue_shared/components/registry/history_item.vue';
import { EVENT_DETAILS, DEFAULT_ICON } from '../constants';
export default {
i18n: {
defaultBodyText: s__('ClusterAgents|Event occurred'),
},
components: {
GlLink,
GlIcon,
GlSprintf,
TimeAgoTooltip,
HistoryItem,
},
props: {
event: {
required: true,
type: Object,
},
bodyClass: {
required: false,
default: '',
type: String,
},
},
computed: {
eventDetails() {
const defaultEvent = {
eventTypeIcon: DEFAULT_ICON,
title: this.event.kind,
body: this.$options.i18n.defaultBodyText,
};
const eventDetails = EVENT_DETAILS[this.event.kind] || defaultEvent;
const { eventTypeIcon, title, body, titleIcon } = eventDetails;
const resultEvent = { ...this.event, eventTypeIcon, title, body, titleIcon };
return resultEvent;
},
},
};
</script>
<template>
<history-item :icon="eventDetails.eventTypeIcon" class="gl-my-0! gl-px-0! gl-pb-0!">
<strong class="gl-pl-3 gl-font-lg">
<gl-sprintf :message="eventDetails.title"
><template v-if="eventDetails.titleIcon" #titleIcon
><gl-icon
class="gl-mr-2"
:name="eventDetails.titleIcon.name"
:size="12"
:class="eventDetails.titleIcon.class"
/>
</template>
<template #tokenName>{{ eventDetails.agentToken.name }}</template></gl-sprintf
>
</strong>
<template #body>
<p class="gl-mt-2 gl-mb-0 gl-ml-3 gl-pb-3 gl-text-secondary" :class="bodyClass">
<gl-sprintf :message="eventDetails.body">
<template #userName>
<span class="gl-font-weight-bold gl-text-body">{{ eventDetails.user.name }}</span>
<gl-link :href="eventDetails.user.webUrl">@{{ eventDetails.user.username }}</gl-link>
</template>
<template #strong="{ content }">
<span class="gl-font-weight-bold gl-text-body"> {{ content }} </span>
</template>
</gl-sprintf>
<time-ago-tooltip :time="eventDetails.recordedAt" />
</p>
</template>
</history-item>
</template>
|
