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

package/dist/cjs/components/PromQLEditor.js

@@ -0,0 +1,209 @@
+// 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, "PromQLEditor", {
+    enumerable: true,
+    get: function() {
+        return PromQLEditor;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _reactcodemirror = /*#__PURE__*/ _interop_require_default(require("@uiw/react-codemirror"));
+const _codemirrorpromql = require("@prometheus-io/codemirror-promql");
+const _view = require("@codemirror/view");
+const _material = require("@mui/material");
+const _FileTree = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/FileTree"));
+const _react = require("react");
+const _components = require("@perses-dev/components");
+const _Close = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Close"));
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _parse = require("./parse");
+const _TreeNode = /*#__PURE__*/ _interop_require_default(require("./TreeNode"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const treeViewStr = 'Tree View';
+const treeViewOpenStr = 'Open ' + treeViewStr;
+const treeViewCloseStr = 'Close ' + treeViewStr;
+// Process the error to identify if it's a generic one & adjust the message in some cases
+// TODO: This should be removed when properly tackling query error at query editor level (https://github.com/perses/perses/issues/1419)
+//       Here this was kinda a quick-win to do it like this with the implementation of the Tree view.
+//       Once #1419 will be tackled, any error reported by the query to the parse endpoint here should be treated the same (= display
+//       the error in the debug/tree view & always let the buttons accessible to show/hide it).
+function processError(error) {
+    // Specific errors that user should be able to hide
+    const apiNotAvailableError = '404 page not found';
+    const apiNotAvailableErrorRephrased = `${treeViewStr} is available only for datasources whose APIs comply with Prometheus 3.0 specifications`;
+    const blockedByProxyError = 'forbidden access: you are not allowed to use this endpoint "/api/v1/parse_query" with the HTTP method POST';
+    const blockedByProxyErrorRephrased = `Your datasource configuration is blocking the ${treeViewStr} feature: the datasource should allow POST requests to "/api/v1/parse_query"`;
+    let errorMessage = 'An unknown error occurred';
+    let isGenericError = false;
+    if (error && error instanceof Error) {
+        errorMessage = error.message.trim();
+        if (errorMessage === apiNotAvailableError) {
+            errorMessage = apiNotAvailableErrorRephrased;
+        } else if (errorMessage === blockedByProxyError) {
+            errorMessage = blockedByProxyErrorRephrased;
+        } else {
+            isGenericError = true;
+        }
+    }
+    return {
+        errorMessage,
+        isGenericError
+    };
+}
+function PromQLEditor({ completeConfig, datasource, ...rest }) {
+    const theme = (0, _material.useTheme)();
+    const isDarkMode = theme.palette.mode === 'dark';
+    const [isTreeViewVisible, setTreeViewVisible] = (0, _react.useState)(false);
+    const promQLExtension = (0, _react.useMemo)(()=>{
+        return new _codemirrorpromql.PromQLExtension().activateLinter(false).setComplete(completeConfig).asExtension();
+    }, [
+        completeConfig
+    ]);
+    const queryExpr = (0, _pluginsystem.useReplaceVariablesInString)(rest.value);
+    const { data: parseQueryResponse, isLoading, error } = (0, _parse.useParseQuery)(queryExpr !== null && queryExpr !== void 0 ? queryExpr : '', datasource);
+    const { errorMessage, isGenericError } = (0, _react.useMemo)(()=>processError(error), [
+        error
+    ]);
+    const handleShowTreeView = ()=>{
+        setTreeViewVisible(!isTreeViewVisible);
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+        position: "relative",
+        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: '-8px',
+                    left: '10px',
+                    padding: '0 4px',
+                    color: theme.palette.text.primary,
+                    zIndex: 1
+                },
+                children: "PromQL Expression"
+            }),
+            /*#__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
+                },
+                extensions: [
+                    _view.EditorView.lineWrapping,
+                    promQLExtension,
+                    _view.EditorView.theme({
+                        '.cm-content': {
+                            paddingTop: '8px',
+                            paddingBottom: '8px',
+                            paddingRight: '40px'
+                        }
+                    })
+                ],
+                placeholder: "Example: sum(rate(http_requests_total[5m]))"
+            }),
+            queryExpr && /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+                children: isGenericError ? // Display the error without any close button, tree view etc when it's a generic error
+                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    style: {
+                        border: `1px solid ${theme.palette.divider}`
+                    },
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorAlert, {
+                        error: {
+                            name: 'Parse query error',
+                            message: errorMessage
+                        }
+                    })
+                }) : // Otherwise include the logic to show/hide the tree view
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tooltip, {
+                            title: isTreeViewVisible ? treeViewCloseStr : treeViewOpenStr,
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                "aria-label": isTreeViewVisible ? treeViewCloseStr : treeViewOpenStr,
+                                onClick: handleShowTreeView,
+                                sx: {
+                                    position: 'absolute',
+                                    right: '5px',
+                                    top: '5px'
+                                },
+                                size: "small",
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_FileTree.default, {
+                                    sx: {
+                                        fontSize: '18px'
+                                    }
+                                })
+                            })
+                        }),
+                        isTreeViewVisible && /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                            style: {
+                                border: `1px solid ${theme.palette.divider}`,
+                                position: 'relative'
+                            },
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tooltip, {
+                                    title: treeViewCloseStr,
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                        "aria-label": treeViewCloseStr,
+                                        onClick: ()=>setTreeViewVisible(false),
+                                        sx: {
+                                            position: 'absolute',
+                                            top: '5px',
+                                            right: '5px'
+                                        },
+                                        size: "small",
+                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Close.default, {
+                                            sx: {
+                                                fontSize: '18px'
+                                            }
+                                        })
+                                    })
+                                }),
+                                error ? // Here the user is able to hide the error alert
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorAlert, {
+                                    error: {
+                                        name: `${treeViewStr} not available`,
+                                        message: errorMessage
+                                    }
+                                }) : /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                    style: {
+                                        padding: `${theme.spacing(1.5)} ${theme.spacing(1.5)} 0 ${theme.spacing(1.5)}`,
+                                        overflowX: 'auto',
+                                        backgroundColor: theme.palette.background.default
+                                    },
+                                    children: isLoading ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CircularProgress, {}) : (parseQueryResponse === null || parseQueryResponse === void 0 ? void 0 : parseQueryResponse.data) ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_TreeNode.default, {
+                                        node: parseQueryResponse.data,
+                                        reverse: false
+                                    }) : null
+                                })
+                            ]
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}

package/dist/cjs/components/TreeNode.js

@@ -0,0 +1,147 @@
+// 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/pages/query/TreeNode.tsx
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _react = require("react");
+const _ast = require("./promql/ast");
+const _utils = require("./promql/utils");
+const _format = require("./promql/format");
+// The indentation factor for each level of the tree.
+const nodeIndent = 5;
+const connectorWidth = nodeIndent * 5;
+const TreeNode = ({ node, parentEl, reverse })=>{
+    const theme = (0, _material.useTheme)();
+    const children = (0, _utils.getNodeChildren)(node);
+    // A normal ref won't work properly here because the ref's `current` property
+    // going from `null` to defined won't trigger a re-render of the child
+    // component, since it's not a React state update. So we manually have to
+    // create a state update using a callback ref. See also
+    // https://tkdodo.eu/blog/avoiding-use-effect-with-callback-refs
+    const [nodeEl, setNodeEl] = (0, _react.useState)(null);
+    const nodeRef = (0, _react.useCallback)((node)=>setNodeEl(node), []);
+    const [connectorStyle, setConnectorStyle] = (0, _react.useState)({
+        borderColor: theme.palette.grey['500'],
+        borderLeftStyle: 'solid',
+        borderLeftWidth: 2,
+        width: connectorWidth,
+        left: -connectorWidth
+    });
+    // Update the size and position of tree connector lines based on the node's and its parent's position.
+    (0, _react.useLayoutEffect)(()=>{
+        if (parentEl === undefined) {
+            // We're the root node.
+            return;
+        }
+        if (parentEl === null || nodeEl === null) {
+            // Either of the two connected nodes hasn't been rendered yet.
+            return;
+        }
+        const parentRect = parentEl.getBoundingClientRect();
+        const nodeRect = nodeEl.getBoundingClientRect();
+        if (reverse) {
+            setConnectorStyle((prevStyle)=>({
+                    ...prevStyle,
+                    top: 'calc(50% - 1px)',
+                    bottom: nodeRect.bottom - parentRect.top,
+                    borderTopLeftRadius: 10,
+                    borderTopStyle: 'solid',
+                    borderBottomLeftRadius: undefined
+                }));
+        } else {
+            setConnectorStyle((prevStyle)=>({
+                    ...prevStyle,
+                    top: parentRect.bottom - nodeRect.top,
+                    bottom: 'calc(50% - 1px)',
+                    borderBottomLeftRadius: 10,
+                    borderBottomStyle: 'solid',
+                    borderTopLeftRadius: undefined
+                }));
+        }
+    }, [
+        parentEl,
+        nodeEl,
+        reverse,
+        nodeRef,
+        setConnectorStyle
+    ]);
+    const innerNode = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+        ref: nodeRef,
+        sx: {
+            position: 'relative',
+            display: 'inline-block',
+            padding: 1,
+            marginBottom: 1.5,
+            borderRadius: 2,
+            backgroundColor: theme.palette.background.code
+        },
+        children: [
+            parentEl !== undefined && // Connector line between this node and its parent.
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                sx: {
+                    position: 'absolute',
+                    display: 'inline-block',
+                    ...connectorStyle
+                }
+            }),
+            (0, _format.formatNode)(node, false, 1)
+        ]
+    });
+    if (node.type === _ast.nodeType.binaryExpr) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                    ml: nodeIndent,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(TreeNode, {
+                        node: children[0],
+                        parentEl: nodeEl,
+                        reverse: true
+                    })
+                }),
+                innerNode,
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                    ml: nodeIndent,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(TreeNode, {
+                        node: children[1],
+                        parentEl: nodeEl,
+                        reverse: false
+                    })
+                })
+            ]
+        });
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        children: [
+            innerNode,
+            children.map((child, idx)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                    ml: nodeIndent,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(TreeNode, {
+                        node: child,
+                        parentEl: nodeEl,
+                        reverse: false
+                    })
+                }, idx))
+        ]
+    });
+};
+const _default = TreeNode;

package/dist/cjs/components/index.js

@@ -14,7 +14,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_export_star(require("./PromQL"), exports);
+_export_star(require("./PromQLEditor"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/dist/cjs/components/parse.js

@@ -0,0 +1,42 @@
+// 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, "useParseQuery", {
+    enumerable: true,
+    get: function() {
+        return useParseQuery;
+    }
+});
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _reactquery = require("@tanstack/react-query");
+function useParseQuery(content, datasource) {
+    const { data: client } = (0, _pluginsystem.useDatasourceClient)(datasource);
+    return (0, _reactquery.useQuery)({
+        enabled: !!client,
+        queryKey: [
+            'parseQuery',
+            content,
+            'datasource',
+            datasource
+        ],
+        queryFn: async ()=>{
+            const params = {
+                query: content
+            };
+            return await client.parseQuery(params);
+        }
+    });
+}

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

@@ -0,0 +1,143 @@
+// 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/ast.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, {
+    aggregationType: function() {
+        return aggregationType;
+    },
+    binaryOperatorType: function() {
+        return binaryOperatorType;
+    },
+    compOperatorTypes: function() {
+        return compOperatorTypes;
+    },
+    matchType: function() {
+        return matchType;
+    },
+    nodeType: function() {
+        return nodeType;
+    },
+    setOperatorTypes: function() {
+        return setOperatorTypes;
+    },
+    unaryOperatorType: function() {
+        return unaryOperatorType;
+    },
+    valueType: function() {
+        return valueType;
+    },
+    vectorMatchCardinality: function() {
+        return vectorMatchCardinality;
+    }
+});
+var nodeType;
+(function(nodeType) {
+    nodeType["aggregation"] = "aggregation";
+    nodeType["binaryExpr"] = "binaryExpr";
+    nodeType["call"] = "call";
+    nodeType["matrixSelector"] = "matrixSelector";
+    nodeType["subquery"] = "subquery";
+    nodeType["numberLiteral"] = "numberLiteral";
+    nodeType["parenExpr"] = "parenExpr";
+    nodeType["stringLiteral"] = "stringLiteral";
+    nodeType["unaryExpr"] = "unaryExpr";
+    nodeType["vectorSelector"] = "vectorSelector";
+    nodeType["placeholder"] = "placeholder";
+})(nodeType || (nodeType = {}));
+var aggregationType;
+(function(aggregationType) {
+    aggregationType["sum"] = "sum";
+    aggregationType["min"] = "min";
+    aggregationType["max"] = "max";
+    aggregationType["avg"] = "avg";
+    aggregationType["stddev"] = "stddev";
+    aggregationType["stdvar"] = "stdvar";
+    aggregationType["count"] = "count";
+    aggregationType["group"] = "group";
+    aggregationType["countValues"] = "count_values";
+    aggregationType["bottomk"] = "bottomk";
+    aggregationType["topk"] = "topk";
+    aggregationType["quantile"] = "quantile";
+    aggregationType["limitK"] = "limitk";
+    aggregationType["limitRatio"] = "limit_ratio";
+})(aggregationType || (aggregationType = {}));
+var binaryOperatorType;
+(function(binaryOperatorType) {
+    binaryOperatorType["add"] = "+";
+    binaryOperatorType["sub"] = "-";
+    binaryOperatorType["mul"] = "*";
+    binaryOperatorType["div"] = "/";
+    binaryOperatorType["mod"] = "%";
+    binaryOperatorType["pow"] = "^";
+    binaryOperatorType["eql"] = "==";
+    binaryOperatorType["neq"] = "!=";
+    binaryOperatorType["gtr"] = ">";
+    binaryOperatorType["lss"] = "<";
+    binaryOperatorType["gte"] = ">=";
+    binaryOperatorType["lte"] = "<=";
+    binaryOperatorType["and"] = "and";
+    binaryOperatorType["or"] = "or";
+    binaryOperatorType["unless"] = "unless";
+    binaryOperatorType["atan2"] = "atan2";
+})(binaryOperatorType || (binaryOperatorType = {}));
+const compOperatorTypes = [
+    "==",
+    "!=",
+    ">",
+    "<",
+    ">=",
+    "<="
+];
+const setOperatorTypes = [
+    "and",
+    "or",
+    "unless"
+];
+var unaryOperatorType;
+(function(unaryOperatorType) {
+    unaryOperatorType["plus"] = "+";
+    unaryOperatorType["minus"] = "-";
+})(unaryOperatorType || (unaryOperatorType = {}));
+var vectorMatchCardinality;
+(function(vectorMatchCardinality) {
+    vectorMatchCardinality["oneToOne"] = "one-to-one";
+    vectorMatchCardinality["manyToOne"] = "many-to-one";
+    vectorMatchCardinality["oneToMany"] = "one-to-many";
+    vectorMatchCardinality["manyToMany"] = "many-to-many";
+})(vectorMatchCardinality || (vectorMatchCardinality = {}));
+var valueType;
+(function(valueType) {
+    // TODO: 'none' should never make it out of Prometheus. Do we need this here?
+    valueType["none"] = "none";
+    valueType["vector"] = "vector";
+    valueType["scalar"] = "scalar";
+    valueType["matrix"] = "matrix";
+    valueType["string"] = "string";
+})(valueType || (valueType = {}));
+var matchType;
+(function(matchType) {
+    matchType["equal"] = "=";
+    matchType["notEqual"] = "!=";
+    matchType["matchRegexp"] = "=~";
+    matchType["matchNotRegexp"] = "!~";
+})(matchType || (matchType = {}));