feat(preprod): add compare deltas to metric cards (EME-568) (#104451)

Author: cameroncooke

static/app/views/preprod/buildComparison/main/buildComparisonMetricCards.tsx

@@ -4,15 +4,15 @@ import {Flex, Stack} from '@sentry/scraps/layout';
 import {Heading, Text} from '@sentry/scraps/text';
 
 import {PercentChange} from 'sentry/components/percentChange';
-import {IconArrow, IconCode, IconDownload} from 'sentry/icons';
+import {IconCode, IconDownload} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {formatBytesBase10} from 'sentry/utils/bytes/formatBytesBase10';
 import {MetricCard} from 'sentry/views/preprod/components/metricCard';
 import type {
   SizeAnalysisComparisonResults,
   SizeComparisonApiResponse,
 } from 'sentry/views/preprod/types/appSizeTypes';
-import {getLabels} from 'sentry/views/preprod/utils/labelUtils';
+import {getLabels, getTrend} from 'sentry/views/preprod/utils/labelUtils';
 
 interface BuildComparisonMetricCardsProps {
   comparisonResponse: SizeComparisonApiResponse | undefined;
@@ -153,24 +153,3 @@ export function BuildComparisonMetricCards(props: BuildComparisonMetricCardsProp
     </Flex>
   );
 }
-
-function getTrend(diff: number): {
-  variant: 'danger' | 'success' | 'muted';
-  icon?: React.ReactNode;
-} {
-  if (diff > 0) {
-    return {
-      variant: 'danger',
-      icon: <IconArrow direction="up" size="xs" />,
-    };
-  }
-
-  if (diff < 0) {
-    return {
-      variant: 'success',
-      icon: <IconArrow direction="down" size="xs" />,
-    };
-  }
-
-  return {variant: 'muted'};
-}

static/app/views/preprod/buildDetails/buildDetails.spec.tsx

@@ -106,6 +106,7 @@ describe('BuildDetails', () => {
               download_size_bytes: 512000,
             },
           ],
+          base_size_metrics: [],
         },
         {
           vcs_info: PreprodVcsInfoFullFixture(),
@@ -181,6 +182,7 @@ describe('BuildDetails', () => {
               download_size_bytes: 512000,
             },
           ],
+          base_size_metrics: [],
         });
       },
     });
@@ -233,6 +235,7 @@ describe('BuildDetails', () => {
             download_size_bytes: 512000,
           },
         ],
+        base_size_metrics: [],
       }),
     });
 

static/app/views/preprod/buildDetails/buildDetails.tsx

