@perses-dev/tempo-plugin 0.48.0 → 0.49.0-rc.0

package/dist/cjs/components/TraceQLEditor.js

@@ -75,24 +75,65 @@ function TraceQLEditor({ completeConfig, ...rest }) {
     }, [
         completeConfig
     ]);
+    const codemirrorTheme = (0, _react.useMemo)(()=>{
+        // https://github.com/mui/material-ui/blob/v5.16.7/packages/mui-material/src/OutlinedInput/OutlinedInput.js#L43
+        const borderColor = theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';
+        return _reactcodemirror.EditorView.theme({
+            '&': {
+                backgroundColor: 'transparent !important',
+                border: `1px solid ${borderColor}`,
+                borderRadius: `${theme.shape.borderRadius}px`
+            },
+            '&.cm-focused.cm-editor': {
+                outline: 'none'
+            },
+            '.cm-content': {
+                padding: '8px'
+            }
+        });
+    }, [
+        theme
+    ]);
     var _rest_value;
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactcodemirror.default, {
-        ...rest,
-        style: {
-            border: `1px solid ${theme.palette.divider}`
-        },
-        theme: isDarkMode ? 'dark' : 'light',
-        basicSetup: {
-            highlightActiveLine: false,
-            highlightActiveLineGutter: false,
-            foldGutter: false,
-            // The explore view accepts either a TraceQL query or a Trace ID as input. The lezer grammar marks Trace IDs as invalid,
-            // therefore let's disable syntax highlighting if the input is a Trace ID.
-            syntaxHighlighting: !(0, _core.isValidTraceId)((_rest_value = rest.value) !== null && _rest_value !== void 0 ? _rest_value : '')
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+        position: "relative",
+        sx: {
+            flexGrow: 1
         },
-        extensions: [
-            _reactcodemirror.EditorView.lineWrapping,
-            traceQLExtension
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material // reproduce the same kind of input label that regular MUI TextFields have
+            .InputLabel, {
+                shrink: true,
+                sx: {
+                    position: 'absolute',
+                    top: '-6px',
+                    left: '10px',
+                    padding: '0 4px',
+                    color: theme.palette.text.primary,
+                    backgroundColor: theme.palette.background.default,
+                    zIndex: 1
+                },
+                children: "TraceQL Expression"
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactcodemirror.default, {
+                ...rest,
+                theme: isDarkMode ? 'dark' : 'light',
+                basicSetup: {
+                    lineNumbers: false,
+                    highlightActiveLine: false,
+                    highlightActiveLineGutter: false,
+                    foldGutter: false,
+                    // The explore view accepts either a TraceQL query or a Trace ID as input. The lezer grammar marks Trace IDs as invalid,
+                    // therefore let's disable syntax highlighting if the input is a Trace ID.
+                    syntaxHighlighting: !(0, _core.isValidTraceId)((_rest_value = rest.value) !== null && _rest_value !== void 0 ? _rest_value : '')
+                },
+                extensions: [
+                    _reactcodemirror.EditorView.lineWrapping,
+                    traceQLExtension,
+                    codemirrorTheme
+                ],
+                placeholder: 'Example: {span.http.method = "GET"}'
+            })
         ]
     });
 }

package/dist/cjs/components/complete.js

@@ -28,6 +28,7 @@ _export(exports, {
         return identifyCompletions;
     }
 });
