@perses-dev/tempo-plugin 0.47.0 → 0.48.0-rc0

package/dist/cjs/components/TraceQLEditor.js

@@ -0,0 +1,98 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TraceQLEditor", {
+    enumerable: true,
+    get: function() {
+        return TraceQLEditor;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _reactcodemirror = /*#__PURE__*/ _interop_require_wildcard(require("@uiw/react-codemirror"));
+const _core = require("@perses-dev/core");
+const _TraceQLExtension = require("./TraceQLExtension");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function TraceQLEditor({ completeConfig, ...rest }) {
+    const theme = (0, _material.useTheme)();
+    const isDarkMode = theme.palette.mode === 'dark';
+    const traceQLExtension = (0, _react.useMemo)(()=>{
+        return (0, _TraceQLExtension.TraceQLExtension)(completeConfig);
+    }, [
+        completeConfig
+    ]);
+    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 : '')
+        },
+        extensions: [
+            _reactcodemirror.EditorView.lineWrapping,
+            traceQLExtension
+        ]
+    });
+}

package/dist/cjs/components/TraceQLExtension.js

@@ -0,0 +1,73 @@
+// Copyright 2024 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TraceQLExtension", {
+    enumerable: true,
+    get: function() {
+        return TraceQLExtension;
+    }
+});
+const _language = require("@codemirror/language");
+const _lezertraceql = require("@grafana/lezer-traceql");
+const _tempodatasource = require("../plugins/tempo-datasource");
+const _highlight = require("./highlight");
+const _complete = require("./complete");
+function traceQLLanguage() {
+    return _language.LRLanguage.define({
+        parser: _lezertraceql.parser.configure({
+            props: [
+                _highlight.traceQLHighlight
+            ]
+        }),
+        languageData: {
+            closeBrackets: {
+                brackets: [
+                    '(',
+                    '[',
+                    '{',
+                    "'",
+                    '"',
+                    '`'
+                ]
+            },
+            commentTokens: {
+                line: '//'
+            }
+        }
+    });
+}
+function getTempoClient(completionCfg) {
+    if (completionCfg.client) {
+        return completionCfg.client;
+    }
+    if (completionCfg.endpoint) {
+        return _tempodatasource.TempoDatasource.createClient({
+            directUrl: completionCfg.endpoint
+        }, {});
+    }
+    return undefined;
+}
+function TraceQLExtension(completionCfg) {
+    const tempoClient = getTempoClient(completionCfg);
+    const language = traceQLLanguage();
+    const completion = language.data.of({
+        autocomplete: (ctx)=>(0, _complete.complete)(ctx, tempoClient).catch((e)=>console.error('error during TraceQL auto-complete', e))
+    });
+    return [
+        language,
+        completion
+    ];
+}

package/dist/cjs/components/complete.js

