Format the alert payload into a table view

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

@@ -10,6 +10,7 @@ import {
   GlTabs,
   GlTab,
   GlButton,
+  GlTable,
 } from '@gitlab/ui';
 import createFlash from '~/flash';
 import { s__ } from '~/locale';
@@ -30,7 +31,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|Alert details'),
     overviewTitle: s__('AlertManagement|Overview'),
     reportedAt: s__('AlertManagement|Reported %{when}'),
     reportedAtWithTool: s__('AlertManagement|Reported %{when} by %{tool}'),
@@ -46,6 +47,7 @@ export default {
     GlTab,
     GlTabs,
     GlButton,
+    GlTable,
     TimeAgoTooltip,
   },
   mixins: [glFeatureFlagsMixin()],
@@ -149,18 +151,16 @@ export default {
             <strong>{{ $options.severityLabels[alert.severity] }}</strong>
           </div>
           <span class="mx-2">&bull;</span>
-          <span>
-            <gl-sprintf :message="reportedAtMessage">
-              <template #when>
-                <time-ago-tooltip :time="alert.createdAt" />
-              </template>
-              <template #tool>{{ alert.monitoringTool }}</template>
-            </gl-sprintf>
-          </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>
         </div>
         <gl-button
           v-if="glFeatures.createIssueFromAlertEnabled"
-          class="gl-mt-3 mt-sm-0 align-self-center align-self-sm-baseline"
+          class="gl-mt-3 mt-sm-0 align-self-center align-self-sm-baseline alert-details-create-issue-button"
           data-testid="createIssueBtn"
           :href="newIssuePath"
           category="primary"
@@ -215,13 +215,20 @@ export default {
           </ul>
         </gl-tab>
         <gl-tab data-testid="fullDetailsTab" :title="$options.i18n.fullAlertDetailsTitle">
-          <ul class="list-unstyled">
-            <li v-for="(value, key) in alert" v-if="key !== '__typename'" :key="key">
-              <p class="py-1 my-1 gl-font-base">
-                <strong>{{ key }}: </strong> {{ value }}
-              </p>
-            </li>
-          </ul>
+          <gl-table
+            class="alert-management-details-table"
+            :items="[{ key: 'Value', ...alert }]"
+            :show-empty="true"
+            :busy="loading"
+            stacked
+          >
+            <template #empty>
+              {{ s__('AlertManagement|No alert data to display.') }}
+            </template>
+            <template #table-busy>
+              <gl-loading-icon size="lg" color="dark" class="mt-3" />
+            </template>
+          </gl-table>
         </gl-tab>
       </gl-tabs>
     </div>

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

+.alert-management-details {
+  // these styles need to be deleted once GlTable component looks in GitLab same as in @gitlab/ui
+  table {
+    tr {
+      td {
+        @include gl-border-0;
+        @include gl-p-5;
+        border-color: transparent;
+        border-bottom: 1px solid $table-border-color;
+
+        &:first-child {
+          div {
+            font-weight: bold;
+          }
+        }
+
+        &:not(:first-child) {
+          &::before {
+            color: $gray-700;
+            font-weight: normal !important;
+          }
+
+          div {
+            color: $gray-700;
+          }
+        }
+
+        @include media-breakpoint-up(sm) {
+          div {
+            text-align: left !important;
+          }
+        }
+      }
+    }
+  }
+
+  @include media-breakpoint-down(xs) {
+    .alert-details-create-issue-button {
+      width: 100%;
+    }
+  }
+}

app/assets/stylesheets/pages/alerts_list.scss → app/assets/stylesheets/pages/alert_management/list.scss

-.alert-management-list,
-.alert-management-details {
-  .icon-critical {
-    color: $red-800;
-  }
-
-  .icon-high {
-    color: $red-600;
-  }
-
-  .icon-medium {
-    color: $orange-400;
-  }
-
-  .icon-low {
-    color: $orange-300;
-  }
-
-  .icon-info {
-    color: $blue-400;
-  }
-
-  .icon-unknown {
-    color: $gray-400;
-  }
-
-
+.alert-management-list {
   // consider adding these stateful variants to @gitlab-ui
   // https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/1178
   .hover-bg-blue-50:hover {
@@ -97,13 +71,6 @@
     }
   }
 
-  @include media-breakpoint-down(xs) {
-    // TODO Remove in favour of a details CSS page
-    [data-testid='createIssueBtn'] {
-      width: 100%;
-    }
-  }
-
   .gl-tab-nav-item {
     color: $gl-gray-600;
 

app/assets/stylesheets/pages/alert_management/severity-icons.scss

+.alert-management-list,
+.alert-management-details {
+  .icon-critical {
+    color: $red-800;
+  }
+
+  .icon-high {
+    color: $red-600;
+  }
+
+  .icon-medium {
+    color: $orange-400;
+  }
+
+  .icon-low {
+    color: $orange-300;
+  }
+
+  .icon-info {
+    color: $blue-400;
+  }
+
+  .icon-unknown {
+    color: $gray-400;
+  }
+}

changelogs/unreleased/214243.yml

+---
+title: Format the alert payload into a table view
+merge_request: 32423
+author:
+type: changed

locale/gitlab.pot

@@ -1748,6 +1748,9 @@ msgstr ""
 msgid "AlertManagement|Alert detail"
 msgstr ""
 
+msgid "AlertManagement|Alert details"
+msgstr ""
+
 msgid "AlertManagement|Alerts"
 msgstr ""
 
@@ -1772,9 +1775,6 @@ msgstr ""
 msgid "AlertManagement|Events"
 msgstr ""
 
-msgid "AlertManagement|Full alert details"
-msgstr ""
-
 msgid "AlertManagement|High"
 msgstr ""
 
@@ -1790,6 +1790,9 @@ msgstr ""
 msgid "AlertManagement|More information"
 msgstr ""
 
+msgid "AlertManagement|No alert data to display."
+msgstr ""
+
 msgid "AlertManagement|No alerts available to display. If you think you're seeing this message in error, refresh the page."
 msgstr ""
 

spec/frontend/alert_management/components/alert_management_detail_spec.js

 import { mount, shallowMount } from '@vue/test-utils';
-import { GlAlert, GlLoadingIcon, GlDropdownItem } from '@gitlab/ui';
+import { GlAlert, GlLoadingIcon, GlDropdownItem, GlTable } from '@gitlab/ui';
 import AlertDetails from '~/alert_management/components/alert_details.vue';
 import updateAlertStatus from '~/alert_management/graphql/mutations/update_alert_status.graphql';
 import createFlash from '~/flash';
@@ -13,6 +13,7 @@ describe('AlertDetails', () => {
   let wrapper;
   const newIssuePath = 'root/alerts/-/issues/new';
   const findStatusDropdownItem = () => wrapper.find(GlDropdownItem);
+  const findDetailsTable = () => wrapper.find(GlTable);
 
   function mountComponent({
     data,
@@ -133,9 +134,12 @@ describe('AlertDetails', () => {
     });
 
     describe('View full alert details', () => {
-      it('should display a unstyled list of alert details', () => {
+      beforeEach(() => {
+        mountComponent({ data: { alert: mockAlert } });
+      });
+      it('should display a table of raw alert details data', () => {
         wrapper.find('[data-testid="fullDetailsTab"]').trigger('click');
-        expect(wrapper.find('.list-unstyled').exists()).toBe(true);
+        expect(findDetailsTable().exists()).toBe(true);
       });
     });