transactionProfileProvider.tsx 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. import {useState} from 'react';
  2. import {ProfileHeader} from 'sentry/components/profiling/profileHeader';
  3. import type {RequestState} from 'sentry/types/core';
  4. import type {EventTransaction} from 'sentry/types/event';
  5. import {isSchema, isSentrySampledProfile} from 'sentry/utils/profiling/guards/profile';
  6. import {useSentryEvent} from 'sentry/utils/profiling/hooks/useSentryEvent';
  7. import useOrganization from 'sentry/utils/useOrganization';
  8. import {useParams} from 'sentry/utils/useParams';
  9. import {ProfileTransactionContext, TransactionProfileProvider} from './profilesProvider';
  10. function getTransactionId(input: Profiling.ProfileInput): string | null {
  11. if (isSchema(input)) {
  12. return input.metadata.transactionID;
  13. }
  14. if (isSentrySampledProfile(input)) {
  15. return input.transaction.id;
  16. }
  17. return null;
  18. }
  19. interface FlamegraphViewProps {
  20. children: React.ReactNode;
  21. }
  22. export default function ProfileAndTransactionProvider(
  23. props: FlamegraphViewProps
  24. ): React.ReactElement {
  25. const organization = useOrganization();
  26. const params = useParams();
  27. const projectSlug = params.projectId!;
  28. const [profile, setProfile] = useState<RequestState<Profiling.ProfileInput>>({
  29. type: 'initial',
  30. });
  31. const profileTransaction = useSentryEvent<EventTransaction>(
  32. organization.slug,
  33. projectSlug,
  34. profile.type === 'resolved' ? getTransactionId(profile.data) : null
  35. );
  36. return (
  37. <TransactionProfileProvider
  38. orgSlug={organization.slug}
  39. profileId={params.eventId!}
  40. projectSlug={projectSlug}
  41. profile={profile}
  42. setProfile={setProfile}
  43. >
  44. <ProfileTransactionContext.Provider value={profileTransaction}>
  45. <ProfileHeader
  46. eventId={params.eventId!}
  47. projectId={projectSlug}
  48. transaction={
  49. profileTransaction.type === 'resolved' ? profileTransaction.data : null
  50. }
  51. />
  52. {props.children}
  53. </ProfileTransactionContext.Provider>
  54. </TransactionProfileProvider>
  55. );
  56. }