@perses-dev/prometheus-plugin 0.50.2 → 0.51.0-beta.2

package/{dist → lib}/cjs/plugins/prometheus-time-series-query/PrometheusTimeSeriesQueryEditor.js

@@ -23,24 +23,24 @@ Object.defineProperty(exports, "PrometheusTimeSeriesQueryEditor", {
 const _jsxruntime = require("react/jsx-runtime");
 const _immer = require("immer");
 const _pluginsystem = require("@perses-dev/plugin-system");
+const _components = require("@perses-dev/components");
 const _material = require("@mui/material");
 const _model = require("../../model");
 const _types = require("../types");
-const _components = require("../../components");
+const _components1 = require("../../components");
 const _queryeditormodel = require("./query-editor-model");
 function PrometheusTimeSeriesQueryEditor(props) {
     const { onChange, value } = props;
     const { datasource } = value;
-    const selectedDatasource = datasource !== null && datasource !== void 0 ? datasource : _model.DEFAULT_PROM;
-    const datasourceSelectLabelID = `prom-datasource-label-${selectedDatasource.name || 'default'}`;
+    const selectedDatasource = datasource ?? _model.DEFAULT_PROM;
+    const datasourceSelectLabelID = (0, _components.useId)('prom-datasource-label'); // for panels with multiple queries, this component is rendered multiple times on the same page
     const { data: client } = (0, _pluginsystem.useDatasourceClient)(selectedDatasource);
-    const promURL = client === null || client === void 0 ? void 0 : client.options.datasourceUrl;
+    const promURL = client?.options.datasourceUrl;
     const { data: datasourceResource } = (0, _pluginsystem.useDatasource)(selectedDatasource);
     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;
-    const minStepPlaceholder = (_ref = minStep !== null && minStep !== void 0 ? minStep : datasourceResource && (datasourceResource === null || datasourceResource === void 0 ? void 0 : datasourceResource.plugin.spec).scrapeInterval) !== null && _ref !== void 0 ? _ref : _types.DEFAULT_SCRAPE_INTERVAL;
+    const minStepPlaceholder = minStep ?? (datasourceResource && (datasourceResource?.plugin.spec).scrapeInterval) ?? _types.DEFAULT_SCRAPE_INTERVAL;
     const handleDatasourceChange = (next)=>{
         if ((0, _model.isPrometheusDatasourceSelector)(next)) {
             onChange((0, _immer.produce)(value, (draft)=>{
@@ -61,6 +61,7 @@ function PrometheusTimeSeriesQueryEditor(props) {
                 children: [
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.InputLabel, {
                         id: datasourceSelectLabelID,
+                        shrink: true,
                         children: "Prometheus Datasource"
                     }),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DatasourceSelect, {
@@ -68,11 +69,12 @@ function PrometheusTimeSeriesQueryEditor(props) {
                         value: selectedDatasource,
                         onChange: handleDatasourceChange,
                         labelId: datasourceSelectLabelID,
-                        label: "Prometheus Datasource"
+                        label: "Prometheus Datasource",
+                        notched: true
                     })
                 ]
             }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.PromQLEditor, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.PromQLEditor, {
                 completeConfig: {
                     remote: {
                         url: promURL
@@ -92,7 +94,7 @@ function PrometheusTimeSeriesQueryEditor(props) {
                         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 : '',
+                        value: format ?? '',
                         onChange: (e)=>handleFormatChange(e.target.value),
                         onBlur: handleFormatBlur
                     }),

package/{dist → lib}/cjs/plugins/prometheus-time-series-query/get-time-series-data.js

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// Copyright 2025 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
@@ -34,16 +34,13 @@ const getTimeSeriesData = async (spec, context)=>{
             series: []
         };
     }
-    var _spec_datasource;
-    const datasource = await context.datasourceStore.getDatasource((_spec_datasource = spec.datasource) !== null && _spec_datasource !== void 0 ? _spec_datasource : _model.DEFAULT_PROM);
-    var _datasource_plugin_spec_scrapeInterval;
-    const datasourceScrapeInterval = Math.trunc((0, _datefns.milliseconds)((0, _core.parseDurationString)((_datasource_plugin_spec_scrapeInterval = datasource.plugin.spec.scrapeInterval) !== null && _datasource_plugin_spec_scrapeInterval !== void 0 ? _datasource_plugin_spec_scrapeInterval : _types.DEFAULT_SCRAPE_INTERVAL)) / 1000);
-    var _getDurationStringSeconds;
+    const datasource = await context.datasourceStore.getDatasource(spec.datasource ?? _model.DEFAULT_PROM);
+    const datasourceScrapeInterval = Math.trunc((0, _datefns.milliseconds)((0, _core.parseDurationString)(datasource.plugin.spec.scrapeInterval ?? _types.DEFAULT_SCRAPE_INTERVAL)) / 1000);
     // Min step is the lower bound of the interval between data points
     // If no value is provided for it, it should default to the scrape interval of the datasource
-    const minStep = (_getDurationStringSeconds = (0, _model.getDurationStringSeconds)(// resolve any variable that may have been provided
+    const minStep = (0, _model.getDurationStringSeconds)(// resolve any variable that may have been provided
     // TODO add a validation check to make sure the variable is a DurationString, to avoid the back & forth cast here
-    (0, _pluginsystem.replaceVariables)(spec.minStep, context.variableState))) !== null && _getDurationStringSeconds !== void 0 ? _getDurationStringSeconds : datasourceScrapeInterval;
+    (0, _pluginsystem.replaceVariables)(spec.minStep, context.variableState)) ?? datasourceScrapeInterval;
     const timeRange = (0, _model.getPrometheusTimeRange)(context.timeRange);
     const step = (0, _model.getRangeStep)(timeRange, minStep, undefined, context.suggestedStepMs); // TODO: resolution
     // Align the time range so that it's a multiple of the step
@@ -63,9 +60,8 @@ const getTimeSeriesData = async (spec, context)=>{
     if (seriesNameFormat) {
         seriesNameFormat = (0, _pluginsystem.replaceVariables)(seriesNameFormat, context.variableState);
     }
-    var _spec_datasource1;
     // Get the datasource, using the default Prom Datasource if one isn't specified in the query
-    const client = await context.datasourceStore.getDatasourceClient((_spec_datasource1 = spec.datasource) !== null && _spec_datasource1 !== void 0 ? _spec_datasource1 : _model.DEFAULT_PROM);
+    const client = await context.datasourceStore.getDatasourceClient(spec.datasource ?? _model.DEFAULT_PROM);
     // Make the request to Prom
     let response;
     switch(context.mode){
@@ -90,10 +86,8 @@ const getTimeSeriesData = async (spec, context)=>{
     // Custom display for response header warnings, configurable error responses display coming next
     const notices = [];
     if (response.status === 'success') {
-        var _response_warnings;
-        const warnings = (_response_warnings = response.warnings) !== null && _response_warnings !== void 0 ? _response_warnings : [];
-        var _warnings_;
-        const warningMessage = (_warnings_ = warnings[0]) !== null && _warnings_ !== void 0 ? _warnings_ : '';
+        const warnings = response.warnings ?? [];
+        const warningMessage = warnings[0] ?? '';
         if (warningMessage !== '') {
             notices.push({
                 type: 'warning',
@@ -109,7 +103,7 @@ const getTimeSeriesData = async (spec, context)=>{
             end: (0, _datefns.fromUnixTime)(end)
         },
         stepMs: step * 1000,
-        series: buildTimeSeries(result, query, seriesNameFormat),
+        series: buildTimeSeries(query, result, seriesNameFormat),
         metadata: {
             notices,
             executedQueryString: query
@@ -117,35 +111,63 @@ const getTimeSeriesData = async (spec, context)=>{
     };
     return chartData;
 };
-function buildVectorData(data, query, seriesNameFormat) {
+function buildVectorData(query, data, seriesNameFormat) {
     return data.result.map((res)=>{
-        const { metric, value } = res;
+        const { metric, value, histogram } = res;
         // Account for seriesNameFormat from query editor when determining name to show in legend, tooltip, etc.
         const { name, formattedName } = (0, _utils.getFormattedPrometheusSeriesName)(query, metric, seriesNameFormat);
+        if (histogram) {
+            return {
+                name,
+                formattedName,
+                labels: metric,
+                values: [
+                    (0, _model.parseValueTuple)([
+                        histogram[0],
+                        histogram[1].sum
+                    ])
+                ],
+                histograms: [
+                    histogram
+                ]
+            };
+        }
         return {
             name,
+            formattedName,
+            labels: metric,
             values: [
                 (0, _model.parseValueTuple)(value)
-            ],
-            formattedName,
-            labels: metric
+            ]
         };
     });
 }
-function buildMatrixData(data, query, seriesNameFormat) {
+function buildMatrixData(query, data, seriesNameFormat) {
     return data.result.map((res)=>{
-        const { metric, values } = res;
+        const { metric, values, histograms } = res;
         // Account for seriesNameFormat from query editor when determining name to show in legend, tooltip, etc.
         const { name, formattedName } = (0, _utils.getFormattedPrometheusSeriesName)(query, metric, seriesNameFormat);
+        if (histograms) {
+            return {
+                name,
+                formattedName,
+                labels: metric,
+                values: histograms.map((histogram)=>(0, _model.parseValueTuple)([
+                        histogram[0],
+                        histogram[1].sum
+                    ])),
+                histograms: histograms.map((histogram)=>histogram)
+            };
+        }
         return {
             name,
-            values: values.map(_model.parseValueTuple),
             formattedName,
-            labels: metric
+            labels: metric,
+            values: values.map(_model.parseValueTuple)
         };
     });
 }
-function buildScalarData(data, query, seriesNameFormat) {
+function buildScalarData(query, data, seriesNameFormat) {
     const { name, formattedName } = (0, _utils.getFormattedPrometheusSeriesName)(query, {}, seriesNameFormat);
     return [
         {
@@ -157,18 +179,18 @@ function buildScalarData(data, query, seriesNameFormat) {
         }
     ];
 }
-function buildTimeSeries(data, query, seriesNameFormat) {
+function buildTimeSeries(query, data, seriesNameFormat) {
     if (!data) {
         return [];
     }
     const resultType = data.resultType;
     switch(resultType){
         case 'vector':
-            return buildVectorData(data, query, seriesNameFormat);
+            return buildVectorData(query, data, seriesNameFormat);
         case 'matrix':
-            return buildMatrixData(data, query, seriesNameFormat);
+            return buildMatrixData(query, data, seriesNameFormat);
         case 'scalar':
-            return buildScalarData(data, query, seriesNameFormat);
+            return buildScalarData(query, data, seriesNameFormat);
         default:
             console.warn('Unknown result type', resultType, data);
             return [];

package/lib/cjs/plugins/prometheus-time-series-query/index.js

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

package/{dist → lib}/cjs/plugins/prometheus-variables.js

@@ -21,27 +21,36 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    PrometheusLabelNamesVariable: function() {
-        return PrometheusLabelNamesVariable;
+    PrometheusLabelNamesVariableEditor: function() {
+        return PrometheusLabelNamesVariableEditor;
     },
-    PrometheusLabelValuesVariable: function() {
-        return PrometheusLabelValuesVariable;
+    PrometheusLabelValuesVariableEditor: function() {
+        return PrometheusLabelValuesVariableEditor;
     },
-    PrometheusPromQLVariable: function() {
-        return PrometheusPromQLVariable;
+    PrometheusPromQLVariableEditor: function() {
+        return PrometheusPromQLVariableEditor;
+    },
+    capturingMatrix: function() {
+        return capturingMatrix;
+    },
+    capturingVector: function() {
+        return capturingVector;
+    },
+    stringArrayToVariableOptions: function() {
+        return stringArrayToVariableOptions;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
-const _pluginsystem = require("@perses-dev/plugin-system");
 const _material = require("@mui/material");
+const _pluginsystem = require("@perses-dev/plugin-system");
 const _immer = require("immer");
-const _model = require("../model");
 const _components = require("../components");
+const _model = require("../model");
 const _MatcherEditor = require("./MatcherEditor");
 function PrometheusLabelValuesVariableEditor(props) {
     const { onChange, value } = props;
     const { datasource } = value;
-    const selectedDatasource = datasource !== null && datasource !== void 0 ? datasource : _model.DEFAULT_PROM;
+    const selectedDatasource = datasource ?? _model.DEFAULT_PROM;
     const handleDatasourceChange = (next)=>{
         if ((0, _model.isPrometheusDatasourceSelector)(next)) {
             onChange((0, _immer.produce)(value, (draft)=>{
@@ -52,7 +61,6 @@ function PrometheusLabelValuesVariableEditor(props) {
         }
         throw new Error('Got unexpected non-Prometheus datasource selector');
     };
-    var _props_value_matchers;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
         spacing: 2,
         children: [
@@ -88,7 +96,7 @@ function PrometheusLabelValuesVariableEditor(props) {
                 }
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_MatcherEditor.MatcherEditor, {
-                matchers: (_props_value_matchers = props.value.matchers) !== null && _props_value_matchers !== void 0 ? _props_value_matchers : [],
+                matchers: props.value.matchers ?? [],
                 onChange: (e)=>{
                     props.onChange({
                         ...props.value,
@@ -103,7 +111,7 @@ function PrometheusLabelValuesVariableEditor(props) {
 function PrometheusLabelNamesVariableEditor(props) {
     const { onChange, value } = props;
     const { datasource } = value;
-    const selectedDatasource = datasource !== null && datasource !== void 0 ? datasource : _model.DEFAULT_PROM;
+    const selectedDatasource = datasource ?? _model.DEFAULT_PROM;
     const handleDatasourceChange = (next)=>{
         if ((0, _model.isPrometheusDatasourceSelector)(next)) {
             onChange((0, _immer.produce)(value, (draft)=>{
@@ -114,7 +122,6 @@ function PrometheusLabelNamesVariableEditor(props) {
         }
         throw new Error('Got unexpected non-Prometheus datasource selector');
     };
-    var _props_value_matchers;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
         spacing: 2,
         children: [
@@ -136,7 +143,7 @@ function PrometheusLabelNamesVariableEditor(props) {
                 ]
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_MatcherEditor.MatcherEditor, {
-                matchers: (_props_value_matchers = props.value.matchers) !== null && _props_value_matchers !== void 0 ? _props_value_matchers : [],
+                matchers: props.value.matchers ?? [],
                 isReadonly: props.isReadonly,
                 onChange: (e)=>{
                     props.onChange({
@@ -151,9 +158,9 @@ function PrometheusLabelNamesVariableEditor(props) {
 function PrometheusPromQLVariableEditor(props) {
     const { onChange, value } = props;
     const { datasource } = value;
-    const selectedDatasource = datasource !== null && datasource !== void 0 ? datasource : _model.DEFAULT_PROM;
+    const selectedDatasource = datasource ?? _model.DEFAULT_PROM;
     const { data: client } = (0, _pluginsystem.useDatasourceClient)(selectedDatasource);
-    const promURL = client === null || client === void 0 ? void 0 : client.options.datasourceUrl;
+    const promURL = client?.options.datasourceUrl;
     const handleDatasourceChange = (next)=>{
         if ((0, _model.isPrometheusDatasourceSelector)(next)) {
             onChange((0, _immer.produce)(value, (draft)=>{
@@ -193,10 +200,9 @@ function PrometheusPromQLVariableEditor(props) {
                 value: value.expr,
                 datasource: selectedDatasource,
                 onBlur: (event)=>{
-                    var _event_target_textContent;
                     props.onChange({
                         ...props.value,
-                        expr: (_event_target_textContent = event.target.textContent) !== null && _event_target_textContent !== void 0 ? _event_target_textContent : ''
+                        expr: event.target.textContent ?? ''
                     });
                 },
                 readOnly: props.isReadonly,
@@ -238,92 +244,10 @@ function capturingVector(vector, labelName) {
     }
     return Array.from(captured.values());
 }
-/**
- * Takes a list of strings and returns a list of VariableOptions
- */ const stringArrayToVariableOptions = (values)=>{
+const stringArrayToVariableOptions = (values)=>{
     if (!values) return [];
     return values.map((value)=>({
             value,
             label: value
         }));
 };
-const PrometheusLabelNamesVariable = {
-    getVariableOptions: async (spec, ctx)=>{
-        var _spec_datasource;
-        const client = await ctx.datasourceStore.getDatasourceClient((_spec_datasource = spec.datasource) !== null && _spec_datasource !== void 0 ? _spec_datasource : _model.DEFAULT_PROM);
-        const match = spec.matchers ? spec.matchers.map((m)=>(0, _pluginsystem.replaceVariables)(m, ctx.variables)) : undefined;
-        const timeRange = (0, _model.getPrometheusTimeRange)(ctx.timeRange);
-        const { data: options } = await client.labelNames({
-            'match[]': match,
-            ...timeRange
-        });
-        return {
-            data: stringArrayToVariableOptions(options)
-        };
-    },
-    dependsOn: (spec)=>{
-        var _spec_matchers;
-        return {
-            variables: ((_spec_matchers = spec.matchers) === null || _spec_matchers === void 0 ? void 0 : _spec_matchers.map((m)=>(0, _pluginsystem.parseVariables)(m)).flat()) || []
-        };
-    },
-    OptionsEditorComponent: PrometheusLabelNamesVariableEditor,
-    createInitialOptions: ()=>({})
-};
-const PrometheusLabelValuesVariable = {
-    getVariableOptions: async (spec, ctx)=>{
-        const pluginDef = spec;
-        var _spec_datasource;
-        const client = await ctx.datasourceStore.getDatasourceClient((_spec_datasource = spec.datasource) !== null && _spec_datasource !== void 0 ? _spec_datasource : _model.DEFAULT_PROM);
-        const match = pluginDef.matchers ? pluginDef.matchers.map((m)=>(0, _pluginsystem.replaceVariables)(m, ctx.variables)) : undefined;
-        const timeRange = (0, _model.getPrometheusTimeRange)(ctx.timeRange);
-        const { data: options } = await client.labelValues({
-            labelName: (0, _pluginsystem.replaceVariables)(pluginDef.labelName, ctx.variables),
-            'match[]': match,
-            ...timeRange
-        });
-        return {
-            data: stringArrayToVariableOptions(options)
-        };
-    },
-    dependsOn: (spec)=>{
-        var _spec_matchers;
-        return {
-            variables: ((_spec_matchers = spec.matchers) === null || _spec_matchers === void 0 ? void 0 : _spec_matchers.map((m)=>(0, _pluginsystem.parseVariables)(m)).flat().concat((0, _pluginsystem.parseVariables)(spec.labelName))) || []
-        };
-    },
-    OptionsEditorComponent: PrometheusLabelValuesVariableEditor,
-    createInitialOptions: ()=>({
-            labelName: ''
-        })
-};
-const PrometheusPromQLVariable = {
-    getVariableOptions: async (spec, ctx)=>{
-        var _spec_datasource;
-        const client = await ctx.datasourceStore.getDatasourceClient((_spec_datasource = spec.datasource) !== null && _spec_datasource !== void 0 ? _spec_datasource : _model.DEFAULT_PROM);
-        // TODO we may want to manage a range query as well.
-        const { data: options } = await client.instantQuery({
-            query: (0, _pluginsystem.replaceVariables)(spec.expr, ctx.variables)
-        });
-        const labelName = (0, _pluginsystem.replaceVariables)(spec.labelName, ctx.variables);
-        let values = [];
-        if ((options === null || options === void 0 ? void 0 : options.resultType) === 'matrix') {
-            values = capturingMatrix(options, labelName);
-        } else if ((options === null || options === void 0 ? void 0 : options.resultType) === 'vector') {
-            values = capturingVector(options, labelName);
-        }
-        return {
-            data: stringArrayToVariableOptions(values)
-        };
-    },
-    dependsOn: (spec)=>{
-        return {
-            variables: (0, _pluginsystem.parseVariables)(spec.expr).concat((0, _pluginsystem.parseVariables)(spec.labelName))
-        };
-    },
-    OptionsEditorComponent: PrometheusPromQLVariableEditor,
-    createInitialOptions: ()=>({
-            expr: '',
-            labelName: ''
-        })
-};

package/{dist → lib}/cjs/plugins/variable.js

@@ -69,8 +69,7 @@ function StaticListVariableOptionEditor(props) {
 }
 const StaticListVariable = {
     getVariableOptions: async (spec)=>{
-        var _spec_values;
-        const values = (_spec_values = spec.values) === null || _spec_values === void 0 ? void 0 : _spec_values.map((v)=>{
+        const values = spec.values?.map((v)=>{
             if (typeof v === 'string') {
                 return {
                     label: v,

package/lib/cjs/setup-tests.js

@@ -0,0 +1,19 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+require("@testing-library/jest-dom");
+// Always mock e-charts during tests since we don't have a proper canvas in jsdom
+jest.mock('echarts/core');

package/{dist → lib}/cjs/utils/utils.js

@@ -34,8 +34,7 @@ _export(exports, {
 function formatSeriesName(inputFormat, seriesLabels) {
     const resolveLabelsRegex = /\{\{\s*(.+?)\s*\}\}/g;
     return inputFormat.replace(resolveLabelsRegex, (_match, token)=>{
-        var _seriesLabels_token;
-        const resolvedValue = (_seriesLabels_token = seriesLabels[token]) !== null && _seriesLabels_token !== void 0 ? _seriesLabels_token : '';
+        const resolvedValue = seriesLabels[token] ?? '';
         return resolvedValue;
     });
 }

package/lib/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;AAI1F,OAAO,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAC;AAIxD,OAAO,EAAE,4BAA4B,EAAE,MAAM,UAAU,CAAC;AASxD,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,CAoHrG"}

package/{dist → lib}/components/PromQLEditor.js

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// Copyright 2025 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
@@ -21,7 +21,7 @@ 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 { useParseQuery } from './query';
 import TreeNode from './TreeNode';
 const treeViewStr = 'Tree View';
 const treeViewOpenStr = 'Open ' + treeViewStr;
@@ -43,7 +43,7 @@ export function PromQLEditor({ completeConfig, datasource, ...rest }) {
         // 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 { data: parseQueryResponse, isLoading, error } = useParseQuery(queryExpr ?? '', datasource, isTreeViewVisible);
     const handleShowTreeView = ()=>{
         setTreeViewVisible(!isTreeViewVisible);
     };
@@ -105,7 +105,7 @@ export function PromQLEditor({ completeConfig, datasource, ...rest }) {
                                     fontSize: '18px'
                                 }
                             })
-                        })
+                        }, "tree-view-button")
                     }),
                     isTreeViewVisible && /*#__PURE__*/ _jsxs("div", {
                         style: {
@@ -129,7 +129,7 @@ export function PromQLEditor({ completeConfig, datasource, ...rest }) {
                                             fontSize: '18px'
                                         }
                                     })
-                                })
+                                }, "tree-view-close-button")
                             }),
                             error ? // Here the user is able to hide the error alert
                             /*#__PURE__*/ _jsx(ErrorAlert, {
@@ -143,9 +143,11 @@ export function PromQLEditor({ completeConfig, datasource, ...rest }) {
                                     overflowX: 'auto',
                                     backgroundColor: theme.palette.background.default
                                 },
-                                children: isLoading ? /*#__PURE__*/ _jsx(CircularProgress, {}) : (parseQueryResponse === null || parseQueryResponse === void 0 ? void 0 : parseQueryResponse.data) ? /*#__PURE__*/ _jsx(TreeNode, {
+                                children: isLoading ? /*#__PURE__*/ _jsx(CircularProgress, {}) : parseQueryResponse?.data ? /*#__PURE__*/ _jsx(TreeNode, {
                                     node: parseQueryResponse.data,
-                                    reverse: false
+                                    reverse: false,
+                                    childIdx: 0,
+                                    datasource: datasource
                                 }) : null
                             })
                         ]

package/lib/components/PromQLEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/PromQLEditor.tsx"],"sourcesContent":["// Copyright 2025 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 './query';\nimport TreeNode from './TreeNode';\n\nconst treeViewStr = 'Tree View';\nconst treeViewOpenStr = 'Open ' + treeViewStr;\nconst treeViewCloseStr = 'Close ' + treeViewStr;\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\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              key=\"tree-view-button\"\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                  key=\"tree-view-close-button\"\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: error.message,\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} childIdx={0} datasource={datasource} />\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","PromQLEditor","completeConfig","datasource","rest","theme","isDarkMode","palette","mode","isTreeViewVisible","setTreeViewVisible","promQLExtension","activateLinter","setComplete","asExtension","queryExpr","value","data","parseQueryResponse","isLoading","error","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","message","spacing","overflowX","backgroundColor","background","default","node","reverse","childIdx"],"mappings":"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"}

package/lib/components/TreeNode.d.ts

@@ -0,0 +1,15 @@
+import { ReactElement } from 'react';
+import { PrometheusDatasourceSelector } from '../model';
+import ASTNode from './promql/ast';
+type NodeState = 'waiting' | 'running' | 'error' | 'success';
+interface TreeNodeProps {
+    node: ASTNode;
+    parentEl?: HTMLDivElement | null;
+    reverse: boolean;
+    datasource: PrometheusDatasourceSelector;
+    childIdx: number;
+    reportNodeState?: (childIdx: number, state: NodeState) => void;
+}
+export default function TreeNode({ node, parentEl, reverse, datasource, childIdx, reportNodeState, }: TreeNodeProps): ReactElement;
+export {};
+//# sourceMappingURL=TreeNode.d.ts.map

package/lib/components/TreeNode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeNode.d.ts","sourceRoot":"","sources":["../../../src/components/TreeNode.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAE,YAAY,EAA8D,MAAM,OAAO,CAAC;AAGjG,OAAO,EAAE,4BAA4B,EAAE,MAAM,UAAU,CAAC;AACxD,OAAO,OAAqB,MAAM,cAAc,CAAC;AAejD,KAAK,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAiB7D,UAAU,aAAa;IAErB,IAAI,EAAE,OAAO,CAAC;IAEd,QAAQ,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IAEjC,OAAO,EAAE,OAAO,CAAC;IAEjB,UAAU,EAAE,4BAA4B,CAAC;IAGzC,QAAQ,EAAE,MAAM,CAAC;IAGjB,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CAChE;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,UAAU,EACV,QAAQ,EACR,eAAe,GAChB,EAAE,aAAa,GAAG,YAAY,CAoP9B"}