@@ -0,0 +1,322 @@
+// Copyright 2024 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    complete: function() {
+        return complete;
+    },
+    identifyCompletions: function() {
+        return identifyCompletions;
+    }
+});
+const _language = require("@codemirror/language");
+const _lezertraceql = require("@grafana/lezer-traceql");
+async function complete({ state, pos }, client) {
+    // First, identify the completion scopes, for example Scopes() and TagName(scope=intrinsic)
+    const completions = identifyCompletions(state, pos, (0, _language.syntaxTree)(state));
+    if (!completions) {
+        // No completion scopes found for current cursor position.
+        return null;
+    }
+    // Then, retrieve completion options for all identified scopes (from the Tempo API).
+    const options = await retrieveOptions(completions.scopes, client);
+    return {
+        options,
+        from: completions.from,
+        to: completions.to
+    };
+}
+function identifyCompletions(state, pos, tree) {
+    const node = tree.resolveInner(pos, -1);
+    switch(node.type.id){
+        case _lezertraceql.SpansetFilter:
+            var _node_firstChild;
+            // autocomplete {
+            // autocomplete {}
+            // do not autocomplete if cursor is after } or { status=ok }
+            if ((node.firstChild === null || ((_node_firstChild = node.firstChild) === null || _node_firstChild === void 0 ? void 0 : _node_firstChild.type.id) === 0) && !state.sliceDoc(node.from, pos).includes('}')) {
+                return {
+                    scopes: [
+                        {
+                            kind: 'Scopes'
+                        },
+                        {
+                            kind: 'TagName',
+                            scope: 'intrinsic'
+                        }
+                    ],
+                    from: pos
+                };
+            }
+            break;
+        case _lezertraceql.FieldExpression:
+            // autocomplete { status=ok &&
+            return {
+                scopes: [
+                    {
+                        kind: 'Scopes'
+                    },
+                    {
+                        kind: 'TagName',
+                        scope: 'intrinsic'
+                    }
+                ],
+                from: pos
+            };
+        case _lezertraceql.AttributeField:
+            var _node_firstChild1, _node_firstChild2;
+            // autocomplete { resource.
+            if (((_node_firstChild1 = node.firstChild) === null || _node_firstChild1 === void 0 ? void 0 : _node_firstChild1.type.id) === _lezertraceql.Resource) {
+                return {
+                    scopes: [
+                        {
+                            kind: 'TagName',
+                            scope: 'resource'
+                        }
+                    ],
+                    from: pos
+                };
+            }
+            // autocomplete { span.
+            if (((_node_firstChild2 = node.firstChild) === null || _node_firstChild2 === void 0 ? void 0 : _node_firstChild2.type.id) === _lezertraceql.Span) {
+                return {
+                    scopes: [
+                        {
+                            kind: 'TagName',
+                            scope: 'span'
+                        }
+                    ],
+                    from: pos
+                };
+            }
+            // autocomplete { .
+            if (state.sliceDoc(node.from, node.to) === '.') {
+                return {
+                    scopes: [
+                        {
+                            kind: 'TagName',
+                            scope: 'resource'
+                        },
+                        {
+                            kind: 'TagName',
+                            scope: 'span'
+                        }
+                    ],
+                    from: pos
+                };
+            }
+            break;
+        case _lezertraceql.Identifier:
+            var _node_parent;
+            if (((_node_parent = node.parent) === null || _node_parent === void 0 ? void 0 : _node_parent.type.id) === _lezertraceql.AttributeField) {
+                var _node_parent_firstChild, _node_parent1, _node_parent_firstChild1, _node_parent2, _node_parent_firstChild2, _node_parent3;
+                const text = state.sliceDoc(node.parent.from, node.parent.to);
+                // autocomplete { span:s
+                // only intrinsic fields can have a : in the name.
+                if (text.includes(':')) {
+                    return {
+                        scopes: [
+                            {
+                                kind: 'TagName',
+                                scope: 'intrinsic'
+                            }
+                        ],
+                        from: node.parent.from
+                    };
+                }
+                // autocomplete { resource.s
+                if (((_node_parent1 = node.parent) === null || _node_parent1 === void 0 ? void 0 : (_node_parent_firstChild = _node_parent1.firstChild) === null || _node_parent_firstChild === void 0 ? void 0 : _node_parent_firstChild.type.id) === _lezertraceql.Resource) {
+                    return {
+                        scopes: [
+                            {
+                                kind: 'TagName',
+                                scope: 'resource'
+                            }
+                        ],
+                        from: node.from
+                    };
+                }
+                // autocomplete { span.s
+                if (((_node_parent2 = node.parent) === null || _node_parent2 === void 0 ? void 0 : (_node_parent_firstChild1 = _node_parent2.firstChild) === null || _node_parent_firstChild1 === void 0 ? void 0 : _node_parent_firstChild1.type.id) === _lezertraceql.Span) {
+                    return {
+                        scopes: [
+                            {
+                                kind: 'TagName',
+                                scope: 'span'
+                            }
+                        ],
+                        from: node.from
+                    };
+                }
+                // autocomplete { .s
+                if (((_node_parent3 = node.parent) === null || _node_parent3 === void 0 ? void 0 : (_node_parent_firstChild2 = _node_parent3.firstChild) === null || _node_parent_firstChild2 === void 0 ? void 0 : _node_parent_firstChild2.type.id) === _lezertraceql.Identifier) {
+                    return {
+                        scopes: [
+                            {
+                                kind: 'TagName',
+                                scope: 'resource'
+                            },
+                            {
+                                kind: 'TagName',
+                                scope: 'span'
+                            }
+                        ],
+                        from: node.from
+                    };
+                }
+            }
+            break;
+        case _lezertraceql.FieldOp:
+            var _node_parent_firstChild3, _node_parent4;
+            // autocomplete { status=
+            // autocomplete { span.http.method=
+            if (((_node_parent4 = node.parent) === null || _node_parent4 === void 0 ? void 0 : (_node_parent_firstChild3 = _node_parent4.firstChild) === null || _node_parent_firstChild3 === void 0 ? void 0 : _node_parent_firstChild3.type.id) === _lezertraceql.FieldExpression) {
+                const fieldExpr = node.parent.firstChild;
+                const attribute = state.sliceDoc(fieldExpr.from, fieldExpr.to);
+                return {
+                    scopes: [
+                        {
+                            kind: 'TagValue',
+                            tag: attribute,
+                            quotes: true
+                        }
+                    ],
+                    from: pos
+                };
+            }
+            break;
+        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) {
+                const fieldExpr = node.parent.parent.parent.firstChild;
+                const attribute = state.sliceDoc(fieldExpr.from, fieldExpr.to);
+                return {
+                    scopes: [
+                        {
+                            kind: 'TagValue',
+                            tag: attribute
+                        }
+                    ],
+                    from: node.from + 1
+                }; // node.from+1 to ignore leading "
+            }
+            break;
+        case 0 /* error node */ :
+            var _node_prevSibling, _node_parent_firstChild4, _node_parent6, _node_parent7, _node_parent8;
+            // autocomplete { status=e
+            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);
+                return {
+                    scopes: [
+                        {
+                            kind: 'TagValue',
+                            tag: attribute
+                        }
+                    ],
+                    from: node.from
+                };
+            }
+            // autocomplete { s
+            // autocomplete { status=ok && s
+            if (((_node_parent7 = node.parent) === null || _node_parent7 === void 0 ? void 0 : _node_parent7.type.id) === _lezertraceql.SpansetFilter || ((_node_parent8 = node.parent) === null || _node_parent8 === void 0 ? void 0 : _node_parent8.type.id) === _lezertraceql.FieldExpression) {
+                return {
+                    scopes: [
+                        {
+                            kind: 'Scopes'
+                        },
+                        {
+                            kind: 'TagName',
+                            scope: 'intrinsic'
+                        }
+                    ],
+                    from: node.from
+                };
+            }
+            break;
+    }
+}
+/**
+ * Retrieve all completion options based on the previously identified completion scopes.
+ */ async function retrieveOptions(completions, client) {
+    const results = [];
+    for (const completion of completions){
+        switch(completion.kind){
+            case 'Scopes':
+                results.push(Promise.resolve([
+                    {
+                        label: 'span'
+                    },
+                    {
+                        label: 'resource'
+                    }
+                ]));
+                break;
+            case 'TagName':
+                if (client) {
+                    results.push(completeTagName(client, completion.scope));
+                }
+                break;
+            case 'TagValue':
+                if (client) {
+                    results.push(completeTagValue(client, completion.tag, completion.quotes));
+                }
+                break;
+        }
+    }
+    // Retrieve options concurrently
+    // e.g. for unscoped attribute fields, retrieve list of span and resource attributes concurrently.
+    const options = await Promise.all(results);
+    return options.flat();
+}
+async function completeTagName(client, scope) {
+    const response = await client.searchTags({
+        scope
+    });
+    return response.scopes.flatMap((scope)=>scope.tags).map((tag)=>({
+            label: tag
+        }));
+}
+async function completeTagValue(client, tag, quotes) {
+    const response = await client.searchTagValues({
+        tag
+    });
+    const completions = [];
+    for (const { type, value } of response.tagValues){
+        switch(type){
+            case 'string':
+                completions.push({
+                    displayLabel: value,
+                    label: quotes ? `"${value}"` : value
+                });
+                break;
+            case 'keyword':
+            case 'int':
+                completions.push({
+                    label: value
+                });
+                break;
+        }
+    }
+    return completions;
+}

