keep transaction summary tabs within domain view

getsentry · Oct 18, 2024 · 845608a · 845608a
1 parent a354186
commit 845608a
Show file tree

Hide file tree

Showing 21 changed files with 344 additions and 65 deletions.
diff --git a/static/app/routes.tsx b/static/app/routes.tsx
@@ -1707,6 +1707,10 @@ function buildRoutes() {
           )}
         />
         {transactionSummaryRoutes}
+        <Route
+          path="trace/:traceSlug/"
+          component={make(() => import('sentry/views/performance/traceDetails'))}
+        />
         <Route path={`${MODULE_BASE_URLS[ModuleName.HTTP]}/`}>
           <IndexRoute
             component={make(
@@ -1762,6 +1766,11 @@ function buildRoutes() {
             () => import('sentry/views/insights/pages/backend/backendOverviewPage')
           )}
         />
+        {transactionSummaryRoutes}
+        <Route
+          path="trace/:traceSlug/"
+          component={make(() => import('sentry/views/performance/traceDetails'))}
+        />
         <Route path={`${MODULE_BASE_URLS[ModuleName.DB]}/`}>
           <IndexRoute
             component={make(
@@ -1815,6 +1824,11 @@ function buildRoutes() {
             () => import('sentry/views/insights/pages/mobile/mobileOverviewPage')
           )}
         />
+        {transactionSummaryRoutes}
+        <Route
+          path="trace/:traceSlug/"
+          component={make(() => import('sentry/views/performance/traceDetails'))}
+        />
         <Route path={`${MODULE_BASE_URLS[ModuleName.MOBILE_SCREENS]}/`}>
           <IndexRoute
             component={make(
@@ -1883,6 +1897,11 @@ function buildRoutes() {
         <IndexRoute
           component={make(() => import('sentry/views/insights/pages/ai/aiOverviewPage'))}
         />
+        {transactionSummaryRoutes}
+        <Route
+          path="trace/:traceSlug/"
+          component={make(() => import('sentry/views/performance/traceDetails'))}
+        />
         <Route path={`${MODULE_BASE_URLS[ModuleName.AI]}/`}>
           <IndexRoute
             component={make(

diff --git a/static/app/utils/discover/urls.tsx b/static/app/utils/discover/urls.tsx
@@ -3,6 +3,7 @@ import type {Location, LocationDescriptorObject} from 'history';
 
 import type {Organization, OrganizationSummary} from 'sentry/types/organization';
 import normalizeUrl from 'sentry/utils/url/normalizeUrl';
+import type {DomainView} from 'sentry/views/insights/pages/useFilters';
 import {getTraceDetailsUrl} from 'sentry/views/performance/traceDetails/utils';
 
 import {getTimeStampFromTableDateField} from '../dates';
@@ -56,6 +57,7 @@ export function generateLinkToEventInTraceView({
   demo,
   source,
   type = 'performance',
+  view,
 }: {
   eventId: string | undefined;
   location: Location;
@@ -73,6 +75,7 @@ export function generateLinkToEventInTraceView({
   targetId?: string;
   transactionName?: string;
   type?: 'performance' | 'discover';
+  view?: DomainView;
 }) {
   const _eventView = eventView ?? EventView.fromLocation(location);
   const dateSelection = _eventView.normalizeDateSelection(location);
@@ -99,6 +102,7 @@ export function generateLinkToEventInTraceView({
       demo,
       location,
       source,
+      view,
     });
   }
 
@@ -108,7 +112,8 @@ export function generateLinkToEventInTraceView({
       eventSlug,
       transactionName,
       location.query,
-      spanId
+      spanId,
+      view
     );
   }
 

diff --git a/static/app/utils/performance/urls.ts b/static/app/utils/performance/urls.ts
@@ -4,6 +4,8 @@ import {spanTargetHash} from 'sentry/components/events/interfaces/spans/utils';
 import type {Organization} from 'sentry/types/organization';
 import {defined} from 'sentry/utils';
 import normalizeUrl from 'sentry/utils/url/normalizeUrl';
+import type {DomainView} from 'sentry/views/insights/pages/useFilters';
+import {getPerformanceBaseUrl} from 'sentry/views/performance/utils';
 
 /**
  * Routes to the transaction event details view.
@@ -17,7 +19,8 @@ export function getTransactionDetailsUrl(
   eventSlug: string,
   transaction?: string,
   query?: Query,
-  spanId?: string
+  spanId?: string,
+  view?: DomainView
 ): LocationDescriptor {
   const locationQuery = {
     ...(query || {}),
@@ -28,7 +31,7 @@ export function getTransactionDetailsUrl(
   }
 
   const target: LocationDescriptor = {
-    pathname: normalizeUrl(`/organizations/${orgSlug}/performance/${eventSlug}/`),
+    pathname: normalizeUrl(`${getPerformanceBaseUrl(orgSlug, view)}/${eventSlug}/`),
     query: locationQuery,
     hash: defined(spanId) ? spanTargetHash(spanId) : undefined,
   };

diff --git a/static/app/views/insights/pages/frontend/frontendOverviewPage.tsx b/static/app/views/insights/pages/frontend/frontendOverviewPage.tsx
@@ -30,7 +30,10 @@ import {ToolRibbon} from 'sentry/views/insights/common/components/ribbon';
 import {ViewTrendsButton} from 'sentry/views/insights/common/components/viewTrendsButton';
 import {useOnboardingProject} from 'sentry/views/insights/common/queries/useOnboardingProject';
 import {FrontendHeader} from 'sentry/views/insights/pages/frontend/frontendPageHeader';
-import {OVERVIEW_PAGE_ALLOWED_OPS} from 'sentry/views/insights/pages/frontend/settings';
+import {
+  FRONTEND_LANDING_TITLE,
+  OVERVIEW_PAGE_ALLOWED_OPS,
+} from 'sentry/views/insights/pages/frontend/settings';
 import {OVERVIEW_PAGE_TITLE} from 'sentry/views/insights/pages/settings';
 import {generateFrontendOtherPerformanceEventView} from 'sentry/views/performance/data';
 import {
@@ -160,7 +163,10 @@ function FrontendOverviewPage() {
       organization={organization}
       renderDisabled={NoAccess}
     >
-      <FrontendHeader headerActions={<ViewTrendsButton />} />
+      <FrontendHeader
+        headerTitle={FRONTEND_LANDING_TITLE}
+        headerActions={<ViewTrendsButton />}
+      />
       <Layout.Body>
         <Layout.Main fullWidth>
           <ModuleLayout.Layout>

diff --git a/static/app/views/insights/pages/frontend/frontendPageHeader.tsx b/static/app/views/insights/pages/frontend/frontendPageHeader.tsx
@@ -1,6 +1,9 @@
 import normalizeUrl from 'sentry/utils/url/normalizeUrl';
 import useOrganization from 'sentry/utils/useOrganization';
-import {DomainViewHeader} from 'sentry/views/insights/pages/domainViewHeader';
+import {
+  DomainViewHeader,
+  type Props as HeaderProps,
+} from 'sentry/views/insights/pages/domainViewHeader';
 import {
   FRONTEND_LANDING_SUB_PATH,
   FRONTEND_LANDING_TITLE,
@@ -9,12 +12,23 @@ import {DOMAIN_VIEW_BASE_URL} from 'sentry/views/insights/pages/settings';
 import {ModuleName} from 'sentry/views/insights/types';
 
 type Props = {
-  headerActions?: React.ReactNode;
-  module?: ModuleName;
+  breadcrumbs?: HeaderProps['additionalBreadCrumbs'];
+  headerActions?: HeaderProps['additonalHeaderActions'];
+  headerTitle?: HeaderProps['headerTitle'];
+  hideDefaultTabs?: HeaderProps['hideDefaultTabs'];
+  module?: HeaderProps['selectedModule'];
+  tabs?: HeaderProps['tabs'];
 };
 
 // TODO - add props to append to breadcrumbs and change title
-export function FrontendHeader({module, headerActions}: Props) {
+export function FrontendHeader({
+  module,
+  headerActions,
+  breadcrumbs,
+  headerTitle,
+  hideDefaultTabs,
+  tabs,
+}: Props) {
   const {slug} = useOrganization();
 
   const frontendBaseUrl = normalizeUrl(
@@ -28,9 +42,12 @@ export function FrontendHeader({module, headerActions}: Props) {
       domainBaseUrl={frontendBaseUrl}
       domainTitle={FRONTEND_LANDING_TITLE}
       modules={modules}
+      tabs={tabs}
       selectedModule={module}
       additonalHeaderActions={headerActions}
-      headerTitle={FRONTEND_LANDING_TITLE}
+      hideDefaultTabs={hideDefaultTabs}
+      additionalBreadCrumbs={breadcrumbs}
+      headerTitle={headerTitle || FRONTEND_LANDING_TITLE}
     />
   );
 }
diff --git a/static/app/views/insights/pages/useDomainViewUrl.ts b/static/app/views/insights/pages/useDomainViewUrl.ts
diff --git a/static/app/views/performance/traceDetails/utils.tsx b/static/app/views/performance/traceDetails/utils.tsx
@@ -12,6 +12,8 @@ import type {
 } from 'sentry/utils/performance/quickTrace/types';
 import {isTraceSplitResult, reduceTrace} from 'sentry/utils/performance/quickTrace/utils';
 import normalizeUrl from 'sentry/utils/url/normalizeUrl';
+import type {DomainView} from 'sentry/views/insights/pages/useFilters';
+import {getPerformanceBaseUrl} from 'sentry/views/performance/utils';
 
 import {DEFAULT_TRACE_ROWS_LIMIT} from './limitExceededMessage';
 import type {TraceInfo} from './types';
@@ -27,6 +29,7 @@ export function getTraceDetailsUrl({
   demo,
   location,
   source,
+  view,
 }: {
   dateSelection;
   location: Location;
@@ -40,6 +43,7 @@ export function getTraceDetailsUrl({
   // to trace view are updated to use spand ids of transactions instead of event ids.
   targetId?: string;
   timestamp?: string | number;
+  view?: DomainView;
 }): LocationDescriptorObject {
   const {start, end, statsPeriod} = dateSelection;
 
@@ -50,10 +54,10 @@ export function getTraceDetailsUrl({
     [PAGE_URL_PARAM.PAGE_END]: end,
   };
 
+  const performanceBaseUrl = getPerformanceBaseUrl(organization.slug, view);
+
   const oldTraceUrl = {
-    pathname: normalizeUrl(
-      `/organizations/${organization.slug}/performance/trace/${traceSlug}/`
-    ),
+    pathname: normalizeUrl(`${performanceBaseUrl}/trace/${traceSlug}/`),
     query: queryParams,
   };
 
@@ -66,9 +70,7 @@ export function getTraceDetailsUrl({
       queryParams.node = [`span-${spanId}`, `txn-${targetId ?? eventId}`];
     }
     return {
-      pathname: normalizeUrl(
-        `/organizations/${organization.slug}/performance/trace/${traceSlug}/`
-      ),
+      pathname: normalizeUrl(`${performanceBaseUrl}/trace/${traceSlug}/`),
       query: {
         ...queryParams,
         timestamp: getTimeStampFromTableDateField(timestamp),

diff --git a/static/app/views/performance/transactionSummary/aggregateSpanWaterfall/utils.tsx b/static/app/views/performance/transactionSummary/aggregateSpanWaterfall/utils.tsx
@@ -2,19 +2,23 @@ import type {Query} from 'history';
 
 import {decodeScalar} from 'sentry/utils/queryString';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
+import type {DomainView} from 'sentry/views/insights/pages/useFilters';
+import {getTransactionSummaryBaseUrl} from 'sentry/views/performance/transactionSummary/utils';
 
 export function aggregateWaterfallRouteWithQuery({
   orgSlug,
   transaction,
   projectID,
   query,
+  view,
 }: {
   orgSlug: string;
   query: Query;
   transaction: string;
   projectID?: string | string[];
+  view?: DomainView;
 }) {
-  const pathname = `/organizations/${orgSlug}/performance/summary/aggregateWaterfall/`;
+  const pathname = `${getTransactionSummaryBaseUrl(orgSlug, view)}/aggregateWaterfall/`;
 
   const filter = decodeScalar(query.query);
   let httpMethod: string | undefined = undefined;