[7.x] [UX] Add core web vitals in obsv homepage (#78976)

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: '',
+      },
+    },
+  });
+}