@perses-dev/prometheus-plugin 0.37.2 → 0.39.0

package/dist/cjs/plugins/MatcherEditor.js

@@ -27,7 +27,7 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
-function MatcherEditor({ matchers , onChange  }) {
+function MatcherEditor({ matchers , onChange , isReadonly  }) {
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
         spacing: 1,
         mb: 2,
@@ -39,6 +39,9 @@ function MatcherEditor({ matchers , onChange  }) {
                             fullWidth: true,
                             label: "Series Selector",
                             value: matcher,
+                            InputProps: {
+                                readOnly: isReadonly
+                            },
                             onChange: (e)=>{
                                 const newMatchers = (0, _immer.produce)(matchers, (draft)=>{
                                     draft[index] = e.target.value;
@@ -53,6 +56,7 @@ function MatcherEditor({ matchers , onChange  }) {
                                 });
                                 onChange(newMatchers);
                             },
+                            disabled: isReadonly,
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_trashCan.default, {})
                         })
                     ]
@@ -68,6 +72,7 @@ function MatcherEditor({ matchers , onChange  }) {
                         });
                         onChange(newMatchers);
                     },
+                    disabled: isReadonly,
                     children: "Add Series Selector"
                 })
             })

package/dist/cjs/plugins/PrometheusDatasourceEditor/PrometheusDatasourceEditor.js

