feat: show status message, status code string, span kind in trace det… (#5428)

* feat: show status message, status code string, span kind in trace details

* chore: update tests

* chore: update snapshots

frontend/src/container/GantChart/utils.ts

@@ -124,6 +124,9 @@ const getSpanWithoutChildren = (
 	value: span.value,
 	event: span.event,
 	hasError: span.hasError,
+	spanKind: span.spanKind,
+	statusCodeString: span.statusCodeString,
+	statusMessage: span.statusMessage,
 });
 
 export const isSpanPresentInSearchString = (

frontend/src/container/TraceDetail/SelectedSpanDetails/index.tsx

@@ -1,4 +1,4 @@
-import { Button, Modal, Tabs, Typography } from 'antd';
+import { Button, Modal, Tabs, Tooltip, Typography } from 'antd';
 import Editor from 'components/Editor';
 import { StyledSpace } from 'components/Styled';
 import { QueryParams } from 'constants/query';
@@ -102,8 +102,7 @@ function SelectedSpanDetails(props: SelectedSpanDetailsProps): JSX.Element {
 						marginTop: '16px',
 					}}
 				>
-					{' '}
-					Details for selected Span{' '}
+					Details for selected Span
 				</Typography.Text>
 
 				<Typography.Text style={{ fontWeight: 700 }}>Service</Typography.Text>
