feat(metrics): span id column (#70409)

static/app/components/metrics/metricSamplesTable.tsx

@@ -243,10 +243,6 @@ export function MetricSamplesTable({
     return null;
   }, [mri]);
 
-  const _renderPrependColumn = useMemo(() => {
-    return renderPrependColumn();
-  }, []);
-
   const _renderHeadCell = useMemo(() => {
     const generateSortLink = (key: string) => () => {
       if (!SORTABLE_COLUMNS.has(key as ResultField)) {
@@ -324,8 +320,6 @@ export function MetricSamplesTable({
         columnOrder={getColumnOrder(parsedMRI)}
         columnSortBy={[]}
         grid={{
-          prependColumnWidths,
-          renderPrependColumns: _renderPrependColumn,
           renderBodyCell: _renderBodyCell,
           renderHeadCell: _renderHeadCell,
         }}
@@ -347,6 +341,7 @@ function getColumnForMRI(parsedMRI?: ParsedMRI | null): GridColumnOrder<ResultFi
 
 function getColumnOrder(parsedMRI?: ParsedMRI | null): GridColumnOrder<ResultField>[] {
   const orders: (GridColumnOrder<ResultField> | undefined)[] = [
+    {key: 'id', width: COL_WIDTH_UNDEFINED, name: 'Span ID'},
     {key: 'span.description', width: COL_WIDTH_UNDEFINED, name: 'Description'},
     {key: 'span.op', width: COL_WIDTH_UNDEFINED, name: 'Operation'},
     getColumnForMRI(parsedMRI),
@@ -380,21 +375,6 @@ const SORTABLE_COLUMNS: Set<ResultField> = new Set([
   ...OPTIONALLY_SORTABLE_COLUMNS,
 ]);
 
-const prependColumnWidths = ['40px'];
-
-function renderPrependColumn() {
-  return function (
-    isHeader: boolean,
-    dataRow?: MetricsSamplesResults<SelectedField>['data'][number],
-    _rowIndex?: number
-  ) {
-    if (isHeader) {
-      return [null];
-    }
-    return [dataRow ? <ProjectRenderer projectSlug={dataRow.project} /> : null];
-  };
-}
-
 function renderHeadCell(
   currentSort: {direction: 'asc' | 'desc'; key: string} | undefined,
   generateSortLink: (key) => () => LocationDescriptorObject | undefined
@@ -417,10 +397,9 @@ function renderBodyCell(op?: string, unit?: string) {
     col: GridColumnOrder<ResultField>,
     dataRow: MetricsSamplesResults<SelectedField>['data'][number]
   ) {
-    if (col.key === 'span.description') {
+    if (col.key === 'id') {
       return (
-        <SpanDescription
-          description={dataRow['span.description']}
+        <SpanId
           project={dataRow.project}
           trace={dataRow.trace}
           timestamp={dataRow.timestamp}
@@ -433,6 +412,15 @@ function renderBodyCell(op?: string, unit?: string) {
       );
     }
 
+    if (col.key === 'span.description') {
+      return (
+        <SpanDescription
+          description={dataRow['span.description']}
+          project={dataRow.project}
+        />
+      );
+    }
+
     if (col.key === 'span.self_time' || col.key === 'span.duration') {
       return <DurationRenderer duration={dataRow[col.key]} />;
     }
@@ -469,7 +457,7 @@ function ProjectRenderer({projectSlug}: {projectSlug: string}) {
   const organization = useOrganization();
 
   return (
-    <Container>
+    <Flex>
       <Projects orgId={organization.slug} slugs={[projectSlug]}>
         {({projects}) => {
           const project = projects.find(p => p.slug === projectSlug);
@@ -482,12 +470,11 @@ function ProjectRenderer({projectSlug}: {projectSlug: string}) {
           );
         }}
       </Projects>
-    </Container>
+    </Flex>
   );
 }
 
-function SpanDescription({
-  description,
+function SpanId({
   duration,
   project,
   selfTime,
@@ -499,7 +486,6 @@ function SpanDescription({
   selfTimeColor = '#694D99',
   durationColor = 'gray100',
 }: {
-  description: string;
   duration: number;
   project: string;
   selfTime: number;
@@ -545,13 +531,13 @@ function SpanDescription({
     projectID: String(projects[0]?.id ?? ''),
   });
 
-  let contents = description ? (
-    <Fragment>{description}</Fragment>
+  let contents = spanId ? (
+    <Fragment>{getShortEventId(spanId)}</Fragment>
   ) : (
     <EmptyValueContainer>{t('(no value)')}</EmptyValueContainer>
   );
   if (defined(transactionDetailsTarget)) {
-    contents = <Link to={transactionDetailsTarget}>{contents}</Link>;
+    contents = <Link to={transactionDetailsTarget}>{getShortEventId(spanId)}</Link>;
   }
 
   return (
@@ -606,6 +592,15 @@ function SpanDescription({
   );
 }
 
+function SpanDescription({description, project}: {description: string; project: string}) {
+  return (
+    <Flex gap={space(0.75)} align="center">
+      <ProjectRenderer projectSlug={project} />
+      <Container>{description} </Container>
+    </Flex>
+  );
+}
+
 function DurationRenderer({duration}: {duration: number}) {
   return (
     <NumberContainer>

static/app/views/metrics/widget.tsx

@@ -140,6 +140,7 @@ export const MetricWidget = memo(
     focusedSeries,
     metricsSamples,
     overlays,
+    highlightedSampleId,
   }: MetricWidgetProps) => {
     const firstQuery = queries
       .filter(isNotQueryOnly)
@@ -176,7 +177,6 @@ export const MetricWidget = memo(
 
       onChange(index, {overlays: values});
     };
-
     const samples = useMemo(() => {
       if (!defined(metricsSamples)) {
         return undefined;
@@ -186,8 +186,15 @@ export const MetricWidget = memo(
         onSampleClick,
         unit: parseMRI(firstQuery?.mri)?.unit ?? '',
         operation: firstQuery?.op ?? '',
+        highlightedId: highlightedSampleId,
       };
-    }, [metricsSamples, firstQuery?.mri, firstQuery?.op, onSampleClick]);
+    }, [
+      metricsSamples,
+      firstQuery?.mri,
+      firstQuery?.op,
+      onSampleClick,
+      highlightedSampleId,
+    ]);
 
     const widgetTitle = getWidgetTitle(queries);
 
@@ -302,7 +309,7 @@ export interface SamplesProps {
   operation: string;
   unit: string;
   data?: MetricsSamplesResults<Field>['data'];
-  higlightedId?: string;
+  highlightedId?: string;
   onSampleClick?: (sample: MetricsSamplesResults<Field>['data'][number]) => void;
 }
 
@@ -374,7 +381,7 @@ const MetricWidgetBody = memo(
 
     const chartSamples = useMetricChartSamples({
       samples: samples?.data,
-      highlightedSampleId: samples?.higlightedId,
+      highlightedSampleId: samples?.highlightedId,
       operation: samples?.operation,
       onSampleClick: samples?.onSampleClick,
       timeseries: chartSeries,