PR Feedback

Author: shahzad31

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

@@ -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/CoreVitals/CoreVitalItem.tsx

@@ -90,7 +90,8 @@ export function CoreVitalItem({
       <EuiFlexGroup
         gutterSize="none"
         alignItems="flexStart"
-        style={{ width: 340 }}
+        style={{ maxWidth: 340 }}
+        responsive={false}
       >
         {palette.map((hexCode, ind) => (
           <ColorPaletteFlexItem

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

@@ -39,7 +39,7 @@ export function PaletteLegends({
   const palette = euiPaletteForStatus(3);
 
   return (
-    <EuiFlexGroup>
+    <EuiFlexGroup responsive={false}>
       {palette.map((color, ind) => (
         <EuiFlexItem
           key={ind}

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

@@ -37,31 +37,33 @@ export function CoreVitals() {
     [start, end, serviceName, uiFilters]
   );
 
+  const { lcp, lcpRanks, fid, fidRanks, cls, clsRanks } = data || {};
+
   return (
     <EuiFlexGroup gutterSize="xl" justifyContent={'spaceBetween'}>
       <EuiFlexItem>
         <CoreVitalItem
           title={LCP_LABEL}
-          value={data?.lcp + 's' ?? ''}
-          ranks={data?.lcpRanks}
+          value={lcp ? lcp + 's' : '0'}
+          ranks={lcpRanks}
           loading={status !== 'success'}
           thresholds={CoreVitalsThresholds.LCP}
         />
       </EuiFlexItem>
       <EuiFlexItem>
         <CoreVitalItem
           title={FID_LABEL}
-          value={data?.fid + 's' ?? ''}
-          ranks={data?.fidRanks}
+          value={fid ? fid + 's' : '0'}
+          ranks={fidRanks}
           loading={status !== 'success'}
           thresholds={CoreVitalsThresholds.FID}
         />
       </EuiFlexItem>
       <EuiFlexItem>
         <CoreVitalItem
           title={CLS_LABEL}
-          value={data?.cls ?? '0'}
-          ranks={data?.clsRanks}
+          value={cls ?? '0'}
+          ranks={clsRanks}
           loading={status !== 'success'}
           thresholds={CoreVitalsThresholds.CLS}
         />