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

package/dist/cjs/components/promql/format.js

@@ -0,0 +1,432 @@
+// 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.
+// Forked from https://github.com/prometheus/prometheus/blob/65f610353919b1c7b42d3776c3a95b68046a6bba/web/ui/mantine-ui/src/promql/format.tsx
+"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, {
+    formatNode: function() {
+        return formatNode;
+    },
+    labelNameList: function() {
+        return labelNameList;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _material = require("@mui/material");
+const _core = require("@perses-dev/core");
+const _ast = require("./ast");
+const _utils = require("./utils");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+// Styled components that reproduce the theming of CodeMirror:
+const PromQLCode = (0, _material.styled)('span')(()=>({
+        fontFamily: '"DejaVu Sans Mono", monospace'
+    }));
+const PromQLKeyword = (0, _material.styled)('span')(({ theme })=>({
+        color: theme.palette.mode === 'dark' ? '#e5c07b' : '#708'
+    }));
+const PromQLFunction = (0, _material.styled)('span')(({ theme })=>({
+        color: theme.palette.mode === 'dark' ? '#61afef' : '#2a2e42'
+    }));
+const PromQLMetricName = (0, _material.styled)('span')(({ theme })=>({
+        color: theme.palette.mode === 'dark' ? '#e06c75' : '#2a2e42'
+    }));
+const PromQLLabelName = (0, _material.styled)('span')(({ theme })=>({
+        color: theme.palette.mode === 'dark' ? '#61afef' : '#219'
+    }));
+const PromQLString = (0, _material.styled)('span')(({ theme })=>({
+        color: theme.palette.mode === 'dark' ? '#98c379' : '#a31515'
+    }));
+const PromQLEllipsis = (0, _material.styled)('span')(()=>({
+        color: '#aaaaaa'
+    }));
+const PromQLDuration = (0, _material.styled)('span')(({ theme })=>({
+        color: theme.palette.mode === 'dark' ? '#e5c07b' : '#09885a'
+    }));
+const PromQLNumber = (0, _material.styled)('span')(({ theme })=>({
+        color: theme.palette.mode === 'dark' ? '#e5c07b' : '#164'
+    }));
+const PromQLOperator = (0, _material.styled)('span')(({ theme })=>({
+        color: theme.palette.mode === 'dark' ? '#56b6c2' : '#708'
+    }));
+const labelNameList = (labels)=>{
+    return labels.map((l, i)=>{
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
+            children: [
+                i !== 0 && ', ',
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(PromQLLabelName, {
+                    children: l
+                })
+            ]
+        }, i);
+    });
+};
+const formatAtAndOffset = (timestamp, startOrEnd, offset)=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            timestamp !== null ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                children: [
+                    ' ',
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(PromQLOperator, {
+                        children: "@"
+                    }),
+                    " ",
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(PromQLNumber, {
+                        children: (timestamp / 1000).toFixed(3)
+                    })
+                ]
+            }) : startOrEnd !== null ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                children: [
+                    ' ',
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(PromQLOperator, {
+                        children: "@"
+                    }),
+                    " ",
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(PromQLKeyword, {
+                        children: startOrEnd
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                        children: "("
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                        children: ")"
+                    })
+                ]
+            }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {}),
+            offset === 0 ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {}) : offset > 0 ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                children: [
+                    ' ',
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(PromQLKeyword, {
+                        children: "offset"
+                    }),
+                    ' ',
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(PromQLDuration, {
+                        children: (0, _core.formatDuration)((0, _core.msToPrometheusDuration)(offset))
+                    })
+                ]
+            }) : /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                children: [
+                    ' ',
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(PromQLKeyword, {
+                        children: "offset"
+                    }),
+                    ' ',
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(PromQLDuration, {
+                        children: [
+                            "-",
+                            (0, _core.formatDuration)((0, _core.msToPrometheusDuration)(-offset))
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+const formatSelector = (node)=>{
+    const matchLabels = node.matchers.filter((m)=>!(m.name === '__name__' && m.type === _ast.matchType.equal && m.value === node.name)).map((m, i)=>/*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
+            children: [
+                i !== 0 && ',',
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(PromQLLabelName, {
+                    children: m.name
+                }),
+                m.type,
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(PromQLString, {
+                    children: [
+                        '"',
+                        (0, _utils.escapeString)(m.value),
+                        '"'
+                    ]
+                })
+            ]
+        }, i));
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(PromQLMetricName, {
+                children: node.name
+            }),
+            matchLabels.length > 0 && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                children: [
+                    '{',
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                        children: matchLabels
+                    }),
+                    '}'
+                ]
+            }),
+            node.type === _ast.nodeType.matrixSelector && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                children: [
+                    "[",
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(PromQLDuration, {
+                        children: (0, _core.formatDuration)((0, _core.msToPrometheusDuration)(node.range))
+                    }),
+                    "]"
+                ]
+            }),
+            formatAtAndOffset(node.timestamp, node.startOrEnd, node.offset)
+        ]
+    });
+};
+const ellipsis = /*#__PURE__*/ (0, _jsxruntime.jsx)(PromQLEllipsis, {
+    children: "…"
+});
+const formatNodeInternal = (node, showChildren, maxDepth)=>{
+    if (maxDepth === 0) {
+        return ellipsis;
+    }
+    const childMaxDepth = maxDepth === undefined ? undefined : maxDepth - 1;
+    switch(node.type){
+        case _ast.nodeType.aggregation:
+            return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(PromQLOperator, {
+                        children: node.op
+                    }),
+                    node.without ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                        children: [
+                            ' ',
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(PromQLKeyword, {
+                                children: "without"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                children: "("
+                            }),
+                            labelNameList(node.grouping),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                children: ")"
+                            }),
+                            ' '
+                        ]
+                    }) : node.grouping.length > 0 && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                        children: [
+                            ' ',
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(PromQLKeyword, {
+                                children: "by"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                children: "("
+                            }),
+                            labelNameList(node.grouping),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                children: ")"
+                            }),
+                            ' '
+                        ]
+                    }),
+                    showChildren && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                children: "("
+                            }),
+                            node.param !== null && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                                children: [
+                                    formatNode(node.param, showChildren, childMaxDepth),
+                                    ", "
+                                ]
+                            }),
+                            formatNode(node.expr, showChildren, childMaxDepth),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                children: ")"
+                            })
+                        ]
+                    })
+                ]
+            });
+        case _ast.nodeType.subquery:
+            return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                children: [
+                    showChildren && formatNode(node.expr, showChildren, childMaxDepth),
+                    "[",
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(PromQLDuration, {
+                        children: (0, _core.formatDuration)((0, _core.msToPrometheusDuration)(node.range))
+                    }),
+                    ":",
+                    node.step !== 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(PromQLDuration, {
+                        children: (0, _core.formatDuration)((0, _core.msToPrometheusDuration)(node.step))
+                    }),
+                    "]",
+                    formatAtAndOffset(node.timestamp, node.startOrEnd, node.offset)
+                ]
+            });
+        case _ast.nodeType.parenExpr:
+            return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                        children: "("
+                    }),
+                    showChildren && formatNode(node.expr, showChildren, childMaxDepth),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                        children: ")"
+                    })
+                ]
+            });
+        case _ast.nodeType.call:
+            {
+                const children = childMaxDepth === undefined || childMaxDepth > 0 ? node.args.map((arg, i)=>/*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
+                        children: [
+                            i !== 0 && ', ',
+                            formatNode(arg, showChildren)
+                        ]
+                    }, i)) : node.args.length > 0 ? ellipsis : '';
+                return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(PromQLFunction, {
+                            children: node.func.name
+                        }),
+                        showChildren && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                    children: "("
+                                }),
+                                children,
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                    children: ")"
+                                })
+                            ]
+                        })
+                    ]
+                });
+            }
+        case _ast.nodeType.matrixSelector:
+            return formatSelector(node);
+        case _ast.nodeType.vectorSelector:
+            return formatSelector(node);
+        case _ast.nodeType.numberLiteral:
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(PromQLNumber, {
+                children: node.val
+            });
+        case _ast.nodeType.stringLiteral:
+            return /*#__PURE__*/ (0, _jsxruntime.jsxs)(PromQLString, {
+                children: [
+                    '"',
+                    (0, _utils.escapeString)(node.val),
+                    '"'
+                ]
+            });
+        case _ast.nodeType.unaryExpr:
+            return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(PromQLOperator, {
+                        children: node.op
+                    }),
+                    showChildren && formatNode(node.expr, showChildren, childMaxDepth)
+                ]
+            });
+        case _ast.nodeType.binaryExpr:
+            {
+                let matching = /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {});
+                let grouping = /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {});
+                const vm = node.matching;
+                if (vm !== null && (vm.labels.length > 0 || vm.on)) {
+                    if (vm.on) {
+                        matching = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                            children: [
+                                ' ',
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(PromQLKeyword, {
+                                    children: "on"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                    children: "("
+                                }),
+                                labelNameList(vm.labels),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                    children: ")"
+                                })
+                            ]
+                        });
+                    } else {
+                        matching = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                            children: [
+                                ' ',
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(PromQLKeyword, {
+                                    children: "ignoring"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                    children: "("
+                                }),
+                                labelNameList(vm.labels),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                    children: ")"
+                                })
+                            ]
+                        });
+                    }
+                    if (vm.card === _ast.vectorMatchCardinality.manyToOne || vm.card === _ast.vectorMatchCardinality.oneToMany) {
+                        grouping = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsxs)(PromQLKeyword, {
+                                    children: [
+                                        ' ',
+                                        "group_",
+                                        vm.card === _ast.vectorMatchCardinality.manyToOne ? 'left' : 'right'
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                    children: "("
+                                }),
+                                labelNameList(vm.include),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                    children: ")"
+                                })
+                            ]
+                        });
+                    }
+                }
+                return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                    children: [
+                        showChildren && formatNode((0, _utils.maybeParenthesizeBinopChild)(node.op, node.lhs), showChildren, childMaxDepth),
+                        ' ',
+                        [
+                            'atan2',
+                            'and',
+                            'or',
+                            'unless'
+                        ].includes(node.op) ? /*#__PURE__*/ (0, _jsxruntime.jsx)(PromQLOperator, {
+                            children: node.op
+                        }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(PromQLOperator, {
+                            children: node.op
+                        }),
+                        node.bool && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                            children: [
+                                ' ',
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(PromQLKeyword, {
+                                    children: "bool"
+                                })
+                            ]
+                        }),
+                        matching,
+                        grouping,
+                        ' ',
+                        showChildren && formatNode((0, _utils.maybeParenthesizeBinopChild)(node.op, node.rhs), showChildren, childMaxDepth)
+                    ]
+                });
+            }
+        case _ast.nodeType.placeholder:
+            // TODO: Include possible children of placeholders somehow?
+            return ellipsis;
+        default:
+            throw new Error('unsupported node type');
+    }
+};
+const formatNode = (node, showChildren, maxDepth)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(PromQLCode, {
+        children: formatNodeInternal(node, showChildren, maxDepth)
+    });

