@perses-dev/dashboards 0.41.1 → 0.42.0

package/dist/cjs/components/DashboardStickyToolbar/DashboardStickyToolbar.js

@@ -59,7 +59,7 @@ function DashboardStickyToolbar(props) {
                         display: "flex",
                         flexWrap: "wrap",
                         alignItems: "start",
-                        my: isSticky ? 2 : 0,
+                        mt: isSticky ? 1.5 : 0,
                         ml: isSticky ? 2 : 0,
                         children: [
                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_Variables.TemplateVariableList, {}),
@@ -70,7 +70,7 @@ function DashboardStickyToolbar(props) {
                         ]
                     }),
                     isSticky && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-                        my: 2,
+                        mt: 1.5,
                         mr: 2,
                         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_TimeRangeControls.TimeRangeControls, {})
                     })

package/dist/cjs/components/DashboardToolbar/DashboardToolbar.js

@@ -29,6 +29,7 @@ const _AddGroupButton = require("../AddGroupButton");
 const _DownloadButton = require("../DownloadButton");
 const _TimeRangeControls = require("../TimeRangeControls");
 const _Variables = require("../Variables");
+const _Datasources = require("../Datasources");
 const _EditButton = require("../EditButton");
 const _EditJsonButton = require("../EditJsonButton");
 const _SaveDashboardButton = require("../SaveDashboardButton");
@@ -49,7 +50,8 @@ const DashboardToolbar = (props)=>{
             "data-testid": testId,
             children: [
                 /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
-                    p: 2,
+                    px: 2,
+                    py: 1.5,
                     display: "flex",
                     sx: {
                         backgroundColor: (theme)=>theme.palette.primary.main + '30'
@@ -58,8 +60,8 @@ const DashboardToolbar = (props)=>{
                         dashboardTitle,
                         /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
                             direction: "row",
-                            spacing: 1,
-                            marginLeft: "auto",
+                            gap: 1,
+                            ml: "auto",
                             children: [
                                 isReadonly && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Alert, {
                                     severity: 'warning',
@@ -87,7 +89,7 @@ const DashboardToolbar = (props)=>{
                         display: 'flex',
                         width: '100%',
                         alignItems: 'start',
-                        padding: (theme)=>theme.spacing(1, 2)
+                        padding: (theme)=>theme.spacing(1, 2, 0, 2)
                     },
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
@@ -109,10 +111,10 @@ const DashboardToolbar = (props)=>{
                                     direction: "row",
                                     spacing: 1,
                                     ml: 1,
-                                    mb: 1,
                                     whiteSpace: "nowrap",
                                     children: [
                                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_Variables.EditVariablesButton, {}),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Datasources.EditDatasourcesButton, {}),
                                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_AddPanelButton.AddPanelButton, {}),
                                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_AddGroupButton.AddGroupButton, {})
                                     ]
@@ -121,7 +123,6 @@ const DashboardToolbar = (props)=>{
                                     direction: "row",
                                     spacing: 1,
                                     ml: 1,
-                                    mb: 1,
                                     children: [
                                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_TimeRangeControls.TimeRangeControls, {}),
                                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_DownloadButton.DownloadButton, {}),
@@ -134,8 +135,9 @@ const DashboardToolbar = (props)=>{
                 })
             ]
         }) : /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-            spacing: 1,
-            padding: 2,
+            gap: 1,
+            mx: 2,
+            mt: 1.5,
             "data-testid": testId,
             children: [
                 /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
@@ -160,7 +162,7 @@ const DashboardToolbar = (props)=>{
                     ]
                 }),
                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-                    paddingY: 2,
