refactoring, fix tests

Author: lzhao-sentry

static/app/utils/discover/fieldRenderers.tsx

@@ -47,7 +47,6 @@ import {
   SPAN_OP_BREAKDOWN_FIELDS,
   SPAN_OP_RELATIVE_BREAKDOWN_FIELD,
 } from 'sentry/utils/discover/fields';
-import {generateLinkToEventInTraceView} from 'sentry/utils/discover/urls';
 import ViewReplayLink from 'sentry/utils/discover/viewReplayLink';
 import {getShortEventId} from 'sentry/utils/events';
 import {formatRate} from 'sentry/utils/formatters';
@@ -68,7 +67,6 @@ import {SpanDescriptionCell} from 'sentry/views/insights/common/components/table
 import {StarredSegmentCell} from 'sentry/views/insights/common/components/tableCells/starredSegmentCell';
 import {TimeSpentCell} from 'sentry/views/insights/common/components/tableCells/timeSpentCell';
 import {ModuleName, SpanFields, SpanMetricsField} from 'sentry/views/insights/types';
-import {getTraceDetailsUrl} from 'sentry/views/performance/traceDetails/utils';
 import {
   filterToLocationQuery,
   SpanOperationBreakdownFilter,
@@ -143,7 +141,9 @@ const EmptyValueContainer = styled('span')`
   color: ${p => p.theme.subText};
 `;
 const emptyValue = <EmptyValueContainer>{t('(no value)')}</EmptyValueContainer>;
-const emptyStringValue = <EmptyValueContainer>{t('(empty string)')}</EmptyValueContainer>;
+export const emptyStringValue = (
+  <EmptyValueContainer>{t('(empty string)')}</EmptyValueContainer>
+);
 const missingUserMisery = tct(
   'We were unable to calculate User Misery. A likely cause of this is that the user was not set. [link:Read the docs]',
   {
@@ -476,30 +476,12 @@ const SPECIAL_FIELDS: Record<string, SpecialField> = {
   },
   id: {
     sortField: 'id',
-    renderFunc: (data, {organization, location}) => {
+    renderFunc: data => {
       const id: string | unknown = data?.id;
       if (typeof id !== 'string') {
         return <Container>{emptyStringValue}</Container>;
       }
-
-      if (!data.trace) {
-        return <Container>{getShortEventId(id)}</Container>;
-      }
-
-      const target = generateLinkToEventInTraceView({
-        traceSlug: data.trace,
-        timestamp: data.timestamp,
-        targetId: data['transaction.span_id'],
-        organization,
-        location,
-        spanId: id,
-      });
-
-      return (
-        <Container>
-          <Link to={target}>{getShortEventId(id)}</Link>
-        </Container>
-      );
+      return <Container>{getShortEventId(id)}</Container>;
     },
   },
   span_id: {
@@ -564,25 +546,13 @@ const SPECIAL_FIELDS: Record<string, SpecialField> = {
   },
   trace: {
     sortField: 'trace',
-    renderFunc: (data, {organization, location}) => {
+    renderFunc: data => {
       const id: string | unknown = data?.trace;
       if (typeof id !== 'string') {
         return emptyValue;
       }
 
-      const target = getTraceDetailsUrl({
-        traceSlug: data.trace,
-        timestamp: data.timestamp,
-        organization,
-        dateSelection: {statsPeriod: undefined, start: undefined, end: undefined},
-        location,
-      });
-
-      return (
-        <Container>
-          <Link to={target}>{getShortEventId(id)}</Link>
-        </Container>
-      );
+      return <Container>{getShortEventId(id)}</Container>;
     },
   },
   'issue.id': {

static/app/utils/discover/styles.tsx

@@ -66,5 +66,6 @@ export const UserIcon = styled(IconUser)`
 export const IconContainer = styled('div')`
   display: flex;
   gap: ${space(1)};
-  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
 `;

static/app/views/dashboards/datasetConfig/spans.tsx

@@ -2,6 +2,7 @@ import pickBy from 'lodash/pickBy';
 
 import {doEventsRequest} from 'sentry/actionCreators/events';
 import type {Client} from 'sentry/api';
+import {Link} from 'sentry/components/core/link';
 import type {PageFilters} from 'sentry/types/core';
 import type {TagCollection} from 'sentry/types/group';
 import type {
@@ -13,14 +14,17 @@ import type {
 import toArray from 'sentry/utils/array/toArray';
 import type {CustomMeasurementCollection} from 'sentry/utils/customMeasurements/customMeasurements';
 import type {EventsTableData, TableData} from 'sentry/utils/discover/discoverQuery';
-import {getFieldRenderer} from 'sentry/utils/discover/fieldRenderers';
+import type {RenderFunctionBaggage} from 'sentry/utils/discover/fieldRenderers';
+import {emptyStringValue, getFieldRenderer} from 'sentry/utils/discover/fieldRenderers';
 import type {Aggregation, QueryFieldValue} from 'sentry/utils/discover/fields';
 import {
   type DiscoverQueryExtras,
   type DiscoverQueryRequestParams,
   doDiscoverQuery,
 } from 'sentry/utils/discover/genericDiscoverQuery';
 import {DiscoverDatasets} from 'sentry/utils/discover/types';
+import {generateLinkToEventInTraceView} from 'sentry/utils/discover/urls';
+import {getShortEventId} from 'sentry/utils/events';
 import {
   AggregationKey,
   ALLOWED_EXPLORE_VISUALIZE_AGGREGATES,
@@ -172,6 +176,9 @@ export const SpansConfig: DatasetConfig<
   transformSeries: transformEventsResponseToSeries,
   filterAggregateParams,
   getCustomFieldRenderer: (field, meta, widget, _organization) => {
+    if (field === 'id') {
+      return renderEventInTraceView;
+    }
     if (field === 'trace') {
       return renderTraceAsLinkable(widget);
     }
@@ -356,3 +363,23 @@ function filterSeriesSortOptions(columns: Set<string>) {
     return columns.has(option.value.meta.name);
   };
 }
+
+function renderEventInTraceView(
+  data: any,
+  {location, organization}: RenderFunctionBaggage
+) {
+  const spanId: string = data.id;
+  if (!spanId) {
+    return emptyStringValue;
+  }
+  const target = generateLinkToEventInTraceView({
+    traceSlug: data.trace,
+    timestamp: data.timestamp,
+    targetId: data['transaction.span_id'],
+    organization,
+    location,
+    spanId,
+  });
+
+  return <Link to={target}>{getShortEventId(spanId)}</Link>;
+}

static/app/views/discover/table/tableView.tsx

@@ -379,7 +379,7 @@ function TableView(props: TableViewProps) {
 
       const idLink = (
         <StyledLink data-test-id="view-event" to={target}>
-          {getShortEventId(dataRow[columnKey])}
+          {cell}
         </StyledLink>
       );
 

static/app/views/explore/tables/fieldRenderer.tsx

@@ -146,7 +146,7 @@ function BaseExploreFieldRenderer({
       source: TraceViewSources.TRACES,
     });
 
-    rendered = <Link to={target}>{data[field]}</Link>;
+    rendered = <Link to={target}>{rendered}</Link>;
   }
 
   if (['id', 'span_id', 'transaction.id'].includes(field)) {
@@ -162,9 +162,7 @@ function BaseExploreFieldRenderer({
       source: TraceViewSources.TRACES,
     });
 
-    rendered = (
-      <Link to={target}>{spanId ? getShortEventId(data[field]) : data[field]}</Link>
-    );
+    rendered = <Link to={target}>{rendered}</Link>;
   }
 
   if (field === 'profile.id') {

static/app/views/performance/transactionEvents.spec.tsx

@@ -237,7 +237,7 @@ describe('Performance > TransactionSummary', function () {
     expect(tableFirstRowColumns[2]).toHaveTextContent('(no value)');
     expect(tableFirstRowColumns[3]).toHaveTextContent('400.00ms');
     expect(tableFirstRowColumns[4]).toHaveTextContent('1234');
-    expect(tableFirstRowColumns[5]).toHaveTextContent('May 21, 2020 3:31:18 PM UTC');
+    expect(tableFirstRowColumns[5]).toHaveTextContent('in 3y');
 
     ProjectsStore.reset();
   });
@@ -268,7 +268,7 @@ describe('Performance > TransactionSummary', function () {
     expect(tableFirstRowColumns[3]).toHaveTextContent('200');
     expect(tableFirstRowColumns[4]).toHaveTextContent('400.00ms');
     expect(tableFirstRowColumns[5]).toHaveTextContent('1234');
-    expect(tableFirstRowColumns[6]).toHaveTextContent('May 21, 2020 3:31:18 PM UTC');
+    expect(tableFirstRowColumns[6]).toHaveTextContent('in 3y');
 
     ProjectsStore.reset();
   });