1
1
import { Fragment , useMemo , useRef } from 'react' ;
2
2
import { type Theme , useTheme } from '@emotion/react' ;
3
3
import styled from '@emotion/styled' ;
4
- import type { Location , LocationDescriptorObject } from 'history' ;
4
+ import type { Location } from 'history' ;
5
5
6
6
import { EventAttachments } from 'sentry/components/events/eventAttachments' ;
7
7
import { EventViewHierarchy } from 'sentry/components/events/eventViewHierarchy' ;
@@ -11,7 +11,6 @@ import {
11
11
useSpanProfileDetails ,
12
12
} from 'sentry/components/events/interfaces/spans/spanProfileDetails' ;
13
13
import { EventRRWebIntegration } from 'sentry/components/events/rrwebIntegration' ;
14
- import Link from 'sentry/components/links/link' ;
15
14
import LoadingError from 'sentry/components/loadingError' ;
16
15
import LoadingIndicator from 'sentry/components/loadingIndicator' ;
17
16
import QuestionTooltip from 'sentry/components/questionTooltip' ;
@@ -21,18 +20,12 @@ import {EntryType, type EventTransaction} from 'sentry/types/event';
21
20
import type { NewQuery , Organization } from 'sentry/types/organization' ;
22
21
import type { Project } from 'sentry/types/project' ;
23
22
import { defined } from 'sentry/utils' ;
24
- import { trackAnalytics } from 'sentry/utils/analytics' ;
25
23
import { LogsAnalyticsPageSource } from 'sentry/utils/analytics/logsAnalyticsEvent' ;
26
24
import EventView from 'sentry/utils/discover/eventView' ;
27
- import type { RenderFunctionBaggage } from 'sentry/utils/discover/fieldRenderers' ;
28
- import { FieldKey } from 'sentry/utils/fields' ;
29
- import { generateProfileFlamechartRoute } from 'sentry/utils/profiling/routes' ;
30
25
import { MutableSearch } from 'sentry/utils/tokenizeSearch' ;
31
26
import { useLocation } from 'sentry/utils/useLocation' ;
32
27
import useOrganization from 'sentry/utils/useOrganization' ;
33
28
import useProjects from 'sentry/utils/useProjects' ;
34
- import type { AttributesFieldRendererProps } from 'sentry/views/explore/components/traceItemAttributes/attributesTree' ;
35
- import { AttributesTree } from 'sentry/views/explore/components/traceItemAttributes/attributesTree' ;
36
29
import {
37
30
LogsPageDataProvider ,
38
31
useLogsPageDataQueryResult ,
@@ -51,27 +44,21 @@ import {useTransaction} from 'sentry/views/performance/newTraceDetails/traceApi/
51
44
import { IssueList } from 'sentry/views/performance/newTraceDetails/traceDrawer/details/issues/issues' ;
52
45
import { AIInputSection } from 'sentry/views/performance/newTraceDetails/traceDrawer/details/span/eapSections/aiInput' ;
53
46
import { AIOutputSection } from 'sentry/views/performance/newTraceDetails/traceDrawer/details/span/eapSections/aiOutput' ;
47
+ import { Attributes } from 'sentry/views/performance/newTraceDetails/traceDrawer/details/span/eapSections/attributes' ;
54
48
import { TraceDrawerComponents } from 'sentry/views/performance/newTraceDetails/traceDrawer/details/styles' ;
55
49
import { BreadCrumbs } from 'sentry/views/performance/newTraceDetails/traceDrawer/details/transaction/sections/breadCrumbs' ;
56
50
import ReplayPreview from 'sentry/views/performance/newTraceDetails/traceDrawer/details/transaction/sections/replayPreview' ;
57
51
import { Request } from 'sentry/views/performance/newTraceDetails/traceDrawer/details/transaction/sections/request' ;
58
- import {
59
- findSpanAttributeValue ,
60
- getProfileMeta ,
61
- getTraceAttributesTreeActions ,
62
- sortAttributes ,
63
- } from 'sentry/views/performance/newTraceDetails/traceDrawer/details/utils' ;
52
+ import { getProfileMeta } from 'sentry/views/performance/newTraceDetails/traceDrawer/details/utils' ;
64
53
import type { TraceTreeNodeDetailsProps } from 'sentry/views/performance/newTraceDetails/traceDrawer/tabs/traceTreeNodeDetails' ;
65
54
import {
66
55
isEAPSpanNode ,
67
56
isEAPTransactionNode ,
68
57
} from 'sentry/views/performance/newTraceDetails/traceGuards' ;
69
58
import { TraceTree } from 'sentry/views/performance/newTraceDetails/traceModels/traceTree' ;
70
59
import type { TraceTreeNode } from 'sentry/views/performance/newTraceDetails/traceModels/traceTreeNode' ;
71
- import { useTraceState } from 'sentry/views/performance/newTraceDetails/traceState/traceStateProvider' ;
72
60
import { ProfileGroupProvider } from 'sentry/views/profiling/profileGroupProvider' ;
73
61
import { ProfileContext , ProfilesProvider } from 'sentry/views/profiling/profilesProvider' ;
74
- import { makeReplaysPathname } from 'sentry/views/replays/pathnames' ;
75
62
76
63
import { SpanDescription as EAPSpanDescription } from './eapSections/description' ;
77
64
import Alerts from './sections/alerts' ;
@@ -356,8 +343,6 @@ function useAvgSpanDuration(
356
343
return result . data ?. [ 0 ] ?. [ 'avg(span.duration)' ] ;
357
344
}
358
345
359
- type CustomRenderersProps = AttributesFieldRendererProps < RenderFunctionBaggage > ;
360
-
361
346
type EAPSpanNodeDetailsProps = TraceTreeNodeDetailsProps <
362
347
TraceTreeNode < TraceTree . EAPSpan >
363
348
> & {
@@ -407,8 +392,6 @@ function EAPSpanNodeDetails({
407
392
408
393
const avgSpanDuration = useAvgSpanDuration ( node . value , location ) ;
409
394
410
- const traceState = useTraceState ( ) ;
411
-
412
395
if ( isTraceItemPending || isEventTransactionLoading ) {
413
396
return < LoadingIndicator /> ;
414
397
}
@@ -418,12 +401,6 @@ function EAPSpanNodeDetails({
418
401
}
419
402
420
403
const attributes = traceItemData ?. attributes ;
421
- const columnCount =
422
- traceState . preferences . layout === 'drawer left' ||
423
- traceState . preferences . layout === 'drawer right'
424
- ? 1
425
- : undefined ;
426
-
427
404
const isTransaction = isEAPTransactionNode ( node ) && ! ! eventTransaction ;
428
405
const profileMeta = eventTransaction ? getProfileMeta ( eventTransaction ) || '' : '' ;
429
406
const profileId =
@@ -433,49 +410,6 @@ function EAPSpanNodeDetails({
433
410
entry => entry . type === EntryType . REQUEST
434
411
) ;
435
412
436
- const customRenderers = {
437
- [ FieldKey . PROFILE_ID ] : ( props : CustomRenderersProps ) => {
438
- const target = generateProfileFlamechartRoute ( {
439
- organization,
440
- projectSlug : project ?. slug ?? '' ,
441
- profileId : String ( props . item . value ) ,
442
- } ) ;
443
-
444
- return (
445
- < StyledLink
446
- data-test-id = "view-profile"
447
- to = { {
448
- pathname : target ,
449
- query : {
450
- spanId : node . value . event_id ,
451
- } ,
452
- } }
453
- onClick = { ( ) =>
454
- trackAnalytics ( 'profiling_views.go_to_flamegraph' , {
455
- organization,
456
- source : 'performance.trace_view.details' ,
457
- } )
458
- }
459
- >
460
- { props . item . value }
461
- </ StyledLink >
462
- ) ;
463
- } ,
464
- [ FieldKey . REPLAY_ID ] : ( props : CustomRenderersProps ) => {
465
- const target : LocationDescriptorObject = {
466
- pathname : makeReplaysPathname ( {
467
- path : `/${ props . item . value } /` ,
468
- organization,
469
- } ) ,
470
- query : {
471
- event_t : node . value . start_timestamp ,
472
- referrer : 'performance.trace_view.details' ,
473
- } ,
474
- } ;
475
- return < StyledLink to = { target } > { props . item . value } </ StyledLink > ;
476
- } ,
477
- } ;
478
-
479
413
return (
480
414
< TraceDrawerComponents . DetailContainer >
481
415
< SpanNodeDetailHeader
@@ -521,34 +455,14 @@ function EAPSpanNodeDetails({
521
455
/>
522
456
< AIInputSection node = { node } attributes = { attributes } />
523
457
< AIOutputSection node = { node } attributes = { attributes } />
524
- < FoldSection
525
- sectionKey = { SectionKey . SPAN_ATTRIBUTES }
526
- title = {
527
- < SectionTitleWithQuestionTooltip
528
- title = { t ( 'Attributes' ) }
529
- tooltipText = { t (
530
- 'These attributes are indexed and can be queried in the Trace Explorer.'
531
- ) }
532
- />
533
- }
534
- disableCollapsePersistence
535
- >
536
- < AttributesTree
537
- columnCount = { columnCount }
538
- attributes = { sortAttributes ( attributes ) }
539
- renderers = { customRenderers }
540
- rendererExtra = { {
541
- theme,
542
- location,
543
- organization,
544
- } }
545
- getCustomActions = { getTraceAttributesTreeActions ( {
546
- location,
547
- organization,
548
- projectIds : findSpanAttributeValue ( attributes , 'project_id' ) ,
549
- } ) }
550
- />
551
- </ FoldSection >
458
+ < Attributes
459
+ node = { node }
460
+ attributes = { attributes }
461
+ theme = { theme }
462
+ location = { location }
463
+ organization = { organization }
464
+ project = { project }
465
+ />
552
466
553
467
{ isTransaction && eventHasRequestEntry ? (
554
468
< FoldSection
@@ -628,7 +542,7 @@ function EAPSpanNodeDetails({
628
542
) ;
629
543
}
630
544
631
- function SectionTitleWithQuestionTooltip ( {
545
+ export function SectionTitleWithQuestionTooltip ( {
632
546
title,
633
547
tooltipText,
634
548
} : {
@@ -648,9 +562,3 @@ const Flex = styled('div')`
648
562
align-items: center;
649
563
gap: ${ space ( 0.5 ) } ;
650
564
` ;
651
-
652
- const StyledLink = styled ( Link ) `
653
- & div {
654
- display: inline;
655
- }
656
- ` ;
0 commit comments