package/dist/cjs/components/promql/utils.js

@@ -0,0 +1,109 @@
+// 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.
+// Forked from https://github.com/prometheus/prometheus/blob/65f610353919b1c7b42d3776c3a95b68046a6bba/web/ui/mantine-ui/src/promql/utils.ts
+"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, {
+    escapeString: function() {
+        return escapeString;
+    },
+    getNodeChildren: function() {
+        return getNodeChildren;
+    },
+    maybeParenthesizeBinopChild: function() {
+        return maybeParenthesizeBinopChild;
+    }
+});
+const _ast = require("./ast");
+const binOpPrecedence = {
+    [_ast.binaryOperatorType.add]: 3,
+    [_ast.binaryOperatorType.sub]: 3,
+    [_ast.binaryOperatorType.mul]: 2,
+    [_ast.binaryOperatorType.div]: 2,
+    [_ast.binaryOperatorType.mod]: 2,
+    [_ast.binaryOperatorType.pow]: 1,
+    [_ast.binaryOperatorType.eql]: 4,
+    [_ast.binaryOperatorType.neq]: 4,
+    [_ast.binaryOperatorType.gtr]: 4,
+    [_ast.binaryOperatorType.lss]: 4,
+    [_ast.binaryOperatorType.gte]: 4,
+    [_ast.binaryOperatorType.lte]: 4,
+    [_ast.binaryOperatorType.and]: 5,
+    [_ast.binaryOperatorType.or]: 6,
+    [_ast.binaryOperatorType.unless]: 5,
+    [_ast.binaryOperatorType.atan2]: 2
+};
+const maybeParenthesizeBinopChild = (op, child)=>{
+    if (child.type !== _ast.nodeType.binaryExpr) {
+        return child;
+    }
+    if (binOpPrecedence[op] > binOpPrecedence[child.op]) {
+        return child;
+    }
+    // TODO: Parens aren't necessary for left-associativity within same precedence,
+    // or right-associativity between two power operators.
+    return {
+        type: _ast.nodeType.parenExpr,
+        expr: child
+    };
+};
+const getNodeChildren = (node)=>{
+    switch(node.type){
+        case _ast.nodeType.aggregation:
+            return node.param === null ? [
+                node.expr
+            ] : [
+                node.param,
+                node.expr
+            ];
+        case _ast.nodeType.subquery:
+            return [
+                node.expr
+            ];
+        case _ast.nodeType.parenExpr:
+            return [
+                node.expr
+            ];
+        case _ast.nodeType.call:
+            return node.args;
+        case _ast.nodeType.matrixSelector:
+        case _ast.nodeType.vectorSelector:
+        case _ast.nodeType.numberLiteral:
+        case _ast.nodeType.stringLiteral:
+            return [];
+        case _ast.nodeType.placeholder:
+            return node.children;
+        case _ast.nodeType.unaryExpr:
+            return [
+                node.expr
+            ];
+        case _ast.nodeType.binaryExpr:
+            return [
+                node.lhs,
+                node.rhs
+            ];
+        default:
+            throw new Error('unsupported node type');
+    }
+};
+const escapeString = (str)=>{
+    return str.replace(/([\\"])/g, '\\$1');
+};

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

@@ -39,6 +39,9 @@ _export(exports, {
     metricMetadata: function() {
         return metricMetadata;
     },
+    parseQuery: function() {
+        return parseQuery;
+    },
     rangeQuery: function() {
         return rangeQuery;
     },
@@ -91,15 +94,20 @@ function series(params, queryOptions) {
     const apiURI = `/api/v1/series`;
     return fetchWithPost(apiURI, params, queryOptions);
 }
+function parseQuery(params, queryOptions) {
+    const apiURI = `/api/v1/parse_query`;
+    return fetchWithPost(apiURI, params, queryOptions);
+}
 function fetchWithGet(apiURI, params, queryOptions) {
-    const { datasourceUrl } = queryOptions;
+    const { datasourceUrl, headers } = queryOptions;
     let url = `${datasourceUrl}${apiURI}`;
     const urlParams = createSearchParams(params).toString();
     if (urlParams !== '') {
         url += `?${urlParams}`;
     }
     return (0, _core.fetchJson)(url, {
-        method: 'GET'
+        method: 'GET',
+        headers
     });
 }
 function fetchWithPost(apiURI, params, queryOptions) {

package/dist/cjs/plugins/PrometheusDatasourceEditor.js

@@ -550,6 +550,10 @@ function PrometheusDatasourceEditor(props) {
                     {
                         endpointPattern: '/api/v1/label/([a-zA-Z0-9_-]+)/values',
                         method: 'GET'
+                    },
+                    {
+                        endpointPattern: '/api/v1/parse_query',
+                        method: 'POST'
                     }
                 ],
                 url: ''

package/dist/cjs/plugins/prometheus-datasource.js

@@ -65,6 +65,10 @@ const _PrometheusDatasourceEditor = require("./PrometheusDatasourceEditor");
         series: (params, headers)=>(0, _model.series)(params, {
                 datasourceUrl,
                 headers: headers !== null && headers !== void 0 ? headers : specHeaders
+            }),
+        parseQuery: (params, headers)=>(0, _model.parseQuery)(params, {
+                datasourceUrl,
+                headers: headers !== null && headers !== void 0 ? headers : specHeaders
             })
     };
 };

package/dist/cjs/plugins/prometheus-time-series-query/PrometheusTimeSeriesQueryEditor.js

@@ -36,7 +36,7 @@ function PrometheusTimeSeriesQueryEditor(props) {
     const { data: client } = (0, _pluginsystem.useDatasourceClient)(selectedDatasource);
     const promURL = client === null || client === void 0 ? void 0 : client.options.datasourceUrl;
     const { data: datasourceResource } = (0, _pluginsystem.useDatasource)(selectedDatasource);
-    const { query, handleQueryChange, handleQueryBlur } = (0, _queryeditormodel.useQueryState)(props);
+    const { handleQueryChange, handleQueryBlur } = (0, _queryeditormodel.useQueryState)(props);
     const { format, handleFormatChange, handleFormatBlur } = (0, _queryeditormodel.useFormatState)(props);
     const { minStep, handleMinStepChange, handleMinStepBlur } = (0, _queryeditormodel.useMinStepState)(props);
     var _ref;
@@ -78,7 +78,8 @@ function PrometheusTimeSeriesQueryEditor(props) {
                         url: promURL
                     }
                 },
-                value: query,
+                value: value.query,
+                datasource: selectedDatasource,
                 onChange: handleQueryChange,
                 onBlur: handleQueryBlur
             }),
@@ -88,9 +89,9 @@ function PrometheusTimeSeriesQueryEditor(props) {
                 children: [
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                         fullWidth: true,
-                        label: "Legend Name",
-                        placeholder: "Tip: Use {{label_name}}. Example: {{instance}} will be replaced with values such as 'webserver-123' and 'webserver-456'.",
-                        helperText: "Name for each series in the legend and the tooltip.",
+                        label: "Legend",
+                        placeholder: "Example: '{{instance}}' will generate series names like 'webserver-123', 'webserver-456'...",
+                        helperText: "Text to be displayed in the legend and the tooltip. Use {{label_name}} to interpolate label values.",
                         value: format !== null && format !== void 0 ? format : '',
                         onChange: (e)=>handleFormatChange(e.target.value),
                         onBlur: handleFormatBlur

package/dist/cjs/plugins/prometheus-variables.js

@@ -191,10 +191,12 @@ function PrometheusPromQLVariableEditor(props) {
                     }
                 },
                 value: value.expr,
-                onChange: (query)=>{
+                datasource: selectedDatasource,
+                onBlur: (event)=>{
+                    var _event_target_textContent;
                     props.onChange({
                         ...props.value,
-                        expr: query
+                        expr: (_event_target_textContent = event.target.textContent) !== null && _event_target_textContent !== void 0 ? _event_target_textContent : ''
                     });
                 },
                 readOnly: props.isReadonly,

package/dist/components/PromQLEditor.d.ts

@@ -0,0 +1,9 @@
+import { ReactCodeMirrorProps } from '@uiw/react-codemirror';
+import { CompleteConfiguration } from '@prometheus-io/codemirror-promql';
+import { PrometheusDatasourceSelector } from '../model';
+export type PromQLEditorProps = {
+    completeConfig: CompleteConfiguration;
+    datasource: PrometheusDatasourceSelector;
+} & Omit<ReactCodeMirrorProps, 'theme' | 'extensions'>;
+export declare function PromQLEditor({ completeConfig, datasource, ...rest }: PromQLEditorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PromQLEditor.d.ts.map

package/dist/components/PromQLEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromQLEditor.d.ts","sourceRoot":"","sources":["../../src/components/PromQLEditor.tsx"],"names":[],"mappings":"AAaA,OAAmB,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AACzE,OAAO,EAAmB,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AAQ1F,OAAO,EAAE,4BAA4B,EAAE,MAAM,UAAU,CAAC;AAsCxD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,cAAc,EAAE,qBAAqB,CAAC;IACtC,UAAU,EAAE,4BAA4B,CAAC;CAC1C,GAAG,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,YAAY,CAAC,CAAC;AAEvD,wBAAgB,YAAY,CAAC,EAAE,cAAc,EAAE,UAAU,EAAE,GAAG,IAAI,EAAE,EAAE,iBAAiB,2CAsHtF"}