[APM] Fixing service inventory unit test (#120665) (#120696)

Co-authored-by: Cauê Marcondes <55978943+cauemarcondes@users.noreply.github.com>

x-pack/plugins/apm/public/components/app/service_inventory/service_list/index.tsx

@@ -66,9 +66,11 @@ export function getServiceColumns({
   showTransactionTypeColumn,
   comparisonData,
   breakpoints,
+  showHealthStatusColumn,
 }: {
   query: TypeOf<ApmRoutes, '/services'>['query'];
   showTransactionTypeColumn: boolean;
+  showHealthStatusColumn: boolean;
   breakpoints: Breakpoints;
   comparisonData?: ServicesDetailedStatisticsAPIResponse;
 }): Array<ITableColumn<ServiceListItem>> {
@@ -76,21 +78,25 @@ export function getServiceColumns({
   const showWhenSmallOrGreaterThanLarge = isSmall || !isLarge;
   const showWhenSmallOrGreaterThanXL = isSmall || !isXl;
   return [
-    {
-      field: 'healthStatus',
-      name: i18n.translate('xpack.apm.servicesTable.healthColumnLabel', {
-        defaultMessage: 'Health',
-      }),
-      width: `${unit * 6}px`,
-      sortable: true,
-      render: (_, { healthStatus }) => {
-        return (
-          <HealthBadge
-            healthStatus={healthStatus ?? ServiceHealthStatus.unknown}
-          />
-        );
-      },
-    },
+    ...(showHealthStatusColumn
+      ? [
+          {
+            field: 'healthStatus',
+            name: i18n.translate('xpack.apm.servicesTable.healthColumnLabel', {
+              defaultMessage: 'Health',
+            }),
+            width: `${unit * 6}px`,
+            sortable: true,
+            render: (_, { healthStatus }) => {
+              return (
+                <HealthBadge
+                  healthStatus={healthStatus ?? ServiceHealthStatus.unknown}
+                />
+              );
+            },
+          } as ITableColumn<ServiceListItem>,
+        ]
+      : []),
     {
       field: 'serviceName',
       name: i18n.translate('xpack.apm.servicesTable.nameColumnLabel', {
@@ -248,13 +254,17 @@ export function ServiceList({
         showTransactionTypeColumn,
         comparisonData,
         breakpoints,
+        showHealthStatusColumn: displayHealthStatus,
       }),
-    [query, showTransactionTypeColumn, comparisonData, breakpoints]
+    [
+      query,
+      showTransactionTypeColumn,
+      comparisonData,
+      breakpoints,
+      displayHealthStatus,
+    ]
   );
 
-  const columns = displayHealthStatus
-    ? serviceColumns
-    : serviceColumns.filter((column) => column.field !== 'healthStatus');
   const initialSortField = displayHealthStatus
     ? 'healthStatus'
     : 'transactionsPerMinute';
@@ -300,7 +310,7 @@ export function ServiceList({
         <ManagedTable
           isLoading={isLoading}
           error={isFailure}
-          columns={columns}
+          columns={serviceColumns}
           items={items}
           noItemsMessage={noItemsMessage}
           initialSortField={initialSortField}

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

@@ -13,7 +13,33 @@ import { Breakpoints } from '../../../../hooks/use_breakpoints';
 import { getServiceColumns } from './';
 import * as stories from './service_list.stories';
 
-const { Example, EmptyState, WithHealthWarnings } = composeStories(stories);
+const { Example, EmptyState } = composeStories(stories);
+
+const query = {
+  rangeFrom: 'now-15m',
+  rangeTo: 'now',
+  environment: ENVIRONMENT_ALL.value,
+  kuery: '',
+};
+
+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'],
+  transactionType: 'request',
+};
 
 describe('ServiceList', () => {
   it('renders empty state', async () => {
@@ -29,34 +55,10 @@ describe('ServiceList', () => {
   });
 
   describe('responsive columns', () => {
-    const query = {
-      rangeFrom: 'now-15m',
-      rangeTo: 'now',
-      environment: ENVIRONMENT_ALL.value,
-      kuery: '',
-    };
-
-    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'],
-      transactionType: 'request',
-    };
     describe('when small', () => {
       it('shows environment, transaction type and sparklines', () => {
         const renderedColumns = getServiceColumns({
+          showHealthStatusColumn: true,
           query,
           showTransactionTypeColumn: true,
           breakpoints: {
@@ -91,6 +93,7 @@ describe('ServiceList', () => {
     describe('when Large', () => {
       it('hides environment, transaction type and sparklines', () => {
         const renderedColumns = getServiceColumns({
+          showHealthStatusColumn: true,
           query,
           showTransactionTypeColumn: true,
           breakpoints: {
@@ -114,6 +117,7 @@ describe('ServiceList', () => {
       describe('when XL', () => {
         it('hides transaction type', () => {
           const renderedColumns = getServiceColumns({
+            showHealthStatusColumn: true,
             query,
             showTransactionTypeColumn: true,
             breakpoints: {
@@ -147,6 +151,7 @@ describe('ServiceList', () => {
       describe('when XXL', () => {
         it('hides transaction type', () => {
           const renderedColumns = getServiceColumns({
+            showHealthStatusColumn: true,
             query,
             showTransactionTypeColumn: true,
             breakpoints: {
@@ -181,20 +186,34 @@ describe('ServiceList', () => {
   });
 
   describe('without ML data', () => {
-    it('sorts by throughput', async () => {
-      render(<Example />);
-
-      expect(await screen.findByTitle('Throughput')).toBeInTheDocument();
+    it('hides healthStatus column', () => {
+      const renderedColumns = getServiceColumns({
+        showHealthStatusColumn: false,
+        query,
+        showTransactionTypeColumn: true,
+        breakpoints: {
+          isSmall: false,
+          isLarge: false,
+          isXl: false,
+        } as Breakpoints,
+      }).map((c) => c.field);
+      expect(renderedColumns.includes('healthStatus')).toBeFalsy();
     });
   });
 
   describe('with ML data', () => {
-    it('renders the health column', async () => {
-      render(<WithHealthWarnings />);
-
-      expect(
-        await screen.findByRole('button', { name: /Health/ })
-      ).toBeInTheDocument();
+    it('shows healthStatus column', () => {
+      const renderedColumns = getServiceColumns({
+        showHealthStatusColumn: true,
+        query,
+        showTransactionTypeColumn: true,
+        breakpoints: {
+          isSmall: false,
+          isLarge: false,
+          isXl: false,
+        } as Breakpoints,
+      }).map((c) => c.field);
+      expect(renderedColumns.includes('healthStatus')).toBeTruthy();
     });
   });
 });