[8.1] Service overview e2e test (#125359)

x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/service_overview/service_overview.spec.ts

@@ -18,6 +18,71 @@ const baseUrl = url.format({
   query: { rangeFrom: start, rangeTo: end },
 });
 
+const apiRequestsToIntercept = [
+  {
+    endpoint:
+      '/internal/apm/services/opbeans-node/transactions/groups/main_statistics?*',
+    aliasName: 'transactionsGroupsMainStadisticsRequest',
+  },
+  {
+    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',
+  },
+];
+
+const apiRequestsToInterceptWithComparison = [
+  {
+    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/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?*',
+    aliasName: 'instancesDetailedStadisticsRequest',
+  },
+];
+
+const aliasNamesNoComparison = apiRequestsToIntercept.map(
+  ({ aliasName }) => `@${aliasName}`
+);
+
+const aliasNamesWithComparison = apiRequestsToInterceptWithComparison.map(
+  ({ aliasName }) => `@${aliasName}`
+);
+
+const aliasNames = [...aliasNamesNoComparison, ...aliasNamesWithComparison];
+
 describe('Service Overview', () => {
   before(async () => {
     await synthtrace.index(
@@ -32,66 +97,167 @@ describe('Service Overview', () => {
     await synthtrace.clean();
   });
 
-  beforeEach(() => {
-    cy.loginAsReadOnlyUser();
+  describe('renders', () => {
+    before(() => {
+      cy.loginAsReadOnlyUser();
+      cy.visit(baseUrl);
+    });
+    it('transaction latency chart', () => {
+      cy.get('[data-test-subj="latencyChart"]');
+    });
+
+    it('throughput chart', () => {
+      cy.get('[data-test-subj="throughput"]');
+    });
+
+    it('transactions group table', () => {
+      cy.get('[data-test-subj="transactionsGroupTable"]');
+    });
+
+    it('error table', () => {
+      cy.get('[data-test-subj="serviceOverviewErrorsTable"]');
+    });
+
+    it('dependencies table', () => {
+      cy.get('[data-test-subj="dependenciesTable"]');
+    });
+
+    it('instances latency distribution chart', () => {
+      cy.get('[data-test-subj="instancesLatencyDistribution"]');
+    });
+
+    it('instances table', () => {
+      cy.get('[data-test-subj="serviceOverviewInstancesTable"]');
+    });
   });
 
-  it('persists transaction type selected when clicking on Transactions tab', () => {
-    cy.visit(baseUrl);
-    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('transactions', () => {
+    beforeEach(() => {
+      cy.loginAsReadOnlyUser();
+      cy.visit(baseUrl);
+    });
+
+    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'
+      );
+
+      cy.contains('View transactions').click();
+      cy.get('[data-test-subj="headerFilterTransactionType"]').should(
+        'have.value',
+        'Worker'
+      );
+    });
   });
 
-  it('persists transaction type selected when clicking on View Transactions link', () => {
-    cy.visit(baseUrl);
-    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'
-    );
+  describe('when RUM service', () => {
+    before(() => {
+      cy.loginAsReadOnlyUser();
+      cy.visit(
+        url.format({
+          pathname: '/app/apm/services/opbeans-rum/overview',
+          query: { rangeFrom: start, rangeTo: end },
+        })
+      );
+    });
 
-    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.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');
+        });
+      });
+    });
   });
 
-  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('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', () => {
+      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.contains('Refresh').click();
+      cy.wait(aliasNames, { requestTimeout: 10000 });
+    });
+
+    it('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.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', () => {
+      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.expectAPIsToHaveBeenCalledWith({
+        apisIntercepted: aliasNamesWithComparison,
+        value: 'comparisonStart',
       });
     });
   });

x-pack/plugins/apm/public/components/app/service_overview/service_overview_errors_table/index.tsx

@@ -180,7 +180,11 @@ export function ServiceOverviewErrorsTable({ serviceName }: Props) {
   });
 
   return (
-    <EuiFlexGroup direction="column" gutterSize="s">
+    <EuiFlexGroup
+      direction="column"
+      gutterSize="s"
+      data-test-subj="serviceOverviewErrorsTable"
+    >
       <EuiFlexItem>
         <EuiFlexGroup responsive={false} justifyContent="spaceBetween">
           <EuiFlexItem grow={false}>

x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/index.tsx

@@ -145,7 +145,11 @@ export function ServiceOverviewInstancesTable({
   };
 
   return (
-    <EuiFlexGroup direction="column" gutterSize="s">
+    <EuiFlexGroup
+      direction="column"
+      gutterSize="s"
+      data-test-subj="serviceOverviewInstancesTable"
+    >
       <EuiFlexItem>
         <EuiTitle size="xs">
           <h2>

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}

x-pack/plugins/apm/public/components/shared/dependencies_table/index.tsx

@@ -205,7 +205,11 @@ export function DependenciesTable(props: Props) {
   );
 
   return (
-    <EuiFlexGroup direction="column" gutterSize="s">
+    <EuiFlexGroup
+      direction="column"
+      gutterSize="s"
+      data-test-subj="dependenciesTable"
+    >
       <EuiFlexItem>
         <EuiFlexGroup responsive={false} justifyContent="spaceBetween">
           <EuiFlexItem grow={false}>

x-pack/plugins/apm/public/components/shared/transactions_table/index.tsx

@@ -229,7 +229,11 @@ export function TransactionsTable({
   const isNotInitiated = status === FETCH_STATUS.NOT_INITIATED;
 
   return (
-    <EuiFlexGroup direction="column" gutterSize="s">
+    <EuiFlexGroup
+      direction="column"
+      gutterSize="s"
+      data-test-subj="transactionsGroupTable"
+    >
       <EuiFlexItem>
         <EuiFlexGroup justifyContent="spaceBetween" responsive={false}>
           <EuiFlexItem grow={false}>