From bb70c6a82abbd1769af498de12142f685fb25f21 Mon Sep 17 00:00:00 2001
From: Oliver Gupte <ogupte@users.noreply.github.com>
Date: Fri, 15 Jan 2021 12:41:16 -0800
Subject: [PATCH] [APM] Only display relevant sections for rum agent in service
 overview (#88410)

* [APM] Only display relevent sections for rum agent in service overview (#85546)

* call `isRumAgentName` once

* User experience callout links to the selected service
---
 .../components/app/service_overview/index.tsx | 37 ++++++++++++-------
 .../app/transaction_overview/index.tsx        |  2 +-
 .../user_experience_callout.tsx               |  9 ++++-
 3 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/x-pack/plugins/apm/public/components/app/service_overview/index.tsx b/x-pack/plugins/apm/public/components/app/service_overview/index.tsx
index 2e04cce5ff670..f7720589359c8 100644
--- a/x-pack/plugins/apm/public/components/app/service_overview/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_overview/index.tsx
@@ -16,6 +16,7 @@ import { LatencyChart } from '../../shared/charts/latency_chart';
 import { TransactionBreakdownChart } from '../../shared/charts/transaction_breakdown_chart';
 import { TransactionErrorRateChart } from '../../shared/charts/transaction_error_rate_chart';
 import { SearchBar } from '../../shared/search_bar';
+import { UserExperienceCallout } from '../transaction_overview/user_experience_callout';
 import { ServiceOverviewDependenciesTable } from './service_overview_dependencies_table';
 import { ServiceOverviewErrorsTable } from './service_overview_errors_table';
 import { ServiceOverviewInstancesTable } from './service_overview_instances_table';
@@ -51,6 +52,7 @@ export function ServiceOverview({
     'xpack.apm.serviceOverview.searchBar.transactionTypeLabel',
     { defaultMessage: 'Type: {transactionType}', values: { transactionType } }
   );
+  const isRumAgent = isRumAgentName(agentName);
 
   return (
     <AnnotationsContextProvider>
@@ -58,6 +60,11 @@ export function ServiceOverview({
         <SearchBar prepend={transactionTypeLabel} />
         <EuiPage>
           <EuiFlexGroup direction="column" gutterSize="s">
+            {isRumAgent && (
+              <EuiFlexItem>
+                <UserExperienceCallout serviceName={serviceName} />
+              </EuiFlexItem>
+            )}
             <EuiFlexItem>
               <EuiPanel>
                 <LatencyChart height={200} />
@@ -87,7 +94,7 @@ export function ServiceOverview({
                 gutterSize="s"
                 responsive={false}
               >
-                {!isRumAgentName(agentName) && (
+                {!isRumAgent && (
                   <EuiFlexItem grow={3}>
                     <TransactionErrorRateChart
                       height={chartHeight}
@@ -111,20 +118,24 @@ export function ServiceOverview({
                 <EuiFlexItem grow={3}>
                   <TransactionBreakdownChart showAnnotations={false} />
                 </EuiFlexItem>
-                <EuiFlexItem grow={7}>
-                  <EuiPanel>
-                    <ServiceOverviewDependenciesTable
-                      serviceName={serviceName}
-                    />
-                  </EuiPanel>
-                </EuiFlexItem>
+                {!isRumAgent && (
+                  <EuiFlexItem grow={7}>
+                    <EuiPanel>
+                      <ServiceOverviewDependenciesTable
+                        serviceName={serviceName}
+                      />
+                    </EuiPanel>
+                  </EuiFlexItem>
+                )}
               </EuiFlexGroup>
             </EuiFlexItem>
-            <EuiFlexItem>
-              <EuiPanel>
-                <ServiceOverviewInstancesTable serviceName={serviceName} />
-              </EuiPanel>
-            </EuiFlexItem>
+            {!isRumAgent && (
+              <EuiFlexItem>
+                <EuiPanel>
+                  <ServiceOverviewInstancesTable serviceName={serviceName} />
+                </EuiPanel>
+              </EuiFlexItem>
+            )}
           </EuiFlexGroup>
         </EuiPage>
       </ChartPointerEventContextProvider>
diff --git a/x-pack/plugins/apm/public/components/app/transaction_overview/index.tsx b/x-pack/plugins/apm/public/components/app/transaction_overview/index.tsx
index 948facae222e7..30fbfe9cc8708 100644
--- a/x-pack/plugins/apm/public/components/app/transaction_overview/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/transaction_overview/index.tsx
@@ -123,7 +123,7 @@ export function TransactionOverview({ serviceName }: TransactionOverviewProps) {
           <EuiFlexItem grow={7}>
             {transactionType === TRANSACTION_PAGE_LOAD && (
               <>
-                <UserExperienceCallout />
+                <UserExperienceCallout serviceName={serviceName} />
                 <EuiSpacer size="s" />
               </>
             )}
diff --git a/x-pack/plugins/apm/public/components/app/transaction_overview/user_experience_callout.tsx b/x-pack/plugins/apm/public/components/app/transaction_overview/user_experience_callout.tsx
index 6e1154a458d6e..95f4fcaab63eb 100644
--- a/x-pack/plugins/apm/public/components/app/transaction_overview/user_experience_callout.tsx
+++ b/x-pack/plugins/apm/public/components/app/transaction_overview/user_experience_callout.tsx
@@ -9,9 +9,14 @@ import { EuiButton, EuiCallOut, EuiSpacer, EuiText } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context';
 
-export function UserExperienceCallout() {
+interface Props {
+  serviceName: string;
+}
+export function UserExperienceCallout({ serviceName }: Props) {
   const { core } = useApmPluginContext();
-  const userExperienceHref = core.http.basePath.prepend(`/app/ux`);
+  const userExperienceHref = core.http.basePath.prepend(
+    `/app/ux?serviceName=${serviceName}`
+  );
 
   return (
     <EuiCallOut