[APM] Fix transaction action menu for trace explorer and dependency operations

x-pack/plugins/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');
+  });
+});

x-pack/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');
+  });
+});

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');
+  });
+});

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([
       [

x-pack/plugins/apm/public/components/shared/transaction_action_menu/sections.ts

@@ -13,6 +13,7 @@ import moment from 'moment';
 import url from 'url';
 import type { InfraLocators } from '@kbn/infra-plugin/common/locators';
 import type { ProfilingLocators } from '@kbn/profiling-plugin/public';
+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';
@@ -40,6 +41,9 @@ export const getSections = ({
   infraLocators,
   infraLinksAvailable,
   profilingLocators,
+  rangeFrom,
+  rangeTo,
+  environment,
 }: {
   transaction?: Transaction;
   basePath: IBasePath;
@@ -48,6 +52,9 @@ export const getSections = ({
   infraLocators: InfraLocators;
   infraLinksAvailable: boolean;
   profilingLocators?: ProfilingLocators;
+  rangeFrom: string;
+  rangeTo: string;
+  environment: Environment;
 }) => {
   if (!transaction) return [];
   const hostName = transaction.host?.hostname;
@@ -58,12 +65,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(

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

@@ -22,6 +22,7 @@ import { ProfilingLocators } from '@kbn/profiling-plugin/public';
 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';
@@ -115,6 +116,15 @@ function ActionMenuSections({
     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,
@@ -123,6 +133,9 @@ function ActionMenuSections({
     infraLocators: locators,
     infraLinksAvailable,
     profilingLocators,
+    rangeFrom,
+    rangeTo,
+    environment,
   });
 
   const externalMenuItems = useAsync(() => {
@@ -153,7 +166,7 @@ function ActionMenuSections({
   }
 
   return (
-    <div>
+    <div data-test-subj="apmActionMenuInvestigateButtonPopup">
       {sections.map((section, idx) => {
         const isLastSection = idx !== sections.length - 1;
         return (