diff --git a/tracingganttchart/src/TracingGanttChart/DetailPane/Attributes.test.tsx b/tracingganttchart/src/TracingGanttChart/DetailPane/Attributes.test.tsx
index 5476e74c..2190dc05 100644
--- a/tracingganttchart/src/TracingGanttChart/DetailPane/Attributes.test.tsx
+++ b/tracingganttchart/src/TracingGanttChart/DetailPane/Attributes.test.tsx
@@ -126,4 +126,30 @@ describe('Attributes', () => {
expect(screen.getByText('300ms')).toBeInTheDocument(); // start
expect(screen.getByText('150ms')).toBeInTheDocument(); // duration
});
+
+ it('render kind', () => {
+ renderTraceAttributes({ trace, span: trace.rootSpans[0]! });
+ expect(screen.getByText('kind')).toBeInTheDocument();
+ expect(screen.getByText('SPAN_KIND_SERVER')).toBeInTheDocument();
+ });
+
+ it('render status code and message', () => {
+ renderTraceAttributes({ trace, span: trace.rootSpans[0]!.childSpans[0]! });
+ expect(screen.getByText('status code')).toBeInTheDocument();
+ expect(screen.getByText('STATUS_CODE_ERROR')).toBeInTheDocument();
+ expect(screen.getByText('status message')).toBeInTheDocument();
+ expect(screen.getByText('Forbidden')).toBeInTheDocument();
+ });
+
+ it('does not render status when unset', () => {
+ renderTraceAttributes({ trace, span: trace.rootSpans[0]!.childSpans[0]!.childSpans[0]! });
+ expect(screen.queryByText('status code')).not.toBeInTheDocument();
+ expect(screen.queryByText('status message')).not.toBeInTheDocument();
+ });
+
+ it('render scope', () => {
+ renderTraceAttributes({ trace, span: trace.rootSpans[0]! });
+ expect(screen.getByText('scope name')).toBeInTheDocument();
+ expect(screen.getByText('k6')).toBeInTheDocument();
+ });
});
diff --git a/tracingganttchart/src/TracingGanttChart/DetailPane/Attributes.tsx b/tracingganttchart/src/TracingGanttChart/DetailPane/Attributes.tsx
index 6bf0f109..ba47ebb7 100644
--- a/tracingganttchart/src/TracingGanttChart/DetailPane/Attributes.tsx
+++ b/tracingganttchart/src/TracingGanttChart/DetailPane/Attributes.tsx
@@ -34,21 +34,44 @@ export function TraceAttributes(props: TraceAttributesProps): ReactElement {
+ {span.kind && }
+ {span.status.code && }
+ {span.status.message && }
-
+
{span.attributes.length > 0 && (
<>
+
a.key.localeCompare(b.key))}
/>
+ >
+ )}
+
+ {span.resource.attributes.length > 0 && (
+ <>
+ a.key.localeCompare(b.key))}
+ />
+ >
+ )}
+
+ {(span.scope.name || span.scope.version || (span.scope.attributes && span.scope.attributes.length > 0)) && (
+ <>
+
+
+ {span.scope.name && }
+ {span.scope.version && }
+ a.key.localeCompare(b.key))}
+ />
+
>
)}
- a.key.localeCompare(b.key))}
- />
>
);
}