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';
@@ -21,20 +20,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

@@ -7,7 +7,6 @@
 import * as t from 'io-ts';
 import { Logger } from '@kbn/core/server';
 import { setupRequest, Setup } from '../../lib/helpers/setup_request';
-import { getClientMetrics } from './get_client_metrics';
 import { getLongTaskMetrics } from './get_long_task_metrics';
 import { getPageLoadDistribution } from './get_page_load_distribution';
 import { getPageViewTrends } from './get_page_view_trends';
@@ -57,36 +56,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({
@@ -270,7 +239,6 @@ async function setupUXRequest<TParams extends SetupUXRequestParams>(
 }
 
 export const rumRouteRepository = {
-  ...rumClientMetricsRoute,
   ...rumPageLoadDistributionRoute,
   ...rumPageLoadDistBreakdownRoute,
   ...rumPageViewsTrendRoute,

x-pack/plugins/ux/e2e/journeys/index.ts

@@ -8,3 +8,4 @@
 export * from './core_web_vitals';
 export * from './url_ux_query.journey';
 export * from './ux_js_errors.journey';
+export * from './ux_client_metrics.journey';

x-pack/plugins/ux/e2e/journeys/ux_client_metrics.journey.ts

@@ -0,0 +1,78 @@
+/*
+ * 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 { journey, step, expect, before } from '@elastic/synthetics';
+import { UXDashboardDatePicker } from '../page_objects/date_picker';
+import { byTestId, loginToKibana, waitForLoadingToFinish } from './utils';
+
+const totalPageLoadValue = '4.24 s';
+const totalPageLoadLabel = `Total
+
+${totalPageLoadValue}`;
+const backendLabel = `Backend
+
+359 ms`;
+const frontendLabel = `Frontend
+
+3.88 s`;
+const pageViewsLabel = `Total page views
+
+524`;
+
+journey('UX ClientMetrics', async ({ page, params }) => {
+  before(async () => {
+    await waitForLoadingToFinish({ page });
+  });
+
+  const queryParams = {
+    percentile: '50',
+    rangeFrom: '2020-05-18T11:51:00.000Z',
+    rangeTo: '2021-10-30T06:37:15.536Z',
+  };
+  const queryString = new URLSearchParams(queryParams).toString();
+
+  const baseUrl = `${params.kibanaUrl}/app/ux`;
+
+  step('Go to UX Dashboard', async () => {
+    await page.goto(`${baseUrl}?${queryString}`, {
+      waitUntil: 'networkidle',
+    });
+    await loginToKibana({
+      page,
+      user: { username: 'viewer_user', password: 'changeme' },
+    });
+  });
+
+  step('Set date range', async () => {
+    const datePickerPage = new UXDashboardDatePicker(page);
+    await datePickerPage.setDefaultE2eRange();
+  });
+
+  step('Confirm metrics values', async () => {
+    // Wait until chart data is loaded
+    page.waitForLoadState('networkidle');
+    await page.waitForSelector(`text=${totalPageLoadValue}`);
+
+    const totalPageLoad = await (
+      await page.waitForSelector(byTestId('uxClientMetrics-totalPageLoad'))
+    ).innerText();
+    const backend = await (
+      await page.waitForSelector(byTestId('uxClientMetrics-backend'))
+    ).innerText();
+    const frontend = await (
+      await page.waitForSelector(byTestId('uxClientMetrics-frontend'))
+    ).innerText();
+    const pageViews = await (
+      await page.waitForSelector(byTestId('uxClientMetrics-pageViews'))
+    ).innerText();
+
+    expect(totalPageLoad).toBe(totalPageLoadLabel);
+    expect(backend).toBe(backendLabel);
+    expect(frontend).toBe(frontendLabel);
+    expect(pageViews).toBe(pageViewsLabel);
+  });
+});

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);
 
@@ -79,6 +62,7 @@ export function Metrics() {
     <ClFlexGroup wrap responsive={false}>
       <EuiFlexItem style={STAT_STYLE}>
         <EuiStat
+          data-test-subj={'uxClientMetrics-totalPageLoad'}
           titleSize="l"
           title={formatTitle('ms', data?.totalPageLoadDuration?.value)}
           description={
@@ -90,11 +74,12 @@ export function Metrics() {
               />
             </>
           }
-          isLoading={status !== 'success'}
+          isLoading={!!loading}
         />
       </EuiFlexItem>
       <EuiFlexItem style={STAT_STYLE}>
         <EuiStat
+          data-test-subj={'uxClientMetrics-backend'}
           titleSize="l"
           title={formatTitle('ms', data?.backEnd?.value)}
           description={
@@ -106,11 +91,12 @@ export function Metrics() {
               />
             </>
           }
-          isLoading={status !== 'success'}
+          isLoading={!!loading}
         />
       </EuiFlexItem>
       <EuiFlexItem style={STAT_STYLE}>
         <EuiStat
+          data-test-subj={'uxClientMetrics-frontend'}
           titleSize="l"
           title={formatTitle('ms', data?.frontEnd?.value)}
           description={
@@ -122,15 +108,16 @@ export function Metrics() {
               />
             </>
           }
-          isLoading={status !== 'success'}
+          isLoading={!!loading}
         />
       </EuiFlexItem>
       <EuiFlexItem style={STAT_STYLE}>
         <EuiStat
+          data-test-subj={'uxClientMetrics-pageViews'}
           titleSize="l"
           title={<PageViewsTotalTitle pageViews={data?.pageViews?.value} />}
           description={I18LABELS.pageViews}
-          isLoading={status !== 'success'}
+          isLoading={!!loading}
         />
       </EuiFlexItem>
     </ClFlexGroup>