From d32f7ad601a69406ac9b75393254038a4bade7fc Mon Sep 17 00:00:00 2001
From: "miriam.aparicio" <miriam.aparicio@gmail.com>
Date: Fri, 11 Feb 2022 10:29:20 +0000
Subject: [PATCH 1/4] Add e2e test for service overview

---
 .../service_overview/service_overview.spec.ts | 133 ++++++++++++-
 .../service_overview_errors_table/index.tsx   | 170 +++++++++--------
 .../index.tsx                                 |  94 ++++-----
 .../index.tsx                                 |   9 +-
 .../shared/dependencies_table/index.tsx       |  66 +++----
 .../shared/transactions_table/index.tsx       | 180 +++++++++---------
 6 files changed, 396 insertions(+), 256 deletions(-)

diff --git a/x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/service_overview/service_overview.spec.ts b/x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/service_overview/service_overview.spec.ts
index 5601ade671908..22c6b3cb26824 100644
--- a/x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/service_overview/service_overview.spec.ts
+++ b/x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/service_overview/service_overview.spec.ts
@@ -18,7 +18,67 @@ const baseUrl = url.format({
   query: { rangeFrom: start, rangeTo: end },
 });
 
+const apiRequestsToIntercept = [
+  {
+    endpoint:
+      '/internal/apm/services/opbeans-node/transactions/charts/latency?*',
+    aliasName: 'latencyRequest',
+  },
+  {
+    endpoint: '/internal/apm/services/opbeans-node/throughput?*',
+    aliasName: 'throughputRequest',
+  },
+  {
+    endpoint:
+      '/internal/apm/services/opbeans-node/transactions/groups/main_statistics?*',
+    aliasName: 'transactionsGroupsMainStadisticsRequest',
+  },
+  {
+    endpoint:
+      '/internal/apm/services/opbeans-node/transactions/charts/error_rate?*',
+    aliasName: 'errorRateRequest',
+  },
+  {
+    endpoint:
+      '/internal/apm/services/opbeans-node/errors/groups/main_statistics?*',
+    aliasName: 'errorsGroupsMainStadisticsRequest',
+  },
+  {
+    endpoint:
+      '/internal/apm/services/opbeans-node/transaction/charts/breakdown?*',
+    aliasName: 'transactionsBreakdownRequest',
+  },
+  {
+    endpoint: '/internal/apm/services/opbeans-node/dependencies?*',
+    aliasName: 'dependenciesRequest',
+  },
+  {
+    endpoint:
+      '/internal/apm/services/opbeans-node/service_overview_instances/main_statistics?*',
+    aliasName: 'instancesMainStadisticsRequest',
+  },
+  {
+    endpoint:
+      '/internal/apm/services/opbeans-node/transactions/groups/detailed_statistics?*',
+    aliasName: 'transactionsGroupsDetailedStadisticsRequest',
+  },
+  {
+    endpoint:
+      '/internal/apm/services/opbeans-node/service_overview_instances/detailed_statistics?*',
+    aliasName: 'instancesDetailedStadisticsRequest',
+  },
+];
+
+const aliasNames = apiRequestsToIntercept.map(
+  ({ aliasName }) => `@${aliasName}`
+);
+
 describe('Service Overview', () => {
+  beforeEach(() => {
+    cy.loginAsReadOnlyUser();
+    cy.visit(baseUrl);
+  });
+
   before(async () => {
     await synthtrace.index(
       opbeans({
@@ -32,12 +92,7 @@ describe('Service Overview', () => {
     await synthtrace.clean();
   });
 
-  beforeEach(() => {
-    cy.loginAsReadOnlyUser();
-  });
-
   it('persists transaction type selected when clicking on Transactions tab', () => {
-    cy.visit(baseUrl);
     cy.get('[data-test-subj="headerFilterTransactionType"]').should(
       'have.value',
       'request'
@@ -55,7 +110,6 @@ describe('Service Overview', () => {
   });
 
   it('persists transaction type selected when clicking on View Transactions link', () => {
-    cy.visit(baseUrl);
     cy.get('[data-test-subj="headerFilterTransactionType"]').should(
       'have.value',
       'request'
@@ -73,6 +127,34 @@ describe('Service Overview', () => {
     );
   });
 
+  it('renders transaction latency chart', () => {
+    cy.get('[data-test-subj="latencyChart"]');
+  });
+
+  it('renders throughput chart', () => {
+    cy.get('[data-test-subj="throughput"]');
+  });
+
+  it('renders transactions group table', () => {
+    cy.get('[data-test-subj="transactionsGroupTable"]');
+  });
+
+  it('renders error table', () => {
+    cy.get('[data-test-subj="serviceOverviewErrorsTable"]');
+  });
+
+  it('renders dependencies table', () => {
+    cy.get('[data-test-subj="dependenciesTable"]');
+  });
+
+  it('renders instances latency distribution chart', () => {
+    cy.get('[data-test-subj="instancesLatencyDistribution"]');
+  });
+
+  it('renders instances table', () => {
+    cy.get('[data-test-subj="serviceOverviewInstancesTable"]');
+  });
+
   it('hides dependency tab when RUM service', () => {
     cy.intercept('GET', '/internal/apm/services/opbeans-rum/agent?*').as(
       'agentRequest'
@@ -95,4 +177,43 @@ describe('Service Overview', () => {
       });
     });
   });
+
+  describe('Calls APIs', () => {
+    beforeEach(() => {
+      apiRequestsToIntercept.map(({ endpoint, aliasName }) => {
+        cy.intercept('GET', endpoint).as(aliasName);
+      });
+    });
+
+    it('with the correct environment when changing the environment', () => {
+      cy.wait(aliasNames, { requestTimeout: 10000 });
+
+      cy.get('[data-test-subj="environmentFilter"]').select('production');
+
+      cy.expectAPIsToHaveBeenCalledWith({
+        apisIntercepted: aliasNames,
+        value: 'environment=production',
+      });
+    });
+
+    it('when clicking the refresh button', () => {
+      cy.wait(aliasNames, { requestTimeout: 10000 });
+      cy.contains('Refresh').click();
+      cy.wait(aliasNames);
+    });
+
+    it.skip('when selecting a different time range and clicking the update button', () => {
+      cy.wait(aliasNames, { requestTimeout: 10000 });
+
+      cy.selectAbsoluteTimeRange(
+        'Oct 10, 2021 @ 01:00:00.000',
+        'Oct 10, 2021 @ 01:30:00.000'
+      );
+      cy.contains('Update').click();
+      cy.wait(aliasNames, { requestTimeout: 10000 });
+
+      cy.contains('Refresh').click();
+      cy.wait(aliasNames, { requestTimeout: 10000 });
+    });
+  });
 });
diff --git a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_errors_table/index.tsx b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_errors_table/index.tsx
index cffc5563d75cd..28d1067168095 100644
--- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_errors_table/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_errors_table/index.tsx
@@ -180,87 +180,95 @@ export function ServiceOverviewErrorsTable({ serviceName }: Props) {
   });
 
   return (
-    <EuiFlexGroup direction="column" gutterSize="s">
-      <EuiFlexItem>
-        <EuiFlexGroup responsive={false} justifyContent="spaceBetween">
-          <EuiFlexItem grow={false}>
-            <EuiTitle size="xs">
-              <h2>
-                {i18n.translate('xpack.apm.serviceOverview.errorsTableTitle', {
-                  defaultMessage: 'Errors',
-                })}
-              </h2>
-            </EuiTitle>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <ErrorOverviewLink serviceName={serviceName}>
-              {i18n.translate('xpack.apm.serviceOverview.errorsTableLinkText', {
-                defaultMessage: 'View errors',
-              })}
-            </ErrorOverviewLink>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiFlexItem>
-      <EuiFlexItem>
-        <OverviewTableContainer
-          fixedHeight={true}
-          isEmptyAndNotInitiated={
-            totalItems === 0 && status === FETCH_STATUS.NOT_INITIATED
-          }
-        >
-          <EuiBasicTable
-            error={
-              status === FETCH_STATUS.FAILURE
-                ? i18n.translate(
-                    'xpack.apm.serviceOverview.errorsTable.errorMessage',
-                    { defaultMessage: 'Failed to fetch' }
-                  )
-                : ''
-            }
-            noItemsMessage={
-              status === FETCH_STATUS.LOADING
-                ? i18n.translate(
-                    'xpack.apm.serviceOverview.errorsTable.loading',
-                    { defaultMessage: 'Loading...' }
-                  )
-                : i18n.translate(
-                    'xpack.apm.serviceOverview.errorsTable.noResults',
-                    { defaultMessage: 'No errors found' }
-                  )
-            }
-            columns={columns}
-            items={items}
-            pagination={{
-              pageIndex,
-              pageSize: PAGE_SIZE,
-              totalItemCount: totalItems,
-              pageSizeOptions: [PAGE_SIZE],
-              hidePerPageOptions: true,
-            }}
-            loading={status === FETCH_STATUS.LOADING}
-            onChange={(newTableOptions: {
-              page?: {
-                index: number;
-              };
-              sort?: { field: string; direction: SortDirection };
-            }) => {
-              setTableOptions({
-                pageIndex: newTableOptions.page?.index ?? 0,
-                sort: newTableOptions.sort
-                  ? {
-                      field: newTableOptions.sort.field as SortField,
-                      direction: newTableOptions.sort.direction,
+    <div data-test-subj="serviceOverviewErrorsTable">
+      <EuiFlexGroup direction="column" gutterSize="s">
+        <EuiFlexItem>
+          <EuiFlexGroup responsive={false} justifyContent="spaceBetween">
+            <EuiFlexItem grow={false}>
+              <EuiTitle size="xs">
+                <h2>
+                  {i18n.translate(
+                    'xpack.apm.serviceOverview.errorsTableTitle',
+                    {
+                      defaultMessage: 'Errors',
                     }
-                  : DEFAULT_SORT,
-              });
-            }}
-            sorting={{
-              enableAllColumns: true,
-              sort,
-            }}
-          />
-        </OverviewTableContainer>
-      </EuiFlexItem>
-    </EuiFlexGroup>
+                  )}
+                </h2>
+              </EuiTitle>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <ErrorOverviewLink serviceName={serviceName}>
+                {i18n.translate(
+                  'xpack.apm.serviceOverview.errorsTableLinkText',
+                  {
+                    defaultMessage: 'View errors',
+                  }
+                )}
+              </ErrorOverviewLink>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <OverviewTableContainer
+            fixedHeight={true}
+            isEmptyAndNotInitiated={
+              totalItems === 0 && status === FETCH_STATUS.NOT_INITIATED
+            }
+          >
+            <EuiBasicTable
+              error={
+                status === FETCH_STATUS.FAILURE
+                  ? i18n.translate(
+                      'xpack.apm.serviceOverview.errorsTable.errorMessage',
+                      { defaultMessage: 'Failed to fetch' }
+                    )
+                  : ''
+              }
+              noItemsMessage={
+                status === FETCH_STATUS.LOADING
+                  ? i18n.translate(
+                      'xpack.apm.serviceOverview.errorsTable.loading',
+                      { defaultMessage: 'Loading...' }
+                    )
+                  : i18n.translate(
+                      'xpack.apm.serviceOverview.errorsTable.noResults',
+                      { defaultMessage: 'No errors found' }
+                    )
+              }
+              columns={columns}
+              items={items}
+              pagination={{
+                pageIndex,
+                pageSize: PAGE_SIZE,
+                totalItemCount: totalItems,
+                pageSizeOptions: [PAGE_SIZE],
+                hidePerPageOptions: true,
+              }}
+              loading={status === FETCH_STATUS.LOADING}
+              onChange={(newTableOptions: {
+                page?: {
+                  index: number;
+                };
+                sort?: { field: string; direction: SortDirection };
+              }) => {
+                setTableOptions({
+                  pageIndex: newTableOptions.page?.index ?? 0,
+                  sort: newTableOptions.sort
+                    ? {
+                        field: newTableOptions.sort.field as SortField,
+                        direction: newTableOptions.sort.direction,
+                      }
+                    : DEFAULT_SORT,
+                });
+              }}
+              sorting={{
+                enableAllColumns: true,
+                sort,
+              }}
+            />
+          </OverviewTableContainer>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </div>
   );
 }
diff --git a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/index.tsx b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/index.tsx
index b698a0672213d..b1dcd4f059edd 100644
--- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/index.tsx
@@ -145,51 +145,53 @@ export function ServiceOverviewInstancesTable({
   };
 
   return (
-    <EuiFlexGroup direction="column" gutterSize="s">
-      <EuiFlexItem>
-        <EuiTitle size="xs">
-          <h2>
-            {i18n.translate('xpack.apm.serviceOverview.instancesTableTitle', {
-              defaultMessage: 'Instances',
-            })}
-          </h2>
-        </EuiTitle>
-      </EuiFlexItem>
-      <EuiFlexItem data-test-subj="serviceInstancesTableContainer">
-        <OverviewTableContainer
-          fixedHeight={true}
-          isEmptyAndNotInitiated={mainStatsItemCount === 0 && isNotInitiated}
-        >
-          <EuiBasicTable
-            noItemsMessage={
-              isLoading
-                ? i18n.translate('xpack.apm.serviceOverview.loadingText', {
-                    defaultMessage: 'Loading…',
-                  })
-                : i18n.translate('xpack.apm.serviceOverview.noResultsText', {
-                    defaultMessage: 'No instances found',
-                  })
-            }
-            data-test-subj="instancesTable"
-            loading={isLoading}
-            items={mainStatsItems}
-            columns={columns}
-            pagination={pagination}
-            sorting={{ sort: { field, direction } }}
-            onChange={onChangeTableOptions}
-            itemId="serviceNodeName"
-            itemIdToExpandedRowMap={itemIdToExpandedRowMap}
-            error={
-              status === FETCH_STATUS.FAILURE
-                ? i18n.translate(
-                    'xpack.apm.serviceOverview.instancesTable.errorMessage',
-                    { defaultMessage: 'Failed to fetch' }
-                  )
-                : ''
-            }
-          />
-        </OverviewTableContainer>
-      </EuiFlexItem>
-    </EuiFlexGroup>
+    <div data-test-subj="serviceOverviewInstancesTable">
+      <EuiFlexGroup direction="column" gutterSize="s">
+        <EuiFlexItem>
+          <EuiTitle size="xs">
+            <h2>
+              {i18n.translate('xpack.apm.serviceOverview.instancesTableTitle', {
+                defaultMessage: 'Instances',
+              })}
+            </h2>
+          </EuiTitle>
+        </EuiFlexItem>
+        <EuiFlexItem data-test-subj="serviceInstancesTableContainer">
+          <OverviewTableContainer
+            fixedHeight={true}
+            isEmptyAndNotInitiated={mainStatsItemCount === 0 && isNotInitiated}
+          >
+            <EuiBasicTable
+              noItemsMessage={
+                isLoading
+                  ? i18n.translate('xpack.apm.serviceOverview.loadingText', {
+                      defaultMessage: 'Loading…',
+                    })
+                  : i18n.translate('xpack.apm.serviceOverview.noResultsText', {
+                      defaultMessage: 'No instances found',
+                    })
+              }
+              data-test-subj="instancesTable"
+              loading={isLoading}
+              items={mainStatsItems}
+              columns={columns}
+              pagination={pagination}
+              sorting={{ sort: { field, direction } }}
+              onChange={onChangeTableOptions}
+              itemId="serviceNodeName"
+              itemIdToExpandedRowMap={itemIdToExpandedRowMap}
+              error={
+                status === FETCH_STATUS.FAILURE
+                  ? i18n.translate(
+                      'xpack.apm.serviceOverview.instancesTable.errorMessage',
+                      { defaultMessage: 'Failed to fetch' }
+                    )
+                  : ''
+              }
+            />
+          </OverviewTableContainer>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </div>
   );
 }
diff --git a/x-pack/plugins/apm/public/components/shared/charts/instances_latency_distribution_chart/index.tsx b/x-pack/plugins/apm/public/components/shared/charts/instances_latency_distribution_chart/index.tsx
index 0146b9e8dd44d..4c93d2b513818 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/instances_latency_distribution_chart/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/instances_latency_distribution_chart/index.tsx
@@ -114,8 +114,13 @@ export function InstancesLatencyDistributionChart({
           })}
         </h2>
       </EuiTitle>
-      <ChartContainer hasData={hasData} height={height} status={status}>
-        <Chart id="instances-latency-distribution">
+      <ChartContainer
+        hasData={hasData}
+        height={height}
+        status={status}
+        id="instancesLatencyDistribution"
+      >
+        <Chart>
           <Settings
             legendPosition={Position.Bottom}
             onElementClick={handleElementClick}
diff --git a/x-pack/plugins/apm/public/components/shared/dependencies_table/index.tsx b/x-pack/plugins/apm/public/components/shared/dependencies_table/index.tsx
index 34feb0802a5c6..7e31fe35acd29 100644
--- a/x-pack/plugins/apm/public/components/shared/dependencies_table/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/dependencies_table/index.tsx
@@ -205,37 +205,39 @@ export function DependenciesTable(props: Props) {
   );
 
   return (
-    <EuiFlexGroup direction="column" gutterSize="s">
-      <EuiFlexItem>
-        <EuiFlexGroup responsive={false} justifyContent="spaceBetween">
-          <EuiFlexItem grow={false}>
-            <EuiTitle size="xs">
-              <h2>{title}</h2>
-            </EuiTitle>
-          </EuiFlexItem>
-          {link && <EuiFlexItem grow={false}>{link}</EuiFlexItem>}
-        </EuiFlexGroup>
-      </EuiFlexItem>
-      <EuiFlexItem>
-        <OverviewTableContainer
-          fixedHeight={fixedHeight}
-          isEmptyAndNotInitiated={
-            items.length === 0 && status === FETCH_STATUS.NOT_INITIATED
-          }
-        >
-          <ManagedTable
-            isLoading={status === FETCH_STATUS.LOADING}
-            error={status === FETCH_STATUS.FAILURE}
-            columns={columns}
-            items={items}
-            noItemsMessage={noItemsMessage}
-            initialSortField="impactValue"
-            initialSortDirection="desc"
-            pagination={true}
-            hidePerPageOptions={hidePerPageOptions}
-          />
-        </OverviewTableContainer>
-      </EuiFlexItem>
-    </EuiFlexGroup>
+    <div data-test-subj="dependenciesTable">
+      <EuiFlexGroup direction="column" gutterSize="s">
+        <EuiFlexItem>
+          <EuiFlexGroup responsive={false} justifyContent="spaceBetween">
+            <EuiFlexItem grow={false}>
+              <EuiTitle size="xs">
+                <h2>{title}</h2>
+              </EuiTitle>
+            </EuiFlexItem>
+            {link && <EuiFlexItem grow={false}>{link}</EuiFlexItem>}
+          </EuiFlexGroup>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <OverviewTableContainer
+            fixedHeight={fixedHeight}
+            isEmptyAndNotInitiated={
+              items.length === 0 && status === FETCH_STATUS.NOT_INITIATED
+            }
+          >
+            <ManagedTable
+              isLoading={status === FETCH_STATUS.LOADING}
+              error={status === FETCH_STATUS.FAILURE}
+              columns={columns}
+              items={items}
+              noItemsMessage={noItemsMessage}
+              initialSortField="impactValue"
+              initialSortDirection="desc"
+              pagination={true}
+              hidePerPageOptions={hidePerPageOptions}
+            />
+          </OverviewTableContainer>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </div>
   );
 }
diff --git a/x-pack/plugins/apm/public/components/shared/transactions_table/index.tsx b/x-pack/plugins/apm/public/components/shared/transactions_table/index.tsx
index 856fa4139963e..420763bbc9e96 100644
--- a/x-pack/plugins/apm/public/components/shared/transactions_table/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/transactions_table/index.tsx
@@ -229,101 +229,103 @@ export function TransactionsTable({
   const isNotInitiated = status === FETCH_STATUS.NOT_INITIATED;
 
   return (
-    <EuiFlexGroup direction="column" gutterSize="s">
-      <EuiFlexItem>
-        <EuiFlexGroup justifyContent="spaceBetween" responsive={false}>
-          <EuiFlexItem grow={false}>
-            <EuiTitle size="xs">
-              <h2>
-                {i18n.translate('xpack.apm.transactionsTable.title', {
-                  defaultMessage: 'Transactions',
-                })}
-              </h2>
-            </EuiTitle>
-          </EuiFlexItem>
-          {!hideViewTransactionsLink && (
+    <div data-test-subj="transactionsGroupTable">
+      <EuiFlexGroup direction="column" gutterSize="s">
+        <EuiFlexItem>
+          <EuiFlexGroup justifyContent="spaceBetween" responsive={false}>
             <EuiFlexItem grow={false}>
-              <TransactionOverviewLink
-                serviceName={serviceName}
-                latencyAggregationType={latencyAggregationType}
-                transactionType={transactionType}
-              >
-                {i18n.translate('xpack.apm.transactionsTable.linkText', {
-                  defaultMessage: 'View transactions',
-                })}
-              </TransactionOverviewLink>
+              <EuiTitle size="xs">
+                <h2>
+                  {i18n.translate('xpack.apm.transactionsTable.title', {
+                    defaultMessage: 'Transactions',
+                  })}
+                </h2>
+              </EuiTitle>
             </EuiFlexItem>
-          )}
-        </EuiFlexGroup>
-      </EuiFlexItem>
-      {showAggregationAccurateCallout && !isAggregationAccurate && (
-        <EuiFlexItem>
-          <EuiCallOut
-            title={i18n.translate(
-              'xpack.apm.transactionsTable.cardinalityWarning.title',
-              {
-                defaultMessage:
-                  'This view shows a subset of reported transactions.',
-              }
+            {!hideViewTransactionsLink && (
+              <EuiFlexItem grow={false}>
+                <TransactionOverviewLink
+                  serviceName={serviceName}
+                  latencyAggregationType={latencyAggregationType}
+                  transactionType={transactionType}
+                >
+                  {i18n.translate('xpack.apm.transactionsTable.linkText', {
+                    defaultMessage: 'View transactions',
+                  })}
+                </TransactionOverviewLink>
+              </EuiFlexItem>
             )}
-            color="danger"
-            iconType="alert"
-          >
-            <p>
-              <FormattedMessage
-                id="xpack.apm.transactionsTable.cardinalityWarning.body"
-                defaultMessage="The number of unique transaction names exceeds the configured value of {bucketSize}. Try reconfiguring your agents to group similar transactions or increase the value of {codeBlock}"
-                values={{
-                  bucketSize,
-                  codeBlock: (
-                    <EuiCode>xpack.apm.ui.transactionGroupBucketSize</EuiCode>
-                  ),
-                }}
-              />
-
-              <ElasticDocsLink
-                section="/kibana"
-                path="/troubleshooting.html#troubleshooting-too-many-transactions"
-              >
-                {i18n.translate(
-                  'xpack.apm.transactionsTable.cardinalityWarning.docsLink',
-                  { defaultMessage: 'Learn more in the docs' }
-                )}
-              </ElasticDocsLink>
-            </p>
-          </EuiCallOut>
+          </EuiFlexGroup>
         </EuiFlexItem>
-      )}
-      <EuiFlexItem>
+        {showAggregationAccurateCallout && !isAggregationAccurate && (
+          <EuiFlexItem>
+            <EuiCallOut
+              title={i18n.translate(
+                'xpack.apm.transactionsTable.cardinalityWarning.title',
+                {
+                  defaultMessage:
+                    'This view shows a subset of reported transactions.',
+                }
+              )}
+              color="danger"
+              iconType="alert"
+            >
+              <p>
+                <FormattedMessage
+                  id="xpack.apm.transactionsTable.cardinalityWarning.body"
+                  defaultMessage="The number of unique transaction names exceeds the configured value of {bucketSize}. Try reconfiguring your agents to group similar transactions or increase the value of {codeBlock}"
+                  values={{
+                    bucketSize,
+                    codeBlock: (
+                      <EuiCode>xpack.apm.ui.transactionGroupBucketSize</EuiCode>
+                    ),
+                  }}
+                />
+
+                <ElasticDocsLink
+                  section="/kibana"
+                  path="/troubleshooting.html#troubleshooting-too-many-transactions"
+                >
+                  {i18n.translate(
+                    'xpack.apm.transactionsTable.cardinalityWarning.docsLink',
+                    { defaultMessage: 'Learn more in the docs' }
+                  )}
+                </ElasticDocsLink>
+              </p>
+            </EuiCallOut>
+          </EuiFlexItem>
+        )}
         <EuiFlexItem>
-          <OverviewTableContainer
-            fixedHeight={fixedHeight}
-            isEmptyAndNotInitiated={
-              transactionGroupsTotalItems === 0 && isNotInitiated
-            }
-          >
-            <ManagedTable
-              isLoading={isLoading}
-              error={status === FETCH_STATUS.FAILURE}
-              columns={columns}
-              items={transactionGroups}
-              initialSortField="impact"
-              initialSortDirection="desc"
-              initialPageSize={numberOfTransactionsPerPage}
-              noItemsMessage={
-                isLoading
-                  ? i18n.translate('xpack.apm.transactionsTable.loading', {
-                      defaultMessage: 'Loading...',
-                    })
-                  : i18n.translate('xpack.apm.transactionsTable.noResults', {
-                      defaultMessage: 'No transaction groups found',
-                    })
+          <EuiFlexItem>
+            <OverviewTableContainer
+              fixedHeight={fixedHeight}
+              isEmptyAndNotInitiated={
+                transactionGroupsTotalItems === 0 && isNotInitiated
               }
-              hidePerPageOptions={hidePerPageOptions}
-            />
-          </OverviewTableContainer>
+            >
+              <ManagedTable
+                isLoading={isLoading}
+                error={status === FETCH_STATUS.FAILURE}
+                columns={columns}
+                items={transactionGroups}
+                initialSortField="impact"
+                initialSortDirection="desc"
+                initialPageSize={numberOfTransactionsPerPage}
+                noItemsMessage={
+                  isLoading
+                    ? i18n.translate('xpack.apm.transactionsTable.loading', {
+                        defaultMessage: 'Loading...',
+                      })
+                    : i18n.translate('xpack.apm.transactionsTable.noResults', {
+                        defaultMessage: 'No transaction groups found',
+                      })
+                }
+                hidePerPageOptions={hidePerPageOptions}
+              />
+            </OverviewTableContainer>
+          </EuiFlexItem>
         </EuiFlexItem>
-      </EuiFlexItem>
-    </EuiFlexGroup>
+      </EuiFlexGroup>
+    </div>
   );
 }

From 2bdfb05d26dea247cd86dedbd473d6c324c9dbe6 Mon Sep 17 00:00:00 2001
From: "miriam.aparicio" <miriam.aparicio@gmail.com>
Date: Fri, 11 Feb 2022 10:55:59 +0000
Subject: [PATCH 2/4] add test for comparison type change

---
 .../service_overview/service_overview.spec.ts      | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/service_overview/service_overview.spec.ts b/x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/service_overview/service_overview.spec.ts
index 22c6b3cb26824..8239ff4765f74 100644
--- a/x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/service_overview/service_overview.spec.ts
+++ b/x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/service_overview/service_overview.spec.ts
@@ -202,7 +202,7 @@ describe('Service Overview', () => {
       cy.wait(aliasNames);
     });
 
-    it.skip('when selecting a different time range and clicking the update button', () => {
+    it('when selecting a different time range and clicking the update button', () => {
       cy.wait(aliasNames, { requestTimeout: 10000 });
 
       cy.selectAbsoluteTimeRange(
@@ -215,5 +215,17 @@ describe('Service Overview', () => {
       cy.contains('Refresh').click();
       cy.wait(aliasNames, { requestTimeout: 10000 });
     });
+
+    it('when selecting a different comparison window', () => {
+      cy.get('[data-test-subj="comparisonSelect"]').should('have.value', 'day');
+
+      // selects another comparison type
+      cy.get('[data-test-subj="comparisonSelect"]').select('week');
+      cy.get('[data-test-subj="comparisonSelect"]').should(
+        'have.value',
+        'week'
+      );
+      cy.wait(aliasNames, { requestTimeout: 10000 });
+    });
   });
 });

From 2a63a21ccbe28ad9f3ac200d7a2928befd80ca82 Mon Sep 17 00:00:00 2001
From: "miriam.aparicio" <miriam.aparicio@gmail.com>
Date: Mon, 14 Feb 2022 12:57:03 +0000
Subject: [PATCH 3/4] PR review comments addressed

---
 .../service_overview/service_overview.spec.ts | 221 ++++++++++--------
 .../service_overview_errors_table/index.tsx   | 174 +++++++-------
 .../index.tsx                                 |  98 ++++----
 .../shared/dependencies_table/index.tsx       |  70 +++---
 .../shared/transactions_table/index.tsx       | 184 +++++++--------
 5 files changed, 390 insertions(+), 357 deletions(-)

diff --git a/x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/service_overview/service_overview.spec.ts b/x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/service_overview/service_overview.spec.ts
index 8239ff4765f74..3bbc69b31a98f 100644
--- a/x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/service_overview/service_overview.spec.ts
+++ b/x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/service_overview/service_overview.spec.ts
@@ -19,25 +19,11 @@ const baseUrl = url.format({
 });
 
 const apiRequestsToIntercept = [
-  {
-    endpoint:
-      '/internal/apm/services/opbeans-node/transactions/charts/latency?*',
-    aliasName: 'latencyRequest',
-  },
-  {
-    endpoint: '/internal/apm/services/opbeans-node/throughput?*',
-    aliasName: 'throughputRequest',
-  },
   {
     endpoint:
       '/internal/apm/services/opbeans-node/transactions/groups/main_statistics?*',
     aliasName: 'transactionsGroupsMainStadisticsRequest',
   },
-  {
-    endpoint:
-      '/internal/apm/services/opbeans-node/transactions/charts/error_rate?*',
-    aliasName: 'errorRateRequest',
-  },
   {
     endpoint:
       '/internal/apm/services/opbeans-node/errors/groups/main_statistics?*',
@@ -52,16 +38,34 @@ const apiRequestsToIntercept = [
     endpoint: '/internal/apm/services/opbeans-node/dependencies?*',
     aliasName: 'dependenciesRequest',
   },
+];
+
+const apiRequestsToInterceptWithComparison = [
   {
     endpoint:
-      '/internal/apm/services/opbeans-node/service_overview_instances/main_statistics?*',
-    aliasName: 'instancesMainStadisticsRequest',
+      '/internal/apm/services/opbeans-node/transactions/charts/latency?*',
+    aliasName: 'latencyRequest',
+  },
+  {
+    endpoint: '/internal/apm/services/opbeans-node/throughput?*',
+    aliasName: 'throughputRequest',
+  },
+  {
+    endpoint:
+      '/internal/apm/services/opbeans-node/transactions/charts/error_rate?*',
+    aliasName: 'errorRateRequest',
   },
   {
     endpoint:
       '/internal/apm/services/opbeans-node/transactions/groups/detailed_statistics?*',
     aliasName: 'transactionsGroupsDetailedStadisticsRequest',
   },
+  {
+    endpoint:
+      '/internal/apm/services/opbeans-node/service_overview_instances/main_statistics?*',
+    aliasName: 'instancesMainStadisticsRequest',
+  },
+
   {
     endpoint:
       '/internal/apm/services/opbeans-node/service_overview_instances/detailed_statistics?*',
@@ -69,16 +73,17 @@ const apiRequestsToIntercept = [
   },
 ];
 
-const aliasNames = apiRequestsToIntercept.map(
+const aliasNamesNoComparison = apiRequestsToIntercept.map(
   ({ aliasName }) => `@${aliasName}`
 );
 
-describe('Service Overview', () => {
-  beforeEach(() => {
-    cy.loginAsReadOnlyUser();
-    cy.visit(baseUrl);
-  });
+const aliasNamesWithComparison = apiRequestsToInterceptWithComparison.map(
+  ({ aliasName }) => `@${aliasName}`
+);
 
+const aliasNames = [...aliasNamesNoComparison, ...aliasNamesWithComparison];
+
+describe('Service Overview', () => {
   before(async () => {
     await synthtrace.index(
       opbeans({
@@ -92,97 +97,121 @@ describe('Service Overview', () => {
     await synthtrace.clean();
   });
 
-  it('persists transaction type selected when clicking on Transactions tab', () => {
-    cy.get('[data-test-subj="headerFilterTransactionType"]').should(
-      'have.value',
-      'request'
-    );
-    cy.get('[data-test-subj="headerFilterTransactionType"]').select('Worker');
-    cy.get('[data-test-subj="headerFilterTransactionType"]').should(
-      'have.value',
-      'Worker'
-    );
-    cy.contains('Transactions').click();
-    cy.get('[data-test-subj="headerFilterTransactionType"]').should(
-      'have.value',
-      'Worker'
-    );
-  });
+  describe('renders', () => {
+    before(() => {
+      cy.loginAsReadOnlyUser();
+      cy.visit(baseUrl);
+    });
+    it('transaction latency chart', () => {
+      cy.get('[data-test-subj="latencyChart"]');
+    });
 
-  it('persists transaction type selected when clicking on View Transactions link', () => {
-    cy.get('[data-test-subj="headerFilterTransactionType"]').should(
-      'have.value',
-      'request'
-    );
-    cy.get('[data-test-subj="headerFilterTransactionType"]').select('Worker');
-    cy.get('[data-test-subj="headerFilterTransactionType"]').should(
-      'have.value',
-      'Worker'
-    );
+    it('throughput chart', () => {
+      cy.get('[data-test-subj="throughput"]');
+    });
 
-    cy.contains('View transactions').click();
-    cy.get('[data-test-subj="headerFilterTransactionType"]').should(
-      'have.value',
-      'Worker'
-    );
-  });
+    it('transactions group table', () => {
+      cy.get('[data-test-subj="transactionsGroupTable"]');
+    });
 
-  it('renders transaction latency chart', () => {
-    cy.get('[data-test-subj="latencyChart"]');
-  });
+    it('error table', () => {
+      cy.get('[data-test-subj="serviceOverviewErrorsTable"]');
+    });
 
-  it('renders throughput chart', () => {
-    cy.get('[data-test-subj="throughput"]');
-  });
+    it('dependencies table', () => {
+      cy.get('[data-test-subj="dependenciesTable"]');
+    });
 
-  it('renders transactions group table', () => {
-    cy.get('[data-test-subj="transactionsGroupTable"]');
-  });
+    it('instances latency distribution chart', () => {
+      cy.get('[data-test-subj="instancesLatencyDistribution"]');
+    });
 
-  it('renders error table', () => {
-    cy.get('[data-test-subj="serviceOverviewErrorsTable"]');
+    it('instances table', () => {
+      cy.get('[data-test-subj="serviceOverviewInstancesTable"]');
+    });
   });
 
-  it('renders dependencies table', () => {
-    cy.get('[data-test-subj="dependenciesTable"]');
-  });
+  describe('transactions', () => {
+    beforeEach(() => {
+      cy.loginAsReadOnlyUser();
+      cy.visit(baseUrl);
+    });
 
-  it('renders instances latency distribution chart', () => {
-    cy.get('[data-test-subj="instancesLatencyDistribution"]');
-  });
+    it('persists transaction type selected when clicking on Transactions tab', () => {
+      cy.get('[data-test-subj="headerFilterTransactionType"]').should(
+        'have.value',
+        'request'
+      );
+      cy.get('[data-test-subj="headerFilterTransactionType"]').select('Worker');
+      cy.get('[data-test-subj="headerFilterTransactionType"]').should(
+        'have.value',
+        'Worker'
+      );
+      cy.contains('Transactions').click();
+      cy.get('[data-test-subj="headerFilterTransactionType"]').should(
+        'have.value',
+        'Worker'
+      );
+    });
+
+    it('persists transaction type selected when clicking on View Transactions link', () => {
+      cy.get('[data-test-subj="headerFilterTransactionType"]').should(
+        'have.value',
+        'request'
+      );
+      cy.get('[data-test-subj="headerFilterTransactionType"]').select('Worker');
+      cy.get('[data-test-subj="headerFilterTransactionType"]').should(
+        'have.value',
+        'Worker'
+      );
 
-  it('renders instances table', () => {
-    cy.get('[data-test-subj="serviceOverviewInstancesTable"]');
+      cy.contains('View transactions').click();
+      cy.get('[data-test-subj="headerFilterTransactionType"]').should(
+        'have.value',
+        'Worker'
+      );
+    });
   });
 
-  it('hides dependency tab when RUM service', () => {
-    cy.intercept('GET', '/internal/apm/services/opbeans-rum/agent?*').as(
-      'agentRequest'
-    );
-    cy.visit(
-      url.format({
-        pathname: '/app/apm/services/opbeans-rum/overview',
-        query: { rangeFrom: start, rangeTo: end },
-      })
-    );
-    cy.contains('Overview');
-    cy.contains('Transactions');
-    cy.contains('Error');
-    cy.contains('Service Map');
-    // Waits until the agent request is finished to check the tab.
-    cy.wait('@agentRequest');
-    cy.get('.euiTabs .euiTab__content').then((elements) => {
-      elements.map((index, element) => {
-        expect(element.innerText).to.not.equal('Dependencies');
+  describe('when RUM service', () => {
+    before(() => {
+      cy.loginAsReadOnlyUser();
+      cy.visit(
+        url.format({
+          pathname: '/app/apm/services/opbeans-rum/overview',
+          query: { rangeFrom: start, rangeTo: end },
+        })
+      );
+    });
+
+    it('hides dependency tab when RUM service', () => {
+      cy.intercept('GET', '/internal/apm/services/opbeans-rum/agent?*').as(
+        'agentRequest'
+      );
+      cy.contains('Overview');
+      cy.contains('Transactions');
+      cy.contains('Error');
+      cy.contains('Service Map');
+      // Waits until the agent request is finished to check the tab.
+      cy.wait('@agentRequest');
+      cy.get('.euiTabs .euiTab__content').then((elements) => {
+        elements.map((index, element) => {
+          expect(element.innerText).to.not.equal('Dependencies');
+        });
       });
     });
   });
 
   describe('Calls APIs', () => {
     beforeEach(() => {
+      cy.loginAsReadOnlyUser();
+      cy.visit(baseUrl);
       apiRequestsToIntercept.map(({ endpoint, aliasName }) => {
         cy.intercept('GET', endpoint).as(aliasName);
       });
+      apiRequestsToInterceptWithComparison.map(({ endpoint, aliasName }) => {
+        cy.intercept('GET', endpoint).as(aliasName);
+      });
     });
 
     it('with the correct environment when changing the environment', () => {
@@ -197,9 +226,8 @@ describe('Service Overview', () => {
     });
 
     it('when clicking the refresh button', () => {
-      cy.wait(aliasNames, { requestTimeout: 10000 });
       cy.contains('Refresh').click();
-      cy.wait(aliasNames);
+      cy.wait(aliasNames, { requestTimeout: 10000 });
     });
 
     it('when selecting a different time range and clicking the update button', () => {
@@ -225,7 +253,10 @@ describe('Service Overview', () => {
         'have.value',
         'week'
       );
-      cy.wait(aliasNames, { requestTimeout: 10000 });
+      cy.expectAPIsToHaveBeenCalledWith({
+        apisIntercepted: aliasNamesWithComparison,
+        value: 'comparisonStart',
+      });
     });
   });
 });
diff --git a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_errors_table/index.tsx b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_errors_table/index.tsx
index 28d1067168095..0b7d3c32957e2 100644
--- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_errors_table/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_errors_table/index.tsx
@@ -180,95 +180,91 @@ export function ServiceOverviewErrorsTable({ serviceName }: Props) {
   });
 
   return (
-    <div data-test-subj="serviceOverviewErrorsTable">
-      <EuiFlexGroup direction="column" gutterSize="s">
-        <EuiFlexItem>
-          <EuiFlexGroup responsive={false} justifyContent="spaceBetween">
-            <EuiFlexItem grow={false}>
-              <EuiTitle size="xs">
-                <h2>
-                  {i18n.translate(
-                    'xpack.apm.serviceOverview.errorsTableTitle',
-                    {
-                      defaultMessage: 'Errors',
-                    }
-                  )}
-                </h2>
-              </EuiTitle>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <ErrorOverviewLink serviceName={serviceName}>
-                {i18n.translate(
-                  'xpack.apm.serviceOverview.errorsTableLinkText',
-                  {
-                    defaultMessage: 'View errors',
-                  }
-                )}
-              </ErrorOverviewLink>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiFlexItem>
-        <EuiFlexItem>
-          <OverviewTableContainer
-            fixedHeight={true}
-            isEmptyAndNotInitiated={
-              totalItems === 0 && status === FETCH_STATUS.NOT_INITIATED
+    <EuiFlexGroup
+      direction="column"
+      gutterSize="s"
+      data-test-subj="serviceOverviewErrorsTable"
+    >
+      <EuiFlexItem>
+        <EuiFlexGroup responsive={false} justifyContent="spaceBetween">
+          <EuiFlexItem grow={false}>
+            <EuiTitle size="xs">
+              <h2>
+                {i18n.translate('xpack.apm.serviceOverview.errorsTableTitle', {
+                  defaultMessage: 'Errors',
+                })}
+              </h2>
+            </EuiTitle>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <ErrorOverviewLink serviceName={serviceName}>
+              {i18n.translate('xpack.apm.serviceOverview.errorsTableLinkText', {
+                defaultMessage: 'View errors',
+              })}
+            </ErrorOverviewLink>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <OverviewTableContainer
+          fixedHeight={true}
+          isEmptyAndNotInitiated={
+            totalItems === 0 && status === FETCH_STATUS.NOT_INITIATED
+          }
+        >
+          <EuiBasicTable
+            error={
+              status === FETCH_STATUS.FAILURE
+                ? i18n.translate(
+                    'xpack.apm.serviceOverview.errorsTable.errorMessage',
+                    { defaultMessage: 'Failed to fetch' }
+                  )
+                : ''
             }
-          >
-            <EuiBasicTable
-              error={
-                status === FETCH_STATUS.FAILURE
-                  ? i18n.translate(
-                      'xpack.apm.serviceOverview.errorsTable.errorMessage',
-                      { defaultMessage: 'Failed to fetch' }
-                    )
-                  : ''
-              }
-              noItemsMessage={
-                status === FETCH_STATUS.LOADING
-                  ? i18n.translate(
-                      'xpack.apm.serviceOverview.errorsTable.loading',
-                      { defaultMessage: 'Loading...' }
-                    )
-                  : i18n.translate(
-                      'xpack.apm.serviceOverview.errorsTable.noResults',
-                      { defaultMessage: 'No errors found' }
-                    )
-              }
-              columns={columns}
-              items={items}
-              pagination={{
-                pageIndex,
-                pageSize: PAGE_SIZE,
-                totalItemCount: totalItems,
-                pageSizeOptions: [PAGE_SIZE],
-                hidePerPageOptions: true,
-              }}
-              loading={status === FETCH_STATUS.LOADING}
-              onChange={(newTableOptions: {
-                page?: {
-                  index: number;
-                };
-                sort?: { field: string; direction: SortDirection };
-              }) => {
-                setTableOptions({
-                  pageIndex: newTableOptions.page?.index ?? 0,
-                  sort: newTableOptions.sort
-                    ? {
-                        field: newTableOptions.sort.field as SortField,
-                        direction: newTableOptions.sort.direction,
-                      }
-                    : DEFAULT_SORT,
-                });
-              }}
-              sorting={{
-                enableAllColumns: true,
-                sort,
-              }}
-            />
-          </OverviewTableContainer>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </div>
+            noItemsMessage={
+              status === FETCH_STATUS.LOADING
+                ? i18n.translate(
+                    'xpack.apm.serviceOverview.errorsTable.loading',
+                    { defaultMessage: 'Loading...' }
+                  )
+                : i18n.translate(
+                    'xpack.apm.serviceOverview.errorsTable.noResults',
+                    { defaultMessage: 'No errors found' }
+                  )
+            }
+            columns={columns}
+            items={items}
+            pagination={{
+              pageIndex,
+              pageSize: PAGE_SIZE,
+              totalItemCount: totalItems,
+              pageSizeOptions: [PAGE_SIZE],
+              hidePerPageOptions: true,
+            }}
+            loading={status === FETCH_STATUS.LOADING}
+            onChange={(newTableOptions: {
+              page?: {
+                index: number;
+              };
+              sort?: { field: string; direction: SortDirection };
+            }) => {
+              setTableOptions({
+                pageIndex: newTableOptions.page?.index ?? 0,
+                sort: newTableOptions.sort
+                  ? {
+                      field: newTableOptions.sort.field as SortField,
+                      direction: newTableOptions.sort.direction,
+                    }
+                  : DEFAULT_SORT,
+              });
+            }}
+            sorting={{
+              enableAllColumns: true,
+              sort,
+            }}
+          />
+        </OverviewTableContainer>
+      </EuiFlexItem>
+    </EuiFlexGroup>
   );
 }
diff --git a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/index.tsx b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/index.tsx
index b1dcd4f059edd..c41ad329ea863 100644
--- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/index.tsx
@@ -145,53 +145,55 @@ export function ServiceOverviewInstancesTable({
   };
 
   return (
-    <div data-test-subj="serviceOverviewInstancesTable">
-      <EuiFlexGroup direction="column" gutterSize="s">
-        <EuiFlexItem>
-          <EuiTitle size="xs">
-            <h2>
-              {i18n.translate('xpack.apm.serviceOverview.instancesTableTitle', {
-                defaultMessage: 'Instances',
-              })}
-            </h2>
-          </EuiTitle>
-        </EuiFlexItem>
-        <EuiFlexItem data-test-subj="serviceInstancesTableContainer">
-          <OverviewTableContainer
-            fixedHeight={true}
-            isEmptyAndNotInitiated={mainStatsItemCount === 0 && isNotInitiated}
-          >
-            <EuiBasicTable
-              noItemsMessage={
-                isLoading
-                  ? i18n.translate('xpack.apm.serviceOverview.loadingText', {
-                      defaultMessage: 'Loading…',
-                    })
-                  : i18n.translate('xpack.apm.serviceOverview.noResultsText', {
-                      defaultMessage: 'No instances found',
-                    })
-              }
-              data-test-subj="instancesTable"
-              loading={isLoading}
-              items={mainStatsItems}
-              columns={columns}
-              pagination={pagination}
-              sorting={{ sort: { field, direction } }}
-              onChange={onChangeTableOptions}
-              itemId="serviceNodeName"
-              itemIdToExpandedRowMap={itemIdToExpandedRowMap}
-              error={
-                status === FETCH_STATUS.FAILURE
-                  ? i18n.translate(
-                      'xpack.apm.serviceOverview.instancesTable.errorMessage',
-                      { defaultMessage: 'Failed to fetch' }
-                    )
-                  : ''
-              }
-            />
-          </OverviewTableContainer>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </div>
+    <EuiFlexGroup
+      direction="column"
+      gutterSize="s"
+      data-test-subj="serviceOverviewInstancesTable"
+    >
+      <EuiFlexItem>
+        <EuiTitle size="xs">
+          <h2>
+            {i18n.translate('xpack.apm.serviceOverview.instancesTableTitle', {
+              defaultMessage: 'Instances',
+            })}
+          </h2>
+        </EuiTitle>
+      </EuiFlexItem>
+      <EuiFlexItem data-test-subj="serviceInstancesTableContainer">
+        <OverviewTableContainer
+          fixedHeight={true}
+          isEmptyAndNotInitiated={mainStatsItemCount === 0 && isNotInitiated}
+        >
+          <EuiBasicTable
+            noItemsMessage={
+              isLoading
+                ? i18n.translate('xpack.apm.serviceOverview.loadingText', {
+                    defaultMessage: 'Loading…',
+                  })
+                : i18n.translate('xpack.apm.serviceOverview.noResultsText', {
+                    defaultMessage: 'No instances found',
+                  })
+            }
+            data-test-subj="instancesTable"
+            loading={isLoading}
+            items={mainStatsItems}
+            columns={columns}
+            pagination={pagination}
+            sorting={{ sort: { field, direction } }}
+            onChange={onChangeTableOptions}
+            itemId="serviceNodeName"
+            itemIdToExpandedRowMap={itemIdToExpandedRowMap}
+            error={
+              status === FETCH_STATUS.FAILURE
+                ? i18n.translate(
+                    'xpack.apm.serviceOverview.instancesTable.errorMessage',
+                    { defaultMessage: 'Failed to fetch' }
+                  )
+                : ''
+            }
+          />
+        </OverviewTableContainer>
+      </EuiFlexItem>
+    </EuiFlexGroup>
   );
 }
diff --git a/x-pack/plugins/apm/public/components/shared/dependencies_table/index.tsx b/x-pack/plugins/apm/public/components/shared/dependencies_table/index.tsx
index 7e31fe35acd29..2d68cb5e9dae7 100644
--- a/x-pack/plugins/apm/public/components/shared/dependencies_table/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/dependencies_table/index.tsx
@@ -205,39 +205,41 @@ export function DependenciesTable(props: Props) {
   );
 
   return (
-    <div data-test-subj="dependenciesTable">
-      <EuiFlexGroup direction="column" gutterSize="s">
-        <EuiFlexItem>
-          <EuiFlexGroup responsive={false} justifyContent="spaceBetween">
-            <EuiFlexItem grow={false}>
-              <EuiTitle size="xs">
-                <h2>{title}</h2>
-              </EuiTitle>
-            </EuiFlexItem>
-            {link && <EuiFlexItem grow={false}>{link}</EuiFlexItem>}
-          </EuiFlexGroup>
-        </EuiFlexItem>
-        <EuiFlexItem>
-          <OverviewTableContainer
-            fixedHeight={fixedHeight}
-            isEmptyAndNotInitiated={
-              items.length === 0 && status === FETCH_STATUS.NOT_INITIATED
-            }
-          >
-            <ManagedTable
-              isLoading={status === FETCH_STATUS.LOADING}
-              error={status === FETCH_STATUS.FAILURE}
-              columns={columns}
-              items={items}
-              noItemsMessage={noItemsMessage}
-              initialSortField="impactValue"
-              initialSortDirection="desc"
-              pagination={true}
-              hidePerPageOptions={hidePerPageOptions}
-            />
-          </OverviewTableContainer>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </div>
+    <EuiFlexGroup
+      direction="column"
+      gutterSize="s"
+      data-test-subj="dependenciesTable"
+    >
+      <EuiFlexItem>
+        <EuiFlexGroup responsive={false} justifyContent="spaceBetween">
+          <EuiFlexItem grow={false}>
+            <EuiTitle size="xs">
+              <h2>{title}</h2>
+            </EuiTitle>
+          </EuiFlexItem>
+          {link && <EuiFlexItem grow={false}>{link}</EuiFlexItem>}
+        </EuiFlexGroup>
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <OverviewTableContainer
+          fixedHeight={fixedHeight}
+          isEmptyAndNotInitiated={
+            items.length === 0 && status === FETCH_STATUS.NOT_INITIATED
+          }
+        >
+          <ManagedTable
+            isLoading={status === FETCH_STATUS.LOADING}
+            error={status === FETCH_STATUS.FAILURE}
+            columns={columns}
+            items={items}
+            noItemsMessage={noItemsMessage}
+            initialSortField="impactValue"
+            initialSortDirection="desc"
+            pagination={true}
+            hidePerPageOptions={hidePerPageOptions}
+          />
+        </OverviewTableContainer>
+      </EuiFlexItem>
+    </EuiFlexGroup>
   );
 }
diff --git a/x-pack/plugins/apm/public/components/shared/transactions_table/index.tsx b/x-pack/plugins/apm/public/components/shared/transactions_table/index.tsx
index 420763bbc9e96..4c1063173d929 100644
--- a/x-pack/plugins/apm/public/components/shared/transactions_table/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/transactions_table/index.tsx
@@ -229,103 +229,105 @@ export function TransactionsTable({
   const isNotInitiated = status === FETCH_STATUS.NOT_INITIATED;
 
   return (
-    <div data-test-subj="transactionsGroupTable">
-      <EuiFlexGroup direction="column" gutterSize="s">
-        <EuiFlexItem>
-          <EuiFlexGroup justifyContent="spaceBetween" responsive={false}>
+    <EuiFlexGroup
+      direction="column"
+      gutterSize="s"
+      data-test-subj="transactionsGroupTable"
+    >
+      <EuiFlexItem>
+        <EuiFlexGroup justifyContent="spaceBetween" responsive={false}>
+          <EuiFlexItem grow={false}>
+            <EuiTitle size="xs">
+              <h2>
+                {i18n.translate('xpack.apm.transactionsTable.title', {
+                  defaultMessage: 'Transactions',
+                })}
+              </h2>
+            </EuiTitle>
+          </EuiFlexItem>
+          {!hideViewTransactionsLink && (
             <EuiFlexItem grow={false}>
-              <EuiTitle size="xs">
-                <h2>
-                  {i18n.translate('xpack.apm.transactionsTable.title', {
-                    defaultMessage: 'Transactions',
-                  })}
-                </h2>
-              </EuiTitle>
+              <TransactionOverviewLink
+                serviceName={serviceName}
+                latencyAggregationType={latencyAggregationType}
+                transactionType={transactionType}
+              >
+                {i18n.translate('xpack.apm.transactionsTable.linkText', {
+                  defaultMessage: 'View transactions',
+                })}
+              </TransactionOverviewLink>
             </EuiFlexItem>
-            {!hideViewTransactionsLink && (
-              <EuiFlexItem grow={false}>
-                <TransactionOverviewLink
-                  serviceName={serviceName}
-                  latencyAggregationType={latencyAggregationType}
-                  transactionType={transactionType}
-                >
-                  {i18n.translate('xpack.apm.transactionsTable.linkText', {
-                    defaultMessage: 'View transactions',
-                  })}
-                </TransactionOverviewLink>
-              </EuiFlexItem>
+          )}
+        </EuiFlexGroup>
+      </EuiFlexItem>
+      {showAggregationAccurateCallout && !isAggregationAccurate && (
+        <EuiFlexItem>
+          <EuiCallOut
+            title={i18n.translate(
+              'xpack.apm.transactionsTable.cardinalityWarning.title',
+              {
+                defaultMessage:
+                  'This view shows a subset of reported transactions.',
+              }
             )}
-          </EuiFlexGroup>
-        </EuiFlexItem>
-        {showAggregationAccurateCallout && !isAggregationAccurate && (
-          <EuiFlexItem>
-            <EuiCallOut
-              title={i18n.translate(
-                'xpack.apm.transactionsTable.cardinalityWarning.title',
-                {
-                  defaultMessage:
-                    'This view shows a subset of reported transactions.',
-                }
-              )}
-              color="danger"
-              iconType="alert"
-            >
-              <p>
-                <FormattedMessage
-                  id="xpack.apm.transactionsTable.cardinalityWarning.body"
-                  defaultMessage="The number of unique transaction names exceeds the configured value of {bucketSize}. Try reconfiguring your agents to group similar transactions or increase the value of {codeBlock}"
-                  values={{
-                    bucketSize,
-                    codeBlock: (
-                      <EuiCode>xpack.apm.ui.transactionGroupBucketSize</EuiCode>
-                    ),
-                  }}
-                />
+            color="danger"
+            iconType="alert"
+          >
+            <p>
+              <FormattedMessage
+                id="xpack.apm.transactionsTable.cardinalityWarning.body"
+                defaultMessage="The number of unique transaction names exceeds the configured value of {bucketSize}. Try reconfiguring your agents to group similar transactions or increase the value of {codeBlock}"
+                values={{
+                  bucketSize,
+                  codeBlock: (
+                    <EuiCode>xpack.apm.ui.transactionGroupBucketSize</EuiCode>
+                  ),
+                }}
+              />
 
-                <ElasticDocsLink
-                  section="/kibana"
-                  path="/troubleshooting.html#troubleshooting-too-many-transactions"
-                >
-                  {i18n.translate(
-                    'xpack.apm.transactionsTable.cardinalityWarning.docsLink',
-                    { defaultMessage: 'Learn more in the docs' }
-                  )}
-                </ElasticDocsLink>
-              </p>
-            </EuiCallOut>
-          </EuiFlexItem>
-        )}
+              <ElasticDocsLink
+                section="/kibana"
+                path="/troubleshooting.html#troubleshooting-too-many-transactions"
+              >
+                {i18n.translate(
+                  'xpack.apm.transactionsTable.cardinalityWarning.docsLink',
+                  { defaultMessage: 'Learn more in the docs' }
+                )}
+              </ElasticDocsLink>
+            </p>
+          </EuiCallOut>
+        </EuiFlexItem>
+      )}
+      <EuiFlexItem>
         <EuiFlexItem>
-          <EuiFlexItem>
-            <OverviewTableContainer
-              fixedHeight={fixedHeight}
-              isEmptyAndNotInitiated={
-                transactionGroupsTotalItems === 0 && isNotInitiated
+          <OverviewTableContainer
+            fixedHeight={fixedHeight}
+            isEmptyAndNotInitiated={
+              transactionGroupsTotalItems === 0 && isNotInitiated
+            }
+          >
+            <ManagedTable
+              isLoading={isLoading}
+              error={status === FETCH_STATUS.FAILURE}
+              columns={columns}
+              items={transactionGroups}
+              initialSortField="impact"
+              initialSortDirection="desc"
+              initialPageSize={numberOfTransactionsPerPage}
+              noItemsMessage={
+                isLoading
+                  ? i18n.translate('xpack.apm.transactionsTable.loading', {
+                      defaultMessage: 'Loading...',
+                    })
+                  : i18n.translate('xpack.apm.transactionsTable.noResults', {
+                      defaultMessage: 'No transaction groups found',
+                    })
               }
-            >
-              <ManagedTable
-                isLoading={isLoading}
-                error={status === FETCH_STATUS.FAILURE}
-                columns={columns}
-                items={transactionGroups}
-                initialSortField="impact"
-                initialSortDirection="desc"
-                initialPageSize={numberOfTransactionsPerPage}
-                noItemsMessage={
-                  isLoading
-                    ? i18n.translate('xpack.apm.transactionsTable.loading', {
-                        defaultMessage: 'Loading...',
-                      })
-                    : i18n.translate('xpack.apm.transactionsTable.noResults', {
-                        defaultMessage: 'No transaction groups found',
-                      })
-                }
-                hidePerPageOptions={hidePerPageOptions}
-              />
-            </OverviewTableContainer>
-          </EuiFlexItem>
+              hidePerPageOptions={hidePerPageOptions}
+            />
+          </OverviewTableContainer>
         </EuiFlexItem>
-      </EuiFlexGroup>
-    </div>
+      </EuiFlexItem>
+    </EuiFlexGroup>
   );
 }

From 2bbbd1b7ce58fd2a405a7af2c285de3432956338 Mon Sep 17 00:00:00 2001
From: "miriam.aparicio" <miriam.aparicio@gmail.com>
Date: Mon, 14 Feb 2022 14:27:26 +0000
Subject: [PATCH 4/4] improve time range test

---
 .../service_overview/service_overview.spec.ts             | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/service_overview/service_overview.spec.ts b/x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/service_overview/service_overview.spec.ts
index 3bbc69b31a98f..31586651cbb84 100644
--- a/x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/service_overview/service_overview.spec.ts
+++ b/x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/service_overview/service_overview.spec.ts
@@ -238,10 +238,12 @@ describe('Service Overview', () => {
         'Oct 10, 2021 @ 01:30:00.000'
       );
       cy.contains('Update').click();
-      cy.wait(aliasNames, { requestTimeout: 10000 });
 
-      cy.contains('Refresh').click();
-      cy.wait(aliasNames, { requestTimeout: 10000 });
+      cy.expectAPIsToHaveBeenCalledWith({
+        apisIntercepted: aliasNames,
+        value:
+          'start=2021-10-10T00%3A00%3A00.000Z&end=2021-10-10T00%3A30%3A00.000Z',
+      });
     });
 
     it('when selecting a different comparison window', () => {