Move Alert details to overview section

We move the Alert details tab into the
overview section and create a new
tab for the activity feed.

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

@@ -42,16 +42,16 @@ export default {
   tabsConfig: [
     {
       id: 'overview',
-      title: s__('AlertManagement|Overview'),
-    },
-    {
-      id: 'fullDetails',
       title: s__('AlertManagement|Alert details'),
     },
     {
       id: 'metrics',
       title: s__('AlertManagement|Metrics'),
     },
+    {
+      id: 'activity',
+      title: s__('AlertManagement|Activity feed'),
+    },
   ],
   components: {
     GlBadge,
@@ -330,18 +330,9 @@ export default {
             </div>
             <div class="gl-pl-2" data-testid="runbook">{{ alert.runbook }}</div>
           </div>
-          <template>
-            <div v-if="alert.notes.nodes" class="issuable-discussion py-5">
-              <ul class="notes main-notes-list timeline">
-                <system-note v-for="note in alert.notes.nodes" :key="note.id" :note="note" />
-              </ul>
-            </div>
-          </template>
-        </gl-tab>
-        <gl-tab :data-testid="$options.tabsConfig[1].id" :title="$options.tabsConfig[1].title">
           <gl-table
             class="alert-management-details-table"
-            :items="[{ key: 'Value', ...alert }]"
+            :items="[{ 'Full Alert Payload': 'Value', ...alert }]"
             :show-empty="true"
             :busy="loading"
             stacked
@@ -354,9 +345,16 @@ export default {
             </template>
           </gl-table>
         </gl-tab>
-        <gl-tab :data-testid="$options.tabsConfig[2].id" :title="$options.tabsConfig[2].title">
+        <gl-tab :data-testid="$options.tabsConfig[1].id" :title="$options.tabsConfig[1].title">
           <alert-metrics :dashboard-url="alert.metricsDashboardUrl" />
         </gl-tab>
+        <gl-tab :data-testid="$options.tabsConfig[2].id" :title="$options.tabsConfig[2].title">
+          <div v-if="alert.notes.nodes.length > 0" class="issuable-discussion">
+            <ul class="notes main-notes-list timeline">
+              <system-note v-for="note in alert.notes.nodes" :key="note.id" :note="note" />
+            </ul>
+          </div>
+        </gl-tab>
       </gl-tabs>
       <alert-sidebar
         :alert="alert"

app/assets/javascripts/alert_management/components/system_notes/system_note.vue

@@ -31,7 +31,7 @@ export default {
 </script>
 
 <template>
-  <li :id="noteAnchorId" class="timeline-entry note system-note note-wrapper">
+  <li :id="noteAnchorId" class="timeline-entry note system-note note-wrapper gl-px-0!">
     <div class="timeline-entry-inner">
       <div class="timeline-icon" v-html="iconHtml"></div>
       <div class="timeline-content">

app/assets/stylesheets/pages/alert_management/details.scss

@@ -67,6 +67,10 @@
     }
   }
 
+  .main-notes-list::before {
+    left: 15px !important;
+  }
+
   .note-header-info {
     @include gl-mt-1;
   }

changelogs/unreleased/225819-combine-alert-overview-details.yml

+---
+title: Resolve Combine the Overview and Alert Detail sections
+merge_request: 39714
+author:
+type: changed

locale/gitlab.pot

@@ -2078,6 +2078,9 @@ msgstr[1] ""
 msgid "AlertManagement|Acknowledged"
 msgstr ""
 
+msgid "AlertManagement|Activity feed"
+msgstr ""
+
 msgid "AlertManagement|Alert"
 msgstr ""
 
@@ -2165,9 +2168,6 @@ msgstr ""
 msgid "AlertManagement|Opsgenie is enabled"
 msgstr ""
 
-msgid "AlertManagement|Overview"
-msgstr ""
-
 msgid "AlertManagement|Please try again."
 msgstr ""
 

spec/frontend/alert_management/components/alert_details_spec.js

@@ -87,8 +87,8 @@ describe('AlertDetails', () => {
         expect(wrapper.find('[data-testid="overview"]').exists()).toBe(true);
       });
 
-      it('renders a tab with full alert information', () => {
-        expect(wrapper.find('[data-testid="fullDetails"]').exists()).toBe(true);
+      it('renders a tab with an activity feed', () => {
+        expect(wrapper.find('[data-testid="activity"]').exists()).toBe(true);
       });
 
       it('renders severity', () => {
@@ -198,7 +198,6 @@ describe('AlertDetails', () => {
         mountComponent({ data: { alert: mockAlert } });
       });
       it('should display a table of raw alert details data', () => {
-        wrapper.find('[data-testid="fullDetails"]').trigger('click');
         expect(findDetailsTable().exists()).toBe(true);
       });
     });
@@ -268,8 +267,8 @@ describe('AlertDetails', () => {
       it.each`
         index | tabId
         ${0}  | ${'overview'}
-        ${1}  | ${'fullDetails'}
-        ${2}  | ${'metrics'}
+        ${1}  | ${'metrics'}
+        ${2}  | ${'activity'}
       `('will navigate to the correct tab via $tabId', ({ index, tabId }) => {
         wrapper.setData({ currentTabIndex: index });
         expect($router.replace).toHaveBeenCalledWith({ name: 'tab', params: { tabId } });