feat(mobile-vitals): Add mobile vitals to transaction details (#27584)

This adds mobile vitals to the transaction details page in the side bar like how
web vitals are presented.

static/app/components/events/eventVitals.tsx

@@ -8,7 +8,10 @@ import {t} from 'app/locale';
 import space from 'app/styles/space';
 import {Event} from 'app/types/event';
 import {formattedValue} from 'app/utils/measurements/index';
-import {WEB_VITAL_DETAILS} from 'app/utils/performance/vitals/constants';
+import {
+  MOBILE_VITAL_DETAILS,
+  WEB_VITAL_DETAILS,
+} from 'app/utils/performance/vitals/constants';
 import {IconSize} from 'app/utils/theme';
 
 type Props = {
@@ -32,7 +35,11 @@ function isOutdatedSdk(event: Event): boolean {
 
 export default function EventVitals({event, showSectionHeader = true}: Props) {
   const measurementNames = Object.keys(event.measurements ?? {})
-    .filter(name => Boolean(WEB_VITAL_DETAILS[`measurements.${name}`]))
+    .filter(
+      name =>
+        Boolean(MOBILE_VITAL_DETAILS[`measurements.${name}`]) ||
+        Boolean(WEB_VITAL_DETAILS[`measurements.${name}`])
+    )
     .sort();
 
   if (measurementNames.length === 0) {
@@ -87,7 +94,8 @@ function EventVital({event, name}: EventVitalProps) {
   // Measurements are referred to by their full name `measurements.<name>`
   // here but are stored using their abbreviated name `<name>`. Make sure
   // to convert it appropriately.
-  const record = WEB_VITAL_DETAILS[`measurements.${name}`];
+  const measurement = `measurements.${name}`;
+  const record = WEB_VITAL_DETAILS[measurement] || MOBILE_VITAL_DETAILS[measurement];
 
   if (!record) {
     return null;

static/app/utils/discover/fields.tsx

@@ -660,12 +660,12 @@ const MEASUREMENTS: Readonly<Record<WebVital | MobileVital, ColumnType>> = {
   [WebVital.RequestTime]: 'duration',
   [MobileVital.AppStartCold]: 'duration',
   [MobileVital.AppStartWarm]: 'duration',
-  [MobileVital.FramesTotal]: 'number',
-  [MobileVital.FramesSlow]: 'number',
-  [MobileVital.FramesFrozen]: 'number',
+  [MobileVital.FramesTotal]: 'integer',
+  [MobileVital.FramesSlow]: 'integer',
+  [MobileVital.FramesFrozen]: 'integer',
   [MobileVital.FramesSlowRate]: 'percentage',
   [MobileVital.FramesFrozenRate]: 'percentage',
-  [MobileVital.StallCount]: 'number',
+  [MobileVital.StallCount]: 'integer',
   [MobileVital.StallTotalTime]: 'duration',
   [MobileVital.StallLongestTime]: 'duration',
   [MobileVital.StallPercentage]: 'percentage',

static/app/utils/measurements/index.tsx

@@ -4,6 +4,8 @@ import {Vital} from 'app/utils/performance/vitals/types';
 export function formattedValue(record: Vital | undefined, value: number): string {
   if (record && record.type === 'duration') {
     return getDuration(value / 1000, 3);
+  } else if (record && record.type === 'integer') {
+    return value.toFixed(0);
   }
 
   return value.toFixed(3);