Add latest changes from gitlab-org/gitlab@master

1 files changed, 22 insertions, 9 deletions

diff --git a/app/assets/javascripts/alert_management/components/alert_details.vue b/app/assets/javascripts/alert_management/components/alert_details.vue
index d73e7892f54..cca56bbe763 100644
--- a/app/assets/javascripts/alert_management/components/alert_details.vue
+++ b/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>