Sort service list by TPM if health is not shown

Fall back to sorting by transactions per minute if the health column is not available.

Update the test for the component by moving it, removing snapshots, converting to React Testing Library, converting to TypeScript, and adding new cases for this sorting logic.

Fixes #79827.

x-pack/plugins/apm/public/components/app/ServiceOverview/ServiceList/__test__/props.json → x-pack/plugins/apm/public/components/app/ServiceOverview/ServiceList/__fixtures__/props.json

@@ -11,10 +11,7 @@
         "value": 46.06666666666667,
         "timeseries": []
       },
-      "avgResponseTime": null,
-      "environments": [
-        "test"
-      ]
+      "environments": ["test"]
     },
     {
       "serviceName": "opbeans-python",

x-pack/plugins/apm/public/components/app/ServiceOverview/ServiceList/index.tsx

@@ -191,18 +191,20 @@ export function ServiceList({ items, noItemsMessage }: Props) {
   const columns = displayHealthStatus
     ? SERVICE_COLUMNS
     : SERVICE_COLUMNS.filter((column) => column.field !== 'healthStatus');
+  const initialSortField = displayHealthStatus
+    ? 'healthStatus'
+    : 'transactionsPerMinute';
 
   return (
     <ManagedTable
       columns={columns}
       items={items}
       noItemsMessage={noItemsMessage}
-      initialSortField="healthStatus"
+      initialSortField={initialSortField}
       initialSortDirection="desc"
       initialPageSize={50}
       sortFn={(itemsToSort, sortField, sortDirection) => {
         // For healthStatus, sort items by healthStatus first, then by TPM
-
         return sortField === 'healthStatus'
           ? orderBy(
               itemsToSort,

x-pack/plugins/apm/public/components/app/ServiceOverview/ServiceList/service_list.test.tsx

@@ -0,0 +1,122 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { ReactNode } from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { ServiceHealthStatus } from '../../../../../common/service_health_status';
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { ServiceListAPIResponse } from '../../../../../server/lib/services/get_services';
+import { MockApmPluginContextWrapper } from '../../../../context/ApmPluginContext/MockApmPluginContext';
+import { mockMoment, renderWithTheme } from '../../../../utils/testHelpers';
+import { ServiceList, SERVICE_COLUMNS } from './';
+import props from './__fixtures__/props.json';
+
+function Wrapper({ children }: { children?: ReactNode }) {
+  return (
+    <MockApmPluginContextWrapper>
+      <MemoryRouter>{children}</MemoryRouter>
+    </MockApmPluginContextWrapper>
+  );
+}
+
+describe('ServiceList', () => {
+  beforeAll(() => {
+    mockMoment();
+  });
+
+  it('renders empty state', () => {
+    expect(() =>
+      renderWithTheme(<ServiceList items={[]} />, { wrapper: Wrapper })
+    ).not.toThrowError();
+  });
+
+  it('renders with data', () => {
+    expect(() =>
+      // Types of property 'avgResponseTime' are incompatible.
+      // Type 'null' is not assignable to type '{ value: number | null; timeseries: { x: number; y: number | null; }[]; } | undefined'.ts(2322)
+      renderWithTheme(
+        <ServiceList items={props.items as ServiceListAPIResponse['items']} />,
+        { wrapper: Wrapper }
+      )
+    ).not.toThrowError();
+  });
+
+  it('renders columns correctly', () => {
+    const service: any = {
+      serviceName: 'opbeans-python',
+      agentName: 'python',
+      transactionsPerMinute: {
+        value: 86.93333333333334,
+        timeseries: [],
+      },
+      errorsPerMinute: {
+        value: 12.6,
+        timeseries: [],
+      },
+      avgResponseTime: {
+        value: 91535.42944785276,
+        timeseries: [],
+      },
+      environments: ['test'],
+    };
+    const renderedColumns = SERVICE_COLUMNS.map((c) =>
+      c.render!(service[c.field!], service)
+    );
+
+    expect(renderedColumns[0]).toMatchInlineSnapshot(`
+      <HealthBadge
+        healthStatus="unknown"
+      />
+    `);
+  });
+
+  describe('without ML data', () => {
+    it('does not render the health column', () => {
+      const { queryByText } = renderWithTheme(
+        <ServiceList items={props.items as ServiceListAPIResponse['items']} />,
+        {
+          wrapper: Wrapper,
+        }
+      );
+      const healthHeading = queryByText('Health');
+
+      expect(healthHeading).toBeNull();
+    });
+
+    it('sorts by transactions per minute', async () => {
+      const { findByTitle } = renderWithTheme(
+        <ServiceList items={props.items as ServiceListAPIResponse['items']} />,
+        {
+          wrapper: Wrapper,
+        }
+      );
+
+      expect(
+        await findByTitle('Trans. per minute; Sorted in descending order')
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe('with ML data', () => {
+    it('renders the health column', async () => {
+      const { findByTitle } = renderWithTheme(
+        <ServiceList
+          items={(props.items as ServiceListAPIResponse['items']).map(
+            (item) => ({
+              ...item,
+              healthStatus: ServiceHealthStatus.warning,
+            })
+          )}
+        />,
+        { wrapper: Wrapper }
+      );
+
+      expect(
+        await findByTitle('Health; Sorted in descending order')
+      ).toBeInTheDocument();
+    });
+  });
+});