feat(assets): Add image preview to assets summary details widget (#109329)

Renders sample images inside the details widget on the frontend assets
summary prebuilt dashboard when the viewed span is an image type
(detected by `span.op === resource.img` or by matching the description's
file extension against known image extensions).

The `SampleImages` component was previously unusable in this context
because `isSettingsLoading` was stuck at `true` — the project settings
query was disabled since no `projectId` was passed. Fixed by adding
`project.id` to `DefaultDetailWidgetFields` so the project can be
resolved and the query enabled.

Adds a `noVisualizationPadding` prop to `SampleImages` that strips the
`ChartPanel` border/padding when rendered inside a widget card. Also
threads the prop down to `ImageWrapper` to conditionally remove its
`padding-top`.

<img width="1447" height="394" alt="image"
src="https://github.com/user-attachments/assets/d968a19d-56bf-4122-a0da-1467990b1c35"
/>


Refs BROWSE-362

---------

Co-authored-by: Claude <noreply@anthropic.com>

Author: DominikB2014

static/app/views/dashboards/utils/prebuiltConfigs/frontendAssets/frontendAssetsSummary.ts

@@ -22,6 +22,7 @@ const ASSET_DESCRIPTION_WIDGET: Widget = {
         SpanFields.SPAN_GROUP,
         SpanFields.SPAN_DESCRIPTION,
         SpanFields.SPAN_CATEGORY,
+        SpanFields.PROJECT_ID,
       ] satisfies DefaultDetailWidgetFields[],
       aggregates: [],
       columns: [
@@ -30,6 +31,7 @@ const ASSET_DESCRIPTION_WIDGET: Widget = {
         SpanFields.SPAN_GROUP,
         SpanFields.SPAN_DESCRIPTION,
         SpanFields.SPAN_CATEGORY,
+        SpanFields.PROJECT_ID,
       ] satisfies DefaultDetailWidgetFields[],
       fieldAliases: [],
       conditions: '',
@@ -41,8 +43,8 @@ const ASSET_DESCRIPTION_WIDGET: Widget = {
   layout: {
     x: 0,
     y: 0,
-    minH: 1,
-    h: 1,
+    minH: 2,
+    h: 2,
     w: 6,
   },
 };
@@ -146,7 +148,7 @@ const SECOND_ROW_WIDGETS = spaceWidgetsEquallyOnRow(
       ],
     },
   ],
-  1,
+  2,
   {h: 1, minH: 1}
 );
 
@@ -210,7 +212,7 @@ const THIRD_ROW_WIDGETS = spaceWidgetsEquallyOnRow(
       ],
     },
   ],
