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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
<script>
import { GlLoadingIcon, GlTable } from '@gitlab/ui';
import { reduce } from 'lodash';
import { s__ } from '~/locale';
import {
capitalizeFirstCharacter,
convertToSentenceCase,
splitCamelCase,
} from '~/lib/utils/text_utility';
const thClass = 'gl-bg-transparent! gl-border-1! gl-border-b-solid! gl-border-gray-200!';
const tdClass = 'gl-border-gray-100! gl-p-5!';
const allowedFields = [
'iid',
'title',
'severity',
'status',
'startedAt',
'eventCount',
'monitoringTool',
'service',
'description',
'endedAt',
'details',
'hosts',
'environment',
];
export default {
components: {
GlLoadingIcon,
GlTable,
},
props: {
alert: {
type: Object,
required: false,
default: null,
},
loading: {
type: Boolean,
required: true,
},
},
fields: [
{
key: 'fieldName',
label: s__('AlertManagement|Key'),
thClass,
tdClass,
formatter: (string) =>
capitalizeFirstCharacter(convertToSentenceCase(splitCamelCase(string))),
},
{
key: 'value',
thClass: `${thClass} w-60p`,
tdClass,
label: s__('AlertManagement|Value'),
},
],
computed: {
items() {
if (!this.alert) {
return [];
}
return reduce(
this.alert,
(allowedItems, fieldValue, fieldName) => {
if (this.isAllowed(fieldName)) {
let value;
if (fieldName === 'environment') {
value = fieldValue?.name;
} else {
value = fieldValue;
}
return [...allowedItems, { fieldName, value }];
}
return allowedItems;
},
[],
);
},
},
methods: {
isAllowed(fieldName) {
return allowedFields.includes(fieldName);
},
},
};
</script>
<template>
<gl-table
class="alert-management-details-table"
:busy="loading"
:empty-text="s__('AlertManagement|No alert data to display.')"
:items="items"
:fields="$options.fields"
show-empty
>
<template #table-busy>
<gl-loading-icon size="lg" color="dark" class="gl-mt-5" />
</template>
</gl-table>
</template>
|