@@ -0,0 +1,392 @@
+// 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, "PrometheusDatasourceEditor", {
+    enumerable: true,
+    get: ()=>PrometheusDatasourceEditor
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _pluginSystem = require("@perses-dev/plugin-system");
+const _material = require("@mui/material");
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _minus = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Minus"));
+const _plus = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Plus"));
+function _interopRequireDefault(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 _interopRequireWildcard(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 = {};
+    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) {
+    var ref, ref1, ref2, ref3;
+    const { value , onChange , isReadonly  } = props;
+    const strDirect = 'Direct access';
+    const strProxy = 'Proxy';
+    // TODO refactor with useImmer to avoid doing so much destructuring? feasibility & performances to be checked
+    // utilitary function used for headers when renaming a property
+    // -> TODO it would be cleaner to manipulate headers as a list instead, to avoid doing this.
+    //    This could be a pure frontend trick, but change in the backend datamodel should also be considered
+    const buildNewHeaders = (oldHeaders, oldName, newName)=>{
+        if (oldHeaders === undefined) return oldHeaders;
+        const keys = Object.keys(oldHeaders);
+        const newHeaders = keys.reduce((acc, val)=>{
+            if (val === oldName) {
+                acc[newName] = oldHeaders[oldName] || '';
+            } else {
+                acc[val] = oldHeaders[val] || '';
+            }
+            return acc;
+        }, {});
+        return {
+            ...newHeaders
+        };
+    };
+    const tabs = [
+        {
+            label: strDirect,
+            content: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                    fullWidth: true,
+                    label: "URL",
+                    value: value.direct_url || '',
+                    InputProps: {
+                        readOnly: isReadonly
+                    },
+                    onChange: (e)=>onChange({
+                            ...value,
+                            direct_url: e.target.value
+                        })
+                })
+            })
+        },
+        {
+            label: strProxy,
+            content: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                        fullWidth: true,
+                        label: "URL",
+                        value: ((ref = value.proxy) === null || ref === void 0 ? void 0 : ref.spec.url) || '',
+                        InputProps: {
+                            readOnly: isReadonly
+                        },
+                        onChange: (e)=>onChange({
+                                ...value,
+                                ...value.proxy && {
+                                    proxy: {
+                                        ...value.proxy,
+                                        spec: {
+                                            ...value.proxy.spec,
+                                            url: e.target.value
+                                        }
+                                    }
+                                }
+                            })
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                        py: 2,
+                        variant: "h4",
+                        children: "Allowed endpoints"
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+                        container: true,
+                        spacing: 2,
+                        mb: 2,
+                        children: ((ref1 = value.proxy) === null || ref1 === void 0 ? void 0 : ref1.spec.allowed_endpoints) && value.proxy.spec.allowed_endpoints.map(({ endpoint_pattern , method  }, i)=>{
+                            return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_react.default.Fragment, {
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+                                        item: true,
+                                        xs: 8,
+                                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                                            disabled: true,
+                                            fullWidth: true,
+                                            label: "Endpoint pattern",
+                                            value: endpoint_pattern,
+                                            InputProps: {
+                                                readOnly: isReadonly
+                                            }
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+                                        item: true,
+                                        xs: 4,
+                                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                                            disabled: true,
+                                            fullWidth: true,
+                                            label: "URL",
+                                            value: method,
+                                            InputProps: {
+                                                readOnly: isReadonly
+                                            }
+                                        })
+                                    })
+                                ]
+                            }, i);
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                        pb: 2,
+                        variant: "h4",
+                        children: "Request Headers"
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Grid, {
+                        container: true,
+                        spacing: 2,
+                        mb: 2,
+                        children: [
+                            ((ref2 = value.proxy) === null || ref2 === void 0 ? void 0 : ref2.spec.headers) !== undefined && Object.keys(value.proxy.spec.headers).map((headerName, i)=>{
+                                var ref, ref1;
+                                return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_react.default.Fragment, {
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+                                            item: true,
+                                            xs: 4,
+                                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                                                fullWidth: true,
+                                                label: "Header name",
+                                                value: headerName,
+                                                InputProps: {
+                                                    readOnly: isReadonly
+                                                },
+                                                onChange: (e)=>onChange({
+                                                        ...value,
+                                                        ...value.proxy && {
+                                                            proxy: {
+                                                                ...value.proxy,
+                                                                spec: {
+                                                                    ...value.proxy.spec,
+                                                                    headers: buildNewHeaders(value.proxy.spec.headers, headerName, e.target.value)
+                                                                }
+                                                            }
+                                                        }
+                                                    })
+                                            })
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+                                            item: true,
+                                            xs: 7,
+                                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                                                fullWidth: true,
+                                                label: "Header value",
+                                                value: (ref1 = (ref = value.proxy) === null || ref === void 0 ? void 0 : ref.spec.headers) === null || ref1 === void 0 ? void 0 : ref1[headerName],
+                                                InputProps: {
+                                                    readOnly: isReadonly
+                                                },
+                                                onChange: (e)=>onChange({
+                                                        ...value,
+                                                        ...value.proxy && {
+                                                            proxy: {
+                                                                ...value.proxy,
+                                                                spec: {
+                                                                    ...value.proxy.spec,
+                                                                    headers: {
+                                                                        ...value.proxy.spec.headers,
+                                                                        [headerName]: e.target.value
+                                                                    }
+                                                                }
+                                                            }
+                                                        }
+                                                    })
+                                            })
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+                                            item: true,
+                                            xs: 1,
+                                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                                                disabled: isReadonly,
+                                                onClick: ()=>{
+                                                    var ref;
+                                                    const newHeaders = {
+                                                        ...(ref = value.proxy) === null || ref === void 0 ? void 0 : ref.spec.headers
+                                                    };
+                                                    delete newHeaders[headerName];
+                                                    onChange({
+                                                        ...value,
+                                                        ...value.proxy && {
+                                                            proxy: {
+                                                                ...value.proxy,
+                                                                spec: {
+                                                                    ...value.proxy.spec,
+                                                                    headers: newHeaders
+                                                                }
+                                                            }
+                                                        }
+                                                    });
+                                                },
+                                                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_minus.default, {})
+                                            })
+                                        })
+                                    ]
+                                }, i);
+                            }),
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+                                item: true,
+                                xs: 12,
+                                sx: {
+                                    paddingTop: '5px !important'
+                                },
+                                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                                    disabled: isReadonly,
+                                    onClick: ()=>onChange({
+                                            ...value,
+                                            ...value.proxy && {
+                                                proxy: {
+                                                    ...value.proxy,
+                                                    spec: {
+                                                        ...value.proxy.spec,
+                                                        headers: {
+                                                            ...value.proxy.spec.headers,
+                                                            '': ''
+                                                        }
+                                                    }
+                                                }
+                                            }
+                                        }),
+                                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_plus.default, {})
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                        fullWidth: true,
+                        label: "Secret",
+                        value: ((ref3 = value.proxy) === null || ref3 === void 0 ? void 0 : ref3.spec.secret) || '',
+                        InputProps: {
+                            readOnly: isReadonly
+                        },
+                        onChange: (e)=>onChange({
+                                ...value,
+                                ...value.proxy && {
+                                    proxy: {
+                                        ...value.proxy,
+                                        spec: {
+                                            ...value.proxy.spec,
+                                            secret: e.target.value
+                                        }
+                                    }
+                                }
+                            })
+                    })
+                ]
+            })
+        }
+    ];
+    // Use of findIndex instead of providing hardcoded values to avoid desynchronisatio or
+    // bug in case the tabs get eventually swapped in the future.
+    const directModeId = tabs.findIndex((tab)=>tab.label == strDirect);
+    const proxyModeId = tabs.findIndex((tab)=>tab.label == strProxy);
+    // In "update datasource" case, set defaultTab to the mode that this datasource is currently relying on.
+    // Otherwise (create datasource), set defaultTab to Direct access.
+    const defaultTab = value.proxy ? proxyModeId : directModeId;
+    const initialSpecDirect = {
+        direct_url: ''
+    };
+    const initialSpecProxy = {
+        proxy: {
+            kind: 'HTTPProxy',
+            spec: {
+                allowed_endpoints: [
+                    // hardcoded list of allowed endpoints for now since those are enforced by the backend
+                    {
+                        endpoint_pattern: '/api/v1/labels',
+                        method: 'POST'
+                    },
+                    {
+                        endpoint_pattern: '/api/v1/series',
+                        method: 'POST'
+                    },
+                    {
+                        endpoint_pattern: '/api/v1/metadata',
+                        method: 'GET'
+                    },
+                    {
+                        endpoint_pattern: '/api/v1/query',
+                        method: 'POST'
+                    },
+                    {
+                        endpoint_pattern: '/api/v1/query_range',
+                        method: 'POST'
+                    },
+                    {
+                        endpoint_pattern: '/api/v1/label/([a-zA-Z0-9_-]+)/values',
+                        method: 'GET'
+                    }
+                ],
+                url: ''
+            }
+        }
+    };
+    // For better user experience, save previous states in mind for both mode.
+    // This avoids losing everything when the user changes their mind back.
+    const [previousSpecDirect, setPreviousSpecDirect] = (0, _react.useState)(initialSpecDirect);
+    const [previousSpecProxy, setPreviousSpecProxy] = (0, _react.useState)(initialSpecProxy);
+    // When changing mode, remove previous mode's config + append default values for the new mode.
+    const handleModeChange = (v)=>{
+        var ref, ref1;
+        if (((ref = tabs[v]) === null || ref === void 0 ? void 0 : ref.label) == strDirect) {
+            setPreviousSpecProxy(value);
+            onChange(previousSpecDirect);
+        } else if (((ref1 = tabs[v]) === null || ref1 === void 0 ? void 0 : ref1.label) == strProxy) {
+            setPreviousSpecDirect(value);
+            onChange(previousSpecProxy);
+        }
+    };
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.OptionsEditorRadios, {
+        isReadonly: isReadonly,
+        tabs: tabs,
+        defaultTab: defaultTab,
+        onModeChange: handleModeChange
+    });
+}

