[UX Dashboard] Move core web vitals query from APM routes to UX plugin

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

@@ -13,8 +13,6 @@ 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';
-import { getWebCoreVitals } from './get_web_core_vitals';
-import { ENVIRONMENT_ALL } from '../../../common/environment_filter_values';
 
 describe('rum client dashboard queries', () => {
   let mock: SearchParamsMock;
@@ -66,19 +64,6 @@ describe('rum client dashboard queries', () => {
     expect(mock.params).toMatchSnapshot();
   });
 
-  it('fetches rum core vitals', async () => {
-    mock = await inspectSearchParams(
-      (setup) =>
-        getWebCoreVitals({
-          setup,
-          start: 0,
-          end: 50000,
-        }),
-      { uiFilters: { environment: ENVIRONMENT_ALL.value } }
-    );
-    expect(mock.params).toMatchSnapshot();
-  });
-
   it('fetches long task metrics', async () => {
     mock = await inspectSearchParams((setup) =>
       getLongTaskMetrics({

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

@@ -14,7 +14,6 @@ import { getPageLoadDistribution } from './get_page_load_distribution';
 import { getPageViewTrends } from './get_page_view_trends';
 import { getPageLoadDistBreakdown } from './get_pl_dist_breakdown';
 import { getVisitorBreakdown } from './get_visitor_breakdown';
-import { getWebCoreVitals } from './get_web_core_vitals';
 import { hasRumData } from './has_rum_data';
 import { createApmServerRoute } from '../apm_routes/create_apm_server_route';
 import { rangeRt } from '../default_api_types';
@@ -214,41 +213,6 @@ const rumVisitorsBreakdownRoute = createApmServerRoute({
   },
 });
 
-const rumWebCoreVitals = createApmServerRoute({
-  endpoint: 'GET /internal/apm/ux/web-core-vitals',
-  params: t.type({
-    query: uxQueryRt,
-  }),
-  options: { tags: ['access:apm'] },
-  handler: async (
-    resources
-  ): Promise<{
-    coreVitalPages: number;
-    cls: number | null;
-    fid: number | null | undefined;
-    lcp: number | null | undefined;
-    tbt: number;
-    fcp: number | null | undefined;
-    lcpRanks: number[];
-    fidRanks: number[];
-    clsRanks: number[];
-  }> => {
-    const setup = await setupUXRequest(resources);
-
-    const {
-      query: { urlQuery, percentile, start, end },
-    } = resources.params;
-
-    return getWebCoreVitals({
-      setup,
-      urlQuery,
-      percentile: percentile ? Number(percentile) : undefined,
-      start,
-      end,
-    });
-  },
-});
-
 const rumLongTaskMetrics = createApmServerRoute({
   endpoint: 'GET /internal/apm/ux/long-task-metrics',
   params: t.type({
@@ -338,7 +302,6 @@ export const rumRouteRepository = {
   ...rumPageLoadDistBreakdownRoute,
   ...rumPageViewsTrendRoute,
   ...rumVisitorsBreakdownRoute,
-  ...rumWebCoreVitals,
   ...rumLongTaskMetrics,
   ...rumHasDataRoute,
 };

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

@@ -0,0 +1,56 @@
+/*
+ * 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 { loginToKibana, waitForLoadingToFinish } from './utils';
+
+journey('Core Web Vitals', 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('Check Core Web Vitals', async () => {
+    expect(await page.$('text=Largest contentful paint'));
+    expect(await page.$('text=First input delay'));
+    expect(await page.$('text=Cumulative layout shift'));
+    expect(
+      await page.innerText('text=1.93 s', {
+        strict: true,
+        timeout: 29000,
+      })
+    ).toEqual('1.93 s');
+    expect(await page.innerText('text=5 ms', { strict: true })).toEqual('5 ms');
+    expect(await page.innerText('text=0.003', { strict: true })).toEqual(
+      '0.003'
+    );
+  });
+});

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

@@ -5,5 +5,6 @@
  * 2.0.
  */
 
+export * from './core_web_vitals';
 export * from './url_ux_query.journey';
 export * from './ux_js_errors.journey';

x-pack/plugins/ux/public/components/app/rum_dashboard/ux_metrics/index.tsx

@@ -17,11 +17,11 @@ import {
 import { getCoreVitalsComponent } from '@kbn/observability-plugin/public';
 import { I18LABELS } from '../translations';
 import { KeyUXMetrics } from './key_ux_metrics';
-import { useFetcher } from '../../../../hooks/use_fetcher';
 import { useUxQuery } from '../hooks/use_ux_query';
 import { CsmSharedContext } from '../csm_shared_context';
 import { useLegacyUrlParams } from '../../../../context/url_params_context/use_url_params';
 import { getPercentileLabel } from './translations';
+import { useCoreWebVitalsQuery } from '../../../../hooks/use_core_web_vitals_query';
 
 export function UXMetrics() {
   const {
@@ -30,19 +30,9 @@ export function UXMetrics() {
 
   const uxQuery = useUxQuery();
 
-  const { data, status } = useFetcher(
-    (callApmApi) => {
-      if (uxQuery) {
-        return callApmApi('GET /internal/apm/ux/web-core-vitals', {
-          params: {
-            query: uxQuery,
-          },
-        });
-      }
-      return Promise.resolve(null);
-    },
-    [uxQuery]
-  );
+  const { data, loading: loadingResponse } = useCoreWebVitalsQuery(uxQuery);
+
+  const loading = loadingResponse ?? true;
 
   const {
     sharedData: { totalPageViews },
@@ -53,11 +43,11 @@ export function UXMetrics() {
       getCoreVitalsComponent({
         data,
         totalPageViews,
-        loading: status !== 'success',
+        loading,
         displayTrafficMetric: true,
       }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [status]
+    [loading]
   );
 
   return (
@@ -70,7 +60,7 @@ export function UXMetrics() {
             </h3>
           </EuiTitle>
           <EuiSpacer size="s" />
-          <KeyUXMetrics data={data} loading={status !== 'success'} />
+          <KeyUXMetrics data={data} loading={loading} />
         </EuiFlexItem>
       </EuiFlexGroup>
       <EuiSpacer size="xs" />