[APM] Explicitly set environment for cross-service links

x-pack/plugins/apm/common/environment_filter_values.ts

@@ -33,3 +33,13 @@ export const ENVIRONMENT_NOT_DEFINED = {
 export function getEnvironmentLabel(environment: string) {
   return environmentLabels[environment] || environment;
 }
+
+export function isEnvironmentEqualToQueryEnvironment(
+  environment?: string,
+  queryEnvironment?: string
+) {
+  const environmentToCheck = environment ?? ENVIRONMENT_NOT_DEFINED.value;
+  const queryEnvironmentToCheck = queryEnvironment ?? ENVIRONMENT_ALL.value;
+
+  return environmentToCheck === queryEnvironmentToCheck;
+}

x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/MaybeViewTraceLink.tsx

@@ -7,6 +7,11 @@
 import React from 'react';
 import { EuiButton, EuiFlexItem, EuiToolTip } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import {
+  ENVIRONMENT_ALL,
+  isEnvironmentEqualToQueryEnvironment,
+} from '../../../../../common/environment_filter_values';
+import { useUrlParams } from '../../../../context/url_params_context/use_url_params';
 import { Transaction as ITransaction } from '../../../../../typings/es_schemas/ui/transaction';
 import { TransactionDetailLink } from '../../../shared/Links/apm/TransactionDetailLink';
 import { IWaterfall } from './WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers';
@@ -18,6 +23,10 @@ export const MaybeViewTraceLink = ({
   transaction: ITransaction;
   waterfall: IWaterfall;
 }) => {
+  const {
+    urlParams: { environment },
+  } = useUrlParams();
+
   const viewFullTraceButtonLabel = i18n.translate(
     'xpack.apm.transactionDetails.viewFullTraceButtonLabel',
     {
@@ -69,6 +78,13 @@ export const MaybeViewTraceLink = ({
 
     // the user is viewing a zoomed in version of the trace. Link to the full trace
   } else {
+    const nextEnvironment = isEnvironmentEqualToQueryEnvironment(
+      rootTransaction?.service.environment,
+      environment
+    )
+      ? environment
+      : ENVIRONMENT_ALL.value;
+
     return (
       <EuiFlexItem grow={false}>
         <TransactionDetailLink
@@ -77,6 +93,7 @@ export const MaybeViewTraceLink = ({
           traceId={rootTransaction.trace.id}
           transactionName={rootTransaction.transaction.name}
           transactionType={rootTransaction.transaction.type}
+          environment={nextEnvironment}
         >
           <EuiButton iconType="apmTrace">{viewFullTraceButtonLabel}</EuiButton>
         </TransactionDetailLink>

x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/FlyoutTopLevelProperties.tsx

@@ -6,6 +6,11 @@
 
 import { i18n } from '@kbn/i18n';
 import React from 'react';
+import { useUrlParams } from '../../../../../../context/url_params_context/use_url_params';
+import {
+  ENVIRONMENT_ALL,
+  isEnvironmentEqualToQueryEnvironment,
+} from '../../../../../../../common/environment_filter_values';
 import {
   SERVICE_NAME,
   TRANSACTION_NAME,
@@ -20,10 +25,21 @@ interface Props {
 }
 
 export function FlyoutTopLevelProperties({ transaction }: Props) {
+  const {
+    urlParams: { environment },
+  } = useUrlParams();
+
   if (!transaction) {
     return null;
   }
 
+  const nextEnvironment = isEnvironmentEqualToQueryEnvironment(
+    transaction?.service.environment,
+    environment
+  )
+    ? environment
+    : ENVIRONMENT_ALL.value;
+
   const stickyProperties = [
     {
       label: i18n.translate('xpack.apm.transactionDetails.serviceLabel', {
@@ -33,6 +49,7 @@ export function FlyoutTopLevelProperties({ transaction }: Props) {
       val: (
         <ServiceOrTransactionsOverviewLink
           serviceName={transaction.service.name}
+          environment={nextEnvironment}
         >
           {transaction.service.name}
         </ServiceOrTransactionsOverviewLink>
@@ -51,6 +68,7 @@ export function FlyoutTopLevelProperties({ transaction }: Props) {
           traceId={transaction.trace.id}
           transactionName={transaction.transaction.name}
           transactionType={transaction.transaction.type}
+          environment={nextEnvironment}
         >
           {transaction.transaction.name}
         </TransactionDetailLink>

x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/StickySpanProperties.tsx

@@ -6,6 +6,11 @@
 
 import { i18n } from '@kbn/i18n';
 import React from 'react';
+import { useUrlParams } from '../../../../../../../context/url_params_context/use_url_params';
+import {
+  ENVIRONMENT_ALL,
+  isEnvironmentEqualToQueryEnvironment,
+} from '../../../../../../../../common/environment_filter_values';
 import { Transaction } from '../../../../../../../../typings/es_schemas/ui/transaction';
 import {
   SPAN_NAME,
@@ -24,6 +29,17 @@ interface Props {
 }
 
 export function StickySpanProperties({ span, transaction }: Props) {
+  const {
+    urlParams: { environment },
+  } = useUrlParams();
+
+  const nextEnvironment = isEnvironmentEqualToQueryEnvironment(
+    transaction?.service.environment,
+    environment
+  )
+    ? environment
+    : ENVIRONMENT_ALL.value;
+
   const spanName = span.span.name;
   const transactionStickyProperties = transaction
     ? [
@@ -35,6 +51,7 @@ export function StickySpanProperties({ span, transaction }: Props) {
           val: (
             <ServiceOrTransactionsOverviewLink
               serviceName={transaction.service.name}
+              environment={nextEnvironment}
             >
               {transaction.service.name}
             </ServiceOrTransactionsOverviewLink>
@@ -56,6 +73,7 @@ export function StickySpanProperties({ span, transaction }: Props) {
               traceId={transaction.trace.id}
               transactionName={transaction.transaction.name}
               transactionType={transaction.transaction.type}
+              environment={nextEnvironment}
             >
               {transaction.transaction.name}
             </TransactionDetailLink>

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

@@ -13,7 +13,10 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
-import { ENVIRONMENT_ALL } from '../../../../../common/environment_filter_values';
+import {
+  ENVIRONMENT_ALL,
+  isEnvironmentEqualToQueryEnvironment,
+} from '../../../../../common/environment_filter_values';
 import {
   asDuration,
   asPercent,
@@ -64,7 +67,17 @@ export function ServiceOverviewDependenciesTable({ serviceName }: Props) {
                 </EuiFlexItem>
                 <EuiFlexItem>
                   {item.type === 'service' ? (
-                    <ServiceOverviewLink serviceName={item.serviceName}>
+                    <ServiceOverviewLink
+                      serviceName={item.serviceName}
+                      environment={
+                        isEnvironmentEqualToQueryEnvironment(
+                          item.environment,
+                          environment
+                        )
+                          ? environment
+                          : ENVIRONMENT_ALL.value
+                      }
+                    >
                       {item.name}
                     </ServiceOverviewLink>
                   ) : (

x-pack/plugins/apm/public/components/shared/Links/apm/TransactionDetailLink.tsx

@@ -11,6 +11,7 @@ import { pickKeys } from '../../../../../common/utils/pick_keys';
 
 interface Props extends APMLinkExtendProps {
   serviceName: string;
+  environment?: string;
   traceId?: string;
   transactionId?: string;
   transactionName: string;
@@ -19,6 +20,7 @@ interface Props extends APMLinkExtendProps {
 
 export function TransactionDetailLink({
   serviceName,
+  environment,
   traceId,
   transactionId,
   transactionName,
@@ -41,6 +43,7 @@ export function TransactionDetailLink({
         transactionId,
         transactionName,
         transactionType,
+        environment: environment ?? urlParams.environment,
         ...persistedFilters,
       }}
       {...rest}

x-pack/plugins/apm/public/components/shared/Links/apm/service_overview_link.tsx

@@ -16,6 +16,7 @@ import { APMLink, APMLinkExtendProps, useAPMHref } from './APMLink';
 
 interface ServiceOverviewLinkProps extends APMLinkExtendProps {
   serviceName: string;
+  environment?: string;
 }
 
 const persistedFilters: Array<keyof APMQueryParams> = [
@@ -28,14 +29,18 @@ export function useServiceOverviewHref(serviceName: string) {
 
 export function ServiceOverviewLink({
   serviceName,
+  environment,
   ...rest
 }: ServiceOverviewLinkProps) {
   const { urlParams } = useUrlParams();
 
   return (
     <APMLink
       path={`/services/${serviceName}/overview`}
-      query={pickKeys(urlParams as APMQueryParams, ...persistedFilters)}
+      query={{
+        ...pickKeys(urlParams as APMQueryParams, ...persistedFilters),
+        environment: environment ?? urlParams.environment,
+      }}
       {...rest}
     />
   );

x-pack/plugins/apm/public/components/shared/Links/apm/service_transactions_overview.tsx

@@ -24,18 +24,23 @@ export function useServiceOrTransactionsOverviewHref(serviceName: string) {
 
 interface Props extends APMLinkExtendProps {
   serviceName: string;
+  environment?: string;
 }
 
 export function ServiceOrTransactionsOverviewLink({
   serviceName,
+  environment,
   ...rest
 }: Props) {
   const { urlParams } = useUrlParams();
 
   return (
     <APMLink
       path={`/services/${serviceName}`}
-      query={pickKeys(urlParams as APMQueryParams, ...persistedFilters)}
+      query={{
+        ...pickKeys(urlParams as APMQueryParams, ...persistedFilters),
+        environment: environment ?? urlParams.environment,
+      }}
       {...rest}
     />
   );

x-pack/plugins/apm/typings/es_schemas/raw/span_raw.ts

@@ -18,6 +18,7 @@ export interface SpanRaw extends APMBaseDoc {
   trace: { id: string }; // trace is required
   service: {
     name: string;
+    environment?: string;
   };
   span: {
     destination?: {