Commit dca6f3f8 authored by Natalia Tepluhina's avatar Natalia Tepluhina

Merge branch 'tr-remove-custom-alert-table-formatting' into 'master'

Remove custom alert table formatting

See merge request gitlab-org/gitlab!42201
parents 25b507dd 8bfb21ac
<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: {
......@@ -18,27 +26,42 @@ export default {
required: true,
},
},
tableHeader: {
[s__('AlertManagement|Key')]: s__('AlertManagement|Value'),
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 [{ ...this.$options.tableHeader, ...this.alert }];
return Object.entries(this.alert).map(([fieldName, value]) => ({
fieldName,
value,
}));
},
},
};
</script>
<template>
<gl-table
class="alert-management-details-table gl-mb-0!"
class="alert-management-details-table"
:busy="loading"
:empty-text="s__('AlertManagement|No alert data to display.')"
:items="items"
:fields="$options.fields"
show-empty
stacked
>
<template #table-busy>
<gl-loading-icon size="lg" color="dark" class="gl-mt-5" />
......
.alert-management-details {
// these styles need to be deleted once GlTable component looks in GitLab same as in @gitlab/ui
table {
tr {
td {
@include gl-border-0;
@include gl-p-5;
border-color: transparent;
&:not(:last-child) {
border-bottom: 1px solid $table-border-color;
}
&:first-child {
div {
font-weight: bold;
}
}
&:not(:first-child) {
&::before {
color: $gray-500;
font-weight: normal !important;
}
div {
color: $gray-500;
}
}
@include media-breakpoint-up(sm) {
div {
text-align: left !important;
}
}
}
&:last-child {
&::after {
content: none !important;
}
}
}
}
@include media-breakpoint-down(xs) {
.alert-details-incident-button {
width: 100%;
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment