[Logs / Metrics] New Platform migration (full cutover)

test/functional/page_objects/common_page.ts

@@ -192,6 +192,7 @@ export function CommonPageProvider({ getService, getPageObjects }: FtrProviderCo
     public async navigateToUrlWithBrowserHistory(
       appName: string,
       subUrl?: string,
+      search?: string,
       {
         basePath = '',
         ensureCurrentUrl = true,
@@ -203,6 +204,7 @@ export function CommonPageProvider({ getService, getPageObjects }: FtrProviderCo
       const appConfig = {
         // subUrl following the basePath, assumes no hashes.  Ex: 'app/endpoint/management'
         pathname: `${basePath}${config.get(['apps', appName]).pathname}${subUrl}`,
+        search,
       };
 
       await this.navigate({

x-pack/.i18nrc.json

@@ -17,7 +17,7 @@
     "xpack.grokDebugger": "legacy/plugins/grokdebugger",
     "xpack.idxMgmt": "legacy/plugins/index_management",
     "xpack.indexLifecycleMgmt": "legacy/plugins/index_lifecycle_management",
-    "xpack.infra": "legacy/plugins/infra",
+    "xpack.infra": "plugins/infra",
     "xpack.data": "plugins/data_enhanced",
     "xpack.lens": "legacy/plugins/lens",
     "xpack.licenseMgmt": "legacy/plugins/license_management",

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 '../../../../../infra/public';
+import { useTrackPageview } from '../../../../../../../plugins/observability/public';
 
 const Titles = styled.div`
   margin-bottom: ${px(units.plus)};

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 '../../../../../infra/public';
+import { useTrackPageview } from '../../../../../../../plugins/observability/public';
 import { PROJECTION } from '../../../../common/projections/typings';
 import { LocalUIFilters } from '../../shared/LocalUIFilters';
 

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 '../../../../../infra/public';
+import { useTrackPageview } from '../../../../../../../plugins/observability/public';
 import { PROJECTION } from '../../../../common/projections/typings';
 import { LocalUIFilters } from '../../shared/LocalUIFilters';
 import { useApmPluginContext } from '../../../hooks/useApmPluginContext';

x-pack/legacy/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();

x-pack/legacy/plugins/apm/public/components/app/Settings/AgentConfigurations/AddEditFlyout/saveConfig.ts

@@ -7,12 +7,12 @@
 import { i18n } from '@kbn/i18n';
 import { NotificationsStart } from 'kibana/public';
 import { APMClient } from '../../../../../services/rest/createCallApmApi';
-import { trackEvent } from '../../../../../../../infra/public/hooks/use_track_metric';
 import { isRumAgentName } from '../../../../../../common/agent_name';
 import {
   getOptionLabel,
   omitAllOption
 } from '../../../../../../common/agent_configuration_constants';
+import { UiTracker } from '../../../../../../../../../plugins/observability/public';
 
 interface Settings {
   transaction_sample_rate: number;
@@ -29,7 +29,8 @@ export async function saveConfig({
   transactionMaxSpans,
   configurationId,
   agentName,
-  toasts
+  toasts,
+  trackApmEvent
 }: {
   callApmApi: APMClient;
   serviceName: string;
@@ -40,8 +41,9 @@ export async function saveConfig({
   configurationId?: string;
   agentName?: string;
   toasts: NotificationsStart['toasts'];
+  trackApmEvent: UiTracker;
 }) {
-  trackEvent({ app: 'apm', name: 'save_agent_configuration' });
+  trackApmEvent({ metric: 'save_agent_configuration' });
 
   try {
     const settings: Settings = {

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 '../../../../../../infra/public';
+import { useTrackPageview } from '../../../../../../../../plugins/observability/public';
 import { AddEditFlyout } from './AddEditFlyout';
 
 export type Config = AgentConfigurationListAPIResponse[0];

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 '../../../../../infra/public';
+import { useTrackPageview } from '../../../../../../../plugins/observability/public';
 import { LocalUIFilters } from '../../shared/LocalUIFilters';
 import { PROJECTION } from '../../../../common/projections/typings';
 

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 '../../../../../infra/public';
+import { useTrackPageview } from '../../../../../../../plugins/observability/public';
 import { PROJECTION } from '../../../../common/projections/typings';
 import { LocalUIFilters } from '../../shared/LocalUIFilters';
 import { HeightRetainer } from '../../shared/HeightRetainer';

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 '../../../../../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';

x-pack/legacy/plugins/apm/public/components/shared/Links/InfraLink.test.tsx

@@ -11,13 +11,15 @@ import { InfraLink } from './InfraLink';
 
 test('InfraLink produces the correct URL', async () => {
   const href = await getRenderedHref(
-    () => <InfraLink path="/some/path" query={{ time: 1554687198 }} />,
+    () => (
+      <InfraLink app="metrics" path="/some/path" query={{ time: 1554687198 }} />
+    ),
     {
       search: '?rangeFrom=now-5h&rangeTo=now-2h'
     } as Location
   );
 
   expect(href).toMatchInlineSnapshot(
-    `"/basepath/app/infra#/some/path?time=1554687198"`
+    `"/basepath/app/metrics/some/path?time=1554687198"`
   );
 });

x-pack/legacy/plugins/apm/public/components/shared/Links/InfraLink.tsx

@@ -5,11 +5,11 @@
  */
 
 import { EuiLink, EuiLinkAnchorProps } from '@elastic/eui';
-import { compact } from 'lodash';
 import React from 'react';
 import url from 'url';
 import { fromQuery } from './url_helpers';
 import { useApmPluginContext } from '../../../hooks/useApmPluginContext';
+import { InfraAppId } from '../../../../../../../plugins/infra/public';
 
 interface InfraQueryParams {
   time?: number;
@@ -18,17 +18,18 @@ interface InfraQueryParams {
 }
 
 interface Props extends EuiLinkAnchorProps {
+  app: InfraAppId;
   path?: string;
   query: InfraQueryParams;
   children?: React.ReactNode;
 }
 
-export function InfraLink({ path, query = {}, ...rest }: Props) {
+export function InfraLink({ app, path, query = {}, ...rest }: Props) {
   const { core } = useApmPluginContext();
   const nextSearch = fromQuery(query);
   const href = url.format({
-    pathname: core.http.basePath.prepend('/app/infra'),
-    hash: compact([path, nextSearch]).join('?')
+    pathname: core.http.basePath.prepend(`/app/${app}${path}`),
+    search: nextSearch
   });
   return <EuiLink {...rest} href={href} />;
 }

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

@@ -24,6 +24,7 @@ import { InfraLink } from '../Links/InfraLink';
 import { useUrlParams } from '../../../hooks/useUrlParams';
 import { fromQuery } from '../Links/url_helpers';
 import { useApmPluginContext } from '../../../hooks/useApmPluginContext';
+import { InfraAppId } from '../../../../../../../plugins/infra/public';
 
 function getInfraMetricsQuery(transaction: Transaction) {
   const plus5 = new Date(transaction['@timestamp']);
@@ -56,6 +57,7 @@ interface InfraConfigItem {
   icon: string;
   label: string;
   condition?: boolean;
+  app: InfraAppId;
   path: string;
   query: Record<string, any>;
 }
@@ -86,6 +88,7 @@ export const TransactionActionMenu: FunctionComponent<Props> = (
         { defaultMessage: 'Show pod logs' }
       ),
       condition: !!podId,
+      app: 'logs',
       path: `/link-to/pod-logs/${podId}`,
       query: { time }
     },
@@ -96,6 +99,7 @@ export const TransactionActionMenu: FunctionComponent<Props> = (
         { defaultMessage: 'Show container logs' }
       ),
       condition: !!containerId,
+      app: 'logs',
       path: `/link-to/container-logs/${containerId}`,
       query: { time }
     },
@@ -106,6 +110,7 @@ export const TransactionActionMenu: FunctionComponent<Props> = (
         { defaultMessage: 'Show host logs' }
       ),
       condition: !!hostName,
+      app: 'logs',
       path: `/link-to/host-logs/${hostName}`,
       query: { time }
     },
@@ -116,6 +121,7 @@ export const TransactionActionMenu: FunctionComponent<Props> = (
         { defaultMessage: 'Show trace logs' }
       ),
       condition: true,
+      app: 'logs',
       path: `/link-to/logs`,
       query: {
         time,
@@ -129,6 +135,7 @@ export const TransactionActionMenu: FunctionComponent<Props> = (
         { defaultMessage: 'Show pod metrics' }
       ),
       condition: !!podId,
+      app: 'metrics',
       path: `/link-to/pod-detail/${podId}`,
       query: infraMetricsQuery
     },
@@ -139,6 +146,7 @@ export const TransactionActionMenu: FunctionComponent<Props> = (
         { defaultMessage: 'Show container metrics' }
       ),
       condition: !!containerId,
+      app: 'metrics',
       path: `/link-to/container-detail/${containerId}`,
       query: infraMetricsQuery
     },
@@ -149,17 +157,18 @@ export const TransactionActionMenu: FunctionComponent<Props> = (
         { defaultMessage: 'Show host metrics' }
       ),
       condition: !!hostName,
+      app: 'metrics',
       path: `/link-to/host-detail/${hostName}`,
       query: infraMetricsQuery
     }
   ];
 
   const infraItems = infraConfigItems.map(
-    ({ icon, label, condition, path, query }, index) => ({
+    ({ icon, label, condition, path, query, app }, index) => ({
       icon,
       key: `infra-link-${index}`,
       child: (
-        <InfraLink path={path} query={query}>
+        <InfraLink app={app} path={path} query={query}>
           {label}
         </InfraLink>
       ),

x-pack/legacy/plugins/apm/public/components/shared/TransactionBreakdown/TransactionBreakdownGraph/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, { useMemo } from 'react';
 import numeral from '@elastic/numeral';
 import { throttle } from 'lodash';
 import { NOT_AVAILABLE_LABEL } from '../../../../../common/i18n';
@@ -14,7 +14,7 @@ import { TransactionLineChart } from '../../charts/TransactionCharts/Transaction
 import { asPercent } from '../../../../utils/formatters';
 import { unit } from '../../../../style/variables';
 import { isValidCoordinateValue } from '../../../../utils/isValidCoordinateValue';
-import { trackEvent } from '../../../../../../infra/public/hooks/use_track_metric';
+import { useUiTracker } from '../../../../../../../../plugins/observability/public';
 
 interface Props {
   timeseries: TimeSeries[];
@@ -30,13 +30,14 @@ 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;
+  const trackApmEvent = useUiTracker({ app: 'apm' });
+  const handleHover = useMemo(
+    () =>
+      throttle(() => trackApmEvent({ metric: 'hover_breakdown_chart' }), 60000),
+    [trackApmEvent]
+  );
 
   return (
     <TransactionLineChart
@@ -46,7 +47,7 @@ const TransactionBreakdownGraph: React.FC<Props> = props => {
       yMax={1}
       height={unit * 12}
       stacked={true}
-      onHover={trackHoverBreakdownChart}
+      onHover={handleHover}
     />
   );
 };

x-pack/legacy/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 '../../../../../infra/public/lib/lib';
-import { FORMATTERS } from '../../../../../infra/public/utils/formatters';
+import {
+  FORMATTERS,
+  InfraFormatterType
+} from '../../../../../../../plugins/infra/public';
 
 interface TransactionBreakdownKpi {
   name: string;

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

@@ -10,8 +10,8 @@ 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';
 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.'
@@ -21,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;
 
@@ -38,9 +36,9 @@ const TransactionBreakdown: React.FC<{
             onToggleClick={() => {
               setShowChart(!showChart);
               if (showChart) {
-                trackEvent({ app: 'apm', name: 'hide_breakdown_chart' });
+                trackApmEvent({ metric: 'hide_breakdown_chart' });
               } else {
-                trackEvent({ app: 'apm', name: 'show_breakdown_chart' });
+                trackApmEvent({ metric: 'show_breakdown_chart' });
               }
             }}
           />