Browse Source

fix(webvitals): Hides webvital performance score ring legend when weight of segment is 0. (#62747)

Hides webvital performance score ring legend when weight of segment is
0.
Also fix a bug with count_scores not being properly checked due to
incorrect arg.
edwardgou-sentry 1 year ago
parent
commit
f6eca71acf

+ 50 - 40
static/app/views/performance/browser/webVitals/components/performanceScoreRingWithTooltips.tsx

@@ -228,46 +228,56 @@ function PerformanceScoreRingWithTooltips({
       <svg height={height} width={width}>
         {!hideWebVitalLabels && (
           <Fragment>
-            <WebVitalLabel
-              {...commonWebVitalLabelProps}
-              webVital="lcp"
-              coordinates={{
-                x: lcpX,
-                y: lcpY,
-              }}
-            />
-            <WebVitalLabel
-              {...commonWebVitalLabelProps}
-              webVital="fcp"
-              coordinates={{
-                x: fcpX,
-                y: fcpY,
-              }}
-            />
-            <WebVitalLabel
-              {...commonWebVitalLabelProps}
-              webVital="fid"
-              coordinates={{
-                x: fidX,
-                y: fidY,
-              }}
-            />
-            <WebVitalLabel
-              {...commonWebVitalLabelProps}
-              webVital="cls"
-              coordinates={{
-                x: clsX,
-                y: clsY,
-              }}
-            />
-            <WebVitalLabel
-              {...commonWebVitalLabelProps}
-              webVital="ttfb"
-              coordinates={{
-                x: ttfbX,
-                y: ttfbY,
-              }}
-            />
+            {weights.lcp > 0 && (
+              <WebVitalLabel
+                {...commonWebVitalLabelProps}
+                webVital="lcp"
+                coordinates={{
+                  x: lcpX,
+                  y: lcpY,
+                }}
+              />
+            )}
+            {weights.fcp > 0 && (
+              <WebVitalLabel
+                {...commonWebVitalLabelProps}
+                webVital="fcp"
+                coordinates={{
+                  x: fcpX,
+                  y: fcpY,
+                }}
+              />
+            )}
+            {weights.fid > 0 && (
+              <WebVitalLabel
+                {...commonWebVitalLabelProps}
+                webVital="fid"
+                coordinates={{
+                  x: fidX,
+                  y: fidY,
+                }}
+              />
+            )}
+            {weights.cls > 0 && (
+              <WebVitalLabel
+                {...commonWebVitalLabelProps}
+                webVital="cls"
+                coordinates={{
+                  x: clsX,
+                  y: clsY,
+                }}
+              />
+            )}
+            {weights.ttfb > 0 && (
+              <WebVitalLabel
+                {...commonWebVitalLabelProps}
+                webVital="ttfb"
+                coordinates={{
+                  x: ttfbX,
+                  y: ttfbY,
+                }}
+              />
+            )}
           </Fragment>
         )}
         <PerformanceScoreRing

+ 6 - 1
static/app/views/performance/browser/webVitals/pagePerformanceTable.tsx

@@ -262,7 +262,12 @@ export function PagePerformanceTable() {
     ) {
       const measurement = parseFunction(key)?.arguments?.[0];
       const func = shouldUseStoredScores ? 'count_scores' : 'count_web_vitals';
-      const args = [measurement, ...(shouldUseStoredScores ? [] : ['any'])];
+      const args = [
+        shouldUseStoredScores
+          ? measurement?.replace('measurements.', 'measurements.score.')
+          : measurement,
+        ...(shouldUseStoredScores ? [] : ['any']),
+      ];
       const countWebVitalKey = `${func}(${args.join(', ')})`;
       const countWebVital = row[countWebVitalKey];
       if (measurement === undefined || countWebVital === 0) {