feat(insights): add resource name to sample panel (#71044)

Adds resource name to the sample panel and fixes header alignment on the
"Encoded Size" column.

**Before**

![image](https://github.com/getsentry/sentry/assets/58920989/3102a092-c977-4485-bc2e-13f5b3314f28)

**After**

![image](https://github.com/getsentry/sentry/assets/58920989/b407a63a-03ce-49e5-944b-fbb21b471f75)

static/app/views/starfish/components/samplesTable/spanSamplesTable.tsx

@@ -14,6 +14,7 @@ import useOrganization from 'sentry/utils/useOrganization';
 import {normalizeUrl} from 'sentry/utils/withDomainRequired';
 import {DurationComparisonCell} from 'sentry/views/starfish/components/samplesTable/common';
 import {DurationCell} from 'sentry/views/starfish/components/tableCells/durationCell';
+import FilenameCell from 'sentry/views/starfish/components/tableCells/filenameCell';
 import ResourceSizeCell from 'sentry/views/starfish/components/tableCells/resourceSizeCell';
 import {
   OverflowEllipsisTextContainer,
@@ -22,7 +23,7 @@ import {
 import type {SpanSample} from 'sentry/views/starfish/queries/useSpanSamples';
 import {type ModuleName, SpanMetricsField} from 'sentry/views/starfish/types';
 
-const {HTTP_RESPONSE_CONTENT_LENGTH} = SpanMetricsField;
+const {HTTP_RESPONSE_CONTENT_LENGTH, SPAN_DESCRIPTION} = SpanMetricsField;
 
 type Keys =
   | 'transaction_id'
@@ -32,7 +33,8 @@ type Keys =
   | 'duration'
   | 'p95_comparison'
   | 'avg_comparison'
-  | 'http.response_content_length';
+  | 'http.response_content_length'
+  | 'span.description';
 export type SamplesTableColumnHeader = GridColumnHeader<Keys>;
 
 export const DEFAULT_COLUMN_ORDER: SamplesTableColumnHeader[] = [
@@ -92,7 +94,8 @@ export function SpanSamplesTable({
     if (
       column.key === 'p95_comparison' ||
       column.key === 'avg_comparison' ||
-      column.key === 'duration'
+      column.key === 'duration' ||
+      column.key === HTTP_RESPONSE_CONTENT_LENGTH
     ) {
       return (
         <TextAlignRight>
@@ -152,6 +155,10 @@ export function SpanSamplesTable({
       return <ResourceSizeCell bytes={size} />;
     }
 
+    if (column.key === SPAN_DESCRIPTION) {
+      return <FilenameCell url={row[SPAN_DESCRIPTION]} />;
+    }
+
     if (column.key === 'profile_id') {
       return (
         <IconWrapper>

static/app/views/starfish/components/tableCells/filenameCell.tsx

@@ -0,0 +1,13 @@
+import {OverflowEllipsisTextContainer} from 'sentry/views/starfish/components/textAlign';
+
+type Props = {
+  url?: string;
+};
+
+function FilenameCell(props: Props) {
+  const {url} = props;
+  const filename = url?.split('/').pop()?.split('?')[0];
+  return <OverflowEllipsisTextContainer>{filename}</OverflowEllipsisTextContainer>;
+}
+
+export default FilenameCell;

static/app/views/starfish/views/spanSummaryPage/sampleList/index.tsx

@@ -27,7 +27,7 @@ import DurationChart from 'sentry/views/starfish/views/spanSummaryPage/sampleLis
 import SampleInfo from 'sentry/views/starfish/views/spanSummaryPage/sampleList/sampleInfo';
 import SampleTable from 'sentry/views/starfish/views/spanSummaryPage/sampleList/sampleTable/sampleTable';
 
-const {HTTP_RESPONSE_CONTENT_LENGTH} = SpanMetricsField;
+const {HTTP_RESPONSE_CONTENT_LENGTH, SPAN_DESCRIPTION} = SpanMetricsField;
 
 type Props = {
   groupId: string;
@@ -118,6 +118,7 @@ export function SampleList({
 
   if (moduleName === ModuleName.RESOURCE) {
     additionalFields?.push(SpanIndexedField.HTTP_RESPONSE_CONTENT_LENGTH);
+    additionalFields?.push(SpanIndexedField.SPAN_DESCRIPTION);
 
     columnOrder = [
       ...DEFAULT_COLUMN_ORDER,
@@ -126,6 +127,11 @@ export function SampleList({
         name: t('Encoded Size'),
         width: COL_WIDTH_UNDEFINED,
       },
+      {
+        key: SPAN_DESCRIPTION,
+        name: t('Resource Name'),
+        width: COL_WIDTH_UNDEFINED,
+      },
     ];
   }