package/dist/cjs/components/highlight.js

@@ -0,0 +1,41 @@
+// Copyright 2024 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "traceQLHighlight", {
+    enumerable: true,
+    get: function() {
+        return traceQLHighlight;
+    }
+});
+const _highlight = require("@lezer/highlight");
+const traceQLHighlight = (0, _highlight.styleTags)({
+    LineComment: _highlight.tags.comment,
+    'Parent Resource Span Identifier': _highlight.tags.labelName,
+    IntrinsicField: _highlight.tags.labelName,
+    String: _highlight.tags.string,
+    'Integer Float Duration': _highlight.tags.number,
+    Static: _highlight.tags.literal,
+    'Aggregate AggregateExpression': _highlight.tags.function(_highlight.tags.keyword),
+    'And Or': _highlight.tags.logicOperator,
+    'Gt Lt Desc Anc tilde ExperimentalOp': _highlight.tags.bitwiseOperator,
+    ComparisonOp: _highlight.tags.compareOperator,
+    Pipe: _highlight.tags.operator,
+    ScalarOp: _highlight.tags.arithmeticOperator,
+    '( )': _highlight.tags.paren,
+    '[ ]': _highlight.tags.squareBracket,
+    '{ }': _highlight.tags.brace,
+    '⚠': _highlight.tags.invalid
+});

