Skip to content

Commit ddbcf41

Browse files
malwilleymalwilley
authored
fix(traces): Use correct links for trace breadcrumbs (#92796)
The trace details page breadcrumbs were using old URLs for certain routes. This PR ensures that we are using utils like `makeTracesPathname()` and others to ensure that it is using the correct URL when the new nav is enabled/disabled.
1 parent 5ec3024 commit ddbcf41

File tree

1 file changed

+105
-61
lines changed

1 file changed

+105
-61
lines changed

‎static/app/views/performance/newTraceDetails/traceHeader/breadcrumbs.tsx‎

Lines changed: 105 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import type {Organization} from 'sentry/types/organization';
1111
import type {Project} from 'sentry/types/project';
1212
import normalizeUrl from 'sentry/utils/url/normalizeUrl';
1313
import {formatVersion} from 'sentry/utils/versions/formatVersion';
14+
import {makeDiscoverPathname} from 'sentry/views/discover/pathnames';
1415
import type {
1516
RoutableModuleNames,
1617
URLBuilder,
@@ -25,6 +26,8 @@ import {ModuleName} from 'sentry/views/insights/types';
2526
import Tab from 'sentry/views/performance/transactionSummary/tabs';
2627
import {getTransactionSummaryBaseUrl} from 'sentry/views/performance/transactionSummary/utils';
2728
import {getPerformanceBaseUrl} from 'sentry/views/performance/utils';
29+
import {makeTracesPathname} from 'sentry/views/traces/pathnames';
30+
import {makeFeedbackPathname} from 'sentry/views/userFeedback/pathnames';
2831

2932
export enum TraceViewSources {
3033
TRACES = 'traces',
@@ -95,13 +98,9 @@ export const TRACE_SOURCE_TO_NON_INSIGHT_ROUTES: Partial<
9598
logs: 'explore/logs',
9699
};
97100

98-
function getBreadCrumbTarget(
99-
path: string,
100-
query: Location['query'],
101-
organization: Organization
102-
) {
101+
function getBreadCrumbTarget(pathname: string, query: Location['query']) {
103102
return {
104-
pathname: normalizeUrl(`/organizations/${organization.slug}/${path}`),
103+
pathname,
105104
// Remove traceView specific query parameters that are not needed when navigating back.
106105
query: {...omit(query, ['node', 'fov', 'timestamp', 'eventId'])},
107106
};
@@ -121,7 +120,10 @@ function getPerformanceBreadCrumbs(
121120
if (view) {
122121
crumbs.push({
123122
label: DOMAIN_VIEW_TITLES[view],
124-
to: getBreadCrumbTarget(performanceUrl, location.query, organization),
123+
to: getBreadCrumbTarget(
124+
normalizeUrl(`/organizations/${organization.slug}/${performanceUrl}`),
125+
location.query
126+
),
125127
});
126128
} else {
127129
crumbs.push({
@@ -134,26 +136,31 @@ function getPerformanceBreadCrumbs(
134136
case Tab.EVENTS:
135137
crumbs.push({
136138
label: t('Transaction Summary'),
137-
to: getBreadCrumbTarget(`${transactionSummaryUrl}`, location.query, organization),
139+
to: getBreadCrumbTarget(
140+
normalizeUrl(`/organizations/${organization.slug}/${transactionSummaryUrl}`),
141+
location.query
142+
),
138143
});
139144
break;
140145
case Tab.TAGS:
141146
crumbs.push({
142147
label: t('Tags'),
143148
to: getBreadCrumbTarget(
144-
`${transactionSummaryUrl}/tags`,
145-
location.query,
146-
organization
149+
normalizeUrl(
150+
`/organizations/${organization.slug}/${transactionSummaryUrl}/tags`
151+
),
152+
location.query
147153
),
148154
});
149155
break;
150156
case Tab.SPANS: {
151157
crumbs.push({
152158
label: t('Spans'),
153159
to: getBreadCrumbTarget(
154-
`${transactionSummaryUrl}/spans`,
155-
location.query,
156-
organization
160+
normalizeUrl(
161+
`/organizations/${organization.slug}/${transactionSummaryUrl}/spans`
162+
),
163+
location.query
157164
),
158165
});
159166

@@ -162,9 +169,10 @@ function getPerformanceBreadCrumbs(
162169
crumbs.push({
163170
label: t('Span Summary'),
164171
to: getBreadCrumbTarget(
165-
`${transactionSummaryUrl}/spans/${spanSlug}`,
166-
location.query,
167-
organization
172+
normalizeUrl(
173+
`/organizations/${organization.slug}/${transactionSummaryUrl}/spans/${spanSlug}`
174+
),
175+
location.query
168176
),
169177
});
170178
}
@@ -173,7 +181,10 @@ function getPerformanceBreadCrumbs(
173181
default:
174182
crumbs.push({
175183
label: t('Transaction Summary'),
176-
to: getBreadCrumbTarget(`${transactionSummaryUrl}`, location.query, organization),
184+
to: getBreadCrumbTarget(
185+
normalizeUrl(`/organizations/${organization.slug}/${transactionSummaryUrl}`),
186+
location.query
187+
),
177188
});
178189
break;
179190
}
@@ -192,16 +203,20 @@ function getIssuesBreadCrumbs(
192203

193204
crumbs.push({
194205
label: t('Issues'),
195-
to: getBreadCrumbTarget(`issues`, location.query, organization),
206+
to: getBreadCrumbTarget(
207+
normalizeUrl(`/organizations/${organization.slug}/issues/`),
208+
location.query
209+
),
196210
});
197211

198212
if (location.query.groupId) {
199213
crumbs.push({
200214
label: t('Issue Details'),
201215
to: getBreadCrumbTarget(
202-
`issues/${location.query.groupId}`,
203-
location.query,
204-
organization
216+
normalizeUrl(
217+
`/organizations/${organization.slug}/issues/${location.query.groupId}/`
218+
),
219+
location.query
205220
),
206221
});
207222
}
@@ -220,26 +235,31 @@ function getDashboardsBreadCrumbs(
220235

221236
crumbs.push({
222237
label: t('Dashboards'),
223-
to: getBreadCrumbTarget('dashboards', location.query, organization),
238+
to: getBreadCrumbTarget(
239+
normalizeUrl(`/organizations/${organization.slug}/dashboards/`),
240+
location.query
241+
),
224242
});
225243

226244
if (location.query.dashboardId) {
227245
crumbs.push({
228246
label: t('Widgets Legend'),
229247
to: getBreadCrumbTarget(
230-
`dashboard/${location.query.dashboardId}`,
231-
location.query,
232-
organization
248+
normalizeUrl(
249+
`/organizations/${organization.slug}/dashboard/${location.query.dashboardId}/`
250+
),
251+
location.query
233252
),
234253
});
235254

236255
if (location.query.widgetId) {
237256
crumbs.push({
238257
label: t('Widget'),
239258
to: getBreadCrumbTarget(
240-
`dashboard/${location.query.dashboardId}/widget/${location.query.widgetId}/`,
241-
location.query,
242-
organization
259+
normalizeUrl(
260+
`/organizations/${organization.slug}/dashboard/${location.query.dashboardId}/widget/${location.query.widgetId}/`
261+
),
262+
location.query
243263
),
244264
});
245265
}
@@ -263,9 +283,10 @@ function getInsightsModuleBreadcrumbs(
263283
crumbs.push({
264284
label: DOMAIN_VIEW_TITLES[view],
265285
to: getBreadCrumbTarget(
266-
`${DOMAIN_VIEW_BASE_URL}/${view}/`,
267-
location.query,
268-
organization
286+
normalizeUrl(
287+
`/organizations/${organization.slug}/${DOMAIN_VIEW_BASE_URL}/${view}/`
288+
),
289+
location.query
269290
),
270291
});
271292
} else {
@@ -292,9 +313,10 @@ function getInsightsModuleBreadcrumbs(
292313
crumbs.push({
293314
label: t('Domain Summary'),
294315
to: getBreadCrumbTarget(
295-
`${moduleURLBuilder(moduleName, view)}/domains`,
296-
location.query,
297-
organization
316+
normalizeUrl(
317+
`/organizations/${organization.slug}/${moduleURLBuilder(moduleName, view)}/domains`
318+
),
319+
location.query
298320
),
299321
});
300322
break;
@@ -303,9 +325,10 @@ function getInsightsModuleBreadcrumbs(
303325
crumbs.push({
304326
label: t('Query Summary'),
305327
to: getBreadCrumbTarget(
306-
`${moduleURLBuilder(moduleName, view)}/spans/span/${location.query.groupId}`,
307-
location.query,
308-
organization
328+
normalizeUrl(
329+
`/organizations/${organization.slug}/${moduleURLBuilder(moduleName, view)}/spans/span/${location.query.groupId}`
330+
),
331+
location.query
309332
),
310333
});
311334
} else {
@@ -319,9 +342,10 @@ function getInsightsModuleBreadcrumbs(
319342
crumbs.push({
320343
label: t('Asset Summary'),
321344
to: getBreadCrumbTarget(
322-
`${moduleURLBuilder(moduleName)}/spans/span/${location.query.groupId}`,
323-
location.query,
324-
organization
345+
normalizeUrl(
346+
`/organizations/${organization.slug}/${moduleURLBuilder(moduleName)}/spans/span/${location.query.groupId}`
347+
),
348+
location.query
325349
),
326350
});
327351
} else {
@@ -334,39 +358,43 @@ function getInsightsModuleBreadcrumbs(
334358
crumbs.push({
335359
label: t('Screen Summary'),
336360
to: getBreadCrumbTarget(
337-
`${moduleURLBuilder(moduleName, view)}/spans`,
338-
location.query,
339-
organization
361+
normalizeUrl(
362+
`/organizations/${organization.slug}/${moduleURLBuilder(moduleName, view)}/spans`
363+
),
364+
location.query
340365
),
341366
});
342367
break;
343368
case ModuleName.SCREEN_LOAD:
344369
crumbs.push({
345370
label: t('Screen Summary'),
346371
to: getBreadCrumbTarget(
347-
`${moduleURLBuilder(moduleName, view)}/spans`,
348-
location.query,
349-
organization
372+
normalizeUrl(
373+
`/organizations/${organization.slug}/${moduleURLBuilder(moduleName, view)}/spans`
374+
),
375+
location.query
350376
),
351377
});
352378
break;
353379
case ModuleName.VITAL:
354380
crumbs.push({
355381
label: t('Page Overview'),
356382
to: getBreadCrumbTarget(
357-
`${moduleURLBuilder(moduleName, view)}/overview`,
358-
location.query,
359-
organization
383+
normalizeUrl(
384+
`/organizations/${organization.slug}/${moduleURLBuilder(moduleName, view)}/overview`
385+
),
386+
location.query
360387
),
361388
});
362389
break;
363390
case ModuleName.QUEUE:
364391
crumbs.push({
365392
label: t('Destination Summary'),
366393
to: getBreadCrumbTarget(
367-
`${moduleURLBuilder(moduleName, view)}/destination`,
368-
location.query,
369-
organization
394+
normalizeUrl(
395+
`/organizations/${organization.slug}/${moduleURLBuilder(moduleName, view)}/destination`
396+
),
397+
location.query
370398
),
371399
});
372400
break;
@@ -375,9 +403,10 @@ function getInsightsModuleBreadcrumbs(
375403
crumbs.push({
376404
label: t('Pipeline Summary'),
377405
to: getBreadCrumbTarget(
378-
`${moduleURLBuilder(moduleName, view)}/pipeline-type/${location.query.groupId}`,
379-
location.query,
380-
organization
406+
normalizeUrl(
407+
`/organizations/${organization.slug}/${moduleURLBuilder(moduleName, view)}/pipeline-type/${location.query.groupId}`
408+
),
409+
location.query
381410
),
382411
});
383412
}
@@ -482,31 +511,43 @@ export function getTraceViewBreadcrumbs({
482511
return [
483512
{
484513
label: t('Traces'),
485-
to: getBreadCrumbTarget(`traces`, location.query, organization),
514+
to: getBreadCrumbTarget(
515+
makeTracesPathname({path: '/', organization}),
516+
location.query
517+
),
486518
},
487519
leafBreadcrumb,
488520
];
489521
case TraceViewSources.DISCOVER:
490522
return [
491523
{
492524
label: t('Discover'),
493-
to: getBreadCrumbTarget(`discover/homepage`, location.query, organization),
525+
to: getBreadCrumbTarget(
526+
makeDiscoverPathname({path: '/homepage/', organization}),
527+
location.query
528+
),
494529
},
495530
leafBreadcrumb,
496531
];
497532
case TraceViewSources.METRICS:
498533
return [
499534
{
500535
label: t('Metrics'),
501-
to: getBreadCrumbTarget(`metrics`, location.query, organization),
536+
to: getBreadCrumbTarget(
537+
normalizeUrl(`/organizations/${organization.slug}/metrics/`),
538+
location.query
539+
),
502540
},
503541
leafBreadcrumb,
504542
];
505543
case TraceViewSources.FEEDBACK_DETAILS:
506544
return [
507545
{
508546
label: t('User Feedback'),
509-
to: getBreadCrumbTarget(`feedback`, location.query, organization),
547+
to: getBreadCrumbTarget(
548+
makeFeedbackPathname({path: '/', organization}),
549+
location.query
550+
),
510551
},
511552
leafBreadcrumb,
512553
];
@@ -520,7 +561,10 @@ export function getTraceViewBreadcrumbs({
520561
return [
521562
{
522563
label: t('Logs'),
523-
to: getBreadCrumbTarget(`explore/logs`, location.query, organization),
564+
to: getBreadCrumbTarget(
565+
normalizeUrl(`/organizations/${organization.slug}/explore/logs/`),
566+
location.query
567+
),
524568
},
525569
leafBreadcrumb,
526570
];

0 commit comments

Comments
 (0)