fix: [DI-29215] - sort service type column on label

packages/manager/.changeset/pr-13295-fixed-1768900807343.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+ACLP-Alerting List sorting from service_type to service_type label ([#13295](https://github.com/linode/manager/pull/13295))

packages/manager/cypress/e2e/core/cloudpulse/alerts-listing-page.spec.ts

@@ -235,7 +235,7 @@ describe('Integration Tests for CloudPulse Alerts Listing Page', () => {
       { ascending: [2, 4, 1, 3], column: 'status', descending: [1, 3, 2, 4] },
       {
         ascending: [1, 2, 3, 4],
-        column: 'service_type',
+        column: 'service_type_label',
         descending: [3, 4, 1, 2],
       },
       {

packages/manager/cypress/e2e/core/cloudpulse/groupby-tags.spec.ts

@@ -99,7 +99,7 @@ describe('Integration Tests for Grouping Alerts by Tags on the CloudPulse Alerts
     ui.button.findByAttribute('aria-label', 'Toggle group by tag').click();
 
     // Validate table headers are visible
-    ['label', 'status', 'service_type', 'created_by', 'updated'].forEach(
+    ['label', 'status', 'service_type_label', 'created_by', 'updated'].forEach(
       (header) => {
         ui.heading.findByText(header).should('be.visible');
       }

packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListTable.tsx

@@ -230,12 +230,28 @@ export const AlertsListTable = React.memo((props: AlertsListTableProps) => {
     }
   };
 
+  // Create a map for service value-to-label mapping to optimize sorting
+  const serviceValueToLabelMap = React.useMemo(() => {
+    return services.reduce<Record<string, string>>((map, { label, value }) => {
+      map[value] = label;
+      return map;
+    }, {});
+  }, [services]);
+
+  const alertsWithServiceLabels = React.useMemo(() => {
+    return alerts.map((alert) => ({
+      ...alert,
+      service_type_label:
+        serviceValueToLabelMap[alert.service_type] || alert.service_type,
+    }));
+  }, [alerts, serviceValueToLabelMap]);
+
   const { order, orderBy, handleOrderChange, sortedData } = useOrderV2({
-    data: alerts,
+    data: alertsWithServiceLabels,
     initialRoute: {
       defaultOrder: {
         order: 'asc',
-        orderBy: 'service_type',
+        orderBy: 'service_type_label',
       },
       from: '/alerts/definitions',
     },

packages/manager/src/features/CloudPulse/Alerts/AlertsListing/constants.ts

@@ -12,7 +12,7 @@ export const AlertListingTableLabelMap = [
   },
   {
     colName: 'Service',
-    label: 'service_type',
+    label: 'service_type_label',
   },
   {
     colName: 'Created By',

packages/manager/src/mocks/serverHandlers.ts

@@ -3786,7 +3786,7 @@ export const handlers = [
           }),
         }),
         serviceTypesFactory.build({
-          label: 'Block Storage',
+          label: 'Volume',
           service_type: 'blockstorage',
           regions: 'us-iad,us-east',
           alert: serviceAlertFactory.build({ scope: ['entity'] }),
@@ -3812,7 +3812,7 @@ export const handlers = [
       nodebalancer: 'NodeBalancers',
       firewall: 'Firewalls',
       objectstorage: 'Object Storage',
-      blockstorage: 'Block Storage',
+      blockstorage: 'Volume',
       lke: 'LKE Enterprise',
     };
     const response = serviceTypesFactory.build({