[UX] Add core web vitals in obsv homepage

x-pack/plugins/apm/public/components/app/RumDashboard/UXMetrics/KeyUXMetrics.tsx

@@ -7,16 +7,16 @@
 import React from 'react';
 import { EuiFlexItem, EuiStat, EuiFlexGroup } from '@elastic/eui';
 import numeral from '@elastic/numeral';
-import { UXMetrics } from './index';
 import {
   FCP_LABEL,
   LONGEST_LONG_TASK,
   NO_OF_LONG_TASK,
   SUM_LONG_TASKS,
   TBT_LABEL,
-} from '../CoreVitals/translations';
+} from './translations';
 import { useFetcher } from '../../../../hooks/useFetcher';
 import { useUxQuery } from '../hooks/useUxQuery';
+import { UXMetrics } from '../../../../../../observability/public';
 
 export function formatToSec(
   value?: number | string,

x-pack/plugins/apm/public/components/app/RumDashboard/UXMetrics/index.tsx

@@ -4,36 +4,20 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useState } from 'react';
+import React from 'react';
 import {
-  EuiButtonIcon,
   EuiFlexGroup,
   EuiFlexItem,
   EuiHorizontalRule,
-  EuiLink,
   EuiPanel,
-  EuiPopover,
   EuiSpacer,
   EuiTitle,
-  EuiText,
 } from '@elastic/eui';
-import { FormattedMessage } from '@kbn/i18n/react';
 import { I18LABELS } from '../translations';
-import { CoreVitals } from '../CoreVitals';
 import { KeyUXMetrics } from './KeyUXMetrics';
 import { useFetcher } from '../../../../hooks/useFetcher';
 import { useUxQuery } from '../hooks/useUxQuery';
