From f2f5b0e263a0c44281142feaa13d052c70aa4987 Mon Sep 17 00:00:00 2001
From: lauraMon <lmontemayor@gitlab.com>
Date: Mon, 18 May 2020 18:02:07 -0400
Subject: [PATCH 01/10] Adds sortable prop to columns

---
 .../alert_management/components/alert_management_list.vue   | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/app/assets/javascripts/alert_management/components/alert_management_list.vue b/app/assets/javascripts/alert_management/components/alert_management_list.vue
index d42e7d760b78b0..f7a846968731aa 100644
--- a/app/assets/javascripts/alert_management/components/alert_management_list.vue
+++ b/app/assets/javascripts/alert_management/components/alert_management_list.vue
@@ -41,34 +41,40 @@ export default {
       key: 'severity',
       label: s__('AlertManagement|Severity'),
       tdClass: `${tdClass} rounded-top text-capitalize`,
+      sortable: true,
     },
     {
       key: 'startedAt',
       label: s__('AlertManagement|Start time'),
       tdClass,
+      sortable: true,
     },
     {
       key: 'endedAt',
       label: s__('AlertManagement|End time'),
       tdClass,
+      sortable: true,
     },
     {
       key: 'title',
       label: s__('AlertManagement|Alert'),
       thClass: 'w-30p',
       tdClass,
+      sortable: true,
     },
     {
       key: 'eventCount',
       label: s__('AlertManagement|Events'),
       thClass: 'text-right gl-pr-9',
       tdClass: `${tdClass} text-md-right`,
+      sortable: true,
     },
     {
       key: 'status',
       thClass: 'w-15p',
       label: s__('AlertManagement|Status'),
       tdClass: `${tdClass} rounded-bottom`,
+      sortable: true,
     },
   ],
   statuses: {
-- 
GitLab


From b4af51067565a087b6608237409a09bfb8ea576e Mon Sep 17 00:00:00 2001
From: lauraMon <lmontemayor@gitlab.com>
Date: Mon, 18 May 2020 19:19:43 -0400
Subject: [PATCH 02/10] Updates column key to match backend sort

---
 .../components/alert_management_list.vue               | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/alert_management/components/alert_management_list.vue b/app/assets/javascripts/alert_management/components/alert_management_list.vue
index f7a846968731aa..5eec817150ef6f 100644
--- a/app/assets/javascripts/alert_management/components/alert_management_list.vue
+++ b/app/assets/javascripts/alert_management/components/alert_management_list.vue
@@ -44,13 +44,13 @@ export default {
       sortable: true,
     },
     {
-      key: 'startedAt',
+      key: 'startTime',
       label: s__('AlertManagement|Start time'),
       tdClass,
       sortable: true,
     },
     {
-      key: 'endedAt',
+      key: 'endTime',
       label: s__('AlertManagement|End time'),
       tdClass,
       sortable: true,
@@ -60,7 +60,6 @@ export default {
       label: s__('AlertManagement|Alert'),
       thClass: 'w-30p',
       tdClass,
-      sortable: true,
     },
     {
       key: 'eventCount',
@@ -128,6 +127,7 @@ export default {
         return {
           projectPath: this.projectPath,
           statuses: this.statusFilter,
+          sort: this.sort,
         };
       },
       update(data) {
@@ -258,11 +258,11 @@ export default {
           </div>
         </template>
 
-        <template #cell(startedAt)="{ item }">
+        <template #cell(startTime)="{ item }">
           <time-ago v-if="item.startedAt" :time="item.startedAt" />
         </template>
 
-        <template #cell(endedAt)="{ item }">
+        <template #cell(endTime)="{ item }">
           <time-ago v-if="item.endedAt" :time="item.endedAt" />
         </template>
 
-- 
GitLab


From 23c3c81ff683e541675cc3253630a2f83df96b7a Mon Sep 17 00:00:00 2001
From: lauraMon <lmontemayor@gitlab.com>
Date: Mon, 18 May 2020 19:20:52 -0400
Subject: [PATCH 03/10] Sets up graphql sorting

---
 .../components/alert_management_list.vue                 | 9 +++++++++
 .../graphql/queries/get_alerts.query.graphql             | 4 ++--
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/alert_management/components/alert_management_list.vue b/app/assets/javascripts/alert_management/components/alert_management_list.vue
index 5eec817150ef6f..e417172fa26fb4 100644
--- a/app/assets/javascripts/alert_management/components/alert_management_list.vue
+++ b/app/assets/javascripts/alert_management/components/alert_management_list.vue
@@ -154,7 +154,9 @@ export default {
       errored: false,
       isAlertDismissed: false,
       isErrorAlertDismissed: false,
+      sort: null,
       statusFilter: this.$options.statusTabs[4].filters,
+
     };
   },
   computed: {
@@ -180,6 +182,11 @@ export default {
     filterAlertsByStatus(tabIndex) {
       this.statusFilter = this.$options.statusTabs[tabIndex].filters;
     },
+    fetchSortedData({ sortBy, sortDesc }) {
+      const sortDirection = sortDesc ? 'DESC' : 'ASC';
+      const sortColumn = sortBy.replace(/([A-Z])/g, '_$1').toUpperCase();
+      this.sort = `${sortColumn}_${sortDirection}`;
+    },
     capitalizeFirstCharacter,
     updateAlertStatus(status, iid) {
       this.$apollo
@@ -241,7 +248,9 @@ export default {
         :busy="loading"
         stacked="md"
         :tbody-tr-class="tbodyTrClass"
+        :no-local-sorting="true"
         @row-clicked="navigateToAlertDetails"
+        @sort-changed="fetchSortedData"
       >
         <template #cell(severity)="{ item }">
           <div
diff --git a/app/assets/javascripts/alert_management/graphql/queries/get_alerts.query.graphql b/app/assets/javascripts/alert_management/graphql/queries/get_alerts.query.graphql
index 294467d6bd1af9..42e5282e174a98 100644
--- a/app/assets/javascripts/alert_management/graphql/queries/get_alerts.query.graphql
+++ b/app/assets/javascripts/alert_management/graphql/queries/get_alerts.query.graphql
@@ -1,8 +1,8 @@
 #import "../fragments/list_item.fragment.graphql"
 
-query getAlerts($projectPath: ID!, $statuses: [AlertManagementStatus!]) {
+query getAlerts($projectPath: ID!, $statuses: [AlertManagementStatus!], $sort: AlertManagementAlertSort ) {
   project(fullPath: $projectPath) {
-      alertManagementAlerts(statuses: $statuses)  {
+      alertManagementAlerts(statuses: $statuses, sort: $sort)  {
       nodes {
         ...AlertListItem
       }
-- 
GitLab


From 40cbb4c8e591b37abe25261ed17cdc70d5a1efc4 Mon Sep 17 00:00:00 2001
From: lauraMon <lmontemayor@gitlab.com>
Date: Tue, 19 May 2020 11:41:21 -0400
Subject: [PATCH 04/10] Overrides icons for sorting

---
 .../components/alert_management_list.vue        | 12 ++++++++++--
 .../framework/variables_overrides.scss          | 17 +++++++++++++++++
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/alert_management/components/alert_management_list.vue b/app/assets/javascripts/alert_management/components/alert_management_list.vue
index e417172fa26fb4..db9b16ad6c8dad 100644
--- a/app/assets/javascripts/alert_management/components/alert_management_list.vue
+++ b/app/assets/javascripts/alert_management/components/alert_management_list.vue
@@ -26,6 +26,7 @@ import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
 const tdClass = 'table-col d-flex d-md-table-cell align-items-center';
 const bodyTrClass =
   'gl-border-1 gl-border-t-solid gl-border-gray-100 hover-bg-blue-50 hover-gl-cursor-pointer hover-gl-border-b-solid hover-gl-border-blue-200';
+const findSortColumn = () => document.getElementsByClassName('started-at')[0];
 
 export default {
   i18n: {
@@ -46,6 +47,7 @@ export default {
     {
       key: 'startTime',
       label: s__('AlertManagement|Start time'),
+      thClass: 'started-at',
       tdClass,
       sortable: true,
     },
@@ -60,6 +62,7 @@ export default {
       label: s__('AlertManagement|Alert'),
       thClass: 'w-30p',
       tdClass,
+      sortable: false,
     },
     {
       key: 'eventCount',
@@ -154,9 +157,8 @@ export default {
       errored: false,
       isAlertDismissed: false,
       isErrorAlertDismissed: false,
-      sort: null,
+      sort: 'START_TIME_ASC',
       statusFilter: this.$options.statusTabs[4].filters,
-
     };
   },
   computed: {
@@ -178,6 +180,9 @@ export default {
       return !this.loading && this.hasAlerts ? bodyTrClass : '';
     },
   },
+  mounted() {
+    findSortColumn().ariaSort = 'ascending';
+  },
   methods: {
     filterAlertsByStatus(tabIndex) {
       this.statusFilter = this.$options.statusTabs[tabIndex].filters;
@@ -185,6 +190,9 @@ export default {
     fetchSortedData({ sortBy, sortDesc }) {
       const sortDirection = sortDesc ? 'DESC' : 'ASC';
       const sortColumn = sortBy.replace(/([A-Z])/g, '_$1').toUpperCase();
+      if(sortBy !== 'startTime') {
+        findSortColumn().ariaSort = 'none';
+      }
       this.sort = `${sortColumn}_${sortDirection}`;
     },
     capitalizeFirstCharacter,
diff --git a/app/assets/stylesheets/framework/variables_overrides.scss b/app/assets/stylesheets/framework/variables_overrides.scss
index ef75dabbda4050..4aee63445119fd 100644
--- a/app/assets/stylesheets/framework/variables_overrides.scss
+++ b/app/assets/stylesheets/framework/variables_overrides.scss
@@ -55,3 +55,20 @@ $tooltip-padding-y: 0.5rem;
 $tooltip-padding-x: 0.75rem;
 $tooltip-arrow-height: 0.5rem;
 $tooltip-arrow-width: 1rem;
+$b-table-sort-icon-bg-descending: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M11.707085,11.7071 L7.999975,15.4142 L4.292875,11.7071
+  C3.902375,11.3166 3.902375,10.6834 4.292875,10.2929 C4.683375,9.90237
+  5.316575,9.90237 5.707075,10.2929 L6.999975,11.5858 L6.999975,2 C6.999975,1.44771
+  7.447695,1 7.999975,1 C8.552255,1 8.999975,1.44771 8.999975,2 L8.999975,11.5858
+  L10.292865,10.2929 C10.683395,9.90237 11.316555,9.90237 11.707085,10.2929
+  C12.097605,10.6834 12.097605,11.3166 11.707085,11.7071 Z"/>
+  </svg>') !default;
+$b-table-sort-icon-bg-ascending: url('data:image/svg+xml,<svg
+xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M4.29289,4.2971 L8,0.59 L11.7071,4.2971 C12.0976,4.6876
+12.0976,5.3208 11.7071,5.7113 C11.3166,6.10183 10.6834,6.10183 10.2929,5.7113
+L9,4.4184 L9,14.0042 C9,14.55649 8.55228,15.0042 8,15.0042 C7.44772,15.0042 7,14.55649
+7,14.0042 L7,4.4184 L5.70711,5.7113 C5.31658,6.10183 4.68342,6.10183 4.29289,5.7113
+C3.90237,5.3208 3.90237,4.6876 4.29289,4.2971 Z"/>
+</svg> ') !default;
+$b-table-sort-icon-bg-not-sorted: '';
-- 
GitLab


From 9611a89498a1c0da522cc56934f5b70c7c1d7d90 Mon Sep 17 00:00:00 2001
From: lauraMon <lmontemayor@gitlab.com>
Date: Tue, 19 May 2020 15:11:51 -0400
Subject: [PATCH 05/10] Adds specs for sorting

---
 .../components/alert_management_list_spec.js  | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/spec/frontend/alert_management/components/alert_management_list_spec.js b/spec/frontend/alert_management/components/alert_management_list_spec.js
index 834a053eec9535..0027aa2a84efd2 100644
--- a/spec/frontend/alert_management/components/alert_management_list_spec.js
+++ b/spec/frontend/alert_management/components/alert_management_list_spec.js
@@ -38,6 +38,7 @@ describe('AlertManagementList', () => {
   const findDateFields = () => wrapper.findAll(TimeAgo);
   const findFirstStatusOption = () => findStatusDropdown().find(GlDropdownItem);
   const findSeverityFields = () => wrapper.findAll('[data-testid="severityField"]');
+  const findSeverityColumnHeader = () => wrapper.findAll('th').at(0);
 
   const alertsCount = {
     acknowledged: 6,
@@ -80,7 +81,10 @@ describe('AlertManagementList', () => {
     });
   }
 
+  const mockStartedAtCol = {};
+
   beforeEach(() => {
+    jest.spyOn(document, 'getElementsByClassName').mockReturnValue([mockStartedAtCol]);
     mountComponent();
   });
 
@@ -284,6 +288,34 @@ describe('AlertManagementList', () => {
     });
   });
 
+  describe('sorting the alert list by column', () => {
+    beforeEach(() => {
+      mountComponent({
+        props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
+        data: { alerts: mockAlerts, errored: false, sort: 'START_TIME_ASC' },
+        loading: false,
+      });
+    });
+
+    it('updates sort with new direction and column key', () => {
+      findSeverityColumnHeader().trigger('click');
+
+      expect(wrapper.vm.$data.sort).toEqual('SEVERITY_ASC');
+
+      findSeverityColumnHeader().trigger('click');
+
+      expect(wrapper.vm.$data.sort).toEqual('SEVERITY_DESC');
+    });
+
+    it('updates the `ariaSort` attribute so the sort icon appears in the proper column', () => {
+      expect(mockStartedAtCol.ariaSort).toEqual('ascending');
+
+      findSeverityColumnHeader().trigger('click');
+
+      expect(mockStartedAtCol.ariaSort).toEqual('none');
+    });
+  });
+
   describe('updating the alert status', () => {
     const iid = '1527542';
     const mockUpdatedMutationResult = {
-- 
GitLab


From e144fed1f8a37c8f0f20bb94cdf7b517c2799663 Mon Sep 17 00:00:00 2001
From: lauraMon <lmontemayor@gitlab.com>
Date: Tue, 19 May 2020 15:35:24 -0400
Subject: [PATCH 06/10] Linting and refactoring

---
 .../components/alert_management_list.vue               | 10 +++++++---
 .../stylesheets/framework/variables_overrides.scss     |  9 +++++----
 .../stylesheets/pages/alert_management/list.scss       |  8 ++++++++
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/app/assets/javascripts/alert_management/components/alert_management_list.vue b/app/assets/javascripts/alert_management/components/alert_management_list.vue
index db9b16ad6c8dad..74888898795a7c 100644
--- a/app/assets/javascripts/alert_management/components/alert_management_list.vue
+++ b/app/assets/javascripts/alert_management/components/alert_management_list.vue
@@ -60,12 +60,12 @@ export default {
     {
       key: 'title',
       label: s__('AlertManagement|Alert'),
-      thClass: 'w-30p',
+      thClass: 'w-30p alert-title',
       tdClass,
       sortable: false,
     },
     {
-      key: 'eventCount',
+      key: 'eventsCount',
       label: s__('AlertManagement|Events'),
       thClass: 'text-right gl-pr-9',
       tdClass: `${tdClass} text-md-right`,
@@ -190,7 +190,7 @@ export default {
     fetchSortedData({ sortBy, sortDesc }) {
       const sortDirection = sortDesc ? 'DESC' : 'ASC';
       const sortColumn = sortBy.replace(/([A-Z])/g, '_$1').toUpperCase();
-      if(sortBy !== 'startTime') {
+      if (sortBy !== 'startTime') {
         findSortColumn().ariaSort = 'none';
       }
       this.sort = `${sortColumn}_${sortDirection}`;
@@ -283,6 +283,10 @@ export default {
           <time-ago v-if="item.endedAt" :time="item.endedAt" />
         </template>
 
+        <template #cell(eventsCount)="{ item }">
+          {{ item.eventCount }}
+        </template>
+
         <template #cell(title)="{ item }">
           <div class="gl-max-w-full text-truncate">{{ item.title }}</div>
         </template>
diff --git a/app/assets/stylesheets/framework/variables_overrides.scss b/app/assets/stylesheets/framework/variables_overrides.scss
index 4aee63445119fd..5dc0765468cafd 100644
--- a/app/assets/stylesheets/framework/variables_overrides.scss
+++ b/app/assets/stylesheets/framework/variables_overrides.scss
@@ -55,8 +55,9 @@ $tooltip-padding-y: 0.5rem;
 $tooltip-padding-x: 0.75rem;
 $tooltip-arrow-height: 0.5rem;
 $tooltip-arrow-width: 1rem;
-$b-table-sort-icon-bg-descending: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-  <path fill-rule="evenodd" d="M11.707085,11.7071 L7.999975,15.4142 L4.292875,11.7071
+$b-table-sort-icon-bg-descending: url('data:image/svg+xml, <svg
+  xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="4 0 8 16">
+  <path style="fill: #666;" fill-rule="evenodd" d="M11.707085,11.7071 L7.999975,15.4142 L4.292875,11.7071
   C3.902375,11.3166 3.902375,10.6834 4.292875,10.2929 C4.683375,9.90237
   5.316575,9.90237 5.707075,10.2929 L6.999975,11.5858 L6.999975,2 C6.999975,1.44771
   7.447695,1 7.999975,1 C8.552255,1 8.999975,1.44771 8.999975,2 L8.999975,11.5858
@@ -64,8 +65,8 @@ $b-table-sort-icon-bg-descending: url('data:image/svg+xml, <svg xmlns="http://ww
   C12.097605,10.6834 12.097605,11.3166 11.707085,11.7071 Z"/>
   </svg>') !default;
 $b-table-sort-icon-bg-ascending: url('data:image/svg+xml,<svg
-xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-  <path fill-rule="evenodd" d="M4.29289,4.2971 L8,0.59 L11.7071,4.2971 C12.0976,4.6876
+xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="4 0 8 16">
+  <path style="fill: #666;" fill-rule="evenodd" d="M4.29289,4.2971 L8,0.59 L11.7071,4.2971 C12.0976,4.6876
 12.0976,5.3208 11.7071,5.7113 C11.3166,6.10183 10.6834,6.10183 10.2929,5.7113
 L9,4.4184 L9,14.0042 C9,14.55649 8.55228,15.0042 8,15.0042 C7.44772,15.0042 7,14.55649
 7,14.0042 L7,4.4184 L5.70711,5.7113 C5.31658,6.10183 4.68342,6.10183 4.29289,5.7113
diff --git a/app/assets/stylesheets/pages/alert_management/list.scss b/app/assets/stylesheets/pages/alert_management/list.scss
index c5930a087c962b..8ae4d16618c1d5 100644
--- a/app/assets/stylesheets/pages/alert_management/list.scss
+++ b/app/assets/stylesheets/pages/alert_management/list.scss
@@ -30,6 +30,14 @@
       th {
         @include gl-p-5;
         border: 0; // Remove cell border styling so that we can set border styling per row
+
+        &.event-count {
+          @include gl-pr-9;
+        }
+
+        &.alert-title {
+          @include gl-pointer-events-none;
+        }
       }
 
       th {
-- 
GitLab


From af7d2f068ba4d23cedb85cd09c938ec9ff5736f7 Mon Sep 17 00:00:00 2001
From: lauraMon <lmontemayor@gitlab.com>
Date: Tue, 19 May 2020 16:51:08 -0400
Subject: [PATCH 07/10] Adds a changelog

---
 changelogs/unreleased/lm-sorting-list.yml | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 changelogs/unreleased/lm-sorting-list.yml

diff --git a/changelogs/unreleased/lm-sorting-list.yml b/changelogs/unreleased/lm-sorting-list.yml
new file mode 100644
index 00000000000000..e1a9dceec5c2bb
--- /dev/null
+++ b/changelogs/unreleased/lm-sorting-list.yml
@@ -0,0 +1,5 @@
+---
+title: Adds sorting by column to alert management list
+merge_request: 32478
+author:
+type: added
-- 
GitLab


From 1d6bf6799a6464d2c6e4893d13c7c62448486e18 Mon Sep 17 00:00:00 2001
From: lauraMon <lmontemayor@gitlab.com>
Date: Tue, 19 May 2020 17:49:22 -0400
Subject: [PATCH 08/10] Reverses arrows and removes outline

---
 app/assets/stylesheets/framework/variables_overrides.scss | 4 ++--
 app/assets/stylesheets/pages/alert_management/list.scss   | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/framework/variables_overrides.scss b/app/assets/stylesheets/framework/variables_overrides.scss
index 5dc0765468cafd..fa1e2e490e0e85 100644
--- a/app/assets/stylesheets/framework/variables_overrides.scss
+++ b/app/assets/stylesheets/framework/variables_overrides.scss
@@ -55,7 +55,7 @@ $tooltip-padding-y: 0.5rem;
 $tooltip-padding-x: 0.75rem;
 $tooltip-arrow-height: 0.5rem;
 $tooltip-arrow-width: 1rem;
-$b-table-sort-icon-bg-descending: url('data:image/svg+xml, <svg
+$b-table-sort-icon-bg-ascending: url('data:image/svg+xml, <svg
   xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="4 0 8 16">
   <path style="fill: #666;" fill-rule="evenodd" d="M11.707085,11.7071 L7.999975,15.4142 L4.292875,11.7071
   C3.902375,11.3166 3.902375,10.6834 4.292875,10.2929 C4.683375,9.90237
@@ -64,7 +64,7 @@ $b-table-sort-icon-bg-descending: url('data:image/svg+xml, <svg
   L10.292865,10.2929 C10.683395,9.90237 11.316555,9.90237 11.707085,10.2929
   C12.097605,10.6834 12.097605,11.3166 11.707085,11.7071 Z"/>
   </svg>') !default;
-$b-table-sort-icon-bg-ascending: url('data:image/svg+xml,<svg
+$b-table-sort-icon-bg-descending: url('data:image/svg+xml,<svg
 xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="4 0 8 16">
   <path style="fill: #666;" fill-rule="evenodd" d="M4.29289,4.2971 L8,0.59 L11.7071,4.2971 C12.0976,4.6876
 12.0976,5.3208 11.7071,5.7113 C11.3166,6.10183 10.6834,6.10183 10.2929,5.7113
diff --git a/app/assets/stylesheets/pages/alert_management/list.scss b/app/assets/stylesheets/pages/alert_management/list.scss
index 8ae4d16618c1d5..d17e41c31e9d66 100644
--- a/app/assets/stylesheets/pages/alert_management/list.scss
+++ b/app/assets/stylesheets/pages/alert_management/list.scss
@@ -29,6 +29,7 @@
       td,
       th {
         @include gl-p-5;
+        @include gl-outline-none;
         border: 0; // Remove cell border styling so that we can set border styling per row
 
         &.event-count {
-- 
GitLab


From 87cdbd22906c57193e20ba5c44112e139cfea0d1 Mon Sep 17 00:00:00 2001
From: lauraMon <lmontemayor@gitlab.com>
Date: Wed, 20 May 2020 12:40:55 -0400
Subject: [PATCH 09/10] Updates with feedback

* Separates svg into mulitline
* moves icon to the left
* adds comments, etc
---
 .../components/alert_management_list.vue      |  7 ++--
 .../framework/variables_overrides.scss        | 37 +++++++++++--------
 .../pages/alert_management/list.scss          |  4 +-
 .../components/alert_management_list_spec.js  |  2 +-
 4 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/app/assets/javascripts/alert_management/components/alert_management_list.vue b/app/assets/javascripts/alert_management/components/alert_management_list.vue
index 74888898795a7c..2d9f2226494222 100644
--- a/app/assets/javascripts/alert_management/components/alert_management_list.vue
+++ b/app/assets/javascripts/alert_management/components/alert_management_list.vue
@@ -26,7 +26,7 @@ import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
 const tdClass = 'table-col d-flex d-md-table-cell align-items-center';
 const bodyTrClass =
   'gl-border-1 gl-border-t-solid gl-border-gray-100 hover-bg-blue-50 hover-gl-cursor-pointer hover-gl-border-b-solid hover-gl-border-blue-200';
-const findSortColumn = () => document.getElementsByClassName('started-at')[0];
+const findSortColumn = () => document.querySelector('.started-at');
 
 export default {
   i18n: {
@@ -67,7 +67,7 @@ export default {
     {
       key: 'eventsCount',
       label: s__('AlertManagement|Events'),
-      thClass: 'text-right gl-pr-9',
+      thClass: 'text-right gl-pr-9 w-3rem',
       tdClass: `${tdClass} text-md-right`,
       sortable: true,
     },
@@ -257,6 +257,7 @@ export default {
         stacked="md"
         :tbody-tr-class="tbodyTrClass"
         :no-local-sorting="true"
+        sort-icon-left
         @row-clicked="navigateToAlertDetails"
         @sort-changed="fetchSortedData"
       >
@@ -282,7 +283,7 @@ export default {
         <template #cell(endTime)="{ item }">
           <time-ago v-if="item.endedAt" :time="item.endedAt" />
         </template>
-
+        <!-- TODO: Remove after: https://gitlab.com/gitlab-org/gitlab/-/issues/218467 -->
         <template #cell(eventsCount)="{ item }">
           {{ item.eventCount }}
         </template>
diff --git a/app/assets/stylesheets/framework/variables_overrides.scss b/app/assets/stylesheets/framework/variables_overrides.scss
index fa1e2e490e0e85..c6ff7de402e747 100644
--- a/app/assets/stylesheets/framework/variables_overrides.scss
+++ b/app/assets/stylesheets/framework/variables_overrides.scss
@@ -55,21 +55,26 @@ $tooltip-padding-y: 0.5rem;
 $tooltip-padding-x: 0.75rem;
 $tooltip-arrow-height: 0.5rem;
 $tooltip-arrow-width: 1rem;
-$b-table-sort-icon-bg-ascending: url('data:image/svg+xml, <svg
-  xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="4 0 8 16">
-  <path style="fill: #666;" fill-rule="evenodd" d="M11.707085,11.7071 L7.999975,15.4142 L4.292875,11.7071
-  C3.902375,11.3166 3.902375,10.6834 4.292875,10.2929 C4.683375,9.90237
-  5.316575,9.90237 5.707075,10.2929 L6.999975,11.5858 L6.999975,2 C6.999975,1.44771
-  7.447695,1 7.999975,1 C8.552255,1 8.999975,1.44771 8.999975,2 L8.999975,11.5858
-  L10.292865,10.2929 C10.683395,9.90237 11.316555,9.90237 11.707085,10.2929
-  C12.097605,10.6834 12.097605,11.3166 11.707085,11.7071 Z"/>
+$b-table-sort-icon-bg-ascending: url('data:image/svg+xml, <svg \
+  xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="4 0 8 16"> \
+  <path style="fill: #666;" fill-rule="evenodd" d="M11.707085,11.7071 \
+  L7.999975,15.4142 L4.292875,11.7071 C3.902375,11.3166 3.902375, \
+  10.6834 4.292875,10.2929 C4.683375,9.90237 \
+  5.316575,9.90237 5.707075,10.2929 L6.999975, \
+  11.5858 L6.999975,2 C6.999975,1.44771 \
+  7.447695,1 7.999975,1 C8.552255,1 8.999975,1.44771 \
+  8.999975,2 L8.999975,11.5858 L10.292865,10.2929 C10.683395 \
+  ,9.90237 11.316555,9.90237 11.707085,10.2929 \
+  C12.097605,10.6834 12.097605,11.3166 11.707085,11.7071 Z"/> \
   </svg>') !default;
-$b-table-sort-icon-bg-descending: url('data:image/svg+xml,<svg
-xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="4 0 8 16">
-  <path style="fill: #666;" fill-rule="evenodd" d="M4.29289,4.2971 L8,0.59 L11.7071,4.2971 C12.0976,4.6876
-12.0976,5.3208 11.7071,5.7113 C11.3166,6.10183 10.6834,6.10183 10.2929,5.7113
-L9,4.4184 L9,14.0042 C9,14.55649 8.55228,15.0042 8,15.0042 C7.44772,15.0042 7,14.55649
-7,14.0042 L7,4.4184 L5.70711,5.7113 C5.31658,6.10183 4.68342,6.10183 4.29289,5.7113
-C3.90237,5.3208 3.90237,4.6876 4.29289,4.2971 Z"/>
-</svg> ') !default;
+$b-table-sort-icon-bg-descending: url('data:image/svg+xml,<svg \
+  xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="4 0 8 16"> \
+  <path style="fill: #666;" fill-rule="evenodd" d="M4.29289,4.2971 L8,0.59 \
+  L11.7071,4.2971 C12.0976,4.6876 \
+  12.0976,5.3208 11.7071,5.7113 C11.3166,6.10183 10.6834, \
+  6.10183 10.2929,5.7113 L9,4.4184 L9,14.0042 C9,14.55649 \
+  8.55228,15.0042 8,15.0042 C7.44772,15.0042 7,14.55649 \
+  7,14.0042 L7,4.4184 L5.70711,5.7113 C5.31658,6.10183 4.68342,6.10183 4.29289,5.7113 \
+  C3.90237,5.3208 3.90237,4.6876 4.29289,4.2971 Z"/> \
+  </svg> ') !default;
 $b-table-sort-icon-bg-not-sorted: '';
diff --git a/app/assets/stylesheets/pages/alert_management/list.scss b/app/assets/stylesheets/pages/alert_management/list.scss
index d17e41c31e9d66..2eee093dfce145 100644
--- a/app/assets/stylesheets/pages/alert_management/list.scss
+++ b/app/assets/stylesheets/pages/alert_management/list.scss
@@ -28,7 +28,9 @@
 
       td,
       th {
-        @include gl-p-5;
+        // TODO:  There is no gl-pl-9 utlity for this padding, to be done and then removed.
+        padding-left: 1.25rem;
+        @include gl-py-5;
         @include gl-outline-none;
         border: 0; // Remove cell border styling so that we can set border styling per row
 
diff --git a/spec/frontend/alert_management/components/alert_management_list_spec.js b/spec/frontend/alert_management/components/alert_management_list_spec.js
index 0027aa2a84efd2..697b127c8ab26d 100644
--- a/spec/frontend/alert_management/components/alert_management_list_spec.js
+++ b/spec/frontend/alert_management/components/alert_management_list_spec.js
@@ -84,7 +84,7 @@ describe('AlertManagementList', () => {
   const mockStartedAtCol = {};
 
   beforeEach(() => {
-    jest.spyOn(document, 'getElementsByClassName').mockReturnValue([mockStartedAtCol]);
+    jest.spyOn(document, 'querySelector').mockReturnValue(mockStartedAtCol);
     mountComponent();
   });
 
-- 
GitLab


From 8ad897d1a52c0a6bacc488d3c85a687871169583 Mon Sep 17 00:00:00 2001
From: lauraMon <lmontemayor@gitlab.com>
Date: Thu, 21 May 2020 17:47:37 -0400
Subject: [PATCH 10/10] Updated with Andrews feedback

---
 .../components/alert_management_list.vue            | 13 +++++++------
 .../components/alert_management_list_spec.js        |  2 +-
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/app/assets/javascripts/alert_management/components/alert_management_list.vue b/app/assets/javascripts/alert_management/components/alert_management_list.vue
index 2d9f2226494222..a1a71e592f61c1 100644
--- a/app/assets/javascripts/alert_management/components/alert_management_list.vue
+++ b/app/assets/javascripts/alert_management/components/alert_management_list.vue
@@ -21,12 +21,12 @@ import getAlerts from '../graphql/queries/get_alerts.query.graphql';
 import getAlertsCountByStatus from '../graphql/queries/get_count_by_status.query.graphql';
 import { ALERTS_STATUS, ALERTS_STATUS_TABS, ALERTS_SEVERITY_LABELS } from '../constants';
 import updateAlertStatus from '../graphql/mutations/update_alert_status.graphql';
-import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
+import { capitalizeFirstCharacter, convertToSnakeCase } from '~/lib/utils/text_utility';
 
 const tdClass = 'table-col d-flex d-md-table-cell align-items-center';
 const bodyTrClass =
   'gl-border-1 gl-border-t-solid gl-border-gray-100 hover-bg-blue-50 hover-gl-cursor-pointer hover-gl-border-b-solid hover-gl-border-blue-200';
-const findSortColumn = () => document.querySelector('.started-at');
+const findDefaultSortColumn = () => document.querySelector('.js-started-at');
 
 export default {
   i18n: {
@@ -47,7 +47,7 @@ export default {
     {
       key: 'startTime',
       label: s__('AlertManagement|Start time'),
-      thClass: 'started-at',
+      thClass: 'js-started-at',
       tdClass,
       sortable: true,
     },
@@ -181,7 +181,7 @@ export default {
     },
   },
   mounted() {
-    findSortColumn().ariaSort = 'ascending';
+    findDefaultSortColumn().ariaSort = 'ascending';
   },
   methods: {
     filterAlertsByStatus(tabIndex) {
@@ -189,9 +189,10 @@ export default {
     },
     fetchSortedData({ sortBy, sortDesc }) {
       const sortDirection = sortDesc ? 'DESC' : 'ASC';
-      const sortColumn = sortBy.replace(/([A-Z])/g, '_$1').toUpperCase();
+      const sortColumn = convertToSnakeCase(sortBy).toUpperCase();
+
       if (sortBy !== 'startTime') {
-        findSortColumn().ariaSort = 'none';
+        findDefaultSortColumn().ariaSort = 'none';
       }
       this.sort = `${sortColumn}_${sortDirection}`;
     },
diff --git a/spec/frontend/alert_management/components/alert_management_list_spec.js b/spec/frontend/alert_management/components/alert_management_list_spec.js
index 697b127c8ab26d..0f18600a736390 100644
--- a/spec/frontend/alert_management/components/alert_management_list_spec.js
+++ b/spec/frontend/alert_management/components/alert_management_list_spec.js
@@ -292,7 +292,7 @@ describe('AlertManagementList', () => {
     beforeEach(() => {
       mountComponent({
         props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
-        data: { alerts: mockAlerts, errored: false, sort: 'START_TIME_ASC' },
+        data: { alerts: mockAlerts, errored: false, sort: 'START_TIME_ASC', alertsCount },
         loading: false,
       });
     });
-- 
GitLab