@@ -161,6 +161,7 @@ export default function BuildDetails() {
                 buildDetailsData={buildDetailsQuery.data}
                 isBuildDetailsPending={buildDetailsQuery.isLoading}
                 projectType={projectType}
+                projectId={projectId}
               />
             </BuildDetailsMain>
           </UrlParamBatchProvider>

static/app/views/preprod/buildDetails/main/buildDetailsMainContent.tsx

@@ -40,6 +40,7 @@ interface BuildDetailsMainContentProps {
   onRerunAnalysis: () => void;
   buildDetailsData?: BuildDetailsApiResponse | null;
   isBuildDetailsPending?: boolean;
+  projectId?: string;
   projectType?: string | null;
 }
 
@@ -51,6 +52,7 @@ export function BuildDetailsMainContent(props: BuildDetailsMainContentProps) {
     buildDetailsData,
     isBuildDetailsPending = false,
     projectType,
+    projectId,
   } = props;
   const {
     data: appSizeData,
@@ -323,8 +325,11 @@ export function BuildDetailsMainContent(props: BuildDetailsMainContentProps) {
         sizeInfo={sizeInfo}
         processedInsights={processedInsights}
         totalSize={totalSize}
+        artifactId={buildDetailsData?.id}
+        baseArtifactId={buildDetailsData?.base_artifact_id ?? null}
         platform={buildDetailsData?.app_info?.platform ?? null}
-        projectType={projectType}
+        projectType={projectType ?? null}
+        projectId={projectId}
         onOpenInsightsSidebar={openInsightsSidebar}
       />
 

static/app/views/preprod/buildDetails/main/buildDetailsMetricCards.tsx

@@ -1,10 +1,12 @@
 import type {ReactNode} from 'react';
 import styled from '@emotion/styled';
 
+import {LinkButton} from '@sentry/scraps/button/linkButton';
 import {Flex, Stack} from '@sentry/scraps/layout';
 import {Heading, Text} from '@sentry/scraps/text';
 import {Tooltip} from '@sentry/scraps/tooltip';
 
+import {PercentChange} from 'sentry/components/percentChange';
 import {IconCode, IconDownload, IconLightning, IconSettings} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {trackAnalytics} from 'sentry/utils/analytics';
@@ -27,14 +29,18 @@ import {
   formattedPrimaryMetricDownloadSize,
   formattedPrimaryMetricInstallSize,
   getLabels,
+  getTrend,
 } from 'sentry/views/preprod/utils/labelUtils';
 
 interface BuildDetailsMetricCardsProps {
   onOpenInsightsSidebar: () => void;
   processedInsights: ProcessedInsight[];
   sizeInfo: BuildDetailsSizeInfo | undefined;
   totalSize: number;
+  artifactId?: string;
+  baseArtifactId?: string | null;
   platform?: Platform | null;
+  projectId?: string;
   projectType?: string | null;
 }
 
@@ -43,11 +49,18 @@ interface MetricCardConfig {
   key: string;
   title: string;
   value: string;
+  comparisonUrl?: string;
+  delta?: MetricDelta;
   labelTooltip?: string;
   percentageText?: string;
   showInsightsButton?: boolean;
   watchBreakdown?: WatchBreakdown;
 }
+interface MetricDelta {
+  baseValue: number;
+  diff: number;
+  percentageChange: number;
+}
 
 interface WatchBreakdown {
   appValue: string;
@@ -59,8 +72,11 @@ export function BuildDetailsMetricCards(props: BuildDetailsMetricCardsProps) {
     sizeInfo,
     processedInsights,
     totalSize,
+    artifactId,
+    baseArtifactId,
     platform: platformProp,
     projectType,
+    projectId,
     onOpenInsightsSidebar,
   } = props;
 
@@ -77,6 +93,28 @@ export function BuildDetailsMetricCards(props: BuildDetailsMetricCardsProps) {
   );
   const installMetricValue = formattedPrimaryMetricInstallSize(sizeInfo);
   const downloadMetricValue = formattedPrimaryMetricDownloadSize(sizeInfo);
+
+  // Find matching base metrics for comparison
+  const basePrimarySizeMetric = sizeInfo.base_size_metrics.find(
+    metric => metric.metrics_artifact_type === MetricsArtifactType.MAIN_ARTIFACT
+  );
+
+  // Calculate deltas for install and download sizes
+  const installDelta = calculateDelta(
+    primarySizeMetric?.install_size_bytes,
+    basePrimarySizeMetric?.install_size_bytes
+  );
+  const downloadDelta = calculateDelta(
+    primarySizeMetric?.download_size_bytes,
+    basePrimarySizeMetric?.download_size_bytes
+  );
+
+  // Build comparison URL using route params
+  const comparisonUrl =
+    baseArtifactId && projectId && artifactId
+      ? `/organizations/${organization.slug}/preprod/${projectId}/compare/${artifactId}/${baseArtifactId}/`
+      : undefined;
+
   const totalPotentialSavings = processedInsights.reduce(
     (sum, insight) => sum + (insight.totalSavings ?? 0),
     0
@@ -97,30 +135,35 @@ export function BuildDetailsMetricCards(props: BuildDetailsMetricCardsProps) {
       icon: <IconCode size="sm" />,
       labelTooltip: labels.installSizeDescription,
       value: installMetricValue,
+      comparisonUrl,
       watchBreakdown: getWatchBreakdown(
         primarySizeMetric,
         watchArtifactMetric,
         'install_size_bytes'
       ),
+      delta: installDelta,
     },
     {
       key: 'download',
       title: labels.downloadSizeLabel,
       icon: <IconDownload size="sm" />,
       labelTooltip: labels.downloadSizeDescription,
       value: downloadMetricValue,
+      comparisonUrl,
       watchBreakdown: getWatchBreakdown(
         primarySizeMetric,
         watchArtifactMetric,
         'download_size_bytes'
       ),
+      delta: downloadDelta,
     },
     {
       key: 'savings',
       title: t('Potential savings'),
       icon: <IconLightning size="sm" />,
       labelTooltip: t('Total savings from insights'),
       value: formatBytesBase10(totalPotentialSavings),
+      comparisonUrl: undefined,
       percentageText: potentialSavingsPercentageText,
       showInsightsButton: totalPotentialSavings > 0,
     },
@@ -153,24 +196,95 @@ export function BuildDetailsMetricCards(props: BuildDetailsMetricCardsProps) {
               : undefined
           }
         >
-          <Heading as="h3">
-            {card.watchBreakdown ? (
-              <Tooltip
-                title={
-                  <WatchBreakdownTooltip
-                    appValue={card.watchBreakdown.appValue}
-                    watchValue={card.watchBreakdown.watchValue}
-                  />
-                }
-                position="bottom"
-              >
-                <MetricValue $interactive>{card.value}</MetricValue>
-              </Tooltip>
-            ) : (
-              <MetricValue>{card.value}</MetricValue>
+          <Stack gap="xs">
+            <Flex align="end" gap="sm" wrap="wrap">
+              <Heading as="h3">
+                {card.watchBreakdown ? (
+                  <Tooltip
+                    title={
+                      <WatchBreakdownTooltip
+                        appValue={card.watchBreakdown.appValue}
+                        watchValue={card.watchBreakdown.watchValue}
+                      />
+                    }
+                    position="bottom"
+                  >
+                    <MetricValue $interactive>{card.value}</MetricValue>
+                  </Tooltip>
+                ) : (
+                  <MetricValue>{card.value}</MetricValue>
+                )}
+                {card.percentageText ?? ''}
+              </Heading>
+
+              {card.delta &&
+                card.comparisonUrl &&
+                (() => {
+                  const {variant, icon} = getTrend(card.delta.diff);
+
+                  return (
+                    <LinkButton
+                      to={card.comparisonUrl}
+                      size="xs"
+                      priority="link"
+                      aria-label={t('Compare builds')}
+                    >
+                      <Flex align="center" gap="xs">
+                        {icon}
+                        <Text
+                          as="span"
+                          variant={variant}
+                          size="sm"
+                          style={{
+                            display: 'inline-flex',
+                            alignItems: 'center',
+                            flexWrap: 'wrap',
+                            gap: '0.25em',
+                            fontWeight: 'normal',
+                          }}
+                        >
+                          {card.delta.diff > 0 ? '+' : card.delta.diff < 0 ? '-' : ''}
+                          {formatBytesBase10(Math.abs(card.delta.diff))}
+                          {card.delta.percentageChange !== 0 && (
+                            <Text
+                              as="span"
+                              variant={variant}
+                              style={{
+                                display: 'inline-flex',
+                                alignItems: 'center',
+                                whiteSpace: 'nowrap',
+                              }}
+                            >
+                              {' ('}
+                              <PercentChange
+                                value={card.delta.percentageChange}
+                                minimumValue={0.001}
+                                preferredPolarity="-"
+                                colorize
+                              />
+                              {')'}
+                            </Text>
+                          )}
+                        </Text>
+                      </Flex>
+                    </LinkButton>
+                  );
+                })()}
+            </Flex>
+
+            {card.delta && (
+              <Flex gap="xs" wrap="wrap">
+                <Text variant="muted" size="sm">
+                  {t('Base Build Size:')}
+                </Text>
+                <Text variant="muted" size="sm" bold>
+                  {card.delta.baseValue === 0
+                    ? t('Not present')
+                    : formatBytesBase10(card.delta.baseValue)}
+                </Text>
+              </Flex>
             )}
-            {card.percentageText ?? ''}
-          </Heading>
+          </Stack>
         </MetricCard>
       ))}
     </Flex>
@@ -213,6 +327,24 @@ function getWatchBreakdown(
   };
 }
 
+function calculateDelta(
+  headValue: number | undefined,
+  baseValue: number | undefined
+): MetricDelta | undefined {
+  if (headValue === undefined || baseValue === undefined) {
+    return undefined;
+  }
+
+  const diff = headValue - baseValue;
+  const percentageChange = baseValue === 0 ? 0 : diff / baseValue;
+
+  return {
+    baseValue,
+    diff,
+    percentageChange,
+  };
+}
+
 const MetricValue = styled('span')<{$interactive?: boolean}>`
   ${p =>
     p.$interactive

static/app/views/preprod/types/buildDetailsTypes.ts

@@ -9,6 +9,7 @@ export interface BuildDetailsApiResponse {
   state: BuildDetailsState;
   vcs_info: BuildDetailsVcsInfo;
   size_info?: BuildDetailsSizeInfo;
+  base_artifact_id?: string | null;
 }
 
 export interface BuildDetailsAppInfo {
@@ -62,6 +63,7 @@ interface BuildDetailsSizeInfoProcessing {
 interface BuildDetailsSizeInfoCompleted {
   state: BuildDetailsSizeAnalysisState.COMPLETED;
   size_metrics: BuildDetailsSizeInfoSizeMetric[];
+  base_size_metrics: BuildDetailsSizeInfoSizeMetric[];
 }
 
 interface BuildDetailsSizeInfoFailed {