[APM] e2e tests

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

@@ -4,26 +4,45 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
+
 import url from 'url';
 import archives_metadata from '../../fixtures/es_archiver/archives_metadata';
 import { esArchiverLoad, esArchiverUnload } from '../../tasks/es_archiver';
+
 const { start, end } = archives_metadata['apm_8.0.0'];
 
+const servicesPath = '/app/apm/services';
+const baseUrl = url.format({
+  pathname: servicesPath,
+  query: { rangeFrom: start, rangeTo: end },
+});
+
 describe('Home page', () => {
   before(() => {
     esArchiverLoad('apm_8.0.0');
-    cy.loginAsReadOnlyUser();
   });
   after(() => {
     esArchiverUnload('apm_8.0.0');
   });
+  beforeEach(() => {
+    cy.loginAsReadOnlyUser();
+  });
   it('Redirects to service page with rangeFrom and rangeTo added to the URL', () => {
-    const baseUrl = url.format({
-      pathname: '/app/apm',
-      query: { rangeFrom: start, rangeTo: end },
-    });
+    cy.visit('/app/apm');
 
-    cy.visit(baseUrl);
+    cy.url().should(
+      'include',
+      'app/apm/services?rangeFrom=now-15m&rangeTo=now'
+    );
     cy.get('.euiTabs .euiTab-isSelected').contains('Services');
   });
+
+  it('includes services with only metric documents', () => {
+    cy.visit(
+      `${baseUrl}&kuery=not%2520(processor.event%2520%253A%2522transaction%2522%2520)`
+    );
+    cy.contains('opbeans-python');
+    cy.contains('opbeans-java');
+    cy.contains('opbeans-node');
+  });
 });

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

@@ -0,0 +1,146 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import { includes } from 'lodash';
+import url from 'url';
+import archives_metadata from '../../../fixtures/es_archiver/archives_metadata';
+import { esArchiverLoad, esArchiverUnload } from '../../../tasks/es_archiver';
+
+const { start, end } = archives_metadata['apm_8.0.0'];
+
+const serviceOverviewPath = '/app/apm/services/kibana/overview';
+const baseUrl = url.format({
+  pathname: serviceOverviewPath,
+  query: { rangeFrom: start, rangeTo: end },
+});
+
+const apisToIntercept = [
+  {
+    endpoint: '/api/apm/services/kibana/transactions/charts/latency',
+    as: 'latencyChartRequest',
+  },
+  {
+    endpoint: '/api/apm/services/kibana/throughput',
+    as: 'throughputChartRequest',
+  },
+  {
+    endpoint: '/api/apm/services/kibana/transactions/charts/error_rate',
+    as: 'errorRateChartRequest',
+  },
+  {
+    endpoint:
+      '/api/apm/services/kibana/transactions/groups/detailed_statistics',
+    as: 'transactionGroupsDetailedRequest',
+  },
+  {
+    endpoint:
+      '/api/apm/services/kibana/service_overview_instances/detailed_statistics',
+    as: 'instancesDetailedRequest',
+  },
+  {
+    endpoint:
+      '/api/apm/services/kibana/service_overview_instances/main_statistics',
+    as: 'instancesMainStatisticsRequest',
+  },
+  {
+    endpoint: '/api/apm/services/kibana/error_groups/main_statistics',
+    as: 'errorGroupsMainStatisticsRequest',
+  },
+  {
+    endpoint: '/api/apm/services/kibana/transaction/charts/breakdown',
+    as: 'transactonBreakdownRequest',
+  },
+  {
+    endpoint: '/api/apm/services/kibana/transactions/groups/main_statistics',
+    as: 'transactionsGroupsMainStatisticsRequest',
+  },
+];
+
+describe('Service overview - header filters', () => {
+  before(() => {
+    esArchiverLoad('apm_8.0.0');
+  });
+  after(() => {
+    esArchiverUnload('apm_8.0.0');
+  });
+  beforeEach(() => {
+    cy.loginAsReadOnlyUser();
+  });
+  describe('Filtering by transaction type', () => {
+    it('changes url when selecting different value', () => {
+      cy.visit(baseUrl);
+      cy.contains('Kibana');
+      cy.url().should('not.include', 'transactionType');
+      cy.get('[data-test-subj="headerFilterTransactionType"]').should(
+        'have.value',
+        'request'
+      );
+      cy.get('[data-test-subj="headerFilterTransactionType"]').select(
+        'taskManager'
+      );
+      cy.url().should('include', 'transactionType=taskManager');
+      cy.get('[data-test-subj="headerFilterTransactionType"]').should(
+        'have.value',
+        'taskManager'
+      );
+    });
+
+    it('calls APIs with correct transaction type', () => {
+      apisToIntercept.map(({ endpoint, as }) => {
+        cy.intercept('GET', endpoint).as(as);
+      });
+      cy.visit(baseUrl);
+      cy.contains('Kibana');
+      cy.get('[data-test-subj="headerFilterTransactionType"]').should(
+        'have.value',
+        'request'
+      );
+
+      cy.expectAPIsToHaveBeenCalledWith({
+        apisIntercepted: apisToIntercept.map(({ as }) => `@${as}`),
+        value: 'transactionType=request',
+      });
+
+      cy.get('[data-test-subj="headerFilterTransactionType"]').select(
+        'taskManager'
+      );
+      cy.url().should('include', 'transactionType=taskManager');
+      cy.get('[data-test-subj="headerFilterTransactionType"]').should(
+        'have.value',
+        'taskManager'
+      );
+      cy.expectAPIsToHaveBeenCalledWith({
+        apisIntercepted: apisToIntercept.map(({ as }) => `@${as}`),
+        value: 'transactionType=taskManager',
+      });
+    });
+  });
+
+  describe('Filtering by kuerybar', () => {
+    it('filters by transaction.name', () => {
+      cy.visit(
+        url.format({
+          pathname: '/app/apm/services/opbeans-java/overview',
+          query: { rangeFrom: start, rangeTo: end },
+        })
+      );
+      cy.contains('opbeans-java');
+      cy.get('[data-test-subj="headerFilterKuerybar"]').type('transaction.n');
+      cy.contains('transaction.name');
+      cy.get('[data-test-subj="suggestionContainer"]')
+        .find('li')
+        .first()
+        .click();
+      cy.get('[data-test-subj="headerFilterKuerybar"]').type(':');
+      cy.get('[data-test-subj="suggestionContainer"]')
+        .find('li')
+        .first()
+        .click();
+      cy.get('[data-test-subj="suggestionContainer"]').realPress('{enter}');
+      cy.url().should('include', '&kuery=transaction.name');
+    });
+  });
+});

