[8.9] [APM] Fix transaction action menu for trace explorer and depend…

…ency operations (#162213) (#162260) # Backport This will backport the following commits from `main` to `8.9`: - [[APM] Fix transaction action menu for trace explorer and dependency operations (#162213)](#162213)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)
elastic · Jul 20, 2023 · 7c5bbe6 · 7c5bbe6
1 parent f04aab7
commit 7c5bbe6
Show file tree

Hide file tree

Showing 6 changed files with 177 additions and 7 deletions.
diff --git a/...ns/apm/ftr_e2e/cypress/e2e/read_only_user/dependency_operation/dependency_operation.cy.ts b/...ns/apm/ftr_e2e/cypress/e2e/read_only_user/dependency_operation/dependency_operation.cy.ts
@@ -0,0 +1,49 @@
+/*
+ * 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 { opbeans } from '../../../fixtures/synthtrace/opbeans';
+
+const start = '2021-10-10T00:00:00.000Z';
+const end = '2021-10-10T00:15:00.000Z';
+
+const dependencyOperationHref = url.format({
+  pathname: '/app/apm/dependencies/operation',
+  query: {
+    dependencyName: 'postgresql',
+    spanName: 'SELECT * FROM product',
+    environment: 'ENVIRONMENT_ALL',
+    rangeFrom: start,
+    rangeTo: end,
+  },
+});
+
+describe('Dependency operation', () => {
+  before(() => {
+    synthtrace.index(
+      opbeans({
+        from: new Date(start).getTime(),
+        to: new Date(end).getTime(),
+      })
+    );
+  });
+
+  after(() => {
+    synthtrace.clean();
+  });
+
+  beforeEach(() => {
+    cy.loginAsViewerUser();
+  });
+
+  it('opens the action menu popup when clicking the investigate button', () => {
+    cy.visitKibana(dependencyOperationHref);
+    cy.getByTestSubj('apmActionMenuButtonInvestigateButton').click();
+    cy.getByTestSubj('apmActionMenuInvestigateButtonPopup');
+  });
+});
diff --git a/...ck/plugins/apm/ftr_e2e/cypress/e2e/read_only_user/mobile/mobile_transaction_details.cy.ts b/...ck/plugins/apm/ftr_e2e/cypress/e2e/read_only_user/mobile/mobile_transaction_details.cy.ts
@@ -0,0 +1,47 @@
+/*
+ * 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 { generateMobileData } from './generate_data';
+
+const start = '2021-10-10T00:00:00.000Z';
+const end = '2021-10-10T00:15:00.000Z';
+
+const mobileTransactionDetailsPageHref = url.format({
+  pathname: '/app/apm/mobile-services/synth-android/transactions/view',
+  query: {
+    rangeFrom: start,
+    rangeTo: end,
+    transactionName: 'Start View - View Appearing',
+  },
+});
+
+describe('Mobile transaction details page', () => {
+  before(() => {
+    synthtrace.index(
+      generateMobileData({
+        from: new Date(start).getTime(),
+        to: new Date(end).getTime(),
+      })
+    );
+  });
+
+  beforeEach(() => {
+    cy.loginAsViewerUser();
+  });
+
+  after(() => {
+    synthtrace.clean();
+  });
+
+  it('opens the action menu popup when clicking the investigate button', () => {
+    cy.visitKibana(mobileTransactionDetailsPageHref);
+    cy.getByTestSubj('apmActionMenuButtonInvestigateButton').click();
+    cy.getByTestSubj('apmActionMenuInvestigateButtonPopup');
+  });
+});
diff --git a/x-pack/plugins/apm/ftr_e2e/cypress/e2e/read_only_user/trace_explorer/trace_explorer.cy.ts b/x-pack/plugins/apm/ftr_e2e/cypress/e2e/read_only_user/trace_explorer/trace_explorer.cy.ts
@@ -0,0 +1,51 @@
+/*
+ * 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 { opbeans } from '../../../fixtures/synthtrace/opbeans';
+
+const start = '2021-10-10T00:00:00.000Z';
+const end = '2021-10-10T00:15:00.000Z';
+
+const traceExplorerHref = url.format({
+  pathname: '/app/apm/traces/explorer',
+  query: {
+    environment: 'ENVIRONMENT_ALL',
+    rangeFrom: start,
+    rangeTo: end,
+  },
+});
+
+describe('Trace Explorer', () => {
+  before(() => {
+    synthtrace.index(
+      opbeans({
+        from: new Date(start).getTime(),
+        to: new Date(end).getTime(),
+      })
+    );
+
+    cy.updateAdvancedSettings({
+      'observability:apmTraceExplorerTab': true,
+    });
+  });
+
+  after(() => {
+    synthtrace.clean();
+  });
+
+  beforeEach(() => {
+    cy.loginAsViewerUser();
+  });
+
+  it('opens the action menu popup when clicking the investigate button', () => {
+    cy.visitKibana(traceExplorerHref);
+    cy.getByTestSubj('apmActionMenuButtonInvestigateButton').click();
+    cy.getByTestSubj('apmActionMenuInvestigateButtonPopup');
+  });
+});
diff --git a/x-pack/plugins/apm/public/components/shared/transaction_action_menu/sections.test.ts b/x-pack/plugins/apm/public/components/shared/transaction_action_menu/sections.test.ts
@@ -62,6 +62,9 @@ describe('Transaction action menu', () => {
         apmRouter,
         infraLocators,
         infraLinksAvailable: false,
+        rangeFrom: 'now-24h',
+        rangeTo: 'now',
+        environment: 'ENVIRONMENT_ALL',
       })
     ).toEqual([
       [
@@ -124,6 +127,9 @@ describe('Transaction action menu', () => {
         apmRouter,
         infraLocators,
         infraLinksAvailable: true,
+        rangeFrom: 'now-24h',
+        rangeTo: 'now',
+        environment: 'ENVIRONMENT_ALL',
       })
     ).toEqual([
       [
@@ -205,6 +211,9 @@ describe('Transaction action menu', () => {
         apmRouter,
         infraLocators,
         infraLinksAvailable: true,
+        rangeFrom: 'now-24h',
+        rangeTo: 'now',
+        environment: 'ENVIRONMENT_ALL',
       })
     ).toEqual([
       [

diff --git a/x-pack/plugins/apm/public/components/shared/transaction_action_menu/sections.ts b/x-pack/plugins/apm/public/components/shared/transaction_action_menu/sections.ts
@@ -12,6 +12,7 @@ import { isEmpty, pickBy } from 'lodash';
 import moment from 'moment';
 import url from 'url';
 import type { InfraLocators } from '@kbn/infra-plugin/common/locators';
+import { Environment } from '../../../../common/environment_rt';
 import type { Transaction } from '../../../../typings/es_schemas/ui/transaction';
 import { getDiscoverHref } from '../links/discover_links/discover_link';
 import { getDiscoverQuery } from '../links/discover_links/discover_transaction_link';
@@ -38,13 +39,19 @@ export const getSections = ({
   apmRouter,
   infraLocators,
   infraLinksAvailable,
+  rangeFrom,
+  rangeTo,
+  environment,
 }: {
   transaction?: Transaction;
   basePath: IBasePath;
   location: Location;
   apmRouter: ApmRouter;
   infraLocators: InfraLocators;
   infraLinksAvailable: boolean;
+  rangeFrom: string;
+  rangeTo: string;
+  environment: Environment;
 }) => {
   if (!transaction) return [];
   const hostName = transaction.host?.hostname;
@@ -55,12 +62,6 @@ export const getSections = ({
   const time = Math.round(transaction.timestamp.us / 1000);
   const infraMetricsQuery = getInfraMetricsQuery(transaction);
 
-  const routeParams = apmRouter.getParams(
-    '/services/{serviceName}/transactions/view',
-    location
-  );
-  const { rangeFrom, rangeTo, environment } = routeParams.query;
-
   const uptimeLink = url.format({
     pathname: basePath.prepend('/app/uptime'),
     search: `?${fromQuery(

diff --git a/.../plugins/apm/public/components/shared/transaction_action_menu/transaction_action_menu.tsx b/.../plugins/apm/public/components/shared/transaction_action_menu/transaction_action_menu.tsx
@@ -21,6 +21,7 @@ import { getContextMenuItemsFromActions } from '@kbn/observability-shared-plugin
 import React, { useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import useAsync from 'react-use/lib/useAsync';
+import { useAnyOfApmParams } from '../../../hooks/use_apm_params';
 import { ApmFeatureFlagName } from '../../../../common/apm_feature_flags';
 import { Transaction } from '../../../../typings/es_schemas/ui/transaction';
 import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context';
@@ -101,13 +102,25 @@ function ActionMenuSections({ transaction }: { transaction?: Transaction }) {
     ApmFeatureFlagName.InfraUiAvailable
   );
 
+  const {
+    query: { rangeFrom, rangeTo, environment },
+  } = useAnyOfApmParams(
+    '/services/{serviceName}/transactions/view',
+    '/mobile-services/{serviceName}/transactions/view',
+    '/traces/explorer/waterfall',
+    '/dependencies/operation'
+  );
+
   const sections = getSections({
     transaction,
     basePath: core.http.basePath,
     location,
     apmRouter,
     infraLocators: locators,
     infraLinksAvailable,
+    rangeFrom,
+    rangeTo,
+    environment,
   });
 
   const externalMenuItems = useAsync(() => {
@@ -138,7 +151,7 @@ function ActionMenuSections({ transaction }: { transaction?: Transaction }) {
   }
 
   return (
-    <div>
+    <div data-test-subj="apmActionMenuInvestigateButtonPopup">
       {sections.map((section, idx) => {
         const isLastSection = idx !== sections.length - 1;
         return (