@perses-dev/prometheus-plugin 0.0.0-snapshot-panel-extra-content-3-17f9c42 → 0.0.0-snapshot-scatterplot-fix-imports-95e1b59

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

@@ -16,25 +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");
+const _PrometheusDatasourceEditor = require("./PrometheusDatasourceEditor");
 /**
  * Creates a PrometheusClient for a specific datasource spec.
  */ const createClient = (spec, options)=>{
-    const { direct_url , headers: specHeaders  } = 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 = 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
@@ -53,10 +60,54 @@ const _prometheusDatasourceEditor = require("./PrometheusDatasourceEditor");
             })
     };
 };
+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: _prometheusDatasourceEditor.PrometheusDatasourceEditor,
+    getBuiltinVariableDefinitions,
+    OptionsEditorComponent: _PrometheusDatasourceEditor.PrometheusDatasourceEditor,
     createInitialOptions: ()=>({
-            direct_url: ''
+            directUrl: ''
         })
 };

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,31 @@ 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 _pluginsystem = require("@perses-dev/plugin-system");
 const _material = require("@mui/material");
-const _pluginSystem = require("@perses-dev/plugin-system");
 const _model = require("../../model");
+const _types = require("../types");
 const _components = require("../../components");
-const _queryEditorModel = require("./query-editor-model");
+const _queryeditormodel = require("./query-editor-model");
 function PrometheusTimeSeriesQueryEditor(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 datasourceSelectLabelID = `prom-datasource-label-${selectedDatasource.name || 'default'}`;
+    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,27 +52,27 @@ 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, {
-                        id: "prom-datasource-label",
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.InputLabel, {
+                        id: datasourceSelectLabelID,
                         children: "Prometheus Datasource"
                     }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.DatasourceSelect, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DatasourceSelect, {
                         datasourcePluginKind: _model.PROM_DATASOURCE_KIND,
                         value: selectedDatasource,
                         onChange: handleDatasourceChange,
-                        labelId: "prom-datasource-label",
+                        labelId: datasourceSelectLabelID,
                         label: "Prometheus Datasource"
                     })
                 ]
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.PromQLEditor, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.PromQLEditor, {
                 completeConfig: {
                     remote: {
                         url: promURL
@@ -74,14 +82,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,41 +16,61 @@ 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;
+    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;
     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,14 +99,14 @@ 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.
-            const { name , formattedName  } = (0, _utils.getFormattedPrometheusSeriesName)(query, metric, seriesNameFormat);
+            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);
             return {
                 name,
                 values: values.map(_model.parseValueTuple),

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,13 +21,20 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    useQueryState: ()=>useQueryState,
-    useFormatState: ()=>useFormatState
+    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,
@@ -56,23 +63,23 @@ 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.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
+    };
+}