chore(trace-view): Remove trace view related feature flags (#25897)

Removes trace view related feature flags from the product

src/sentry/api/endpoints/organization_events_trace.py

@@ -295,8 +295,7 @@ def query_trace_data(
 class OrganizationEventsTraceEndpointBase(OrganizationEventsV2EndpointBase):  # type: ignore
     def has_feature(self, organization: Organization, request: HttpRequest) -> bool:
         return bool(
-            features.has("organizations:trace-view-quick", organization, actor=request.user)
-            or features.has("organizations:trace-view-summary", organization, actor=request.user)
+            features.has("organizations:performance-view", organization, actor=request.user)
         )
 
     @staticmethod

static/app/components/events/interfaces/spans/header.tsx

@@ -406,10 +406,6 @@ class TraceViewHeader extends React.Component<PropType, State> {
   }
 
   render() {
-    const hasQuickTraceView =
-      this.props.organization.features.includes('trace-view-quick') ||
-      this.props.organization.features.includes('trace-view-summary');
-
     return (
       <HeaderContainer>
         <DividerHandlerManager.Consumer>
@@ -422,7 +418,7 @@ class TraceViewHeader extends React.Component<PropType, State> {
                     width: `calc(${toPercent(dividerPosition)} - 0.5px)`,
                   }}
                 >
-                  {hasQuickTraceView && this.props.event && (
+                  {this.props.event && (
                     <OpsBreakdown event={this.props.event} topN={3} hideHeader />
                   )}
                 </OperationsBreakdown>

static/app/components/events/interfaces/spans/spanDetail.tsx

@@ -269,9 +269,9 @@ class SpanDetail extends React.Component<Props, State> {
     }
 
     return (
-      <StyledDiscoverButton size="xsmall" to={generateTraceTarget(event, organization)}>
-        {t('Search by Trace')}
-      </StyledDiscoverButton>
+      <StyledButton size="xsmall" to={generateTraceTarget(event, organization)}>
+        {t('View Trace')}
+      </StyledButton>
     );
   }
 
@@ -603,6 +603,12 @@ const StyledDiscoverButton = styled(DiscoverButton)`
   right: ${space(0.5)};
 `;
 
+const StyledButton = styled(Button)`
+  position: absolute;
+  top: ${space(0.75)};
+  right: ${space(0.5)};
+`;
+
 export const SpanDetailContainer = styled('div')`
   border-bottom: 1px solid ${p => p.theme.border};
   cursor: auto;

static/app/components/quickTrace/utils.tsx

@@ -136,7 +136,7 @@ export function generateTraceTarget(
 
   const dateSelection = getParams(getTraceTimeRangeFromEvent(event));
 
-  if (organization.features.includes('trace-view-summary')) {
+  if (organization.features.includes('performance-view')) {
     // TODO(txiao): Should this persist the current query when going to trace view?
     return getTraceDetailsUrl(organization, traceId, dateSelection, {});
   }

static/app/views/eventsV2/eventDetails/content.tsx

@@ -279,9 +279,7 @@ class EventDetailsContent extends AsyncComponent<Props, State> {
       </Fragment>
     );
 
-    const hasQuickTraceView =
-      organization.features.includes('trace-view-quick') ||
-      organization.features.includes('trace-view-summary');
+    const hasQuickTraceView = organization.features.includes('performance-view');
 
     if (hasQuickTraceView) {
       const traceId = event.contexts?.trace?.trace_id ?? '';

static/app/views/organizationGroupDetails/eventToolbar.tsx

@@ -112,9 +112,7 @@ class GroupEventToolbar extends Component<Props> {
       evt.dateReceived &&
       Math.abs(+moment(evt.dateReceived) - +moment(evt.dateCreated)) > latencyThreshold;
 
-    const hasQuickTraceView =
-      organization.features.includes('trace-view-summary') ||
-      organization.features.includes('trace-view-quick');
+    const hasPerformanceView = organization.features.includes('performance-view');
     const hasTraceContext = evt.contexts?.trace?.trace_id;
 
     return (
@@ -145,14 +143,14 @@ class GroupEventToolbar extends Component<Props> {
           />
           {isOverLatencyThreshold && <StyledIconWarning color="yellow300" />}
         </Tooltip>
-        {hasQuickTraceView && !hasTraceContext && (
+        {hasPerformanceView && !hasTraceContext && (
           <DistributedTracingPrompt
             event={evt}
             group={this.props.group}
             organization={organization}
           />
         )}
-        {hasQuickTraceView && hasTraceContext && (
+        {hasPerformanceView && hasTraceContext && (
           <QuickTrace organization={organization} event={evt} location={location} />
         )}
       </Wrapper>

static/app/views/performance/transactionDetails/content.tsx

@@ -24,10 +24,7 @@ import {Event, EventTag} from 'app/types/event';
 import {trackAnalyticsEvent} from 'app/utils/analytics';
 import * as QuickTraceContext from 'app/utils/performance/quickTrace/quickTraceContext';
 import QuickTraceQuery from 'app/utils/performance/quickTrace/quickTraceQuery';
-import TraceMetaQuery, {
-  TraceMetaQueryChildrenProps,
-} from 'app/utils/performance/quickTrace/traceMetaQuery';
-import {QuickTraceQueryChildrenProps} from 'app/utils/performance/quickTrace/types';
+import TraceMetaQuery from 'app/utils/performance/quickTrace/traceMetaQuery';
 import {getTraceTimeRangeFromEvent} from 'app/utils/performance/quickTrace/utils';
 import Projects from 'app/utils/projects';
 import {appendTagCondition, decodeScalar} from 'app/utils/queryString';
@@ -125,131 +122,117 @@ class EventDetailsContent extends AsyncComponent<Props, State> {
     const query = decodeScalar(location.query.query, '');
 
     const eventJsonUrl = `/api/0/projects/${organization.slug}/${this.projectId}/events/${event.eventID}/json/`;
+    const traceId = event.contexts?.trace?.trace_id ?? '';
+    const {start, end} = getTraceTimeRangeFromEvent(event);
 
-    const renderContent = (
-      results?: QuickTraceQueryChildrenProps,
-      metaResults?: TraceMetaQueryChildrenProps
-    ) => (
-      <Fragment>
-        <Layout.Header>
-          <Layout.HeaderContent>
-            <Breadcrumb
-              organization={organization}
-              location={location}
-              transactionName={transactionName}
-              eventSlug={eventSlug}
-            />
-            <Layout.Title data-test-id="event-header">{event.title}</Layout.Title>
-          </Layout.HeaderContent>
-          <Layout.HeaderActions>
-            <ButtonBar gap={1}>
-              <Button onClick={this.toggleSidebar}>
-                {isSidebarVisible ? 'Hide Details' : 'Show Details'}
-              </Button>
-              {results && (
-                <Button icon={<IconOpen />} href={eventJsonUrl} external>
-                  {t('JSON')} (<FileSize bytes={event.size} />)
-                </Button>
-              )}
-            </ButtonBar>
-          </Layout.HeaderActions>
-        </Layout.Header>
-        <Layout.Body>
-          {results && (
-            <Layout.Main fullWidth>
-              <EventMetas
-                quickTrace={results}
-                meta={metaResults?.meta ?? null}
-                event={event}
-                organization={organization}
-                projectId={this.projectId}
-                location={location}
-                errorDest="issue"
-                transactionDest="performance"
-              />
-            </Layout.Main>
-          )}
-          <Layout.Main fullWidth={!isSidebarVisible}>
-            <Projects orgId={organization.slug} slugs={[this.projectId]}>
-              {({projects}) => (
-                <SpanEntryContext.Provider
-                  value={{
-                    getViewChildTransactionTarget: childTransactionProps => {
-                      return getTransactionDetailsUrl(
-                        organization,
-                        childTransactionProps.eventSlug,
-                        childTransactionProps.transaction,
-                        location.query
-                      );
-                    },
-                  }}
-                >
-                  <QuickTraceContext.Provider value={results}>
-                    <BorderlessEventEntries
+    return (
+      <TraceMetaQuery
+        location={location}
+        orgSlug={organization.slug}
+        traceId={traceId}
+        start={start}
+        end={end}
+      >
+        {metaResults => (
+          <QuickTraceQuery event={event} location={location} orgSlug={organization.slug}>
+            {results => (
+              <Fragment>
+                <Layout.Header>
+                  <Layout.HeaderContent>
+                    <Breadcrumb
                       organization={organization}
-                      event={event}
-                      project={projects[0] as Project}
-                      showExampleCommit={false}
-                      showTagSummary={false}
                       location={location}
-                      api={this.api}
+                      transactionName={transactionName}
+                      eventSlug={eventSlug}
                     />
-                  </QuickTraceContext.Provider>
-                </SpanEntryContext.Provider>
-              )}
-            </Projects>
-          </Layout.Main>
-          {isSidebarVisible && (
-            <Layout.Side>
-              {results === undefined && (
-                <Fragment>
-                  <EventMetadata
-                    event={event}
-                    organization={organization}
-                    projectId={this.projectId}
-                  />
-                  <RootSpanStatus event={event} />
-                  <OpsBreakdown event={event} />
-                </Fragment>
-              )}
-              <EventVitals event={event} />
-              <TagsTable event={event} query={query} generateUrl={this.generateTagUrl} />
-            </Layout.Side>
-          )}
-        </Layout.Body>
-      </Fragment>
+                    <Layout.Title data-test-id="event-header">{event.title}</Layout.Title>
+                  </Layout.HeaderContent>
+                  <Layout.HeaderActions>
+                    <ButtonBar gap={1}>
+                      <Button onClick={this.toggleSidebar}>
+                        {isSidebarVisible ? 'Hide Details' : 'Show Details'}
+                      </Button>
+                      {results && (
+                        <Button icon={<IconOpen />} href={eventJsonUrl} external>
+                          {t('JSON')} (<FileSize bytes={event.size} />)
+                        </Button>
+                      )}
+                    </ButtonBar>
+                  </Layout.HeaderActions>
+                </Layout.Header>
+                <Layout.Body>
+                  {results && (
+                    <Layout.Main fullWidth>
+                      <EventMetas
+                        quickTrace={results}
+                        meta={metaResults?.meta ?? null}
+                        event={event}
+                        organization={organization}
+                        projectId={this.projectId}
+                        location={location}
+                        errorDest="issue"
+                        transactionDest="performance"
+                      />
+                    </Layout.Main>
+                  )}
+                  <Layout.Main fullWidth={!isSidebarVisible}>
+                    <Projects orgId={organization.slug} slugs={[this.projectId]}>
+                      {({projects}) => (
+                        <SpanEntryContext.Provider
+                          value={{
+                            getViewChildTransactionTarget: childTransactionProps => {
+                              return getTransactionDetailsUrl(
+                                organization,
+                                childTransactionProps.eventSlug,
+                                childTransactionProps.transaction,
+                                location.query
+                              );
+                            },
+                          }}
+                        >
+                          <QuickTraceContext.Provider value={results}>
+                            <BorderlessEventEntries
+                              organization={organization}
+                              event={event}
+                              project={projects[0] as Project}
+                              showExampleCommit={false}
+                              showTagSummary={false}
+                              location={location}
+                              api={this.api}
+                            />
+                          </QuickTraceContext.Provider>
+                        </SpanEntryContext.Provider>
+                      )}
+                    </Projects>
+                  </Layout.Main>
+                  {isSidebarVisible && (
+                    <Layout.Side>
+                      {results === undefined && (
+                        <Fragment>
+                          <EventMetadata
+                            event={event}
+                            organization={organization}
+                            projectId={this.projectId}
+                          />
+                          <RootSpanStatus event={event} />
+                          <OpsBreakdown event={event} />
+                        </Fragment>
+                      )}
+                      <EventVitals event={event} />
+                      <TagsTable
+                        event={event}
+                        query={query}
+                        generateUrl={this.generateTagUrl}
+                      />
+                    </Layout.Side>
+                  )}
+                </Layout.Body>
+              </Fragment>
+            )}
+          </QuickTraceQuery>
+        )}
+      </TraceMetaQuery>
     );
-
-    const hasQuickTraceView =
-      organization.features.includes('trace-view-quick') ||
-      organization.features.includes('trace-view-summary');
-
-    if (hasQuickTraceView) {
-      const traceId = event.contexts?.trace?.trace_id ?? '';
-      const {start, end} = getTraceTimeRangeFromEvent(event);
-
-      return (
-        <TraceMetaQuery
-          location={location}
-          orgSlug={organization.slug}
-          traceId={traceId}
-          start={start}
-          end={end}
-        >
-          {metaResults => (
-            <QuickTraceQuery
-              event={event}
-              location={location}
-              orgSlug={organization.slug}
-            >
-              {results => renderContent(results, metaResults)}
-            </QuickTraceQuery>
-          )}
-        </TraceMetaQuery>
-      );
-    }
-
-    return renderContent();
   }
 
   renderError(error: Error) {

static/app/views/performance/transactionDetails/eventMetas.tsx

@@ -14,6 +14,7 @@ import {OrganizationSummary} from 'app/types';
 import {Event} from 'app/types/event';
 import {getShortEventId} from 'app/utils/events';
 import {getDuration} from 'app/utils/formatters';
+import getDynamicText from 'app/utils/getDynamicText';
 import {
   QuickTraceQueryChildrenProps,
   TraceMeta,
@@ -128,7 +129,10 @@ class EventMetas extends React.Component<Props, State> {
             headingText={t('Created')}
             tooltipText={t('The time at which this event was created.')}
             bodyText={timestamp}
-            subtext={<DateTime date={event.dateCreated} />}
+            subtext={getDynamicText({
+              value: <DateTime date={event.dateCreated} />,
+              fixed: 'May 6, 2021 3:27:01 UTC',
+            })}
           />
         )}
         {isTransaction(event) && (

static/app/views/performance/transactionSummary/content.tsx

@@ -192,9 +192,13 @@ class SummaryContent extends React.Component<Props, State> {
         })
       );
 
-    const transactionsListTitles = organization.features.includes('trace-view-summary')
-      ? [t('event id'), t('user'), t('total duration'), t('trace id'), t('timestamp')]
-      : [t('event id'), t('user'), t('total duration'), t('timestamp')];
+    const transactionsListTitles = [
+      t('event id'),
+      t('user'),
+      t('total duration'),
+      t('trace id'),
+      t('timestamp'),
+    ];
 
     let transactionsListEventView = eventView.clone();
 

static/app/views/performance/transactionSummary/index.tsx

@@ -63,8 +63,7 @@ class TransactionSummary extends Component<Props, State> {
     spanOperationBreakdownFilter: decodeFilterFromLocation(this.props.location),
     eventView: generateSummaryEventView(
       this.props.location,
-      getTransactionName(this.props.location),
-      this.props.organization
+      getTransactionName(this.props.location)
     ),
   };
 
@@ -74,8 +73,7 @@ class TransactionSummary extends Component<Props, State> {
       spanOperationBreakdownFilter: decodeFilterFromLocation(nextProps.location),
       eventView: generateSummaryEventView(
         nextProps.location,
-        getTransactionName(nextProps.location),
-        nextProps.organization
+        getTransactionName(nextProps.location)
       ),
     };
   }
@@ -270,8 +268,7 @@ const StyledPageContent = styled(PageContent)`
 
 function generateSummaryEventView(
   location: Location,
-  transactionName: string | undefined,
-  organization: Organization
+  transactionName: string | undefined
 ): EventView | undefined {
   if (transactionName === undefined) {
     return undefined;
@@ -288,9 +285,7 @@ function generateSummaryEventView(
     if (isAggregateField(field)) conditions.removeTag(field);
   });
 
-  const fields = organization.features.includes('trace-view-summary')
-    ? ['id', 'user.display', 'transaction.duration', 'trace', 'timestamp']
-    : ['id', 'user.display', 'transaction.duration', 'timestamp'];
+  const fields = ['id', 'user.display', 'transaction.duration', 'trace', 'timestamp'];
 
   return EventView.fromNewQueryWithLocation(
     {