x-pack/plugins/apm/ftr_e2e/cypress/support/commands.ts

@@ -39,3 +39,20 @@ Cypress.Commands.add('changeTimeRange', (value: string) => {
   cy.get('[data-test-subj="superDatePickerToggleQuickMenuButton"]').click();
   cy.contains(value).click();
 });
+
+Cypress.Commands.add(
+  'expectAPIsToHaveBeenCalledWith',
+  ({
+    apisIntercepted,
+    value,
+  }: {
+    apisIntercepted: string[];
+    value: string;
+  }) => {
+    cy.wait(apisIntercepted).then((interceptions) => {
+      interceptions.map((interception) => {
+        expect(interception.request.url).include(value);
+      });
+    });
+  }
+);

x-pack/plugins/apm/ftr_e2e/cypress/support/types.d.ts

@@ -11,5 +11,9 @@ declare namespace Cypress {
     loginAsSuperUser(): void;
     loginAs(params: { username: string; password: string }): void;
     changeTimeRange(value: string): void;
+    expectAPIsToHaveBeenCalledWith(params: {
+      apisIntercepted: string[];
+      value: string;
+    }): void;
   }
 }

x-pack/plugins/apm/public/components/shared/KueryBar/Typeahead/Suggestion.js

@@ -61,9 +61,9 @@ const ListItem = euiStyled.li`
   ${Description} {
     p span {
       background: ${({ selected, theme }) =>
-        selected
-          ? theme.eui.euiColorEmptyShade
-          : theme.eui.euiColorLightestShade};
+    selected
+      ? theme.eui.euiColorEmptyShade
+      : theme.eui.euiColorLightestShade};
     }
   }
 `;

x-pack/plugins/apm/public/components/shared/KueryBar/Typeahead/Suggestions.js

@@ -72,7 +72,12 @@ class Suggestions extends Component {
     });
 
     return (
-      <List innerRef={(node) => (this.parentNode = node)}>{suggestions}</List>
+      <List
+        data-test-subj="suggestionContainer"
+        innerRef={(node) => (this.parentNode = node)}
+      >
+        {suggestions}
+      </List>
     );
   }
 }

x-pack/plugins/apm/public/components/shared/KueryBar/Typeahead/index.js

@@ -172,6 +172,7 @@ export class Typeahead extends Component {
       >
         <div style={{ position: 'relative' }}>
           <EuiFieldSearch
+            data-test-subj="headerFilterKuerybar"
             fullWidth
             style={{
               backgroundImage: 'none',

x-pack/plugins/apm/public/components/shared/transaction_type_select.tsx

@@ -38,6 +38,7 @@ export function TransactionTypeSelect() {
   return (
     <>
       <EuiSelectWithWidth
+        data-test-subj="headerFilterTransactionType"
         onChange={handleChange}
         options={options}
         value={transactionType}