Frontend to show watch app size metrics (#103199)

rbro112 · web-flow · commit cc225386956a · 2025-11-12T09:53:50.000-08:00
<img width="365" height="179" alt="Screenshot 2025-11-11 at 3 36 29 PM" src="https://github.com/user-attachments/assets/70be4022-7233-4cd1-a582-4609e1e3679f" /> <img width="324" height="159" alt="Screenshot 2025-11-11 at 3 36 27 PM" src="https://github.com/user-attachments/assets/e8a2b295-ed80-460b-8a3c-e4ad88084da3" /> The above screenshots are correct, I just duplicated the original size metric and changed the artifact type to `WATCH` Resolves EME-580
diff --git a/static/app/components/preprod/preprodBuildsTable.tsx b/static/app/components/preprod/preprodBuildsTable.tsx
@@ -15,8 +15,8 @@ import {IconCheckmark, IconCommit} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import type {BuildDetailsApiResponse} from 'sentry/views/preprod/types/buildDetailsTypes';
 import {
-  formattedDownloadSize,
-  formattedInstallSize,
+  formattedPrimaryMetricDownloadSize,
+  formattedPrimaryMetricInstallSize,
   getLabels,
   getPlatformIconFromPlatform,
 } from 'sentry/views/preprod/utils/labelUtils';
@@ -137,11 +137,11 @@ export function PreprodBuildsTable({
           </SimpleTable.RowCell>
 
           <SimpleTable.RowCell>
-            <Text>{formattedInstallSize(build)}</Text>
+            <Text>{formattedPrimaryMetricInstallSize(build.size_info)}</Text>
           </SimpleTable.RowCell>
 
           <SimpleTable.RowCell>
-            <Text>{formattedDownloadSize(build)}</Text>
+            <Text>{formattedPrimaryMetricDownloadSize(build.size_info)}</Text>
           </SimpleTable.RowCell>
 
           <SimpleTable.RowCell>
diff --git a/static/app/views/preprod/buildComparison/header/buildCompareHeaderContent.tsx b/static/app/views/preprod/buildComparison/header/buildCompareHeaderContent.tsx
@@ -18,8 +18,8 @@ import {
   type BuildDetailsApiResponse,
 } from 'sentry/views/preprod/types/buildDetailsTypes';
 import {
-  formattedDownloadSize,
-  formattedInstallSize,
+  formattedPrimaryMetricDownloadSize,
+  formattedPrimaryMetricInstallSize,
   getLabels,
   getPlatformIconFromPlatform,
   getReadablePlatformLabel,
@@ -100,15 +100,19 @@ export function BuildCompareHeaderContent(props: BuildCompareHeaderContentProps)
             <Tooltip title={labels.installSizeDescription}>
               <Flex gap="sm" align="center">
                 <IconCode size="sm" color="gray300" />
-                <Text underline="dotted">{formattedInstallSize(buildDetails)}</Text>
+                <Text underline="dotted">
+                  {formattedPrimaryMetricInstallSize(buildDetails.size_info)}
+                </Text>
               </Flex>
             </Tooltip>
           )}
           {isSizeInfoCompleted(buildDetails.size_info) && (
             <Tooltip title={labels.downloadSizeDescription}>
               <Flex gap="sm" align="center">
                 <IconDownload size="sm" color="gray300" />
-                <Text underline="dotted">{formattedDownloadSize(buildDetails)}</Text>
+                <Text underline="dotted">
+                  {formattedPrimaryMetricDownloadSize(buildDetails.size_info)}
+                </Text>
               </Flex>
             </Tooltip>
           )}
diff --git a/static/app/views/preprod/buildComparison/main/sizeCompareSelectionContent.tsx b/static/app/views/preprod/buildComparison/main/sizeCompareSelectionContent.tsx
@@ -23,7 +23,6 @@ import {
 } from 'sentry/icons';
 import {IconBranch} from 'sentry/icons/iconBranch';
 import {t} from 'sentry/locale';
-import {formatBytesBase10} from 'sentry/utils/bytes/formatBytesBase10';
 import parseLinkHeader from 'sentry/utils/parseLinkHeader';
 import {useApiQuery, useMutation, type UseApiQueryResult} from 'sentry/utils/queryClient';
 import {decodeScalar} from 'sentry/utils/queryString';
@@ -39,6 +38,10 @@ import {
   type BuildDetailsApiResponse,
 } from 'sentry/views/preprod/types/buildDetailsTypes';
 import type {ListBuildsApiResponse} from 'sentry/views/preprod/types/listBuildsTypes';
+import {
+  formattedPrimaryMetricDownloadSize,
+  formattedPrimaryMetricInstallSize,
+} from 'sentry/views/preprod/utils/labelUtils';
 
 import {SizeCompareSelectedBuilds} from './sizeCompareSelectedBuilds';
 
@@ -249,13 +252,13 @@ function BuildItem({build, isSelected, onSelect}: BuildItemProps) {
           {isSizeInfoCompleted(sizeInfo) && (
             <Flex align="center" gap="sm">
               <IconCode size="xs" color="gray300" />
-              <Text>{formatBytesBase10(sizeInfo.install_size_bytes)}</Text>
+              <Text>{formattedPrimaryMetricInstallSize(sizeInfo)}</Text>
             </Flex>
           )}
           {isSizeInfoCompleted(sizeInfo) && (
             <Flex align="center" gap="sm">
               <IconDownload size="xs" color="gray300" />
-              <Text>{formatBytesBase10(sizeInfo.download_size_bytes)}</Text>
+              <Text>{formattedPrimaryMetricDownloadSize(sizeInfo)}</Text>
             </Flex>
           )}
         </Flex>
diff --git a/static/app/views/preprod/buildDetails/buildDetails.spec.tsx b/static/app/views/preprod/buildDetails/buildDetails.spec.tsx
@@ -6,6 +6,7 @@ import {
 
 import {render, screen, waitFor} from 'sentry-test/reactTestingLibrary';
 
+import {MetricsArtifactType} from 'sentry/views/preprod/types/appSizeTypes';
 import {BuildDetailsSizeAnalysisState} from 'sentry/views/preprod/types/buildDetailsTypes';
 
 import BuildDetails from './buildDetails';
@@ -98,8 +99,13 @@ describe('BuildDetails', () => {
       body: PreprodBuildDetailsWithSizeInfoFixture(
         {
           state: BuildDetailsSizeAnalysisState.COMPLETED,
-          install_size_bytes: 1024000,
-          download_size_bytes: 512000,
+          size_metrics: [
+            {
+              metrics_artifact_type: MetricsArtifactType.MAIN_ARTIFACT,
+              install_size_bytes: 1024000,
+              download_size_bytes: 512000,
+            },
+          ],
         },
         {
           vcs_info: PreprodVcsInfoFullFixture(),
@@ -168,8 +174,13 @@ describe('BuildDetails', () => {
         }
         return PreprodBuildDetailsWithSizeInfoFixture({
           state: BuildDetailsSizeAnalysisState.COMPLETED,
-          install_size_bytes: 1024000,
-          download_size_bytes: 512000,
+          size_metrics: [
+            {
+              metrics_artifact_type: MetricsArtifactType.MAIN_ARTIFACT,
+              install_size_bytes: 1024000,
+              download_size_bytes: 512000,
+            },
+          ],
         });
       },
     });
@@ -215,8 +226,13 @@ describe('BuildDetails', () => {
       method: 'GET',
       body: PreprodBuildDetailsWithSizeInfoFixture({
         state: BuildDetailsSizeAnalysisState.COMPLETED,
-        install_size_bytes: 1024000,
-        download_size_bytes: 512000,
+        size_metrics: [
+          {
+            metrics_artifact_type: MetricsArtifactType.MAIN_ARTIFACT,
+            install_size_bytes: 1024000,
+            download_size_bytes: 512000,
+          },
+        ],
       }),
     });
 
diff --git a/static/app/views/preprod/buildDetails/sidebar/buildDetailsSidebarAppInfo.tsx b/static/app/views/preprod/buildDetails/sidebar/buildDetailsSidebarAppInfo.tsx
@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 import {PlatformIcon} from 'platformicons';
 
 import {CodeBlock} from '@sentry/scraps/code';
-import {Flex} from '@sentry/scraps/layout';
+import {Flex, Stack} from '@sentry/scraps/layout';
 import {Heading, Text} from '@sentry/scraps/text';
 import {Tooltip} from '@sentry/scraps/tooltip';
 
@@ -12,12 +12,16 @@ import {t} from 'sentry/locale';
 import {formatBytesBase10} from 'sentry/utils/bytes/formatBytesBase10';
 import {getFormat, getFormattedDate, getUtcToSystem} from 'sentry/utils/dates';
 import {openInstallModal} from 'sentry/views/preprod/components/installModal';
+import {MetricsArtifactType} from 'sentry/views/preprod/types/appSizeTypes';
 import {
   BuildDetailsSizeAnalysisState,
+  getMainArtifactSizeMetric,
   type BuildDetailsAppInfo,
   type BuildDetailsSizeInfo,
 } from 'sentry/views/preprod/types/buildDetailsTypes';
 import {
+  formattedPrimaryMetricDownloadSize,
+  formattedPrimaryMetricInstallSize,
   getLabels,
   getPlatformIconFromPlatform,
   getReadableArtifactTypeLabel,
@@ -40,6 +44,101 @@ export function BuildDetailsSidebarAppInfo(props: BuildDetailsSidebarAppInfoProp
     timeZone: true,
   });
 
+  let sizeInfoGroup = null;
+  if (
+    props.sizeInfo &&
+    props.sizeInfo.state === BuildDetailsSizeAnalysisState.COMPLETED
+  ) {
+    const primarySizeMetric = getMainArtifactSizeMetric(props.sizeInfo);
+    const watchAppMetrics = props.sizeInfo.size_metrics.find(
+      metric => metric.metrics_artifact_type === MetricsArtifactType.WATCH_ARTIFACT
+    );
+
+    let installSizeContent = (
+      <Text size="md">{formattedPrimaryMetricInstallSize(props.sizeInfo)}</Text>
+    );
+    let downloadSizeContent = (
+      <Text size="md">{formattedPrimaryMetricDownloadSize(props.sizeInfo)}</Text>
+    );
+    if (watchAppMetrics) {
+      installSizeContent = (
+        <Tooltip
+          title={
+            <Stack align="start">
+              <Flex gap="sm">
+                <Text size="md" bold>
+                  {t('App')}:
+                </Text>
+                <Text size="md">
+                  {formatBytesBase10(primarySizeMetric?.install_size_bytes ?? 0)}
+                </Text>
+              </Flex>
+              <Flex gap="sm">
+                <Text size="md" bold>
+                  {t('Watch')}:
+                </Text>
+                <Text size="md">
+                  {formatBytesBase10(watchAppMetrics.install_size_bytes)}
+                </Text>
+              </Flex>
+            </Stack>
+          }
+          position="left"
+        >
+          <Text size="md" underline="dotted">
+            {formattedPrimaryMetricInstallSize(props.sizeInfo)}
+          </Text>
+        </Tooltip>
+      );
+      downloadSizeContent = (
+        <Tooltip
+          title={
+            <Stack align="start">
+              <Flex gap="sm">
+                <Text size="md" bold>
+                  {t('App')}:
+                </Text>
+                <Text size="md">
+                  {formatBytesBase10(watchAppMetrics.download_size_bytes)}
+                </Text>
+              </Flex>
+              <Flex gap="sm">
+                <Text size="md" bold>
+                  {t('Watch')}:
+                </Text>
+                <Text size="md">
+                  {formatBytesBase10(watchAppMetrics.download_size_bytes)}
+                </Text>
+              </Flex>
+            </Stack>
+          }
+          position="left"
+        >
+          <Text size="md" underline="dotted">
+            {formattedPrimaryMetricDownloadSize(props.sizeInfo)}
+          </Text>
+        </Tooltip>
+      );
+    }
+
+    sizeInfoGroup = (
+      <Flex gap="sm">
+        <Flex direction="column" gap="xs" flex={1}>
+          <Tooltip title={labels.installSizeDescription} position="left">
+            <Heading as="h4">{labels.installSizeLabel}</Heading>
+          </Tooltip>
+          {installSizeContent}
+        </Flex>
+        <Flex direction="column" gap="xs" flex={1}>
+          <Tooltip title={labels.downloadSizeDescription} position="left">
+            <Heading as="h4">{labels.downloadSizeLabel}</Heading>
+          </Tooltip>
+          {downloadSizeContent}
+        </Flex>
+      </Flex>
+    );
+  }
+
   return (
     <Flex direction="column" gap="xl">
       <Flex align="center" gap="sm">
@@ -49,27 +148,7 @@ export function BuildDetailsSidebarAppInfo(props: BuildDetailsSidebarAppInfoProp
         {props.appInfo.name && <Heading as="h3">{props.appInfo.name}</Heading>}
       </Flex>
 
-      {props.sizeInfo &&
-        props.sizeInfo.state === BuildDetailsSizeAnalysisState.COMPLETED && (
-          <Flex gap="sm">
-            <Flex direction="column" gap="xs" flex={1}>
-              <Tooltip title={labels.installSizeDescription} position="left">
-                <Heading as="h4">{labels.installSizeLabel}</Heading>
-              </Tooltip>
-              <Text size="md">
-                {formatBytesBase10(props.sizeInfo.install_size_bytes)}
-              </Text>
-            </Flex>
-            <Flex direction="column" gap="xs" flex={1}>
-              <Tooltip title={labels.downloadSizeDescription} position="left">
-                <Heading as="h4">{labels.downloadSizeLabel}</Heading>
-              </Tooltip>
-              <Text size="md">
-                {formatBytesBase10(props.sizeInfo.download_size_bytes)}
-              </Text>
-            </Flex>
-          </Flex>
-        )}
+      {sizeInfoGroup}
 
       <Flex wrap="wrap" gap="md">
         <Flex gap="2xs" align="center">
diff --git a/static/app/views/preprod/types/buildDetailsTypes.ts b/static/app/views/preprod/types/buildDetailsTypes.ts
@@ -1,3 +1,6 @@
+/* eslint-disable typescript-sort-keys/interface */
+import {MetricsArtifactType} from 'sentry/views/preprod/types/appSizeTypes';
+
 import type {Platform} from './sharedTypes';
 
 export interface BuildDetailsApiResponse {
@@ -42,6 +45,12 @@ export interface BuildDetailsVcsInfo {
   provider?: string | null;
 }
 
+interface BuildDetailsSizeInfoSizeMetric {
+  metrics_artifact_type: MetricsArtifactType;
+  install_size_bytes: number;
+  download_size_bytes: number;
+}
+
 interface BuildDetailsSizeInfoPending {
   state: BuildDetailsSizeAnalysisState.PENDING;
 }
@@ -51,9 +60,8 @@ interface BuildDetailsSizeInfoProcessing {
 }
 
 interface BuildDetailsSizeInfoCompleted {
-  download_size_bytes: number;
-  install_size_bytes: number;
   state: BuildDetailsSizeAnalysisState.COMPLETED;
+  size_metrics: BuildDetailsSizeInfoSizeMetric[];
 }
 
 interface BuildDetailsSizeInfoFailed {
@@ -83,6 +91,14 @@ export function isSizeInfoProcessing(
   );
 }
 
+export function getMainArtifactSizeMetric(
+  sizeInfo: BuildDetailsSizeInfoCompleted
+): BuildDetailsSizeInfoSizeMetric | undefined {
+  return sizeInfo.size_metrics.find(
+    metric => metric.metrics_artifact_type === MetricsArtifactType.MAIN_ARTIFACT
+  );
+}
+
 export enum BuildDetailsState {
   UPLOADING = 0,
   UPLOADED = 1,
diff --git a/static/app/views/preprod/utils/labelUtils.tsx b/static/app/views/preprod/utils/labelUtils.tsx
@@ -3,8 +3,9 @@ import {formatBytesBase10} from 'sentry/utils/bytes/formatBytesBase10';
 import {unreachable} from 'sentry/utils/unreachable';
 import {
   BuildDetailsArtifactType,
+  getMainArtifactSizeMetric,
   isSizeInfoCompleted,
-  type BuildDetailsApiResponse,
+  type BuildDetailsSizeInfo,
 } from 'sentry/views/preprod/types/buildDetailsTypes';
 import type {Platform} from 'sentry/views/preprod/types/sharedTypes';
 
@@ -114,16 +115,30 @@ export function getReadablePlatformLabel(platform: Platform): string {
   }
 }
 
-export function formattedInstallSize(build: BuildDetailsApiResponse): string {
-  if (isSizeInfoCompleted(build?.size_info)) {
-    return formatBytesBase10(build.size_info.install_size_bytes);
+export function formattedPrimaryMetricInstallSize(
+  sizeInfo: BuildDetailsSizeInfo | undefined
+): string {
+  if (isSizeInfoCompleted(sizeInfo)) {
+    const primarySizeMetric = getMainArtifactSizeMetric(sizeInfo);
+    if (!primarySizeMetric) {
+      return '-';
+    }
+
+    return formatBytesBase10(primarySizeMetric.install_size_bytes);
   }
   return '-';
 }
 
-export function formattedDownloadSize(build: BuildDetailsApiResponse): string {
-  if (isSizeInfoCompleted(build?.size_info)) {
-    return formatBytesBase10(build.size_info.download_size_bytes);
+export function formattedPrimaryMetricDownloadSize(
+  sizeInfo: BuildDetailsSizeInfo | undefined
+): string {
+  if (isSizeInfoCompleted(sizeInfo)) {
+    const primarySizeMetric = getMainArtifactSizeMetric(sizeInfo);
+    if (!primarySizeMetric) {
+      return '-';
+    }
+
+    return formatBytesBase10(primarySizeMetric.download_size_bytes);
   }
   return '-';
 }