package/dist/cjs/components/index.js

@@ -0,0 +1,30 @@
+// Copyright 2024 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_export_star(require("./TraceQLEditor"), exports);
+function _export_star(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
+    });
+    return from;
+}

package/dist/cjs/index.js

@@ -32,6 +32,7 @@ const _tempodatasource = require("./plugins/tempo-datasource");
 const _TempoTraceQuery = require("./plugins/tempo-trace-query/TempoTraceQuery");
 _export_star(require("./model/tempo-client"), exports);
 _export_star(require("./model/tempo-selectors"), exports);
+_export_star(require("./components/TraceQLExtension"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/dist/cjs/model/tempo-client.js

@@ -24,14 +24,20 @@ _export(exports, {
     executeRequest: function() {
         return executeRequest;
     },
-    searchTraceID: function() {
-        return searchTraceID;
+    query: function() {
+        return query;
     },
-    searchTraceQuery: function() {
-        return searchTraceQuery;
+    search: function() {
+        return search;
     },
-    searchTraceQueryFallback: function() {
-        return searchTraceQueryFallback;
+    searchTagValues: function() {
+        return searchTagValues;
+    },
+    searchTags: function() {
+        return searchTags;
+    },
+    searchWithFallback: function() {
+        return searchWithFallback;
     }
 });
 const _core = require("@perses-dev/core");
@@ -53,16 +59,16 @@ function fetchWithGet(apiURI, params, queryOptions) {
     };
     return executeRequest(url, init);
 }
-function searchTraceQuery(params, queryOptions) {
-    return fetchWithGet(`/api/search`, params, queryOptions);
+function search(params, queryOptions) {
+    return fetchWithGet('/api/search', params, queryOptions);
 }
-function searchTraceID(traceID, queryOptions) {
-    return fetchWithGet(`/api/traces/${traceID}`, null, queryOptions);
+function query(params, queryOptions) {
+    return fetchWithGet(`/api/traces/${encodeURIComponent(params.traceId)}`, null, queryOptions);
 }
-async function searchTraceQueryFallback(params, queryOptions) {
+async function searchWithFallback(params, queryOptions) {
     var _searchResponse_traces_;
     // Get a list of traces that satisfy the query.
-    const searchResponse = await searchTraceQuery(params, queryOptions);
+    const searchResponse = await search(params, queryOptions);
     if (!searchResponse.traces || searchResponse.traces.length === 0) {
         return {
             traces: []
@@ -76,7 +82,9 @@ async function searchTraceQueryFallback(params, queryOptions) {
     return {
         traces: await Promise.all(searchResponse.traces.map(async (trace)=>{
             const serviceStats = {};
-            const searchTraceIDResponse = await searchTraceID(trace.traceID, queryOptions);
+            const searchTraceIDResponse = await query({
+                traceId: trace.traceID
+            }, queryOptions);
             // For every trace, get the full trace, and find the number of spans and errors.
             for (const batch of searchTraceIDResponse.batches){
                 let serviceName = '?';
@@ -109,3 +117,10 @@ async function searchTraceQueryFallback(params, queryOptions) {
         }))
     };
 }
+function searchTags(params, queryOptions) {
+    return fetchWithGet('/api/v2/search/tags', params, queryOptions);
+}
+function searchTagValues(params, queryOptions) {
+    const { tag, ...rest } = params;
+    return fetchWithGet(`/api/v2/search/tag/${encodeURIComponent(tag)}/values`, rest, queryOptions);
+}