Linting and refactoring

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>

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

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 {