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
|
<script>
import { GlLoadingIcon, GlTable } from '@gitlab/ui';
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!';
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 Object.entries(this.alert).map(([fieldName, value]) => ({
fieldName,
value,
}));
},
},
};
</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>
|
