Frontend to show watch app size metrics

Author: rbro112

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,8 +12,10 @@ 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,
+  getPrimarySizeMetric,
   type BuildDetailsAppInfo,
   type BuildDetailsSizeInfo,
 } from 'sentry/views/preprod/types/buildDetailsTypes';
@@ -40,6 +42,86 @@ export function BuildDetailsSidebarAppInfo(props: BuildDetailsSidebarAppInfoProp
     timeZone: true,
   });
 
+  let sizeInfoGroup = null;
+  if (
+    props.sizeInfo &&
+    props.sizeInfo.state === BuildDetailsSizeAnalysisState.COMPLETED
+  ) {
+    const primarySizeMetric = getPrimarySizeMetric(props.sizeInfo);
+    const watchAppMetrics = props.sizeInfo.size_metrics.find(
+      metric => metric.metrics_artifact_type === MetricsArtifactType.WATCH_ARTIFACT
+    );
+
+    let installSizeContent = (
+      <Text size="md">
+        {formatBytesBase10(primarySizeMetric?.install_size_bytes ?? 0)}
+      </Text>
+    );
+    let downloadSizeContent = (
+      <Text size="md">
+        {formatBytesBase10(primarySizeMetric?.download_size_bytes ?? 0)}
+      </Text>
+    );
+    if (watchAppMetrics) {
+      installSizeContent = (
+        <Tooltip
+          title={
+            <Stack>
+              <Text size="md">
+                {t('App')}: {formatBytesBase10(watchAppMetrics.install_size_bytes)}
+              </Text>
+              <Text size="md">
+                {t('Watch app')}: {formatBytesBase10(watchAppMetrics.install_size_bytes)}
+              </Text>
+            </Stack>
+          }
+          position="left"
+        >
+          <Text size="md" underline="dotted">
+            {formatBytesBase10(watchAppMetrics.install_size_bytes)}
+          </Text>
+        </Tooltip>
+      );
+      downloadSizeContent = (
+        <Tooltip
+          title={
+            <Stack>
+              <Text size="md">
+                {t('App')}:{' '}
+                {formatBytesBase10(primarySizeMetric?.download_size_bytes ?? 0)}
+              </Text>
+              <Text size="md">
+                {t('Watch app')}: {formatBytesBase10(watchAppMetrics.download_size_bytes)}
+              </Text>
+            </Stack>
+          }
+          position="left"
+        >
+          <Text size="md" underline="dotted">
+            {formatBytesBase10(primarySizeMetric?.download_size_bytes ?? 0)}
+          </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 +131,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">

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 getPrimarySizeMetric(
+  sizeInfo: BuildDetailsSizeInfoCompleted
+): BuildDetailsSizeInfoSizeMetric | undefined {
+  return sizeInfo.size_metrics.find(
+    metric => metric.metrics_artifact_type === MetricsArtifactType.MAIN_ARTIFACT
+  );
+}
+
 export enum BuildDetailsState {
   UPLOADING = 0,
   UPLOADED = 1,