@perses-dev/prometheus-plugin 0.56.0 → 0.57.0-rc.1

package/lib/cjs/plugins/PrometheusDatasourceEditor.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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
@@ -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/PrometheusLabelNamesVariable.js

@@ -1,3 +1,15 @@
+// Copyright 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

package/lib/cjs/plugins/PrometheusLabelValuesVariable.js

@@ -1,3 +1,15 @@
+// Copyright 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

package/lib/cjs/plugins/PrometheusPromQLVariable.js

@@ -1,3 +1,15 @@
+// Copyright 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

package/lib/cjs/plugins/index.js

@@ -1,3 +1,15 @@
+// Copyright 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

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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
@@ -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/PrometheusTimeSeriesQuery.js

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// Copyright 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

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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
@@ -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/get-time-series-data.js

@@ -1,4 +1,4 @@
-// Copyright 2025 The Perses Authors
+// Copyright 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

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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
@@ -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;
     }
 });

package/lib/cjs/plugins/prometheus-time-series-query/replace-prom-builtin-variables.js

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// Copyright 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

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 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

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

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// Copyright 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
@@ -17,26 +17,26 @@ 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, {
-    PrometheusLabelNamesVariableEditor: function() {
+    get PrometheusLabelNamesVariableEditor () {
         return PrometheusLabelNamesVariableEditor;
     },
-    PrometheusLabelValuesVariableEditor: function() {
+    get PrometheusLabelValuesVariableEditor () {
         return PrometheusLabelValuesVariableEditor;
     },
-    PrometheusPromQLVariableEditor: function() {
+    get PrometheusPromQLVariableEditor () {
         return PrometheusPromQLVariableEditor;
     },
-    capturingMatrix: function() {
+    get capturingMatrix () {
         return capturingMatrix;
     },
-    capturingVector: function() {
+    get capturingVector () {
         return capturingVector;
     },
-    stringArrayToVariableOptions: function() {
+    get stringArrayToVariableOptions () {
         return stringArrayToVariableOptions;
     }
 });
@@ -51,8 +51,6 @@ const _MatcherEditor = require("./MatcherEditor");
 function PrometheusLabelValuesVariableEditor(props) {
     const { onChange, value, value: { datasource } } = props;
     const selectedDatasource = datasource ?? _model.DEFAULT_PROM;
-    const [labelValue, setLabelValue] = (0, _react.useState)(props.value.labelName);
-    const [matchersValues, setMatchersValues] = (0, _react.useState)(props.value.matchers ?? []);
     const handleDatasourceChange = (0, _react.useCallback)((next)=>{
         if ((0, _pluginsystem.isVariableDatasource)(next) || (0, _model.isPrometheusDatasourceSelector)(next)) {
             onChange((0, _immer.produce)(value, (draft)=>{
@@ -67,11 +65,21 @@ function PrometheusLabelValuesVariableEditor(props) {
         value
     ]);
     const handleLabelChange = (0, _react.useCallback)((e)=>{
-        setLabelValue(e.target.value);
-    }, []);
-    const handleMatchEditorsChange = (0, _react.useCallback)((e)=>{
-        setMatchersValues(e);
-    }, []);
+        onChange((0, _immer.produce)(value, (draft)=>{
+            draft.labelName = e.target.value;
+        }));
+    }, [
+        onChange,
+        value
+    ]);
+    const handleMatchEditorsChange = (0, _react.useCallback)((matchers)=>{
+        onChange((0, _immer.produce)(value, (draft)=>{
+            draft.matchers = matchers;
+        }));
+    }, [
+        onChange,
+        value
+    ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
         spacing: 2,
         children: [
@@ -89,14 +97,16 @@ function PrometheusLabelValuesVariableEditor(props) {
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                 label: "Label Name",
                 required: true,
-                value: labelValue,
+                value: props.value.labelName,
                 onChange: handleLabelChange,
-                InputProps: {
-                    readOnly: props.isReadonly
+                slotProps: {
+                    input: {
+                        readOnly: props.isReadonly
+                    }
                 }
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_MatcherEditor.MatcherEditor, {
-                matchers: matchersValues,
+                matchers: props.value.matchers ?? [],
                 onChange: handleMatchEditorsChange,
                 isReadonly: props.isReadonly
             })
@@ -106,7 +116,6 @@ function PrometheusLabelValuesVariableEditor(props) {
 function PrometheusLabelNamesVariableEditor(props) {
     const { onChange, value, value: { datasource } } = props;
     const selectedDatasource = datasource ?? _model.DEFAULT_PROM;
-    const [matchersValues, setMatchersValues] = (0, _react.useState)(props.value.matchers ?? []);
     const handleDatasourceChange = (0, _react.useCallback)((next)=>{
         if ((0, _pluginsystem.isVariableDatasource)(next) || (0, _model.isPrometheusDatasourceSelector)(next)) {
             onChange((0, _immer.produce)(value, (draft)=>{
@@ -120,9 +129,14 @@ function PrometheusLabelNamesVariableEditor(props) {
         onChange,
         value
     ]);
-    const handleMatchEditorChange = (0, _react.useCallback)((e)=>{
-        setMatchersValues(e);
-    }, []);
+    const handleMatchEditorChange = (0, _react.useCallback)((matchers)=>{
+        onChange((0, _immer.produce)(value, (draft)=>{
+            draft.matchers = matchers;
+        }));
+    }, [
+        onChange,
+        value
+    ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
         spacing: 2,
         children: [
@@ -138,7 +152,7 @@ function PrometheusLabelNamesVariableEditor(props) {
                 })
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_MatcherEditor.MatcherEditor, {
-                matchers: matchersValues,
+                matchers: props.value.matchers ?? [],
                 isReadonly: props.isReadonly,
                 onChange: handleMatchEditorChange
             })
@@ -151,7 +165,6 @@ function PrometheusPromQLVariableEditor(props) {
     const selectedDatasource = (0, _pluginsystem.useDatasourceSelectValueToSelector)(datasourceSelectValue, _model.PROM_DATASOURCE_KIND);
     const { data: client } = (0, _pluginsystem.useDatasourceClient)(selectedDatasource);
     const promURL = client?.options.datasourceUrl;
-    const [labelValue, setLabelValue] = (0, _react.useState)(props.value.labelName);
     const handleDatasourceChange = (0, _react.useCallback)((next)=>{
         if ((0, _pluginsystem.isVariableDatasource)(next) || (0, _model.isPrometheusDatasourceSelector)(next)) {
             onChange((0, _immer.produce)(value, (draft)=>{
@@ -166,17 +179,21 @@ function PrometheusPromQLVariableEditor(props) {
         onChange
     ]);
     const handleOnBlurPromQlChange = (0, _react.useCallback)((e)=>{
-        onChange({
-            ...value,
-            expr: e.target.textContent ?? ''
-        });
+        onChange((0, _immer.produce)(value, (draft)=>{
+            draft.expr = e.target.textContent ?? '';
+        }));
     }, [
         onChange,
         value
     ]);
     const handleLabelNameChange = (0, _react.useCallback)((e)=>{
-        setLabelValue(e.target.value);
-    }, []);
+        onChange((0, _immer.produce)(value, (draft)=>{
+            draft.labelName = e.target.value;
+        }));
+    }, [
+        onChange,
+        value
+    ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
         spacing: 2,
         children: [
@@ -206,9 +223,11 @@ function PrometheusPromQLVariableEditor(props) {
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                 label: "Label Name",
                 required: true,
-                value: labelValue,
-                InputProps: {
-                    readOnly: props.isReadonly
+                value: props.value.labelName,
+                slotProps: {
+                    input: {
+                        readOnly: props.isReadonly
+                    }
                 },
                 onChange: handleLabelNameChange
             })