[APM] Only display relevant sections for rum agent in service overview (

elastic#88410) * [APM] Only display relevent sections for rum agent in service overview (elastic#85546) * call `isRumAgentName` once * User experience callout links to the selected service
ogupte · Jan 15, 2021 · b2d2d0e · b2d2d0e
1 parent a2344d3
commit b2d2d0e
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 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
@@ -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,13 +52,19 @@ export function ServiceOverview({
     'xpack.apm.serviceOverview.searchBar.transactionTypeLabel',
     { defaultMessage: 'Type: {transactionType}', values: { transactionType } }
   );
+  const isRumAgent = isRumAgentName(agentName);
 
   return (
     <AnnotationsContextProvider>
       <ChartPointerEventContextProvider>
         <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
@@ -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
@@ -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