Skip to content

feat(preprod): add cards to build details #103470

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Nov 18, 2025
+303 −173
Merged

feat(preprod): add cards to build details #103470

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
1bcb819
add cards to build details
mtopo27 Nov 17, 2025
2fff5ac
ryan comments
mtopo27 Nov 17, 2025
ca73803
file rename (convention)
mtopo27 Nov 17, 2025
181b61a
temp rename
mtopo27 Nov 17, 2025
0b9f967
proper naming
mtopo27 Nov 17, 2025
9a7ccfb
require tooltip
mtopo27 Nov 17, 2025
b628247
temp rename
mtopo27 Nov 17, 2025
53c33bd
force rename
mtopo27 Nov 17, 2025
20a55eb
missed casing
mtopo27 Nov 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion ...rison/main/BuildComparisonMetricCards.tsx → ...rison/main/buildComparisonMetricCards.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ interface ComparisonMetric {
head: number;
icon: ReactNode;
key: string;
labelTooltip: string;
percentageChange: number;
title: string;
}
Expand All @@ -47,6 +48,7 @@ export function BuildComparisonMetricCards(props: BuildComparisonMetricCardsProp
key: 'install',
title: labels.installSizeLabel,
icon: <IconCode size="sm" />,
labelTooltip: labels.installSizeDescription,
head: size_metric_diff_item.head_install_size,
base: size_metric_diff_item.base_install_size,
diff:
Expand All @@ -63,6 +65,7 @@ export function BuildComparisonMetricCards(props: BuildComparisonMetricCardsProp
key: 'download',
title: labels.downloadSizeLabel,
icon: <IconDownload size="sm" />,
labelTooltip: labels.downloadSizeDescription,
head: size_metric_diff_item.head_download_size,
base: size_metric_diff_item.base_download_size,
diff:
Expand All @@ -88,7 +91,12 @@ export function BuildComparisonMetricCards(props: BuildComparisonMetricCardsProp
const {variant, icon} = getTrend(metric.diff);

return (
<MetricCard key={metric.key} icon={metric.icon} label={metric.title}>
<MetricCard
key={metric.key}
icon={metric.icon}
label={metric.title}
labelTooltip={metric.labelTooltip}
>
<Stack gap="xs">
<Flex align="end" gap="sm" wrap="wrap">
<Heading as="h3">{formatBytesBase10(metric.head)}</Heading>
Expand Down
2 changes: 1 addition & 1 deletion static/app/views/preprod/buildComparison/main/sizeCompareMainContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import type RequestError from 'sentry/utils/requestError/requestError';
import {useNavigate} from 'sentry/utils/useNavigate';
import useOrganization from 'sentry/utils/useOrganization';
import {useParams} from 'sentry/utils/useParams';
import {BuildComparisonMetricCards} from 'sentry/views/preprod/buildComparison/main/BuildComparisonMetricCards';
import {BuildComparisonMetricCards} from 'sentry/views/preprod/buildComparison/main/buildComparisonMetricCards';
import {SizeCompareItemDiffTable} from 'sentry/views/preprod/buildComparison/main/sizeCompareItemDiffTable';
import {SizeCompareSelectedBuilds} from 'sentry/views/preprod/buildComparison/main/sizeCompareSelectedBuilds';
import {BuildError} from 'sentry/views/preprod/components/buildError';
Expand Down
118 changes: 71 additions & 47 deletions static/app/views/preprod/buildDetails/main/buildDetailsMainContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import {useCallback} from 'react';
import {useSearchParams} from 'react-router-dom';
import styled from '@emotion/styled';

import {Alert} from '@sentry/scraps/alert';
Expand All @@ -13,6 +15,7 @@ import {t} from 'sentry/locale';
import type {UseApiQueryResult} from 'sentry/utils/queryClient';
import type RequestError from 'sentry/utils/requestError/requestError';
import {useQueryParamState} from 'sentry/utils/url/useQueryParamState';
import {BuildDetailsMetricCards} from 'sentry/views/preprod/buildDetails/main/buildDetailsMetricCards';
Copy link
Contributor Author

@mtopo27 mtopo27 Nov 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

file name in commit has capital B (locally it's lower case B, not sure what's going on here)

Copy link
Member

@rbro112 rbro112 Nov 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure I'm following this, all looks fine to me in the file diff.

Copy link
Member

@rbro112 rbro112 Nov 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh wait, I see the file change name, as long as everything renders locally with pnpm run dev-ui I think you should be fine

import {AppSizeInsights} from 'sentry/views/preprod/buildDetails/main/insights/appSizeInsights';
import {BuildError} from 'sentry/views/preprod/components/buildError';
import {BuildProcessing} from 'sentry/views/preprod/components/buildProcessing';
Expand Down Expand Up @@ -52,6 +55,12 @@ export function BuildDetailsMainContent(props: BuildDetailsMainContentProps) {
isError: isAppSizeError,
error: appSizeError,
} = appSizeQuery;
const [searchParams, setSearchParams] = useSearchParams();
const openInsightsSidebar = useCallback(() => {
const next = new URLSearchParams(searchParams);
next.set('insights', 'open');
setSearchParams(next);
}, [searchParams, setSearchParams]);

// If the main data fetch fails, this component will not be rendered
// so we don't handle 'isBuildDetailsError'.
Expand Down Expand Up @@ -107,13 +116,21 @@ export function BuildDetailsMainContent(props: BuildDetailsMainContentProps) {

if (isLoadingRequests) {
return (
<Stack gap="lg" width="100%">
<Flex width="100%" justify="between" align="center" gap="md">
<Placeholder width="92px" height="40px" />
<Placeholder style={{flex: 1}} height="40px" />
<Stack gap="xl" minHeight="700px" width="100%">
<Flex gap="lg" wrap="wrap">
<Placeholder style={{flex: 1}} height="100px" />
<Placeholder style={{flex: 1}} height="100px" />
<Placeholder style={{flex: 1}} height="100px" />
</Flex>
<Placeholder width="100%" height="540px" />
<Placeholder height="140px" />
<Stack gap="sm">
<Flex width="100%" justify="between" align="center" gap="md">
<Placeholder width="92px" height="40px" />
<Placeholder style={{flex: 1}} height="40px" />
</Flex>
<Placeholder width="100%" height="540px" />
<Placeholder height="140px" />
</Stack>
<Placeholder height="200px" />
</Stack>
);
}
Expand Down Expand Up @@ -204,7 +221,6 @@ export function BuildDetailsMainContent(props: BuildDetailsMainContentProps) {
appSizeData.insights && totalSize > 0
? processInsights(appSizeData.insights, totalSize)
: [];

const categoriesEnabled =
appSizeData.treemap.category_breakdown &&
Object.keys(appSizeData.treemap.category_breakdown).length > 0;
Expand Down Expand Up @@ -283,55 +299,63 @@ export function BuildDetailsMainContent(props: BuildDetailsMainContentProps) {
}

return (
<Flex direction="column" gap="sm" minHeight="700px" width="100%">
<Flex align="center" gap="md">
{categoriesEnabled && (
<SegmentedControl value={selectedContent} onChange={handleContentChange}>
<SegmentedControl.Item key="treemap" icon={<IconGrid />} />
<SegmentedControl.Item key="categories" icon={<IconGraphCircle />} />
</SegmentedControl>
)}
{selectedContent === 'treemap' && (
<InputGroup style={{flexGrow: 1}}>
<InputGroup.LeadingItems>
<IconSearch />
</InputGroup.LeadingItems>
<InputGroup.Input
placeholder="Search files"
value={searchQuery || ''}
onChange={e => setSearchQuery(e.target.value || undefined)}
/>
{searchQuery && (
<InputGroup.TrailingItems>
<Button
onClick={() => setSearchQuery(undefined)}
aria-label="Clear search"
borderless
size="zero"
>
<IconClose size="sm" />
</Button>
</InputGroup.TrailingItems>
)}
</InputGroup>
)}
</Flex>
<ChartContainer>{visualizationContent}</ChartContainer>
<Stack gap="xl" minHeight="700px" width="100%">
<BuildDetailsMetricCards
sizeInfo={sizeInfo}
processedInsights={processedInsights}
totalSize={totalSize}
platform={buildDetailsData?.app_info?.platform ?? null}
onOpenInsightsSidebar={openInsightsSidebar}
/>

<Stack gap="xl">
<Stack gap="sm">
<Flex align="center" gap="md">
{categoriesEnabled && (
<SegmentedControl value={selectedContent} onChange={handleContentChange}>
<SegmentedControl.Item key="treemap" icon={<IconGrid />} />
<SegmentedControl.Item key="categories" icon={<IconGraphCircle />} />
</SegmentedControl>
)}
{selectedContent === 'treemap' && (
<InputGroup style={{flexGrow: 1}}>
<InputGroup.LeadingItems>
<IconSearch />
</InputGroup.LeadingItems>
<InputGroup.Input
placeholder="Search files"
value={searchQuery || ''}
onChange={e => setSearchQuery(e.target.value || undefined)}
/>
{searchQuery && (
<InputGroup.TrailingItems>
<Button
onClick={() => setSearchQuery(undefined)}
aria-label="Clear search"
borderless
size="zero"
>
<IconClose size="sm" />
</Button>
</InputGroup.TrailingItems>
)}
</InputGroup>
)}
</Flex>
<ChartContainer>{visualizationContent}</ChartContainer>
{selectedContent === 'treemap' && appSizeData && (
<AppSizeLegend
root={appSizeData.treemap.root}
selectedCategories={selectedCategories}
onToggleCategory={handleToggleCategory}
/>
)}
<AppSizeInsights
processedInsights={processedInsights}
platform={validatedPlatform(buildDetailsData?.app_info?.platform)}
/>
</Stack>
</Flex>

<AppSizeInsights
processedInsights={processedInsights}
platform={validatedPlatform(buildDetailsData?.app_info?.platform)}
/>
</Stack>
);
}

Expand Down
Loading
Loading