feat(trace-view): Link Search by Trace in Issues to Trace View (#25361)

Search by Trace in the Issue details currently links to a discover query. This
change links it to the new trace view when the feature is enabled.

static/app/components/events/contexts/trace/getTraceKnownDataDetails.tsx

@@ -1,15 +1,12 @@
 import React from 'react';
 import styled from '@emotion/styled';
-import moment from 'moment-timezone';
 
 import Button from 'app/components/button';
-import {getTraceDateTimeRange} from 'app/components/events/interfaces/spans/utils';
-import {ALL_ACCESS_PROJECTS} from 'app/constants/globalSelectionHeader';
+import {generateTraceTarget} from 'app/components/quickTrace/utils';
 import {t} from 'app/locale';
 import space from 'app/styles/space';
 import {Organization} from 'app/types';
 import {Event} from 'app/types/event';
-import EventView from 'app/utils/discover/eventView';
 import {transactionSummaryRouteWithQuery} from 'app/views/performance/transactionSummary/utils';
 
 import {TraceKnownData, TraceKnownDataType} from './types';
@@ -40,28 +37,6 @@ function getUserKnownDataDetails(
         };
       }
 
-      const dateCreated = moment(event.dateCreated).valueOf() / 1000;
-      const pointInTime = event?.dateReceived
-        ? moment(event.dateReceived).valueOf() / 1000
-        : dateCreated;
-
-      const {start, end} = getTraceDateTimeRange({start: pointInTime, end: pointInTime});
-
-      const orgFeatures = new Set(organization.features);
-
-      const traceEventView = EventView.fromSavedQuery({
-        id: undefined,
-        name: `Events with Trace ID ${traceId}`,
-        fields: ['title', 'event.type', 'project', 'trace.span', 'timestamp'],
-        orderby: '-timestamp',
-        query: `trace:${traceId}`,
-        projects: orgFeatures.has('global-views')
-          ? [ALL_ACCESS_PROJECTS]
-          : [Number(event.projectID)],
-        version: 2,
-        start,
-        end,
-      });
       return {
         subject: t('Trace ID'),
         value: (
@@ -69,10 +44,7 @@ function getUserKnownDataDetails(
             <pre className="val">
               <span className="val-string">{traceId}</span>
             </pre>
-            <StyledButton
-              size="xsmall"
-              to={traceEventView.getResultsViewUrlTarget(organization.slug)}
-            >
+            <StyledButton size="xsmall" to={generateTraceTarget(event, organization)}>
               {t('Search by Trace')}
             </StyledButton>
           </ButtonWrapper>

static/app/components/quickTrace/utils.tsx

@@ -143,11 +143,13 @@ export function generateTraceTarget(
 
   const eventView = EventView.fromSavedQuery({
     id: undefined,
-    name: `Transactions with Trace ID ${traceId}`,
-    fields: ['transaction', 'project', 'trace.span', 'transaction.duration', 'timestamp'],
+    name: `Events with Trace ID ${traceId}`,
+    fields: ['title', 'event.type', 'project', 'trace.span', 'timestamp'],
     orderby: '-timestamp',
-    query: `event.type:transaction trace:${traceId}`,
-    projects: [ALL_ACCESS_PROJECTS],
+    query: `trace:${traceId}`,
+    projects: organization.features.includes('global-views')
+      ? [ALL_ACCESS_PROJECTS]
+      : [Number(event.projectID)],
     version: 2,
     ...dateSelection,
   });

static/app/utils/performance/quickTrace/utils.tsx

@@ -1,4 +1,5 @@
 import omit from 'lodash/omit';
+import moment from 'moment-timezone';
 
 import {Client} from 'app/api';
 import {getTraceDateTimeRange} from 'app/components/events/interfaces/spans/utils';
@@ -257,7 +258,8 @@ export function makeEventView({
 export function getTraceTimeRangeFromEvent(event: Event): {start: string; end: string} {
   const start = isTransaction(event)
     ? event.startTimestamp
-    : new Date(event.dateCreated).getTime() / 1000;
+    : moment(event.dateReceived ? event.dateReceived : event.dateCreated).valueOf() /
+      1000;
   const end = isTransaction(event) ? event.endTimestamp : start;
   return getTraceDateTimeRange({start, end});
 }