import {useMemo} from 'react'; import {Location} from 'history'; import omit from 'lodash/omit'; import _Breadcrumbs, {Crumb} from 'sentry/components/breadcrumbs'; import {t} from 'sentry/locale'; import {Organization, Project} from 'sentry/types'; import { generateProfileDetailsRouteWithQuery, generateProfileFlamechartRouteWithQuery, generateProfileSummaryRouteWithQuery, generateProfilingRouteWithQuery, } from 'sentry/utils/profiling/routes'; interface BreadcrumbsProps { organization: Organization; trails: Trail[]; } function Breadcrumb({organization, trails}: BreadcrumbsProps) { const crumbs = useMemo( () => trails.map(trail => trailToCrumb(trail, {organization})), [organization, trails] ); return <_Breadcrumbs crumbs={crumbs} />; } function trailToCrumb( trail: Trail, { organization, }: { organization: Organization; } ): Crumb { switch (trail.type) { case 'landing': { return { to: generateProfilingRouteWithQuery({ // cursor and query are not used in the landing page // and break the API call as the qs gets forwarded to the API query: omit(trail.payload.query, ['cursor', 'query']), orgSlug: organization.slug, }), label: t('Profiling'), preservePageFilters: true, }; } case 'profile summary': { return { to: generateProfileSummaryRouteWithQuery({ // cursor and query are not used in the summary page // and break the API call as the qs gets forwarded to the API query: omit(trail.payload.query, ['cursor', 'query']), orgSlug: organization.slug, projectSlug: trail.payload.projectSlug, transaction: trail.payload.transaction, }), label: t('Profile Summary'), preservePageFilters: true, }; } case 'flamechart': { const generateRouteWithQuery = trail.payload.tab === 'flamechart' ? generateProfileFlamechartRouteWithQuery : generateProfileDetailsRouteWithQuery; return { to: generateRouteWithQuery({ query: trail.payload.query, orgSlug: organization.slug, projectSlug: trail.payload.projectSlug, profileId: trail.payload.profileId, }), label: trail.payload.transaction, preservePageFilters: true, }; } default: throw new Error(`Unknown breadcrumb type: ${JSON.stringify(trail)}`); } } type ProfilingTrail = { payload: { query: Location['query']; }; type: 'landing'; }; type ProfileSummaryTrail = { payload: { projectSlug: Project['slug']; query: Location['query']; transaction: string; }; type: 'profile summary'; }; type FlamegraphTrail = { payload: { profileId: string; projectSlug: string; query: Location['query']; tab: 'flamechart' | 'details'; transaction: string; }; type: 'flamechart'; }; type Trail = ProfilingTrail | ProfileSummaryTrail | FlamegraphTrail; export {Breadcrumb};