diff --git a/frontend/src/container/GantChart/utils.ts b/frontend/src/container/GantChart/utils.ts index 0421fd40bd..7b3e1115e7 100644 --- a/frontend/src/container/GantChart/utils.ts +++ b/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 = ( diff --git a/frontend/src/container/TraceDetail/SelectedSpanDetails/index.tsx b/frontend/src/container/TraceDetail/SelectedSpanDetails/index.tsx index ce7f3372a3..39e180ee12 100644 --- a/frontend/src/container/TraceDetail/SelectedSpanDetails/index.tsx +++ b/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 Service @@ -114,6 +113,30 @@ function SelectedSpanDetails(props: SelectedSpanDetailsProps): JSX.Element { {tree.name} + SpanKind + + {tree.spanKind} + + + StatusCodeString + + + + {tree.statusCodeString} + + + {tree.statusMessage && ( + <> + + StatusMessage + + + + {tree.statusMessage} + + + )} + diff --git a/frontend/src/container/TraceDetail/utils.test.ts b/frontend/src/container/TraceDetail/utils.test.ts index 4cb20055bf..b8359916f4 100644 --- a/frontend/src/container/TraceDetail/utils.test.ts +++ b/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', () => { diff --git a/frontend/src/container/TraceFlameGraph/__tests__/TraceFlameGraph.test.tsx b/frontend/src/container/TraceFlameGraph/__tests__/TraceFlameGraph.test.tsx index adcaa3f003..c2eb3db911 100644 --- a/frontend/src/container/TraceFlameGraph/__tests__/TraceFlameGraph.test.tsx +++ b/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: '', }, }} /> diff --git a/frontend/src/lib/__fixtures__/getRandomColor.ts b/frontend/src/lib/__fixtures__/getRandomColor.ts index 2ebbecae15..0ffe3fe1fd 100644 --- a/frontend/src/lib/__fixtures__/getRandomColor.ts +++ b/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', ], ]; diff --git a/frontend/src/types/api/trace/getTraceItem.ts b/frontend/src/types/api/trace/getTraceItem.ts index 5f94e0f6d8..4d968b5000 100644 --- a/frontend/src/types/api/trace/getTraceItem.ts +++ b/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[]; nonChildReferences?: Record[]; // For internal use diff --git a/frontend/src/utils/__tests__/__snapshots__/spanToTree.test.ts.snap b/frontend/src/utils/__tests__/__snapshots__/spanToTree.test.ts.snap index c3149cf21a..49004ffc56 100644 --- a/frontend/src/utils/__tests__/__snapshots__/spanToTree.test.ts.snap +++ b/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", diff --git a/frontend/src/utils/fixtures/TraceData.ts b/frontend/src/utils/fixtures/TraceData.ts index 289e91e949..b24643dbba 100644 --- a/frontend/src/utils/fixtures/TraceData.ts +++ b/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', ], ]; diff --git a/frontend/src/utils/spanToTree.ts b/frontend/src/utils/spanToTree.ts index 35d17f0681..155f0e61c4 100644 --- a/frontend/src/utils/spanToTree.ts +++ b/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; });