[ENHANCEMENT] TracingGanttChart: show span kind, status and scope in attribute pane

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();
+  });
 });

tracingganttchart/src/TracingGanttChart/DetailPane/Attributes.tsx

@@ -34,21 +34,44 @@ export function TraceAttributes(props: TraceAttributesProps): ReactElement {
         <AttributeItem name="span ID" value={span.spanId} />
         <AttributeItem name="start" value={formatDuration(span.startTimeUnixMs - trace.startTimeUnixMs)} />
         <AttributeItem name="duration" value={formatDuration(span.endTimeUnixMs - span.startTimeUnixMs)} />
+        {span.kind && <AttributeItem name="kind" value={span.kind} />}
+        {span.status.code && <AttributeItem name="status code" value={span.status.code} />}
+        {span.status.message && <AttributeItem name="status message" value={span.status.message} />}
       </List>
-      <Divider />
+
       {span.attributes.length > 0 && (
         <>
+          <Divider />
           <AttributeList
             customLinks={customLinks}
             attributes={span.attributes.toSorted((a, b) => a.key.localeCompare(b.key))}
           />
+        </>
+      )}
+
+      {span.resource.attributes.length > 0 && (
+        <>
           <Divider />
+          <AttributeList
+            customLinks={customLinks}
+            attributes={span.resource.attributes.toSorted((a, b) => a.key.localeCompare(b.key))}
+          />
+        </>
+      )}
+
+      {(span.scope.name || span.scope.version || (span.scope.attributes && span.scope.attributes.length > 0)) && (
+        <>
+          <Divider />
+          <List>
+            {span.scope.name && <AttributeItem name="scope name" value={span.scope.name} />}
+            {span.scope.version && <AttributeItem name="scope version" value={span.scope.version} />}
+            <AttributeItems
+              customLinks={customLinks}
+              attributes={(span.scope.attributes ?? []).toSorted((a, b) => a.key.localeCompare(b.key))}
+            />
+          </List>
         </>
       )}
-      <AttributeList
-        customLinks={customLinks}
-        attributes={span.resource.attributes.toSorted((a, b) => a.key.localeCompare(b.key))}
-      />
     </>
   );
 }