+const _autocomplete = require("@codemirror/autocomplete");
 const _language = require("@codemirror/language");
 const _lezertraceql = require("@grafana/lezer-traceql");
 async function complete({ state, pos }, client) {
@@ -196,8 +197,7 @@ function identifyCompletions(state, pos, tree) {
                     scopes: [
                         {
                             kind: 'TagValue',
-                            tag: attribute,
-                            quotes: true
+                            tag: attribute
                         }
                     ],
                     from: pos
@@ -207,7 +207,8 @@ function identifyCompletions(state, pos, tree) {
         case _lezertraceql.String:
             var _node_parent_parent_parent_firstChild, _node_parent_parent_parent, _node_parent_parent, _node_parent5;
             // autocomplete { resource.service.name="
-            if (((_node_parent5 = node.parent) === null || _node_parent5 === void 0 ? void 0 : (_node_parent_parent = _node_parent5.parent) === null || _node_parent_parent === void 0 ? void 0 : (_node_parent_parent_parent = _node_parent_parent.parent) === null || _node_parent_parent_parent === void 0 ? void 0 : (_node_parent_parent_parent_firstChild = _node_parent_parent_parent.firstChild) === null || _node_parent_parent_parent_firstChild === void 0 ? void 0 : _node_parent_parent_parent_firstChild.type.id) === _lezertraceql.FieldExpression) {
+            // do not autocomplete if cursor is after closing quotes { resource.service.name=""
+            if (((_node_parent5 = node.parent) === null || _node_parent5 === void 0 ? void 0 : (_node_parent_parent = _node_parent5.parent) === null || _node_parent_parent === void 0 ? void 0 : (_node_parent_parent_parent = _node_parent_parent.parent) === null || _node_parent_parent_parent === void 0 ? void 0 : (_node_parent_parent_parent_firstChild = _node_parent_parent_parent.firstChild) === null || _node_parent_parent_parent_firstChild === void 0 ? void 0 : _node_parent_parent_parent_firstChild.type.id) === _lezertraceql.FieldExpression && !/^".*"$/.test(state.sliceDoc(node.from, pos))) {
                 const fieldExpr = node.parent.parent.parent.firstChild;
                 const attribute = state.sliceDoc(fieldExpr.from, fieldExpr.to);
                 return {
@@ -227,6 +228,8 @@ function identifyCompletions(state, pos, tree) {
             if (((_node_prevSibling = node.prevSibling) === null || _node_prevSibling === void 0 ? void 0 : _node_prevSibling.type.id) === _lezertraceql.FieldOp && ((_node_parent6 = node.parent) === null || _node_parent6 === void 0 ? void 0 : (_node_parent_firstChild4 = _node_parent6.firstChild) === null || _node_parent_firstChild4 === void 0 ? void 0 : _node_parent_firstChild4.type.id) === _lezertraceql.FieldExpression) {
                 const fieldExpr = node.parent.firstChild;
                 const attribute = state.sliceDoc(fieldExpr.from, fieldExpr.to);
+                // ignore leading " in { name="HT
+                const from = state.sliceDoc(node.from, node.from + 1) === '"' ? node.from + 1 : node.from;
                 return {
                     scopes: [
                         {
@@ -234,7 +237,7 @@ function identifyCompletions(state, pos, tree) {
                             tag: attribute
                         }
                     ],
-                    from: node.from
+                    from
                 };
             }
             // autocomplete { s
@@ -279,7 +282,7 @@ function identifyCompletions(state, pos, tree) {
                 break;
             case 'TagValue':
                 if (client) {
-                    results.push(completeTagValue(client, completion.tag, completion.quotes));
+                    results.push(completeTagValue(client, completion.tag));
                 }
                 break;
         }
@@ -297,7 +300,23 @@ async function completeTagName(client, scope) {
             label: tag
         }));
 }
-async function completeTagValue(client, tag, quotes) {
+/**
+ * Add quotes to the completion text in case quotes are not present already.
+ * This handles the following cases:
+ * { name=HTTP
+ * { name="x
+ * { name="x" where cursor is after the 'x'
+ */ function applyQuotedCompletion(view, completion, from, to) {
+    let insertText = completion.label;
+    if (view.state.sliceDoc(from - 1, from) !== '"') {
+        insertText = '"' + insertText;
+    }
+    if (view.state.sliceDoc(to, to + 1) !== '"') {
+        insertText = insertText + '"';
+    }
+    view.dispatch((0, _autocomplete.insertCompletionText)(view.state, insertText, from, to));
+}
+async function completeTagValue(client, tag) {
     const response = await client.searchTagValues({
         tag
     });
@@ -306,8 +325,8 @@ async function completeTagValue(client, tag, quotes) {
         switch(type){
             case 'string':
                 completions.push({
-                    displayLabel: value,
-                    label: quotes ? `"${value}"` : value
+                    label: value,
+                    apply: applyQuotedCompletion
                 });
                 break;
             case 'keyword':

package/dist/cjs/plugins/tempo-trace-query/TempoTraceQuery.js

@@ -27,6 +27,7 @@ const TempoTraceQuery = {
     OptionsEditorComponent: _TempoTraceQueryEditor.TempoTraceQueryEditor,
     createInitialOptions: ()=>({
             query: '',
+            limit: 20,
             datasource: undefined
         })
 };

package/dist/cjs/plugins/tempo-trace-query/TempoTraceQueryEditor.js

@@ -23,16 +23,17 @@ Object.defineProperty(exports, "TempoTraceQueryEditor", {
 const _jsxruntime = require("react/jsx-runtime");
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _immer = require("immer");
+const _material = require("@mui/material");
 const _temposelectors = require("../../model/tempo-selectors");
+const _components = require("../../components");
 const _queryeditormodel = require("./query-editor-model");
-const _DashboardTempoTraceQueryEditor = require("./DashboardTempoTraceQueryEditor");
 function TempoTraceQueryEditor(props) {
     const { onChange, value } = props;
     const { datasource } = value;
     const selectedDatasource = datasource !== null && datasource !== void 0 ? datasource : _temposelectors.DEFAULT_TEMPO;
     const { data: client } = (0, _pluginsystem.useDatasourceClient)(selectedDatasource);
-    const datasourceURL = client === null || client === void 0 ? void 0 : client.options.datasourceUrl;
     const { query, handleQueryChange, handleQueryBlur } = (0, _queryeditormodel.useQueryState)(props);
+    const { limit, handleLimitChange, handleLimitBlur, limitHasError } = (0, _queryeditormodel.useLimitState)(props);
     const handleDatasourceChange = (next)=>{
         if ((0, _temposelectors.isTempoDatasourceSelector)(next)) {
             onChange((0, _immer.produce)(value, (draft)=>{
@@ -44,12 +45,50 @@ function TempoTraceQueryEditor(props) {
         }
         throw new Error('Got unexpected non-Tempo datasource selector');
     };
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_DashboardTempoTraceQueryEditor.DashboardTempoTraceQueryEditor, {
-        selectedDatasource: selectedDatasource,
-        handleDatasourceChange: handleDatasourceChange,
-        datasourceURL: datasourceURL,
-        query: query,
-        handleQueryChange: handleQueryChange,
-        handleQueryBlur: handleQueryBlur
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+        spacing: 2,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.FormControl, {
+                margin: "dense",
+                fullWidth: false,
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.InputLabel, {
+                        id: "tempo-datasource-label",
+                        children: "Tempo Datasource"
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DatasourceSelect, {
+                        datasourcePluginKind: _temposelectors.TEMPO_DATASOURCE_KIND,
+                        value: selectedDatasource,
+                        onChange: handleDatasourceChange,
+                        labelId: "tempo-datasource-label",
+                        label: "Tempo Datasource"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                direction: "row",
+                spacing: 2,
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.TraceQLEditor, {
+                        completeConfig: {
+                            client
+                        },
+                        value: query,
+                        onChange: handleQueryChange,
+                        onBlur: handleQueryBlur
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                        label: "Max Traces",
+                        value: limit,
+                        error: limitHasError,
+                        onChange: (e)=>handleLimitChange(e.target.value),
+                        onBlur: handleLimitBlur,
+                        sx: {
+                            width: '110px'
+                        }
+                    })
+                ]
+            })
+        ]
     });
 }

package/dist/cjs/plugins/tempo-trace-query/get-trace-data.js

@@ -53,19 +53,19 @@ const getTraceData = async (spec, context)=>{
     var _spec_datasource;
     const client = await context.datasourceStore.getDatasourceClient((_spec_datasource = spec.datasource) !== null && _spec_datasource !== void 0 ? _spec_datasource : defaultTempoDatasource);
     const getQuery = ()=>{
-        // if time range not defined -- only return the query from the spec
-        if (context.absoluteTimeRange === undefined) {
-            return {
-                q: spec.query
-            };
-        }
-        // handle time range selection from UI drop down (e.g. last 5 minutes, last 1 hour )
-        const { start, end } = getUnixTimeRange(context === null || context === void 0 ? void 0 : context.absoluteTimeRange);
-        return {
-            q: spec.query,
-            start,
-            end
+        const params = {
+            q: spec.query
         };
+        // handle time range selection from UI drop down (e.g. last 5 minutes, last 1 hour )
+        if (context.absoluteTimeRange) {
+            const { start, end } = getUnixTimeRange(context.absoluteTimeRange);
+            params.start = start;
+            params.end = end;
+        }
+        if (spec.limit) {
+            params.limit = spec.limit;
+        }
+        return params;
     };
     /**
    * determine type of query:

package/dist/cjs/plugins/tempo-trace-query/query-editor-model.js

@@ -14,9 +14,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "useQueryState", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useLimitState: function() {
+        return useLimitState;
+    },
+    useQueryState: function() {
         return useQueryState;
     }
 });
@@ -51,3 +59,36 @@ function useQueryState(props) {
         handleQueryBlur
     };
 }
+function useLimitState(props) {
+    const { onChange, value } = props;
+    // TODO: reusable hook or helper util instead of duplicating from useQueryState
+    const [limit, setLimit] = (0, _react.useState)(value.limit ? value.limit.toString() : '');
+    const [lastSyncedLimit, setLastSyncedLimit] = (0, _react.useState)(value.limit);
+    if (value.limit !== lastSyncedLimit) {
+        setLimit(value.limit ? value.limit.toString() : '');
+        setLastSyncedLimit(value.limit);
+    }
+    // limit must be empty or an integer > 0
+    const limitHasError = !(limit === '' || /^[0-9]+$/.test(limit) && parseInt(limit) > 0);
+    // Update our local state as the user types
+    const handleLimitChange = (e)=>{
+        setLimit(e);
+    };
+    // Propagate changes to the panel preview component when limit TextField is blurred
+    const handleLimitBlur = ()=>{
+        if (limitHasError) {
+            return;
+        }
+        const limitVal = limit === '' ? undefined : parseInt(limit);
+        setLastSyncedLimit(limitVal);
+        onChange((0, _immer.produce)(value, (draft)=>{
+            draft.limit = limitVal;
+        }));
+    };
+    return {
+        limit,
+        handleLimitChange,
+        handleLimitBlur,
+        limitHasError
+    };
+}

package/dist/cjs/test/mock-data.js

@@ -43,6 +43,12 @@ _export(exports, {
         return MOCK_TRACE_RESPONSE_SMALL;
     }
 });
+function addParentReferences(span) {
+    for (const child of span.childSpans){
+        child.parentSpan = span;
+        addParentReferences(child);
+    }
+}
 const MOCK_TRACE_RESPONSE = {
     batches: [
         {
@@ -2452,159 +2458,175 @@ const MOCK_TRACE_DATA_SEARCHRESULT = {
         executedQueryString: 'duration > 900ms'
     }
 };
-const shopBackendResource = {
-    serviceName: 'shop-backend',
-    attributes: [
-        {
-            key: 'service.name',
-            value: {
-                stringValue: 'shop-backend'
-            }
-        }
-    ]
-};
-const authServiceResource = {
-    serviceName: 'auth-service',
-    attributes: [
-        {
-            key: 'service.name',
-            value: {
-                stringValue: 'auth-service'
-            }
-        }
-    ]
-};
-const k6scope = {
-    name: 'k6'
-};
-const span4 = {
-    resource: authServiceResource,
-    scope: k6scope,
-    childSpans: [],
-    traceId: '+9N4RSCdQ83M1BjcX5/wIQ==',
-    spanId: 'AYBIFdTlycc=',
-    parentSpanId: 'hGe8oRN3wWY=',
-    name: 'authenticate',
-    kind: 'SPAN_KIND_SERVER',
-    startTimeUnixMs: 1718122135970.602,
-    endTimeUnixMs: 1718122136107.7405,
-    attributes: [],
-    events: [],
-    status: {
-        message: 'Forbidden',
-        code: 'STATUS_CODE_ERROR'
-    }
-};
-const span3 = {
-    resource: shopBackendResource,
-    scope: k6scope,
-    childSpans: [],
-    traceId: '+9N4RSCdQ83M1BjcX5/wIQ==',
-    spanId: 'r2NxHHPjciM=',
-    parentSpanId: 'nCLrd8tcFMc=',
-    name: 'get-article',
-    kind: 'SPAN_KIND_CLIENT',
-    startTimeUnixMs: 1718122135965.2107,
-    endTimeUnixMs: 1718122136520.158,
-    attributes: [
-        {
-            key: 'http.method',
-            value: {
-                stringValue: 'DELETE'
-            }
-        }
-    ],
-    events: [],
-    status: {}
-};
-const span2 = {
-    resource: shopBackendResource,
-    scope: k6scope,
-    childSpans: [
-        span4
-    ],
-    traceId: '+9N4RSCdQ83M1BjcX5/wIQ==',
-    spanId: 'hGe8oRN3wWY=',
-    parentSpanId: 'nCLrd8tcFMc=',
-    name: 'authenticate',
-    kind: 'SPAN_KIND_CLIENT',
-    startTimeUnixMs: 1718122135954.7656,
-    endTimeUnixMs: 1718122136154.2273,
-    attributes: [
-        {
-            key: 'net.transport',
-            value: {
-                stringValue: 'ip_tcp'
-            }
-        }
-    ],
-    events: [
-        {
-            timeUnixMs: 1718122136068.6138,
-            name: 'event_k6.7W272ywYih',
+const MOCK_TRACE_DATA_TRACE = {
+    trace: {
+        rootSpan: {
+            resource: {
+                serviceName: 'shop-backend',
+                attributes: [
+                    {
+                        key: 'service.name',
+                        value: {
+                            stringValue: 'shop-backend'
+                        }
+                    }
+                ]
+            },
+            scope: {
+                name: 'k6'
+            },
+            traceId: '+9N4RSCdQ83M1BjcX5/wIQ==',
+            spanId: 'nCLrd8tcFMc=',
+            name: 'article-to-cart',
+            kind: 'SPAN_KIND_SERVER',
+            startTimeUnixMs: 1718122135898.4426,
+            endTimeUnixMs: 1718122136696.6519,
             attributes: [
                 {
-                    key: 'k6.sJekvnAr5h7vJfK',
+                    key: 'http.url',
                     value: {
-                        stringValue: 'SZ9vwpLkAzAm2Bju1VJroUlGD8u3pS'
+                        stringValue: 'https://shop-backend.local:8523/article-to-cart'
                     }
                 },
                 {
-                    key: 'k6.81JLO5NlT1lAeF1',
+                    key: 'http.status_code',
                     value: {
-                        stringValue: '4AzrPTOML11aIN3dYgbKSaAe9HErnZ'
+                        intValue: '202'
                     }
+                }
+            ],
+            events: [],
+            status: {},
+            childSpans: [
+                {
+                    resource: {
+                        serviceName: 'shop-backend',
+                        attributes: [
+                            {
+                                key: 'service.name',
+                                value: {
+                                    stringValue: 'shop-backend'
+                                }
+                            }
+                        ]
+                    },
+                    scope: {
+                        name: 'k6'
+                    },
+                    childSpans: [
+                        {
+                            resource: {
+                                serviceName: 'auth-service',
+                                attributes: [
+                                    {
+                                        key: 'service.name',
+                                        value: {
+                                            stringValue: 'auth-service'
+                                        }
+                                    }
+                                ]
+                            },
+                            scope: {
+                                name: 'k6'
+                            },
+                            childSpans: [],
+                            traceId: '+9N4RSCdQ83M1BjcX5/wIQ==',
+                            spanId: 'AYBIFdTlycc=',
+                            parentSpanId: 'hGe8oRN3wWY=',
+                            name: 'authenticate',
+                            kind: 'SPAN_KIND_SERVER',
+                            startTimeUnixMs: 1718122135970.602,
+                            endTimeUnixMs: 1718122136107.7405,
+                            attributes: [],
+                            events: [],
+                            status: {
+                                message: 'Forbidden',
+                                code: 'STATUS_CODE_ERROR'
+                            }
+                        }
+                    ],
+                    traceId: '+9N4RSCdQ83M1BjcX5/wIQ==',
+                    spanId: 'hGe8oRN3wWY=',
+                    parentSpanId: 'nCLrd8tcFMc=',
+                    name: 'authenticate',
+                    kind: 'SPAN_KIND_CLIENT',
+                    startTimeUnixMs: 1718122135954.7656,
+                    endTimeUnixMs: 1718122136154.2273,
+                    attributes: [
+                        {
+                            key: 'net.transport',
+                            value: {
+                                stringValue: 'ip_tcp'
+                            }
+                        }
+                    ],
+                    events: [
+                        {
+                            timeUnixMs: 1718122136068.6138,
+                            name: 'event_k6.7W272ywYih',
+                            attributes: [
+                                {
+                                    key: 'k6.sJekvnAr5h7vJfK',
+                                    value: {
+                                        stringValue: 'SZ9vwpLkAzAm2Bju1VJroUlGD8u3pS'
+                                    }
+                                },
+                                {
+                                    key: 'k6.81JLO5NlT1lAeF1',
+                                    value: {
+                                        stringValue: '4AzrPTOML11aIN3dYgbKSaAe9HErnZ'
+                                    }
+                                },
+                                {
+                                    key: 'k6.tdj0bfOxLndyJuN',
+                                    value: {
+                                        stringValue: 'PeMAsdQ5469IjQgGtifBA7OgfFdoMb'
+                                    }
+                                }
+                            ]
+                        }
+                    ],
+                    status: {}
                 },
                 {
-                    key: 'k6.tdj0bfOxLndyJuN',
-                    value: {
-                        stringValue: 'PeMAsdQ5469IjQgGtifBA7OgfFdoMb'
-                    }
+                    resource: {
+                        serviceName: 'shop-backend',
+                        attributes: [
+                            {
+                                key: 'service.name',
+                                value: {
+                                    stringValue: 'shop-backend'
+                                }
+                            }
+                        ]
+                    },
+                    scope: {
+                        name: 'k6'
+                    },
+                    childSpans: [],
+                    traceId: '+9N4RSCdQ83M1BjcX5/wIQ==',
+                    spanId: 'r2NxHHPjciM=',
+                    parentSpanId: 'nCLrd8tcFMc=',
+                    name: 'get-article',
+                    kind: 'SPAN_KIND_CLIENT',
+                    startTimeUnixMs: 1718122135965.2107,
+                    endTimeUnixMs: 1718122136520.158,
+                    attributes: [
+                        {
+                            key: 'http.method',
+                            value: {
+                                stringValue: 'DELETE'
+                            }
+                        }
+                    ],
+                    events: [],
+                    status: {}
                 }
             ]
         }
-    ],
-    status: {}
-};
-const span1 = {
-    resource: shopBackendResource,
-    scope: k6scope,
-    childSpans: [
-        span2,
-        span3
-    ],
-    traceId: '+9N4RSCdQ83M1BjcX5/wIQ==',
-    spanId: 'nCLrd8tcFMc=',
-    parentSpanId: undefined,
-    name: 'article-to-cart',
-    kind: 'SPAN_KIND_SERVER',
-    startTimeUnixMs: 1718122135898.4426,
-    endTimeUnixMs: 1718122136696.6519,
-    attributes: [
-        {
-            key: 'http.url',
-            value: {
-                stringValue: 'https://shop-backend.local:8523/article-to-cart'
-            }
-        },
-        {
-            key: 'http.status_code',
-            value: {
-                intValue: '202'
-            }
-        }
-    ],
-    events: [],
-    status: {}
-};
-span4.parentSpan = span2;
-span2.parentSpan = span1;
-span3.parentSpan = span1;
-const MOCK_TRACE_DATA_TRACE = {
-    trace: {
-        rootSpan: span1
     },
     metadata: {
         executedQueryString: '61a1487c461d9e08'
     }
 };
+addParentReferences(MOCK_TRACE_DATA_TRACE.trace.rootSpan);