-  1
+  3
 );
 
 const ASSETS_TABLE_WIDGET: Widget = {

static/app/views/dashboards/widgets/detailsWidget/detailsWidgetVisualization.spec.tsx

@@ -6,6 +6,10 @@ import {ProjectFixture} from 'sentry-fixture/project';
 import {render, screen, waitForElementToBeRemoved} from 'sentry-test/reactTestingLibrary';
 
 import {DetailsWidgetVisualization} from 'sentry/views/dashboards/widgets/detailsWidget/detailsWidgetVisualization';
+import type {DefaultDetailWidgetFields} from 'sentry/views/dashboards/widgets/detailsWidget/types';
+import type {SpanResponse} from 'sentry/views/insights/types';
+
+type TestSpan = Pick<SpanResponse, DefaultDetailWidgetFields>;
 
 describe('DetailsWidgetVisualization', () => {
   beforeEach(() => {
@@ -50,12 +54,13 @@ describe('DetailsWidgetVisualization', () => {
   });
 
   it('renders a span', () => {
-    const span = {
+    const span: TestSpan = {
       id: '123',
       ['span.op']: 'span_op',
       ['span.description']: 'span_description',
       ['span.group']: 'span_group',
       ['span.category']: 'span_category',
+      ['project.id']: 1,
     };
     render(<DetailsWidgetVisualization span={span} />);
     expect(
@@ -64,12 +69,13 @@ describe('DetailsWidgetVisualization', () => {
   });
 
   it('renders a db span', async () => {
-    const span = {
+    const span: TestSpan = {
       id: '123',
       ['span.op']: 'db',
       ['span.description']: 'SELECT * FROM users',
       ['span.group']: 'span_group',
       ['span.category']: 'db',
+      ['project.id']: 1,
     };
     render(<DetailsWidgetVisualization span={span} />);
 
@@ -81,12 +87,13 @@ describe('DetailsWidgetVisualization', () => {
   });
 
   it('renders an http domain status link', async () => {
-    const span = {
+    const span: TestSpan = {
       id: '123',
       ['span.op']: 'http',
       ['span.description']: 'GET /users',
       ['span.group']: 'span_group',
       ['span.category']: 'http',
+      ['project.id']: 1,
     };
     render(<DetailsWidgetVisualization span={span} />);
 

static/app/views/dashboards/widgets/detailsWidget/detailsWidgetVisualization.tsx

@@ -5,6 +5,9 @@ import {Container, Flex} from '@sentry/scraps/layout';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import {AutoSizedText} from 'sentry/views/dashboards/widgetCard/autoSizedText';
 import type {DefaultDetailWidgetFields} from 'sentry/views/dashboards/widgets/detailsWidget/types';
+import SampleImages from 'sentry/views/insights/browser/resources/components/sampleImages';
+import {IMAGE_FILE_EXTENSIONS} from 'sentry/views/insights/browser/resources/constants';
+import {ResourceSpanOps} from 'sentry/views/insights/browser/resources/types';
 import {DatabaseSpanDescription} from 'sentry/views/insights/common/components/spanDescription';
 import {useSpans} from 'sentry/views/insights/common/queries/useDiscover';
 import {resolveSpanModule} from 'sentry/views/insights/common/utils/resolveSpanModule';
@@ -49,12 +52,38 @@ export function DetailsWidgetVisualization(props: DetailsWidgetVisualizationProp
   }
 
   if (moduleName === ModuleName.RESOURCE) {
+    const isImage =
+      spanOp === ResourceSpanOps.IMAGE ||
+      IMAGE_FILE_EXTENSIONS.includes(
+        (spanDescription.split('?')[0] ?? '').split('.').pop()?.toLowerCase() ?? ''
+      );
+
+    if (isImage) {
+      const projectId = span[SpanFields.PROJECT_ID]
+        ? Number(span[SpanFields.PROJECT_ID])
+        : undefined;
+      return <ResourceImageVisualization spanGroup={spanGroup} projectId={projectId} />;
+    }
+
     return <Container padding="md xl">{spanDescription}</Container>;
   }
 
   return <Wrapper>{`${spanOp} - ${spanDescription}`}</Wrapper>;
 }
 
+function ResourceImageVisualization(props: {
+  spanGroup: string;
+  projectId?: number;
+}): React.ReactNode {
+  const {spanGroup, projectId} = props;
+
+  return (
+    <Container padding="0 xl" overflow="auto" height="100%">
+      <SampleImages groupId={spanGroup} projectId={projectId} noVisualizationPadding />
+    </Container>
+  );
+}
+
 function HttpSpanVisualization(props: {
   spanDescription: string;
   spanId: string;

static/app/views/dashboards/widgets/detailsWidget/types.ts

@@ -5,4 +5,5 @@ export type DefaultDetailWidgetFields =
   | SpanFields.SPAN_GROUP
   | SpanFields.SPAN_DESCRIPTION
   | SpanFields.ID
-  | SpanFields.SPAN_CATEGORY;
+  | SpanFields.SPAN_CATEGORY
+  | SpanFields.PROJECT_ID;

static/app/views/insights/browser/resources/components/sampleImages.tsx

@@ -24,7 +24,7 @@ import type {SpanResponse} from 'sentry/views/insights/types';
 import {SpanFields} from 'sentry/views/insights/types';
 import {usePerformanceGeneralProjectSettings} from 'sentry/views/performance/utils';
 
-type Props = {groupId: string; projectId?: number};
+type Props = {groupId: string; noVisualizationPadding?: boolean; projectId?: number};
 
 export const LOCAL_STORAGE_SHOW_LINKS = 'performance-resources-images-showLinks';
 
@@ -38,7 +38,7 @@ const {
 const imageWidth = '200px';
 const imageHeight = '180px';
 
-function SampleImages({groupId, projectId}: Props) {
+function SampleImages({groupId, projectId, noVisualizationPadding}: Props) {
   const [showLinks, setShowLinks] = useLocalStorageState(LOCAL_STORAGE_SHOW_LINKS, false);
   const filters = useResourceModuleFilters();
   const [showImages, setShowImages] = useState(showLinks);
@@ -83,17 +83,24 @@ function SampleImages({groupId, projectId}: Props) {
     setShowImages(true);
   };
 
+  const body = (
+    <SampleImagesChartPanelBody
+      onClickShowLinks={handleClickOnlyShowLinks}
+      images={filteredResources}
+      isLoadingImages={isLoadingImages}
+      isSettingsLoading={isSettingsLoading}
+      isImagesEnabled={isImagesEnabled}
+      showImages={showImages || isImagesEnabled}
+      noVisualizationPadding={noVisualizationPadding}
+    />
+  );
+
+  if (noVisualizationPadding) {
+    return body;
+  }
+
   return (
-    <ChartPanel title={showImages ? t('Largest Images') : undefined}>
-      <SampleImagesChartPanelBody
-        onClickShowLinks={handleClickOnlyShowLinks}
-        images={filteredResources}
-        isLoadingImages={isLoadingImages}
-        isSettingsLoading={isSettingsLoading}
-        isImagesEnabled={isImagesEnabled}
-        showImages={showImages || isImagesEnabled}
-      />
-    </ChartPanel>
+    <ChartPanel title={showImages ? t('Largest Images') : undefined}>{body}</ChartPanel>
   );
 }
 
@@ -111,6 +118,7 @@ function SampleImagesChartPanelBody(props: {
   isLoadingImages: boolean;
   isSettingsLoading: boolean;
   showImages: boolean;
+  noVisualizationPadding?: boolean;
   onClickShowLinks?: () => void;
 }) {
   const {
@@ -120,6 +128,7 @@ function SampleImagesChartPanelBody(props: {
     showImages,
     isImagesEnabled,
     isSettingsLoading,
+    noVisualizationPadding,
   } = props;
 
   const hasImages = images.length > 0;
@@ -147,7 +156,7 @@ function SampleImagesChartPanelBody(props: {
   }
 
   return (
-    <ImageWrapper>
+    <ImageWrapper noVisualizationPadding={noVisualizationPadding}>
       {images.map(resource => {
         const hasRawDomain = Boolean(resource[RAW_DOMAIN]);
         const isRelativeUrl = resource[SPAN_DESCRIPTION].startsWith('/');
@@ -299,10 +308,10 @@ const getFileNameFromDescription = (description: string) => {
   return url.pathname.split('/').pop() ?? '';
 };
 
-const ImageWrapper = styled('div')`
+const ImageWrapper = styled('div')<{noVisualizationPadding?: boolean}>`
   display: grid;
   grid-template-columns: repeat(auto-fill, ${imageWidth});
-  padding-top: ${space(2)};
+  padding-top: ${p => (p.noVisualizationPadding ? 0 : space(2))};
   gap: 30px;
 `;