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

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/index.js

@@ -30,8 +30,7 @@ _export(exports, {
 });
 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("./model"), exports);
 _export_star(require("./components/TraceQLExtension"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {

package/dist/cjs/model/index.js

@@ -17,7 +17,7 @@ Object.defineProperty(exports, "__esModule", {
 _export_star(require("./tempo-client"), exports);
 _export_star(require("./tempo-selectors"), exports);
 _export_star(require("./trace-query-model"), exports);
-_export_star(require("./types"), exports);
+_export_star(require("./api-types"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

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