@perses-dev/prometheus-plugin 0.39.0 → 0.40.0

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

@@ -16,23 +16,30 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "PrometheusTimeSeriesQueryEditor", {
     enumerable: true,
-    get: ()=>PrometheusTimeSeriesQueryEditor
+    get: function() {
+        return PrometheusTimeSeriesQueryEditor;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _immer = require("immer");
 const _material = require("@mui/material");
-const _pluginSystem = require("@perses-dev/plugin-system");
+const _pluginsystem = require("@perses-dev/plugin-system");
 const _model = require("../../model");
 const _components = require("../../components");
-const _queryEditorModel = require("./query-editor-model");
+const _PrometheusDatasourceEditor = require("../PrometheusDatasourceEditor");
+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 { 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 { query , handleQueryChange , handleQueryBlur  } = (0, _queryEditorModel.useQueryState)(props);
-    const { format , handleFormatChange , handleFormatBlur  } = (0, _queryEditorModel.useFormatState)(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 : _PrometheusDatasourceEditor.DEFAULT_SCRAPE_INTERVAL;
     const handleDatasourceChange = (next)=>{
         if ((0, _model.isPrometheusDatasourceSelector)(next)) {
             onChange((0, _immer.produce)(value, (draft)=>{
@@ -44,18 +51,18 @@ function PrometheusTimeSeriesQueryEditor(props) {
         }
         throw new Error('Got unexpected non-Prometheus datasource selector');
     };
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
         spacing: 2,
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.FormControl, {
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.FormControl, {
                 margin: "dense",
                 fullWidth: false,
                 children: [
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.InputLabel, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.InputLabel, {
                         id: "prom-datasource-label",
                         children: "Prometheus Datasource"
                     }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.DatasourceSelect, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DatasourceSelect, {
                         datasourcePluginKind: _model.PROM_DATASOURCE_KIND,
                         value: selectedDatasource,
                         onChange: handleDatasourceChange,
@@ -64,7 +71,7 @@ function PrometheusTimeSeriesQueryEditor(props) {
                     })
                 ]
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.PromQLEditor, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.PromQLEditor, {
                 completeConfig: {
                     remote: {
                         url: promURL
@@ -74,14 +81,31 @@ function PrometheusTimeSeriesQueryEditor(props) {
                 onChange: handleQueryChange,
                 onBlur: handleQueryBlur
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
-                fullWidth: true,
-                label: "Legend Name",
-                placeholder: "Tip: Use {{label_name}}. Example: {{instance}} will be replaced with values such as 'webserver-123' and 'webserver-456'.",
-                helperText: "Set the name for each series in the legend and the tooltip.",
-                value: format !== null && format !== void 0 ? format : '',
-                onChange: (e)=>handleFormatChange(e.target.value),
-                onBlur: handleFormatBlur
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                direction: "row",
+                spacing: 2,
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                        fullWidth: true,
+                        label: "Legend Name",
+                        placeholder: "Tip: Use {{label_name}}. Example: {{instance}} will be replaced with values such as 'webserver-123' and 'webserver-456'.",
+                        helperText: "Name for each series in the legend and the tooltip.",
+                        value: format !== null && format !== void 0 ? format : '',
+                        onChange: (e)=>handleFormatChange(e.target.value),
+                        onBlur: handleFormatBlur
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                        label: "Min Step",
+                        placeholder: minStepPlaceholder,
+                        helperText: "Step parameter of the query. Used by $__interval and $__rate_interval too.",
+                        value: minStep,
+                        onChange: (e)=>handleMinStepChange(e.target.value),
+                        onBlur: handleMinStepBlur,
+                        sx: {
+                            width: '250px'
+                        }
+                    })
+                ]
             })
         ]
     });

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

@@ -16,23 +16,32 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "getTimeSeriesData", {
     enumerable: true,
-    get: ()=>getTimeSeriesData
+    get: function() {
+        return getTimeSeriesData;
+    }
 });
-const _pluginSystem = require("@perses-dev/plugin-system");
-const _dateFns = require("date-fns");
+const _core = require("@perses-dev/core");
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _datefns = require("date-fns");
 const _model = require("../../model");
 const _utils = require("../../utils");
+const _PrometheusDatasourceEditor = require("../PrometheusDatasourceEditor");
 const getTimeSeriesData = async (spec, context)=>{
-    var ref;
+    var _response_data;
     if (spec.query === undefined || spec.query === null || spec.query === '') {
         // Do not make a request to the backend, instead return an empty TimeSeriesData
         return {
             series: []
         };
     }
-    const minStep = (0, _model.getDurationStringSeconds)(spec.min_step);
+    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 : _PrometheusDatasourceEditor.DEFAULT_SCRAPE_INTERVAL)) / 1000);
+    var _getDurationStringSeconds;
+    const minStep = (_getDurationStringSeconds = (0, _model.getDurationStringSeconds)(spec.minStep)) !== null && _getDurationStringSeconds !== void 0 ? _getDurationStringSeconds : datasourceScrapeInterval;
     const timeRange = (0, _model.getPrometheusTimeRange)(context.timeRange);
-    const step = (0, _model.getRangeStep)(timeRange, minStep, undefined, context.suggestedStepMs);
+    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;
     const utcOffsetSec = new Date().getTimezoneOffset() * 60;
@@ -40,17 +49,26 @@ const getTimeSeriesData = async (spec, context)=>{
     const alignedStart = Math.floor((start + utcOffsetSec) / step) * step - utcOffsetSec;
     start = alignedStart;
     end = alignedEnd;
+    var _context_suggestedStepMs;
     // Replace template variable placeholders in PromQL query
-    let query = spec.query.replace('$__rate_interval', `15s`);
-    query = (0, _pluginSystem.replaceTemplateVariables)(query, context.variableState);
-    let seriesNameFormat = spec.series_name_format;
+    const intervalMs = (_context_suggestedStepMs = context.suggestedStepMs) !== null && _context_suggestedStepMs !== void 0 ? _context_suggestedStepMs : step * 1000; // Step is in seconds
+    let query = (0, _pluginsystem.replaceTemplateVariable)(spec.query, '__interval_ms', intervalMs.toString());
+    query = (0, _pluginsystem.replaceTemplateVariable)(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.replaceTemplateVariable)(query, '__rate_interval', (0, _core.formatDuration)((0, _core.msToPrometheusDuration)(rateIntervalMs)));
+    query = (0, _pluginsystem.replaceTemplateVariables)(query, context.variableState);
+    let seriesNameFormat = spec.seriesNameFormat;
     // if series name format is defined, replace template variable placeholders in series name format
     if (seriesNameFormat) {
-        seriesNameFormat = (0, _pluginSystem.replaceTemplateVariables)(seriesNameFormat, context.variableState);
+        seriesNameFormat = (0, _pluginsystem.replaceTemplateVariables)(seriesNameFormat, context.variableState);
     }
-    var _datasource;
+    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((_datasource = spec.datasource) !== null && _datasource !== void 0 ? _datasource : _model.DEFAULT_PROM);
+    const client = await context.datasourceStore.getDatasourceClient((_spec_datasource1 = spec.datasource) !== null && _spec_datasource1 !== void 0 ? _spec_datasource1 : _model.DEFAULT_PROM);
     // Make the request to Prom
     const response = await client.rangeQuery({
         query,
@@ -58,16 +76,16 @@ const getTimeSeriesData = async (spec, context)=>{
         end,
         step
     });
-    var ref1;
+    var _response_data_result;
     // TODO: What about error responses from Prom that have a response body?
-    const result = (ref1 = (ref = response.data) === null || ref === void 0 ? void 0 : ref.result) !== null && ref1 !== void 0 ? ref1 : [];
+    const result = (_response_data_result = (_response_data = response.data) === null || _response_data === void 0 ? void 0 : _response_data.result) !== null && _response_data_result !== void 0 ? _response_data_result : [];
     // Custom display for response header warnings, configurable error responses display coming next
     const notices = [];
     if (response.status === 'success') {
-        var _warnings;
-        const warnings = (_warnings = response.warnings) !== null && _warnings !== void 0 ? _warnings : [];
-        var ref2;
-        const warningMessage = (ref2 = warnings[0]) !== null && ref2 !== void 0 ? ref2 : '';
+        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_ : '';
         if (warningMessage !== '') {
             notices.push({
                 type: 'warning',
@@ -79,13 +97,13 @@ const getTimeSeriesData = async (spec, context)=>{
     const chartData = {
         // Return the time range and step we actually used for the query
         timeRange: {
-            start: (0, _dateFns.fromUnixTime)(start),
-            end: (0, _dateFns.fromUnixTime)(end)
+            start: (0, _datefns.fromUnixTime)(start),
+            end: (0, _datefns.fromUnixTime)(end)
         },
         stepMs: step * 1000,
         series: result.map((value)=>{
             const { metric , values  } = value;
-            // Account for series_name_format from query editor when determining name to show in legend, tooltip, etc.
+            // Account for seriesNameFormat from query editor when determining name to show in legend, tooltip, etc.
             const { name , formattedName  } = (0, _utils.getFormattedPrometheusSeriesName)(query, metric, seriesNameFormat);
             return {
                 name,

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

@@ -14,15 +14,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./PrometheusTimeSeriesQuery"), exports);
-function _exportStar(from, to) {
+_export_star(require("./PrometheusTimeSeriesQuery"), 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];
-            }
-        });
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
     });
     return from;
 }

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

@@ -21,8 +21,15 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    useQueryState: ()=>useQueryState,
-    useFormatState: ()=>useFormatState
+    useQueryState: function() {
+        return useQueryState;
+    },
+    useFormatState: function() {
+        return useFormatState;
+    },
+    useMinStepState: function() {
+        return useMinStepState;
+    }
 });
 const _react = require("react");
 const _immer = require("immer");
@@ -58,21 +65,21 @@ function useQueryState(props) {
 function useFormatState(props) {
     const { onChange , value  } = props;
     // TODO: reusable hook or helper util instead of duplicating from useQueryState
-    const [format, setFormat] = (0, _react.useState)(value.series_name_format);
-    const [lastSyncedFormat, setLastSyncedFormat] = (0, _react.useState)(value.series_name_format);
-    if (value.series_name_format !== lastSyncedFormat) {
-        setFormat(value.series_name_format);
-        setLastSyncedFormat(value.series_name_format);
+    const [format, setFormat] = (0, _react.useState)(value.seriesNameFormat);
+    const [lastSyncedFormat, setLastSyncedFormat] = (0, _react.useState)(value.seriesNameFormat);
+    if (value.seriesNameFormat !== lastSyncedFormat) {
+        setFormat(value.seriesNameFormat);
+        setLastSyncedFormat(value.seriesNameFormat);
     }
     // Update our local state as the user types
     const handleFormatChange = (e)=>{
         setFormat(e);
     };
-    // Propagate changes to the panel preview component when series_name_format TextField is blurred
+    // Propagate changes to the panel preview component when seriesNameFormat TextField is blurred
     const handleFormatBlur = ()=>{
         setLastSyncedFormat(format);
         onChange((0, _immer.produce)(value, (draft)=>{
-            draft.series_name_format = format;
+            draft.seriesNameFormat = format;
         }));
     };
     return {
@@ -81,3 +88,29 @@ function useFormatState(props) {
         handleFormatBlur
     };
 }
+function useMinStepState(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);
+    if (value.minStep !== lastSyncedMinStep) {
+        setMinStep(value.minStep);
+        setLastSyncedMinStep(value.minStep);
+    }
+    // Update our local state as the user types
+    const handleMinStepChange = (e)=>{
+        setMinStep(e);
+    };
+    // Propagate changes to the panel preview component when minStep TextField is blurred
+    const handleMinStepBlur = ()=>{
+        setLastSyncedMinStep(minStep);
+        onChange((0, _immer.produce)(value, (draft)=>{
+            draft.minStep = minStep;
+        }));
+    };
+    return {
+        minStep,
+        handleMinStepChange,
+        handleMinStepBlur
+    };
+}

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

@@ -21,17 +21,23 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    PrometheusLabelNamesVariable: ()=>PrometheusLabelNamesVariable,
-    PrometheusLabelValuesVariable: ()=>PrometheusLabelValuesVariable,
-    PrometheusPromQLVariable: ()=>PrometheusPromQLVariable
+    PrometheusLabelNamesVariable: function() {
+        return PrometheusLabelNamesVariable;
+    },
+    PrometheusLabelValuesVariable: function() {
+        return PrometheusLabelValuesVariable;
+    },
+    PrometheusPromQLVariable: function() {
+        return PrometheusPromQLVariable;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
-const _pluginSystem = require("@perses-dev/plugin-system");
+const _jsxruntime = require("react/jsx-runtime");
+const _pluginsystem = require("@perses-dev/plugin-system");
 const _material = require("@mui/material");
 const _immer = require("immer");
 const _model = require("../model");
 const _components = require("../components");
-const _matcherEditor = require("./MatcherEditor");
+const _MatcherEditor = require("./MatcherEditor");
 function PrometheusLabelValuesVariableEditor(props) {
     const { onChange , value  } = props;
     const { datasource  } = value;
@@ -46,18 +52,18 @@ function PrometheusLabelValuesVariableEditor(props) {
         }
         throw new Error('Got unexpected non-Prometheus datasource selector');
     };
-    var _matchers;
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+    var _props_value_matchers;
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
         spacing: 2,
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.FormControl, {
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.FormControl, {
                 margin: "dense",
                 children: [
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.InputLabel, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.InputLabel, {
                         id: "prom-datasource-label",
                         children: "Prometheus Datasource"
                     }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.DatasourceSelect, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DatasourceSelect, {
                         datasourcePluginKind: "PrometheusDatasource",
                         value: selectedDatasource,
                         onChange: handleDatasourceChange,
@@ -67,22 +73,22 @@ function PrometheusLabelValuesVariableEditor(props) {
                     })
                 ]
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                 label: "Label Name",
                 required: true,
-                value: props.value.label_name,
+                value: props.value.labelName,
                 onChange: (e)=>{
                     props.onChange({
                         ...props.value,
-                        label_name: e.target.value
+                        labelName: e.target.value
                     });
                 },
                 InputProps: {
                     readOnly: props.isReadonly
                 }
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_matcherEditor.MatcherEditor, {
-                matchers: (_matchers = props.value.matchers) !== null && _matchers !== void 0 ? _matchers : [],
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_MatcherEditor.MatcherEditor, {
+                matchers: (_props_value_matchers = props.value.matchers) !== null && _props_value_matchers !== void 0 ? _props_value_matchers : [],
                 onChange: (e)=>{
                     props.onChange({
                         ...props.value,
@@ -108,18 +114,18 @@ function PrometheusLabelNamesVariableEditor(props) {
         }
         throw new Error('Got unexpected non-Prometheus datasource selector');
     };
-    var _matchers;
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+    var _props_value_matchers;
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
         spacing: 2,
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.FormControl, {
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.FormControl, {
                 margin: "dense",
                 children: [
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.InputLabel, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.InputLabel, {
                         id: "prom-datasource-label",
                         children: "Prometheus Datasource"
                     }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.DatasourceSelect, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DatasourceSelect, {
                         datasourcePluginKind: "PrometheusDatasource",
                         value: selectedDatasource,
                         onChange: handleDatasourceChange,
@@ -129,8 +135,8 @@ function PrometheusLabelNamesVariableEditor(props) {
                     })
                 ]
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_matcherEditor.MatcherEditor, {
-                matchers: (_matchers = props.value.matchers) !== null && _matchers !== void 0 ? _matchers : [],
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_MatcherEditor.MatcherEditor, {
+                matchers: (_props_value_matchers = props.value.matchers) !== null && _props_value_matchers !== void 0 ? _props_value_matchers : [],
                 isReadonly: props.isReadonly,
                 onChange: (e)=>{
                     props.onChange({
@@ -146,7 +152,7 @@ function PrometheusPromQLVariableEditor(props) {
     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)) {
@@ -158,17 +164,17 @@ function PrometheusPromQLVariableEditor(props) {
         }
         throw new Error('Got unexpected non-Prometheus datasource selector');
     };
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
         spacing: 2,
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.FormControl, {
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.FormControl, {
                 margin: "dense",
                 children: [
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.InputLabel, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.InputLabel, {
                         id: "prom-datasource-label",
                         children: "Prometheus Datasource"
                     }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.DatasourceSelect, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DatasourceSelect, {
                         datasourcePluginKind: _model.PROM_DATASOURCE_KIND,
                         value: selectedDatasource,
                         onChange: handleDatasourceChange,
@@ -178,7 +184,7 @@ function PrometheusPromQLVariableEditor(props) {
                     })
                 ]
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.PromQLEditor, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.PromQLEditor, {
                 completeConfig: {
                     remote: {
                         url: promURL
@@ -194,36 +200,36 @@ function PrometheusPromQLVariableEditor(props) {
                 readOnly: props.isReadonly,
                 width: "100%"
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                 label: "Label Name",
-                value: props.value.label_name,
+                value: props.value.labelName,
                 InputProps: {
                     readOnly: props.isReadonly
                 },
                 onChange: (e)=>{
                     props.onChange({
                         ...props.value,
-                        label_name: e.target.value
+                        labelName: e.target.value
                     });
                 }
             })
         ]
     });
 }
-function capturingMatrix(matrix, label_name) {
+function capturingMatrix(matrix, labelName) {
     const captured = new Set();
     for (const sample of matrix.result){
-        const value = sample.metric[label_name];
+        const value = sample.metric[labelName];
         if (value !== undefined) {
             captured.add(value);
         }
     }
     return Array.from(captured.values());
 }
-function capturingVector(vector, label_name) {
+function capturingVector(vector, labelName) {
     const captured = new Set();
     for (const sample of vector.result){
-        const value = sample.metric[label_name];
+        const value = sample.metric[labelName];
         if (value !== undefined) {
             captured.add(value);
         }
@@ -241,9 +247,9 @@ function capturingVector(vector, label_name) {
 };
 const PrometheusLabelNamesVariable = {
     getVariableOptions: async (spec, ctx)=>{
-        var _datasource;
-        const client = await ctx.datasourceStore.getDatasourceClient((_datasource = spec.datasource) !== null && _datasource !== void 0 ? _datasource : _model.DEFAULT_PROM);
-        const match = spec.matchers ? spec.matchers.map((m)=>(0, _pluginSystem.replaceTemplateVariables)(m, ctx.variables)) : undefined;
+        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.replaceTemplateVariables)(m, ctx.variables)) : undefined;
         const timeRange = (0, _model.getPrometheusTimeRange)(ctx.timeRange);
         const { data: options  } = await client.labelNames({
             'match[]': match,
@@ -254,9 +260,9 @@ const PrometheusLabelNamesVariable = {
         };
     },
     dependsOn: (spec)=>{
-        var ref;
+        var _spec_matchers;
         return {
-            variables: ((ref = spec.matchers) === null || ref === void 0 ? void 0 : ref.map((m)=>(0, _pluginSystem.parseTemplateVariables)(m)).flat()) || []
+            variables: ((_spec_matchers = spec.matchers) === null || _spec_matchers === void 0 ? void 0 : _spec_matchers.map((m)=>(0, _pluginsystem.parseTemplateVariables)(m)).flat()) || []
         };
     },
     OptionsEditorComponent: PrometheusLabelNamesVariableEditor,
@@ -265,12 +271,12 @@ const PrometheusLabelNamesVariable = {
 const PrometheusLabelValuesVariable = {
     getVariableOptions: async (spec, ctx)=>{
         const pluginDef = spec;
-        var _datasource;
-        const client = await ctx.datasourceStore.getDatasourceClient((_datasource = spec.datasource) !== null && _datasource !== void 0 ? _datasource : _model.DEFAULT_PROM);
-        const match = pluginDef.matchers ? pluginDef.matchers.map((m)=>(0, _pluginSystem.replaceTemplateVariables)(m, ctx.variables)) : undefined;
+        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.replaceTemplateVariables)(m, ctx.variables)) : undefined;
         const timeRange = (0, _model.getPrometheusTimeRange)(ctx.timeRange);
         const { data: options  } = await client.labelValues({
-            labelName: (0, _pluginSystem.replaceTemplateVariables)(pluginDef.label_name, ctx.variables),
+            labelName: (0, _pluginsystem.replaceTemplateVariables)(pluginDef.labelName, ctx.variables),
             'match[]': match,
             ...timeRange
         });
@@ -279,25 +285,25 @@ const PrometheusLabelValuesVariable = {
         };
     },
     dependsOn: (spec)=>{
-        var ref;
+        var _spec_matchers;
         return {
-            variables: ((ref = spec.matchers) === null || ref === void 0 ? void 0 : ref.map((m)=>(0, _pluginSystem.parseTemplateVariables)(m)).flat().concat((0, _pluginSystem.parseTemplateVariables)(spec.label_name))) || []
+            variables: ((_spec_matchers = spec.matchers) === null || _spec_matchers === void 0 ? void 0 : _spec_matchers.map((m)=>(0, _pluginsystem.parseTemplateVariables)(m)).flat().concat((0, _pluginsystem.parseTemplateVariables)(spec.labelName))) || []
         };
     },
     OptionsEditorComponent: PrometheusLabelValuesVariableEditor,
     createInitialOptions: ()=>({
-            label_name: ''
+            labelName: ''
         })
 };
 const PrometheusPromQLVariable = {
     getVariableOptions: async (spec, ctx)=>{
-        var _datasource;
-        const client = await ctx.datasourceStore.getDatasourceClient((_datasource = spec.datasource) !== null && _datasource !== void 0 ? _datasource : _model.DEFAULT_PROM);
+        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.replaceTemplateVariables)(spec.expr, ctx.variables)
+            query: (0, _pluginsystem.replaceTemplateVariables)(spec.expr, ctx.variables)
         });
-        const labelName = (0, _pluginSystem.replaceTemplateVariables)(spec.label_name, ctx.variables);
+        const labelName = (0, _pluginsystem.replaceTemplateVariables)(spec.labelName, ctx.variables);
         let values = [];
         if ((options === null || options === void 0 ? void 0 : options.resultType) === 'matrix') {
             values = capturingMatrix(options, labelName);
@@ -310,12 +316,12 @@ const PrometheusPromQLVariable = {
     },
     dependsOn: (spec)=>{
         return {
-            variables: (0, _pluginSystem.parseTemplateVariables)(spec.expr).concat((0, _pluginSystem.parseTemplateVariables)(spec.label_name))
+            variables: (0, _pluginsystem.parseTemplateVariables)(spec.expr).concat((0, _pluginsystem.parseTemplateVariables)(spec.labelName))
         };
     },
     OptionsEditorComponent: PrometheusPromQLVariableEditor,
     createInitialOptions: ()=>({
             expr: '',
-            label_name: ''
+            labelName: ''
         })
 };