@perses-dev/prometheus-plugin 0.56.0 → 0.57.0-beta.0

package/lib/cjs/explore/PrometheusMetricsFinder/utils.js

@@ -17,20 +17,20 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    useLabelValues: function() {
+    get useLabelValues () {
         return useLabelValues;
     },
-    useLabels: function() {
+    get useLabels () {
         return useLabels;
     },
-    useMetricMetadata: function() {
+    get useMetricMetadata () {
         return useMetricMetadata;
     },
-    useSeriesStates: function() {
+    get useSeriesStates () {
         return useSeriesStates;
     }
 });

package/lib/cjs/index-federation.js

@@ -1,15 +1,3 @@
-// Copyright 2024 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";
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
@@ -52,4 +40,16 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
+// Copyright 2024 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.
 Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("./bootstrap")));

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

@@ -17,14 +17,14 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    parseSampleValue: function() {
+    get parseSampleValue () {
         return parseSampleValue;
     },
-    parseValueTuple: function() {
+    get parseValueTuple () {
         return parseValueTuple;
     }
 });

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

@@ -17,42 +17,56 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    fetchResults: function() {
+    get fetchResults () {
         return fetchResults;
     },
-    healthCheck: function() {
+    get healthCheck () {
         return healthCheck;
     },
-    instantQuery: function() {
+    get instantQuery () {
         return instantQuery;
     },
-    labelNames: function() {
+    get labelNames () {
         return labelNames;
     },
-    labelValues: function() {
+    get labelValues () {
         return labelValues;
     },
-    metricMetadata: function() {
+    get metricMetadata () {
         return metricMetadata;
     },
-    parseQuery: function() {
+    get parseQuery () {
         return parseQuery;
     },
-    rangeQuery: function() {
+    get rangeQuery () {
         return rangeQuery;
     },
-    series: function() {
+    get series () {
         return series;
     }
 });
 const _core = require("@perses-dev/core");
+/**
+ * Builds a query string from datasource-level query parameters.
+ * Optionally merges with existing URLSearchParams.
+ * Returns empty string if no parameters, otherwise returns query string with leading '?'.
+ */ function buildQueryString(queryParams, initialParams) {
+    const urlParams = initialParams || new URLSearchParams();
+    if (queryParams) {
+        Object.entries(queryParams).forEach(([key, value])=>{
+            urlParams.set(key, value);
+        });
+    }
+    const queryString = urlParams.toString();
+    return queryString !== '' ? `?${queryString}` : '';
+}
 function healthCheck(queryOptions) {
     return async ()=>{
-        const url = `${queryOptions.datasourceUrl}/-/healthy`;
+        const url = `${queryOptions.datasourceUrl}/-/healthy${buildQueryString(queryOptions.queryParams)}`;
         try {
             const resp = await (0, _core.fetch)(url, {
                 headers: queryOptions.headers,
@@ -100,20 +114,16 @@ function parseQuery(params, queryOptions) {
     return fetchWithPost(apiURI, params, queryOptions);
 }
 function fetchWithGet(apiURI, params, queryOptions) {
-    const { datasourceUrl, headers } = queryOptions;
-    let url = `${datasourceUrl}${apiURI}`;
-    const urlParams = createSearchParams(params).toString();
-    if (urlParams !== '') {
-        url += `?${urlParams}`;
-    }
+    const { datasourceUrl, headers, queryParams } = queryOptions;
+    const url = `${datasourceUrl}${apiURI}${buildQueryString(queryParams, createSearchParams(params))}`;
     return (0, _core.fetchJson)(url, {
         method: 'GET',
         headers
     });
 }
 function fetchWithPost(apiURI, params, queryOptions) {
-    const { datasourceUrl, headers, abortSignal: signal } = queryOptions;
-    const url = `${datasourceUrl}${apiURI}`;
+    const { datasourceUrl, headers, abortSignal: signal, queryParams } = queryOptions;
+    const url = `${datasourceUrl}${apiURI}${buildQueryString(queryParams)}`;
     const init = {
         method: 'POST',
         headers: {

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

@@ -17,20 +17,20 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    DEFAULT_PROM: function() {
+    get DEFAULT_PROM () {
         return DEFAULT_PROM;
     },
-    PROM_DATASOURCE_KIND: function() {
+    get PROM_DATASOURCE_KIND () {
         return PROM_DATASOURCE_KIND;
     },
-    isDefaultPromSelector: function() {
+    get isDefaultPromSelector () {
         return isDefaultPromSelector;
     },
-    isPrometheusDatasourceSelector: function() {
+    get isPrometheusDatasourceSelector () {
         return isPrometheusDatasourceSelector;
     }
 });

package/lib/cjs/model/time.js

@@ -17,17 +17,17 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    getDurationStringSeconds: function() {
+    get getDurationStringSeconds () {
         return getDurationStringSeconds;
     },
-    getPrometheusTimeRange: function() {
+    get getPrometheusTimeRange () {
         return getPrometheusTimeRange;
     },
-    getRangeStep: function() {
+    get getRangeStep () {
         return getRangeStep;
     }
 });

package/lib/cjs/plugins/PrometheusDatasourceEditor.js

@@ -23,15 +23,127 @@ Object.defineProperty(exports, "PrometheusDatasourceEditor", {
 const _jsxruntime = require("react/jsx-runtime");
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _material = require("@mui/material");
-const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _Plus = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Plus"));
+const _Minus = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Minus"));
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _types = require("./types");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
 function PrometheusDatasourceEditor(props) {
     const { value, onChange, isReadonly } = props;
+    // Counter for generating unique IDs
+    const nextIdRef = (0, _react.useRef)(0);
+    // Use local state to maintain an array of entries during editing, instead of
+    // manipulating a map directly which causes weird UX.
+    const [entries, setEntries] = (0, _react.useState)(()=>{
+        const queryParams = value.queryParams ?? {};
+        return Object.entries(queryParams).map(([key, value])=>({
+                id: String(nextIdRef.current++),
+                key,
+                value
+            }));
+    });
+    // Check for duplicate keys
+    const keyMap = new Map();
+    const duplicateKeys = new Set();
+    entries.forEach(({ key })=>{
+        if (key !== '') {
+            const count = (keyMap.get(key) || 0) + 1;
+            keyMap.set(key, count);
+            if (count > 1) {
+                duplicateKeys.add(key);
+            }
+        }
+    });
+    const hasDuplicates = duplicateKeys.size > 0;
+    // Convert entries array to object and trigger onChange
+    const syncToParent = (newEntries)=>{
+        const newParams = {};
+        newEntries.forEach(({ key, value })=>{
+            if (key !== '') {
+                newParams[key] = value;
+            }
+        });
+        onChange({
+            ...value,
+            queryParams: Object.keys(newParams).length > 0 ? newParams : undefined
+        });
+    };
+    const handleQueryParamChange = (id, field, newValue)=>{
+        const newEntries = entries.map((entry)=>{
+            if (entry.id !== id) return entry;
+            return field === 'key' ? {
+                ...entry,
+                key: newValue
+            } : {
+                ...entry,
+                value: newValue
+            };
+        });
+        setEntries(newEntries);
+        syncToParent(newEntries);
+    };
+    const addQueryParam = ()=>{
+        const newEntries = [
+            ...entries,
+            {
+                id: String(nextIdRef.current++),
+                key: '',
+                value: ''
+            }
+        ];
+        setEntries(newEntries);
+        syncToParent(newEntries);
+    };
+    const removeQueryParam = (id)=>{
+        const newEntries = entries.filter((entry)=>entry.id !== id);
+        setEntries(newEntries);
+        syncToParent(newEntries);
+    };
     const initialSpecDirect = {
         directUrl: ''
     };
@@ -82,6 +194,7 @@ function PrometheusDatasourceEditor(props) {
                 children: "General Settings"
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                size: "small",
                 fullWidth: true,
                 label: "Scrape Interval",
                 value: value.scrapeInterval || '',
@@ -95,7 +208,8 @@ function PrometheusDatasourceEditor(props) {
                 onChange: (e)=>onChange({
                         ...value,
                         scrapeInterval: e.target.value
-                    })
+                    }),
+                helperText: "Set it to match the typical scrape interval used in your Prometheus instance."
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.HTTPSettingsEditor, {
                 value: value,
@@ -103,6 +217,65 @@ function PrometheusDatasourceEditor(props) {
                 isReadonly: isReadonly,
                 initialSpecDirect: initialSpecDirect,
                 initialSpecProxy: initialSpecProxy
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                variant: "h5",
+                mt: 2,
+                mb: 1,
+                children: "Query Parameters"
+            }),
+            entries.length > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+                children: entries.map((entry)=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 2,
+                        mb: 1,
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                                size: "small",
+                                label: "Key",
+                                value: entry.key,
+                                placeholder: "Parameter name",
+                                disabled: isReadonly,
+                                onChange: (e)=>handleQueryParamChange(entry.id, 'key', e.target.value),
+                                error: duplicateKeys.has(entry.key),
+                                sx: {
+                                    minWidth: 150
+                                }
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                                size: "small",
+                                label: "Value",
+                                value: entry.value,
+                                placeholder: "Parameter value",
+                                disabled: isReadonly,
+                                onChange: (e)=>handleQueryParamChange(entry.id, 'value', e.target.value),
+                                sx: {
+                                    minWidth: 150,
+                                    flexGrow: 1
+                                }
+                            }),
+                            !isReadonly && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                onClick: ()=>removeQueryParam(entry.id),
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Minus.default, {})
+                            })
+                        ]
+                    }, entry.id))
+            }),
+            hasDuplicates && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                variant: "body2",
+                color: "error",
+                mb: 1,
+                children: "Duplicate parameter keys detected. Each key must be unique."
+            }),
+            entries.length === 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                variant: "body2",
+                color: "textSecondary",
+                children: "No query parameters configured. Use query parameters to pass additional options to Prometheus (e.g., dedup=false for Thanos)."
+            }),
+            !isReadonly && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                onClick: addQueryParam,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Plus.default, {})
             })
         ]
     });

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

@@ -25,7 +25,7 @@ const _PrometheusDatasourceEditor = require("./PrometheusDatasourceEditor");
 /**
  * Creates a PrometheusClient for a specific datasource spec.
  */ const createClient = (spec, options)=>{
-    const { directUrl, proxy } = spec;
+    const { directUrl, proxy, queryParams } = spec;
     const { proxyUrl } = options;
     // Use the direct URL if specified, but fallback to the proxyUrl by default if not specified
     const datasourceUrl = directUrl ?? proxyUrl;
@@ -40,42 +40,50 @@ const _PrometheusDatasourceEditor = require("./PrometheusDatasourceEditor");
         },
         healthCheck: (0, _model.healthCheck)({
             datasourceUrl,
-            headers: specHeaders
+            headers: specHeaders,
+            queryParams
         }),
         instantQuery: (params, headers, abortSignal)=>(0, _model.instantQuery)(params, {
                 datasourceUrl,
                 headers: headers ?? specHeaders,
-                abortSignal
+                abortSignal,
+                queryParams
             }),
         rangeQuery: (params, headers, abortSignal)=>(0, _model.rangeQuery)(params, {
                 datasourceUrl,
                 headers: headers ?? specHeaders,
-                abortSignal
+                abortSignal,
+                queryParams
             }),
         labelNames: (params, headers, abortSignal)=>(0, _model.labelNames)(params, {
                 datasourceUrl,
                 headers: headers ?? specHeaders,
-                abortSignal
+                abortSignal,
+                queryParams
             }),
         labelValues: (params, headers, abortSignal)=>(0, _model.labelValues)(params, {
                 datasourceUrl,
                 headers: headers ?? specHeaders,
-                abortSignal
+                abortSignal,
+                queryParams
             }),
         metricMetadata: (params, headers, abortSignal)=>(0, _model.metricMetadata)(params, {
                 datasourceUrl,
                 headers: headers ?? specHeaders,
-                abortSignal
+                abortSignal,
+                queryParams
             }),
         series: (params, headers, abortSignal)=>(0, _model.series)(params, {
                 datasourceUrl,
                 headers: headers ?? specHeaders,
-                abortSignal
+                abortSignal,
+                queryParams
             }),
         parseQuery: (params, headers, abortSignal)=>(0, _model.parseQuery)(params, {
                 datasourceUrl,
                 headers: headers ?? specHeaders,
-                abortSignal
+                abortSignal,
+                queryParams
             })
     };
 };

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

