@perses-dev/dashboards 0.0.0-snapshot-time-range-height-80d08fc

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

@@ -0,0 +1,131 @@
+// 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
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("@testing-library/react");
+const _userEvent = /*#__PURE__*/ _interopRequireDefault(require("@testing-library/user-event"));
+const _testUtils = require("react-dom/test-utils");
+const _test = require("../../test");
+const _dashboardProvider = require("../../context/DashboardProvider");
+const _panelDrawer = require("./PanelDrawer");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+describe('Panel Drawer', ()=>{
+    const renderPanelDrawer = ()=>{
+        const { store , DashboardProviderSpy  } = (0, _test.createDashboardProviderSpy)();
+        (0, _test.renderWithContext)(/*#__PURE__*/ (0, _jsxRuntime.jsxs)(_dashboardProvider.DashboardProvider, {
+            initialState: {
+                dashboardResource: (0, _test.getTestDashboard)(),
+                isEditMode: true
+            },
+            children: [
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(DashboardProviderSpy, {}),
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panelDrawer.PanelDrawer, {})
+            ]
+        }));
+        const { value: storeApi  } = store;
+        if (storeApi === undefined) {
+            throw new Error('Expected dashboard store to be set after initial render');
+        }
+        return storeApi;
+    };
+    it('should add new panel', async ()=>{
+        const storeApi = renderPanelDrawer();
+        // Open the drawer for a new panel
+        (0, _testUtils.act)(()=>storeApi.getState().openAddPanel());
+        const nameInput = await _react.screen.findByLabelText(/Name/);
+        _userEvent.default.type(nameInput, 'New Panel');
+        _userEvent.default.click(_react.screen.getByText('Add'));
+        // TODO: Assert drawer is closed?
+        const panels = storeApi.getState().panels;
+        expect(panels).toMatchObject({
+            // Should have the new panel in the store
+            NewPanel: {
+                kind: 'Panel',
+                spec: {
+                    display: {
+                        name: 'New Panel'
+                    },
+                    plugin: {
+                        kind: '',
+                        spec: {}
+                    }
+                }
+            }
+        });
+    });
+    it('should add panel with duplicate panel name', async ()=>{
+        const storeApi = renderPanelDrawer();
+        (0, _testUtils.act)(()=>storeApi.getState().openAddPanel());
+        const nameInput = await _react.screen.findByLabelText(/Name/);
+        _userEvent.default.type(nameInput, 'cpu');
+        _userEvent.default.click(_react.screen.getByText('Add'));
+        const panels = storeApi.getState().panels;
+        expect(panels).toMatchObject({
+            // make sure we don't have duplicate panel key by appending "-1"
+            'cpu-1': {
+                kind: 'Panel',
+                spec: {
+                    display: {
+                        name: 'cpu'
+                    },
+                    plugin: {
+                        kind: '',
+                        spec: {}
+                    }
+                }
+            }
+        });
+    });
+    it('should edit an existing panel', async ()=>{
+        const storeApi = renderPanelDrawer();
+        // Open the drawer for an existing panel
+        const group = Object.values(storeApi.getState().panelGroups).find((group)=>group.title === 'CPU Stats');
+        if (group === undefined) {
+            throw new Error('Test group not found');
+        }
+        const layout = Object.entries(group.itemPanelKeys).find(([, panelKey])=>panelKey === 'cpu');
+        if (layout === undefined) {
+            throw new Error('Test panel not found');
+        }
+        (0, _testUtils.act)(()=>storeApi.getState().openEditPanel({
+                panelGroupId: group.id,
+                panelGroupItemLayoutId: layout[0]
+            }));
+        const nameInput = await _react.screen.findByLabelText(/Name/);
+        _userEvent.default.clear(nameInput);
+        _userEvent.default.type(nameInput, 'cpu usage');
+        _userEvent.default.click(_react.screen.getByText('Apply'));
+        const panels = storeApi.getState().panels;
+        expect(panels).toMatchObject({
+            cpu: {
+                kind: 'Panel',
+                spec: {
+                    display: {
+                        name: 'cpu usage'
+                    },
+                    plugin: {
+                        kind: 'TimeSeriesChart',
+                        spec: {}
+                    }
+                }
+            }
+        });
+    });
+});

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