package/dist/cjs/plugins/PrometheusDatasourceEditor/index.js

@@ -0,0 +1,29 @@
+// 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
+});
+_exportStar(require("./PrometheusDatasourceEditor"), exports);
+_exportStar(require("./types"), exports);
+function _exportStar(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];
+            }
+        });
+    });
+    return from;
+}

package/dist/cjs/plugins/PrometheusDatasourceEditor/types.js

@@ -0,0 +1,16 @@
+// 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
+});

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

@@ -19,6 +19,7 @@ Object.defineProperty(exports, "PrometheusDatasource", {
     get: ()=>PrometheusDatasource
 });
 const _model = require("../model");
+const _prometheusDatasourceEditor = require("./PrometheusDatasourceEditor");
 /**
  * Creates a PrometheusClient for a specific datasource spec.
  */ const createClient = (spec, options)=>{
@@ -54,7 +55,7 @@ const _model = require("../model");
 };
 const PrometheusDatasource = {
     createClient,
-    OptionsEditorComponent: ()=>null,
+    OptionsEditorComponent: _prometheusDatasourceEditor.PrometheusDatasourceEditor,
     createInitialOptions: ()=>({
             direct_url: ''
         })

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

@@ -95,7 +95,8 @@ const getTimeSeriesData = async (spec, context)=>{
             };
         }),
         metadata: {
-            notices
+            notices,
+            executedQueryString: query
         }
     };
     return chartData;

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

