diff --git a/app/assets/javascripts/alert_management/components/alert_details.vue b/app/assets/javascripts/alert_management/components/alert_details.vue index 890f63030c2a5e43bc4e0acad6445d75bb359dcd..5165a2271a31aeca1abb6536f120f18d21f34ffe 100644 --- a/app/assets/javascripts/alert_management/components/alert_details.vue +++ b/app/assets/javascripts/alert_management/components/alert_details.vue @@ -2,6 +2,7 @@ import * as Sentry from '@sentry/browser'; import { GlAlert, + GlBadge, GlIcon, GlLoadingIcon, GlSprintf, @@ -35,6 +36,7 @@ export default { }, severityLabels: ALERTS_SEVERITY_LABELS, components: { + GlBadge, GlAlert, GlIcon, GlLoadingIcon, @@ -186,21 +188,18 @@ export default { <div class="gl-display-inline-flex gl-align-items-center gl-justify-content-space-between" > - <gl-icon - class="gl-mr-3 align-middle" - :size="12" - :name="`severity-${alert.severity.toLowerCase()}`" - :class="`icon-${alert.severity.toLowerCase()}`" - /> - <strong>{{ $options.severityLabels[alert.severity] }}</strong> + <gl-badge class="gl-mr-3"> + <strong>{{ s__('AlertManagement|Alert') }}</strong> + </gl-badge> </div> - <span class="mx-2">•</span> - <gl-sprintf :message="reportedAtMessage"> - <template #when> - <time-ago-tooltip :time="alert.createdAt" class="gl-ml-3" /> - </template> - <template #tool>{{ alert.monitoringTool }}</template> - </gl-sprintf> + <span> + <gl-sprintf :message="reportedAtMessage"> + <template #when> + <time-ago-tooltip :time="alert.createdAt" /> + </template> + <template #tool>{{ alert.monitoringTool }}</template> + </gl-sprintf> + </span> </div> <gl-button v-if="alert.issueIid" @@ -242,24 +241,48 @@ export default { </div> <gl-tabs v-if="alert" data-testid="alertDetailsTabs"> <gl-tab data-testid="overviewTab" :title="$options.i18n.overviewTitle"> - <ul class="pl-4 mb-n1"> - <li v-if="alert.startedAt" class="my-2"> - <strong class="bold">{{ s__('AlertManagement|Start time') }}:</strong> + <div v-if="alert.severity" class="gl-mt-3 gl-mb-5 gl-display-flex"> + <div class="gl-font-weight-bold gl-w-13 gl-text-right gl-pr-3"> + {{ s__('AlertManagement|Severity') }}: + </div> + <div class="gl-pl-2" data-testid="severity"> + <span> + <gl-icon + class="gl-vertical-align-middle" + :size="12" + :name="`severity-${alert.severity.toLowerCase()}`" + :class="`icon-${alert.severity.toLowerCase()}`" + /> + </span> + {{ $options.severityLabels[alert.severity] }} + </div> + </div> + <div v-if="alert.startedAt" class="gl-my-5 gl-display-flex"> + <div class="gl-font-weight-bold gl-w-13 gl-text-right gl-pr-3"> + {{ s__('AlertManagement|Start time') }}: + </div> + <div class="gl-pl-2"> <time-ago-tooltip data-testid="startTimeItem" :time="alert.startedAt" /> - </li> - <li v-if="alert.eventCount" class="my-2"> - <strong class="bold">{{ s__('AlertManagement|Events') }}:</strong> - <span data-testid="eventCount">{{ alert.eventCount }}</span> - </li> - <li v-if="alert.monitoringTool" class="my-2"> - <strong class="bold">{{ s__('AlertManagement|Tool') }}:</strong> - <span data-testid="monitoringTool">{{ alert.monitoringTool }}</span> - </li> - <li v-if="alert.service" class="my-2"> - <strong class="bold">{{ s__('AlertManagement|Service') }}:</strong> - <span data-testid="service">{{ alert.service }}</span> - </li> - </ul> + </div> + </div> + <div v-if="alert.eventCount" class="gl-my-5 gl-display-flex"> + <div class="gl-font-weight-bold gl-w-13 gl-text-right gl-pr-3"> + {{ s__('AlertManagement|Events') }}: + </div> + <div class="gl-pl-2" data-testid="eventCount">{{ alert.eventCount }}</div> + </div> + <div v-if="alert.monitoringTool" class="gl-my-5 gl-display-flex"> + <div class="gl-font-weight-bold gl-w-13 gl-text-right gl-pr-3"> + {{ s__('AlertManagement|Tool') }}: + </div> + <div class="gl-pl-2" data-testid="monitoringTool">{{ alert.monitoringTool }}</div> + </div> + <div v-if="alert.service" class="gl-my-5 gl-display-flex"> + <div class="bold gl-w-13 gl-text-right gl-pr-3"> + {{ s__('AlertManagement|Service') }}: + </div> + <div class="gl-pl-2" data-testid="service">{{ alert.service }}</div> + </div> </gl-tab> <gl-tab data-testid="fullDetailsTab" :title="$options.i18n.fullAlertDetailsTitle"> <gl-table diff --git a/spec/frontend/alert_management/components/alert_management_detail_spec.js b/spec/frontend/alert_management/components/alert_management_detail_spec.js index 50248ebe1111735c6113d3c54a9453081316cbde..bbf6c5428beb317f668ec9061e61993435c56562 100644 --- a/spec/frontend/alert_management/components/alert_management_detail_spec.js +++ b/spec/frontend/alert_management/components/alert_management_detail_spec.js @@ -3,9 +3,11 @@ import { GlAlert, GlLoadingIcon, GlTable } from '@gitlab/ui'; import AlertDetails from '~/alert_management/components/alert_details.vue'; import createIssueQuery from '~/alert_management/graphql/mutations/create_issue_from_alert.graphql'; import { joinPaths } from '~/lib/utils/url_utility'; -import { trackAlertsDetailsViewsOptions } from '~/alert_management/constants'; +import { + trackAlertsDetailsViewsOptions, + ALERTS_SEVERITY_LABELS, +} from '~/alert_management/constants'; import Tracking from '~/tracking'; - import mockAlerts from '../mocks/alerts.json'; const mockAlert = mockAlerts[0]; @@ -77,6 +79,12 @@ describe('AlertDetails', () => { expect(wrapper.find('[data-testid="fullDetailsTab"]').exists()).toBe(true); }); + it('renders severity', () => { + expect(wrapper.find('[data-testid="severity"]').text()).toBe( + ALERTS_SEVERITY_LABELS[mockAlert.severity], + ); + }); + it('renders a title', () => { expect(wrapper.find('[data-testid="title"]').text()).toBe(mockAlert.title); }); @@ -204,15 +212,15 @@ describe('AlertDetails', () => { describe('individual header fields', () => { describe.each` - severity | createdAt | monitoringTool | result - ${'MEDIUM'} | ${'2020-04-17T23:18:14.996Z'} | ${null} | ${'Medium • Reported now'} - ${'INFO'} | ${'2020-04-17T23:18:14.996Z'} | ${'Datadog'} | ${'Info • Reported now by Datadog'} + createdAt | monitoringTool | result + ${'2020-04-17T23:18:14.996Z'} | ${null} | ${'Alert Reported now'} + ${'2020-04-17T23:18:14.996Z'} | ${'Datadog'} | ${'Alert Reported now by Datadog'} `( - `When severity=$severity, createdAt=$createdAt, monitoringTool=$monitoringTool`, - ({ severity, createdAt, monitoringTool, result }) => { + `When createdAt=$createdAt, monitoringTool=$monitoringTool`, + ({ createdAt, monitoringTool, result }) => { beforeEach(() => { mountComponent({ - data: { alert: { ...mockAlert, severity, createdAt, monitoringTool } }, + data: { alert: { ...mockAlert, createdAt, monitoringTool } }, mountMethod: mount, stubs, });