Commit a1eeb9e4 authored by Tristan Read's avatar Tristan Read Committed by Clement Ho

Revert "Merge branch '216065-Hide-fields-not-implemented-on-BE-side' into 'master'"

This reverts commit 3aeef74f, reversing
changes made to e81e51d5.
parent 3a90c979
...@@ -16,7 +16,7 @@ import createFlash from '~/flash'; ...@@ -16,7 +16,7 @@ import createFlash from '~/flash';
import { s__ } from '~/locale'; import { s__ } from '~/locale';
import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue'; import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
import getAlerts from '../graphql/queries/getAlerts.query.graphql'; 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 glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
import updateAlertStatus from '../graphql/mutations/update_alert_status.graphql'; import updateAlertStatus from '../graphql/mutations/update_alert_status.graphql';
import { capitalizeFirstCharacter } from '~/lib/utils/text_utility'; import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
...@@ -33,6 +33,11 @@ export default { ...@@ -33,6 +33,11 @@ export default {
), ),
}, },
fields: [ fields: [
{
key: 'severity',
label: s__('AlertManagement|Severity'),
tdClass: `${tdClass} rounded-top text-capitalize`,
},
{ {
key: 'startedAt', key: 'startedAt',
label: s__('AlertManagement|Start time'), label: s__('AlertManagement|Start time'),
...@@ -68,6 +73,7 @@ export default { ...@@ -68,6 +73,7 @@ export default {
[ALERTS_STATUS.ACKNOWLEDGED]: s__('AlertManagement|Acknowledged'), [ALERTS_STATUS.ACKNOWLEDGED]: s__('AlertManagement|Acknowledged'),
[ALERTS_STATUS.RESOLVED]: s__('AlertManagement|Resolved'), [ALERTS_STATUS.RESOLVED]: s__('AlertManagement|Resolved'),
}, },
severityLabels: ALERTS_SEVERITY_LABELS,
statusTabs: ALERTS_STATUS_TABS, statusTabs: ALERTS_STATUS_TABS,
components: { components: {
GlEmptyState, GlEmptyState,
...@@ -203,6 +209,21 @@ export default { ...@@ -203,6 +209,21 @@ export default {
fixed fixed
stacked="md" 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 }"> <template #cell(startedAt)="{ item }">
<time-ago v-if="item.startedAt" :time="item.startedAt" /> <time-ago v-if="item.startedAt" :time="item.startedAt" />
</template> </template>
......
...@@ -1787,6 +1787,9 @@ msgstr "" ...@@ -1787,6 +1787,9 @@ msgstr ""
msgid "AlertManagement|Service" msgid "AlertManagement|Service"
msgstr "" msgstr ""
msgid "AlertManagement|Severity"
msgstr ""
msgid "AlertManagement|Start time" msgid "AlertManagement|Start time"
msgstr "" msgstr ""
......
...@@ -6,6 +6,7 @@ import { ...@@ -6,6 +6,7 @@ import {
GlLoadingIcon, GlLoadingIcon,
GlDropdown, GlDropdown,
GlBadge, GlBadge,
GlIcon,
GlTab, GlTab,
GlDropdownItem, GlDropdownItem,
} from '@gitlab/ui'; } from '@gitlab/ui';
...@@ -30,6 +31,7 @@ describe('AlertManagementList', () => { ...@@ -30,6 +31,7 @@ describe('AlertManagementList', () => {
const findNumberOfAlertsBadge = () => wrapper.findAll(GlBadge); const findNumberOfAlertsBadge = () => wrapper.findAll(GlBadge);
const findDateFields = () => wrapper.findAll(TimeAgo); const findDateFields = () => wrapper.findAll(TimeAgo);
const findFirstStatusOption = () => findStatusDropdown().find(GlDropdownItem); const findFirstStatusOption = () => findStatusDropdown().find(GlDropdownItem);
const findSeverityFields = () => wrapper.findAll('[data-testid="severityField"]');
function mountComponent({ function mountComponent({
props = { props = {
...@@ -189,6 +191,37 @@ describe('AlertManagementList', () => { ...@@ -189,6 +191,37 @@ describe('AlertManagementList', () => {
expect(findStatusDropdown().exists()).toBe(true); 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', () => { describe('handle date fields', () => {
it('should display time ago dates when values provided', () => { it('should display time ago dates when values provided', () => {
mountComponent({ mountComponent({
...@@ -200,6 +233,7 @@ describe('AlertManagementList', () => { ...@@ -200,6 +233,7 @@ describe('AlertManagementList', () => {
status: 'acknowledged', status: 'acknowledged',
startedAt: '2020-03-17T23:18:14.996Z', startedAt: '2020-03-17T23:18:14.996Z',
endedAt: '2020-04-17T23:18:14.996Z', endedAt: '2020-04-17T23:18:14.996Z',
severity: 'high',
}, },
], ],
errored: false, errored: false,
...@@ -219,6 +253,7 @@ describe('AlertManagementList', () => { ...@@ -219,6 +253,7 @@ describe('AlertManagementList', () => {
status: 'acknowledged', status: 'acknowledged',
startedAt: null, startedAt: null,
endedAt: null, endedAt: null,
severity: 'high',
}, },
], ],
errored: false, 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