Sets up graphql sorting

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

app/assets/javascripts/alert_management/graphql/queries/get_alerts.query.graphql

 #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
       }