[APM] Transactions breakdown graph: Add breakdown KPI component (#38658)

* [APM] Transactions breakdown graph: Add breakdown KPI component

Closes #36445.

* Remove percentage, line wrapping, correct query

* Add transaction breakdown chart to transaction details page

* Move files into new plugin dir

* Add empty state; update labels

* Use new mapping

* Move urlParams to useTransactionBreakdown hook

* Fix types

* Only show empty state in TransactionBreakdown if previously data was rendered

* Restrict no of KPIs to 20

* Use ternary in render of TransactionBreakdownHeader for consistency

x-pack/legacy/plugins/apm/public/components/app/Main/Home.tsx

@@ -16,17 +16,19 @@ import { TraceOverview } from '../TraceOverview';
 const homeTabs: IHistoryTab[] = [
   {
     path: '/services',
-    name: i18n.translate('xpack.apm.home.servicesTabLabel', {
+    title: i18n.translate('xpack.apm.home.servicesTabLabel', {
       defaultMessage: 'Services'
     }),
-    render: () => <ServiceOverview />
+    render: () => <ServiceOverview />,
+    name: 'services'
   },
   {
     path: '/traces',
-    name: i18n.translate('xpack.apm.home.tracesTabLabel', {
+    title: i18n.translate('xpack.apm.home.tracesTabLabel', {
       defaultMessage: 'Traces'
     }),
-    render: () => <TraceOverview />
+    render: () => <TraceOverview />,
+    name: 'traces'
   }
 ];
 

x-pack/legacy/plugins/apm/public/components/app/ServiceDetails/ServiceDetailTabs.tsx

@@ -30,7 +30,7 @@ export function ServiceDetailTabs({
   const { serviceName } = urlParams;
   const headTransactionType = transactionTypes[0];
   const transactionsTab = {
-    name: i18n.translate('xpack.apm.serviceDetails.transactionsTabLabel', {
+    title: i18n.translate('xpack.apm.serviceDetails.transactionsTabLabel', {
       defaultMessage: 'Transactions'
     }),
     path: headTransactionType
@@ -42,23 +42,28 @@ export function ServiceDetailTabs({
         urlParams={urlParams}
         serviceTransactionTypes={transactionTypes}
       />
-    )
+    ),
+    name: 'transactions'
   };
   const errorsTab = {
-    name: i18n.translate('xpack.apm.serviceDetails.errorsTabLabel', {
+    title: i18n.translate('xpack.apm.serviceDetails.errorsTabLabel', {
       defaultMessage: 'Errors'
     }),
     path: `/${serviceName}/errors`,
     render: () => {
       return <ErrorGroupOverview urlParams={urlParams} location={location} />;
-    }
+    },
+    name: 'errors'
   };
   const metricsTab = {
-    name: i18n.translate('xpack.apm.serviceDetails.metricsTabLabel', {
+    title: i18n.translate('xpack.apm.serviceDetails.metricsTabLabel', {
       defaultMessage: 'Metrics'
     }),
     path: `/${serviceName}/metrics`,
-    render: () => <ServiceMetrics urlParams={urlParams} agentName={agentName} />
+    render: () => (
+      <ServiceMetrics urlParams={urlParams} agentName={agentName} />
+    ),
+    name: 'metrics'
   };
   const tabs = isRumAgent
     ? [transactionsTab, errorsTab]

x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/index.tsx

@@ -17,6 +17,7 @@ import { Transaction } from './Transaction';
 import { useLocation } from '../../../hooks/useLocation';
 import { useUrlParams } from '../../../hooks/useUrlParams';
 import { FETCH_STATUS } from '../../../hooks/useFetcher';
+import { TransactionBreakdown } from '../../shared/TransactionBreakdown';
 
 export function TransactionDetails() {
   const location = useLocation();
@@ -31,14 +32,18 @@ export function TransactionDetails() {
   const { data: waterfall } = useWaterfall(urlParams);
   const transaction = waterfall.getTransactionById(urlParams.transactionId);
 
+  const { transactionName } = urlParams;
+
   return (
     <div>
       <ApmHeader>
         <EuiTitle size="l">
-          <h1>{urlParams.transactionName}</h1>
+          <h1>{transactionName}</h1>
         </EuiTitle>
       </ApmHeader>
 
+      <TransactionBreakdown />
+
       <EuiSpacer size="s" />
 
       <TransactionCharts

x-pack/legacy/plugins/apm/public/components/app/TransactionOverview/index.tsx

@@ -19,6 +19,7 @@ import { useTransactionList } from '../../../hooks/useTransactionList';
 import { useTransactionOverviewCharts } from '../../../hooks/useTransactionOverviewCharts';
 import { IUrlParams } from '../../../context/UrlParamsContext/types';
 import { TransactionCharts } from '../../shared/charts/TransactionCharts';
+import { TransactionBreakdown } from '../../shared/TransactionBreakdown';
 import { legacyEncodeURIComponent } from '../../shared/Links/url_helpers';
 import { TransactionList } from './List';
 import { useRedirect } from './useRedirect';
@@ -113,6 +114,10 @@ export function TransactionOverview({
         </EuiFormRow>
       ) : null}
 
+      <TransactionBreakdown />
+
+      <EuiSpacer size="s" />
+
       <TransactionCharts
         hasMLJob={hasMLJob}
         charts={transactionOverviewCharts}

x-pack/legacy/plugins/apm/public/components/shared/HistoryTabs/__test__/HistoryTabs.test.tsx

@@ -32,17 +32,20 @@ describe('HistoryTabs', () => {
 
     testTabs = [
       {
-        name: 'One',
+        name: 'one',
+        title: 'One',
         path: '/one',
         render: props => <Content {...props} name="one" />
       },
       {
-        name: 'Two',
+        name: 'two',
+        title: 'Two',
         path: '/two',
         render: () => <Content name="two" />
       },
       {
-        name: 'Three',
+        name: 'three',
+        title: 'Three',
         path: '/three',
         render: () => <Content name="three" />
       }

x-pack/legacy/plugins/apm/public/components/shared/HistoryTabs/index.tsx

@@ -13,7 +13,8 @@ import { history } from '../../../utils/history';
 export interface IHistoryTab {
   path: string;
   routePath?: string;
-  name: React.ReactNode;
+  title: React.ReactNode;
+  name: string;
   render?: (props: RouteComponentProps) => React.ReactNode;
 }
 
@@ -37,9 +38,9 @@ export function HistoryTabs({ tabs }: HistoryTabsProps) {
           <EuiTab
             onClick={() => history.push({ ...location, pathname: tab.path })}
             isSelected={isTabSelected(tab, location.pathname)}
-            key={`${tab.path}--${i}`}
+            key={tab.name}
           >
-            {tab.name}
+            {tab.title}
           </EuiTab>
         ))}
       </EuiTabs>
@@ -49,7 +50,7 @@ export function HistoryTabs({ tabs }: HistoryTabsProps) {
           <Route
             path={tab.routePath || tab.path}
             render={tab.render}
-            key={tab.path}
+            key={tab.name}
           />
         ) : null
       )}

x-pack/legacy/plugins/apm/public/components/shared/TransactionBreakdown/TransactionBreakdownGraph/index.tsx

@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+
+const TransactionBreakdownGraph: React.FC<{}> = () => {
+  return <div />;
+};
+
+export { TransactionBreakdownGraph };

x-pack/legacy/plugins/apm/public/components/shared/TransactionBreakdown/TransactionBreakdownHeader.tsx

@@ -0,0 +1,74 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import React from 'react';
+
+import {
+  EuiTitle,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiBetaBadge,
+  EuiButtonEmpty
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+const TransactionBreakdownHeader: React.FC<{
+  showChart: boolean;
+  hideShowChartButton: boolean;
+  onToggleClick: () => void;
+}> = ({ showChart, onToggleClick, hideShowChartButton }) => {
+  return (
+    <EuiFlexGroup>
+      <EuiFlexItem>
+        <EuiTitle size="xs">
+          <h3>
+            <EuiFlexGroup alignItems="center" gutterSize="s">
+              <EuiFlexItem grow={false}>
+                {i18n.translate('xpack.apm.transactionBreakdown.chartTitle', {
+                  defaultMessage: 'Time spent by span type'
+                })}
+              </EuiFlexItem>
+              <EuiSpacer size="xs" />
+              <EuiFlexItem grow={false}>
+                <EuiBetaBadge
+                  label={i18n.translate('xpack.apm.ui.betaBadgeLabel', {
+                    defaultMessage: 'Beta'
+                  })}
+                  tooltipContent={i18n.translate(
+                    'xpack.apm.ui.betaBadgeTooltipTitle',
+                    {
+                      defaultMessage:
+                        'This feature is still in development. If you have feedback, please reach out in our Discuss forum.'
+                    }
+                  )}
+                />
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </h3>
+        </EuiTitle>
+      </EuiFlexItem>
+      {!hideShowChartButton ? (
+        <EuiFlexItem grow={false}>
+          <EuiButtonEmpty
+            size="xs"
+            iconType={showChart ? 'arrowDown' : 'arrowRight'}
+            onClick={() => onToggleClick()}
+          >
+            {showChart
+              ? i18n.translate('xpack.apm.transactionBreakdown.hideChart', {
+                  defaultMessage: 'Hide chart'
+                })
+              : i18n.translate('xpack.apm.transactionBreakdown.showChart', {
+                  defaultMessage: 'Show chart'
+                })}
+          </EuiButtonEmpty>
+        </EuiFlexItem>
+      ) : null}
+    </EuiFlexGroup>
+  );
+};
+
+export { TransactionBreakdownHeader };