Commit e61979bb authored by Clement Ho's avatar Clement Ho

Merge branch 'tr-revert-hide-severity' into 'master'

Render severity on alert management list view

See merge request gitlab-org/gitlab!31993
parents 8110dabe a1eeb9e4
......@@ -16,7 +16,7 @@ import createFlash from '~/flash';
import { s__ } from '~/locale';
import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
import getAlerts from '../graphql/queries/getAlerts.query.graphql';
import { ALERTS_STATUS, ALERTS_STATUS_TABS } from '../constants';
import { ALERTS_STATUS, ALERTS_STATUS_TABS, ALERTS_SEVERITY_LABELS } from '../constants';
import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
import updateAlertStatus from '../graphql/mutations/update_alert_status.graphql';
import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
......@@ -33,6 +33,11 @@ export default {
),
},
fields: [
{
key: 'severity',
label: s__('AlertManagement|Severity'),
tdClass: `${tdClass} rounded-top text-capitalize`,
},
{
key: 'startedAt',
label: s__('AlertManagement|Start time'),
......@@ -68,6 +73,7 @@ export default {
[ALERTS_STATUS.ACKNOWLEDGED]: s__('AlertManagement|Acknowledged'),
[ALERTS_STATUS.RESOLVED]: s__('AlertManagement|Resolved'),
},
severityLabels: ALERTS_SEVERITY_LABELS,
statusTabs: ALERTS_STATUS_TABS,
components: {
GlEmptyState,
......@@ -203,6 +209,21 @@ export default {
fixed
stacked="md"
>
<template #cell(severity)="{ item }">
<div
class="d-inline-flex align-items-center justify-content-between"
data-testid="severityField"
>
<gl-icon
class="mr-2"
:size="12"
:name="`severity-${item.severity.toLowerCase()}`"
:class="`icon-${item.severity.toLowerCase()}`"
/>
{{ $options.severityLabels[item.severity] }}
</div>
</template>
<template #cell(startedAt)="{ item }">
<time-ago v-if="item.startedAt" :time="item.startedAt" />
</template>
......
......@@ -1787,6 +1787,9 @@ msgstr ""
msgid "AlertManagement|Service"
msgstr ""
msgid "AlertManagement|Severity"
msgstr ""
msgid "AlertManagement|Start time"
msgstr ""
......
......@@ -6,6 +6,7 @@ import {
GlLoadingIcon,
GlDropdown,
GlBadge,
GlIcon,
GlTab,
GlDropdownItem,
} from '@gitlab/ui';
......@@ -30,6 +31,7 @@ describe('AlertManagementList', () => {
const findNumberOfAlertsBadge = () => wrapper.findAll(GlBadge);
const findDateFields = () => wrapper.findAll(TimeAgo);
const findFirstStatusOption = () => findStatusDropdown().find(GlDropdownItem);
const findSeverityFields = () => wrapper.findAll('[data-testid="severityField"]');
function mountComponent({
props = {
......@@ -189,6 +191,37 @@ describe('AlertManagementList', () => {
expect(findStatusDropdown().exists()).toBe(true);
});
it('shows correct severity icons', () => {
mountComponent({
props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
data: { alerts: mockAlerts, errored: false },
loading: false,
});
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.find(GlTable).exists()).toBe(true);
expect(
findAlertsTable()
.find(GlIcon)
.classes('icon-critical'),
).toBe(true);
});
});
it('renders severity text', () => {
mountComponent({
props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
data: { alerts: mockAlerts, errored: false },
loading: false,
});
expect(
findSeverityFields()
.at(0)
.text(),
).toBe('Critical');
});
describe('handle date fields', () => {
it('should display time ago dates when values provided', () => {
mountComponent({
......@@ -200,6 +233,7 @@ describe('AlertManagementList', () => {
status: 'acknowledged',
startedAt: '2020-03-17T23:18:14.996Z',
endedAt: '2020-04-17T23:18:14.996Z',
severity: 'high',
},
],
errored: false,
......@@ -219,6 +253,7 @@ describe('AlertManagementList', () => {
status: 'acknowledged',
startedAt: null,
endedAt: null,
severity: 'high',
},
],
errored: false,
......
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