-
-export interface UXMetrics {
-  cls: string;
-  fid: number;
-  lcp: number;
-  tbt: number;
-  fcp: number;
-  lcpRanks: number[];
-  fidRanks: number[];
-  clsRanks: number[];
-}
+import { CoreVitals } from '../../../../../../observability/public';
 
 export function UXMetrics() {
   const uxQuery = useUxQuery();
@@ -53,10 +37,6 @@ export function UXMetrics() {
     [uxQuery]
   );
 
-  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-
-  const closePopover = () => setIsPopoverOpen(false);
-
   return (
     <EuiPanel>
       <EuiFlexGroup justifyContent="spaceBetween" wrap>
@@ -72,39 +52,6 @@ export function UXMetrics() {
 
       <EuiFlexGroup justifyContent="spaceBetween" wrap>
         <EuiFlexItem grow={1} data-cy={`client-metrics`}>
-          <EuiTitle size="xs">
-            <h3>
-              {I18LABELS.coreWebVitals}
-              <EuiPopover
-                isOpen={isPopoverOpen}
-                button={
-                  <EuiButtonIcon
-                    onClick={() => setIsPopoverOpen(true)}
-                    color={'text'}
-                    iconType={'questionInCircle'}
-                  />
-                }
-                closePopover={closePopover}
-              >
-                <div style={{ width: '300px' }}>
-                  <EuiText>
-                    <FormattedMessage
-                      id="xpack.apm.ux.dashboard.webCoreVitals.help"
-                      defaultMessage="Learn more about"
-                    />
-                    <EuiLink
-                      href="https://web.dev/vitals/"
-                      external
-                      target="_blank"
-                    >
-                      {' '}
-                      {I18LABELS.coreWebVitals}
-                    </EuiLink>
-                  </EuiText>
-                </div>
-              </EuiPopover>
-            </h3>
-          </EuiTitle>
           <EuiSpacer size="s" />
           <CoreVitals data={data} loading={status !== 'success'} />
         </EuiFlexItem>

x-pack/plugins/apm/public/components/app/RumDashboard/UXMetrics/translations.ts

@@ -0,0 +1,36 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+
+export const FCP_LABEL = i18n.translate('xpack.apm.rum.coreVitals.fcp', {
+  defaultMessage: 'First contentful paint',
+});
+
+export const TBT_LABEL = i18n.translate('xpack.apm.rum.coreVitals.tbt', {
+  defaultMessage: 'Total blocking time',
+});
+
+export const NO_OF_LONG_TASK = i18n.translate(
+  'xpack.apm.rum.uxMetrics.noOfLongTasks',
+  {
+    defaultMessage: 'No. of long tasks',
+  }
+);
+
+export const LONGEST_LONG_TASK = i18n.translate(
+  'xpack.apm.rum.uxMetrics.longestLongTasks',
+  {
+    defaultMessage: 'Longest long task duration',
+  }
+);
+
+export const SUM_LONG_TASKS = i18n.translate(
+  'xpack.apm.rum.uxMetrics.sumLongTasks',
+  {
+    defaultMessage: 'Total long tasks duration',
+  }
+);

x-pack/plugins/apm/public/components/app/RumDashboard/ux_overview_fetchers.ts

@@ -0,0 +1,49 @@
+/*
+ * 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 {
+  FetchDataParams,
+  HasDataParams,
+  UxFetchDataResponse,
+} from '../../../../../observability/public/';
+import { callApmApi } from '../../../services/rest/createCallApmApi';
+
+export { createCallApmApi } from '../../../services/rest/createCallApmApi';
+
+export const fetchUxOverviewDate = async ({
+  absoluteTime,
+  relativeTime,
+  serviceName,
+}: FetchDataParams): Promise<UxFetchDataResponse> => {
+  const data = await callApmApi({
+    pathname: '/api/apm/rum-client/web-core-vitals',
+    params: {
+      query: {
+        start: new Date(absoluteTime.start).toISOString(),
+        end: new Date(absoluteTime.end).toISOString(),
+        uiFilters: `{"serviceName":["${serviceName}"]}`,
+      },
+    },
+  });
+
+  return {
+    coreWebVitals: data,
+    appLink: `/app/ux?rangeFrom=${relativeTime.start}&rangeTo=${relativeTime.end}`,
+  };
+};
+
+export async function hasRumData({ absoluteTime }: HasDataParams) {
+  return await callApmApi({
+    pathname: '/api/apm/observability_overview/has_rum_data',
+    params: {
+      query: {
+        start: new Date(absoluteTime.start).toISOString(),
+        end: new Date(absoluteTime.end).toISOString(),
+        uiFilters: '',
+      },
+    },
+  });
+}

x-pack/plugins/apm/public/plugin.ts

@@ -7,6 +7,7 @@
 import { ConfigSchema } from '.';
 import {
   FetchDataParams,
+  HasDataParams,
   ObservabilityPluginSetup,
 } from '../../observability/public';
 import {
@@ -100,6 +101,30 @@ export class ApmPlugin implements Plugin<ApmPluginSetup, ApmPluginStart> {
           return await dataHelper.fetchOverviewPageData(params);
         },
       });
+
+      const getUxDataHelper = async () => {
+        const {
+          fetchUxOverviewDate,
+          hasRumData,
+          createCallApmApi,
+        } = await import('./components/app/RumDashboard/ux_overview_fetchers');
+        // have to do this here as well in case app isn't mounted yet
+        createCallApmApi(core.http);
+
+        return { fetchUxOverviewDate, hasRumData };
+      };
+
+      plugins.observability.dashboard.register({
+        appName: 'ux',
+        hasData: async (params?: HasDataParams) => {
+          const dataHelper = await getUxDataHelper();
+          return await dataHelper.hasRumData(params!);
+        },
+        fetchData: async (params: FetchDataParams) => {
+          const dataHelper = await getUxDataHelper();
+          return await dataHelper.fetchUxOverviewDate(params);
+        },
+      });
     }
 
     core.application.register({

x-pack/plugins/apm/server/lib/rum_client/has_rum_data.ts

@@ -0,0 +1,49 @@
+/*
+ * 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 {
+  Setup,
+  SetupTimeRange,
+  SetupUIFilters,
+} from '../helpers/setup_request';
+import { SERVICE_NAME } from '../../../common/elasticsearch_fieldnames';
+import { getRumPageLoadTransactionsProjection } from '../../projections/rum_page_load_transactions';
+import { mergeProjection } from '../../projections/util/merge_projection';
+
+export async function hasRumData({
+  setup,
+}: {
+  setup: Setup & SetupTimeRange & SetupUIFilters;
+}) {
+  try {
+    const projection = getRumPageLoadTransactionsProjection({
+      setup,
+    });
+
+    const params = mergeProjection(projection, {
+      body: {
+        size: 0,
+        aggs: {
+          services: {
+            terms: {
+              field: SERVICE_NAME,
+              size: 1,
+            },
+          },
+        },
+      },
+    });
+
+    const { apmEventClient } = setup;
+
+    const response = await apmEventClient.search(params);
+    return {
+      hasData: response.hits.total.value > 0,
+      serviceName: response.aggregations?.services?.buckets?.[0]?.key,
+    };
+  } catch (e) {
+    return false;
+  }
+}

x-pack/plugins/apm/server/routes/create_apm_api.ts

@@ -79,6 +79,7 @@ import {
   anomalyDetectionEnvironmentsRoute,
 } from './settings/anomaly_detection';
 import {
+  rumHasDataRoute,
   rumClientMetricsRoute,
   rumJSErrors,
   rumLongTaskMetrics,
@@ -186,7 +187,8 @@ const createApmApi = () => {
     .add(rumWebCoreVitals)
     .add(rumJSErrors)
     .add(rumUrlSearch)
-    .add(rumLongTaskMetrics);
+    .add(rumLongTaskMetrics)
+    .add(rumHasDataRoute);
 
   return api;
 };

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

@@ -18,6 +18,7 @@ import { getWebCoreVitals } from '../lib/rum_client/get_web_core_vitals';
 import { getJSErrors } from '../lib/rum_client/get_js_errors';
 import { getLongTaskMetrics } from '../lib/rum_client/get_long_task_metrics';
 import { getUrlSearch } from '../lib/rum_client/get_url_search';
+import { hasRumData } from '../lib/rum_client/has_rum_data';
 
 export const percentileRangeRt = t.partial({
   minPercentile: t.string,
@@ -227,3 +228,14 @@ export const rumJSErrors = createRoute(() => ({
     });
   },
 }));
+
+export const rumHasDataRoute = createRoute(() => ({
+  path: '/api/apm/observability_overview/has_rum_data',
+  params: {
+    query: t.intersection([uiFiltersRt, rangeRt]),
+  },
+  handler: async ({ context, request }) => {
+    const setup = await setupRequest(context, request);
+    return await hasRumData({ setup });
+  },
+}));