123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514 |
- import {createRef, Fragment, memo, useEffect, useState} from 'react';
- import type {RouteComponentProps} from 'react-router';
- import styled from '@emotion/styled';
- import * as Sentry from '@sentry/react';
- import * as DividerHandlerManager from 'sentry/components/events/interfaces/spans/dividerHandlerManager';
- import MeasurementsPanel from 'sentry/components/events/interfaces/spans/measurementsPanel';
- import TraceViewHeader from 'sentry/components/events/interfaces/spans/newTraceDetailsHeader';
- import type {SpanDetailProps} from 'sentry/components/events/interfaces/spans/newTraceDetailsSpanDetails';
- import * as ScrollbarManager from 'sentry/components/events/interfaces/spans/scrollbarManager';
- import {
- boundsGenerator,
- getMeasurements,
- } from 'sentry/components/events/interfaces/spans/utils';
- import Panel from 'sentry/components/panels/panel';
- import {MessageRow} from 'sentry/components/performance/waterfall/messageRow';
- import {
- DividerSpacer,
- ScrollbarContainer,
- VirtualScrollbar,
- VirtualScrollbarGrip,
- } from 'sentry/components/performance/waterfall/miniHeader';
- import {pickBarColor} from 'sentry/components/performance/waterfall/utils';
- import {tct} from 'sentry/locale';
- import type {EventTransaction, Organization} from 'sentry/types';
- import {trackAnalytics} from 'sentry/utils/analytics';
- import type EventView from 'sentry/utils/discover/eventView';
- import toPercent from 'sentry/utils/number/toPercent';
- import type {
- TraceError,
- TraceFullDetailed,
- TraceMeta,
- } from 'sentry/utils/performance/quickTrace/types';
- import type {TraceTree} from 'sentry/views/performance/newTraceDetails/traceModels/traceTree';
- import {
- TraceDetailBody,
- TraceViewContainer,
- TraceViewHeaderContainer,
- } from 'sentry/views/performance/traceDetails/styles';
- import TransactionGroup from 'sentry/views/performance/traceDetails/transactionGroup';
- import type {TraceInfo, TreeDepth} from 'sentry/views/performance/traceDetails/types';
- import {
- getTraceInfo,
- hasTraceData,
- isRootTransaction,
- } from 'sentry/views/performance/traceDetails/utils';
- import LimitExceededMessage from './limitExceededMessage';
- import type {EventDetail, TraceType} from './newTraceDetailsContent';
- import TraceNotFound from './traceNotFound';
- type AccType = {
- lastIndex: number;
- numberOfHiddenTransactionsAbove: number;
- renderedChildren: React.ReactNode[];
- };
- type Props = Pick<RouteComponentProps<{}, {}>, 'location'> & {
- meta: TraceMeta | null;
- onRowClick: (detailKey: EventDetail | SpanDetailProps | undefined) => void;
- organization: Organization;
- rootEvent: EventTransaction | undefined;
- traceEventView: EventView;
- traceSlug: string;
- traceType: TraceType;
- traces: TraceTree.Transaction[];
- filteredEventIds?: Set<string>;
- handleLimitChange?: (newLimit: number) => void;
- orphanErrors?: TraceError[];
- traceInfo?: TraceInfo;
- };
- function TraceHiddenMessage({
- isVisible,
- numberOfHiddenTransactionsAbove,
- numberOfHiddenErrorsAbove,
- }: {
- isVisible: boolean;
- numberOfHiddenErrorsAbove: number;
- numberOfHiddenTransactionsAbove: number;
- }) {
- if (
- !isVisible ||
- (numberOfHiddenTransactionsAbove < 1 && numberOfHiddenErrorsAbove < 1)
- ) {
- return null;
- }
- const numOfTransaction = <strong>{numberOfHiddenTransactionsAbove}</strong>;
- const numOfErrors = <strong>{numberOfHiddenErrorsAbove}</strong>;
- const hiddenTransactionsMessage =
- numberOfHiddenTransactionsAbove < 1
- ? ''
- : numberOfHiddenTransactionsAbove === 1
- ? tct('[numOfTransaction] hidden transaction', {
- numOfTransaction,
- })
- : tct('[numOfTransaction] hidden transactions', {
- numOfTransaction,
- });
- const hiddenErrorsMessage =
- numberOfHiddenErrorsAbove < 1
- ? ''
- : numberOfHiddenErrorsAbove === 1
- ? tct('[numOfErrors] hidden error', {
- numOfErrors,
- })
- : tct('[numOfErrors] hidden errors', {
- numOfErrors,
- });
- return (
- <MessageRow>
- <span key="trace-info-message">
- {hiddenTransactionsMessage}
- {hiddenErrorsMessage && hiddenTransactionsMessage && ', '}
- {hiddenErrorsMessage}
- </span>
- </MessageRow>
- );
- }
- function isRowVisible(
- row: TraceFullDetailed | TraceError,
- filteredEventIds?: Set<string>
- ): boolean {
- return filteredEventIds ? filteredEventIds.has(row.event_id) : true;
- }
- function generateBounds(traceInfo: TraceInfo) {
- return boundsGenerator({
- traceStartTimestamp: traceInfo.startTimestamp,
- traceEndTimestamp: traceInfo.endTimestamp,
- viewStart: 0,
- viewEnd: 1,
- });
- }
- function NewTraceView({
- location,
- meta,
- organization,
- traces,
- traceSlug,
- traceEventView,
- filteredEventIds,
- orphanErrors,
- traceType,
- handleLimitChange,
- onRowClick,
- ...props
- }: Props) {
- const [isTransactionBarScrolledTo, setIsTransactionBarScrolledTo] = useState(false);
- const sentrySpan = Sentry.startInactiveSpan({
- op: 'trace.render',
- name: 'trace-view-content',
- onlyIfParent: true,
- });
- const hasOrphanErrors = orphanErrors && orphanErrors.length > 0;
- const onlyOrphanErrors = hasOrphanErrors && (!traces || traces.length === 0);
- useEffect(() => {
- trackAnalytics('performance_views.trace_view.view', {
- organization,
- });
- }, [organization]);
- function renderTransaction(
- transaction: TraceFullDetailed,
- {
- continuingDepths,
- isOrphan,
- isLast,
- index,
- numberOfHiddenTransactionsAbove,
- traceInfo,
- hasGuideAnchor,
- }: {
- continuingDepths: TreeDepth[];
- hasGuideAnchor: boolean;
- index: number;
- isLast: boolean;
- isOrphan: boolean;
- numberOfHiddenTransactionsAbove: number;
- traceInfo: TraceInfo;
- }
- ) {
- const {children, event_id: eventId} = transaction;
- // Add 1 to the generation to make room for the "root trace"
- const generation = transaction.generation + 1;
- const isVisible = isRowVisible(transaction, filteredEventIds);
- const accumulated: AccType = children.reduce(
- (acc: AccType, child: TraceFullDetailed, idx: number) => {
- const isLastChild = idx === children.length - 1;
- const hasChildren = child.children.length > 0;
- const result = renderTransaction(child, {
- continuingDepths:
- !isLastChild && hasChildren
- ? [...continuingDepths, {depth: generation, isOrphanDepth: isOrphan}]
- : continuingDepths,
- isOrphan,
- isLast: isLastChild,
- index: acc.lastIndex + 1,
- numberOfHiddenTransactionsAbove: acc.numberOfHiddenTransactionsAbove,
- traceInfo,
- hasGuideAnchor: false,
- });
- acc.lastIndex = result.lastIndex;
- acc.numberOfHiddenTransactionsAbove = result.numberOfHiddenTransactionsAbove;
- acc.renderedChildren.push(result.transactionGroup);
- return acc;
- },
- {
- renderedChildren: [],
- lastIndex: index,
- numberOfHiddenTransactionsAbove: isVisible
- ? 0
- : numberOfHiddenTransactionsAbove + 1,
- }
- );
- return {
- transactionGroup: (
- <Fragment key={eventId}>
- <TraceHiddenMessage
- isVisible={isVisible}
- numberOfHiddenTransactionsAbove={numberOfHiddenTransactionsAbove}
- numberOfHiddenErrorsAbove={0}
- />
- <TransactionGroup
- isBarScrolledTo={isTransactionBarScrolledTo}
- onBarScrolledTo={() => setIsTransactionBarScrolledTo(true)}
- onRowClick={onRowClick}
- location={location}
- traceViewRef={traceViewRef}
- organization={organization}
- traceInfo={traceInfo}
- transaction={{
- ...transaction,
- generation,
- }}
- measurements={
- traces && traces.length > 0
- ? getMeasurements(traces[0], generateBounds(traceInfo))
- : undefined
- }
- generateBounds={generateBounds(traceInfo)}
- continuingDepths={continuingDepths}
- isOrphan={isOrphan}
- isLast={isLast}
- index={index}
- isVisible={isVisible}
- hasGuideAnchor={hasGuideAnchor}
- renderedChildren={accumulated.renderedChildren}
- barColor={pickBarColor(transaction['transaction.op'])}
- />
- </Fragment>
- ),
- lastIndex: accumulated.lastIndex,
- numberOfHiddenTransactionsAbove: accumulated.numberOfHiddenTransactionsAbove,
- };
- }
- const traceViewRef = createRef<HTMLDivElement>();
- const virtualScrollbarContainerRef = createRef<HTMLDivElement>();
- if (!hasTraceData(traces, orphanErrors)) {
- return (
- <TraceNotFound
- meta={meta}
- traceEventView={traceEventView}
- traceSlug={traceSlug}
- location={location}
- organization={organization}
- />
- );
- }
- const traceInfo = props.traceInfo || getTraceInfo(traces);
- const accumulator: {
- index: number;
- numberOfHiddenTransactionsAbove: number;
- traceInfo: TraceInfo;
- transactionGroups: React.ReactNode[];
- } = {
- index: 1,
- numberOfHiddenTransactionsAbove: 0,
- traceInfo,
- transactionGroups: [],
- };
- let lastIndex: number = 0;
- const {transactionGroups, numberOfHiddenTransactionsAbove} = traces.reduce(
- (acc, trace, index) => {
- const isLastTransaction = index === traces.length - 1;
- const hasChildren = trace.children.length > 0;
- const isNextChildOrphaned =
- !isLastTransaction && traces[index + 1].parent_span_id !== null;
- const result = renderTransaction(trace, {
- ...acc,
- // if the root of a subtrace has a parent_span_id, then it must be an orphan
- isOrphan: !isRootTransaction(trace),
- isLast: isLastTransaction && !hasOrphanErrors,
- continuingDepths:
- (!isLastTransaction && hasChildren) || hasOrphanErrors
- ? [{depth: 0, isOrphanDepth: isNextChildOrphaned || Boolean(hasOrphanErrors)}]
- : [],
- hasGuideAnchor: index === 0,
- });
- acc.index = result.lastIndex + 1;
- lastIndex = Math.max(lastIndex, result.lastIndex);
- acc.numberOfHiddenTransactionsAbove = result.numberOfHiddenTransactionsAbove;
- acc.transactionGroups.push(result.transactionGroup);
- return acc;
- },
- accumulator
- );
- // Build transaction groups for orphan errors
- let numOfHiddenErrorsAbove = 0;
- let totalNumOfHiddenErrors = 0;
- if (hasOrphanErrors) {
- orphanErrors.forEach((error, index) => {
- const isLastError = index === orphanErrors.length - 1;
- const isVisible = isRowVisible(error, filteredEventIds);
- const currentHiddenCount = numOfHiddenErrorsAbove;
- if (!isVisible) {
- numOfHiddenErrorsAbove += 1;
- totalNumOfHiddenErrors += 1;
- } else {
- numOfHiddenErrorsAbove = 0;
- }
- transactionGroups.push(
- <Fragment key={error.event_id}>
- <TraceHiddenMessage
- isVisible={isVisible}
- numberOfHiddenTransactionsAbove={
- index === 0 ? numberOfHiddenTransactionsAbove : 0
- }
- numberOfHiddenErrorsAbove={index > 0 ? currentHiddenCount : 0}
- />
- <TransactionGroup
- isBarScrolledTo={isTransactionBarScrolledTo}
- onBarScrolledTo={() => setIsTransactionBarScrolledTo(true)}
- onRowClick={onRowClick}
- location={location}
- organization={organization}
- traceViewRef={traceViewRef}
- traceInfo={traceInfo}
- transaction={{
- ...error,
- generation: 1,
- }}
- generateBounds={generateBounds(traceInfo)}
- measurements={
- traces && traces.length > 0
- ? getMeasurements(traces[0], generateBounds(traceInfo))
- : undefined
- }
- continuingDepths={[]}
- isOrphan
- isLast={isLastError}
- index={lastIndex + index + 1}
- isVisible={isVisible}
- hasGuideAnchor={index === 0 && transactionGroups.length === 0}
- renderedChildren={[]}
- />
- </Fragment>
- );
- });
- }
- const bounds = generateBounds(traceInfo);
- const measurements =
- traces.length > 0 && Object.keys(traces[0].measurements ?? {}).length > 0
- ? getMeasurements(traces[0], bounds)
- : undefined;
- const traceView = (
- <TraceDetailBody>
- <DividerHandlerManager.Provider interactiveLayerRef={traceViewRef}>
- <DividerHandlerManager.Consumer>
- {({dividerPosition}) => (
- <ScrollbarManager.Provider
- dividerPosition={dividerPosition}
- interactiveLayerRef={virtualScrollbarContainerRef}
- isEmbedded
- >
- <StyledTracePanel>
- <TraceViewHeader
- traceInfo={traceInfo}
- traceType={traceType}
- traceViewHeaderRef={traceViewRef}
- organization={organization}
- event={props.rootEvent}
- />
- <TraceViewHeaderContainer>
- <ScrollbarManager.Consumer>
- {({virtualScrollbarRef, scrollBarAreaRef, onDragStart, onScroll}) => {
- return (
- <ScrollbarContainer
- ref={virtualScrollbarContainerRef}
- style={{
- // the width of this component is shrunk to compensate for half of the width of the divider line
- width: `calc(${toPercent(dividerPosition)} - 0.5px)`,
- }}
- onScroll={onScroll}
- >
- <div
- style={{
- width: 0,
- height: '1px',
- }}
- ref={scrollBarAreaRef}
- />
- <VirtualScrollbar
- data-type="virtual-scrollbar"
- ref={virtualScrollbarRef}
- onMouseDown={onDragStart}
- >
- <VirtualScrollbarGrip />
- </VirtualScrollbar>
- </ScrollbarContainer>
- );
- }}
- </ScrollbarManager.Consumer>
- <DividerSpacer />
- {measurements ? (
- <MeasurementsPanel
- measurements={measurements}
- generateBounds={bounds}
- dividerPosition={dividerPosition}
- />
- ) : null}
- </TraceViewHeaderContainer>
- <TraceViewContainer ref={traceViewRef}>
- <TransactionGroup
- isBarScrolledTo={isTransactionBarScrolledTo}
- onBarScrolledTo={() => setIsTransactionBarScrolledTo(true)}
- onRowClick={onRowClick}
- location={location}
- organization={organization}
- traceInfo={traceInfo}
- transaction={{
- traceSlug,
- generation: 0,
- 'transaction.duration':
- traceInfo.endTimestamp - traceInfo.startTimestamp,
- children: traces,
- start_timestamp: traceInfo.startTimestamp,
- timestamp: traceInfo.endTimestamp,
- }}
- measurements={measurements}
- generateBounds={bounds}
- continuingDepths={[]}
- isOrphan={false}
- isLast={false}
- index={0}
- isVisible
- hasGuideAnchor={false}
- renderedChildren={transactionGroups}
- barColor={pickBarColor('')}
- onlyOrphanErrors={onlyOrphanErrors}
- traceViewRef={traceViewRef}
- numOfOrphanErrors={orphanErrors?.length}
- />
- <TraceHiddenMessage
- isVisible
- numberOfHiddenTransactionsAbove={numberOfHiddenTransactionsAbove}
- numberOfHiddenErrorsAbove={totalNumOfHiddenErrors}
- />
- <LimitExceededMessage
- traceInfo={traceInfo}
- organization={organization}
- traceEventView={traceEventView}
- meta={meta}
- handleLimitChange={handleLimitChange}
- />
- </TraceViewContainer>
- </StyledTracePanel>
- </ScrollbarManager.Provider>
- )}
- </DividerHandlerManager.Consumer>
- </DividerHandlerManager.Provider>
- </TraceDetailBody>
- );
- sentrySpan?.end();
- return traceView;
- }
- export default memo(NewTraceView);
- export const StyledTracePanel = styled(Panel)`
- height: 100%;
- overflow-x: visible;
- ${TraceViewContainer} {
- overflow-x: visible;
- }
- `;
|