+                    mt: 1,
                     children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
                         FallbackComponent: _components.ErrorAlert,
                         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DashboardStickyToolbar.DashboardStickyToolbar, {

package/dist/cjs/components/Datasources/DatasourceEditor.js

@@ -0,0 +1,236 @@
+// 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, "DatasourceEditor", {
+    enumerable: true,
+    get: function() {
+        return DatasourceEditor;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _Plus = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Plus"));
+const _Pencil = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Pencil"));
+const _TrashCan = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/TrashCan"));
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _react = require("react");
+const _useimmer = require("use-immer");
+const _context = require("../../context");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function DatasourceEditor(props) {
+    const [datasources, setDatasources] = (0, _useimmer.useImmer)(props.datasources);
+    const [datasourceFormAction, setDatasourceFormAction] = (0, _react.useState)('update');
+    const [datasourceEdit, setDatasourceEdit] = (0, _react.useState)(null);
+    const defaultSpec = {
+        default: false,
+        plugin: {
+            // TODO: find a way to avoid assuming that the PrometheusDatasource plugin is installed
+            kind: 'PrometheusDatasource',
+            spec: {}
+        }
+    };
+    const { openDiscardChangesConfirmationDialog , closeDiscardChangesConfirmationDialog  } = (0, _context.useDiscardChangesConfirmationDialog)();
+    const handleCancel = ()=>{
+        if (JSON.stringify(props.datasources) !== JSON.stringify(datasources)) {
+            openDiscardChangesConfirmationDialog({
+                onDiscardChanges: ()=>{
+                    closeDiscardChangesConfirmationDialog();
+                    props.onCancel();
+                },
+                onCancel: ()=>{
+                    closeDiscardChangesConfirmationDialog();
+                },
+                description: 'You have unapplied changes. Are you sure you want to discard these changes? Changes cannot be recovered.'
+            });
+        } else {
+            props.onCancel();
+        }
+    };
+    const removeDatasource = (name)=>{
+        setDatasources((draft)=>{
+            delete draft[name];
+        });
+    };
+    const addDatasource = ()=>{
+        setDatasourceFormAction('create');
+        setDatasourceEdit({
+            name: 'NewDatasource',
+            spec: defaultSpec
+        });
+    };
+    const editDatasource = (name)=>{
+        setDatasourceFormAction('update');
+        var _datasources_name;
+        setDatasourceEdit({
+            name: name,
+            spec: (_datasources_name = datasources[name]) !== null && _datasources_name !== void 0 ? _datasources_name : defaultSpec
+        });
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+        children: datasourceEdit ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DatasourceEditorForm, {
+            initialName: datasourceEdit.name,
+            initialSpec: datasourceEdit.spec,
+            initialAction: datasourceFormAction,
+            isDraft: true,
+            onSave: (name, spec)=>{
+                setDatasources((draft)=>{
+                    draft[name] = spec;
+                    setDatasourceEdit(null);
+                });
+            },
+            onClose: ()=>{
+                setDatasourceEdit(null);
+            }
+        }) : /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+                    sx: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        padding: (theme)=>theme.spacing(1, 2),
+                        borderBottom: (theme)=>`1px solid ${theme.palette.divider}`
+                    },
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                            variant: "h2",
+                            children: "Edit Dashboard Datasources"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                            direction: "row",
+                            spacing: 1,
+                            marginLeft: "auto",
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                                    disabled: props.datasources === datasources,
+                                    variant: "contained",
+                                    onClick: ()=>{
+                                        props.onChange(datasources);
+                                    },
+                                    children: "Apply"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                                    color: "secondary",
+                                    variant: "outlined",
+                                    onClick: handleCancel,
+                                    children: "Cancel"
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                    padding: 2,
+                    sx: {
+                        overflowY: 'scroll'
+                    },
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+                        spacing: 2,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                            spacing: 2,
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableContainer, {
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Table, {
+                                        sx: {
+                                            minWidth: 650
+                                        },
+                                        "aria-label": "table of datasources",
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableHead, {
+                                                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TableRow, {
+                                                    children: [
+                                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {
+                                                            children: "Name"
+                                                        }),
+                                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {
+                                                            children: "Type"
+                                                        }),
+                                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {
+                                                            children: "Description"
+                                                        }),
+                                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {
+                                                            align: "right",
+                                                            children: "Actions"
+                                                        })
+                                                    ]
+                                                })
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableBody, {
+                                                children: Object.entries(datasources).map(([name, spec])=>{
+                                                    var _spec_display;
+                                                    var _spec_display_description;
+                                                    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TableRow, {
+                                                        children: [
+                                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {
+                                                                component: "th",
+                                                                scope: "row",
+                                                                sx: {
+                                                                    fontWeight: 'bold'
+                                                                },
+                                                                children: name
+                                                            }),
+                                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {
+                                                                children: spec.plugin.kind
+                                                            }),
+                                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {
+                                                                children: (_spec_display_description = (_spec_display = spec.display) === null || _spec_display === void 0 ? void 0 : _spec_display.description) !== null && _spec_display_description !== void 0 ? _spec_display_description : ''
+                                                            }),
+                                                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TableCell, {
+                                                                align: "right",
+                                                                sx: {
+                                                                    whiteSpace: 'nowrap'
+                                                                },
+                                                                children: [
+                                                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                                                        onClick: ()=>editDatasource(name),
+                                                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Pencil.default, {})
+                                                                    }),
+                                                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                                                        onClick: ()=>removeDatasource(name),
+                                                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_TrashCan.default, {})
+                                                                    })
+                                                                ]
+                                                            })
+                                                        ]
+                                                    }, name);
+                                                })
+                                            })
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                                    display: "flex",
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                                        variant: "contained",
+                                        startIcon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Plus.default, {}),
+                                        sx: {
+                                            marginLeft: 'auto'
+                                        },
+                                        onClick: addDatasource,
+                                        children: "Add Datasource"
+                                    })
+                                })
+                            ]
+                        })
+                    })
+                })
+            ]
+        })
+    });
+}

