@perses-dev/prometheus-plugin 0.0.0-snapshot-panel-extra-content-2-2767e21 → 0.0.0-snapshot-scatter-chart-embed-8efdfab

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

@@ -16,24 +16,32 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "PrometheusDatasource", {
     enumerable: true,
-    get: ()=>PrometheusDatasource
+    get: function() {
+        return PrometheusDatasource;
+    }
 });
 const _model = require("../model");
+const _PrometheusDatasourceEditor = require("./PrometheusDatasourceEditor");
 /**
  * Creates a PrometheusClient for a specific datasource spec.
  */ const createClient = (spec, options)=>{
-    const { direct_url , headers: specHeaders  } = spec;
+    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 = direct_url !== null && direct_url !== void 0 ? direct_url : proxyUrl;
+    const datasourceUrl = directUrl !== null && directUrl !== void 0 ? directUrl : proxyUrl;
     if (datasourceUrl === undefined) {
-        throw new Error('No URL specified for Prometheus client. You can use direct_url in the spec to configure it.');
+        throw new Error('No URL specified for Prometheus client. You can use directUrl in the spec to configure it.');
     }
+    const specHeaders = proxy === null || proxy === void 0 ? void 0 : proxy.spec.headers;
     // Could think about this becoming a class, although it definitely doesn't have to be
     return {
         options: {
             datasourceUrl
         },
+        healthCheck: (0, _model.healthCheck)({
+            datasourceUrl,
+            headers: specHeaders
+        }),
         instantQuery: (params, headers)=>(0, _model.instantQuery)(params, {
                 datasourceUrl,
                 headers: headers !== null && headers !== void 0 ? headers : specHeaders
@@ -52,10 +60,54 @@ const _model = require("../model");
             })
     };
 };
+const getBuiltinVariableDefinitions = ()=>{
+    return [
+        {
+            kind: 'BuiltinVariable',
+            spec: {
+                name: '__interval',
+                value: ()=>'$__interval',
+                source: 'Prometheus',
+                display: {
+                    name: '__interval',
+                    description: 'Interval that can be used to group by time in queries. When there are more data points than can be shown on a graph then queries can be made more efficient by grouping by a larger interval.',
+                    hidden: true
+                }
+            }
+        },
+        {
+            kind: 'BuiltinVariable',
+            spec: {
+                name: '__interval_ms',
+                value: ()=>'$__interval_ms',
+                source: 'Prometheus',
+                display: {
+                    name: '__interval_ms',
+                    description: 'Interval in millisecond that can be used to group by time in queries. When there are more data points than can be shown on a graph then queries can be made more efficient by grouping by a larger interval.',
+                    hidden: true
+                }
+            }
+        },
+        {
+            kind: 'BuiltinVariable',
+            spec: {
+                name: '__rate_interval',
+                value: ()=>'$__rate_interval',
+                source: 'Prometheus',
+                display: {
+                    name: '__rate_interval',
+                    description: "Interval at least four times the value of the scrape interval. It avoids problems specific to Prometheus when using 'rate' and 'increase' functions.",
+                    hidden: true
+                }
+            }
+        }
+    ];
+};
 const PrometheusDatasource = {
     createClient,
-    OptionsEditorComponent: ()=>null,
+    getBuiltinVariableDefinitions,
+    OptionsEditorComponent: _PrometheusDatasourceEditor.PrometheusDatasourceEditor,
     createInitialOptions: ()=>({
-            direct_url: ''
+            directUrl: ''
         })
 };

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

