Improve alert list spacing

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

@@ -32,7 +32,8 @@ import {
 } from '../constants';
 import AlertStatus from './alert_status.vue';
 
-const tdClass = 'table-col gl-display-flex d-md-table-cell gl-align-items-center';
+const tdClass =
+  'table-col gl-display-flex d-md-table-cell gl-align-items-center gl-white-space-nowrap';
 const thClass = 'gl-hover-bg-blue-50';
 const bodyTrClass =
   'gl-border-1 gl-border-t-solid gl-border-gray-100 gl-hover-bg-blue-50 gl-hover-cursor-pointer gl-hover-border-b-solid gl-hover-border-blue-200';
@@ -60,40 +61,34 @@ export default {
       key: 'severity',
       label: s__('AlertManagement|Severity'),
       tdClass: `${tdClass} rounded-top text-capitalize`,
-      thClass,
+      thClass: `${thClass} gl-w-eighth`,
       sortable: true,
     },
     {
       key: 'startedAt',
       label: s__('AlertManagement|Start time'),
-      thClass: `${thClass} js-started-at`,
-      tdClass,
-      sortable: true,
-    },
-    {
-      key: 'endedAt',
-      label: s__('AlertManagement|End time'),
-      thClass,
+      thClass: `${thClass} js-started-at w-15p`,
       tdClass,
       sortable: true,
     },
     {
       key: 'title',
       label: s__('AlertManagement|Alert'),
-      thClass: `${thClass} w-30p gl-pointer-events-none`,
+      thClass: `${thClass} gl-pointer-events-none`,
       tdClass,
       sortable: false,
     },
     {
       key: 'eventCount',
       label: s__('AlertManagement|Events'),
-      thClass: `${thClass} text-right gl-pr-9 w-3rem`,
+      thClass: `${thClass} text-right gl-w-12`,
       tdClass: `${tdClass} text-md-right`,
       sortable: true,
     },
     {
       key: 'assignees',
       label: s__('AlertManagement|Assignees'),
+      thClass: 'gl-w-eighth',
       tdClass,
     },
     {
@@ -377,6 +372,7 @@ export default {
         :sort-desc.sync="sortDesc"
         :sort-by.sync="sortBy"
         sort-icon-left
+        fixed
         @row-clicked="navigateToAlertDetails"
         @sort-changed="fetchSortedData"
       >
@@ -399,16 +395,12 @@ export default {
           <time-ago v-if="item.startedAt" :time="item.startedAt" />
         </template>
 
-        <template #cell(endedAt)="{ item }">
-          <time-ago v-if="item.endedAt" :time="item.endedAt" />
-        </template>
-
         <template #cell(eventCount)="{ item }">
           {{ item.eventCount }}
         </template>
 
         <template #cell(title)="{ item }">
-          <div class="gl-max-w-full text-truncate">{{ item.title }}</div>
+          <div class="gl-max-w-full text-truncate" :title="item.title">{{ item.title }}</div>
         </template>
 
         <template #cell(assignees)="{ item }">

app/assets/javascripts/alert_management/graphql/fragments/detail_item.fragment.graphql

@@ -8,6 +8,7 @@ fragment AlertDetailItem on AlertManagementAlert {
   service
   description
   updatedAt
+  endedAt
   details
   notes {
     nodes {

app/assets/javascripts/alert_management/graphql/fragments/list_item.fragment.graphql

@@ -4,7 +4,6 @@ fragment AlertListItem on AlertManagementAlert {
   severity
   status
   startedAt
-  endedAt
   eventCount
   issueIid
   assignees {

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

 .alert-management-list {
+  // Migrate this to gitlab-ui
+  .gl-w-12 {
+    width: $gl-spacing-scale-12;
+  }
+
   // these styles need to be deleted once GlTable component looks in GitLab same as in @gitlab/ui
   table {
     color: $gray-700;

changelogs/unreleased/tr-alert-column-spacing.yml

+---
+title: Improve alert list spacing
+merge_request: 35400
+author:
+type: fixed

locale/gitlab.pot

@@ -1951,9 +1951,6 @@ msgstr ""
 msgid "AlertManagement|Edit"
 msgstr ""
 
-msgid "AlertManagement|End time"
-msgstr ""
-
 msgid "AlertManagement|Events"
 msgstr ""
 

spec/frontend/alert_management/components/alert_management_list_spec.js

@@ -289,7 +289,6 @@ describe('AlertManagementList', () => {
                   iid: 1,
                   status: 'acknowledged',
                   startedAt: '2020-03-17T23:18:14.996Z',
-                  endedAt: '2020-04-17T23:18:14.996Z',
                   severity: 'high',
                   assignees: { nodes: [] },
                 },
@@ -300,7 +299,7 @@ describe('AlertManagementList', () => {
           },
           loading: false,
         });
-        expect(findDateFields().length).toBe(2);
+        expect(findDateFields().length).toBe(1);
       });
 
       it('should not display time ago dates when values not provided', () => {
@@ -312,7 +311,6 @@ describe('AlertManagementList', () => {
                 iid: 1,
                 status: 'acknowledged',
                 startedAt: null,
-                endedAt: null,
                 severity: 'high',
               },
             ],