@perses-dev/prometheus-plugin 0.49.0 → 0.50.0-rc.0

package/dist/cjs/components/PromQLEditor.js

@@ -30,6 +30,7 @@ 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 _replaceprombuiltinvariables = require("../plugins/prometheus-time-series-query/replace-prom-builtin-variables");
 const _parse = require("./parse");
 const _TreeNode = /*#__PURE__*/ _interop_require_default(require("./TreeNode"));
 function _interop_require_default(obj) {
@@ -40,33 +41,12 @@ function _interop_require_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"`;
+function getErrMessage(error) {
     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
-    };
+    return errorMessage;
 }
 function PromQLEditor({ completeConfig, datasource, ...rest }) {
     const theme = (0, _material.useTheme)();
@@ -77,9 +57,16 @@ function PromQLEditor({ completeConfig, datasource, ...rest }) {
     }, [
         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), [
+    let queryExpr = (0, _pluginsystem.useReplaceVariablesInString)(rest.value);
+    if (queryExpr) {
+        // TODO placeholder values for steps to be replaced with actual values
+        // Looks like providing proper values involves some refactoring: currently we'd need to rely on the timeseries query context,
+        // but these step values are actually computed independently / before the queries are getting fired, so it's useless to fire
+        // queries here, so maybe we should extract this part to independant hook(s), to be reused here?
+        queryExpr = (0, _replaceprombuiltinvariables.replacePromBuiltinVariables)(queryExpr, 12345, 12345);
+    }
+    const { data: parseQueryResponse, isLoading, error } = (0, _parse.useParseQuery)(queryExpr !== null && queryExpr !== void 0 ? queryExpr : '', datasource, isTreeViewVisible);
+    const errorMessage = (0, _react.useMemo)(()=>getErrMessage(error), [
         error
     ]);
     const handleShowTreeView = ()=>{
@@ -125,84 +112,70 @@ function PromQLEditor({ completeConfig, datasource, ...rest }) {
                 ],
                 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,
+            queryExpr && /*#__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: {
-                                    position: 'absolute',
-                                    right: '5px',
-                                    top: '5px'
-                                },
-                                size: "small",
-                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_FileTree.default, {
-                                    sx: {
-                                        fontSize: '18px'
-                                    }
-                                })
+                                    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),
+                        })
+                    }),
+                    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: {
-                                            position: 'absolute',
-                                            top: '5px',
-                                            right: '5px'
-                                        },
-                                        size: "small",
-                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Close.default, {
-                                            sx: {
-                                                fontSize: '18px'
-                                            }
-                                        })
+                                            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
                                 })
-                            ]
-                        })
-                    ]
-                })
+                            }),
+                            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/parse.js

@@ -22,10 +22,10 @@ Object.defineProperty(exports, "useParseQuery", {
 });
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _reactquery = require("@tanstack/react-query");
-function useParseQuery(content, datasource) {
+function useParseQuery(content, datasource, enabled) {
     const { data: client } = (0, _pluginsystem.useDatasourceClient)(datasource);
     return (0, _reactquery.useQuery)({
-        enabled: !!client,
+        enabled: !!client && enabled,
         queryKey: [
             'parseQuery',
             content,

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

@@ -82,7 +82,7 @@ const getBuiltinVariableDefinitions = ()=>{
                 source: 'Prometheus',
                 display: {
                     name: '__interval',
-                    description: 'Interval that can be used to group by time in queries. When there are more data points than can be shown on a graph then queries can be made more efficient by grouping by a larger interval.',
+                    description: 'For dynamic queries that adapt across different time ranges, use $__interval instead of hardcoded intervals. It represents the actual spacing between data points: it’s calculated based on the current time range and the panel pixel width (taking the "Min step" as a lower bound).',
                     hidden: true
                 }
             }
@@ -95,7 +95,7 @@ const getBuiltinVariableDefinitions = ()=>{
                 source: 'Prometheus',
                 display: {
                     name: '__interval_ms',
-                    description: 'Interval in millisecond that can be used to group by time in queries. When there are more data points than can be shown on a graph then queries can be made more efficient by grouping by a larger interval.',
+                    description: 'Same as $__interval but in milliseconds.',
                     hidden: true
                 }
             }
@@ -108,7 +108,7 @@ const getBuiltinVariableDefinitions = ()=>{
                 source: 'Prometheus',
                 display: {
                     name: '__rate_interval',
-                    description: "Interval at least four times the value of the scrape interval. It avoids problems specific to Prometheus when using 'rate' and 'increase' functions.",
+                    description: 'Use this one rather than $__interval as the range parameter of functions like rate, increase, etc. With such function it is advised to choose a range that is at least 4x the scrape interval (this is to allow for various races, and to be resilient to a failed scrape). $__rate_interval provides that, as it is defined as `max($__interval + Min Step, 4 * Min Step)`, where Min Step value should represent the scrape interval of the metrics.',
                     hidden: true
                 }
             }

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

@@ -99,7 +99,7 @@ function PrometheusTimeSeriesQueryEditor(props) {
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                         label: "Min Step",
                         placeholder: minStepPlaceholder,
-                        helperText: "Step parameter of the query. Used by $__interval and $__rate_interval too.",
+                        helperText: "Lower bound for the step. If not provided, the scrape interval of the datasource is used.",
                         value: minStep,
                         onChange: (e)=>handleMinStepChange(e.target.value),
                         onBlur: handleMinStepBlur,

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

@@ -26,6 +26,7 @@ const _datefns = require("date-fns");
 const _model = require("../../model");
 const _utils = require("../../utils");
 const _types = require("../types");
+const _replaceprombuiltinvariables = require("./replace-prom-builtin-variables");
 const getTimeSeriesData = async (spec, context)=>{
     if (spec.query === undefined || spec.query === null || spec.query === '') {
         // Do not make a request to the backend, instead return an empty TimeSeriesData
@@ -53,15 +54,9 @@ const getTimeSeriesData = async (spec, context)=>{
     start = alignedStart;
     end = alignedEnd;
     // Replace variable placeholders in PromQL query
-    const intervalMs = step * 1000; // step is in seconds
-    let query = (0, _pluginsystem.replaceVariable)(spec.query, '__interval_ms', intervalMs.toString());
-    query = (0, _pluginsystem.replaceVariable)(spec.query, '__interval', (0, _core.formatDuration)((0, _core.msToPrometheusDuration)(intervalMs)));
-    const scrapeIntervalMs = minStep * 1000;
-    // The $__rate_interval variable is meant to be used in the rate function.
-    // It is defined as max($__interval + Scrape interval, 4 * Scrape interval), where Scrape interval is the Min step setting (a setting per PromQL query),
-    // if any is set, and otherwise the Scrape interval as set in the Prometheus datasource
-    const rateIntervalMs = Math.max(intervalMs + scrapeIntervalMs, 4 * scrapeIntervalMs);
-    query = (0, _pluginsystem.replaceVariable)(query, '__rate_interval', (0, _core.formatDuration)((0, _core.msToPrometheusDuration)(rateIntervalMs)));
+    const intervalMs = step * 1000;
+    const minStepMs = minStep * 1000;
+    let query = (0, _replaceprombuiltinvariables.replacePromBuiltinVariables)(spec.query, minStepMs, intervalMs);
     query = (0, _pluginsystem.replaceVariables)(query, context.variableState);
     let seriesNameFormat = spec.seriesNameFormat;
     // if series name format is defined, replace variable placeholders in series name format

package/dist/cjs/plugins/prometheus-time-series-query/replace-prom-builtin-variables.js

@@ -0,0 +1,33 @@
+// 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, "replacePromBuiltinVariables", {
+    enumerable: true,
+    get: function() {
+        return replacePromBuiltinVariables;
+    }
+});
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _core = require("@perses-dev/core");
+function replacePromBuiltinVariables(query, minStepMs, intervalMs) {
+    let updatedQuery = (0, _pluginsystem.replaceVariable)(query, '__interval_ms', intervalMs.toString());
+    updatedQuery = (0, _pluginsystem.replaceVariable)(updatedQuery, '__interval', (0, _core.formatDuration)((0, _core.msToPrometheusDuration)(intervalMs)));
+    // The $__rate_interval variable is meant to be used with the rate() promQL function.
+    // It is defined as max($__interval + Min step, 4 * Min step)
+    const rateIntervalMs = Math.max(intervalMs + minStepMs, 4 * minStepMs);
+    updatedQuery = (0, _pluginsystem.replaceVariable)(updatedQuery, '__rate_interval', (0, _core.formatDuration)((0, _core.msToPrometheusDuration)(rateIntervalMs)));
+    return updatedQuery;
+}

package/dist/components/PromQLEditor.d.ts

@@ -1,9 +1,10 @@
 import { ReactCodeMirrorProps } from '@uiw/react-codemirror';
 import { CompleteConfiguration } from '@prometheus-io/codemirror-promql';
+import { ReactElement } from 'react';
 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;
+export declare function PromQLEditor({ completeConfig, datasource, ...rest }: PromQLEditorProps): ReactElement;
 //# sourceMappingURL=PromQLEditor.d.ts.map

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

@@ -1 +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"}
+{"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;AAI1F,OAAO,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAC;AAIxD,OAAO,EAAE,4BAA4B,EAAE,MAAM,UAAU,CAAC;AAiBxD,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,GAAG,YAAY,CAmHrG"}

package/dist/components/PromQLEditor.js

@@ -20,38 +20,18 @@ import { useMemo, useState } from 'react';
 import { ErrorAlert } from '@perses-dev/components';
 import CloseIcon from 'mdi-material-ui/Close';
 import { useReplaceVariablesInString } from '@perses-dev/plugin-system';
+import { replacePromBuiltinVariables } from '../plugins/prometheus-time-series-query/replace-prom-builtin-variables';
 import { useParseQuery } from './parse';
 import TreeNode from './TreeNode';
 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"`;
+function getErrMessage(error) {
     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
-    };
+    return errorMessage;
 }
 export function PromQLEditor({ completeConfig, datasource, ...rest }) {
     const theme = useTheme();
@@ -62,9 +42,16 @@ export function PromQLEditor({ completeConfig, datasource, ...rest }) {
     }, [
         completeConfig
     ]);
-    const queryExpr = useReplaceVariablesInString(rest.value);
-    const { data: parseQueryResponse, isLoading, error } = useParseQuery(queryExpr !== null && queryExpr !== void 0 ? queryExpr : '', datasource);
-    const { errorMessage, isGenericError } = useMemo(()=>processError(error), [
+    let queryExpr = useReplaceVariablesInString(rest.value);
+    if (queryExpr) {
+        // TODO placeholder values for steps to be replaced with actual values
+        // Looks like providing proper values involves some refactoring: currently we'd need to rely on the timeseries query context,
+        // but these step values are actually computed independently / before the queries are getting fired, so it's useless to fire
+        // queries here, so maybe we should extract this part to independant hook(s), to be reused here?
+        queryExpr = replacePromBuiltinVariables(queryExpr, 12345, 12345);
+    }
+    const { data: parseQueryResponse, isLoading, error } = useParseQuery(queryExpr !== null && queryExpr !== void 0 ? queryExpr : '', datasource, isTreeViewVisible);
+    const errorMessage = useMemo(()=>getErrMessage(error), [
         error
     ]);
     const handleShowTreeView = ()=>{
@@ -110,84 +97,70 @@ export function PromQLEditor({ completeConfig, datasource, ...rest }) {
                 ],
                 placeholder: "Example: sum(rate(http_requests_total[5m]))"
             }),
-            queryExpr && /*#__PURE__*/ _jsx(_Fragment, {
-                children: isGenericError ? // Display the error without any close button, tree view etc when it's a generic error
-                /*#__PURE__*/ _jsx("div", {
-                    style: {
-                        border: `1px solid ${theme.palette.divider}`
-                    },
-                    children: /*#__PURE__*/ _jsx(ErrorAlert, {
-                        error: {
-                            name: 'Parse query error',
-                            message: errorMessage
-                        }
-                    })
-                }) : // Otherwise include the logic to show/hide the tree view
-                /*#__PURE__*/ _jsxs(_Fragment, {
-                    children: [
-                        /*#__PURE__*/ _jsx(Tooltip, {
-                            title: isTreeViewVisible ? treeViewCloseStr : treeViewOpenStr,
-                            children: /*#__PURE__*/ _jsx(IconButton, {
-                                "aria-label": isTreeViewVisible ? treeViewCloseStr : treeViewOpenStr,
-                                onClick: handleShowTreeView,
+            queryExpr && /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx(Tooltip, {
+                        title: isTreeViewVisible ? treeViewCloseStr : treeViewOpenStr,
+                        children: /*#__PURE__*/ _jsx(IconButton, {
+                            "aria-label": isTreeViewVisible ? treeViewCloseStr : treeViewOpenStr,
+                            onClick: handleShowTreeView,
+                            sx: {
+                                position: 'absolute',
+                                right: '5px',
+                                top: '5px'
+                            },
+                            size: "small",
+                            children: /*#__PURE__*/ _jsx(FileTreeIcon, {
                                 sx: {
-                                    position: 'absolute',
-                                    right: '5px',
-                                    top: '5px'
-                                },
-                                size: "small",
-                                children: /*#__PURE__*/ _jsx(FileTreeIcon, {
-                                    sx: {
-                                        fontSize: '18px'
-                                    }
-                                })
+                                    fontSize: '18px'
+                                }
                             })
-                        }),
-                        isTreeViewVisible && /*#__PURE__*/ _jsxs("div", {
-                            style: {
-                                border: `1px solid ${theme.palette.divider}`,
-                                position: 'relative'
-                            },
-                            children: [
-                                /*#__PURE__*/ _jsx(Tooltip, {
-                                    title: treeViewCloseStr,
-                                    children: /*#__PURE__*/ _jsx(IconButton, {
-                                        "aria-label": treeViewCloseStr,
-                                        onClick: ()=>setTreeViewVisible(false),
+                        })
+                    }),
+                    isTreeViewVisible && /*#__PURE__*/ _jsxs("div", {
+                        style: {
+                            border: `1px solid ${theme.palette.divider}`,
+                            position: 'relative'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(Tooltip, {
+                                title: treeViewCloseStr,
+                                children: /*#__PURE__*/ _jsx(IconButton, {
+                                    "aria-label": treeViewCloseStr,
+                                    onClick: ()=>setTreeViewVisible(false),
+                                    sx: {
+                                        position: 'absolute',
+                                        top: '5px',
+                                        right: '5px'
+                                    },
+                                    size: "small",
+                                    children: /*#__PURE__*/ _jsx(CloseIcon, {
                                         sx: {
-                                            position: 'absolute',
-                                            top: '5px',
-                                            right: '5px'
-                                        },
-                                        size: "small",
-                                        children: /*#__PURE__*/ _jsx(CloseIcon, {
-                                            sx: {
-                                                fontSize: '18px'
-                                            }
-                                        })
+                                            fontSize: '18px'
+                                        }
                                     })
-                                }),
-                                error ? // Here the user is able to hide the error alert
-                                /*#__PURE__*/ _jsx(ErrorAlert, {
-                                    error: {
-                                        name: `${treeViewStr} not available`,
-                                        message: errorMessage
-                                    }
-                                }) : /*#__PURE__*/ _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__*/ _jsx(CircularProgress, {}) : (parseQueryResponse === null || parseQueryResponse === void 0 ? void 0 : parseQueryResponse.data) ? /*#__PURE__*/ _jsx(TreeNode, {
-                                        node: parseQueryResponse.data,
-                                        reverse: false
-                                    }) : null
                                 })
-                            ]
-                        })
-                    ]
-                })
+                            }),
+                            error ? // Here the user is able to hide the error alert
+                            /*#__PURE__*/ _jsx(ErrorAlert, {
+                                error: {
+                                    name: `${treeViewStr} not available`,
+                                    message: errorMessage
+                                }
+                            }) : /*#__PURE__*/ _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__*/ _jsx(CircularProgress, {}) : (parseQueryResponse === null || parseQueryResponse === void 0 ? void 0 : parseQueryResponse.data) ? /*#__PURE__*/ _jsx(TreeNode, {
+                                    node: parseQueryResponse.data,
+                                    reverse: false
+                                }) : null
+                            })
+                        ]
+                    })
+                ]
             })
         ]
     });

