@perses-dev/dashboards 0.9.0 → 0.10.0

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

@@ -28,38 +28,53 @@ const _jsxRuntime = require("react/jsx-runtime");
 const _react = require("react");
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
+const _pluginSystem = require("@perses-dev/plugin-system");
 const _context = require("../../context");
-const _panelEditorModel = require("./panel-editor-model");
-const _panelTypeSelect = require("./PanelTypeSelect");
-const _panelSpecEditor = require("./PanelSpecEditor");
+const _panelPreview = require("./PanelPreview");
 function PanelEditorForm(props) {
+    var ref;
     const { initialValues , onSubmit  } = props;
     const { layouts  } = (0, _context.useLayouts)();
     const [name, setName] = (0, _react.useState)(initialValues.name);
     const [description, setDescription] = (0, _react.useState)(initialValues.description);
-    const [group, setGroup] = (0, _react.useState)(initialValues.group);
+    const [groupIndex, setGroupIndex] = (0, _react.useState)(initialValues.groupIndex);
     const [kind, setKind] = (0, _react.useState)(initialValues.kind);
-    const { spec , onSpecChange  } = (0, _panelEditorModel.usePanelSpecState)(kind, initialValues.spec);
+    const [spec, setSpec] = (0, _react.useState)(initialValues.spec);
+    // Use common plugin editor logic even though we've split the inputs up in this form
+    const pluginEditor = (0, _pluginSystem.usePluginEditor)({
+        pluginType: 'Panel',
+        value: {
+            kind,
+            spec
+        },
+        onChange: (plugin)=>{
+            setKind(plugin.kind);
+            setSpec(plugin.spec);
+        }
+    });
     // Ignore string values (which would be an "empty" value from the Select) since we don't allow them to unset it
     const handleGroupChange = (e)=>{
         const { value  } = e.target;
         if (typeof value === 'string') {
             return;
         }
-        setGroup(value);
+        setGroupIndex(value);
     };
     const handleSubmit = (e)=>{
         e.preventDefault();
+        if (spec === undefined) {
+            throw new Error('Cannot submit without a plugin spec');
+        }
         const values = {
             name,
             description,
-            group,
+            groupIndex,
             kind,
             spec
         };
         onSubmit(values);
     };
-    var ref;
+    var _title, ref1;
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)("form", {
         id: panelEditorFormId,
         onSubmit: handleSubmit,
@@ -72,7 +87,7 @@ function PanelEditorForm(props) {
                     xs: 8,
                     children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
                         required: true,
-                        label: "Panel Name",
+                        label: "Name",
                         value: name,
                         variant: "outlined",
                         onChange: (e)=>setName(e.target.value)
@@ -91,15 +106,12 @@ function PanelEditorForm(props) {
                                 required: true,
                                 labelId: "select-group",
                                 label: "Group",
-                                value: group !== null && group !== void 0 ? group : 0,
+                                value: groupIndex !== null && groupIndex !== void 0 ? groupIndex : 0,
                                 onChange: handleGroupChange,
-                                children: layouts.map((layout, index)=>{
-                                    var ref1;
-                                    /*#__PURE__*/ return (0, _jsxRuntime.jsx)(_material.MenuItem, {
+                                children: layouts.map((layout, index)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
                                         value: index,
-                                        children: (ref = (ref1 = layout.spec.display) === null || ref1 === void 0 ? void 0 : ref1.title) !== null && ref !== void 0 ? ref : `Group ${index + 1}`
-                                    }, index);
-                                })
+                                        children: (_title = layout.title) !== null && _title !== void 0 ? _title : `Group ${index + 1}`
+                                    }, index))
                             })
                         ]
                     })