@@ -61,6 +61,7 @@ function PrometheusLabelValuesVariableEditor(props) {
                         datasourcePluginKind: "PrometheusDatasource",
                         value: selectedDatasource,
                         onChange: handleDatasourceChange,
+                        readOnly: props.isReadonly,
                         labelId: "prom-datasource-label",
                         label: "Prometheus Datasource"
                     })
@@ -75,6 +76,9 @@ function PrometheusLabelValuesVariableEditor(props) {
                         ...props.value,
                         label_name: e.target.value
                     });
+                },
+                InputProps: {
+                    readOnly: props.isReadonly
                 }
             }),
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_matcherEditor.MatcherEditor, {
@@ -84,7 +88,8 @@ function PrometheusLabelValuesVariableEditor(props) {
                         ...props.value,
                         matchers: e
                     });
-                }
+                },
+                isReadonly: props.isReadonly
             })
         ]
     });
@@ -118,6 +123,7 @@ function PrometheusLabelNamesVariableEditor(props) {
                         datasourcePluginKind: "PrometheusDatasource",
                         value: selectedDatasource,
                         onChange: handleDatasourceChange,
+                        disabled: props.isReadonly,
                         labelId: "prom-datasource-label",
                         label: "Prometheus Datasource"
                     })
@@ -125,6 +131,7 @@ function PrometheusLabelNamesVariableEditor(props) {
             }),
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_matcherEditor.MatcherEditor, {
                 matchers: (_matchers = props.value.matchers) !== null && _matchers !== void 0 ? _matchers : [],
+                isReadonly: props.isReadonly,
                 onChange: (e)=>{
                     props.onChange({
                         ...props.value,
@@ -166,7 +173,8 @@ function PrometheusPromQLVariableEditor(props) {
                         value: selectedDatasource,
                         onChange: handleDatasourceChange,
                         labelId: "prom-datasource-label",
-                        label: "Prometheus Datasource"
+                        label: "Prometheus Datasource",
+                        disabled: props.isReadonly
                     })
                 ]
             }),
@@ -183,11 +191,15 @@ function PrometheusPromQLVariableEditor(props) {
                         expr: query
                     });
                 },
+                readOnly: props.isReadonly,
                 width: "100%"
             }),
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
                 label: "Label Name",
                 value: props.value.label_name,
