@perses-dev/prometheus-plugin 0.50.3 → 0.51.0-beta.2

package/dist/cjs/plugins/PrometheusDatasourceEditor.js

@@ -1,626 +0,0 @@
-// 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: function() {
-        return PrometheusDatasourceEditor;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _pluginsystem = require("@perses-dev/plugin-system");
-const _material = require("@mui/material");
-const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
-const _immer = require("immer");
-const _reacthookform = require("react-hook-form");
-const _Minus = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Minus"));
-const _Plus = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Plus"));
-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) {
-    var _value_proxy, _value_proxy1, _value_proxy2;
-    const { value, onChange, isReadonly } = props;
-    const strDirect = 'Direct access';
-    const strProxy = 'Proxy';
-    // utilitary function used for headers when renaming a property
-    // -> TODO it would be cleaner to manipulate headers as an intermediary list instead, to avoid doing this.
-    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)(_reacthookform.Controller, {
-                name: "URL",
-                render: ({ field, fieldState })=>{
-                    var _fieldState_error;
-                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                        ...field,
-                        fullWidth: true,
-                        label: "URL",
-                        value: value.directUrl || '',
-                        error: !!fieldState.error,
-                        helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
-                        InputProps: {
-                            readOnly: isReadonly
-                        },
-                        InputLabelProps: {
-                            shrink: isReadonly ? true : undefined
-                        },
-                        onChange: (e)=>{
-                            field.onChange(e);
-                            onChange((0, _immer.produce)(value, (draft)=>{
-                                draft.directUrl = e.target.value;
-                            }));
-                        }
-                    });
-                }
-            })
-        },
-        {
-            label: strProxy,
-            content: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-                children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                        name: "URL",
-                        render: ({ field, fieldState })=>{
-                            var _value_proxy, _fieldState_error;
-                            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                                ...field,
-                                fullWidth: true,
-                                label: "URL",
-                                value: ((_value_proxy = value.proxy) === null || _value_proxy === void 0 ? void 0 : _value_proxy.spec.url) || '',
-                                error: !!fieldState.error,
-                                helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
-                                InputProps: {
-                                    readOnly: isReadonly
-                                },
-                                InputLabelProps: {
-                                    shrink: isReadonly ? true : undefined
-                                },
-                                onChange: (e)=>{
-                                    field.onChange(e);
-                                    onChange((0, _immer.produce)(value, (draft)=>{
-                                        if (draft.proxy !== undefined) {
-                                            draft.proxy.spec.url = e.target.value;
-                                        }
-                                    }));
-                                },
-                                sx: {
-                                    mb: 2
-                                }
-                            });
-                        }
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                        variant: "h4",
-                        mb: 2,
-                        children: "Allowed endpoints"
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Grid, {
-                        container: true,
-                        spacing: 2,
-                        mb: 2,
-                        children: [
-                            ((_value_proxy = value.proxy) === null || _value_proxy === void 0 ? void 0 : _value_proxy.spec.allowedEndpoints) && ((_value_proxy1 = value.proxy) === null || _value_proxy1 === void 0 ? void 0 : _value_proxy1.spec.allowedEndpoints.length) !== 0 ? value.proxy.spec.allowedEndpoints.map(({ endpointPattern, method }, i)=>{
-                                return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_react.Fragment, {
-                                    children: [
-                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
-                                            item: true,
-                                            xs: 8,
-                                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                                                name: `Endpoint pattern ${i}`,
-                                                render: ({ field, fieldState })=>{
-                                                    var _fieldState_error;
-                                                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                                                        ...field,
-                                                        fullWidth: true,
-                                                        label: "Endpoint pattern",
-                                                        value: endpointPattern,
-                                                        error: !!fieldState.error,
-                                                        helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
-                                                        InputProps: {
-                                                            readOnly: isReadonly
-                                                        },
-                                                        InputLabelProps: {
-                                                            shrink: isReadonly ? true : undefined
-                                                        },
-                                                        onChange: (e)=>{
-                                                            field.onChange(e);
-                                                            onChange((0, _immer.produce)(value, (draft)=>{
-                                                                if (draft.proxy !== undefined) {
-                                                                    var _draft_proxy_spec_allowedEndpoints;
-                                                                    draft.proxy.spec.allowedEndpoints = (_draft_proxy_spec_allowedEndpoints = draft.proxy.spec.allowedEndpoints) === null || _draft_proxy_spec_allowedEndpoints === void 0 ? void 0 : _draft_proxy_spec_allowedEndpoints.map((item, itemIndex)=>{
-                                                                        if (i === itemIndex) {
-                                                                            return {
-                                                                                endpointPattern: e.target.value,
-                                                                                method: item.method
-                                                                            };
-                                                                        } else {
-                                                                            return item;
-                                                                        }
-                                                                    });
-                                                                }
-                                                            }));
-                                                        }
-                                                    });
-                                                }
-                                            })
-                                        }),
-                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
-                                            item: true,
-                                            xs: 3,
-                                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                                                name: `Method ${i}`,
-                                                render: ({ field, fieldState })=>{
-                                                    var _fieldState_error;
-                                                    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TextField, {
-                                                        ...field,
-                                                        select: true,
-                                                        fullWidth: true,
-                                                        label: "Method",
-                                                        value: method,
-                                                        error: !!fieldState.error,
-                                                        helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
-                                                        InputProps: {
-                                                            readOnly: isReadonly
-                                                        },
-                                                        InputLabelProps: {
-                                                            shrink: isReadonly ? true : undefined
-                                                        },
-                                                        onChange: (e)=>{
-                                                            field.onChange(e);
-                                                            onChange((0, _immer.produce)(value, (draft)=>{
-                                                                if (draft.proxy !== undefined) {
-                                                                    var _draft_proxy_spec_allowedEndpoints;
-                                                                    draft.proxy.spec.allowedEndpoints = (_draft_proxy_spec_allowedEndpoints = draft.proxy.spec.allowedEndpoints) === null || _draft_proxy_spec_allowedEndpoints === void 0 ? void 0 : _draft_proxy_spec_allowedEndpoints.map((item, itemIndex)=>{
-                                                                        if (i === itemIndex) {
-                                                                            return {
-                                                                                endpointPattern: item.endpointPattern,
-                                                                                method: e.target.value
-                                                                            };
-                                                                        } else {
-                                                                            return item;
-                                                                        }
-                                                                    });
-                                                                }
-                                                            }));
-                                                        },
-                                                        children: [
-                                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                                                                value: "GET",
-                                                                children: "GET"
-                                                            }),
-                                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                                                                value: "POST",
-                                                                children: "POST"
-                                                            }),
-                                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                                                                value: "PUT",
-                                                                children: "PUT"
-                                                            }),
-                                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                                                                value: "PATCH",
-                                                                children: "PATCH"
-                                                            }),
-                                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                                                                value: "DELETE",
-                                                                children: "DELETE"
-                                                            })
-                                                        ]
-                                                    });
-                                                }
-                                            })
-                                        }),
-                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
-                                            item: true,
-                                            xs: 1,
-                                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                                                name: `Remove Endpoint ${i}`,
-                                                render: ({ field })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
-                                                        ...field,
-                                                        disabled: isReadonly,
-                                                        // Remove the given allowed endpoint from the list
-                                                        onClick: (e)=>{
-                                                            field.onChange(e);
-                                                            onChange((0, _immer.produce)(value, (draft)=>{
-                                                                if (draft.proxy !== undefined) {
-                                                                    var _draft_proxy_spec_allowedEndpoints;
-                                                                    draft.proxy.spec.allowedEndpoints = [
-                                                                        ...((_draft_proxy_spec_allowedEndpoints = draft.proxy.spec.allowedEndpoints) === null || _draft_proxy_spec_allowedEndpoints === void 0 ? void 0 : _draft_proxy_spec_allowedEndpoints.filter((item, itemIndex)=>{
-                                                                            return itemIndex !== i;
-                                                                        })) || []
-                                                                    ];
-                                                                }
-                                                            }));
-                                                        },
-                                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Minus.default, {})
-                                                    })
-                                            })
-                                        })
-                                    ]
-                                }, i);
-                            }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
-                                item: true,
-                                xs: 4,
-                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                                    sx: {
-                                        fontStyle: 'italic'
-                                    },
-                                    children: "None"
-                                })
-                            }),
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
-                                item: true,
-                                xs: 12,
-                                sx: {
-                                    paddingTop: '0px !important',
-                                    paddingLeft: '5px !important'
-                                },
-                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
-                                    disabled: isReadonly,
-                                    // Add a new (empty) allowed endpoint to the list
-                                    onClick: ()=>onChange((0, _immer.produce)(value, (draft)=>{
-                                            if (draft.proxy !== undefined) {
-                                                var _draft_proxy_spec_allowedEndpoints;
-                                                draft.proxy.spec.allowedEndpoints = [
-                                                    ...(_draft_proxy_spec_allowedEndpoints = draft.proxy.spec.allowedEndpoints) !== null && _draft_proxy_spec_allowedEndpoints !== void 0 ? _draft_proxy_spec_allowedEndpoints : [],
-                                                    {
-                                                        endpointPattern: '',
-                                                        method: ''
-                                                    }
-                                                ];
-                                            }
-                                        })),
-                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Plus.default, {})
-                                })
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                        variant: "h4",
-                        mb: 2,
-                        children: "Request Headers"
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Grid, {
-                        container: true,
-                        spacing: 2,
-                        mb: 2,
-                        children: [
-                            ((_value_proxy2 = value.proxy) === null || _value_proxy2 === void 0 ? void 0 : _value_proxy2.spec.headers) && Object.keys(value.proxy.spec.headers).map((headerName, i)=>{
-                                return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_react.Fragment, {
-                                    children: [
-                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
-                                            item: true,
-                                            xs: 4,
-                                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                                                name: `Header name ${i}`,
-                                                render: ({ field, fieldState })=>{
-                                                    var _fieldState_error;
-                                                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                                                        ...field,
-                                                        fullWidth: true,
-                                                        label: "Header name",
-                                                        value: headerName,
-                                                        error: !!fieldState.error,
-                                                        helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
-                                                        InputProps: {
-                                                            readOnly: isReadonly
-                                                        },
-                                                        InputLabelProps: {
-                                                            shrink: isReadonly ? true : undefined
-                                                        },
-                                                        onChange: (e)=>{
-                                                            field.onChange(e);
-                                                            onChange((0, _immer.produce)(value, (draft)=>{
-                                                                if (draft.proxy !== undefined) {
-                                                                    draft.proxy.spec.headers = buildNewHeaders(draft.proxy.spec.headers, headerName, e.target.value);
-                                                                }
-                                                            }));
-                                                        }
-                                                    });
-                                                }
-                                            })
-                                        }),
-                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
-                                            item: true,
-                                            xs: 7,
-                                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                                                name: `Header value ${i}`,
-                                                render: ({ field, fieldState })=>{
-                                                    var _value_proxy_spec_headers, _value_proxy, _fieldState_error;
-                                                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                                                        ...field,
-                                                        fullWidth: true,
-                                                        label: "Header value",
-                                                        value: (_value_proxy = value.proxy) === null || _value_proxy === void 0 ? void 0 : (_value_proxy_spec_headers = _value_proxy.spec.headers) === null || _value_proxy_spec_headers === void 0 ? void 0 : _value_proxy_spec_headers[headerName],
-                                                        error: !!fieldState.error,
-                                                        helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
-                                                        InputProps: {
-                                                            readOnly: isReadonly
-                                                        },
-                                                        InputLabelProps: {
-                                                            shrink: isReadonly ? true : undefined
-                                                        },
-                                                        onChange: (e)=>{
-                                                            field.onChange(e);
-                                                            onChange((0, _immer.produce)(value, (draft)=>{
-                                                                if (draft.proxy !== undefined) {
-                                                                    draft.proxy.spec.headers = {
-                                                                        ...draft.proxy.spec.headers,
-                                                                        [headerName]: e.target.value
-                                                                    };
-                                                                }
-                                                            }));
-                                                        }
-                                                    });
-                                                }
-                                            })
-                                        }),
-                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
-                                            item: true,
-                                            xs: 1,
-                                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                                                name: `Remove Header ${i}`,
-                                                render: ({ field })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
-                                                        ...field,
-                                                        disabled: isReadonly,
-                                                        // Remove the given header from the list
-                                                        onClick: (e)=>{
-                                                            var _value_proxy;
-                                                            field.onChange(e);
-                                                            const newHeaders = {
-                                                                ...(_value_proxy = value.proxy) === null || _value_proxy === void 0 ? void 0 : _value_proxy.spec.headers
-                                                            };
-                                                            delete newHeaders[headerName];
-                                                            onChange((0, _immer.produce)(value, (draft)=>{
-                                                                if (draft.proxy !== undefined) {
-                                                                    draft.proxy.spec.headers = newHeaders;
-                                                                }
-                                                            }));
-                                                        },
-                                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Minus.default, {})
-                                                    })
-                                            })
-                                        })
-                                    ]
-                                }, i);
-                            }),
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
-                                item: true,
-                                xs: 12,
-                                sx: {
-                                    paddingTop: '0px !important',
-                                    paddingLeft: '5px !important'
-                                },
-                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
-                                    disabled: isReadonly,
-                                    // Add a new (empty) header to the list
-                                    onClick: ()=>onChange((0, _immer.produce)(value, (draft)=>{
-                                            if (draft.proxy !== undefined) {
-                                                draft.proxy.spec.headers = {
-                                                    ...draft.proxy.spec.headers,
-                                                    '': ''
-                                                };
-                                            }
-                                        })),
-                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Plus.default, {})
-                                })
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                        name: "Secret",
-                        render: ({ field, fieldState })=>{
-                            var _value_proxy, _fieldState_error;
-                            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                                ...field,
-                                fullWidth: true,
-                                label: "Secret",
-                                value: ((_value_proxy = value.proxy) === null || _value_proxy === void 0 ? void 0 : _value_proxy.spec.secret) || '',
-                                error: !!fieldState.error,
-                                helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
-                                InputProps: {
-                                    readOnly: isReadonly
-                                },
-                                InputLabelProps: {
-                                    shrink: isReadonly ? true : undefined
-                                },
-                                onChange: (e)=>{
-                                    field.onChange(e);
-                                    onChange((0, _immer.produce)(value, (draft)=>{
-                                        if (draft.proxy !== undefined) {
-                                            draft.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 = {
-        directUrl: ''
-    };
-    const initialSpecProxy = {
-        proxy: {
-            kind: 'HTTPProxy',
-            spec: {
-                allowedEndpoints: [
-                    // list of standard endpoints suggested by default
-                    {
-                        endpointPattern: '/api/v1/labels',
-                        method: 'POST'
-                    },
-                    {
-                        endpointPattern: '/api/v1/series',
-                        method: 'POST'
-                    },
-                    {
-                        endpointPattern: '/api/v1/metadata',
-                        method: 'GET'
-                    },
-                    {
-                        endpointPattern: '/api/v1/query',
-                        method: 'POST'
-                    },
-                    {
-                        endpointPattern: '/api/v1/query_range',
-                        method: 'POST'
-                    },
-                    {
-                        endpointPattern: '/api/v1/label/([a-zA-Z0-9_-]+)/values',
-                        method: 'GET'
-                    },
-                    {
-                        endpointPattern: '/api/v1/parse_query',
-                        method: 'POST'
-                    }
-                ],
-                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 _tabs_v, _tabs_v1;
-        if (((_tabs_v = tabs[v]) === null || _tabs_v === void 0 ? void 0 : _tabs_v.label) === strDirect) {
-            setPreviousSpecProxy(value);
-            // Copy all settings (for example, scrapeInterval), except 'proxy'
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { proxy, ...newValue } = value;
-            onChange({
-                ...newValue,
-                directUrl: previousSpecDirect.directUrl
-            });
-        } else if (((_tabs_v1 = tabs[v]) === null || _tabs_v1 === void 0 ? void 0 : _tabs_v1.label) === strProxy) {
-            setPreviousSpecDirect(value);
-            // Copy all settings (for example, scrapeInterval), except 'directUrl'
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { directUrl, ...newValue } = value;
-            onChange({
-                ...newValue,
-                proxy: previousSpecProxy.proxy
-            });
-        }
-    };
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                variant: "h4",
-                mb: 2,
-                children: "General Settings"
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                fullWidth: true,
-                label: "Scrape Interval",
-                value: value.scrapeInterval || '',
-                placeholder: `Default: ${_types.DEFAULT_SCRAPE_INTERVAL}`,
-                InputProps: {
-                    readOnly: isReadonly
-                },
-                InputLabelProps: {
-                    shrink: isReadonly ? true : undefined
-                },
-                onChange: (e)=>onChange({
-                        ...value,
-                        scrapeInterval: e.target.value
-                    })
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                variant: "h4",
-                mt: 2,
-                children: "HTTP Settings"
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.OptionsEditorRadios, {
-                isReadonly: isReadonly,
-                tabs: tabs,
-                defaultTab: defaultTab,
-                onModeChange: handleModeChange
-            })
-        ]
-    });
-}

package/dist/components/PromQLEditor.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PromQLEditor.d.ts","sourceRoot":"","sources":["../../src/components/PromQLEditor.tsx"],"names":[],"mappings":"AAaA,OAAmB,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AACzE,OAAO,EAAmB,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AAI1F,OAAO,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAC;AAIxD,OAAO,EAAE,4BAA4B,EAAE,MAAM,UAAU,CAAC;AASxD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,cAAc,EAAE,qBAAqB,CAAC;IACtC,UAAU,EAAE,4BAA4B,CAAC;CAC1C,GAAG,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,YAAY,CAAC,CAAC;AAEvD,wBAAgB,YAAY,CAAC,EAAE,cAAc,EAAE,UAAU,EAAE,GAAG,IAAI,EAAE,EAAE,iBAAiB,GAAG,YAAY,CAkHrG"}

package/dist/components/PromQLEditor.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/PromQLEditor.tsx"],"sourcesContent":["// Copyright 2024 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 CodeMirror, { ReactCodeMirrorProps } from '@uiw/react-codemirror';\nimport { PromQLExtension, CompleteConfiguration } from '@prometheus-io/codemirror-promql';\nimport { EditorView } from '@codemirror/view';\nimport { useTheme, CircularProgress, InputLabel, Stack, IconButton, Tooltip } from '@mui/material';\nimport FileTreeIcon from 'mdi-material-ui/FileTree';\nimport { ReactElement, useMemo, useState } from 'react';\nimport { ErrorAlert } from '@perses-dev/components';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { useReplaceVariablesInString } from '@perses-dev/plugin-system';\nimport { PrometheusDatasourceSelector } from '../model';\nimport { replacePromBuiltinVariables } from '../plugins/prometheus-time-series-query/replace-prom-builtin-variables';\nimport { useParseQuery } from './parse';\nimport TreeNode from './TreeNode';\n\nconst treeViewStr = 'Tree View';\nconst treeViewOpenStr = 'Open ' + treeViewStr;\nconst treeViewCloseStr = 'Close ' + treeViewStr;\n\nexport type PromQLEditorProps = {\n  completeConfig: CompleteConfiguration;\n  datasource: PrometheusDatasourceSelector;\n} & Omit<ReactCodeMirrorProps, 'theme' | 'extensions'>;\n\nexport function PromQLEditor({ completeConfig, datasource, ...rest }: PromQLEditorProps): ReactElement {\n  const theme = useTheme();\n  const isDarkMode = theme.palette.mode === 'dark';\n  const [isTreeViewVisible, setTreeViewVisible] = useState(false);\n\n  const promQLExtension = useMemo(() => {\n    return new PromQLExtension().activateLinter(false).setComplete(completeConfig).asExtension();\n  }, [completeConfig]);\n\n  let queryExpr = useReplaceVariablesInString(rest.value);\n  if (queryExpr) {\n    // TODO placeholder values for steps to be replaced with actual values\n    // Looks like providing proper values involves some refactoring: currently we'd need to rely on the timeseries query context,\n    // but these step values are actually computed independently / before the queries are getting fired, so it's useless to fire\n    // queries here, so maybe we should extract this part to independant hook(s), to be reused here?\n    queryExpr = replacePromBuiltinVariables(queryExpr, 12345, 12345);\n  }\n\n  const { data: parseQueryResponse, isLoading, error } = useParseQuery(queryExpr ?? '', datasource, isTreeViewVisible);\n\n  const handleShowTreeView = (): void => {\n    setTreeViewVisible(!isTreeViewVisible);\n  };\n\n  return (\n    <Stack position=\"relative\">\n      <InputLabel // reproduce the same kind of input label that regular MUI TextFields have\n        shrink\n        sx={{\n          position: 'absolute',\n          top: '-8px',\n          left: '10px',\n          padding: '0 4px',\n          color: theme.palette.text.primary,\n          zIndex: 1,\n        }}\n      >\n        PromQL Expression\n      </InputLabel>\n      <CodeMirror\n        {...rest}\n        style={{ border: `1px solid ${theme.palette.divider}` }}\n        theme={isDarkMode ? 'dark' : 'light'}\n        basicSetup={{\n          highlightActiveLine: false,\n          highlightActiveLineGutter: false,\n          foldGutter: false,\n        }}\n        extensions={[\n          EditorView.lineWrapping,\n          promQLExtension,\n          EditorView.theme({\n            '.cm-content': {\n              paddingTop: '8px',\n              paddingBottom: '8px',\n              paddingRight: '40px', // offset for the tree view button\n            },\n          }),\n        ]}\n        placeholder=\"Example: sum(rate(http_requests_total[5m]))\"\n      />\n      {queryExpr && (\n        <>\n          <Tooltip title={isTreeViewVisible ? treeViewCloseStr : treeViewOpenStr}>\n            <IconButton\n              aria-label={isTreeViewVisible ? treeViewCloseStr : treeViewOpenStr}\n              onClick={handleShowTreeView}\n              sx={{ position: 'absolute', right: '5px', top: '5px' }}\n              size=\"small\"\n            >\n              <FileTreeIcon sx={{ fontSize: '18px' }} />\n            </IconButton>\n          </Tooltip>\n          {isTreeViewVisible && (\n            <div style={{ border: `1px solid ${theme.palette.divider}`, position: 'relative' }}>\n              <Tooltip title={treeViewCloseStr}>\n                <IconButton\n                  aria-label={treeViewCloseStr}\n                  onClick={() => setTreeViewVisible(false)}\n                  sx={{ position: 'absolute', top: '5px', right: '5px' }}\n                  size=\"small\"\n                >\n                  <CloseIcon sx={{ fontSize: '18px' }} />\n                </IconButton>\n              </Tooltip>\n              {error ? (\n                // Here the user is able to hide the error alert\n                <ErrorAlert\n                  error={{\n                    name: `${treeViewStr} not available`,\n                    message: error.message,\n                  }}\n                />\n              ) : (\n                <div\n                  style={{\n                    padding: `${theme.spacing(1.5)} ${theme.spacing(1.5)} 0 ${theme.spacing(1.5)}`, // let paddingBottom at 0 because nodes have margin-bottom\n                    overflowX: 'auto',\n                    backgroundColor: theme.palette.background.default,\n                  }}\n                >\n                  {isLoading ? (\n                    <CircularProgress />\n                  ) : parseQueryResponse?.data ? (\n                    <TreeNode node={parseQueryResponse.data} reverse={false} />\n                  ) : null}\n                </div>\n              )}\n            </div>\n          )}\n        </>\n      )}\n    </Stack>\n  );\n}\n"],"names":["CodeMirror","PromQLExtension","EditorView","useTheme","CircularProgress","InputLabel","Stack","IconButton","Tooltip","FileTreeIcon","useMemo","useState","ErrorAlert","CloseIcon","useReplaceVariablesInString","replacePromBuiltinVariables","useParseQuery","TreeNode","treeViewStr","treeViewOpenStr","treeViewCloseStr","PromQLEditor","completeConfig","datasource","rest","theme","isDarkMode","palette","mode","isTreeViewVisible","setTreeViewVisible","promQLExtension","activateLinter","setComplete","asExtension","queryExpr","value","data","parseQueryResponse","isLoading","error","handleShowTreeView","position","shrink","sx","top","left","padding","color","text","primary","zIndex","style","border","divider","basicSetup","highlightActiveLine","highlightActiveLineGutter","foldGutter","extensions","lineWrapping","paddingTop","paddingBottom","paddingRight","placeholder","title","aria-label","onClick","right","size","fontSize","div","name","message","spacing","overflowX","backgroundColor","background","default","node","reverse"],"mappings":"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"}