@@ -0,0 +1,202 @@
+// 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
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    PanelEditorForm: ()=>PanelEditorForm,
+    panelEditorFormId: ()=>panelEditorFormId
+});
+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 _panelPreview = require("./PanelPreview");
+function PanelEditorForm(props) {
+    var ref;
+    const { initialValues , onSubmit  } = props;
+    const panelGroups = (0, _context.useListPanelGroups)();
+    const [name, setName] = (0, _react.useState)(initialValues.name);
+    const [description, setDescription] = (0, _react.useState)(initialValues.description);
+    const [groupId, setGroupId] = (0, _react.useState)(initialValues.groupId);
+    const [kind, setKind] = (0, _react.useState)(initialValues.kind);
+    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;
+        }
+        setGroupId(value);
+    };
+    const handleSubmit = (e)=>{
+        e.preventDefault();
+        const values = {
+            name,
+            description,
+            groupId,
+            kind,
+            spec
+        };
+        onSubmit(values);
+    };
+    var _title, ref1;
+    return(// Grid maxHeight allows user to scroll inside Drawer to see all content
+    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+        component: "form",
+        id: panelEditorFormId,
+        onSubmit: handleSubmit,
+        sx: {
+            flex: 1,
+            overflowY: 'scroll',
+            padding: (theme)=>theme.spacing(2)
+        },
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Grid, {
+            container: true,
+            spacing: 2,
+            children: [
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+                    item: true,
+                    xs: 8,
+                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                        required: true,
+                        fullWidth: true,
+                        label: "Name",
+                        value: name,
+                        variant: "outlined",
+                        onChange: (e)=>setName(e.target.value)
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+                    item: true,
+                    xs: 4,
+                    children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.FormControl, {
+                        fullWidth: true,
+                        children: [
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.InputLabel, {
+                                id: "select-group",
+                                children: "Group"
+                            }),
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Select, {
+                                required: true,
+                                labelId: "select-group",
+                                label: "Group",
+                                value: groupId,
+                                onChange: handleGroupChange,
+                                children: panelGroups.map((panelGroup, index)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
+                                        value: panelGroup.id,
+                                        children: (_title = panelGroup.title) !== null && _title !== void 0 ? _title : `Group ${index + 1}`
+                                    }, panelGroup.id))
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+                    item: true,
+                    xs: 8,
+                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                        fullWidth: true,
+                        label: "Description",
+                        value: description,
+                        variant: "outlined",
+                        onChange: (e)=>setDescription(e.target.value)
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Grid, {
+                    item: true,
+                    xs: 4,
+                    children: [
+                        /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.FormControl, {
+                            fullWidth: true,
+                            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,
+                                groupId: groupId
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+                    item: true,
+                    xs: 12,
+                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
+                        FallbackComponent: _components.ErrorAlert,
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.PluginSpecEditor, {
+                            pluginType: "Panel",
+                            pluginKind: kind,
+                            value: spec,
+                            onChange: pluginEditor.onSpecChange
+                        })
+                    })
+                })
+            ]
+        })
+    }));
+}
+const panelEditorFormId = 'panel-editor-form';

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

@@ -0,0 +1,47 @@
+// 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  }) {
+    const definition = {
+        kind: 'Panel',
+        spec: {
+            display: {
+                name,
+                description: description === '' ? undefined : description
+            },
+            plugin: {
+                kind,
+                spec
+            }
+        }
+    };
+    if (kind === '') {
+        return null;
+    }
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+        height: 300,
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panel.Panel, {
+            definition: definition
+        })
+    });
+}

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

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

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