package/dist/cjs/components/Datasources/EditDatasourcesButton.js

@@ -0,0 +1,109 @@
+// 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, "EditDatasourcesButton", {
+    enumerable: true,
+    get: function() {
+        return EditDatasourcesButton;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _PencilOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/PencilOutline"));
+const _components = require("@perses-dev/components");
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _constants = require("../../constants");
+const _context = require("../../context");
+const _DatasourceEditor = require("./DatasourceEditor");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function EditDatasourcesButton() {
+    const [isDatasourceEditorOpen, setIsDatasourceEditorOpen] = (0, _react.useState)(false);
+    const { getLocalDatasources , setLocalDatasources , getSavedDatasources , setSavedDatasources  } = (0, _pluginsystem.useDatasourceStore)();
+    const localDatasources = getLocalDatasources();
+    const savedDatasources = getSavedDatasources();
+    const { dashboard , setDashboard  } = (0, _context.useDashboard)();
+    const openDatasourceEditor = ()=>{
+        setIsDatasourceEditorOpen(true);
+    };
+    const closeDatasourceEditor = ()=>{
+        setIsDatasourceEditorOpen(false);
+    };
+    const handleChangeDatasources = (datasources)=>{
+        // Calculates the new list of datasources that are allowed to be used.
+        const newSavedDatasources = Object.keys(datasources).filter((key)=>{
+            var _datasources_key, _datasources_key_plugin, _savedDatasources_key, _savedDatasources_key_plugin, _datasources_key1, _datasources_key_plugin1, _datasources_key_plugin_spec, _savedDatasources_key1, _savedDatasources_key_plugin1, _savedDatasources_key_plugin_spec;
+            var _datasources_key_plugin_spec1;
+            // Datasources are allowed to be used if a) they are direct, or b) they are proxied, and their
+            // proxy is the same as what we have saved.
+            const isDirect = 'directUrl' in ((_datasources_key_plugin_spec1 = (_datasources_key = datasources[key]) === null || _datasources_key === void 0 ? void 0 : (_datasources_key_plugin = _datasources_key.plugin) === null || _datasources_key_plugin === void 0 ? void 0 : _datasources_key_plugin.spec) !== null && _datasources_key_plugin_spec1 !== void 0 ? _datasources_key_plugin_spec1 : {});
+            var _savedDatasources_key_plugin_spec1;
+            const isSavedProxy = !isDirect && !('directUrl' in ((_savedDatasources_key_plugin_spec1 = (_savedDatasources_key = savedDatasources[key]) === null || _savedDatasources_key === void 0 ? void 0 : (_savedDatasources_key_plugin = _savedDatasources_key.plugin) === null || _savedDatasources_key_plugin === void 0 ? void 0 : _savedDatasources_key_plugin.spec) !== null && _savedDatasources_key_plugin_spec1 !== void 0 ? _savedDatasources_key_plugin_spec1 : {})) && ((_datasources_key1 = datasources[key]) === null || _datasources_key1 === void 0 ? void 0 : (_datasources_key_plugin1 = _datasources_key1.plugin) === null || _datasources_key_plugin1 === void 0 ? void 0 : (_datasources_key_plugin_spec = _datasources_key_plugin1.spec) === null || _datasources_key_plugin_spec === void 0 ? void 0 : _datasources_key_plugin_spec.proxy) === ((_savedDatasources_key1 = savedDatasources[key]) === null || _savedDatasources_key1 === void 0 ? void 0 : (_savedDatasources_key_plugin1 = _savedDatasources_key1.plugin) === null || _savedDatasources_key_plugin1 === void 0 ? void 0 : (_savedDatasources_key_plugin_spec = _savedDatasources_key_plugin1.spec) === null || _savedDatasources_key_plugin_spec === void 0 ? void 0 : _savedDatasources_key_plugin_spec.proxy);
+            return isDirect || isSavedProxy;
+        }).reduce((obj, key)=>{
+            obj[key] = datasources[key];
+            return obj;
+        }, {});
+        setDashboard({
+            ...dashboard,
+            spec: {
+                ...dashboard.spec,
+                datasources: datasources
+            }
+        });
+        setSavedDatasources(newSavedDatasources);
+        setLocalDatasources(datasources);
+        setIsDatasourceEditorOpen(false);
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
+                description: _constants.TOOLTIP_TEXT.editDatasources,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                    startIcon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PencilOutline.default, {}),
+                    onClick: openDatasourceEditor,
+                    "aria-label": _constants.TOOLTIP_TEXT.editDatasources,
+                    variant: "text",
+                    color: "primary",
+                    sx: {
+                        whiteSpace: 'nowrap',
+                        minWidth: 'auto'
+                    },
+                    children: "Datasources"
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Drawer, {
+                isOpen: isDatasourceEditorOpen,
+                onClose: closeDatasourceEditor,
+                PaperProps: {
+                    sx: {
+                        width: '50%'
+                    }
+                },
+                "data-testid": "datasource-editor",
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DatasourceEditor.DatasourceEditor, {
+                    datasources: localDatasources,
+                    onCancel: closeDatasourceEditor,
+                    onChange: handleChangeDatasources
+                })
+            })
+        ]
+    });
+}

