Overrides icons for sorting

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,

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: '';