newTraceDetailsTransactionBar.tsx 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873
  1. import {createRef, Fragment, useCallback, useEffect, useState} from 'react';
  2. import {browserHistory} from 'react-router';
  3. import styled from '@emotion/styled';
  4. import {Location} from 'history';
  5. import {Observer} from 'mobx-react';
  6. import GuideAnchor from 'sentry/components/assistant/guideAnchor';
  7. import Count from 'sentry/components/count';
  8. import * as DividerHandlerManager from 'sentry/components/events/interfaces/spans/dividerHandlerManager';
  9. import NewTraceDetailsSpanTree from 'sentry/components/events/interfaces/spans/newTraceDetailsSpanTree';
  10. import * as ScrollbarManager from 'sentry/components/events/interfaces/spans/scrollbarManager';
  11. import * as SpanContext from 'sentry/components/events/interfaces/spans/spanContext';
  12. import {MeasurementMarker} from 'sentry/components/events/interfaces/spans/styles';
  13. import {
  14. getMeasurementBounds,
  15. SpanBoundsType,
  16. SpanGeneratedBoundsType,
  17. transactionTargetHash,
  18. VerticalMark,
  19. } from 'sentry/components/events/interfaces/spans/utils';
  20. import WaterfallModel from 'sentry/components/events/interfaces/spans/waterfallModel';
  21. import ProjectBadge from 'sentry/components/idBadge/projectBadge';
  22. import Link from 'sentry/components/links/link';
  23. import {ROW_HEIGHT, SpanBarType} from 'sentry/components/performance/waterfall/constants';
  24. import {MessageRow} from 'sentry/components/performance/waterfall/messageRow';
  25. import {
  26. Row,
  27. RowCell,
  28. RowCellContainer,
  29. RowReplayTimeIndicators,
  30. } from 'sentry/components/performance/waterfall/row';
  31. import {DurationPill, RowRectangle} from 'sentry/components/performance/waterfall/rowBar';
  32. import {
  33. DividerContainer,
  34. DividerLine,
  35. DividerLineGhostContainer,
  36. EmbeddedTransactionBadge,
  37. ErrorBadge,
  38. } from 'sentry/components/performance/waterfall/rowDivider';
  39. import {
  40. RowTitle,
  41. RowTitleContainer,
  42. RowTitleContent,
  43. } from 'sentry/components/performance/waterfall/rowTitle';
  44. import {
  45. ConnectorBar,
  46. TOGGLE_BORDER_BOX,
  47. TreeConnector,
  48. TreeToggle,
  49. TreeToggleContainer,
  50. TreeToggleIcon,
  51. } from 'sentry/components/performance/waterfall/treeConnector';
  52. import {
  53. getDurationDisplay,
  54. getHumanDuration,
  55. } from 'sentry/components/performance/waterfall/utils';
  56. import {TransactionProfileIdProvider} from 'sentry/components/profiling/transactionProfileIdProvider';
  57. import {generateIssueEventTarget} from 'sentry/components/quickTrace/utils';
  58. import {Tooltip} from 'sentry/components/tooltip';
  59. import {t} from 'sentry/locale';
  60. import {EventTransaction, Organization} from 'sentry/types';
  61. import {defined} from 'sentry/utils';
  62. import toPercent from 'sentry/utils/number/toPercent';
  63. import {QuickTraceContext} from 'sentry/utils/performance/quickTrace/quickTraceContext';
  64. import QuickTraceQuery from 'sentry/utils/performance/quickTrace/quickTraceQuery';
  65. import {TraceError, TraceFullDetailed} from 'sentry/utils/performance/quickTrace/types';
  66. import {
  67. isTraceError,
  68. isTraceRoot,
  69. isTraceTransaction,
  70. } from 'sentry/utils/performance/quickTrace/utils';
  71. import Projects from 'sentry/utils/projects';
  72. import {useApiQuery} from 'sentry/utils/queryClient';
  73. import {ProfileGroupProvider} from 'sentry/views/profiling/profileGroupProvider';
  74. import {ProfileContext, ProfilesProvider} from 'sentry/views/profiling/profilesProvider';
  75. import {ProjectBadgeContainer} from './styles';
  76. import TransactionDetail from './transactionDetail';
  77. import {TraceInfo, TraceRoot, TreeDepth} from './types';
  78. import {shortenErrorTitle} from './utils';
  79. const MARGIN_LEFT = 0;
  80. type Props = {
  81. addContentSpanBarRef: (instance: HTMLDivElement | null) => void;
  82. continuingDepths: TreeDepth[];
  83. generateBounds: (bounds: SpanBoundsType) => SpanGeneratedBoundsType;
  84. hasGuideAnchor: boolean;
  85. index: number;
  86. isExpanded: boolean;
  87. isLast: boolean;
  88. isOrphan: boolean;
  89. isVisible: boolean;
  90. location: Location;
  91. onWheel: (deltaX: number) => void;
  92. organization: Organization;
  93. removeContentSpanBarRef: (instance: HTMLDivElement | null) => void;
  94. toggleExpandedState: () => void;
  95. traceInfo: TraceInfo;
  96. traceViewRef: React.RefObject<HTMLDivElement>;
  97. transaction: TraceRoot | TraceFullDetailed | TraceError;
  98. barColor?: string;
  99. isOrphanError?: boolean;
  100. measurements?: Map<number, VerticalMark>;
  101. numOfOrphanErrors?: number;
  102. onlyOrphanErrors?: boolean;
  103. };
  104. function NewTraceDetailsTransactionBar(props: Props) {
  105. const [showDetail, setShowDetail] = useState(false);
  106. const [showEmbeddedChildren, setShowEmbeddedChildren] = useState(false);
  107. const transactionRowDOMRef = createRef<HTMLDivElement>();
  108. const transactionTitleRef = createRef<HTMLDivElement>();
  109. let spanContentRef: HTMLDivElement | null = null;
  110. const handleWheel = useCallback(
  111. (event: WheelEvent) => {
  112. // https://stackoverflow.com/q/57358640
  113. // https://github.com/facebook/react/issues/14856
  114. if (Math.abs(event.deltaY) > Math.abs(event.deltaX)) {
  115. return;
  116. }
  117. event.preventDefault();
  118. event.stopPropagation();
  119. if (Math.abs(event.deltaY) === Math.abs(event.deltaX)) {
  120. return;
  121. }
  122. const {onWheel} = props;
  123. onWheel(event.deltaX);
  124. },
  125. [props]
  126. );
  127. const scrollIntoView = useCallback(() => {
  128. const element = transactionRowDOMRef.current;
  129. if (!element) {
  130. return;
  131. }
  132. const boundingRect = element.getBoundingClientRect();
  133. const offset = boundingRect.top + window.scrollY;
  134. setShowDetail(true);
  135. window.scrollTo(0, offset);
  136. }, [transactionRowDOMRef]);
  137. useEffect(() => {
  138. const {location, transaction} = props;
  139. const transactionTitleRefCurrentCopy = transactionTitleRef.current;
  140. if (
  141. 'event_id' in transaction &&
  142. transactionTargetHash(transaction.event_id) === location.hash
  143. ) {
  144. scrollIntoView();
  145. }
  146. if (transactionTitleRefCurrentCopy) {
  147. transactionTitleRefCurrentCopy.addEventListener('wheel', handleWheel, {
  148. passive: false,
  149. });
  150. }
  151. return () => {
  152. if (transactionTitleRefCurrentCopy) {
  153. transactionTitleRefCurrentCopy.removeEventListener('wheel', handleWheel);
  154. }
  155. };
  156. }, [handleWheel, props, scrollIntoView, transactionTitleRef]);
  157. const transactionEvent =
  158. isTraceTransaction<TraceFullDetailed>(props.transaction) ||
  159. isTraceError(props.transaction)
  160. ? props.transaction
  161. : undefined;
  162. const {
  163. data: embeddedChildren,
  164. isLoading: isEmbeddedChildrenLoading,
  165. error: embeddedChildrenError,
  166. } = useApiQuery<EventTransaction>(
  167. [
  168. `/organizations/${props.organization.slug}/events/${transactionEvent?.project_slug}:${transactionEvent?.event_id}/`,
  169. ],
  170. {
  171. staleTime: 2 * 60 * 1000,
  172. enabled: showEmbeddedChildren,
  173. }
  174. );
  175. const renderEmbeddedChildrenState = () => {
  176. if (showEmbeddedChildren) {
  177. if (isEmbeddedChildrenLoading) {
  178. return (
  179. <MessageRow>
  180. <span>{t('Loading embedded transaction')}</span>
  181. </MessageRow>
  182. );
  183. }
  184. if (embeddedChildrenError) {
  185. return (
  186. <MessageRow>
  187. <span>{t('Error loading embedded transaction')}</span>
  188. </MessageRow>
  189. );
  190. }
  191. }
  192. return null;
  193. };
  194. const handleRowCellClick = () => {
  195. const {transaction, organization} = props;
  196. if (isTraceError(transaction)) {
  197. browserHistory.push(generateIssueEventTarget(transaction, organization));
  198. }
  199. if (isTraceTransaction<TraceFullDetailed>(transaction)) {
  200. setShowDetail(prev => !prev);
  201. }
  202. };
  203. const getCurrentOffset = () => {
  204. const {transaction} = props;
  205. const {generation} = transaction;
  206. return getOffset(generation);
  207. };
  208. const renderMeasurements = () => {
  209. const {measurements, generateBounds} = props;
  210. if (!measurements) {
  211. return null;
  212. }
  213. return (
  214. <Fragment>
  215. {Array.from(measurements.values()).map(verticalMark => {
  216. const mark = Object.values(verticalMark.marks)[0];
  217. const {timestamp} = mark;
  218. const bounds = getMeasurementBounds(timestamp, generateBounds);
  219. const shouldDisplay = defined(bounds.left) && defined(bounds.width);
  220. if (!shouldDisplay || !bounds.isSpanVisibleInView) {
  221. return null;
  222. }
  223. return (
  224. <MeasurementMarker
  225. key={String(timestamp)}
  226. style={{
  227. left: `clamp(0%, ${toPercent(bounds.left || 0)}, calc(100% - 1px))`,
  228. }}
  229. failedThreshold={verticalMark.failedThreshold}
  230. />
  231. );
  232. })}
  233. </Fragment>
  234. );
  235. };
  236. const renderConnector = (hasToggle: boolean) => {
  237. const {continuingDepths, isExpanded, isOrphan, isLast, transaction} = props;
  238. const {generation = 0} = transaction;
  239. const eventId =
  240. isTraceTransaction<TraceFullDetailed>(transaction) || isTraceError(transaction)
  241. ? transaction.event_id
  242. : transaction.traceSlug;
  243. if (generation === 0) {
  244. if (hasToggle) {
  245. return (
  246. <ConnectorBar
  247. style={{right: '15px', height: '10px', bottom: '-5px', top: 'auto'}}
  248. orphanBranch={false}
  249. />
  250. );
  251. }
  252. return null;
  253. }
  254. const connectorBars: Array<React.ReactNode> = continuingDepths.map(
  255. ({depth, isOrphanDepth}) => {
  256. if (generation - depth <= 1) {
  257. // If the difference is less than or equal to 1, then it means that the continued
  258. // bar is from its direct parent. In this case, do not render a connector bar
  259. // because the tree connector below will suffice.
  260. return null;
  261. }
  262. const left = -1 * getOffset(generation - depth - 1) - 2;
  263. return (
  264. <ConnectorBar
  265. style={{left}}
  266. key={`${eventId}-${depth}`}
  267. orphanBranch={isOrphanDepth}
  268. />
  269. );
  270. }
  271. );
  272. if (hasToggle && (isExpanded || showEmbeddedChildren)) {
  273. connectorBars.push(
  274. <ConnectorBar
  275. style={{
  276. right: '15px',
  277. height: '10px',
  278. bottom: isLast ? `-${ROW_HEIGHT / 2 + 1}px` : '0',
  279. top: 'auto',
  280. }}
  281. key={`${eventId}-last`}
  282. orphanBranch={false}
  283. />
  284. );
  285. }
  286. return (
  287. <TreeConnector isLast={isLast} hasToggler={hasToggle} orphanBranch={isOrphan}>
  288. {connectorBars}
  289. </TreeConnector>
  290. );
  291. };
  292. const renderEmbeddedTransactionsBadge = (): React.ReactNode => {
  293. return (
  294. <Tooltip
  295. title={
  296. <span>
  297. {showEmbeddedChildren
  298. ? t(
  299. 'This transaction is showing a direct child. Remove transaction to hide'
  300. )
  301. : t('This transaction has a direct child. Add transaction to view')}
  302. </span>
  303. }
  304. position="top"
  305. containerDisplayMode="block"
  306. >
  307. <EmbeddedTransactionBadge
  308. inTraceView
  309. expanded={showEmbeddedChildren}
  310. onClick={() => {
  311. setShowEmbeddedChildren(prev => !prev);
  312. if (
  313. (props.isExpanded && !showEmbeddedChildren) ||
  314. (!props.isExpanded && showEmbeddedChildren)
  315. ) {
  316. props.toggleExpandedState();
  317. }
  318. }}
  319. />
  320. </Tooltip>
  321. );
  322. };
  323. const renderEmbeddedChildren = () => {
  324. if (!embeddedChildren || !showEmbeddedChildren) {
  325. return null;
  326. }
  327. const {organization, traceViewRef, location, isLast, traceInfo} = props;
  328. const waterfallModel = new WaterfallModel(embeddedChildren);
  329. const profileId = embeddedChildren.contexts?.profile?.profile_id ?? null;
  330. return (
  331. <Fragment>
  332. <QuickTraceQuery
  333. event={embeddedChildren}
  334. location={location}
  335. orgSlug={organization.slug}
  336. >
  337. {results => (
  338. <QuickTraceContext.Provider value={results}>
  339. <ProfilesProvider
  340. orgSlug={organization.slug}
  341. projectSlug={embeddedChildren.projectSlug ?? ''}
  342. profileId={profileId || ''}
  343. >
  344. <ProfileContext.Consumer>
  345. {profiles => (
  346. <ProfileGroupProvider
  347. type="flamechart"
  348. input={profiles?.type === 'resolved' ? profiles.data : null}
  349. traceID={profileId || ''}
  350. >
  351. <TransactionProfileIdProvider
  352. projectId={embeddedChildren.projectID}
  353. timestamp={embeddedChildren.dateReceived}
  354. transactionId={embeddedChildren.id}
  355. >
  356. <SpanContext.Provider>
  357. <SpanContext.Consumer>
  358. {spanContextProps => (
  359. <Observer>
  360. {() => (
  361. <NewTraceDetailsSpanTree
  362. traceInfo={traceInfo}
  363. traceViewHeaderRef={traceViewRef}
  364. traceViewRef={traceViewRef}
  365. parentHasContinuingDepths={
  366. props.continuingDepths.length > 0
  367. }
  368. traceHasMultipleRoots={props.continuingDepths.some(
  369. c => c.depth === 0 && c.isOrphanDepth
  370. )}
  371. parentIsLast={isLast}
  372. parentGeneration={transaction.generation ?? 0}
  373. organization={organization}
  374. waterfallModel={waterfallModel}
  375. filterSpans={waterfallModel.filterSpans}
  376. spans={waterfallModel
  377. .getWaterfall({
  378. viewStart: 0,
  379. viewEnd: 1,
  380. traceInfo,
  381. })
  382. .slice(1)}
  383. focusedSpanIds={waterfallModel.focusedSpanIds}
  384. spanContextProps={spanContextProps}
  385. operationNameFilters={
  386. waterfallModel.operationNameFilters
  387. }
  388. />
  389. )}
  390. </Observer>
  391. )}
  392. </SpanContext.Consumer>
  393. </SpanContext.Provider>
  394. </TransactionProfileIdProvider>
  395. </ProfileGroupProvider>
  396. )}
  397. </ProfileContext.Consumer>
  398. </ProfilesProvider>
  399. </QuickTraceContext.Provider>
  400. )}
  401. </QuickTraceQuery>
  402. </Fragment>
  403. );
  404. };
  405. const renderToggle = (errored: boolean) => {
  406. const {isExpanded, transaction, toggleExpandedState, numOfOrphanErrors} = props;
  407. const left = getCurrentOffset();
  408. const hasOrphanErrors = numOfOrphanErrors && numOfOrphanErrors > 0;
  409. let childrenLength =
  410. (!isTraceError(transaction) && transaction.children?.length) || 0;
  411. const generation = transaction.generation || 0;
  412. if (childrenLength <= 0 && !hasOrphanErrors && !showEmbeddedChildren) {
  413. return (
  414. <TreeToggleContainer style={{left: `${left}px`}}>
  415. {renderConnector(false)}
  416. </TreeToggleContainer>
  417. );
  418. }
  419. if (showEmbeddedChildren && embeddedChildren) {
  420. const waterfallModel = new WaterfallModel(embeddedChildren);
  421. childrenLength = waterfallModel.rootSpan.children.length;
  422. } else {
  423. childrenLength = childrenLength + (numOfOrphanErrors ?? 0);
  424. }
  425. const isRoot = generation === 0;
  426. return (
  427. <TreeToggleContainer style={{left: `${left}px`}} hasToggler>
  428. {renderConnector(true)}
  429. <TreeToggle
  430. disabled={isRoot}
  431. isExpanded={isExpanded}
  432. errored={errored}
  433. onClick={event => {
  434. event.stopPropagation();
  435. if (isRoot || showEmbeddedChildren) {
  436. return;
  437. }
  438. toggleExpandedState();
  439. setShowEmbeddedChildren(false);
  440. }}
  441. >
  442. <Count value={childrenLength} />
  443. {!isRoot && !showEmbeddedChildren && (
  444. <div>
  445. <TreeToggleIcon direction={isExpanded ? 'up' : 'down'} />
  446. </div>
  447. )}
  448. </TreeToggle>
  449. </TreeToggleContainer>
  450. );
  451. };
  452. const renderTitle = (_: ScrollbarManager.ScrollbarManagerChildrenProps) => {
  453. const {organization, transaction, addContentSpanBarRef, removeContentSpanBarRef} =
  454. props;
  455. const left = getCurrentOffset();
  456. const errored = isTraceTransaction<TraceFullDetailed>(transaction)
  457. ? transaction.errors &&
  458. transaction.errors.length + transaction.performance_issues.length > 0
  459. : false;
  460. const projectBadge = (isTraceTransaction<TraceFullDetailed>(transaction) ||
  461. isTraceError(transaction)) && (
  462. <Projects orgId={organization.slug} slugs={[transaction.project_slug]}>
  463. {({projects}) => {
  464. const project = projects.find(p => p.slug === transaction.project_slug);
  465. return (
  466. <ProjectBadgeContainer>
  467. <Tooltip title={transaction.project_slug}>
  468. <ProjectBadge
  469. project={project ? project : {slug: transaction.project_slug}}
  470. avatarSize={16}
  471. hideName
  472. />
  473. </Tooltip>
  474. </ProjectBadgeContainer>
  475. );
  476. }}
  477. </Projects>
  478. );
  479. const content = isTraceError(transaction) ? (
  480. <Fragment>
  481. {projectBadge}
  482. <RowTitleContent errored>
  483. <ErrorLink to={generateIssueEventTarget(transaction, organization)}>
  484. <strong>{'Unknown \u2014 '}</strong>
  485. {shortenErrorTitle(transaction.title)}
  486. </ErrorLink>
  487. </RowTitleContent>
  488. </Fragment>
  489. ) : isTraceTransaction<TraceFullDetailed>(transaction) ? (
  490. <Fragment>
  491. {projectBadge}
  492. <RowTitleContent errored={errored}>
  493. <strong>
  494. {transaction['transaction.op']}
  495. {' \u2014 '}
  496. </strong>
  497. {transaction.transaction}
  498. </RowTitleContent>
  499. </Fragment>
  500. ) : (
  501. <RowTitleContent errored={false}>
  502. <strong>{'Trace \u2014 '}</strong>
  503. {transaction.traceSlug}
  504. </RowTitleContent>
  505. );
  506. return (
  507. <RowTitleContainer
  508. ref={ref => {
  509. if (!ref) {
  510. removeContentSpanBarRef(spanContentRef);
  511. return;
  512. }
  513. addContentSpanBarRef(ref);
  514. spanContentRef = ref;
  515. }}
  516. >
  517. {renderToggle(errored)}
  518. <RowTitle
  519. style={{
  520. left: `${left}px`,
  521. width: '100%',
  522. }}
  523. >
  524. {content}
  525. </RowTitle>
  526. </RowTitleContainer>
  527. );
  528. };
  529. const renderDivider = (
  530. dividerHandlerChildrenProps: DividerHandlerManager.DividerHandlerManagerChildrenProps
  531. ) => {
  532. if (showDetail) {
  533. // Mock component to preserve layout spacing
  534. return (
  535. <DividerLine
  536. showDetail
  537. style={{
  538. position: 'absolute',
  539. }}
  540. />
  541. );
  542. }
  543. const {addDividerLineRef} = dividerHandlerChildrenProps;
  544. return (
  545. <DividerLine
  546. ref={addDividerLineRef()}
  547. style={{
  548. position: 'absolute',
  549. }}
  550. onMouseEnter={() => {
  551. dividerHandlerChildrenProps.setHover(true);
  552. }}
  553. onMouseLeave={() => {
  554. dividerHandlerChildrenProps.setHover(false);
  555. }}
  556. onMouseOver={() => {
  557. dividerHandlerChildrenProps.setHover(true);
  558. }}
  559. onMouseDown={e => {
  560. dividerHandlerChildrenProps.onDragStart(e);
  561. }}
  562. onClick={event => {
  563. // we prevent the propagation of the clicks from this component to prevent
  564. // the span detail from being opened.
  565. event.stopPropagation();
  566. }}
  567. />
  568. );
  569. };
  570. const renderGhostDivider = (
  571. dividerHandlerChildrenProps: DividerHandlerManager.DividerHandlerManagerChildrenProps
  572. ) => {
  573. const {dividerPosition, addGhostDividerLineRef} = dividerHandlerChildrenProps;
  574. return (
  575. <DividerLineGhostContainer
  576. style={{
  577. width: `calc(${toPercent(dividerPosition)} + 0.5px)`,
  578. display: 'none',
  579. }}
  580. >
  581. <DividerLine
  582. ref={addGhostDividerLineRef()}
  583. style={{
  584. right: 0,
  585. }}
  586. className="hovering"
  587. onClick={event => {
  588. // the ghost divider line should not be interactive.
  589. // we prevent the propagation of the clicks from this component to prevent
  590. // the span detail from being opened.
  591. event.stopPropagation();
  592. }}
  593. />
  594. </DividerLineGhostContainer>
  595. );
  596. };
  597. const renderErrorBadge = () => {
  598. const {transaction} = props;
  599. if (
  600. isTraceRoot(transaction) ||
  601. isTraceError(transaction) ||
  602. !(transaction.errors.length + transaction.performance_issues.length)
  603. ) {
  604. return null;
  605. }
  606. return <ErrorBadge />;
  607. };
  608. const renderRectangle = () => {
  609. const {transaction, traceInfo, barColor} = props;
  610. // Use 1 as the difference in the case that startTimestamp === endTimestamp
  611. const delta = Math.abs(traceInfo.endTimestamp - traceInfo.startTimestamp) || 1;
  612. const start_timestamp = isTraceError(transaction)
  613. ? transaction.timestamp
  614. : transaction.start_timestamp;
  615. if (!(start_timestamp && transaction.timestamp)) {
  616. return null;
  617. }
  618. const startPosition = Math.abs(start_timestamp - traceInfo.startTimestamp);
  619. const startPercentage = startPosition / delta;
  620. const duration = Math.abs(transaction.timestamp - start_timestamp);
  621. const widthPercentage = duration / delta;
  622. return (
  623. <StyledRowRectangle
  624. style={{
  625. backgroundColor: barColor,
  626. left: `min(${toPercent(startPercentage || 0)}, calc(100% - 1px))`,
  627. width: toPercent(widthPercentage || 0),
  628. }}
  629. >
  630. {renderPerformanceIssues()}
  631. {isTraceError(transaction) ? (
  632. <ErrorBadge />
  633. ) : (
  634. <Fragment>
  635. {renderErrorBadge()}
  636. <DurationPill
  637. durationDisplay={getDurationDisplay({
  638. left: startPercentage,
  639. width: widthPercentage,
  640. })}
  641. showDetail={showDetail}
  642. >
  643. {getHumanDuration(duration)}
  644. </DurationPill>
  645. </Fragment>
  646. )}
  647. </StyledRowRectangle>
  648. );
  649. };
  650. const renderPerformanceIssues = () => {
  651. const {transaction, barColor} = props;
  652. if (isTraceError(transaction) || isTraceRoot(transaction)) {
  653. return null;
  654. }
  655. const rows: React.ReactElement[] = [];
  656. // Use 1 as the difference in the case that startTimestamp === endTimestamp
  657. const delta = Math.abs(transaction.timestamp - transaction.start_timestamp) || 1;
  658. for (let i = 0; i < transaction.performance_issues.length; i++) {
  659. const issue = transaction.performance_issues[i];
  660. const startPosition = Math.abs(issue.start - transaction.start_timestamp);
  661. const startPercentage = startPosition / delta;
  662. const duration = Math.abs(issue.end - issue.start);
  663. const widthPercentage = duration / delta;
  664. rows.push(
  665. <RowRectangle
  666. style={{
  667. backgroundColor: barColor,
  668. left: `min(${toPercent(startPercentage || 0)}, calc(100% - 1px))`,
  669. width: toPercent(widthPercentage || 0),
  670. }}
  671. spanBarType={SpanBarType.AFFECTED}
  672. />
  673. );
  674. }
  675. return rows;
  676. };
  677. const renderHeader = ({
  678. dividerHandlerChildrenProps,
  679. scrollbarManagerChildrenProps,
  680. }: {
  681. dividerHandlerChildrenProps: DividerHandlerManager.DividerHandlerManagerChildrenProps;
  682. scrollbarManagerChildrenProps: ScrollbarManager.ScrollbarManagerChildrenProps;
  683. }) => {
  684. const {hasGuideAnchor, index, transaction, onlyOrphanErrors = false} = props;
  685. const {dividerPosition} = dividerHandlerChildrenProps;
  686. const hideDurationRectangle = isTraceRoot(transaction) && onlyOrphanErrors;
  687. return (
  688. <RowCellContainer showDetail={showDetail}>
  689. <RowCell
  690. data-test-id="transaction-row-title"
  691. data-type="span-row-cell"
  692. style={{
  693. width: `calc(${toPercent(dividerPosition)} - 0.5px)`,
  694. paddingTop: 0,
  695. }}
  696. showDetail={showDetail}
  697. onClick={handleRowCellClick}
  698. ref={transactionTitleRef}
  699. >
  700. <GuideAnchor target="trace_view_guide_row" disabled={!hasGuideAnchor}>
  701. {renderTitle(scrollbarManagerChildrenProps)}
  702. </GuideAnchor>
  703. </RowCell>
  704. <DividerContainer>
  705. {renderDivider(dividerHandlerChildrenProps)}
  706. {!isTraceRoot(transaction) && renderEmbeddedTransactionsBadge()}
  707. </DividerContainer>
  708. <RowCell
  709. data-test-id="transaction-row-duration"
  710. data-type="span-row-cell"
  711. showStriping={index % 2 !== 0}
  712. style={{
  713. width: `calc(${toPercent(1 - dividerPosition)} - 0.5px)`,
  714. paddingTop: 0,
  715. overflow: 'visible',
  716. }}
  717. showDetail={showDetail}
  718. onClick={handleRowCellClick}
  719. >
  720. <RowReplayTimeIndicators />
  721. <GuideAnchor target="trace_view_guide_row_details" disabled={!hasGuideAnchor}>
  722. {!hideDurationRectangle && renderRectangle()}
  723. {renderMeasurements()}
  724. </GuideAnchor>
  725. </RowCell>
  726. {!showDetail && renderGhostDivider(dividerHandlerChildrenProps)}
  727. </RowCellContainer>
  728. );
  729. };
  730. const renderDetail = () => {
  731. const {location, organization, isVisible, transaction} = props;
  732. if (isTraceError(transaction) || isTraceRoot(transaction)) {
  733. return null;
  734. }
  735. if (!isVisible || !showDetail) {
  736. return null;
  737. }
  738. return (
  739. <TransactionDetail
  740. location={location}
  741. organization={organization}
  742. transaction={transaction}
  743. scrollIntoView={scrollIntoView}
  744. />
  745. );
  746. };
  747. const {isVisible, transaction} = props;
  748. return (
  749. <Fragment>
  750. <StyledRow
  751. ref={transactionRowDOMRef}
  752. visible={isVisible}
  753. showBorder={showDetail}
  754. cursor={
  755. isTraceTransaction<TraceFullDetailed>(transaction) ? 'pointer' : 'default'
  756. }
  757. >
  758. <ScrollbarManager.Consumer>
  759. {scrollbarManagerChildrenProps => (
  760. <DividerHandlerManager.Consumer>
  761. {dividerHandlerChildrenProps =>
  762. renderHeader({
  763. dividerHandlerChildrenProps,
  764. scrollbarManagerChildrenProps,
  765. })
  766. }
  767. </DividerHandlerManager.Consumer>
  768. )}
  769. </ScrollbarManager.Consumer>
  770. {renderDetail()}
  771. </StyledRow>
  772. {renderEmbeddedChildrenState()}
  773. {renderEmbeddedChildren()}
  774. </Fragment>
  775. );
  776. }
  777. function getOffset(generation) {
  778. return generation * (TOGGLE_BORDER_BOX / 2) + MARGIN_LEFT;
  779. }
  780. export default NewTraceDetailsTransactionBar;
  781. const StyledRow = styled(Row)`
  782. &,
  783. ${RowCellContainer} {
  784. overflow: visible;
  785. }
  786. `;
  787. const ErrorLink = styled(Link)`
  788. color: ${p => p.theme.error};
  789. `;
  790. const StyledRowRectangle = styled(RowRectangle)`
  791. display: flex;
  792. align-items: center;
  793. `;