fix(mobile-vitals): Only display stall percentage for react native (#27645)

Stall percentage is always visible in the mobile landing table but only shows as
needed in the vital cards. This change makes it consistent to ensure that it
only shows when react-native projects are selected.

static/app/views/performance/data.tsx

@@ -1,8 +1,9 @@
 import {Location} from 'history';
 
 import {COL_WIDTH_UNDEFINED} from 'app/components/gridEditable';
+import {ALL_ACCESS_PROJECTS} from 'app/constants/globalSelectionHeader';
 import {t} from 'app/locale';
-import {LightWeightOrganization, NewQuery, SelectValue} from 'app/types';
+import {LightWeightOrganization, NewQuery, Project, SelectValue} from 'app/types';
 import EventView from 'app/utils/discover/eventView';
 import {decodeScalar} from 'app/utils/queryString';
 import {tokenizeSearch} from 'app/utils/tokenizeSearch';
@@ -537,7 +538,9 @@ function generateBackendPerformanceEventView(
 
 function generateMobilePerformanceEventView(
   organization: LightWeightOrganization,
-  location: Location
+  location: Location,
+  projects: Project[],
+  genericEventView: EventView
 ): EventView {
   const {query} = location;
 
@@ -551,9 +554,24 @@ function generateMobilePerformanceEventView(
     'p75(measurements.app_start_warm)',
     'p75(measurements.frames_slow_rate)',
     'p75(measurements.frames_frozen_rate)',
-    'p75(measurements.stall_percentage)',
   ];
 
+  // At this point, all projects are mobile projects.
+  // If in addition to that, all projects are react-native projects,
+  // then show the stall percentage as well.
+  const projectIds = genericEventView.project;
+  if (projectIds.length > 0 && projectIds[0] !== ALL_ACCESS_PROJECTS) {
+    const selectedProjects = projects.filter(p =>
+      projectIds.includes(parseInt(p.id, 10))
+    );
+    if (
+      selectedProjects.length > 0 &&
+      selectedProjects.every(project => project.platform === 'react-native')
+    ) {
+      fields.push('p75(measurements.stall_percentage)');
+    }
+  }
+
   const featureFields = organization.features.includes('project-transaction-threshold')
     ? ['count_unique(user)', 'count_miserable(user)', 'user_misery()']
     : [
@@ -759,7 +777,12 @@ export function generatePerformanceEventView(
     case LandingDisplayField.BACKEND:
       return generateBackendPerformanceEventView(organization, location);
     case LandingDisplayField.MOBILE:
-      return generateMobilePerformanceEventView(organization, location);
+      return generateMobilePerformanceEventView(
+        organization,
+        location,
+        projects,
+        eventView
+      );
     default:
       return eventView;
   }

static/app/views/performance/landing/content.tsx

@@ -35,6 +35,7 @@ import {
   FRONTEND_OTHER_COLUMN_TITLES,
   FRONTEND_PAGELOAD_COLUMN_TITLES,
   MOBILE_COLUMN_TITLES,
+  REACT_NATIVE_COLUMN_TITLES,
 } from './data';
 import {
   getCurrentLandingDisplay,
@@ -204,7 +205,13 @@ class LandingContent extends Component<Props, State> {
     const axisOptions = getMobileAxisOptions(organization);
     const {leftAxis, rightAxis} = getDisplayAxes(axisOptions, location);
 
-    const columnTitles = MOBILE_COLUMN_TITLES;
+    // only react native should contain the stall percentage column
+    const isReactNative = Boolean(
+      eventView.getFields().find(field => field.includes('measurements.stall_percentage'))
+    );
+    const columnTitles = isReactNative
+      ? REACT_NATIVE_COLUMN_TITLES
+      : MOBILE_COLUMN_TITLES;
 
     return (
       <Fragment>
@@ -212,6 +219,7 @@ class LandingContent extends Component<Props, State> {
           eventView={eventView}
           organization={organization}
           location={location}
+          showStallPercentage={isReactNative}
         />
         <DoubleAxisDisplay
           eventView={eventView}

static/app/views/performance/landing/data.tsx

@@ -37,6 +37,19 @@ export const BACKEND_COLUMN_TITLES = [
 ];
 
 export const MOBILE_COLUMN_TITLES = [
+  'transaction',
+  'project',
+  'operation',
+  'tpm',
+  'cold start',
+  'warm start',
+  'slow frame %',
+  'frozen frame %',
+  'users',
+  'user misery',
+];
+
+export const REACT_NATIVE_COLUMN_TITLES = [
   'transaction',
   'project',
   'operation',

static/app/views/performance/landing/vitalsCards.tsx

@@ -136,12 +136,8 @@ type BaseCardsProps = {
   organization: Organization;
 };
 
-type OptionalColumn = Column & {
-  optional?: boolean;
-};
-
 type GenericCardsProps = BaseCardsProps & {
-  functions: OptionalColumn[];
+  functions: Column[];
 };
 
 function GenericCards(props: GenericCardsProps) {
@@ -221,13 +217,9 @@ function GenericCards(props: GenericCardsProps) {
                   const alias = getAggregateAlias(fieldName);
                   const rawValue = tableData?.data?.[0]?.[alias];
 
-                  if (func.optional && !defined(rawValue)) {
-                    return null;
-                  }
-
                   const data = series?.[fieldName];
                   const value =
-                    isSummaryLoading || rawValue === undefined
+                    isSummaryLoading || !defined(rawValue)
                       ? '\u2014'
                       : formatter(rawValue);
                   const chart = <SparklineChart data={data} />;
@@ -277,8 +269,12 @@ function _BackendCards(props: BaseCardsProps) {
 
 export const BackendCards = withApi(_BackendCards);
 
-function _MobileCards(props: BaseCardsProps) {
-  const functions: OptionalColumn[] = [
+type MobileCardsProps = BaseCardsProps & {
+  showStallPercentage: boolean;
+};
+
+function _MobileCards(props: MobileCardsProps) {
+  const functions: Column[] = [
     {
       kind: 'function',
       function: ['p75', 'measurements.app_start_cold', undefined, undefined],
@@ -295,12 +291,13 @@ function _MobileCards(props: BaseCardsProps) {
       kind: 'function',
       function: ['p75', 'measurements.frames_frozen_rate', undefined, undefined],
     },
-    {
+  ];
+  if (props.showStallPercentage) {
+    functions.push({
       kind: 'function',
       function: ['p75', 'measurements.stall_percentage', undefined, undefined],
-      optional: true,
-    },
-  ];
+    });
+  }
   return <GenericCards {...props} functions={functions} />;
 }