Skip to content

Commit bc3bb2e

Browse files
n1ru4ln1ru4l
committed
real data
1 parent fefc020 commit bc3bb2e

File tree

2 files changed

+120
-59
lines changed

2 files changed

+120
-59
lines changed

‎packages/services/api/src/modules/operations/providers/traces.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -246,7 +246,7 @@ const TraceModel = z.object({
246246
z.literal('SUBSCRIPTION'),
247247
]),
248248
graphqlErrorCodes: z.array(z.string()).nullable(),
249-
subgraphNames: z.array(z.string()),
249+
subgraphNames: z.array(z.string()).transform(s => (s.length === 1 && s.at(0) === '' ? [] : s)),
250250
});
251251

252252
export type Trace = z.TypeOf<typeof TraceModel>;

‎packages/web/app/src/pages/target-trace.tsx

Lines changed: 119 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,7 @@ const fetchProductsQueryString = `
4949

5050
interface TraceAttribute {
5151
name: string;
52-
value: string | number | ReactNode;
53-
category?: string;
52+
value: string;
5453
}
5554

5655
function TraceView(props: {
@@ -117,26 +116,28 @@ function TraceView(props: {
117116
/>
118117
</div>
119118
</ScrollArea>
120-
<div className="sticky bottom-0 z-10 px-2 py-4">
121-
<div className="flex flex-wrap items-center justify-center gap-6 text-xs text-gray-500">
122-
{props.serviceNames.map(serviceName => (
123-
<div
124-
key={serviceName}
125-
className="flex cursor-pointer items-center gap-2 hover:text-white"
126-
onMouseEnter={() => setHighlightedServiceName(serviceName)}
127-
onMouseLeave={() => setHighlightedServiceName(null)}
128-
>
119+
{props.serviceNames && (
120+
<div className="sticky bottom-0 z-10 px-2 py-4">
121+
<div className="flex flex-wrap items-center justify-center gap-6 text-xs text-gray-500">
122+
{props.serviceNames.map(serviceName => (
129123
<div
130-
className="size-2"
131-
style={{
132-
backgroundColor: stringToHSL(serviceName),
133-
}}
134-
/>
135-
<div>{serviceName}</div>
136-
</div>
137-
))}
124+
key={serviceName}
125+
className="flex cursor-pointer items-center gap-2 hover:text-white"
126+
onMouseEnter={() => setHighlightedServiceName(serviceName)}
127+
onMouseLeave={() => setHighlightedServiceName(null)}
128+
>
129+
<div
130+
className="size-2"
131+
style={{
132+
backgroundColor: stringToHSL(serviceName),
133+
}}
134+
/>
135+
<div>{serviceName}</div>
136+
</div>
137+
))}
138+
</div>
138139
</div>
139-
</div>
140+
)}
140141
</div>
141142
);
142143
}
@@ -405,6 +406,37 @@ function countChildren(spans: SpanFragmentWithChildren[]): number {
405406
return spans.reduce((acc, span) => acc + countChildren(span.children), spans.length);
406407
}
407408

409+
type NodeElementProps = {
410+
leftPositionPercentage: number;
411+
widthPercentage: number;
412+
isNearRightEdge: boolean;
413+
durationStr: string;
414+
color: string;
415+
};
416+
417+
function NodeElement(props: NodeElementProps) {
418+
return (
419+
<div
420+
className={cn('absolute z-20 block h-6 min-w-[1px] select-none rounded-sm')}
421+
style={{
422+
left: `min(${props.leftPositionPercentage}%, 100% - 1px)`,
423+
width: `${props.widthPercentage}%`,
424+
backgroundColor: props.color,
425+
}}
426+
>
427+
<div
428+
className="absolute top-1/2 flex -translate-y-1/2 items-center whitespace-nowrap px-[4px] font-mono leading-none"
429+
style={{
430+
fontSize: '11px',
431+
...(props.isNearRightEdge ? { right: '6px' } : { left: `calc(100% + 6px)` }),
432+
}}
433+
>
434+
{props.durationStr}
435+
</div>
436+
</div>
437+
);
438+
}
439+
408440
function SpanNode(props: SpanNodeProps) {
409441
const span = useFragment(SpanFragment, props.span.span);
410442

@@ -491,24 +523,13 @@ function SpanNode(props: SpanNodeProps) {
491523
>
492524
<Tooltip disableHoverableContent delayDuration={100}>
493525
<TooltipTrigger asChild>
494-
<div
495-
className={cn('absolute z-20 block h-6 min-w-[1px] select-none rounded-sm')}
496-
style={{
497-
left: `min(${leftPositionPercentage}%, 100% - 1px)`,
498-
width: `${widthPercentage}%`,
499-
backgroundColor: props.color,
500-
}}
501-
>
502-
<div
503-
className="absolute top-1/2 flex -translate-y-1/2 items-center whitespace-nowrap px-[4px] font-mono leading-none"
504-
style={{
505-
fontSize: '11px',
506-
...(isNearRightEdge ? { right: '6px' } : { left: `calc(100% + 6px)` }),
507-
}}
508-
>
509-
{formatNanoseconds(props.span.durationNs)}
510-
</div>
511-
</div>
526+
<NodeElement
527+
color={props.color}
528+
isNearRightEdge={isNearRightEdge}
529+
leftPositionPercentage={leftPositionPercentage}
530+
widthPercentage={widthPercentage}
531+
durationStr={formatNanoseconds(props.span.durationNs)}
532+
/>
512533
</TooltipTrigger>
513534
<TooltipContent
514535
side="bottom"
@@ -657,7 +678,9 @@ type TraceSheetProps = {
657678
};
658679

659680
function TraceSheet(props: TraceSheetProps) {
660-
const [activeView, setActiveView] = useState<'attributes' | 'events' | 'operation'>('attributes');
681+
const [activeView, setActiveView] = useState<
682+
'span-attributes' | 'resource-attributes' | 'events' | 'operation'
683+
>('span-attributes');
661684
const trace = useFragment(TraceSheet_TraceFragment, props.trace);
662685

663686
const [rootSpan, spanLookupMap] = useMemo(
@@ -671,7 +694,12 @@ function TraceSheet(props: TraceSheetProps) {
671694
).map(([name, value]) => ({
672695
name,
673696
value: String(value),
674-
category: name.split('.')[0] ?? 'unknown',
697+
}));
698+
const resourceAttributes: Array<TraceAttribute> = Array.from(
699+
Object.entries(rootSpanUnmasked.resourceAttributes),
700+
).map(([name, value]) => ({
701+
name,
702+
value: String(value),
675703
}));
676704

677705
const totalTraceDuration = differenceInNanoseconds(
@@ -706,8 +734,8 @@ function TraceSheet(props: TraceSheetProps) {
706734
<div className="sticky top-0 z-10 border-b border-gray-800">
707735
<div className="item-center flex w-full gap-x-4 px-2 text-xs font-medium">
708736
<TabButton
709-
isActive={activeView === 'attributes'}
710-
onClick={() => setActiveView('attributes')}
737+
isActive={activeView === 'span-attributes'}
738+
onClick={() => setActiveView('span-attributes')}
711739
>
712740
<div className="flex items-center gap-x-2">
713741
<div>Attributes</div>
@@ -716,12 +744,28 @@ function TraceSheet(props: TraceSheetProps) {
716744
variant="secondary"
717745
className="rounded-md px-2 py-0.5 text-[10px] font-thin"
718746
>
719-
7
747+
{spanAttributes.length}
720748
</Badge>
721749
</div>
722750
</div>
723751
</TabButton>
724752
<TabButton
753+
isActive={activeView === 'resource-attributes'}
754+
onClick={() => setActiveView('resource-attributes')}
755+
>
756+
<div className="flex items-center gap-x-2">
757+
<div>Resource Attributes</div>
758+
<div>
759+
<Badge
760+
variant="secondary"
761+
className="rounded-md px-2 py-0.5 text-[10px] font-thin"
762+
>
763+
{resourceAttributes.length}
764+
</Badge>
765+
</div>
766+
</div>
767+
</TabButton>
768+
{/* <TabButton
725769
isActive={activeView === 'events'}
726770
onClick={() => setActiveView('events')}
727771
>
@@ -736,7 +780,7 @@ function TraceSheet(props: TraceSheetProps) {
736780
</Badge>
737781
</div>
738782
</div>
739-
</TabButton>
783+
</TabButton> */}
740784
<TabButton
741785
isActive={activeView === 'operation'}
742786
onClick={() => setActiveView('operation')}
@@ -749,20 +793,16 @@ function TraceSheet(props: TraceSheetProps) {
749793
</div>
750794
<ScrollArea className="relative grow">
751795
<div className="h-full">
752-
{activeView === 'attributes' ? (
796+
{activeView === 'span-attributes' ? (
753797
<div>
754798
{spanAttributes.length > 0 ? (
755-
<div>
756-
{spanAttributes.map((attr, index) => (
757-
<div
758-
key={index}
759-
className="border-border flex items-center justify-between border-b px-3 py-3 text-xs"
760-
>
761-
<div className="text-gray-400">{attr.name}</div>
762-
<div className="font-mono text-white">{attr.value}</div>
763-
</div>
764-
))}
765-
</div>
799+
spanAttributes.map(attr => (
800+
<AttributeRow
801+
attributeKey={attr.name}
802+
key={attr.name}
803+
value={attr.value}
804+
/>
805+
))
766806
) : (
767807
<div className="py-4 text-center">
768808
<AlertTriangle className="mx-auto mb-2 h-6 w-6 text-gray-500" />
@@ -773,7 +813,27 @@ function TraceSheet(props: TraceSheetProps) {
773813
)}
774814
</div>
775815
) : null}
776-
{activeView === 'events' ? (
816+
{activeView === 'resource-attributes' ? (
817+
<div>
818+
{resourceAttributes.length > 0 ? (
819+
resourceAttributes.map(attr => (
820+
<AttributeRow
821+
attributeKey={attr.name}
822+
key={attr.name}
823+
value={attr.value}
824+
/>
825+
))
826+
) : (
827+
<div className="py-4 text-center">
828+
<AlertTriangle className="mx-auto mb-2 h-6 w-6 text-gray-500" />
829+
<p className="text-xs text-gray-500">
830+
No resource attributes found for this trace
831+
</p>
832+
</div>
833+
)}
834+
</div>
835+
) : null}
836+
{/* {activeView === 'events' ? (
777837
<div className="p-4">
778838
<div className="space-y-2">
779839
{[
@@ -818,7 +878,7 @@ function TraceSheet(props: TraceSheetProps) {
818878
))}
819879
</div>
820880
</div>
821-
) : null}
881+
) : null} */}
822882
{activeView === 'operation' ? (
823883
<div className="absolute bottom-0 top-0 w-full">
824884
<GraphQLHighlight
@@ -945,6 +1005,7 @@ const SpanFragment = graphql(/* GraphQL */ `
9451005
id
9461006
name
9471007
spanAttributes
1008+
resourceAttributes
9481009
parentId
9491010
startTime
9501011
endTime

0 commit comments

Comments
 (0)