@@ -108,40 +120,70 @@ function PanelEditorForm(props) {
                     item: true,
                     xs: 8,
                     children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
-                        label: "Panel Description",
+                        label: "Description",
                         value: description,
                         variant: "outlined",
                         onChange: (e)=>setDescription(e.target.value)
                     })
                 }),
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+                /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Grid, {
                     item: true,
                     xs: 4,
-                    children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.FormControl, {
-                        children: [
-                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.InputLabel, {
-                                id: "panel-type-label",
-                                children: "Panel Type"
-                            }),
-                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panelTypeSelect.PanelTypeSelect, {
-                                required: true,
-                                labelId: "panel-type-label",
-                                label: "Panel Type",
-                                value: kind,
-                                onChange: (e)=>setKind(e.target.value)
+                    children: [
+                        /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.FormControl, {
+                            disabled: pluginEditor.isLoading,
+                            error: pluginEditor.error !== null,
+                            children: [
+                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.InputLabel, {
+                                    id: "panel-type-label",
+                                    children: "Type"
+                                }),
+                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.PluginKindSelect, {
+                                    pluginType: "Panel",
+                                    required: true,
+                                    labelId: "panel-type-label",
+                                    label: "Type",
+                                    value: pluginEditor.pendingKind ? pluginEditor.pendingKind : kind,
+                                    onChange: pluginEditor.onKindChange
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.FormHelperText, {
+                            children: (ref1 = (ref = pluginEditor.error) === null || ref === void 0 ? void 0 : ref.message) !== null && ref1 !== void 0 ? ref1 : ''
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Grid, {
+                    item: true,
+                    xs: 12,
+                    children: [
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                            variant: "h4",
+                            marginBottom: 1,
+                            children: "Preview"
+                        }),
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
+                            FallbackComponent: _components.ErrorAlert,
+                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panelPreview.PanelPreview, {
+                                kind: kind,
+                                name: name,
+                                description: description,
+                                spec: spec,
+                                groupIndex: groupIndex
                             })
-                        ]
-                    })
+                        })
+                    ]
                 }),
                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
                     item: true,
                     xs: 12,
                     children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
                         FallbackComponent: _components.ErrorAlert,
-                        children: spec !== undefined && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panelSpecEditor.PanelSpecEditor, {
-                            panelPluginKind: kind,
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.PluginSpecEditor, {
+                            pluginType: "Panel",
+                            pluginKind: kind,
                             value: spec,
-                            onChange: onSpecChange
+                            onChange: pluginEditor.onSpecChange
                         })
                     })
                 })

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

@@ -0,0 +1,48 @@
+// Copyright 2022 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, "PanelPreview", {
+    enumerable: true,
+    get: ()=>PanelPreview
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _panel = require("../Panel");
+function PanelPreview({ name , description , kind , spec , groupIndex  }) {
+    const previewValues = {
+        definition: {
+            kind: 'Panel',
+            spec: {
+                display: {
+                    name,
+                    description
+                },
+                plugin: {
+                    kind,
+                    spec
+                }
+            }
+        },
+        groupIndex,
+        itemIndex: 0
+    };
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+        height: 300,
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panel.Panel, {
+            ...previewValues
+        })
+    });
+}

package/dist/cjs/components/PanelGroupDialog/DeletePanelGroupDialog.js

