traceLink.tsx 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. import {useCallback} from 'react';
  2. import styled from '@emotion/styled';
  3. import Link from 'sentry/components/links/link';
  4. import {generateTraceTarget} from 'sentry/components/quickTrace/utils';
  5. import {tct, tn} from 'sentry/locale';
  6. import type {Event} from 'sentry/types';
  7. import {trackAnalytics} from 'sentry/utils/analytics';
  8. import {getShortEventId} from 'sentry/utils/events';
  9. import type {QuickTraceContextChildrenProps} from 'sentry/utils/performance/quickTrace/quickTraceContext';
  10. import type {TraceMeta} from 'sentry/utils/performance/quickTrace/types';
  11. import useOrganization from 'sentry/utils/useOrganization';
  12. type TraceLinkProps = {
  13. event: Event;
  14. quickTrace: QuickTraceContextChildrenProps;
  15. source: 'events' | 'issues';
  16. traceMeta: TraceMeta | null;
  17. };
  18. export function TraceLink({event, traceMeta, source, quickTrace}: TraceLinkProps) {
  19. const organization = useOrganization();
  20. const traceTarget = generateTraceTarget(event, organization);
  21. const traceId = event.contexts?.trace?.trace_id ?? '';
  22. const handleTraceLink = useCallback(() => {
  23. trackAnalytics('quick_trace.trace_id.clicked', {
  24. organization,
  25. source,
  26. });
  27. }, [organization, source]);
  28. if (
  29. !quickTrace ||
  30. quickTrace.isLoading ||
  31. quickTrace.error ||
  32. quickTrace.type === 'empty'
  33. ) {
  34. return null;
  35. }
  36. return (
  37. <StyledLink to={traceTarget} onClick={handleTraceLink}>
  38. {tct('View Full Trace: [id][events]', {
  39. id: getShortEventId(traceId ?? ''),
  40. events: traceMeta
  41. ? tn(' (%s event)', ' (%s events)', traceMeta.transactions + traceMeta.errors)
  42. : '',
  43. })}
  44. </StyledLink>
  45. );
  46. }
  47. const StyledLink = styled(Link)<{}>`
  48. font-size: ${p => p.theme.fontSizeSmall};
  49. `;