package/dist/cjs/components/Datasources/index.js

@@ -0,0 +1,31 @@
+// 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
+});
+_export_star(require("./EditDatasourcesButton"), exports);
+_export_star(require("./DatasourceEditor"), exports);
+function _export_star(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
+    });
+    return from;
+}

package/dist/cjs/components/EditJsonDialog/EditJsonDialog.js

@@ -51,6 +51,7 @@ const EditJsonDialogForm = (props)=>{
     const { closeEditJsonDialog  } = (0, _DashboardProvider.useEditJsonDialog)();
     const { setTimeRange , setRefreshInterval  } = (0, _pluginsystem.useTimeRange)();
     const { dashboard , setDashboard  } = (0, _useDashboard.useDashboard)();
+    const { setLocalDatasources  } = (0, _pluginsystem.useDatasourceStore)();
     const [draftDashboard, setDraftDashboard] = (0, _react.useState)(dashboard);
     const handleApply = (e)=>{
         e.preventDefault();
@@ -60,8 +61,18 @@ const EditJsonDialogForm = (props)=>{
         });
         var _draftDashboard_spec_refreshInterval;
         setRefreshInterval((_draftDashboard_spec_refreshInterval = draftDashboard.spec.refreshInterval) !== null && _draftDashboard_spec_refreshInterval !== void 0 ? _draftDashboard_spec_refreshInterval : '0s');
+        var _draftDashboard_spec_datasources;
+        setLocalDatasources((_draftDashboard_spec_datasources = draftDashboard.spec.datasources) !== null && _draftDashboard_spec_datasources !== void 0 ? _draftDashboard_spec_datasources : {});
         closeEditJsonDialog();
     };
