feat(trace-view): Add a new page for trace view (#24195)

This adds a new page for the trace view at
`/organizations/:orgId/performance/trace/:traceSlug/`. This also splits the
condition to enable quick trace by allowing either `trace-view-quick` or
`trace-view-summary` instead of both.

src/sentry/static/sentry/app/routes.tsx

@@ -1810,6 +1810,24 @@ function routes() {
               component={errorHandler(LazyLoad)}
             />
           </Route>
+          <Route
+            path="/organizations/:orgId/performance/trace/:traceSlug/"
+            componentPromise={() =>
+              import(
+                /* webpackChunkName: "PerformanceContainer" */ 'app/views/performance'
+              )
+            }
+            component={errorHandler(LazyLoad)}
+          >
+            <IndexRoute
+              componentPromise={() =>
+                import(
+                  /* webpackChunkName: "PerformanceTraceDetails" */ 'app/views/performance/traceDetails'
+                )
+              }
+              component={errorHandler(LazyLoad)}
+            />
+          </Route>
           <Route
             path="/organizations/:orgId/performance/:eventSlug/"
             componentPromise={() =>

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

@@ -270,8 +270,8 @@ class EventDetailsContent extends AsyncComponent<Props, State> {
 
     const hasQuickTraceView =
       event.type === 'transaction' &&
-      organization.features.includes('trace-view-quick') &&
-      organization.features.includes('trace-view-summary');
+      (organization.features.includes('trace-view-quick') ||
+        organization.features.includes('trace-view-summary'));
 
     if (hasQuickTraceView) {
       return (

src/sentry/static/sentry/app/views/performance/breadcrumb.tsx

@@ -17,6 +17,7 @@ type Props = {
   transactionName?: string;
   vitalName?: string;
   eventSlug?: string;
+  traceSlug?: string;
   transactionComparison?: boolean;
   realUserMonitoring?: boolean;
 };
@@ -30,6 +31,7 @@ class Breadcrumb extends React.Component<Props> {
       transactionName,
       vitalName,
       eventSlug,
+      traceSlug,
       transactionComparison,
       realUserMonitoring,
     } = this.props;
@@ -101,6 +103,11 @@ class Breadcrumb extends React.Component<Props> {
         to: '',
         label: t('Compare to Baseline'),
       });
+    } else if (traceSlug) {
+      crumbs.push({
+        to: '',
+        label: t('Trace View'),
+      });
     }
 
     return crumbs;

src/sentry/static/sentry/app/views/performance/traceDetails/content.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import {Params} from 'react-router/lib/Router';
+import {Location} from 'history';
+
+import * as Layout from 'app/components/layouts/thirds';
+import {t} from 'app/locale';
+import {Organization} from 'app/types';
+import Breadcrumb from 'app/views/performance/breadcrumb';
+
+type Props = {
+  location: Location;
+  organization: Organization;
+  params: Params;
+  traceSlug: string;
+};
+
+class TraceDetailsContent extends React.Component<Props> {
+  render() {
+    const {organization, location, traceSlug} = this.props;
+
+    return (
+      <React.Fragment>
+        <Layout.Header>
+          <Layout.HeaderContent>
+            <Breadcrumb
+              organization={organization}
+              location={location}
+              traceSlug={traceSlug}
+            />
+            <Layout.Title data-test-id="trace-header">
+              {t('Trace Id: %s', traceSlug)}
+            </Layout.Title>
+          </Layout.HeaderContent>
+        </Layout.Header>
+        <Layout.Body>
+          <Layout.Main fullWidth>{null}</Layout.Main>
+        </Layout.Body>
+      </React.Fragment>
+    );
+  }
+}
+
+export default TraceDetailsContent;

src/sentry/static/sentry/app/views/performance/traceDetails/index.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import {Params} from 'react-router/lib/Router';
+import styled from '@emotion/styled';
+import {Location} from 'history';
+
+import LightWeightNoProjectMessage from 'app/components/lightWeightNoProjectMessage';
+import SentryDocumentTitle from 'app/components/sentryDocumentTitle';
+import {t} from 'app/locale';
+import {PageContent} from 'app/styles/organization';
+import {Organization} from 'app/types';
+import withOrganization from 'app/utils/withOrganization';
+
+import TraceDetailsContent from './content';
+
+type Props = {
+  location: Location;
+  organization: Organization;
+  params: Params;
+};
+
+class TraceSummary extends React.Component<Props> {
+  getTraceSlug(): string {
+    const {traceSlug} = this.props.params;
+    return typeof traceSlug === 'string' ? traceSlug.trim() : '';
+  }
+
+  getDocumentTitle(): string {
+    return [t('Trace Details'), t('Performance')].join(' - ');
+  }
+
+  render() {
+    const {location, organization, params} = this.props;
+    this.getTraceSlug();
+
+    return (
+      <SentryDocumentTitle title={this.getDocumentTitle()} objSlug={organization.slug}>
+        <StyledPageContent>
+          <LightWeightNoProjectMessage organization={organization}>
+            <TraceDetailsContent
+              location={location}
+              organization={organization}
+              params={params}
+              traceSlug={this.getTraceSlug()}
+            />
+          </LightWeightNoProjectMessage>
+        </StyledPageContent>
+      </SentryDocumentTitle>
+    );
+  }
+}
+
+export default withOrganization(TraceSummary);
+
+const StyledPageContent = styled(PageContent)`
+  padding: 0;
+`;

src/sentry/static/sentry/app/views/performance/traceDetails/utils.ts

@@ -0,0 +1,14 @@
+import {LocationDescriptor, Query} from 'history';
+
+import {OrganizationSummary} from 'app/types';
+
+export function getTraceSummaryUrl(
+  organization: OrganizationSummary,
+  traceSlug: string,
+  query: Query
+): LocationDescriptor {
+  return {
+    pathname: `/organizations/${organization.slug}/performance/trace/${traceSlug}/`,
+    query: {...query},
+  };
+}

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

@@ -210,7 +210,7 @@ class EventDetailsContent extends AsyncComponent<Props, State> {
     );
 
     const hasQuickTraceView =
-      organization.features.includes('trace-view-quick') &&
+      organization.features.includes('trace-view-quick') ||
       organization.features.includes('trace-view-summary');
 
     if (hasQuickTraceView) {

src/sentry/static/sentry/app/views/performance/transactionDetails/utils.tsx

@@ -9,6 +9,7 @@ import {generateEventSlug} from 'app/utils/discover/urls';
 import {EventLite} from 'app/utils/performance/quickTrace/types';
 import {QueryResults, stringifyQueryObject} from 'app/utils/tokenizeSearch';
 
+import {getTraceSummaryUrl} from '../traceDetails/utils';
 import {getTransactionDetailsUrl} from '../utils';
 
 export function generateSingleEventTarget(
@@ -72,6 +73,11 @@ export function generateTraceTarget(
   organization: OrganizationSummary
 ): LocationDescriptor {
   const traceId = event.contexts?.trace?.trace_id ?? '';
+
+  if (organization.features.includes('trace-view-summary')) {
+    return getTraceSummaryUrl(organization, traceId, {});
+  }
+
   const {start, end} = getTraceDateTimeRange({
     start: event.startTimestamp,
     end: event.endTimestamp,