@@ -0,0 +1,86 @@
+// Copyright 2022 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, "default", {
+    enumerable: true,
+    get: ()=>_default
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _close = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Close"));
+const _context = require("../../context");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const DeletePanelGroupDialog = ()=>{
+    var ref;
+    const { layouts , deletePanelGroup  } = (0, _context.useLayouts)();
+    const { deletePanelGroupDialog , closeDeletePanelGroupDialog  } = (0, _context.usePanelGroupDialog)();
+    const groupIndex = deletePanelGroupDialog === null || deletePanelGroupDialog === void 0 ? void 0 : deletePanelGroupDialog.groupIndex;
+    const handleDelete = (e)=>{
+        e.preventDefault();
+        if (groupIndex == undefined) {
+            throw new Error('group index is undefined');
+        }
+        deletePanelGroup(groupIndex);
+        closeDeletePanelGroupDialog();
+    };
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Dialog, {
+        open: deletePanelGroupDialog !== undefined,
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.DialogTitle, {
+                children: "Delete Panel Group"
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                "aria-label": "Close",
+                onClick: ()=>closeDeletePanelGroupDialog(),
+                sx: (theme)=>({
+                        position: 'absolute',
+                        top: theme.spacing(0.5),
+                        right: theme.spacing(0.5)
+                    }),
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_close.default, {})
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsxs)("form", {
+                onSubmit: handleDelete,
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.DialogContent, {
+                        sx: {
+                            width: '500px'
+                        },
+                        children: `Are you sure you want to delete ${groupIndex !== undefined && layouts[groupIndex] !== undefined ? (ref = layouts[groupIndex]) === null || ref === void 0 ? void 0 : ref.title : 'panel group'}? This will delete all the panels within the group.`
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.DialogActions, {
+                        children: [
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                                variant: "contained",
+                                type: "submit",
+                                children: "Delete"
+                            }),
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                                onClick: ()=>closeDeletePanelGroupDialog(),
+                                children: "Cancel"
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+const _default = DeletePanelGroupDialog;

package/dist/cjs/components/PanelGroupDialog/PanelGroupDialog.js

@@ -29,30 +29,23 @@ function _interopRequireDefault(obj) {
     };
 }
 const PanelGroupDialog = ()=>{
-    var ref, ref1, ref2, ref3, ref4;
-    const { layouts , updateLayout  } = (0, _context.useLayouts)();
-    const { panelGroupDialog , closePanelGroupDialog  } = (0, _context.useDashboardApp)();
+    var ref, ref1;
+    const { layouts , updatePanelGroup  } = (0, _context.useLayouts)();
+    const { panelGroupDialog , closePanelGroupDialog  } = (0, _context.usePanelGroupDialog)();
     const groupIndex = panelGroupDialog === null || panelGroupDialog === void 0 ? void 0 : panelGroupDialog.groupIndex;
     const isEditingPanelGroup = groupIndex !== undefined;
-    const [isCollapsed, setIsCollapsed] = (0, _react.useState)(isEditingPanelGroup && !((ref1 = (ref = layouts[groupIndex]) === null || ref === void 0 ? void 0 : ref.spec.display) === null || ref1 === void 0 ? void 0 : (ref2 = ref1.collapse) === null || ref2 === void 0 ? void 0 : ref2.open));
-    const [name, setName] = (0, _react.useState)(isEditingPanelGroup ? (ref4 = (ref3 = layouts[groupIndex]) === null || ref3 === void 0 ? void 0 : ref3.spec.display) === null || ref4 === void 0 ? void 0 : ref4.title : '');
+    const [isCollapsed, setIsCollapsed] = (0, _react.useState)(isEditingPanelGroup && ((ref = layouts[groupIndex]) === null || ref === void 0 ? void 0 : ref.isCollapsed));
+    const [name, setName] = (0, _react.useState)(isEditingPanelGroup ? (ref1 = layouts[groupIndex]) === null || ref1 === void 0 ? void 0 : ref1.title : '');
     const handleSubmit = (e)=>{
         var ref;
         e.preventDefault();
-        var _items;
-        const newLayout = {
-            kind: 'Grid',
-            spec: {
-                display: {
-                    title: name !== null && name !== void 0 ? name : '',
-                    collapse: {
-                        open: !isCollapsed
-                    }
-                },
-                items: groupIndex === undefined ? [] : (_items = (ref = layouts[groupIndex]) === null || ref === void 0 ? void 0 : ref.spec.items) !== null && _items !== void 0 ? _items : []
-            }
+        var ref1;
+        const newGroup = {
+            isCollapsed,
+            title: name !== null && name !== void 0 ? name : '',
+            items: groupIndex === undefined ? [] : (ref1 = (ref = layouts[groupIndex]) === null || ref === void 0 ? void 0 : ref.items) !== null && ref1 !== void 0 ? ref1 : []
         };
-        updateLayout(newLayout, groupIndex);
+        updatePanelGroup(newGroup, groupIndex);
         closePanelGroupDialog();
     };
     const handleSelectCollapsedStateChange = (e)=>{
@@ -60,7 +53,7 @@ const PanelGroupDialog = ()=>{
         setIsCollapsed(isCollapsed);
     };
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Dialog, {
-        open: true,
+        open: panelGroupDialog !== undefined,
         children: [
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.DialogTitle, {
                 children: "Panel Group"

package/dist/cjs/components/PanelGroupDialog/PanelGroupDialog.test.js

@@ -20,6 +20,7 @@ const _userEvent = /*#__PURE__*/ _interopRequireDefault(require("@testing-librar
 const _testUtils = require("react-dom/test-utils");
 const _context = require("../../context");
 const _test = require("../../test");
+const _testDashboard = /*#__PURE__*/ _interopRequireDefault(require("../../test/testDashboard"));
 const _panelGroupDialog = /*#__PURE__*/ _interopRequireDefault(require("./PanelGroupDialog"));
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -46,7 +47,6 @@ describe('Add Panel Group', ()=>{
         return storeApi;
     };
     it('should add new panel group', async ()=>{
-        // jest.spyOn(dashboardAppSlice, 'useDashboardApp').mockReturnValue(dashboardApp);
         const storeApi = renderDialog();
         // Open the dialog for a new panel group
         (0, _testUtils.act)(()=>storeApi.getState().openPanelGroupDialog());
@@ -55,19 +55,14 @@ describe('Add Panel Group', ()=>{
         _userEvent.default.click(_react.screen.getByText('Add'));
         const layouts = storeApi.getState().layouts;
         expect(layouts).toContainEqual({
-            kind: 'Grid',
-            spec: {
-                display: {
-                    title: 'New Panel Group',
-                    collapse: {
-                        open: true
-                    }
-                },
-                items: []
-            }
+            id: 3,
+            title: 'New Panel Group',
+            isCollapsed: false,
+            items: []
         });
     });
     it('should edit existing panel group', async ()=>{
+        var ref;
         const storeApi = renderDialog();
         // Open the dialog for an existing panel group
         (0, _testUtils.act)(()=>storeApi.getState().openPanelGroupDialog(0));
@@ -77,26 +72,10 @@ describe('Add Panel Group', ()=>{
         _userEvent.default.click(_react.screen.getByText('Apply'));
         const layouts = storeApi.getState().layouts;
         expect(layouts).toContainEqual({
-            kind: 'Grid',
-            spec: {
-                display: {
-                    title: 'New Name',
-                    collapse: {
-                        open: true
-                    }
-                },
-                items: [
-                    {
-                        content: {
-                            $ref: '#/spec/panels/cpu'
-                        },
-                        height: 4,
-                        width: 12,
-                        x: 0,
-                        y: 0
-                    }
-                ]
-            }
+            id: 0,
+            title: 'New Name',
+            isCollapsed: false,
+            items: (ref = _testDashboard.default.spec.layouts[0]) === null || ref === void 0 ? void 0 : ref.spec.items
         });
     });
 });

package/dist/cjs/components/TimeRangeControls/TimeRangeControls.js

@@ -89,9 +89,9 @@ const TIME_OPTIONS = [
 ];
 function TimeRangeControls() {
     const { timeRange , setTimeRange  } = (0, _pluginSystem.useTimeRange)();
-    const { dashboard  } = (0, _context.useDashboard)();
+    const dashboardDefaultTimeRange = (0, _context.useDefaultTimeRange)();
     const { queryString  } = (0, _pluginSystem.useQueryString)();
-    const defaultTimeRange = (0, _core.getDefaultTimeRange)(dashboard.duration, queryString);
+    const defaultTimeRange = (0, _core.getDefaultTimeRange)(dashboardDefaultTimeRange, queryString);
     // selected form value can be relative or absolute, timeRange from plugin-system is only absolute
     const [selectedTimeRange, setSelectedTimeRange] = (0, _react.useState)(defaultTimeRange);
     const [showCustomDateSelector, setShowCustomDateSelector] = (0, _react.useState)(false);

package/dist/cjs/components/Variables/Variable.js

@@ -51,7 +51,7 @@ function TemplateVariable({ name  }) {
     return Object.values(v).map((v)=>JSON.stringify(v.value)).join(',');
 }
 function ListVariable({ name  }) {
-    var ref, ref1, ref2;
+    var ref, ref1, ref2, ref3;
     const ctx = (0, _context.useTemplateVariable)(name);
     const definition = ctx.definition;
     const { data: variablePlugin  } = (0, _pluginSystem.usePlugin)('Variable', definition.spec.plugin.kind);
@@ -65,6 +65,8 @@ function ListVariable({ name  }) {
     const variables = (0, _pluginSystem.useTemplateVariableValues)(dependsOnVariables);
     const allowMultiple = (definition === null || definition === void 0 ? void 0 : definition.spec.allow_multiple) === true;
     const allowAllValue = (definition === null || definition === void 0 ? void 0 : definition.spec.allow_all_value) === true;
+    var ref4;
+    const label = (ref4 = (ref = definition === null || definition === void 0 ? void 0 : definition.spec.display) === null || ref === void 0 ? void 0 : ref.label) !== null && ref4 !== void 0 ? ref4 : name;
     let waitToLoad = false;
     if (dependsOnVariables) {
         waitToLoad = dependsOnVariables.some((v)=>{
@@ -98,9 +100,9 @@ function ListVariable({ name  }) {
         setVariableLoading,
         setVariableOptions
     ]);
-    let value = (ref = ctx.state) === null || ref === void 0 ? void 0 : ref.value;
-    const options = (ref1 = ctx.state) === null || ref1 === void 0 ? void 0 : ref1.options;
-    const loading = (ref2 = ctx.state) === null || ref2 === void 0 ? void 0 : ref2.loading;
+    let value = (ref1 = ctx.state) === null || ref1 === void 0 ? void 0 : ref1.value;
+    const options = (ref2 = ctx.state) === null || ref2 === void 0 ? void 0 : ref2.options;
+    const loading = (ref3 = ctx.state) === null || ref3 === void 0 ? void 0 : ref3.loading;
     // Make sure value is an array if allowMultiple is true
     if (allowMultiple && !Array.isArray(value)) {
         value = typeof value === 'string' ? [
@@ -155,7 +157,7 @@ function ListVariable({ name  }) {
             children: [
                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.InputLabel, {
                     id: name,
-                    children: name
+                    children: label
                 }),
                 /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Select, {
                     sx: {
@@ -195,13 +197,19 @@ function ListVariable({ name  }) {
 }
 function TextVariable({ name  }) {
     const { state  } = (0, _context.useTemplateVariable)(name);
-    const s = (0, _context.useTemplateVariableStore)();
-    const setVariableValue = s.setVariableValue;
-    const ref = (0, _react.useRef)(null);
+    var ref;
+    const [tempValue, setTempValue] = (0, _react.useState)((ref = state === null || state === void 0 ? void 0 : state.value) !== null && ref !== void 0 ? ref : '');
+    const { setVariableValue  } = (0, _context.useTemplateVariableActions)();
+    (0, _react.useEffect)(()=>{
+        var ref;
+        setTempValue((ref = state === null || state === void 0 ? void 0 : state.value) !== null && ref !== void 0 ? ref : '');
+    }, [
+        state === null || state === void 0 ? void 0 : state.value
+    ]);
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
-        ref: ref,
-        defaultValue: state === null || state === void 0 ? void 0 : state.value,
-        onBlur: (e)=>setVariableValue(name, e.target.value),
+        value: tempValue,
+        onChange: (e)=>setTempValue(e.target.value),
+        onBlur: ()=>setVariableValue(name, tempValue),
         placeholder: name,
         label: name
     });