@perses-dev/prometheus-plugin 0.43.0-rc2 → 0.44.0-rc0

package/dist/cjs/components/PromQL.js

@@ -31,7 +31,7 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-function PromQLEditor({ completeConfig , ...rest }) {
+function PromQLEditor({ completeConfig, ...rest }) {
     const theme = (0, _material.useTheme)();
     const isDarkMode = theme.palette.mode === 'dark';
     const promQLExtension = (0, _react.useMemo)(()=>{

package/dist/cjs/index.js

@@ -21,11 +21,8 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    PrometheusTimeSeriesQuery: function() {
-        return _prometheustimeseriesquery.PrometheusTimeSeriesQuery;
-    },
-    StaticListVariable: function() {
-        return _variable.StaticListVariable;
+    PrometheusDatasource: function() {
+        return _prometheusdatasource.PrometheusDatasource;
     },
     PrometheusLabelNamesVariable: function() {
         return _prometheusvariables.PrometheusLabelNamesVariable;
@@ -36,8 +33,11 @@ _export(exports, {
     PrometheusPromQLVariable: function() {
         return _prometheusvariables.PrometheusPromQLVariable;
     },
-    PrometheusDatasource: function() {
-        return _prometheusdatasource.PrometheusDatasource;
+    PrometheusTimeSeriesQuery: function() {
+        return _prometheustimeseriesquery.PrometheusTimeSeriesQuery;
+    },
+    StaticListVariable: function() {
+        return _variable.StaticListVariable;
     }
 });
 const _prometheustimeseriesquery = require("./plugins/prometheus-time-series-query");

package/dist/cjs/model/index.js

@@ -18,7 +18,6 @@ _export_star(require("./api-types"), exports);
 _export_star(require("./parse-sample-values"), exports);
 _export_star(require("./prometheus-client"), exports);
 _export_star(require("./prometheus-selectors"), exports);
-_export_star(require("./templating"), exports);
 _export_star(require("./time"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {

package/dist/cjs/model/parse-sample-values.js

@@ -21,11 +21,11 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    parseValueTuple: function() {
-        return parseValueTuple;
-    },
     parseSampleValue: function() {
         return parseSampleValue;
+    },
+    parseValueTuple: function() {
+        return parseValueTuple;
     }
 });
 function parseValueTuple(data) {

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

@@ -21,23 +21,23 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    fetchResults: function() {
+        return fetchResults;
+    },
     healthCheck: function() {
         return healthCheck;
     },
     instantQuery: function() {
         return instantQuery;
     },
-    rangeQuery: function() {
-        return rangeQuery;
-    },
     labelNames: function() {
         return labelNames;
     },
     labelValues: function() {
         return labelValues;
     },
-    fetchResults: function() {
-        return fetchResults;
+    rangeQuery: function() {
+        return rangeQuery;
     }
 });
 const _core = require("@perses-dev/core");
@@ -64,7 +64,7 @@ function labelNames(params, queryOptions) {
     return fetchWithPost('/api/v1/labels', params, queryOptions);
 }
 function labelValues(params, queryOptions) {
-    const { labelName , ...searchParams } = params;
+    const { labelName, ...searchParams } = params;
     // In case label name is empty, we'll receive a 404, so we can replace it by an empty list, which is less confusing.
     // Note that an empty list is the prometheus result if the label does not exist.
     if (labelName.length === 0) {
@@ -78,7 +78,7 @@ function labelValues(params, queryOptions) {
     return fetchWithGet(apiURI, searchParams, queryOptions);
 }
 function fetchWithGet(apiURI, params, queryOptions) {
-    const { datasourceUrl  } = queryOptions;
+    const { datasourceUrl } = queryOptions;
     let url = `${datasourceUrl}${apiURI}`;
     const urlParams = createSearchParams(params).toString();
     if (urlParams !== '') {
@@ -89,7 +89,7 @@ function fetchWithGet(apiURI, params, queryOptions) {
     });
 }
 function fetchWithPost(apiURI, params, queryOptions) {
-    const { datasourceUrl , headers  } = queryOptions;
+    const { datasourceUrl, headers } = queryOptions;
     const url = `${datasourceUrl}${apiURI}`;
     const init = {
         method: 'POST',

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

@@ -21,12 +21,12 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    PROM_DATASOURCE_KIND: function() {
-        return PROM_DATASOURCE_KIND;
-    },
     DEFAULT_PROM: function() {
         return DEFAULT_PROM;
     },
+    PROM_DATASOURCE_KIND: function() {
+        return PROM_DATASOURCE_KIND;
+    },
     isDefaultPromSelector: function() {
         return isDefaultPromSelector;
     },

package/dist/cjs/model/time.js

@@ -21,20 +21,20 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    getDurationStringSeconds: function() {
+        return getDurationStringSeconds;
+    },
     getPrometheusTimeRange: function() {
         return getPrometheusTimeRange;
     },
     getRangeStep: function() {
         return getRangeStep;
-    },
-    getDurationStringSeconds: function() {
-        return getDurationStringSeconds;
     }
 });
 const _core = require("@perses-dev/core");
 const _datefns = require("date-fns");
 function getPrometheusTimeRange(timeRange) {
-    const { start , end  } = timeRange;
+    const { start, end } = timeRange;
     return {
         start: Math.ceil((0, _datefns.getUnixTime)(start)),
         end: Math.ceil((0, _datefns.getUnixTime)(end))

package/dist/cjs/plugins/MatcherEditor.js

@@ -29,7 +29,7 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-function MatcherEditor({ matchers , onChange , isReadonly  }) {
+function MatcherEditor({ matchers, onChange, isReadonly }) {
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
         spacing: 1,
         mb: 2,

package/dist/cjs/plugins/PrometheusDatasourceEditor.js

@@ -55,7 +55,9 @@ function _interop_require_wildcard(obj, nodeInterop) {
     if (cache && cache.has(obj)) {
         return cache.get(obj);
     }
-    var newObj = {};
+    var newObj = {
+        __proto__: null
+    };
     var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
     for(var key in obj){
         if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
@@ -75,7 +77,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
 }
 function PrometheusDatasourceEditor(props) {
     var _value_proxy, _value_proxy1, _value_proxy2;
-    const { value , onChange , isReadonly  } = props;
+    const { value, onChange, isReadonly } = props;
     const strDirect = 'Direct access';
     const strProxy = 'Proxy';
     // utilitary function used for headers when renaming a property
@@ -100,9 +102,9 @@ function PrometheusDatasourceEditor(props) {
             label: strDirect,
             content: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
                 name: "URL",
-                render: ({ field , fieldState  })=>{
+                render: ({ field, fieldState })=>{
                     var _fieldState_error;
-                    /*#__PURE__*/ return (0, _jsxruntime.jsx)(_material.TextField, {
+                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                         ...field,
                         fullWidth: true,
                         label: "URL",
@@ -131,9 +133,9 @@ function PrometheusDatasourceEditor(props) {
                 children: [
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
                         name: "URL",
-                        render: ({ field , fieldState  })=>{
+                        render: ({ field, fieldState })=>{
                             var _value_proxy, _fieldState_error;
-                            /*#__PURE__*/ return (0, _jsxruntime.jsx)(_material.TextField, {
+                            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                                 ...field,
                                 fullWidth: true,
                                 label: "URL",
@@ -170,7 +172,7 @@ function PrometheusDatasourceEditor(props) {
                         spacing: 2,
                         mb: 2,
                         children: [
-                            ((_value_proxy = value.proxy) === null || _value_proxy === void 0 ? void 0 : _value_proxy.spec.allowedEndpoints) && ((_value_proxy1 = value.proxy) === null || _value_proxy1 === void 0 ? void 0 : _value_proxy1.spec.allowedEndpoints.length) != 0 ? value.proxy.spec.allowedEndpoints.map(({ endpointPattern , method  }, i)=>{
+                            ((_value_proxy = value.proxy) === null || _value_proxy === void 0 ? void 0 : _value_proxy.spec.allowedEndpoints) && ((_value_proxy1 = value.proxy) === null || _value_proxy1 === void 0 ? void 0 : _value_proxy1.spec.allowedEndpoints.length) != 0 ? value.proxy.spec.allowedEndpoints.map(({ endpointPattern, method }, i)=>{
                                 return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_react.Fragment, {
                                     children: [
                                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
@@ -178,9 +180,9 @@ function PrometheusDatasourceEditor(props) {
                                             xs: 8,
                                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
                                                 name: `Endpoint pattern ${i}`,
-                                                render: ({ field , fieldState  })=>{
+                                                render: ({ field, fieldState })=>{
                                                     var _fieldState_error;
-                                                    /*#__PURE__*/ return (0, _jsxruntime.jsx)(_material.TextField, {
+                                                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                                                         ...field,
                                                         fullWidth: true,
                                                         label: "Endpoint pattern",
@@ -220,9 +222,9 @@ function PrometheusDatasourceEditor(props) {
                                             xs: 3,
                                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
                                                 name: `Method ${i}`,
-                                                render: ({ field , fieldState  })=>{
+                                                render: ({ field, fieldState })=>{
                                                     var _fieldState_error;
-                                                    /*#__PURE__*/ return (0, _jsxruntime.jsxs)(_material.TextField, {
+                                                    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TextField, {
                                                         ...field,
                                                         select: true,
                                                         fullWidth: true,
@@ -285,8 +287,7 @@ function PrometheusDatasourceEditor(props) {
                                             xs: 1,
                                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
                                                 name: `Remove Endpoint ${i}`,
-                                                render: ({ field  })=>{
-                                                    /*#__PURE__*/ return (0, _jsxruntime.jsx)(_material.IconButton, {
+                                                render: ({ field })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
                                                         ...field,
                                                         disabled: isReadonly,
                                                         // Remove the given allowed endpoint from the list
@@ -304,8 +305,7 @@ function PrometheusDatasourceEditor(props) {
                                                             }));
                                                         },
                                                         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Minus.default, {})
-                                                    });
-                                                }
+                                                    })
                                             })
                                         })
                                     ]
@@ -365,9 +365,9 @@ function PrometheusDatasourceEditor(props) {
                                             xs: 4,
                                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
                                                 name: `Header name ${i}`,
-                                                render: ({ field , fieldState  })=>{
+                                                render: ({ field, fieldState })=>{
                                                     var _fieldState_error;
-                                                    /*#__PURE__*/ return (0, _jsxruntime.jsx)(_material.TextField, {
+                                                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                                                         ...field,
                                                         fullWidth: true,
                                                         label: "Header name",
@@ -397,13 +397,13 @@ function PrometheusDatasourceEditor(props) {
                                             xs: 7,
                                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
                                                 name: `Header value ${i}`,
-                                                render: ({ field , fieldState  })=>{
+                                                render: ({ field, fieldState })=>{
                                                     var _value_proxy_spec_headers, _value_proxy, _fieldState_error;
-                                                    /*#__PURE__*/ return (0, _jsxruntime.jsx)(_material.TextField, {
+                                                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                                                         ...field,
                                                         fullWidth: true,
                                                         label: "Header value",
-                                                        value: (_value_proxy_spec_headers = (_value_proxy = value.proxy) === null || _value_proxy === void 0 ? void 0 : _value_proxy.spec.headers) === null || _value_proxy_spec_headers === void 0 ? void 0 : _value_proxy_spec_headers[headerName],
+                                                        value: (_value_proxy = value.proxy) === null || _value_proxy === void 0 ? void 0 : (_value_proxy_spec_headers = _value_proxy.spec.headers) === null || _value_proxy_spec_headers === void 0 ? void 0 : _value_proxy_spec_headers[headerName],
                                                         error: !!fieldState.error,
                                                         helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
                                                         InputProps: {
@@ -432,8 +432,7 @@ function PrometheusDatasourceEditor(props) {
                                             xs: 1,
                                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
                                                 name: `Remove Header ${i}`,
-                                                render: ({ field  })=>{
-                                                    /*#__PURE__*/ return (0, _jsxruntime.jsx)(_material.IconButton, {
+                                                render: ({ field })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
                                                         ...field,
                                                         disabled: isReadonly,
                                                         // Remove the given header from the list
@@ -451,8 +450,7 @@ function PrometheusDatasourceEditor(props) {
                                                             }));
                                                         },
                                                         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Minus.default, {})
-                                                    });
-                                                }
+                                                    })
                                             })
                                         })
                                     ]
@@ -483,9 +481,9 @@ function PrometheusDatasourceEditor(props) {
                     }),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
                         name: "Secret",
-                        render: ({ field , fieldState  })=>{
+                        render: ({ field, fieldState })=>{
                             var _value_proxy, _fieldState_error;
-                            /*#__PURE__*/ return (0, _jsxruntime.jsx)(_material.TextField, {
+                            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                                 ...field,
                                 fullWidth: true,
                                 label: "Secret",

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

@@ -25,8 +25,8 @@ const _PrometheusDatasourceEditor = require("./PrometheusDatasourceEditor");
 /**
  * Creates a PrometheusClient for a specific datasource spec.
  */ const createClient = (spec, options)=>{
-    const { directUrl , proxy  } = spec;
-    const { proxyUrl  } = options;
+    const { directUrl, proxy } = spec;
+    const { proxyUrl } = options;
     // Use the direct URL if specified, but fallback to the proxyUrl by default if not specified
     const datasourceUrl = directUrl !== null && directUrl !== void 0 ? directUrl : proxyUrl;
     if (datasourceUrl === undefined) {

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

@@ -26,7 +26,7 @@ const _pluginsystem = require("@perses-dev/plugin-system");
 const _model = require("../../model");
 const _components = require("../../components");
 function DashboardPrometheusTimeSeriesQueryEditor(props) {
-    const { selectedDatasource , handleDatasourceChange , promURL , query , handleQueryChange , handleQueryBlur , format , handleFormatBlur , handleMinStepChange , handleFormatChange , handleMinStepBlur , minStepPlaceholder , minStep  } = props;
+    const { selectedDatasource, handleDatasourceChange, promURL, query, handleQueryChange, handleQueryBlur, format, handleFormatBlur, handleMinStepChange, handleFormatChange, handleMinStepBlur, minStepPlaceholder, minStep } = props;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
         spacing: 2,
         children: [

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

@@ -26,8 +26,8 @@ const _pluginsystem = require("@perses-dev/plugin-system");
 const _model = require("../../model");
 const _components = require("../../components");
 function ExplorePrometheusTimeSeriesQueryEditor(props) {
-    const { selectedDatasource , handleDatasourceChange , promURL , query , handleQueryChange , handleQueryBlur , format , handleFormatBlur , handleMinStepChange , handleFormatChange , handleMinStepBlur , minStepPlaceholder , minStep  } = props;
-    const { project , setProject  } = (0, _pluginsystem.useProjectStore)();
+    const { selectedDatasource, handleDatasourceChange, promURL, query, handleQueryChange, handleQueryBlur, format, handleFormatBlur, handleMinStepChange, handleFormatChange, handleMinStepBlur, minStepPlaceholder, minStep } = props;
+    const { project, setProject } = (0, _pluginsystem.useProjectStore)();
     const handleProjectChange = (next)=>{
         handleDatasourceChange(_model.DEFAULT_PROM);
         return setProject(next);

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

@@ -29,15 +29,15 @@ const _queryeditormodel = require("./query-editor-model");
 const _DashboardPrometheusTimeSeriesQueryEditor = require("./DashboardPrometheusTimeSeriesQueryEditor");
 const _ExplorePrometheusTimeSeriesQueryEditor = require("./ExplorePrometheusTimeSeriesQueryEditor");
 function PrometheusTimeSeriesQueryEditor(props) {
-    const { onChange , value , isExplore  } = props;
-    const { datasource  } = value;
+    const { onChange, value, isExplore } = props;
+    const { datasource } = value;
     const selectedDatasource = datasource !== null && datasource !== void 0 ? datasource : _model.DEFAULT_PROM;
-    const { data: client  } = (0, _pluginsystem.useDatasourceClient)(selectedDatasource);
+    const { data: client } = (0, _pluginsystem.useDatasourceClient)(selectedDatasource);
     const promURL = client === null || client === void 0 ? void 0 : client.options.datasourceUrl;
-    const { data: datasourceResource  } = (0, _pluginsystem.useDatasource)(selectedDatasource);
-    const { query , handleQueryChange , handleQueryBlur  } = (0, _queryeditormodel.useQueryState)(props);
-    const { format , handleFormatChange , handleFormatBlur  } = (0, _queryeditormodel.useFormatState)(props);
-    const { minStep , handleMinStepChange , handleMinStepBlur  } = (0, _queryeditormodel.useMinStepState)(props);
+    const { data: datasourceResource } = (0, _pluginsystem.useDatasource)(selectedDatasource);
+    const { query, 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 handleDatasourceChange = (next)=>{

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

@@ -39,11 +39,13 @@ const getTimeSeriesData = async (spec, context)=>{
     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 minStep = (_getDurationStringSeconds = (0, _model.getDurationStringSeconds)(spec.minStep)) !== null && _getDurationStringSeconds !== void 0 ? _getDurationStringSeconds : datasourceScrapeInterval;
+    const minStep = (_getDurationStringSeconds = (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.replaceTemplateVariables)(spec.minStep, context.variableState))) !== null && _getDurationStringSeconds !== void 0 ? _getDurationStringSeconds : 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
-    let { start , end  } = timeRange;
+    let { start, end } = timeRange;
     const utcOffsetSec = new Date().getTimezoneOffset() * 60;
     const alignedEnd = Math.floor((end + utcOffsetSec) / step) * step - utcOffsetSec;
     const alignedStart = Math.floor((start + utcOffsetSec) / step) * step - utcOffsetSec;
@@ -102,9 +104,9 @@ const getTimeSeriesData = async (spec, context)=>{
         },
         stepMs: step * 1000,
         series: result.map((value)=>{
-            const { metric , values  } = value;
+            const { metric, values } = value;
             // Account for seriesNameFormat from query editor when determining name to show in legend, tooltip, etc.
-            const { name , formattedName  } = (0, _utils.getFormattedPrometheusSeriesName)(query, metric, seriesNameFormat);
+            const { name, formattedName } = (0, _utils.getFormattedPrometheusSeriesName)(query, metric, seriesNameFormat);
             return {
                 name,
                 values: values.map(_model.parseValueTuple),

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

@@ -21,20 +21,20 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    useQueryState: function() {
-        return useQueryState;
-    },
     useFormatState: function() {
         return useFormatState;
     },
     useMinStepState: function() {
         return useMinStepState;
+    },
+    useQueryState: function() {
+        return useQueryState;
     }
 });
 const _react = require("react");
 const _immer = require("immer");
 function useQueryState(props) {
-    const { onChange , value  } = props;
+    const { onChange, value } = props;
     // Local copy of the query's value
     const [query, setQuery] = (0, _react.useState)(value.query);
     // This is basically "getDerivedStateFromProps" to make sure if spec's value changes external to this component,
@@ -63,7 +63,7 @@ function useQueryState(props) {
     };
 }
 function useFormatState(props) {
-    const { onChange , value  } = props;
+    const { onChange, value } = props;
     // TODO: reusable hook or helper util instead of duplicating from useQueryState
     const [format, setFormat] = (0, _react.useState)(value.seriesNameFormat);
     const [lastSyncedFormat, setLastSyncedFormat] = (0, _react.useState)(value.seriesNameFormat);
@@ -89,7 +89,7 @@ function useFormatState(props) {
     };
 }
 function useMinStepState(props) {
-    const { onChange , value  } = props;
+    const { onChange, value } = props;
     // TODO: reusable hook or helper util instead of duplicating from useQueryState
     const [minStep, setMinStep] = (0, _react.useState)(value.minStep);
     const [lastSyncedMinStep, setLastSyncedMinStep] = (0, _react.useState)(value.minStep);

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

@@ -39,8 +39,8 @@ const _model = require("../model");
 const _components = require("../components");
 const _MatcherEditor = require("./MatcherEditor");
 function PrometheusLabelValuesVariableEditor(props) {
-    const { onChange , value  } = props;
-    const { datasource  } = value;
+    const { onChange, value } = props;
+    const { datasource } = value;
     const selectedDatasource = datasource !== null && datasource !== void 0 ? datasource : _model.DEFAULT_PROM;
     const handleDatasourceChange = (next)=>{
         if ((0, _model.isPrometheusDatasourceSelector)(next)) {
@@ -101,8 +101,8 @@ function PrometheusLabelValuesVariableEditor(props) {
     });
 }
 function PrometheusLabelNamesVariableEditor(props) {
-    const { onChange , value  } = props;
-    const { datasource  } = value;
+    const { onChange, value } = props;
+    const { datasource } = value;
     const selectedDatasource = datasource !== null && datasource !== void 0 ? datasource : _model.DEFAULT_PROM;
     const handleDatasourceChange = (next)=>{
         if ((0, _model.isPrometheusDatasourceSelector)(next)) {
@@ -149,10 +149,10 @@ function PrometheusLabelNamesVariableEditor(props) {
     });
 }
 function PrometheusPromQLVariableEditor(props) {
-    const { onChange , value  } = props;
-    const { datasource  } = value;
+    const { onChange, value } = props;
+    const { datasource } = value;
     const selectedDatasource = datasource !== null && datasource !== void 0 ? datasource : _model.DEFAULT_PROM;
-    const { data: client  } = (0, _pluginsystem.useDatasourceClient)(selectedDatasource);
+    const { data: client } = (0, _pluginsystem.useDatasourceClient)(selectedDatasource);
     const promURL = client === null || client === void 0 ? void 0 : client.options.datasourceUrl;
     const handleDatasourceChange = (next)=>{
         if ((0, _model.isPrometheusDatasourceSelector)(next)) {
@@ -251,7 +251,7 @@ const PrometheusLabelNamesVariable = {
         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.replaceTemplateVariables)(m, ctx.variables)) : undefined;
         const timeRange = (0, _model.getPrometheusTimeRange)(ctx.timeRange);
-        const { data: options  } = await client.labelNames({
+        const { data: options } = await client.labelNames({
             'match[]': match,
             ...timeRange
         });
@@ -275,7 +275,7 @@ const PrometheusLabelValuesVariable = {
         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.replaceTemplateVariables)(m, ctx.variables)) : undefined;
         const timeRange = (0, _model.getPrometheusTimeRange)(ctx.timeRange);
-        const { data: options  } = await client.labelValues({
+        const { data: options } = await client.labelValues({
             labelName: (0, _pluginsystem.replaceTemplateVariables)(pluginDef.labelName, ctx.variables),
             'match[]': match,
             ...timeRange
@@ -300,7 +300,7 @@ const PrometheusPromQLVariable = {
         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({
+        const { data: options } = await client.instantQuery({
             query: (0, _pluginsystem.replaceTemplateVariables)(spec.expr, ctx.variables)
         });
         const labelName = (0, _pluginsystem.replaceTemplateVariables)(spec.labelName, ctx.variables);

package/dist/cjs/utils/utils.js

@@ -24,11 +24,11 @@ _export(exports, {
     formatSeriesName: function() {
         return formatSeriesName;
     },
-    getUniqueKeyForPrometheusResult: function() {
-        return getUniqueKeyForPrometheusResult;
-    },
     getFormattedPrometheusSeriesName: function() {
         return getFormattedPrometheusSeriesName;
+    },
+    getUniqueKeyForPrometheusResult: function() {
+        return getUniqueKeyForPrometheusResult;
     }
 });
 const _core = require("@perses-dev/core");
@@ -56,7 +56,7 @@ function formatSeriesName(inputFormat, seriesLabels) {
     });
     return `{${labelStrings.join(',')}}`;
 }
-function getUniqueKeyForPrometheusResult(metricLabels, { removeExprWrap  } = {}) {
+function getUniqueKeyForPrometheusResult(metricLabels, { removeExprWrap } = {}) {
     const metricNameKey = '__name__';
     if (metricLabels) {
         if (Object.prototype.hasOwnProperty.call(metricLabels, metricNameKey)) {

package/dist/components/PromQL.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"PromQL.d.ts","sourceRoot":"","sources":["../../src/components/PromQL.tsx"],"names":[],"mappings":";AAaA,OAAmB,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AACzE,OAAO,EAAmB,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AAK1F,oBAAY,iBAAiB,GAAG;IAAE,cAAc,EAAE,qBAAqB,CAAA;CAAE,GAAG,IAAI,CAC9E,oBAAoB,EACpB,OAAO,GAAG,YAAY,CACvB,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAAE,cAAc,EAAE,GAAG,IAAI,EAAE,EAAE,iBAAiB,eAqB1E"}
+{"version":3,"file":"PromQL.d.ts","sourceRoot":"","sources":["../../src/components/PromQL.tsx"],"names":[],"mappings":"AAaA,OAAmB,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AACzE,OAAO,EAAmB,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AAK1F,MAAM,MAAM,iBAAiB,GAAG;IAAE,cAAc,EAAE,qBAAqB,CAAA;CAAE,GAAG,IAAI,CAC9E,oBAAoB,EACpB,OAAO,GAAG,YAAY,CACvB,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAAE,cAAc,EAAE,GAAG,IAAI,EAAE,EAAE,iBAAiB,2CAqB1E"}

package/dist/components/PromQL.js

@@ -16,7 +16,7 @@ import { PromQLExtension } from '@prometheus-io/codemirror-promql';
 import { EditorView } from '@codemirror/view';
 import { useTheme } from '@mui/material';
 import { useMemo } from 'react';
-export function PromQLEditor({ completeConfig , ...rest }) {
+export function PromQLEditor({ completeConfig, ...rest }) {
     const theme = useTheme();
     const isDarkMode = theme.palette.mode === 'dark';
     const promQLExtension = useMemo(()=>{

package/dist/components/PromQL.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/PromQL.tsx"],"sourcesContent":["// Copyright 2023 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 } from '@mui/material';\nimport { useMemo } from 'react';\n\nexport type PromQLEditorProps = { completeConfig: CompleteConfiguration } & Omit<\n  ReactCodeMirrorProps,\n  'theme' | 'extensions'\n>;\n\nexport function PromQLEditor({ completeConfig, ...rest }: PromQLEditorProps) {\n  const theme = useTheme();\n  const isDarkMode = theme.palette.mode === 'dark';\n\n  const promQLExtension = useMemo(() => {\n    return new PromQLExtension().activateLinter(false).setComplete(completeConfig).asExtension();\n  }, [completeConfig]);\n\n  return (\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={[EditorView.lineWrapping, promQLExtension]}\n    />\n  );\n}\n"],"names":["CodeMirror","PromQLExtension","EditorView","useTheme","useMemo","PromQLEditor","completeConfig","rest","theme","isDarkMode","palette","mode","promQLExtension","activateLinter","setComplete","asExtension","style","border","divider","basicSetup","highlightActiveLine","highlightActiveLineGutter","foldGutter","extensions","lineWrapping"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,OAAOA,gBAA0C,wBAAwB;AACzE,SAASC,eAAe,QAA+B,mCAAmC;AAC1F,SAASC,UAAU,QAAQ,mBAAmB;AAC9C,SAASC,QAAQ,QAAQ,gBAAgB;AACzC,SAASC,OAAO,QAAQ,QAAQ;AAOhC,OAAO,SAASC,aAAa,EAAEC,eAAc,EAAE,GAAGC,MAAyB;IACzE,MAAMC,QAAQL;IACd,MAAMM,aAAaD,MAAME,QAAQC,SAAS;IAE1C,MAAMC,kBAAkBR,QAAQ;QAC9B,OAAO,IAAIH,kBAAkBY,eAAe,OAAOC,YAAYR,gBAAgBS;IACjF,GAAG;QAACT;KAAe;IAEnB,qBACE,KAACN;QACE,GAAGO,IAAI;QACRS,OAAO;YAAEC,QAAQ,CAAC,UAAU,EAAET,MAAME,QAAQQ,QAAQ,CAAC;QAAC;QACtDV,OAAOC,aAAa,SAAS;QAC7BU,YAAY;YACVC,qBAAqB;YACrBC,2BAA2B;YAC3BC,YAAY;QACd;QACAC,YAAY;YAACrB,WAAWsB;YAAcZ;SAAgB;;AAG5D"}
+{"version":3,"sources":["../../src/components/PromQL.tsx"],"sourcesContent":["// Copyright 2023 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 } from '@mui/material';\nimport { useMemo } from 'react';\n\nexport type PromQLEditorProps = { completeConfig: CompleteConfiguration } & Omit<\n  ReactCodeMirrorProps,\n  'theme' | 'extensions'\n>;\n\nexport function PromQLEditor({ completeConfig, ...rest }: PromQLEditorProps) {\n  const theme = useTheme();\n  const isDarkMode = theme.palette.mode === 'dark';\n\n  const promQLExtension = useMemo(() => {\n    return new PromQLExtension().activateLinter(false).setComplete(completeConfig).asExtension();\n  }, [completeConfig]);\n\n  return (\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={[EditorView.lineWrapping, promQLExtension]}\n    />\n  );\n}\n"],"names":["CodeMirror","PromQLExtension","EditorView","useTheme","useMemo","PromQLEditor","completeConfig","rest","theme","isDarkMode","palette","mode","promQLExtension","activateLinter","setComplete","asExtension","style","border","divider","basicSetup","highlightActiveLine","highlightActiveLineGutter","foldGutter","extensions","lineWrapping"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,OAAOA,gBAA0C,wBAAwB;AACzE,SAASC,eAAe,QAA+B,mCAAmC;AAC1F,SAASC,UAAU,QAAQ,mBAAmB;AAC9C,SAASC,QAAQ,QAAQ,gBAAgB;AACzC,SAASC,OAAO,QAAQ,QAAQ;AAOhC,OAAO,SAASC,aAAa,EAAEC,cAAc,EAAE,GAAGC,MAAyB;IACzE,MAAMC,QAAQL;IACd,MAAMM,aAAaD,MAAME,OAAO,CAACC,IAAI,KAAK;IAE1C,MAAMC,kBAAkBR,QAAQ;QAC9B,OAAO,IAAIH,kBAAkBY,cAAc,CAAC,OAAOC,WAAW,CAACR,gBAAgBS,WAAW;IAC5F,GAAG;QAACT;KAAe;IAEnB,qBACE,KAACN;QACE,GAAGO,IAAI;QACRS,OAAO;YAAEC,QAAQ,CAAC,UAAU,EAAET,MAAME,OAAO,CAACQ,OAAO,CAAC,CAAC;QAAC;QACtDV,OAAOC,aAAa,SAAS;QAC7BU,YAAY;YACVC,qBAAqB;YACrBC,2BAA2B;YAC3BC,YAAY;QACd;QACAC,YAAY;YAACrB,WAAWsB,YAAY;YAAEZ;SAAgB;;AAG5D"}