[APM] Service overview: Add throughput chart (#84439)

Author: sorenlouv

x-pack/plugins/apm/common/agent_name.test.ts

@@ -4,43 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import {
-  getFirstTransactionType,
-  isJavaAgentName,
-  isRumAgentName,
-} from './agent_name';
+import { isJavaAgentName, isRumAgentName } from './agent_name';
 
 describe('agent name helpers', () => {
-  describe('getFirstTransactionType', () => {
-    describe('with no transaction types', () => {
-      expect(getFirstTransactionType([])).toBeUndefined();
-    });
-
-    describe('with a non-rum agent', () => {
-      it('returns "request"', () => {
-        expect(getFirstTransactionType(['worker', 'request'], 'java')).toEqual(
-          'request'
-        );
-      });
-
-      describe('with no request types', () => {
-        it('returns the first type', () => {
-          expect(
-            getFirstTransactionType(['worker', 'shirker'], 'java')
-          ).toEqual('worker');
-        });
-      });
-    });
-
-    describe('with a rum agent', () => {
-      it('returns "page-load"', () => {
-        expect(
-          getFirstTransactionType(['http-request', 'page-load'], 'js-base')
-        ).toEqual('page-load');
-      });
-    });
-  });
-
   describe('isJavaAgentName', () => {
     describe('when the agent name is java', () => {
       it('returns true', () => {

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

@@ -5,10 +5,6 @@
  */
 
 import { AgentName } from '../typings/es_schemas/ui/fields/agent';
-import {
-  TRANSACTION_PAGE_LOAD,
-  TRANSACTION_REQUEST,
-} from './transaction_types';
 
 /*
  * Agent names can be any string. This list only defines the official agents
@@ -50,26 +46,6 @@ export const RUM_AGENT_NAMES: AgentName[] = [
   'opentelemetry/webjs',
 ];
 
-function getDefaultTransactionTypeForAgentName(agentName?: string) {
-  return isRumAgentName(agentName)
-    ? TRANSACTION_PAGE_LOAD
-    : TRANSACTION_REQUEST;
-}
-
-export function getFirstTransactionType(
-  transactionTypes: string[],
-  agentName?: string
-) {
-  const defaultTransactionType = getDefaultTransactionTypeForAgentName(
-    agentName
-  );
-
-  return (
-    transactionTypes.find((type) => type === defaultTransactionType) ??
-    transactionTypes[0]
-  );
-}
-
 export function isJavaAgentName(
   agentName: string | undefined
 ): agentName is 'java' {

x-pack/plugins/apm/public/components/alerting/TransactionDurationAlertTrigger/index.tsx

@@ -11,7 +11,6 @@ import React from 'react';
 import { ForLastExpression } from '../../../../../triggers_actions_ui/public';
 import { ALERT_TYPES_CONFIG } from '../../../../common/alert_types';
 import { useEnvironments } from '../../../hooks/useEnvironments';
-import { useServiceTransactionTypes } from '../../../hooks/useServiceTransactionTypes';
 import { useUrlParams } from '../../../hooks/useUrlParams';
 import { ServiceAlertTrigger } from '../ServiceAlertTrigger';
 import { PopoverExpression } from '../ServiceAlertTrigger/PopoverExpression';
@@ -22,6 +21,7 @@ import {
   TransactionTypeField,
   IsAboveField,
 } from '../fields';
+import { useApmService } from '../../../hooks/use_apm_service';
 
 interface AlertParams {
   windowSize: number;
@@ -63,7 +63,7 @@ interface Props {
 export function TransactionDurationAlertTrigger(props: Props) {
   const { setAlertParams, alertParams, setAlertProperty } = props;
   const { urlParams } = useUrlParams();
-  const transactionTypes = useServiceTransactionTypes(urlParams);
+  const { transactionTypes } = useApmService();
   const { serviceName } = useParams<{ serviceName?: string }>();
   const { start, end, transactionType } = urlParams;
   const { environmentOptions } = useEnvironments({ serviceName, start, end });

x-pack/plugins/apm/public/components/alerting/TransactionDurationAnomalyAlertTrigger/index.tsx

@@ -10,7 +10,6 @@ import React from 'react';
 import { ANOMALY_SEVERITY } from '../../../../../ml/common';
 import { ALERT_TYPES_CONFIG } from '../../../../common/alert_types';
 import { useEnvironments } from '../../../hooks/useEnvironments';
-import { useServiceTransactionTypes } from '../../../hooks/useServiceTransactionTypes';
 import { useUrlParams } from '../../../hooks/useUrlParams';
 import { ServiceAlertTrigger } from '../ServiceAlertTrigger';
 import { PopoverExpression } from '../ServiceAlertTrigger/PopoverExpression';
@@ -24,6 +23,7 @@ import {
   ServiceField,
   TransactionTypeField,
 } from '../fields';
+import { useApmService } from '../../../hooks/use_apm_service';
 
 interface Params {
   windowSize: number;
@@ -47,7 +47,7 @@ interface Props {
 export function TransactionDurationAnomalyAlertTrigger(props: Props) {
   const { setAlertParams, alertParams, setAlertProperty } = props;
   const { urlParams } = useUrlParams();
-  const transactionTypes = useServiceTransactionTypes(urlParams);
+  const { transactionTypes } = useApmService();
   const { serviceName } = useParams<{ serviceName?: string }>();
   const { start, end, transactionType } = urlParams;
   const { environmentOptions } = useEnvironments({ serviceName, start, end });

x-pack/plugins/apm/public/components/alerting/TransactionErrorRateAlertTrigger/index.tsx

@@ -8,7 +8,6 @@ import React from 'react';
 import { ForLastExpression } from '../../../../../triggers_actions_ui/public';
 import { ALERT_TYPES_CONFIG, AlertType } from '../../../../common/alert_types';
 import { useEnvironments } from '../../../hooks/useEnvironments';
-import { useServiceTransactionTypes } from '../../../hooks/useServiceTransactionTypes';
 import { useUrlParams } from '../../../hooks/useUrlParams';
 import { ServiceAlertTrigger } from '../ServiceAlertTrigger';
 
@@ -19,6 +18,7 @@ import {
   EnvironmentField,
   IsAboveField,
 } from '../fields';
+import { useApmService } from '../../../hooks/use_apm_service';
 
 interface AlertParams {
   windowSize: number;
@@ -38,7 +38,7 @@ interface Props {
 export function TransactionErrorRateAlertTrigger(props: Props) {
   const { setAlertParams, alertParams, setAlertProperty } = props;
   const { urlParams } = useUrlParams();
-  const transactionTypes = useServiceTransactionTypes(urlParams);
+  const { transactionTypes } = useApmService();
   const { serviceName } = useParams<{ serviceName?: string }>();
   const { start, end, transactionType } = urlParams;
   const { environmentOptions } = useEnvironments({ serviceName, start, end });

x-pack/plugins/apm/public/components/app/Main/route_config/index.tsx

@@ -7,6 +7,7 @@
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { Redirect, RouteComponentProps } from 'react-router-dom';
+import { ApmServiceContextProvider } from '../../../../context/apm_service_context';
 import { UNIDENTIFIED_SERVICE_NODES_LABEL } from '../../../../../common/i18n';
 import { SERVICE_NODE_NAME_MISSING } from '../../../../../common/service_nodes';
 import { APMRouteDefinition } from '../../../../application/routes';
@@ -227,19 +228,19 @@ export const routes: APMRouteDefinition[] = [
     breadcrumb: i18n.translate('xpack.apm.breadcrumb.overviewTitle', {
       defaultMessage: 'Overview',
     }),
-    component: ServiceDetailsOverview,
+    component: withApmServiceContext(ServiceDetailsOverview),
   } as APMRouteDefinition<{ serviceName: string }>,
   // errors
   {
     exact: true,
     path: '/services/:serviceName/errors/:groupId',
-    component: ErrorGroupDetails,
+    component: withApmServiceContext(ErrorGroupDetails),
     breadcrumb: ({ match }) => match.params.groupId,
   } as APMRouteDefinition<{ groupId: string; serviceName: string }>,
   {
     exact: true,
     path: '/services/:serviceName/errors',
-    component: ServiceDetailsErrors,
+    component: withApmServiceContext(ServiceDetailsErrors),
     breadcrumb: i18n.translate('xpack.apm.breadcrumb.errorsTitle', {
       defaultMessage: 'Errors',
     }),
@@ -248,7 +249,7 @@ export const routes: APMRouteDefinition[] = [
   {
     exact: true,
     path: '/services/:serviceName/transactions',
-    component: ServiceDetailsTransactions,
+    component: withApmServiceContext(ServiceDetailsTransactions),
     breadcrumb: i18n.translate('xpack.apm.breadcrumb.transactionsTitle', {
       defaultMessage: 'Transactions',
     }),
@@ -257,7 +258,7 @@ export const routes: APMRouteDefinition[] = [
   {
     exact: true,
     path: '/services/:serviceName/metrics',
-    component: ServiceDetailsMetrics,
+    component: withApmServiceContext(ServiceDetailsMetrics),
     breadcrumb: i18n.translate('xpack.apm.breadcrumb.metricsTitle', {
       defaultMessage: 'Metrics',
     }),
@@ -266,7 +267,7 @@ export const routes: APMRouteDefinition[] = [
   {
     exact: true,
     path: '/services/:serviceName/nodes',
-    component: ServiceDetailsNodes,
+    component: withApmServiceContext(ServiceDetailsNodes),
     breadcrumb: i18n.translate('xpack.apm.breadcrumb.nodesTitle', {
       defaultMessage: 'JVMs',
     }),
@@ -275,7 +276,7 @@ export const routes: APMRouteDefinition[] = [
   {
     exact: true,
     path: '/services/:serviceName/nodes/:serviceNodeName/metrics',
-    component: ServiceNodeMetrics,
+    component: withApmServiceContext(ServiceNodeMetrics),
     breadcrumb: ({ match }) => {
       const { serviceNodeName } = match.params;
 
@@ -289,12 +290,20 @@ export const routes: APMRouteDefinition[] = [
   {
     exact: true,
     path: '/services/:serviceName/transactions/view',
-    component: TransactionDetails,
+    component: withApmServiceContext(TransactionDetails),
     breadcrumb: ({ location }) => {
       const query = toQuery(location.search);
       return query.transactionName as string;
     },
   },
+  {
+    exact: true,
+    path: '/services/:serviceName/service-map',
+    component: withApmServiceContext(ServiceDetailsServiceMap),
+    breadcrumb: i18n.translate('xpack.apm.breadcrumb.serviceMapTitle', {
+      defaultMessage: 'Service Map',
+    }),
+  },
   {
     exact: true,
     path: '/link-to/trace/:traceId',
@@ -309,14 +318,6 @@ export const routes: APMRouteDefinition[] = [
       defaultMessage: 'Service Map',
     }),
   },
-  {
-    exact: true,
-    path: '/services/:serviceName/service-map',
-    component: ServiceDetailsServiceMap,
-    breadcrumb: i18n.translate('xpack.apm.breadcrumb.serviceMapTitle', {
-      defaultMessage: 'Service Map',
-    }),
-  },
   {
     exact: true,
     path: '/settings/customize-ui',
@@ -337,3 +338,13 @@ export const routes: APMRouteDefinition[] = [
     ),
   },
 ];
+
+function withApmServiceContext(WrappedComponent: React.ComponentType<any>) {
+  return (props: any) => {
+    return (
+      <ApmServiceContextProvider>
+        <WrappedComponent {...props} />
+      </ApmServiceContextProvider>
+    );
+  };
+}

x-pack/plugins/apm/public/components/app/service_details/service_detail_tabs.tsx

@@ -9,7 +9,6 @@ import { i18n } from '@kbn/i18n';
 import React, { ReactNode } from 'react';
 import { isJavaAgentName, isRumAgentName } from '../../../../common/agent_name';
 import { enableServiceOverview } from '../../../../common/ui_settings_keys';
-import { useAgentName } from '../../../hooks/useAgentName';
 import { useApmPluginContext } from '../../../hooks/useApmPluginContext';
 import { useErrorOverviewHref } from '../../shared/Links/apm/ErrorOverviewLink';
 import { useMetricOverviewHref } from '../../shared/Links/apm/MetricOverviewLink';
@@ -24,6 +23,7 @@ import { ServiceMetrics } from '../service_metrics';
 import { ServiceNodeOverview } from '../ServiceNodeOverview';
 import { ServiceOverview } from '../service_overview';
 import { TransactionOverview } from '../transaction_overview';
+import { useApmService } from '../../../hooks/use_apm_service';
 
 interface Tab {
   key: string;
@@ -44,7 +44,7 @@ interface Props {
 }
 
 export function ServiceDetailTabs({ serviceName, tab }: Props) {
-  const { agentName } = useAgentName();
+  const { agentName } = useApmService();
   const { uiSettings } = useApmPluginContext().core;
 
   const overviewTab = {

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

@@ -23,10 +23,10 @@ import { RouteComponentProps } from 'react-router-dom';
 import styled from 'styled-components';
 import { SERVICE_NODE_NAME_MISSING } from '../../../../common/service_nodes';
 import { ChartPointerEventContextProvider } from '../../../context/chart_pointer_event_context';
-import { useAgentName } from '../../../hooks/useAgentName';
 import { FETCH_STATUS, useFetcher } from '../../../hooks/useFetcher';
 import { useServiceMetricCharts } from '../../../hooks/useServiceMetricCharts';
 import { useUrlParams } from '../../../hooks/useUrlParams';
+import { useApmService } from '../../../hooks/use_apm_service';
 import { px, truncate, unit } from '../../../style/variables';
 import { ApmHeader } from '../../shared/ApmHeader';
 import { MetricsChart } from '../../shared/charts/metrics_chart';
@@ -58,7 +58,7 @@ type ServiceNodeMetricsProps = RouteComponentProps<{
 export function ServiceNodeMetrics({ match }: ServiceNodeMetricsProps) {
   const { urlParams, uiFilters } = useUrlParams();
   const { serviceName, serviceNodeName } = match.params;
-  const { agentName } = useAgentName();
+  const { agentName } = useApmService();
   const { data } = useServiceMetricCharts(
     urlParams,
     agentName,

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

@@ -21,6 +21,7 @@ import { TransactionErrorRateChart } from '../../shared/charts/transaction_error
 import { ServiceMapLink } from '../../shared/Links/apm/ServiceMapLink';
 import { SearchBar } from '../../shared/search_bar';
 import { ServiceOverviewErrorsTable } from './service_overview_errors_table';
+import { ServiceOverviewThroughputChart } from './service_overview_throughput_chart';
 import { ServiceOverviewTransactionsTable } from './service_overview_transactions_table';
 import { TableLinkFlexItem } from './table_link_flex_item';
 
@@ -64,18 +65,7 @@ export function ServiceOverview({
           <EuiFlexItem>
             <EuiFlexGroup gutterSize="s">
               <EuiFlexItem grow={4}>
-                <EuiPanel>
-                  <EuiTitle size="xs">
-                    <h2>
-                      {i18n.translate(
-                        'xpack.apm.serviceOverview.trafficChartTitle',
-                        {
-                          defaultMessage: 'Traffic',
-                        }
-                      )}
-                    </h2>
-                  </EuiTitle>
-                </EuiPanel>
+                <ServiceOverviewThroughputChart height={chartHeight} />
               </EuiFlexItem>
               <EuiFlexItem grow={6}>
                 <EuiPanel>

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

@@ -72,6 +72,7 @@ describe('ServiceOverview', () => {
           sort: { direction: 'desc', field: 'test field' },
         },
         totalItemCount: 0,
+        throughput: [],
       },
       refetch: () => {},
       status: FETCH_STATUS.SUCCESS,