[7.x] [RUM Dashboard] Added rum core web vitals (#75685) (#77152)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Author: shahzad31

x-pack/plugins/apm/common/__snapshots__/elasticsearch_fieldnames.test.ts.snap

@@ -104,3 +104,9 @@ export const TRANSACTION_TIME_TO_FIRST_BYTE =
   'transaction.marks.agent.timeToFirstByte';
 export const TRANSACTION_DOM_INTERACTIVE =
   'transaction.marks.agent.domInteractive';
+
+export const FCP_FIELD = 'transaction.marks.agent.firstContentfulPaint';
+export const LCP_FIELD = 'transaction.marks.agent.largestContentfulPaint';
+export const TBT_FIELD = 'transaction.experience.tbt';
+export const FID_FIELD = 'transaction.experience.fid';
+export const CLS_FIELD = 'transaction.experience.cls';

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

@@ -56,7 +56,7 @@ export function ClientMetrics() {
       <EuiFlexItem grow={false} style={STAT_STYLE}>
         <EuiStat
           titleSize="s"
-          title={(data?.frontEnd?.value?.toFixed(2) ?? '-') + ' s'}
+          title={((data?.frontEnd?.value ?? 0)?.toFixed(2) ?? '-') + ' s'}
           description={I18LABELS.frontEnd}
           isLoading={status !== 'success'}
         />

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

@@ -0,0 +1,72 @@
+/*
+ * 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 React from 'react';
+import { EuiFlexItem, EuiToolTip } from '@elastic/eui';
+import styled from 'styled-components';
+
+const ColoredSpan = styled.div`
+  height: 16px;
+  width: 100%;
+  cursor: pointer;
+`;
+
+const getSpanStyle = (
+  position: number,
+  inFocus: boolean,
+  hexCode: string,
+  percentage: number
+) => {
+  let first = position === 0 || percentage === 100;
+  let last = position === 2 || percentage === 100;
+  if (percentage === 100) {
+    first = true;
+    last = true;
+  }
+
+  const spanStyle: any = {
+    backgroundColor: hexCode,
+    opacity: !inFocus ? 1 : 0.3,
+  };
+  let borderRadius = '';
+
+  if (first) {
+    borderRadius = '4px 0 0 4px';
+  }
+  if (last) {
+    borderRadius = '0 4px 4px 0';
+  }
+  if (first && last) {
+    borderRadius = '4px';
+  }
+  spanStyle.borderRadius = borderRadius;
+
+  return spanStyle;
+};
+
+export function ColorPaletteFlexItem({
+  hexCode,
+  inFocus,
+  percentage,
+  tooltip,
+  position,
+}: {
+  hexCode: string;
+  position: number;
+  inFocus: boolean;
+  percentage: number;
+  tooltip: string;
+}) {
+  const spanStyle = getSpanStyle(position, inFocus, hexCode, percentage);
+
+  return (
+    <EuiFlexItem key={hexCode} grow={false} style={{ width: percentage + '%' }}>
+      <EuiToolTip content={tooltip}>
+        <ColoredSpan style={spanStyle} />
+      </EuiToolTip>
+    </EuiFlexItem>
+  );
+}

x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/ColorPaletteFlexItem.tsx

@@ -0,0 +1,124 @@
+/*
+ * 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 {
+  EuiFlexGroup,
+  euiPaletteForStatus,
+  EuiSpacer,
+  EuiStat,
+} from '@elastic/eui';
+import React, { useState } from 'react';
+import { i18n } from '@kbn/i18n';
+import { PaletteLegends } from './PaletteLegends';
+import { ColorPaletteFlexItem } from './ColorPaletteFlexItem';
+import {
+  AVERAGE_LABEL,
+  GOOD_LABEL,
+  LESS_LABEL,
+  MORE_LABEL,
+  POOR_LABEL,
+} from './translations';
+
+export interface Thresholds {
+  good: string;
+  bad: string;
+}
+
+interface Props {
+  title: string;
+  value: string;
+  ranks?: number[];
+  loading: boolean;
+  thresholds: Thresholds;
+}
+
+export function getCoreVitalTooltipMessage(
+  thresholds: Thresholds,
+  position: number,
+  title: string,
+  percentage: number
+) {
+  const good = position === 0;
+  const bad = position === 2;
+  const average = !good && !bad;
+
+  return i18n.translate('xpack.apm.csm.dashboard.webVitals.palette.tooltip', {
+    defaultMessage:
+      '{percentage} % of users have {exp} experience because the {title} takes {moreOrLess} than {value}{averageMessage}.',
+    values: {
+      percentage,
+      title: title?.toLowerCase(),
+      exp: good ? GOOD_LABEL : bad ? POOR_LABEL : AVERAGE_LABEL,
+      moreOrLess: bad || average ? MORE_LABEL : LESS_LABEL,
+      value: good || average ? thresholds.good : thresholds.bad,
+      averageMessage: average
+        ? i18n.translate('xpack.apm.rum.coreVitals.averageMessage', {
+            defaultMessage: ' and less than {bad}',
+            values: { bad: thresholds.bad },
+          })
+        : '',
+    },
+  });
+}
+
+export function CoreVitalItem({
+  loading,
+  title,
+  value,
+  thresholds,
+  ranks = [100, 0, 0],
+}: Props) {
+  const palette = euiPaletteForStatus(3);
+
+  const [inFocusInd, setInFocusInd] = useState<number | null>(null);
+
+  const biggestValIndex = ranks.indexOf(Math.max(...ranks));
+
+  return (
+    <>
+      <EuiStat
+        titleSize="s"
+        title={value}
+        description={title}
+        titleColor={palette[biggestValIndex]}
+        isLoading={loading}
+      />
+      <EuiSpacer size="s" />
+      <EuiFlexGroup
+        gutterSize="none"
+        alignItems="flexStart"
+        style={{ maxWidth: 340 }}
+        responsive={false}
+      >
+        {palette.map((hexCode, ind) => (
+          <ColorPaletteFlexItem
+            hexCode={hexCode}
+            key={hexCode}
+            position={ind}
+            inFocus={inFocusInd !== ind && inFocusInd !== null}
+            percentage={ranks[ind]}
+            tooltip={getCoreVitalTooltipMessage(
+              thresholds,
+              ind,
+              title,
+              ranks[ind]
+            )}
+          />
+        ))}
+      </EuiFlexGroup>
+      <EuiSpacer size="s" />
+      <PaletteLegends
+        ranks={ranks}
+        thresholds={thresholds}
+        title={title}
+        onItemHover={(ind) => {
+          setInFocusInd(ind);
+        }}
+      />
+      <EuiSpacer size="xl" />
+    </>
+  );
+}