breadcrumb.tsx 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. import type {Location, LocationDescriptor} from 'history';
  2. import type {Crumb} from 'sentry/components/breadcrumbs';
  3. import Breadcrumbs from 'sentry/components/breadcrumbs';
  4. import {t} from 'sentry/locale';
  5. import type {Organization} from 'sentry/types';
  6. import type {SpanSlug} from 'sentry/utils/performance/suspectSpans/types';
  7. import {decodeScalar} from 'sentry/utils/queryString';
  8. import Tab from './transactionSummary/tabs';
  9. import {eventsRouteWithQuery} from './transactionSummary/transactionEvents/utils';
  10. import {spansRouteWithQuery} from './transactionSummary/transactionSpans/utils';
  11. import {tagsRouteWithQuery} from './transactionSummary/transactionTags/utils';
  12. import {vitalsRouteWithQuery} from './transactionSummary/transactionVitals/utils';
  13. import {transactionSummaryRouteWithQuery} from './transactionSummary/utils';
  14. import {vitalDetailRouteWithQuery} from './vitalDetail/utils';
  15. import {getPerformanceLandingUrl} from './utils';
  16. type Props = {
  17. location: Location;
  18. organization: Organization;
  19. eventSlug?: string;
  20. spanSlug?: SpanSlug;
  21. tab?: Tab;
  22. traceSlug?: string;
  23. transaction?: {
  24. name: string;
  25. project: string;
  26. };
  27. vitalName?: string;
  28. };
  29. function Breadcrumb(props: Props) {
  30. function getCrumbs() {
  31. const crumbs: Crumb[] = [];
  32. const {
  33. organization,
  34. location,
  35. transaction,
  36. vitalName,
  37. spanSlug,
  38. eventSlug,
  39. traceSlug,
  40. tab,
  41. } = props;
  42. const performanceTarget: LocationDescriptor = {
  43. pathname: getPerformanceLandingUrl(organization),
  44. query: {
  45. ...location.query,
  46. // clear out the transaction name
  47. transaction: undefined,
  48. },
  49. };
  50. crumbs.push({
  51. to: performanceTarget,
  52. label: t('Performance'),
  53. preservePageFilters: true,
  54. });
  55. if (vitalName) {
  56. const webVitalsTarget = vitalDetailRouteWithQuery({
  57. orgSlug: organization.slug,
  58. vitalName: 'fcp',
  59. projectID: decodeScalar(location.query.project),
  60. query: location.query,
  61. });
  62. crumbs.push({
  63. to: webVitalsTarget,
  64. label: t('Vital Detail'),
  65. preservePageFilters: true,
  66. });
  67. } else if (transaction) {
  68. const routeQuery = {
  69. orgSlug: organization.slug,
  70. transaction: transaction.name,
  71. projectID: transaction.project,
  72. query: location.query,
  73. };
  74. switch (tab) {
  75. case Tab.TAGS: {
  76. const tagsTarget = tagsRouteWithQuery(routeQuery);
  77. crumbs.push({
  78. to: tagsTarget,
  79. label: t('Tags'),
  80. preservePageFilters: true,
  81. });
  82. break;
  83. }
  84. case Tab.EVENTS: {
  85. const eventsTarget = eventsRouteWithQuery(routeQuery);
  86. crumbs.push({
  87. to: eventsTarget,
  88. label: t('All Events'),
  89. preservePageFilters: true,
  90. });
  91. break;
  92. }
  93. case Tab.WEB_VITALS: {
  94. const webVitalsTarget = vitalsRouteWithQuery(routeQuery);
  95. crumbs.push({
  96. to: webVitalsTarget,
  97. label: t('Web Vitals'),
  98. preservePageFilters: true,
  99. });
  100. break;
  101. }
  102. case Tab.SPANS: {
  103. const spansTarget = spansRouteWithQuery(routeQuery);
  104. crumbs.push({
  105. to: spansTarget,
  106. label: t('Spans'),
  107. preservePageFilters: true,
  108. });
  109. break;
  110. }
  111. case Tab.TRANSACTION_SUMMARY:
  112. default: {
  113. const summaryTarget = transactionSummaryRouteWithQuery(routeQuery);
  114. crumbs.push({
  115. to: summaryTarget,
  116. label: t('Transaction Summary'),
  117. preservePageFilters: true,
  118. });
  119. }
  120. }
  121. }
  122. if (transaction && spanSlug) {
  123. crumbs.push({
  124. to: '',
  125. label: t('Span Summary'),
  126. });
  127. } else if (transaction && eventSlug) {
  128. crumbs.push({
  129. to: '',
  130. label: t('Event Details'),
  131. });
  132. } else if (traceSlug) {
  133. crumbs.push({
  134. to: '',
  135. label: t('Trace'),
  136. });
  137. }
  138. return crumbs;
  139. }
  140. return <Breadcrumbs crumbs={getCrumbs()} />;
  141. }
  142. export default Breadcrumb;