@@ -114,6 +113,30 @@ function SelectedSpanDetails(props: SelectedSpanDetailsProps): JSX.Element {
 
 				<Typography>{tree.name}</Typography>
 
+				<Typography.Text style={{ fontWeight: 700 }}>SpanKind</Typography.Text>
+
+				<Typography>{tree.spanKind}</Typography>
+
+				<Typography.Text style={{ fontWeight: 700 }}>
+					StatusCodeString
+				</Typography.Text>
+
+				<Tooltip placement="left" title={tree.statusCodeString}>
+					<Typography>{tree.statusCodeString}</Typography>
+				</Tooltip>
+
+				{tree.statusMessage && (
+					<>
+						<Typography.Text style={{ fontWeight: 700 }}>
+							StatusMessage
+						</Typography.Text>
+
+						<Tooltip placement="left" title={tree.statusMessage}>
+							<Typography>{tree.statusMessage}</Typography>
+						</Tooltip>
+					</>
+				)}
+
 				<Button size="small" style={{ marginTop: '8px' }} onClick={onLogsHandler}>
 					Go to Related logs
 				</Button>

frontend/src/container/TraceDetail/utils.test.ts

@@ -13,6 +13,9 @@ describe('traces/getTreeLevelsCount', () => {
 		children,
 		serviceName: '',
 		serviceColour: '',
+		spanKind: '',
+		statusCodeString: '',
+		statusMessage: '',
 	});
 
 	test('should return 0 for empty tree', () => {

frontend/src/container/TraceFlameGraph/__tests__/TraceFlameGraph.test.tsx

@@ -37,6 +37,9 @@ test('loads and displays greeting', () => {
 						event: [],
 						hasError: false,
 						parent: undefined,
+						spanKind: '',
+						statusCodeString: '',
+						statusMessage: '',
 					},
 				}}
 			/>

frontend/src/lib/__fixtures__/getRandomColor.ts

@@ -16,6 +16,9 @@ const spans: Span[] = [
 		[''],
 		[''],
 		false,
+		'Server',
+		'Unset',
+		'Lorem Ipsum',
 	],
 	[
 		2,
@@ -30,6 +33,9 @@ const spans: Span[] = [
 		[''],
 		[''],
 		false,
+		'Server2',
+		'Unset2',
+		'Lorem Ipsum2',
 	],
 	[
 		3,
@@ -44,6 +50,9 @@ const spans: Span[] = [
 		[''],
 		[''],
 		false,
+		'Server3',
+		'Unset3',
+		'Lorem Ipsum3',
 	],
 ];
 

frontend/src/types/api/trace/getTraceItem.ts

@@ -33,6 +33,9 @@ export type Span = [
 	string[],
 	string[],
 	boolean,
+	string,
+	string,
+	string,
 ];
 
 export interface ITraceTree {
@@ -49,6 +52,9 @@ export interface ITraceTree {
 	hasError?: boolean;
 	event?: ITraceEvents[];
 	isMissing?: boolean;
+	spanKind: string;
+	statusCodeString: string;
+	statusMessage: string;
 	childReferences?: Record<string, string>[];
 	nonChildReferences?: Record<string, string>[];
 	// For internal use

frontend/src/utils/__tests__/__snapshots__/spanToTree.test.ts.snap

@@ -49,7 +49,10 @@ Object {
               "nonChildReferences": Array [],
               "serviceColour": "",
               "serviceName": "frontend",
+              "spanKind": "Lorem Ipsum2",
               "startTime": 1657275433246,
+              "statusCodeString": "Unset2",
+              "statusMessage": "Server2",
               "tags": Array [
                 Object {
                   "key": "host.name.span3",
@@ -78,7 +81,10 @@ Object {
           "nonChildReferences": Array [],
           "serviceColour": "",
           "serviceName": "frontend",
+          "spanKind": "Lorem Ipsum1",
           "startTime": 1657275433246,
+          "statusCodeString": "Unset1",
+          "statusMessage": "Server1",
           "tags": Array [
             Object {
               "key": "host.name.span2",
@@ -106,7 +112,10 @@ Object {
       "nonChildReferences": Array [],
       "serviceColour": "",
       "serviceName": "frontend",
+      "spanKind": "Lorem Ipsum",
       "startTime": 1657275433246,
+      "statusCodeString": "Unset",
+      "statusMessage": "Server",
       "tags": Array [
         Object {
           "key": "host.name.span1",
@@ -152,7 +161,10 @@ Object {
           "nonChildReferences": Array [],
           "serviceColour": "",
           "serviceName": "frontend",
+          "spanKind": "Lorem Ipsum2",
           "startTime": 1657275433246,
+          "statusCodeString": "Unset2",
+          "statusMessage": "Server2",
           "tags": Array [
             Object {
               "key": "host.name.span3",
@@ -168,7 +180,10 @@ Object {
       "name": "Missing Span (span_2)",
       "serviceColour": "",
       "serviceName": "",
+      "spanKind": "",
       "startTime": null,
+      "statusCodeString": "",
+      "statusMessage": "",
       "tags": Array [],
       "time": null,
       "value": null,
@@ -201,7 +216,10 @@ Object {
       "nonChildReferences": Array [],
       "serviceColour": "",
       "serviceName": "frontend",
+      "spanKind": "Lorem Ipsum",
       "startTime": 1657275433246,
+      "statusCodeString": "Unset",
+      "statusMessage": "Server",
       "tags": Array [
         Object {
           "key": "host.name.span1",

frontend/src/utils/fixtures/TraceData.ts

@@ -16,6 +16,9 @@ export const TraceData: Span[] = [
 			'{"timeUnixNano":1657275433246142000,"attributeMap":{"event":"HTTP request received S1","level":"info","method":"GET","url":"/dispatch?customer=392\\u0026nonse=0.015296363321630757"}}',
 		],
 		false,
+		'Server',
+		'Unset',
+		'Lorem Ipsum',
 	],
 	[
 		1657275433246,
@@ -32,6 +35,9 @@ export const TraceData: Span[] = [
 			'{"timeUnixNano":1657275433246142000,"attributeMap":{"event":"HTTP request received S2","level":"info","method":"GET","url":"/dispatch?customer=392\\u0026nonse=0.015296363321630757"}}',
 		],
 		false,
+		'Server1',
+		'Unset1',
+		'Lorem Ipsum1',
 	],
 	[
 		1657275433246,
@@ -48,5 +54,8 @@ export const TraceData: Span[] = [
 			'{"timeUnixNano":1657275433246142000,"attributeMap":{"event":"HTTP request received S3","level":"info","method":"GET","url":"/dispatch?customer=392\\u0026nonse=0.015296363321630757"}}',
 		],
 		false,
+		'Server2',
+		'Unset2',
+		'Lorem Ipsum2',
 	],
 ];

frontend/src/utils/spanToTree.ts

@@ -71,6 +71,9 @@ export const spanToTreeUtil = (inputSpanList: Span[]): ITraceForest => {
 					time: null as never,
 					value: null as never,
 					isMissing: true,
+					statusMessage: '',
+					statusCodeString: '',
+					spanKind: '',
 				};
 			}
 		});
@@ -93,6 +96,9 @@ export const spanToTreeUtil = (inputSpanList: Span[]): ITraceForest => {
 			event: span[10]?.map((e) => JSON.parse(e || '{}') || {}),
 			childReferences,
 			nonChildReferences,
+			statusMessage: span[12],
+			statusCodeString: span[13],
+			spanKind: span[14],
 		};
 		spanMap[span[1]] = spanObject;
 	});