Display alert detail overview data

app/assets/javascripts/alert_management/components/alert_details.vue

@@ -9,6 +9,7 @@ import {
   GlTab,
   GlButton,
 } from '@gitlab/ui';
+import timeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import { s__ } from '~/locale';
 import query from '../graphql/queries/details.query.graphql';
 import { fetchPolicies } from '~/lib/graphql';
@@ -24,7 +25,7 @@ export default {
     errorMsg: s__(
       'AlertManagement|There was an error displaying the alert. Please refresh the page to try again.',
     ),
-    fullAlertDetailsTitle: s__('AlertManagement|Full Alert Details'),
+    fullAlertDetailsTitle: s__('AlertManagement|Full alert details'),
     overviewTitle: s__('AlertManagement|Overview'),
   },
   components: {
@@ -32,6 +33,7 @@ export default {
     GlLoadingIcon,
     GlNewDropdown,
     GlNewDropdownItem,
+    timeAgoTooltip,
     GlTab,
     GlTabs,
     GlButton,
@@ -108,7 +110,11 @@ export default {
         {{ s__('AlertManagement|Create issue') }}
       </gl-button>
     </div>
-    <div v-if="alert" class="gl-display-flex justify-content-end">
+    <div
+      v-if="alert"
+      class="gl-display-flex gl-justify-content-space-between gl-align-items-center"
+    >
+      <h2 data-testid="title">{{ alert.title }}</h2>
       <gl-new-dropdown right>
         <gl-new-dropdown-item
           v-for="(label, field) in $options.statuses"
@@ -121,15 +127,22 @@ export default {
     </div>
     <gl-tabs v-if="alert" data-testid="alertDetailsTabs">
       <gl-tab data-testid="overviewTab" :title="$options.i18n.overviewTitle">
-        <ul class="pl-3">
-          <li data-testid="startTimeItem" class="font-weight-bold mb-3 mt-2">
-            {{ s__('AlertManagement|Start time:') }}
+        <ul class="pl-4 mb-n1">
+          <li v-if="alert.startedAt" class="my-2">
+            <strong class="bold">{{ s__('AlertManagement|Start time') }}:</strong>
+            <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 class="font-weight-bold my-3">
-            {{ s__('AlertManagement|End time:') }}
+          <li v-if="alert.monitoringTool" class="my-2">
+            <strong class="bold">{{ s__('AlertManagement|Tool') }}:</strong>
+            <span data-testid="monitoringTool">{{ alert.monitoringTool }}</span>
           </li>
-          <li class="font-weight-bold my-3">
-            {{ s__('AlertManagement|Events:') }}
+          <li v-if="alert.service" class="my-2">
+            <strong class="bold">{{ s__('AlertManagement|Service') }}:</strong>
+            <span data-testid="service">{{ alert.service }}</span>
           </li>
         </ul>
       </gl-tab>

locale/gitlab.pot

@@ -1738,16 +1738,10 @@ msgstr ""
 msgid "AlertManagement|End time"
 msgstr ""
 
-msgid "AlertManagement|End time:"
-msgstr ""
-
 msgid "AlertManagement|Events"
 msgstr ""
 
-msgid "AlertManagement|Events:"
-msgstr ""
-
-msgid "AlertManagement|Full Alert Details"
+msgid "AlertManagement|Full alert details"
 msgstr ""
 
 msgid "AlertManagement|High"
@@ -1780,10 +1774,10 @@ msgstr ""
 msgid "AlertManagement|Resolved"
 msgstr ""
 
-msgid "AlertManagement|Start time"
+msgid "AlertManagement|Service"
 msgstr ""
 
-msgid "AlertManagement|Start time:"
+msgid "AlertManagement|Start time"
 msgstr ""
 
 msgid "AlertManagement|Status"
@@ -1798,6 +1792,9 @@ msgstr ""
 msgid "AlertManagement|There was an error displaying the alerts. Confirm your endpoint's configuration details to ensure alerts appear."
 msgstr ""
 
+msgid "AlertManagement|Tool"
+msgstr ""
+
 msgid "AlertManagement|Triggered"
 msgstr ""
 

spec/frontend/alert_management/components/alert_management_detail_spec.js

@@ -2,6 +2,10 @@ import { shallowMount } from '@vue/test-utils';
 import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
 import AlertDetails from '~/alert_management/components/alert_details.vue';
 
+import mockAlerts from '../mocks/alerts.json';
+
+const mockAlert = mockAlerts[0];
+
 describe('AlertDetails', () => {
   let wrapper;
   const newIssuePath = 'root/alerts/-/issues/new';
@@ -56,7 +60,7 @@ describe('AlertDetails', () => {
 
     describe('when alert is present', () => {
       beforeEach(() => {
-        mountComponent();
+        mountComponent({ data: { alert: mockAlert } });
       });
 
       it('renders a tab with overview information', () => {
@@ -67,8 +71,39 @@ describe('AlertDetails', () => {
         expect(wrapper.find('[data-testid="fullDetailsTab"]').exists()).toBe(true);
       });
 
-      it('renders alert details', () => {
+      it('renders a title', () => {
+        expect(wrapper.find('[data-testid="title"]').text()).toBe(mockAlert.title);
+      });
+
+      it('renders a start time', () => {
         expect(wrapper.find('[data-testid="startTimeItem"]').exists()).toBe(true);
+        expect(wrapper.find('[data-testid="startTimeItem"]').props().time).toBe(
+          mockAlert.startedAt,
+        );
+      });
+    });
+
+    describe('individual alert fields', () => {
+      describe.each`
+        field               | data            | isShown
+        ${'eventCount'}     | ${1}            | ${true}
+        ${'eventCount'}     | ${undefined}    | ${false}
+        ${'monitoringTool'} | ${'New Relic'}  | ${true}
+        ${'monitoringTool'} | ${undefined}    | ${false}
+        ${'service'}        | ${'Prometheus'} | ${true}
+        ${'service'}        | ${undefined}    | ${false}
+      `(`$desc`, ({ field, data, isShown }) => {
+        beforeEach(() => {
+          mountComponent({ data: { alert: { ...mockAlert, [field]: data } } });
+        });
+
+        it(`${field} is ${isShown ? 'displayed' : 'hidden'} correctly`, () => {
+          if (isShown) {
+            expect(wrapper.find(`[data-testid="${field}"]`).text()).toBe(data.toString());
+          } else {
+            expect(wrapper.find(`[data-testid="${field}"]`).exists()).toBe(false);
+          }
+        });
       });
     });