diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-09-19 04:45:44 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-09-19 04:45:44 +0300 |
commit | 85dc423f7090da0a52c73eb66faf22ddb20efff9 (patch) | |
tree | 9160f299afd8c80c038f08e1545be119f5e3f1e1 /app/assets/javascripts/vue_shared/components/alert_details_table.vue | |
parent | 15c2c8c66dbe422588e5411eee7e68f1fa440bb8 (diff) |
Add latest changes from gitlab-org/gitlab@13-4-stable-ee
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/alert_details_table.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/alert_details_table.vue | 70 |
1 files changed, 70 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/alert_details_table.vue b/app/assets/javascripts/vue_shared/components/alert_details_table.vue new file mode 100644 index 00000000000..c94e784c01e --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/alert_details_table.vue @@ -0,0 +1,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> |