package/dist/components/PromQLEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/PromQLEditor.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport CodeMirror, { ReactCodeMirrorProps } from '@uiw/react-codemirror';\nimport { PromQLExtension, CompleteConfiguration } from '@prometheus-io/codemirror-promql';\nimport { EditorView } from '@codemirror/view';\nimport { useTheme, CircularProgress, InputLabel, Stack, IconButton, Tooltip } from '@mui/material';\nimport FileTreeIcon from 'mdi-material-ui/FileTree';\nimport { useMemo, useState } from 'react';\nimport { ErrorAlert } from '@perses-dev/components';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { useReplaceVariablesInString } from '@perses-dev/plugin-system';\nimport { PrometheusDatasourceSelector } from '../model';\nimport { useParseQuery } from './parse';\nimport TreeNode from './TreeNode';\n\nconst treeViewStr = 'Tree View';\nconst treeViewOpenStr = 'Open ' + treeViewStr;\nconst treeViewCloseStr = 'Close ' + treeViewStr;\n\n// Process the error to identify if it's a generic one & adjust the message in some cases\n// TODO: This should be removed when properly tackling query error at query editor level (https://github.com/perses/perses/issues/1419)\n//       Here this was kinda a quick-win to do it like this with the implementation of the Tree view.\n//       Once #1419 will be tackled, any error reported by the query to the parse endpoint here should be treated the same (= display\n//       the error in the debug/tree view & always let the buttons accessible to show/hide it).\nfunction processError(error: unknown): { errorMessage: string; isGenericError: boolean } {\n  // Specific errors that user should be able to hide\n  const apiNotAvailableError = '404 page not found';\n  const apiNotAvailableErrorRephrased = `${treeViewStr} is available only for datasources whose APIs comply with Prometheus 3.0 specifications`;\n\n  const blockedByProxyError =\n    'forbidden access: you are not allowed to use this endpoint \"/api/v1/parse_query\" with the HTTP method POST';\n  const blockedByProxyErrorRephrased = `Your datasource configuration is blocking the ${treeViewStr} feature: the datasource should allow POST requests to \"/api/v1/parse_query\"`;\n\n  let errorMessage = 'An unknown error occurred';\n  let isGenericError = false;\n  if (error && error instanceof Error) {\n    errorMessage = error.message.trim();\n    if (errorMessage === apiNotAvailableError) {\n      errorMessage = apiNotAvailableErrorRephrased;\n    } else if (errorMessage === blockedByProxyError) {\n      errorMessage = blockedByProxyErrorRephrased;\n    } else {\n      isGenericError = true;\n    }\n  }\n\n  return { errorMessage, isGenericError };\n}\n\nexport type PromQLEditorProps = {\n  completeConfig: CompleteConfiguration;\n  datasource: PrometheusDatasourceSelector;\n} & Omit<ReactCodeMirrorProps, 'theme' | 'extensions'>;\n\nexport function PromQLEditor({ completeConfig, datasource, ...rest }: PromQLEditorProps) {\n  const theme = useTheme();\n  const isDarkMode = theme.palette.mode === 'dark';\n  const [isTreeViewVisible, setTreeViewVisible] = useState(false);\n\n  const promQLExtension = useMemo(() => {\n    return new PromQLExtension().activateLinter(false).setComplete(completeConfig).asExtension();\n  }, [completeConfig]);\n\n  const queryExpr = useReplaceVariablesInString(rest.value);\n\n  const { data: parseQueryResponse, isLoading, error } = useParseQuery(queryExpr ?? '', datasource);\n  const { errorMessage, isGenericError } = useMemo(() => processError(error), [error]);\n\n  const handleShowTreeView = () => {\n    setTreeViewVisible(!isTreeViewVisible);\n  };\n\n  return (\n    <Stack position=\"relative\">\n      <InputLabel // reproduce the same kind of input label that regular MUI TextFields have\n        shrink\n        sx={{\n          position: 'absolute',\n          top: '-8px',\n          left: '10px',\n          padding: '0 4px',\n          color: theme.palette.text.primary,\n          zIndex: 1,\n        }}\n      >\n        PromQL Expression\n      </InputLabel>\n      <CodeMirror\n        {...rest}\n        style={{ border: `1px solid ${theme.palette.divider}` }}\n        theme={isDarkMode ? 'dark' : 'light'}\n        basicSetup={{\n          highlightActiveLine: false,\n          highlightActiveLineGutter: false,\n          foldGutter: false,\n        }}\n        extensions={[\n          EditorView.lineWrapping,\n          promQLExtension,\n          EditorView.theme({\n            '.cm-content': {\n              paddingTop: '8px',\n              paddingBottom: '8px',\n              paddingRight: '40px', // offset for the tree view button\n            },\n          }),\n        ]}\n        placeholder=\"Example: sum(rate(http_requests_total[5m]))\"\n      />\n      {queryExpr && (\n        <>\n          {isGenericError ? (\n            // Display the error without any close button, tree view etc when it's a generic error\n            <div style={{ border: `1px solid ${theme.palette.divider}` }}>\n              <ErrorAlert error={{ name: 'Parse query error', message: errorMessage }} />\n            </div>\n          ) : (\n            // Otherwise include the logic to show/hide the tree view\n            <>\n              <Tooltip title={isTreeViewVisible ? treeViewCloseStr : treeViewOpenStr}>\n                <IconButton\n                  aria-label={isTreeViewVisible ? treeViewCloseStr : treeViewOpenStr}\n                  onClick={handleShowTreeView}\n                  sx={{ position: 'absolute', right: '5px', top: '5px' }}\n                  size=\"small\"\n                >\n                  <FileTreeIcon sx={{ fontSize: '18px' }} />\n                </IconButton>\n              </Tooltip>\n              {isTreeViewVisible && (\n                <div style={{ border: `1px solid ${theme.palette.divider}`, position: 'relative' }}>\n                  <Tooltip title={treeViewCloseStr}>\n                    <IconButton\n                      aria-label={treeViewCloseStr}\n                      onClick={() => setTreeViewVisible(false)}\n                      sx={{ position: 'absolute', top: '5px', right: '5px' }}\n                      size=\"small\"\n                    >\n                      <CloseIcon sx={{ fontSize: '18px' }} />\n                    </IconButton>\n                  </Tooltip>\n                  {error ? (\n                    // Here the user is able to hide the error alert\n                    <ErrorAlert\n                      error={{\n                        name: `${treeViewStr} not available`,\n                        message: errorMessage,\n                      }}\n                    />\n                  ) : (\n                    <div\n                      style={{\n                        padding: `${theme.spacing(1.5)} ${theme.spacing(1.5)} 0 ${theme.spacing(1.5)}`, // let paddingBottom at 0 because nodes have margin-bottom\n                        overflowX: 'auto',\n                        backgroundColor: theme.palette.background.default,\n                      }}\n                    >\n                      {isLoading ? (\n                        <CircularProgress />\n                      ) : parseQueryResponse?.data ? (\n                        <TreeNode node={parseQueryResponse.data} reverse={false} />\n                      ) : null}\n                    </div>\n                  )}\n                </div>\n              )}\n            </>\n          )}\n        </>\n      )}\n    </Stack>\n  );\n}\n"],"names":["CodeMirror","PromQLExtension","EditorView","useTheme","CircularProgress","InputLabel","Stack","IconButton","Tooltip","FileTreeIcon","useMemo","useState","ErrorAlert","CloseIcon","useReplaceVariablesInString","useParseQuery","TreeNode","treeViewStr","treeViewOpenStr","treeViewCloseStr","processError","error","apiNotAvailableError","apiNotAvailableErrorRephrased","blockedByProxyError","blockedByProxyErrorRephrased","errorMessage","isGenericError","Error","message","trim","PromQLEditor","completeConfig","datasource","rest","theme","isDarkMode","palette","mode","isTreeViewVisible","setTreeViewVisible","promQLExtension","activateLinter","setComplete","asExtension","queryExpr","value","data","parseQueryResponse","isLoading","handleShowTreeView","position","shrink","sx","top","left","padding","color","text","primary","zIndex","style","border","divider","basicSetup","highlightActiveLine","highlightActiveLineGutter","foldGutter","extensions","lineWrapping","paddingTop","paddingBottom","paddingRight","placeholder","div","name","title","aria-label","onClick","right","size","fontSize","spacing","overflowX","backgroundColor","background","default","node","reverse"],"mappings":"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"}
+{"version":3,"sources":["../../src/components/PromQLEditor.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport CodeMirror, { ReactCodeMirrorProps } from '@uiw/react-codemirror';\nimport { PromQLExtension, CompleteConfiguration } from '@prometheus-io/codemirror-promql';\nimport { EditorView } from '@codemirror/view';\nimport { useTheme, CircularProgress, InputLabel, Stack, IconButton, Tooltip } from '@mui/material';\nimport FileTreeIcon from 'mdi-material-ui/FileTree';\nimport { ReactElement, useMemo, useState } from 'react';\nimport { ErrorAlert } from '@perses-dev/components';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { useReplaceVariablesInString } from '@perses-dev/plugin-system';\nimport { PrometheusDatasourceSelector } from '../model';\nimport { replacePromBuiltinVariables } from '../plugins/prometheus-time-series-query/replace-prom-builtin-variables';\nimport { useParseQuery } from './parse';\nimport TreeNode from './TreeNode';\n\nconst treeViewStr = 'Tree View';\nconst treeViewOpenStr = 'Open ' + treeViewStr;\nconst treeViewCloseStr = 'Close ' + treeViewStr;\n\nfunction getErrMessage(error: unknown): string {\n  let errorMessage = 'An unknown error occurred';\n  if (error && error instanceof Error) {\n    errorMessage = error.message.trim();\n  }\n  return errorMessage;\n}\n\nexport type PromQLEditorProps = {\n  completeConfig: CompleteConfiguration;\n  datasource: PrometheusDatasourceSelector;\n} & Omit<ReactCodeMirrorProps, 'theme' | 'extensions'>;\n\nexport function PromQLEditor({ completeConfig, datasource, ...rest }: PromQLEditorProps): ReactElement {\n  const theme = useTheme();\n  const isDarkMode = theme.palette.mode === 'dark';\n  const [isTreeViewVisible, setTreeViewVisible] = useState(false);\n\n  const promQLExtension = useMemo(() => {\n    return new PromQLExtension().activateLinter(false).setComplete(completeConfig).asExtension();\n  }, [completeConfig]);\n\n  let queryExpr = useReplaceVariablesInString(rest.value);\n  if (queryExpr) {\n    // TODO placeholder values for steps to be replaced with actual values\n    // Looks like providing proper values involves some refactoring: currently we'd need to rely on the timeseries query context,\n    // but these step values are actually computed independently / before the queries are getting fired, so it's useless to fire\n    // queries here, so maybe we should extract this part to independant hook(s), to be reused here?\n    queryExpr = replacePromBuiltinVariables(queryExpr, 12345, 12345);\n  }\n\n  const { data: parseQueryResponse, isLoading, error } = useParseQuery(queryExpr ?? '', datasource, isTreeViewVisible);\n  const errorMessage = useMemo(() => getErrMessage(error), [error]);\n\n  const handleShowTreeView = (): void => {\n    setTreeViewVisible(!isTreeViewVisible);\n  };\n\n  return (\n    <Stack position=\"relative\">\n      <InputLabel // reproduce the same kind of input label that regular MUI TextFields have\n        shrink\n        sx={{\n          position: 'absolute',\n          top: '-8px',\n          left: '10px',\n          padding: '0 4px',\n          color: theme.palette.text.primary,\n          zIndex: 1,\n        }}\n      >\n        PromQL Expression\n      </InputLabel>\n      <CodeMirror\n        {...rest}\n        style={{ border: `1px solid ${theme.palette.divider}` }}\n        theme={isDarkMode ? 'dark' : 'light'}\n        basicSetup={{\n          highlightActiveLine: false,\n          highlightActiveLineGutter: false,\n          foldGutter: false,\n        }}\n        extensions={[\n          EditorView.lineWrapping,\n          promQLExtension,\n          EditorView.theme({\n            '.cm-content': {\n              paddingTop: '8px',\n              paddingBottom: '8px',\n              paddingRight: '40px', // offset for the tree view button\n            },\n          }),\n        ]}\n        placeholder=\"Example: sum(rate(http_requests_total[5m]))\"\n      />\n      {queryExpr && (\n        <>\n          <Tooltip title={isTreeViewVisible ? treeViewCloseStr : treeViewOpenStr}>\n            <IconButton\n              aria-label={isTreeViewVisible ? treeViewCloseStr : treeViewOpenStr}\n              onClick={handleShowTreeView}\n              sx={{ position: 'absolute', right: '5px', top: '5px' }}\n              size=\"small\"\n            >\n              <FileTreeIcon sx={{ fontSize: '18px' }} />\n            </IconButton>\n          </Tooltip>\n          {isTreeViewVisible && (\n            <div style={{ border: `1px solid ${theme.palette.divider}`, position: 'relative' }}>\n              <Tooltip title={treeViewCloseStr}>\n                <IconButton\n                  aria-label={treeViewCloseStr}\n                  onClick={() => setTreeViewVisible(false)}\n                  sx={{ position: 'absolute', top: '5px', right: '5px' }}\n                  size=\"small\"\n                >\n                  <CloseIcon sx={{ fontSize: '18px' }} />\n                </IconButton>\n              </Tooltip>\n              {error ? (\n                // Here the user is able to hide the error alert\n                <ErrorAlert\n                  error={{\n                    name: `${treeViewStr} not available`,\n                    message: errorMessage,\n                  }}\n                />\n              ) : (\n                <div\n                  style={{\n                    padding: `${theme.spacing(1.5)} ${theme.spacing(1.5)} 0 ${theme.spacing(1.5)}`, // let paddingBottom at 0 because nodes have margin-bottom\n                    overflowX: 'auto',\n                    backgroundColor: theme.palette.background.default,\n                  }}\n                >\n                  {isLoading ? (\n                    <CircularProgress />\n                  ) : parseQueryResponse?.data ? (\n                    <TreeNode node={parseQueryResponse.data} reverse={false} />\n                  ) : null}\n                </div>\n              )}\n            </div>\n          )}\n        </>\n      )}\n    </Stack>\n  );\n}\n"],"names":["CodeMirror","PromQLExtension","EditorView","useTheme","CircularProgress","InputLabel","Stack","IconButton","Tooltip","FileTreeIcon","useMemo","useState","ErrorAlert","CloseIcon","useReplaceVariablesInString","replacePromBuiltinVariables","useParseQuery","TreeNode","treeViewStr","treeViewOpenStr","treeViewCloseStr","getErrMessage","error","errorMessage","Error","message","trim","PromQLEditor","completeConfig","datasource","rest","theme","isDarkMode","palette","mode","isTreeViewVisible","setTreeViewVisible","promQLExtension","activateLinter","setComplete","asExtension","queryExpr","value","data","parseQueryResponse","isLoading","handleShowTreeView","position","shrink","sx","top","left","padding","color","text","primary","zIndex","style","border","divider","basicSetup","highlightActiveLine","highlightActiveLineGutter","foldGutter","extensions","lineWrapping","paddingTop","paddingBottom","paddingRight","placeholder","title","aria-label","onClick","right","size","fontSize","div","name","spacing","overflowX","backgroundColor","background","default","node","reverse"],"mappings":"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"}

package/dist/components/parse.d.ts

@@ -1,4 +1,5 @@
 import { DatasourceSelector } from '@perses-dev/core';
+import { UseQueryResult } from '@tanstack/react-query';
 import { ParseQueryResponse } from '../model';
-export declare function useParseQuery(content: string, datasource: DatasourceSelector): import("@tanstack/react-query").UseQueryResult<ParseQueryResponse, unknown>;
+export declare function useParseQuery(content: string, datasource: DatasourceSelector, enabled?: boolean): UseQueryResult<ParseQueryResponse>;
 //# sourceMappingURL=parse.d.ts.map