@@ -0,0 +1,101 @@
+// 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, "PanelGroupDialog", {
+    enumerable: true,
+    get: ()=>PanelGroupDialog
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _close = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Close"));
+const _react = require("react");
+const _context = require("../../context");
+const _panelGroupEditorForm = require("./PanelGroupEditorForm");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function PanelGroupDialog() {
+    const panelGroupEditor = (0, _context.usePanelGroupEditor)();
+    // When the user clicks close, start closing but don't call the store yet to keep values stable during animtation
+    const [isClosing, setIsClosing] = (0, _react.useState)(false);
+    const handleClose = ()=>setIsClosing(true);
+    // Don't call close on the store until the Dialog has completely transitioned out
+    const handleExited = ()=>{
+        panelGroupEditor === null || panelGroupEditor === void 0 ? void 0 : panelGroupEditor.close();
+        setIsClosing(false);
+    };
+    // Dialog is open if we have a model and we're not transitioning out
+    const isOpen = panelGroupEditor !== undefined && isClosing === false;
+    const handleSubmit = (values)=>{
+        // This shouldn't happen since we don't render the submit button until we have a model, but check to make TS happy
+        if (panelGroupEditor === undefined) {
+            throw new Error('Cannot apply changes');
+        }
+        panelGroupEditor.applyChanges(values);
+        handleClose();
+    };
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Dialog, {
+        open: isOpen,
+        TransitionProps: {
+            onExited: handleExited
+        },
+        children: panelGroupEditor !== undefined && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [
+                /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.DialogTitle, {
+                    children: [
+                        panelGroupEditor.mode,
+                        " Panel Group"
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                    "aria-label": "Close",
+                    onClick: panelGroupEditor.close,
+                    sx: (theme)=>({
+                            position: 'absolute',
+                            top: theme.spacing(0.5),
+                            right: theme.spacing(0.5)
+                        }),
+                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_close.default, {})
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.DialogContent, {
+                    sx: {
+                        width: '500px'
+                    },
+                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panelGroupEditorForm.PanelGroupEditorForm, {
+                        initialValues: panelGroupEditor.initialValues,
+                        onSubmit: handleSubmit
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.DialogActions, {
+                    children: [
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                            variant: "contained",
+                            type: "submit",
+                            form: _panelGroupEditorForm.panelGroupEditorFormId,
+                            children: panelGroupEditor.mode === 'Edit' ? 'Apply' : 'Add'
+                        }),
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                            onClick: panelGroupEditor.close,
+                            children: "Cancel"
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}

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

@@ -0,0 +1,87 @@
+// 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
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("@testing-library/react");
+const _userEvent = /*#__PURE__*/ _interopRequireDefault(require("@testing-library/user-event"));
+const _testUtils = require("react-dom/test-utils");
+const _context = require("../../context");
+const _test = require("../../test");
+const _panelGroupDialog = require("./PanelGroupDialog");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+describe('Add Panel Group', ()=>{
+    const renderDialog = ()=>{
+        const { store , DashboardProviderSpy  } = (0, _test.createDashboardProviderSpy)();
+        (0, _test.renderWithContext)(/*#__PURE__*/ (0, _jsxRuntime.jsxs)(_context.DashboardProvider, {
+            initialState: {
+                dashboardResource: (0, _test.getTestDashboard)(),
+                isEditMode: true
+            },
+            children: [
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(DashboardProviderSpy, {}),
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panelGroupDialog.PanelGroupDialog, {})
+            ]
+        }));
+        const { value: storeApi  } = store;
+        if (storeApi === undefined) {
+            throw new Error('Expected dashboard store to be set after initial render');
+        }
+        return storeApi;
+    };
+    it('should add new panel group', async ()=>{
+        const storeApi = renderDialog();
+        // Open the dialog for a new panel group
+        (0, _testUtils.act)(()=>storeApi.getState().openAddPanelGroup());
+        const nameInput = await _react.screen.findByLabelText(/Name/);
+        _userEvent.default.type(nameInput, 'New Panel Group');
+        _userEvent.default.click(_react.screen.getByText('Add'));
+        // TODO: Figure out how to test this without coupling to the store state
+        const panelGroups = Object.values(storeApi.getState().panelGroups);
+        expect(panelGroups).toContainEqual({
+            id: expect.any(Number),
+            title: 'New Panel Group',
+            isCollapsed: false,
+            itemLayouts: expect.any(Array),
+            itemPanelKeys: expect.any(Object)
+        });
+    });
+    it('should edit existing panel group', async ()=>{
+        const storeApi = renderDialog();
+        // Open the dialog for an existing panel group
+        const group = Object.values(storeApi.getState().panelGroups).find((group)=>group.title === 'CPU Stats');
+        if (group === undefined) {
+            throw new Error('Missing test group');
+        }
+        (0, _testUtils.act)(()=>storeApi.getState().openEditPanelGroup(group.id));
+        const nameInput = await _react.screen.findByLabelText(/Name/);
+        _userEvent.default.clear(nameInput);
+        _userEvent.default.type(nameInput, 'New Name');
+        _userEvent.default.click(_react.screen.getByText('Apply'));
+        // TODO: Figure out how to test this without coupling to the store state
+        const panelGroups = storeApi.getState().panelGroups;
+        expect(panelGroups).toMatchObject({
+            [group.id]: {
+                id: group.id,
+                title: 'New Name',
+                isCollapsed: false
+            }
+        });
+    });
+});