+                InputProps: {
+                    readOnly: props.isReadonly
+                },
                 onChange: (e)=>{
                     props.onChange({
                         ...props.value,

package/dist/cjs/plugins/variable.js

@@ -55,6 +55,7 @@ function StaticListVariableOptionEditor(props) {
             options: [],
             freeSolo: true,
             clearOnBlur: true,
+            readOnly: props.isReadonly,
             renderInput: (params)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
                     ...params,
                     label: "Values",

package/dist/plugins/MatcherEditor.d.ts

@@ -2,7 +2,8 @@
 declare type MatcherEditorProps = {
     matchers: string[];
     onChange: (matchers: string[]) => void;
+    isReadonly?: boolean;
 };
-export declare function MatcherEditor({ matchers, onChange }: MatcherEditorProps): JSX.Element;
+export declare function MatcherEditor({ matchers, onChange, isReadonly }: MatcherEditorProps): JSX.Element;
 export {};
 //# sourceMappingURL=MatcherEditor.d.ts.map

package/dist/plugins/MatcherEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MatcherEditor.d.ts","sourceRoot":"","sources":["../../src/plugins/MatcherEditor.tsx"],"names":[],"mappings":";AAiBA,aAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,kBAAkB,eA6CvE"}
+{"version":3,"file":"MatcherEditor.d.ts","sourceRoot":"","sources":["../../src/plugins/MatcherEditor.tsx"],"names":[],"mappings":";AAiBA,aAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,kBAAkB,eAkDnF"}

package/dist/plugins/MatcherEditor.js

@@ -14,7 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Stack, TextField, Button, Box, IconButton } from '@mui/material';
 import { produce } from 'immer';
 import TrashIcon from 'mdi-material-ui/TrashCan';
-export function MatcherEditor({ matchers , onChange  }) {
+export function MatcherEditor({ matchers , onChange , isReadonly  }) {
     return /*#__PURE__*/ _jsxs(Stack, {
         spacing: 1,
         mb: 2,
@@ -26,6 +26,9 @@ export function MatcherEditor({ matchers , onChange  }) {
                             fullWidth: true,
                             label: "Series Selector",
                             value: matcher,
+                            InputProps: {
+                                readOnly: isReadonly
+                            },
                             onChange: (e)=>{
                                 const newMatchers = produce(matchers, (draft)=>{
                                     draft[index] = e.target.value;
@@ -40,6 +43,7 @@ export function MatcherEditor({ matchers , onChange  }) {
                                 });
                                 onChange(newMatchers);
                             },
+                            disabled: isReadonly,
                             children: /*#__PURE__*/ _jsx(TrashIcon, {})
                         })
                     ]
@@ -55,6 +59,7 @@ export function MatcherEditor({ matchers , onChange  }) {
                         });
                         onChange(newMatchers);
                     },
+                    disabled: isReadonly,
                     children: "Add Series Selector"
                 })
             })

