fix(vital-detail-metrics): Fix p75 all transactions (#31102)

static/app/views/performance/landing/widgets/transforms/transformMetricsToArea.tsx

@@ -8,7 +8,7 @@ import {axisLabelFormatter} from 'sentry/utils/discover/charts';
 import {aggregateOutputType} from 'sentry/utils/discover/fields';
 import {MetricsRequestRenderProps} from 'sentry/utils/metrics/metricsRequest';
 
-import {QueryDefinitionWithKey, WidgetDataConstraint, WidgetPropUnion} from '../types';
+import {WidgetDataConstraint, WidgetPropUnion} from '../types';
 import {PerformanceWidgetSetting} from '../widgetDefinitions';
 
 // Sentry treats transactions with a status other than “ok,” “cancelled”, and “unknown” as failures.
@@ -16,12 +16,13 @@ import {PerformanceWidgetSetting} from '../widgetDefinitions';
 const TRANSACTION_SUCCESS_STATUS = ['ok', 'unknown', 'cancelled'];
 
 export function transformMetricsToArea<T extends WidgetDataConstraint>(
-  widgetProps: WidgetPropUnion<T>,
-  results: MetricsRequestRenderProps,
-  _: QueryDefinitionWithKey<T>
+  widgetProps: Pick<WidgetPropUnion<T>, 'location' | 'fields' | 'chartSetting'>,
+  results: MetricsRequestRenderProps
 ) {
+  const {location, fields, chartSetting} = widgetProps;
+
   const {start, end, utc, interval, statsPeriod} = normalizeDateTimeParams(
-    widgetProps.location.query
+    location.query
   );
 
   const {errored, loading, reloading, response, responsePrevious} = results;
@@ -43,16 +44,15 @@ export function transformMetricsToArea<T extends WidgetDataConstraint>(
     return {
       ...commonChildData,
       hasData: false,
-      data: [],
+      data: [] as Series[],
       dataMean: undefined,
       previousData: undefined,
     };
   }
 
-  const metricsField = widgetProps.fields[0];
+  const metricsField = fields[0];
 
-  const isFailureRateWidget =
-    widgetProps.chartSetting === PerformanceWidgetSetting.FAILURE_RATE_AREA;
+  const isFailureRateWidget = chartSetting === PerformanceWidgetSetting.FAILURE_RATE_AREA;
 
   const groups = isFailureRateWidget
     ? response.groups.filter(

static/app/views/performance/vitalDetail/vitalDetailContent.tsx

@@ -30,6 +30,8 @@ import {decodeScalar} from 'sentry/utils/queryString';
 import Teams from 'sentry/utils/teams';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import withProjects from 'sentry/utils/withProjects';
+import {transformMetricsToArea} from 'sentry/views/performance/landing/widgets/transforms/transformMetricsToArea';
+import {PerformanceWidgetSetting} from 'sentry/views/performance/landing/widgets/widgetDefinitions';
 
 import Breadcrumb from '../breadcrumb';
 import MetricsSearchBar from '../metricsSearchBar';
@@ -222,11 +224,18 @@ class VitalDetailContent extends Component<Props, State> {
             query={new MutableSearch(query).formatString()} // TODO(metrics): not all tags will be compatible with metrics
             interval={interval}
           >
-            {({loading: isLoading, response, reloading, errored}) => {
-              const p75AllTransactions = response?.groups.reduce(
-                (acc, group) => acc + (group.totals[field] ?? 0),
-                0
+            {p75RequestProps => {
+              const {loading, errored, response, reloading} = p75RequestProps;
+
+              const p75Data = transformMetricsToArea(
+                {
+                  location,
+                  fields: [field],
+                  chartSetting: PerformanceWidgetSetting.P75_DURATION_AREA,
+                },
+                p75RequestProps
               );
+
               return (
                 <Fragment>
                   <VitalChartMetrics
@@ -235,7 +244,7 @@ class VitalDetailContent extends Component<Props, State> {
                     statsPeriod={statsPeriod}
                     project={project}
                     environment={environment}
-                    loading={isLoading}
+                    loading={loading}
                     response={response}
                     errored={errored}
                     reloading={reloading}
@@ -253,7 +262,8 @@ class VitalDetailContent extends Component<Props, State> {
                       end={end}
                       statsPeriod={statsPeriod}
                       isMetricsData={isMetricsData}
-                      p75AllTransactions={p75AllTransactions}
+                      isLoading={loading}
+                      p75AllTransactions={p75Data.dataMean?.[0].mean}
                     />
                   </StyledVitalInfo>
                   <div>TODO</div>

static/app/views/performance/vitalDetail/vitalInfo.tsx

@@ -24,6 +24,7 @@ type Props = ViewProps & {
   location: Location;
   vital: WebVital | WebVital[];
   orgSlug: Organization['slug'];
+  isLoading?: boolean;
   hideBar?: boolean;
   hideStates?: boolean;
   hideVitalPercentNames?: boolean;
@@ -41,6 +42,7 @@ function VitalInfo({
   environment,
   vital,
   location,
+  isLoading,
   hideBar,
   hideStates,
   hideVitalPercentNames,
@@ -76,7 +78,7 @@ function VitalInfo({
         query={new MutableSearch(query).formatString()} // TODO(metrics): not all tags will be compatible with metrics
         groupBy={['measurement_rating']}
       >
-        {({loading: isLoading, response}) => {
+        {({loading, response}) => {
           const data = vitals.reduce((acc, v, index) => {
             acc[v] = getVitalData({
               field: fields[index],
@@ -89,15 +91,25 @@ function VitalInfo({
             data[vital].p75 = p75AllTransactions ?? 0;
           }
 
-          return <VitalBar {...contentCommonProps} isLoading={isLoading} data={data} />;
+          return (
+            <VitalBar
+              {...contentCommonProps}
+              isLoading={isLoading || loading}
+              data={data}
+            />
+          );
         }}
       </MetricsRequest>
     );
   }
   return (
     <VitalsCardDiscoverQuery location={location} vitals={vitals}>
-      {({isLoading, vitalsData}) => (
-        <VitalBar {...contentCommonProps} data={vitalsData} isLoading={isLoading} />
+      {({isLoading: loading, vitalsData}) => (
+        <VitalBar
+          {...contentCommonProps}
+          isLoading={isLoading || loading}
+          data={vitalsData}
+        />
       )}
     </VitalsCardDiscoverQuery>
   );

tests/js/spec/views/performance/vitalDetail/index.spec.tsx

@@ -300,7 +300,7 @@ describe('Performance > VitalDetail', function () {
 
     // It shows the vital card
     expect(
-      screen.getByText(textWithMarkupMatcher('The p75 for all transactions is 51293ms'))
+      screen.getByText(textWithMarkupMatcher('The p75 for all transactions is 534ms'))
     ).toBeInTheDocument();
 
     expect(screen.getByText('Good 28%')).toBeInTheDocument();
@@ -503,7 +503,7 @@ describe('Performance > VitalDetail', function () {
     expect(await screen.findByText('Cumulative Layout Shift')).toBeInTheDocument();
 
     expect(
-      screen.getByText(textWithMarkupMatcher('The p75 for all transactions is 51292.95'))
+      screen.getByText(textWithMarkupMatcher('The p75 for all transactions is 534.30'))
     ).toBeInTheDocument();
 
     // The table is still a TODO
@@ -599,7 +599,7 @@ describe('Performance > VitalDetail', function () {
     expect(await screen.findByText('Largest Contentful Paint')).toBeInTheDocument();
 
     expect(
-      screen.getByText(textWithMarkupMatcher('The p75 for all transactions is 51293ms'))
+      screen.getByText(textWithMarkupMatcher('The p75 for all transactions is 534ms'))
     ).toBeInTheDocument();
 
     // The table is still a TODO