Add e2e test for error details page (#117982)

* Add e2e test for error details page

* fixes after PR review

* fix test with absolute time rage instead of relative

* skip failing test

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

@@ -0,0 +1,90 @@
+/*
+ * 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 url from 'url';
+import { synthtrace } from '../../../../synthtrace';
+import { generateData } from './generate_data';
+
+const start = '2021-10-10T00:00:00.000Z';
+const end = '2021-10-10T00:15:00.000Z';
+const errorDetailsPageHref = url.format({
+  pathname:
+    '/app/apm/services/opbeans-java/errors/0000000000000000000000000Error%201',
+  query: {
+    rangeFrom: start,
+    rangeTo: end,
+  },
+});
+
+describe('Error details', () => {
+  beforeEach(() => {
+    cy.loginAsReadOnlyUser();
+  });
+
+  describe('when data is loaded', () => {
+    before(async () => {
+      await synthtrace.index(
+        generateData({
+          from: new Date(start).getTime(),
+          to: new Date(end).getTime(),
+        })
+      );
+    });
+
+    after(async () => {
+      await synthtrace.clean();
+    });
+
+    describe('when error has no occurrences', () => {
+      it('shows empty an message', () => {
+        cy.visit(
+          url.format({
+            pathname:
+              '/app/apm/services/opbeans-java/errors/0000000000000000000000000Error%201',
+            query: {
+              rangeFrom: start,
+              rangeTo: end,
+              kuery: 'service.name: "opbeans-node"',
+            },
+          })
+        );
+        cy.contains('No data to display');
+      });
+    });
+
+    describe('when error has data', () => {
+      it('shows errors distribution chart', () => {
+        cy.visit(errorDetailsPageHref);
+        cy.contains('Error group 00000');
+        cy.get('[data-test-subj="errorDistribution"]').contains('Occurrences');
+      });
+
+      it('shows a Stacktrace and Metadata tabs', () => {
+        cy.visit(errorDetailsPageHref);
+        cy.contains('button', 'Exception stack trace');
+        cy.contains('button', 'Metadata');
+      });
+
+      describe('when clicking on related transaction sample', () => {
+        it('should redirects to the transaction details page', () => {
+          cy.visit(errorDetailsPageHref);
+          cy.contains('Error group 00000');
+          cy.contains('a', 'GET /apple 🍎').click();
+          cy.url().should('include', 'opbeans-java/transactions/view');
+        });
+      });
+
+      describe('when clicking on View x occurences in discover', () => {
+        it('should redirects the user to discover', () => {
+          cy.visit(errorDetailsPageHref);
+          cy.contains('span', 'Discover').click();
+          cy.url().should('include', 'app/discover');
+        });
+      });
+    });
+  });
+});

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

@@ -93,11 +93,14 @@ describe('When navigating to the service inventory', () => {
       cy.wait(aliasNames);
     });
 
-    // FAILING, @caue.marcondes will be fixing soon
-    it.skip('when selecting a different time range and clicking the refresh button', () => {
+    it.skip('when selecting a different time range and clicking the update button', () => {
       cy.wait(aliasNames);
 
-      cy.changeTimeRange('Last 30 days');
+      cy.selectAbsoluteTimeRange(
+        'Oct 10, 2021 @ 01:00:00.000',
+        'Oct 10, 2021 @ 01:30:00.000'
+      );
+      cy.contains('Update').click();
       cy.wait(aliasNames);
 
       cy.contains('Refresh').click();

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

@@ -42,6 +42,22 @@ Cypress.Commands.add('changeTimeRange', (value: string) => {
   cy.contains(value).click();
 });
 
+Cypress.Commands.add(
+  'selectAbsoluteTimeRange',
+  (start: string, end: string) => {
+    cy.get('[data-test-subj="superDatePickerstartDatePopoverButton"]').click();
+    cy.get('[data-test-subj="superDatePickerAbsoluteDateInput"]')
+      .eq(0)
+      .clear()
+      .type(start, { force: true });
+    cy.get('[data-test-subj="superDatePickerendDatePopoverButton"]').click();
+    cy.get('[data-test-subj="superDatePickerAbsoluteDateInput"]')
+      .eq(1)
+      .clear()
+      .type(end, { force: true });
+  }
+);
+
 Cypress.Commands.add(
   'expectAPIsToHaveBeenCalledWith',
   ({

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

@@ -11,6 +11,7 @@ declare namespace Cypress {
     loginAsPowerUser(): void;
     loginAs(params: { username: string; password: string }): void;
     changeTimeRange(value: string): void;
+    selectAbsoluteTimeRange(start: string, end: string): void;
     expectAPIsToHaveBeenCalledWith(params: {
       apisIntercepted: string[];
       value: string;

x-pack/plugins/apm/public/components/app/error_group_details/Distribution/index.tsx

@@ -56,7 +56,7 @@ export function ErrorDistribution({ distribution, title, fetchStatus }: Props) {
       data: distribution.currentPeriod,
       color: theme.eui.euiColorVis1,
       title: i18n.translate('xpack.apm.errorGroup.chart.ocurrences', {
-        defaultMessage: 'Occurences',
+        defaultMessage: 'Occurrences',
       }),
     },
     ...(comparisonEnabled

x-pack/plugins/apm/public/components/app/error_group_details/detail_view/index.tsx

@@ -72,12 +72,14 @@ export function DetailView({ errorGroup, urlParams, kuery }: Props) {
   const history = useHistory();
   const { transaction, error, occurrencesCount } = errorGroup;
 
+  const { detailTab, comparisonType, comparisonEnabled } = urlParams;
+
   if (!error) {
     return null;
   }
 
   const tabs = getTabs(error);
-  const currentTab = getCurrentTab(tabs, urlParams.detailTab) as ErrorTab;
+  const currentTab = getCurrentTab(tabs, detailTab) as ErrorTab;
 
   const errorUrl = error.error.page?.url || error.url?.full;
 
@@ -139,6 +141,8 @@ export function DetailView({ errorGroup, urlParams, kuery }: Props) {
                 transactionName={transaction.transaction.name}
                 transactionType={transaction.transaction.type}
                 serviceName={transaction.service.name}
+                comparisonType={comparisonType}
+                comparisonEnabled={comparisonEnabled}
               >
                 <EuiIcon type="merge" />
                 <TransactionLinkName>

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

@@ -26,6 +26,7 @@ import { useApmRouter } from '../../../hooks/use_apm_router';
 import { useErrorGroupDistributionFetcher } from '../../../hooks/use_error_group_distribution_fetcher';
 import { useFetcher } from '../../../hooks/use_fetcher';
 import { useTimeRange } from '../../../hooks/use_time_range';
+import type { APIReturnType } from '../../../services/rest/createCallApmApi';
 import { DetailView } from './detail_view';
 import { ErrorDistribution } from './Distribution';
 
@@ -50,6 +51,15 @@ const Culprit = euiStyled.div`
   font-family: ${({ theme }) => theme.eui.euiCodeFontFamily};
 `;
 
+type ErrorDistributionAPIResponse =
+  APIReturnType<'GET /internal/apm/services/{serviceName}/errors/distribution'>;
+
+const emptyState: ErrorDistributionAPIResponse = {
+  currentPeriod: [],
+  previousPeriod: [],
+  bucketSize: 0,
+};
+
 function getShortGroupId(errorGroupId?: string) {
   if (!errorGroupId) {
     return NOT_AVAILABLE_LABEL;
@@ -210,7 +220,7 @@ export function ErrorGroupDetails() {
         )}
         <ErrorDistribution
           fetchStatus={status}
-          distribution={errorDistributionData}
+          distribution={showDetails ? errorDistributionData : emptyState}
           title={i18n.translate(
             'xpack.apm.errorGroupDetails.occurrencesChartLabel',
             {