package/dist/plugins/MatcherEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/plugins/MatcherEditor.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Stack, TextField, Button, Box, IconButton } from '@mui/material';\nimport { produce } from 'immer';\nimport TrashIcon from 'mdi-material-ui/TrashCan';\n\ntype MatcherEditorProps = {\n  matchers: string[];\n  onChange: (matchers: string[]) => void;\n};\n\nexport function MatcherEditor({ matchers, onChange }: MatcherEditorProps) {\n  return (\n    <Stack spacing={1} mb={2}>\n      {matchers.map((matcher, index) => (\n        <Box key={index} display=\"flex\">\n          <TextField\n            fullWidth\n            label=\"Series Selector\"\n            value={matcher}\n            onChange={(e) => {\n              const newMatchers = produce(matchers, (draft) => {\n                draft[index] = e.target.value;\n              });\n              onChange(newMatchers);\n            }}\n          />\n          <IconButton\n            onClick={() => {\n              const newMatchers = produce(matchers, (draft) => {\n                draft.splice(index, 1);\n              });\n              onChange(newMatchers);\n            }}\n          >\n            <TrashIcon />\n          </IconButton>\n        </Box>\n      ))}\n      <Box>\n        <Button\n          fullWidth={false}\n          color=\"secondary\"\n          variant=\"outlined\"\n          onClick={() => {\n            const newMatchers = produce(matchers, (draft) => {\n              draft.push('');\n            });\n            onChange(newMatchers);\n          }}\n        >\n          Add Series Selector\n        </Button>\n      </Box>\n    </Stack>\n  );\n}\n"],"names":["Stack","TextField","Button","Box","IconButton","produce","TrashIcon","MatcherEditor","matchers","onChange","spacing","mb","map","matcher","index","display","fullWidth","label","value","e","newMatchers","draft","target","onClick","splice","color","variant","push"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,KAAK,EAAEC,SAAS,EAAEC,MAAM,EAAEC,GAAG,EAAEC,UAAU,QAAQ,eAAe,CAAC;AAC1E,SAASC,OAAO,QAAQ,OAAO,CAAC;AAChC,OAAOC,SAAS,MAAM,0BAA0B,CAAC;AAOjD,OAAO,SAASC,aAAa,CAAC,EAAEC,QAAQ,CAAA,EAAEC,QAAQ,CAAA,EAAsB,EAAE;IACxE,qBACE,MAACT,KAAK;QAACU,OAAO,EAAE,CAAC;QAAEC,EAAE,EAAE,CAAC;;YACrBH,QAAQ,CAACI,GAAG,CAAC,CAACC,OAAO,EAAEC,KAAK,iBAC3B,MAACX,GAAG;oBAAaY,OAAO,EAAC,MAAM;;sCAC7B,KAACd,SAAS;4BACRe,SAAS;4BACTC,KAAK,EAAC,iBAAiB;4BACvBC,KAAK,EAAEL,OAAO;4BACdJ,QAAQ,EAAE,CAACU,CAAC,GAAK;gCACf,MAAMC,WAAW,GAAGf,OAAO,CAACG,QAAQ,EAAE,CAACa,KAAK,GAAK;oCAC/CA,KAAK,CAACP,KAAK,CAAC,GAAGK,CAAC,CAACG,MAAM,CAACJ,KAAK,CAAC;gCAChC,CAAC,CAAC,AAAC;gCACHT,QAAQ,CAACW,WAAW,CAAC,CAAC;4BACxB,CAAC;0BACD;sCACF,KAAChB,UAAU;4BACTmB,OAAO,EAAE,IAAM;gCACb,MAAMH,WAAW,GAAGf,OAAO,CAACG,QAAQ,EAAE,CAACa,KAAK,GAAK;oCAC/CA,KAAK,CAACG,MAAM,CAACV,KAAK,EAAE,CAAC,CAAC,CAAC;gCACzB,CAAC,CAAC,AAAC;gCACHL,QAAQ,CAACW,WAAW,CAAC,CAAC;4BACxB,CAAC;sCAED,cAAA,KAACd,SAAS,KAAG;0BACF;;mBArBLQ,KAAK,CAsBT,AACP,CAAC;0BACF,KAACX,GAAG;0BACF,cAAA,KAACD,MAAM;oBACLc,SAAS,EAAE,KAAK;oBAChBS,KAAK,EAAC,WAAW;oBACjBC,OAAO,EAAC,UAAU;oBAClBH,OAAO,EAAE,IAAM;wBACb,MAAMH,WAAW,GAAGf,OAAO,CAACG,QAAQ,EAAE,CAACa,KAAK,GAAK;4BAC/CA,KAAK,CAACM,IAAI,CAAC,EAAE,CAAC,CAAC;wBACjB,CAAC,CAAC,AAAC;wBACHlB,QAAQ,CAACW,WAAW,CAAC,CAAC;oBACxB,CAAC;8BACF,qBAED;kBAAS;cACL;;MACA,CACR;AACJ,CAAC"}
+{"version":3,"sources":["../../src/plugins/MatcherEditor.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Stack, TextField, Button, Box, IconButton } from '@mui/material';\nimport { produce } from 'immer';\nimport TrashIcon from 'mdi-material-ui/TrashCan';\n\ntype MatcherEditorProps = {\n  matchers: string[];\n  onChange: (matchers: string[]) => void;\n  isReadonly?: boolean;\n};\n\nexport function MatcherEditor({ matchers, onChange, isReadonly }: MatcherEditorProps) {\n  return (\n    <Stack spacing={1} mb={2}>\n      {matchers.map((matcher, index) => (\n        <Box key={index} display=\"flex\">\n          <TextField\n            fullWidth\n            label=\"Series Selector\"\n            value={matcher}\n            InputProps={{\n              readOnly: isReadonly,\n            }}\n            onChange={(e) => {\n              const newMatchers = produce(matchers, (draft) => {\n                draft[index] = e.target.value;\n              });\n              onChange(newMatchers);\n            }}\n          />\n          <IconButton\n            onClick={() => {\n              const newMatchers = produce(matchers, (draft) => {\n                draft.splice(index, 1);\n              });\n              onChange(newMatchers);\n            }}\n            disabled={isReadonly}\n          >\n            <TrashIcon />\n          </IconButton>\n        </Box>\n      ))}\n      <Box>\n        <Button\n          fullWidth={false}\n          color=\"secondary\"\n          variant=\"outlined\"\n          onClick={() => {\n            const newMatchers = produce(matchers, (draft) => {\n              draft.push('');\n            });\n            onChange(newMatchers);\n          }}\n          disabled={isReadonly}\n        >\n          Add Series Selector\n        </Button>\n      </Box>\n    </Stack>\n  );\n}\n"],"names":["Stack","TextField","Button","Box","IconButton","produce","TrashIcon","MatcherEditor","matchers","onChange","isReadonly","spacing","mb","map","matcher","index","display","fullWidth","label","value","InputProps","readOnly","e","newMatchers","draft","target","onClick","splice","disabled","color","variant","push"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,KAAK,EAAEC,SAAS,EAAEC,MAAM,EAAEC,GAAG,EAAEC,UAAU,QAAQ,eAAe,CAAC;AAC1E,SAASC,OAAO,QAAQ,OAAO,CAAC;AAChC,OAAOC,SAAS,MAAM,0BAA0B,CAAC;AAQjD,OAAO,SAASC,aAAa,CAAC,EAAEC,QAAQ,CAAA,EAAEC,QAAQ,CAAA,EAAEC,UAAU,CAAA,EAAsB,EAAE;IACpF,qBACE,MAACV,KAAK;QAACW,OAAO,EAAE,CAAC;QAAEC,EAAE,EAAE,CAAC;;YACrBJ,QAAQ,CAACK,GAAG,CAAC,CAACC,OAAO,EAAEC,KAAK,iBAC3B,MAACZ,GAAG;oBAAaa,OAAO,EAAC,MAAM;;sCAC7B,KAACf,SAAS;4BACRgB,SAAS;4BACTC,KAAK,EAAC,iBAAiB;4BACvBC,KAAK,EAAEL,OAAO;4BACdM,UAAU,EAAE;gCACVC,QAAQ,EAAEX,UAAU;6BACrB;4BACDD,QAAQ,EAAE,CAACa,CAAC,GAAK;gCACf,MAAMC,WAAW,GAAGlB,OAAO,CAACG,QAAQ,EAAE,CAACgB,KAAK,GAAK;oCAC/CA,KAAK,CAACT,KAAK,CAAC,GAAGO,CAAC,CAACG,MAAM,CAACN,KAAK,CAAC;gCAChC,CAAC,CAAC,AAAC;gCACHV,QAAQ,CAACc,WAAW,CAAC,CAAC;4BACxB,CAAC;0BACD;sCACF,KAACnB,UAAU;4BACTsB,OAAO,EAAE,IAAM;gCACb,MAAMH,WAAW,GAAGlB,OAAO,CAACG,QAAQ,EAAE,CAACgB,KAAK,GAAK;oCAC/CA,KAAK,CAACG,MAAM,CAACZ,KAAK,EAAE,CAAC,CAAC,CAAC;gCACzB,CAAC,CAAC,AAAC;gCACHN,QAAQ,CAACc,WAAW,CAAC,CAAC;4BACxB,CAAC;4BACDK,QAAQ,EAAElB,UAAU;sCAEpB,cAAA,KAACJ,SAAS,KAAG;0BACF;;mBAzBLS,KAAK,CA0BT,AACP,CAAC;0BACF,KAACZ,GAAG;0BACF,cAAA,KAACD,MAAM;oBACLe,SAAS,EAAE,KAAK;oBAChBY,KAAK,EAAC,WAAW;oBACjBC,OAAO,EAAC,UAAU;oBAClBJ,OAAO,EAAE,IAAM;wBACb,MAAMH,WAAW,GAAGlB,OAAO,CAACG,QAAQ,EAAE,CAACgB,KAAK,GAAK;4BAC/CA,KAAK,CAACO,IAAI,CAAC,EAAE,CAAC,CAAC;wBACjB,CAAC,CAAC,AAAC;wBACHtB,QAAQ,CAACc,WAAW,CAAC,CAAC;oBACxB,CAAC;oBACDK,QAAQ,EAAElB,UAAU;8BACrB,qBAED;kBAAS;cACL;;MACA,CACR;AACJ,CAAC"}