[APM] Add telemetry to central config settings & service breakdown ch…

…arts (#45217) (#45848)

* - adds `trackEvent` to use_track_metric in infra
- tracks page loads for apm settings page
- tracks event for saving an agent configuration in apm settings
- tracks hide/show/hover service breakdown chart in apm transactions

* add optional `metricType` to `trackEvent` defaults to click

* - remove object mutation of syncedChartsProps

x-pack/legacy/plugins/apm/public/components/app/Settings/AddSettings/AddSettingFlyout.tsx

@@ -28,6 +28,7 @@ import { AddSettingFlyoutBody } from './AddSettingFlyoutBody';
 import { useFetcher } from '../../../../hooks/useFetcher';
 import { ENVIRONMENT_NOT_DEFINED } from '../../../../../common/environment_filter_values';
 import { callApmApi } from '../../../../services/rest/callApmApi';
+import { trackEvent } from '../../../../../../infra/public/hooks/use_track_metric';
 import { Config } from '..';
 
 interface Props {
@@ -270,6 +271,8 @@ async function saveConfig({
   environment: string | undefined;
   configurationId?: string;
 }) {
+  trackEvent({ app: 'apm', name: 'save_agent_configuration' });
+
   try {
     if (isNaN(sampleRate) || !serviceName) {
       throw new Error('Missing arguments');

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

@@ -26,6 +26,7 @@ import { AddSettingsFlyout } from './AddSettings/AddSettingFlyout';
 import { callApmApi } from '../../../services/rest/callApmApi';
 import { HomeLink } from '../../shared/Links/apm/HomeLink';
 import { SettingsList } from './SettingsList';
+import { useTrackPageview } from '../../../../../infra/public';
 
 export type Config = AgentConfigurationListAPIResponse[0];
 
@@ -40,6 +41,9 @@ export function Settings() {
   const [selectedConfig, setSelectedConfig] = useState<Config | null>(null);
   const [isFlyoutOpen, setIsFlyoutOpen] = useState(false);
 
+  useTrackPageview({ app: 'apm', path: 'agent_configuration' });
+  useTrackPageview({ app: 'apm', path: 'agent_configuration', delay: 15000 });
+
   const RETURN_TO_OVERVIEW_LINK_LABEL = i18n.translate(
     'xpack.apm.settings.agentConf.returnToOverviewLinkLabel',
     {

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

@@ -6,12 +6,14 @@
 
 import React from 'react';
 import numeral from '@elastic/numeral';
+import { throttle } from 'lodash';
 import { NOT_AVAILABLE_LABEL } from '../../../../../common/i18n';
 import { Coordinate, TimeSeries } from '../../../../../typings/timeseries';
 import { TransactionLineChart } from '../../charts/TransactionCharts/TransactionLineChart';
 import { asPercent } from '../../../../utils/formatters';
 import { unit } from '../../../../style/variables';
 import { isValidCoordinateValue } from '../../../../utils/isValidCoordinateValue';
+import { trackEvent } from '../../../../../../infra/public/hooks/use_track_metric';
 
 interface Props {
   timeseries: TimeSeries[];
@@ -27,6 +29,11 @@ const formatTooltipValue = (coordinate: Coordinate) => {
     : NOT_AVAILABLE_LABEL;
 };
 
+const trackHoverBreakdownChart = throttle(
+  () => trackEvent({ app: 'apm', name: 'hover_breakdown_chart' }),
+  60000
+);
+
 const TransactionBreakdownGraph: React.FC<Props> = props => {
   const { timeseries } = props;
 
@@ -38,6 +45,7 @@ const TransactionBreakdownGraph: React.FC<Props> = props => {
       yMax={1}
       height={unit * 12}
       stacked={true}
+      onHover={trackHoverBreakdownChart}
     />
   );
 };

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

@@ -17,6 +17,7 @@ import { useTransactionBreakdown } from '../../../hooks/useTransactionBreakdown'
 import { TransactionBreakdownHeader } from './TransactionBreakdownHeader';
 import { TransactionBreakdownKpiList } from './TransactionBreakdownKpiList';
 import { TransactionBreakdownGraph } from './TransactionBreakdownGraph';
+import { trackEvent } from '../../../../../infra/public/hooks/use_track_metric';
 
 const NoTransactionsTitle = styled.span`
   font-weight: bold;
@@ -50,6 +51,11 @@ const TransactionBreakdown: React.FC<{
             hideShowChartButton={!hasHits}
             onToggleClick={() => {
               setShowChart(!showChart);
+              if (showChart) {
+                trackEvent({ app: 'apm', name: 'hide_breakdown_chart' });
+              } else {
+                trackEvent({ app: 'apm', name: 'show_breakdown_chart' });
+              }
             }}
           />
         </EuiFlexItem>

x-pack/legacy/plugins/apm/public/components/shared/charts/TransactionCharts/TransactionLineChart/index.tsx

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { useCallback } from 'react';
 import {
   Coordinate,
   RectCoordinate
@@ -27,6 +27,7 @@ interface Props {
   yMax?: string | number;
   height?: number;
   stacked?: boolean;
+  onHover?: () => void;
 }
 
 const TransactionLineChart: React.FC<Props> = (props: Props) => {
@@ -37,15 +38,28 @@ const TransactionLineChart: React.FC<Props> = (props: Props) => {
     yMax = 'max',
     height,
     truncateLegends,
-    stacked = false
+    stacked = false,
+    onHover
   } = props;
 
   const syncedChartsProps = useChartsSync();
 
+  // combine callback for syncedChartsProps.onHover and props.onHover
+  const combinedOnHover = useCallback(
+    (hoverX: number) => {
+      if (onHover) {
+        onHover();
+      }
+      return syncedChartsProps.onHover(hoverX);
+    },
+    [syncedChartsProps, onHover]
+  );
+
   return (
     <CustomPlot
       series={series}
       {...syncedChartsProps}
+      onHover={combinedOnHover}
       tickFormatY={tickFormatY}
       formatTooltipValue={formatTooltipValue}
       yMax={yMax}

x-pack/legacy/plugins/infra/public/hooks/use_track_metric.tsx

@@ -72,3 +72,14 @@ export function useTrackPageview(
 ) {
   useTrackMetric({ ...rest, metric: `pageview__${path}` }, effectDependencies);
 }
+
+interface TrackEventProps {
+  app: ObservabilityApp;
+  name: string;
+  metricType?: METRIC_TYPE;
+}
+
+export function trackEvent({ app, name, metricType = METRIC_TYPE.CLICK }: TrackEventProps) {
+  const trackUiMetric = getTrackerForApp(app);
+  trackUiMetric(metricType, `event__${name}`);
+}