Migrate client metrics from APM to UX

x-pack/plugins/apm/server/routes/rum_client/queries.test.ts

@@ -9,7 +9,6 @@ import {
   SearchParamsMock,
   inspectSearchParams,
 } from '../../utils/test_helpers';
-import { getClientMetrics } from './get_client_metrics';
 import { getPageViewTrends } from './get_page_view_trends';
 import { getPageLoadDistribution } from './get_page_load_distribution';
 import { getLongTaskMetrics } from './get_long_task_metrics';
@@ -24,20 +23,6 @@ describe('rum client dashboard queries', () => {
     mock.teardown();
   });
 
-  it('fetches client metrics', async () => {
-    mock = await inspectSearchParams(
-      (setup) =>
-        getClientMetrics({
-          setup,
-          start: 0,
-          end: 50000,
-        }),
-      { uiFilters: { environment: 'staging' } }
-    );
-
-    expect(mock.params).toMatchSnapshot();
-  });
-
   it('fetches page view trends', async () => {
     mock = await inspectSearchParams(
       (setup) =>

x-pack/plugins/apm/server/routes/rum_client/route.ts

@@ -8,7 +8,6 @@ import * as t from 'io-ts';
 import { Logger } from '@kbn/core/server';
 import { isoToEpochRt } from '@kbn/io-ts-utils';
 import { setupRequest, Setup } from '../../lib/helpers/setup_request';
-import { getClientMetrics } from './get_client_metrics';
 import { getJSErrors } from './get_js_errors';
 import { getLongTaskMetrics } from './get_long_task_metrics';
 import { getPageLoadDistribution } from './get_page_load_distribution';
@@ -61,36 +60,6 @@ const uxQueryRt = t.intersection([
   t.partial({ urlQuery: t.string, percentile: t.string }),
 ]);
 
-const rumClientMetricsRoute = createApmServerRoute({
-  endpoint: 'GET /internal/apm/ux/client-metrics',
-  params: t.type({
-    query: uxQueryRt,
-  }),
-  options: { tags: ['access:apm'] },
-  handler: async (
-    resources
-  ): Promise<{
-    pageViews: { value: number };
-    totalPageLoadDuration: { value: number };
-    backEnd: { value: number };
-    frontEnd: { value: number };
-  }> => {
-    const setup = await setupUXRequest(resources);
-
-    const {
-      query: { urlQuery, percentile, start, end },
-    } = resources.params;
-
-    return getClientMetrics({
-      setup,
-      urlQuery,
-      percentile: percentile ? Number(percentile) : undefined,
-      start,
-      end,
-    });
-  },
-});
-
 const rumPageLoadDistributionRoute = createApmServerRoute({
   endpoint: 'GET /internal/apm/ux/page-load-distribution',
   params: t.type({
@@ -376,7 +345,6 @@ async function setupUXRequest<TParams extends SetupUXRequestParams>(
 }
 
 export const rumRouteRepository = {
-  ...rumClientMetricsRoute,
   ...rumPageLoadDistributionRoute,
   ...rumPageLoadDistBreakdownRoute,
   ...rumPageViewsTrendRoute,

x-pack/plugins/ux/common/elasticsearch_fieldnames.ts

@@ -13,6 +13,8 @@ export const AGENT = 'agent';
 export const AGENT_NAME = 'agent.name';
 export const AGENT_VERSION = 'agent.version';
 
+export const PROCESSOR_EVENT = 'processor.event';
+
 export const URL_FULL = 'url.full';
 export const USER_AGENT_NAME = 'user_agent.name';
 

x-pack/plugins/ux/public/components/app/rum_dashboard/client_metrics/metrics.tsx

@@ -16,9 +16,8 @@ import {
   EuiToolTip,
   EuiIconTip,
 } from '@elastic/eui';
-import { useFetcher } from '../../../../hooks/use_fetcher';
+import { useClientMetricsQuery } from '../../../../hooks/use_client_metrics_query';
 import { I18LABELS } from '../translations';
-import { useUxQuery } from '../hooks/use_ux_query';
 import { formatToSec } from '../ux_metrics/key_ux_metrics';
 import { CsmSharedContext } from '../csm_shared_context';
 
@@ -49,23 +48,7 @@ function PageViewsTotalTitle({ pageViews }: { pageViews?: number }) {
 }
 
 export function Metrics() {
-  const uxQuery = useUxQuery();
-
-  const { data, status } = useFetcher(
-    (callApmApi) => {
-      if (uxQuery) {
-        return callApmApi('GET /internal/apm/ux/client-metrics', {
-          params: {
-            query: {
-              ...uxQuery,
-            },
-          },
-        });
-      }
-      return Promise.resolve(null);
-    },
-    [uxQuery]
-  );
+  const { data, loading } = useClientMetricsQuery();
 
   const { setSharedData } = useContext(CsmSharedContext);
 
@@ -90,7 +73,7 @@ export function Metrics() {
               />
             </>
           }
-          isLoading={status !== 'success'}
+          isLoading={!!loading}
         />
       </EuiFlexItem>
       <EuiFlexItem style={STAT_STYLE}>
@@ -106,7 +89,7 @@ export function Metrics() {
               />
             </>
           }
-          isLoading={status !== 'success'}
+          isLoading={!!loading}
         />
       </EuiFlexItem>
       <EuiFlexItem style={STAT_STYLE}>
@@ -122,15 +105,15 @@ export function Metrics() {
               />
             </>
           }
-          isLoading={status !== 'success'}
+          isLoading={!!loading}
         />
       </EuiFlexItem>
       <EuiFlexItem style={STAT_STYLE}>
         <EuiStat
           titleSize="l"
           title={<PageViewsTotalTitle pageViews={data?.pageViews?.value} />}
           description={I18LABELS.pageViews}
-          isLoading={status !== 'success'}
+          isLoading={!!loading}
         />
       </EuiFlexItem>
     </ClFlexGroup>

x-pack/plugins/ux/public/hooks/use_client_metrics_query.ts

@@ -0,0 +1,59 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { useEsSearch } from '@kbn/observability-plugin/public';
+import { useMemo } from 'react';
+import { useDataView } from '../components/app/rum_dashboard/local_uifilters/use_data_view';
+import { useLegacyUrlParams } from '../context/url_params_context/use_url_params';
+import { callDateMath } from '../services/data/call_date_math';
+import { clientMetricsQuery } from '../services/data/client_metrics_query';
+
+export function useClientMetricsQuery() {
+  const {
+    rangeId,
+    urlParams: { start, end, percentile = 50, searchTerm },
+    uxUiFilters,
+  } = useLegacyUrlParams();
+  const { dataViewTitle } = useDataView();
+  const { data: esQueryResponse, loading } = useEsSearch(
+    {
+      index: dataViewTitle,
+      ...clientMetricsQuery(
+        callDateMath(start),
+        callDateMath(end),
+        percentile,
+        searchTerm,
+        uxUiFilters
+      ),
+    },
+    [start, end, percentile, searchTerm, uxUiFilters, dataViewTitle, rangeId],
+    { name: 'UxClientMetrics' }
+  );
+
+  const data = useMemo(() => {
+    if (!esQueryResponse) return {};
+
+    const {
+      hasFetchStartField: { backEnd, totalPageLoadDuration },
+    } = esQueryResponse.aggregations!;
+
+    const pkey = percentile.toFixed(1);
+
+    const totalPageLoadDurationValue = totalPageLoadDuration.values[pkey] ?? 0;
+    const totalPageLoadDurationValueMs = totalPageLoadDurationValue / 1000; // Microseconds to milliseconds
+    const backendValue = backEnd.values[pkey] ?? 0;
+
+    return {
+      pageViews: { value: (esQueryResponse.hits.total as any as number) ?? 0 },
+      totalPageLoadDuration: { value: totalPageLoadDurationValueMs },
+      backEnd: { value: backendValue },
+      frontEnd: { value: totalPageLoadDurationValueMs - backendValue },
+    };
+  }, [esQueryResponse, percentile]);
+
+  return { data, loading };
+}