Sort service list by TPM if health is not shown

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();
+    });
+  });
+});