+    const completeDraftDashboard = (dashboard)=>{
+        try {
+            const json = JSON.parse(dashboard !== null && dashboard !== void 0 ? dashboard : '{}');
+            setDraftDashboard(json);
+        } catch (e) {
+        // do nothing
+        }
+    };
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.Dialog.Form, {
         onSubmit: handleApply,
         children: [
@@ -83,7 +94,7 @@ const EditJsonDialogForm = (props)=>{
                             minHeight: "300px",
                             maxHeight: "70vh",
                             value: draftDashboard,
-                            onChange: (value)=>setDraftDashboard(value)
+                            onChange: (value)=>completeDraftDashboard(value)
                         })
                     })
                 ]

package/dist/cjs/components/PanelDrawer/PanelEditorForm.js

@@ -29,7 +29,7 @@ _export(exports, {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _react = require("react");
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
 const _pluginsystem = require("@perses-dev/plugin-system");
@@ -39,45 +39,6 @@ const _context = require("../../context");
 const _validation = require("../../validation");
 const _PanelPreview = require("./PanelPreview");
 const _usePanelEditor = require("./usePanelEditor");
-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 = {};
-    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 PanelEditorForm(props) {
     const { initialValues: { panelDefinition: initialPanelDef , groupId: initialGroupId  } , initialAction , onSave , onClose  } = props;
     const panelGroups = (0, _context.useListPanelGroups)();
@@ -135,7 +96,8 @@ function PanelEditorForm(props) {
             onClose();
         }
     }
-    const handlePanelDefinitionChange = (nextPanelDef)=>{
+    const handlePanelDefinitionChange = (nextPanelDefStr)=>{
+        const nextPanelDef = JSON.parse(nextPanelDefStr);
         const { kind: pluginKind , spec: pluginSpec  } = nextPanelDef.spec.plugin;
         // if panel plugin kind and spec are modified, then need to save current spec
         if (panelDefinition.spec.plugin.kind !== pluginKind && JSON.stringify(panelDefinition.spec.plugin.spec) !== JSON.stringify(pluginSpec)) {

package/dist/cjs/components/PanelDrawer/index.js

@@ -15,6 +15,7 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 _export_star(require("./PanelDrawer"), exports);
+_export_star(require("./PanelPreview"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/dist/cjs/components/QuerySummaryTable/QuerySummaryTable.js

@@ -27,7 +27,7 @@ const _pluginsystem = require("@perses-dev/plugin-system");
 const TABLE_MAX_WIDTH = 1000;
 function QuerySummaryTable(props) {
     const { showTotalQueries =true  } = props;
-    const datasourcClient = (0, _pluginsystem.useDatasourceClient)({
+    const datasourceClient = (0, _pluginsystem.useDatasourceClient)({
         kind: 'PrometheusDatasource'
     });
     const { absoluteTimeRange  } = (0, _pluginsystem.useTimeRange)();
@@ -37,7 +37,7 @@ function QuerySummaryTable(props) {
     const activeQueries = queries.filter((query)=>query.state.status === 'loading');
     const completedQueries = queries.filter((query)=>query.state.status === 'success');
     const querySummary = (0, _pluginsystem.useActiveTimeSeriesQueries)();
-    if (datasourcClient.isLoading === true) {
+    if (datasourceClient.isLoading === true) {
         return null;
     }
     const warnings = [];