@@ -25,6 +25,8 @@ const _immer = require("immer");
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _components = require("@perses-dev/components");
 const _material = require("@mui/material");
+const _react = require("react");
+const _dashboards = require("@perses-dev/dashboards");
 const _model = require("../../model");
 const _types = require("../types");
 const _components1 = require("../../components");
@@ -55,6 +57,38 @@ function PrometheusTimeSeriesQueryEditor(props) {
         }
         throw new Error('Got unexpected non-Prometheus datasource selector');
     };
+    const variableState = (0, _pluginsystem.useAllVariableValues)();
+    const { absoluteTimeRange } = (0, _pluginsystem.useTimeRange)();
+    const panelEditorContext = (0, _react.useContext)(_dashboards.PanelEditorContext);
+    const suggestedStepMs = (0, _pluginsystem.useSuggestedStepMs)(panelEditorContext?.preview.previewPanelWidth);
+    const minStepMs = (0, _react.useMemo)(()=>{
+        /* Try catch is necessary, because when the minStep value is being typed, it will be valid when the duration unit is added. Example: 2m = 2 + m */ try {
+            const durationsSeconds = (0, _model.getDurationStringSeconds)((0, _pluginsystem.replaceVariables)(minStepPlaceholder, variableState));
+            return durationsSeconds !== undefined ? durationsSeconds * 1000 : undefined;
+        } catch  {
+            return undefined;
+        }
+    }, [
+        variableState,
+        minStepPlaceholder
+    ]);
+    const intervalMs = (0, _react.useMemo)(()=>{
+        const minStepSeconds = (minStepMs ?? 0) / 1000;
+        return (0, _model.getRangeStep)((0, _model.getPrometheusTimeRange)(absoluteTimeRange), minStepSeconds, undefined, suggestedStepMs) * 1000;
+    }, [
+        absoluteTimeRange,
+        minStepMs,
+        suggestedStepMs
+    ]);
+    const treeViewMetadata = (0, _react.useMemo)(()=>{
+        return minStepMs && intervalMs ? {
+            minStepMs,
+            intervalMs
+        } : undefined;
+    }, [
+        minStepMs,
+        intervalMs
+    ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
         spacing: 2,
         children: [
@@ -81,7 +115,8 @@ function PrometheusTimeSeriesQueryEditor(props) {
                 datasource: selectedDatasource,
                 onChange: handleQueryChange,
                 onBlur: handleQueryBlur,
-                isReadOnly: isReadonly
+                isReadOnly: isReadonly,
+                treeViewMetadata: treeViewMetadata
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
                 direction: "row",

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

@@ -17,17 +17,17 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    useFormatState: function() {
+    get useFormatState () {
         return useFormatState;
     },
-    useMinStepState: function() {
+    get useMinStepState () {
         return useMinStepState;
     },
-    useQueryState: function() {
+    get useQueryState () {
         return useQueryState;
     }
 });