@@ -0,0 +1,88 @@
+// 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
+});
+Object.defineProperty(exports, "DashboardPrometheusTimeSeriesQueryEditor", {
+    enumerable: true,
+    get: function() {
+        return DashboardPrometheusTimeSeriesQueryEditor;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+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;
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+        spacing: 2,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.FormControl, {
+                margin: "dense",
+                fullWidth: false,
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.InputLabel, {
+                        id: "prom-datasource-label",
+                        children: "Prometheus Datasource"
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DatasourceSelect, {
+                        datasourcePluginKind: _model.PROM_DATASOURCE_KIND,
+                        value: selectedDatasource,
+                        onChange: handleDatasourceChange,
+                        labelId: "prom-datasource-label",
+                        label: "Prometheus Datasource"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.PromQLEditor, {
+                completeConfig: {
+                    remote: {
+                        url: promURL
+                    }
+                },
+                value: query,
+                onChange: handleQueryChange,
+                onBlur: handleQueryBlur
+            }),
+            /*#__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/ExplorePrometheusTimeSeriesQueryEditor.js

@@ -0,0 +1,123 @@
+// 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
+});
+Object.defineProperty(exports, "ExplorePrometheusTimeSeriesQueryEditor", {
+    enumerable: true,
+    get: function() {
+        return ExplorePrometheusTimeSeriesQueryEditor;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+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 handleProjectChange = (next)=>{
+        handleDatasourceChange(_model.DEFAULT_PROM);
+        return setProject(next);
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+        spacing: 2,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Grid, {
+                container: true,
+                spacing: 2,
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
+                        item: true,
+                        xs: 2,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.FormControl, {
+                            margin: "dense",
+                            fullWidth: true,
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.InputLabel, {
+                                    id: "project-label",
+                                    children: "Projects"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.ProjectSelect, {
+                                    labelId: "project-label",
+                                    label: "Projects",
+                                    value: project,
+                                    onChange: handleProjectChange
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
+                        item: true,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.FormControl, {
+                            margin: "dense",
+                            fullWidth: true,
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.InputLabel, {
+                                    id: "prom-datasource-label",
+                                    children: "Prometheus Datasource"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DatasourceSelect, {
+                                    datasourcePluginKind: _model.PROM_DATASOURCE_KIND,
+                                    value: selectedDatasource,
+                                    project: project.metadata.name,
+                                    onChange: handleDatasourceChange,
+                                    labelId: "prom-datasource-label",
+                                    label: "Prometheus Datasource"
+                                })
+                            ]
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.PromQLEditor, {
+                completeConfig: {
+                    remote: {
+                        url: promURL
+                    }
+                },
+                value: query,
+                onChange: handleQueryChange,
+                onBlur: handleQueryBlur
+            }),
+            /*#__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/PrometheusTimeSeriesQuery.js

@@ -16,22 +16,24 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "PrometheusTimeSeriesQuery", {
     enumerable: true,
-    get: ()=>PrometheusTimeSeriesQuery
+    get: function() {
+        return PrometheusTimeSeriesQuery;
+    }
 });
-const _pluginSystem = require("@perses-dev/plugin-system");
-const _getTimeSeriesData = require("./get-time-series-data");
-const _prometheusTimeSeriesQueryEditor = require("./PrometheusTimeSeriesQueryEditor");
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _gettimeseriesdata = require("./get-time-series-data");
+const _PrometheusTimeSeriesQueryEditor = require("./PrometheusTimeSeriesQueryEditor");
 const PrometheusTimeSeriesQuery = {
-    getTimeSeriesData: _getTimeSeriesData.getTimeSeriesData,
-    OptionsEditorComponent: _prometheusTimeSeriesQueryEditor.PrometheusTimeSeriesQueryEditor,
+    getTimeSeriesData: _gettimeseriesdata.getTimeSeriesData,
+    OptionsEditorComponent: _PrometheusTimeSeriesQueryEditor.PrometheusTimeSeriesQueryEditor,
     createInitialOptions: ()=>({
             query: '',
             datasource: undefined
         }),
     dependsOn: (spec)=>{
         // Variables can be used in the query and/or in the legend format string
-        const queryVariables = (0, _pluginSystem.parseTemplateVariables)(spec.query);
-        const legendVariables = (0, _pluginSystem.parseTemplateVariables)(spec.series_name_format || '');
+        const queryVariables = (0, _pluginsystem.parseTemplateVariables)(spec.query);
+        const legendVariables = (0, _pluginsystem.parseTemplateVariables)(spec.seriesNameFormat || '');
         const allVariables = [
             ...new Set([
                 ...queryVariables,

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 _types = require("../types");
+const _queryeditormodel = require("./query-editor-model");
+const _DashboardPrometheusTimeSeriesQueryEditor = require("./DashboardPrometheusTimeSeriesQueryEditor");
+const _ExplorePrometheusTimeSeriesQueryEditor = require("./ExplorePrometheusTimeSeriesQueryEditor");
 function PrometheusTimeSeriesQueryEditor(props) {
-    const { onChange , value  } = props;
+    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 { 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 : _types.DEFAULT_SCRAPE_INTERVAL;
     const handleDatasourceChange = (next)=>{
         if ((0, _model.isPrometheusDatasourceSelector)(next)) {
             onChange((0, _immer.produce)(value, (draft)=>{
@@ -44,45 +51,36 @@ function PrometheusTimeSeriesQueryEditor(props) {
         }
         throw new Error('Got unexpected non-Prometheus datasource selector');
     };
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
-        spacing: 2,
-        children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.FormControl, {
-                margin: "dense",
-                fullWidth: false,
-                children: [
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.InputLabel, {
-                        id: "prom-datasource-label",
-                        children: "Prometheus Datasource"
-                    }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.DatasourceSelect, {
-                        datasourcePluginKind: _model.PROM_DATASOURCE_KIND,
-                        value: selectedDatasource,
-                        onChange: handleDatasourceChange,
-                        labelId: "prom-datasource-label",
-                        label: "Prometheus Datasource"
-                    })
-                ]
-            }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.PromQLEditor, {
-                completeConfig: {
-                    remote: {
-                        url: promURL
-                    }
-                },
-                value: query,
-                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
-            })
-        ]
+    if (isExplore) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_ExplorePrometheusTimeSeriesQueryEditor.ExplorePrometheusTimeSeriesQueryEditor, {
+            selectedDatasource: selectedDatasource,
+            handleDatasourceChange: handleDatasourceChange,
+            promURL: promURL,
+            query: query,
+            handleQueryChange: handleQueryChange,
+            handleQueryBlur: handleQueryBlur,
+            format: format,
+            handleFormatChange: handleFormatChange,
+            handleFormatBlur: handleFormatBlur,
+            minStepPlaceholder: minStepPlaceholder,
+            minStep: minStep,
+            handleMinStepChange: handleMinStepChange,
+            handleMinStepBlur: handleMinStepBlur
+        });
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_DashboardPrometheusTimeSeriesQueryEditor.DashboardPrometheusTimeSeriesQueryEditor, {
+        selectedDatasource: selectedDatasource,
+        handleDatasourceChange: handleDatasourceChange,
+        promURL: promURL,
+        query: query,
+        handleQueryChange: handleQueryChange,
+        handleQueryBlur: handleQueryBlur,
+        format: format,
+        handleFormatChange: handleFormatChange,
+        handleFormatBlur: handleFormatBlur,
+        minStepPlaceholder: minStepPlaceholder,
+        minStep: minStep,
+        handleMinStepChange: handleMinStepChange,
+        handleMinStepBlur: handleMinStepBlur
     });
 }

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

@@ -16,23 +16,34 @@ 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 _types = require("../types");
 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 : _types.DEFAULT_SCRAPE_INTERVAL)) / 1000);
+    var _getDurationStringSeconds;
+    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);
+    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 +51,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 +78,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 +99,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;
 }