Merge pull request #6 from jasonrhodes/apm-use-track-metric-hook-idea

Fixes APM trackEvent usage in NP context
elastic · Jan 28, 2020 · f5f41d7 · f5f41d7
2 parents 6a80609 + df4ccca
commit f5f41d7
Show file tree

Hide file tree

Showing 27 changed files with 111 additions and 52 deletions.
diff --git a/x-pack/legacy/plugins/apm/public/components/app/ErrorGroupDetails/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/ErrorGroupDetails/index.tsx
@@ -25,7 +25,7 @@ import { DetailView } from './DetailView';
 import { ErrorDistribution } from './Distribution';
 import { useLocation } from '../../../hooks/useLocation';
 import { useUrlParams } from '../../../hooks/useUrlParams';
-import { useTrackPageview } from '../../../../../../../plugins/infra/public';
+import { useTrackPageview } from '../../../../../../../plugins/observability/public';
 
 const Titles = styled.div`
   margin-bottom: ${px(units.plus)};

diff --git a/x-pack/legacy/plugins/apm/public/components/app/ErrorGroupOverview/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/ErrorGroupOverview/index.tsx
@@ -17,7 +17,7 @@ import { useFetcher } from '../../../hooks/useFetcher';
 import { ErrorDistribution } from '../ErrorGroupDetails/Distribution';
 import { ErrorGroupList } from './List';
 import { useUrlParams } from '../../../hooks/useUrlParams';
-import { useTrackPageview } from '../../../../../../../plugins/infra/public';
+import { useTrackPageview } from '../../../../../../../plugins/observability/public';
 import { PROJECTION } from '../../../../common/projections/typings';
 import { LocalUIFilters } from '../../shared/LocalUIFilters';
 

diff --git a/x-pack/legacy/plugins/apm/public/components/app/ServiceOverview/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/ServiceOverview/index.tsx
@@ -14,7 +14,7 @@ import { useFetcher } from '../../../hooks/useFetcher';
 import { NoServicesMessage } from './NoServicesMessage';
 import { ServiceList } from './ServiceList';
 import { useUrlParams } from '../../../hooks/useUrlParams';
-import { useTrackPageview } from '../../../../../../../plugins/infra/public';
+import { useTrackPageview } from '../../../../../../../plugins/observability/public';
 import { PROJECTION } from '../../../../common/projections/typings';
 import { LocalUIFilters } from '../../shared/LocalUIFilters';
 import { useApmPluginContext } from '../../../hooks/useApmPluginContext';

diff --git a/...cy/plugins/apm/public/components/app/Settings/AgentConfigurations/AddEditFlyout/index.tsx b/...cy/plugins/apm/public/components/app/Settings/AgentConfigurations/AddEditFlyout/index.tsx
@@ -34,6 +34,7 @@ import { isRumAgentName } from '../../../../../../common/agent_name';
 import { ALL_OPTION_VALUE } from '../../../../../../common/agent_configuration_constants';
 import { saveConfig } from './saveConfig';
 import { useApmPluginContext } from '../../../../../hooks/useApmPluginContext';
+import { useUiTracker } from '../../../../../../../../../plugins/observability/public';
 
 const defaultSettings = {
   TRANSACTION_SAMPLE_RATE: '1.0',
@@ -59,6 +60,9 @@ export function AddEditFlyout({
 
   const callApmApiFromHook = useCallApmApi();
 
+  // get a telemetry UI event tracker
+  const trackApmEvent = useUiTracker({ app: 'apm' });
+
   // config conditions (service)
   const [serviceName, setServiceName] = useState<string>(
     selectedConfig ? selectedConfig.service.name || ALL_OPTION_VALUE : ''
@@ -133,7 +137,8 @@ export function AddEditFlyout({
       transactionMaxSpans,
       configurationId: selectedConfig ? selectedConfig.id : undefined,
       agentName,
-      toasts
+      toasts,
+      trackApmEvent
     });
     setIsSaving(false);
     onSaved();

diff --git a/...lugins/apm/public/components/app/Settings/AgentConfigurations/AddEditFlyout/saveConfig.ts b/...lugins/apm/public/components/app/Settings/AgentConfigurations/AddEditFlyout/saveConfig.ts
@@ -12,6 +12,7 @@ import {
   getOptionLabel,
   omitAllOption
 } from '../../../../../../common/agent_configuration_constants';
+import { UiTracker } from '../../../../../../../../../plugins/observability/public';
 
 interface Settings {
   transaction_sample_rate: number;
@@ -28,7 +29,8 @@ export async function saveConfig({
   transactionMaxSpans,
   configurationId,
   agentName,
-  toasts
+  toasts,
+  trackApmEvent
 }: {
   callApmApi: APMClient;
   serviceName: string;
@@ -39,9 +41,9 @@ export async function saveConfig({
   configurationId?: string;
   agentName?: string;
   toasts: NotificationsStart['toasts'];
+  trackApmEvent: UiTracker;
 }) {
-  // TODO: Migrate to useTrackMetric
-  // trackEvent({ app: 'apm', name: 'save_agent_configuration' });
+  trackApmEvent({ metric: 'save_agent_configuration' });
 
   try {
     const settings: Settings = {

diff --git a/x-pack/legacy/plugins/apm/public/components/app/Settings/AgentConfigurations/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/Settings/AgentConfigurations/index.tsx
@@ -18,7 +18,7 @@ import { isEmpty } from 'lodash';
 import { useFetcher } from '../../../../hooks/useFetcher';
 import { AgentConfigurationListAPIResponse } from '../../../../../server/lib/settings/agent_configuration/list_configurations';
 import { AgentConfigurationList } from './AgentConfigurationList';
-import { useTrackPageview } from '../../../../../../../../plugins/infra/public';
+import { useTrackPageview } from '../../../../../../../../plugins/observability/public';
 import { AddEditFlyout } from './AddEditFlyout';
 
 export type Config = AgentConfigurationListAPIResponse[0];

diff --git a/x-pack/legacy/plugins/apm/public/components/app/TraceOverview/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/TraceOverview/index.tsx
@@ -9,7 +9,7 @@ import React, { useMemo } from 'react';
 import { FETCH_STATUS, useFetcher } from '../../../hooks/useFetcher';
 import { TraceList } from './TraceList';
 import { useUrlParams } from '../../../hooks/useUrlParams';
-import { useTrackPageview } from '../../../../../../../plugins/infra/public';
+import { useTrackPageview } from '../../../../../../../plugins/observability/public';
 import { LocalUIFilters } from '../../shared/LocalUIFilters';
 import { PROJECTION } from '../../../../common/projections/typings';
 

diff --git a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/index.tsx
@@ -26,7 +26,7 @@ import { useUrlParams } from '../../../hooks/useUrlParams';
 import { FETCH_STATUS } from '../../../hooks/useFetcher';
 import { TransactionBreakdown } from '../../shared/TransactionBreakdown';
 import { ChartsSyncContextProvider } from '../../../context/ChartsSyncContext';
-import { useTrackPageview } from '../../../../../../../plugins/infra/public';
+import { useTrackPageview } from '../../../../../../../plugins/observability/public';
 import { PROJECTION } from '../../../../common/projections/typings';
 import { LocalUIFilters } from '../../shared/LocalUIFilters';
 import { HeightRetainer } from '../../shared/HeightRetainer';

diff --git a/x-pack/legacy/plugins/apm/public/components/app/TransactionOverview/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/TransactionOverview/index.tsx
@@ -27,7 +27,7 @@ import { getHasMLJob } from '../../../services/rest/ml';
 import { history } from '../../../utils/history';
 import { useLocation } from '../../../hooks/useLocation';
 import { ChartsSyncContextProvider } from '../../../context/ChartsSyncContext';
-import { useTrackPageview } from '../../../../../../../plugins/infra/public';
+import { useTrackPageview } from '../../../../../../../plugins/observability/public';
 import { fromQuery, toQuery } from '../../shared/Links/url_helpers';
 import { LocalUIFilters } from '../../shared/LocalUIFilters';
 import { PROJECTION } from '../../../../common/projections/typings';

diff --git a/...ins/apm/public/components/shared/TransactionBreakdown/TransactionBreakdownGraph/index.tsx b/...ins/apm/public/components/shared/TransactionBreakdown/TransactionBreakdownGraph/index.tsx
@@ -14,6 +14,7 @@ import { TransactionLineChart } from '../../charts/TransactionCharts/Transaction
 import { asPercent } from '../../../../utils/formatters';
 import { unit } from '../../../../style/variables';
 import { isValidCoordinateValue } from '../../../../utils/isValidCoordinateValue';
+import { useUiTracker } from '../../../../../../../../plugins/observability/public';
 
 interface Props {
   timeseries: TimeSeries[];
@@ -29,13 +30,12 @@ const formatTooltipValue = (coordinate: Coordinate) => {
     : NOT_AVAILABLE_LABEL;
 };
 
-const trackHoverBreakdownChart = throttle(() => {
-  // TODO: Migrate to useTrackMetric
-  // trackEvent({ app: 'apm', name: 'hover_breakdown_chart' })
-}, 60000);
-
 const TransactionBreakdownGraph: React.FC<Props> = props => {
   const { timeseries } = props;
+  const trackApmEvent = useUiTracker({ app: 'apm' });
+  const trackHoverBreakdownChart = throttle(() => {
+    trackApmEvent({ metric: 'hover_breakdown_chart' });
+  }, 60000);
 
   return (
     <TransactionLineChart

diff --git a/...plugins/apm/public/components/shared/TransactionBreakdown/TransactionBreakdownKpiList.tsx b/...plugins/apm/public/components/shared/TransactionBreakdown/TransactionBreakdownKpiList.tsx
@@ -13,8 +13,10 @@ import {
   EuiIcon
 } from '@elastic/eui';
 import styled from 'styled-components';
-import { InfraFormatterType } from '../../../../../../../plugins/infra/public';
-import { FORMATTERS } from '../../../../../../../plugins/infra/public';
+import {
+  FORMATTERS,
+  InfraFormatterType
+} from '../../../../../../../plugins/infra/public';
 
 interface TransactionBreakdownKpi {
   name: string;

diff --git a/x-pack/legacy/plugins/apm/public/components/shared/TransactionBreakdown/index.tsx b/x-pack/legacy/plugins/apm/public/components/shared/TransactionBreakdown/index.tsx
@@ -11,6 +11,7 @@ import { TransactionBreakdownHeader } from './TransactionBreakdownHeader';
 import { TransactionBreakdownKpiList } from './TransactionBreakdownKpiList';
 import { TransactionBreakdownGraph } from './TransactionBreakdownGraph';
 import { FETCH_STATUS } from '../../../hooks/useFetcher';
+import { useUiTracker } from '../../../../../../../plugins/observability/public';
 
 const emptyMessage = i18n.translate('xpack.apm.transactionBreakdown.noData', {
   defaultMessage: 'No data within this time range.'
@@ -20,11 +21,9 @@ const TransactionBreakdown: React.FC<{
   initialIsOpen?: boolean;
 }> = ({ initialIsOpen }) => {
   const [showChart, setShowChart] = useState(!!initialIsOpen);
-
   const { data, status } = useTransactionBreakdown();
-
+  const trackApmEvent = useUiTracker({ app: 'apm' });
   const { kpis, timeseries } = data;
-
   const noHits = data.kpis.length === 0 && status === FETCH_STATUS.SUCCESS;
   const showEmptyMessage = noHits && !showChart;
 
@@ -37,11 +36,9 @@ const TransactionBreakdown: React.FC<{
             onToggleClick={() => {
               setShowChart(!showChart);
               if (showChart) {
-                // TODO: Migrate to useTrackMetric
-                // trackEvent({ app: 'apm', name: 'hide_breakdown_chart' });
+                trackApmEvent({ metric: 'hide_breakdown_chart' });
               } else {
-                // TODO: Migrate to useTrackMetric
-                // trackEvent({ app: 'apm', name: 'show_breakdown_chart' });
+                trackApmEvent({ metric: 'show_breakdown_chart' });
               }
             }}
           />

diff --git a/x-pack/legacy/plugins/apm/public/new-platform/plugin.tsx b/x-pack/legacy/plugins/apm/public/new-platform/plugin.tsx
@@ -37,6 +37,7 @@ import { getConfigFromInjectedMetadata } from './getConfigFromInjectedMetadata';
 import { setHelpExtension } from './setHelpExtension';
 import { toggleAppLinkInNav } from './toggleAppLinkInNav';
 import { setReadonlyBadge } from './updateBadge';
+import { KibanaContextProvider } from '../../../../../../src/plugins/kibana_react/public';
 
 export const REACT_APP_ROOT_ID = 'react-apm-root';
 
@@ -131,21 +132,23 @@ export class ApmPlugin
 
     ReactDOM.render(
       <ApmPluginContext.Provider value={apmPluginContextValue}>
-        <i18nCore.Context>
-          <Router history={history}>
-            <LocationProvider>
-              <MatchedRouteProvider routes={routes}>
-                <UrlParamsProvider>
-                  <LoadingIndicatorProvider>
-                    <LicenseProvider>
-                      <App />
-                    </LicenseProvider>
-                  </LoadingIndicatorProvider>
-                </UrlParamsProvider>
-              </MatchedRouteProvider>
-            </LocationProvider>
-          </Router>
-        </i18nCore.Context>
+        <KibanaContextProvider services={{ ...core, ...plugins }}>
+          <i18nCore.Context>
+            <Router history={history}>
+              <LocationProvider>
+                <MatchedRouteProvider routes={routes}>
+                  <UrlParamsProvider>
+                    <LoadingIndicatorProvider>
+                      <LicenseProvider>
+                        <App />
+                      </LicenseProvider>
+                    </LoadingIndicatorProvider>
+                  </UrlParamsProvider>
+                </MatchedRouteProvider>
+              </LocationProvider>
+            </Router>
+          </i18nCore.Context>
+        </KibanaContextProvider>
       </ApmPluginContext.Provider>,
       document.getElementById(REACT_APP_ROOT_ID)
     );

diff --git a/x-pack/legacy/plugins/uptime/public/pages/monitor.tsx b/x-pack/legacy/plugins/uptime/public/pages/monitor.tsx
@@ -11,7 +11,7 @@ import { MonitorCharts, PingList } from '../components/functional';
 import { UMUpdateBreadcrumbs } from '../lib/lib';
 import { UptimeRefreshContext, UptimeThemeContext } from '../contexts';
 import { useUptimeTelemetry, useUrlParams, UptimePage } from '../hooks';
-import { useTrackPageview } from '../../../../../plugins/infra/public';
+import { useTrackPageview } from '../../../../../plugins/observability/public';
 import { MonitorStatusDetails } from '../components/functional/monitor_status_details';
 import { PageHeader } from './page_header';
 

diff --git a/x-pack/legacy/plugins/uptime/public/pages/overview.tsx b/x-pack/legacy/plugins/uptime/public/pages/overview.tsx
@@ -18,7 +18,7 @@ import {
 import { UMUpdateBreadcrumbs } from '../lib/lib';
 import { useIndexPattern, useUrlParams, useUptimeTelemetry, UptimePage } from '../hooks';
 import { stringifyUrlParams } from '../lib/helper/stringify_url_params';
-import { useTrackPageview } from '../../../../../plugins/infra/public';
+import { useTrackPageview } from '../../../../../plugins/observability/public';
 import { combineFiltersAndUserSearch, stringifyKueries, toStaticIndexPattern } from '../lib/helper';
 import { store } from '../state';
 import { setEsKueryString } from '../state/actions';

diff --git a/x-pack/plugins/infra/public/index.ts b/x-pack/plugins/infra/public/index.ts
@@ -16,6 +16,5 @@ export const plugin: PluginInitializer<
   return new Plugin(context);
 };
 
-export { useTrackPageview } from './hooks/use_track_metric';
 export { FORMATTERS } from './utils/formatters';
 export { InfraFormatterType } from './lib/lib';
diff --git a/x-pack/plugins/infra/public/pages/infrastructure/metrics_explorer/index.tsx b/x-pack/plugins/infra/public/pages/infrastructure/metrics_explorer/index.tsx
@@ -14,7 +14,7 @@ import { MetricsExplorerToolbar } from '../../../components/metrics_explorer/too
 import { SourceQuery } from '../../../../common/graphql/types';
 import { NoData } from '../../../components/empty_states';
 import { useMetricsExplorerState } from './use_metric_explorer_state';
-import { useTrackPageview } from '../../../hooks/use_track_metric';
+import { useTrackPageview } from '../../../../../observability/public';
 
 interface MetricsExplorerPageProps {
   source: SourceQuery.Query['source']['configuration'];

diff --git a/x-pack/plugins/infra/public/pages/infrastructure/snapshot/index.tsx b/x-pack/plugins/infra/public/pages/infrastructure/snapshot/index.tsx
@@ -26,7 +26,7 @@ import { Source } from '../../../containers/source';
 import { WithWaffleFilterUrlState } from '../../../containers/waffle/with_waffle_filters';
 import { WithWaffleOptionsUrlState } from '../../../containers/waffle/with_waffle_options';
 import { WithWaffleTimeUrlState } from '../../../containers/waffle/with_waffle_time';
-import { useTrackPageview } from '../../../hooks/use_track_metric';
+import { useTrackPageview } from '../../../../../observability/public';
 import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
 
 export const SnapshotPage = () => {

diff --git a/x-pack/plugins/infra/public/pages/logs/log_entry_categories/page_results_content.tsx b/x-pack/plugins/infra/public/pages/logs/log_entry_categories/page_results_content.tsx
@@ -19,7 +19,7 @@ import {
 } from '../../../components/logging/log_analysis_job_status';
 import { FirstUseCallout } from '../../../components/logging/log_analysis_results';
 import { useInterval } from '../../../hooks/use_interval';
-import { useTrackPageview } from '../../../hooks/use_track_metric';
+import { useTrackPageview } from '../../../../../observability/public';
 import { TopCategoriesSection } from './sections/top_categories';
 import { useLogEntryCategoriesModuleContext } from './use_log_entry_categories_module';
 import { useLogEntryCategoriesResults } from './use_log_entry_categories_results';

diff --git a/x-pack/plugins/infra/public/pages/logs/log_entry_categories/page_setup_content.tsx b/x-pack/plugins/infra/public/pages/logs/log_entry_categories/page_setup_content.tsx
@@ -16,7 +16,7 @@ import {
   LogAnalysisSetupPageContent,
   LogAnalysisSetupPageHeader,
 } from '../../../components/logging/log_analysis_setup';
-import { useTrackPageview } from '../../../hooks/use_track_metric';
+import { useTrackPageview } from '../../../../../observability/public';
 import { useLogEntryCategoriesSetup } from './use_log_entry_categories_setup';
 
 export const LogEntryCategoriesSetupContent: React.FunctionComponent = () => {

diff --git a/x-pack/plugins/infra/public/pages/logs/log_entry_rate/page_results_content.tsx b/x-pack/plugins/infra/public/pages/logs/log_entry_rate/page_results_content.tsx
@@ -25,7 +25,7 @@ import { TimeRange } from '../../../../common/http_api/shared/time_range';
 import { bucketSpan } from '../../../../common/log_analysis';
 import { LoadingOverlayWrapper } from '../../../components/loading_overlay_wrapper';
 import { useInterval } from '../../../hooks/use_interval';
-import { useTrackPageview } from '../../../hooks/use_track_metric';
+import { useTrackPageview } from '../../../../../observability/public';
 import { useKibanaUiSetting } from '../../../utils/use_kibana_ui_setting';
 import { AnomaliesResults } from './sections/anomalies';
 import { LogRateResults } from './sections/log_rate';

diff --git a/x-pack/plugins/infra/public/pages/logs/log_entry_rate/page_setup_content.tsx b/x-pack/plugins/infra/public/pages/logs/log_entry_rate/page_setup_content.tsx
@@ -16,7 +16,7 @@ import {
   LogAnalysisSetupPageContent,
   LogAnalysisSetupPageHeader,
 } from '../../../components/logging/log_analysis_setup';
-import { useTrackPageview } from '../../../hooks/use_track_metric';
+import { useTrackPageview } from '../../../../../observability/public';
 import { useLogEntryRateSetup } from './use_log_entry_rate_setup';
 
 export const LogEntryRateSetupContent: React.FunctionComponent = () => {

diff --git a/x-pack/plugins/infra/public/pages/logs/stream/page.tsx b/x-pack/plugins/infra/public/pages/logs/stream/page.tsx
@@ -10,7 +10,7 @@ import { ColumnarPage } from '../../../components/page';
 import { StreamPageContent } from './page_content';
 import { StreamPageHeader } from './page_header';
 import { LogsPageProviders } from './page_providers';
-import { useTrackPageview } from '../../../hooks/use_track_metric';
+import { useTrackPageview } from '../../../../../observability/public';
 
 export const StreamPage = () => {
   useTrackPageview({ app: 'infra_logs', path: 'stream' });

diff --git a/x-pack/plugins/observability/kibana.json b/x-pack/plugins/observability/kibana.json
@@ -0,0 +1,6 @@
+{
+  "id": "observability",
+  "version": "8.0.0",
+  "kibanaVersion": "kibana",
+  "ui": true
+}
diff --git a/...s/infra/public/hooks/use_track_metric.tsx → ...ability/public/hooks/use_track_metric.tsx b/...s/infra/public/hooks/use_track_metric.tsx → ...ability/public/hooks/use_track_metric.tsx
@@ -22,16 +22,24 @@ import { useKibana } from '../../../../../src/plugins/kibana_react/public';
 type ObservabilityApp = 'infra_metrics' | 'infra_logs' | 'apm' | 'uptime';
 
 interface TrackOptions {
-  app: ObservabilityApp;
+  app?: ObservabilityApp;
   metricType?: UiStatsMetricType;
   delay?: number; // in ms
 }
 type EffectDeps = unknown[];
 
-type TrackMetricOptions = TrackOptions & { metric: string };
+export type TrackMetricOptions = TrackOptions & { metric: string };
+export type UiTracker = ReturnType<typeof useUiTracker>;
 
 export { METRIC_TYPE };
 
+export function useUiTracker({ app: defaultApp }: { app?: ObservabilityApp } = {}) {
+  const { reportUiStats } = useKibana<any>().services?.usageCollection;
+  return ({ app = defaultApp, metric, metricType = METRIC_TYPE.COUNT }: TrackMetricOptions) => {
+    reportUiStats(app, metricType, metric);
+  };
+}
+
 export function useTrackMetric(
   { app, metric, metricType = METRIC_TYPE.COUNT, delay = 0 }: TrackMetricOptions,
   effectDependencies: EffectDeps = []

diff --git a/x-pack/plugins/observability/public/index.ts b/x-pack/plugins/observability/public/index.ts
@@ -0,0 +1,22 @@
+/*
+ * 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 { PluginInitializerContext, PluginInitializer } from 'kibana/public';
+import { Plugin, ClientSetup, ClientStart } from './plugin';
+
+export const plugin: PluginInitializer<ClientSetup, ClientStart> = (
+  context: PluginInitializerContext
+) => {
+  return new Plugin(context);
+};
+
+export {
+  useTrackPageview,
+  useUiTracker,
+  UiTracker,
+  TrackMetricOptions,
+  METRIC_TYPE,
+} from './hooks/use_track_metric';