@perses-dev/dashboards 0.7.0 → 0.8.0

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

@@ -0,0 +1,60 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+// 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.
+const react_1 = require("react");
+const material_1 = require("@mui/material");
+const Close_1 = __importDefault(require("mdi-material-ui/Close"));
+const context_1 = require("../../context");
+const PanelGroupDialog = () => {
+    var _a, _b, _c, _d, _e;
+    const { layouts, updateLayout } = (0, context_1.useLayouts)();
+    const { panelGroupDialog, closePanelGroupDialog } = (0, context_1.useDashboardApp)();
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const { groupIndex } = panelGroupDialog; // PanelGroupDialog is only mounted if panelGroupDialog is defined
+    const isEditingPanelGroup = groupIndex !== undefined;
+    const [isCollapsed, setIsCollapsed] = (0, react_1.useState)(isEditingPanelGroup && !((_c = (_b = (_a = layouts[groupIndex]) === null || _a === void 0 ? void 0 : _a.spec.display) === null || _b === void 0 ? void 0 : _b.collapse) === null || _c === void 0 ? void 0 : _c.open));
+    const [name, setName] = (0, react_1.useState)(isEditingPanelGroup ? (_e = (_d = layouts[groupIndex]) === null || _d === void 0 ? void 0 : _d.spec.display) === null || _e === void 0 ? void 0 : _e.title : '');
+    const handleSubmit = (e) => {
+        var _a, _b;
+        e.preventDefault();
+        const newLayout = {
+            kind: 'Grid',
+            spec: {
+                display: {
+                    title: name !== null && name !== void 0 ? name : '',
+                    collapse: {
+                        open: !isCollapsed,
+                    },
+                },
+                items: groupIndex === undefined ? [] : (_b = (_a = layouts[groupIndex]) === null || _a === void 0 ? void 0 : _a.spec.items) !== null && _b !== void 0 ? _b : [],
+            },
+        };
+        updateLayout(newLayout, groupIndex);
+        closePanelGroupDialog();
+    };
+    const handleSelectCollapsedStateChange = (e) => {
+        const isCollapsed = e.target.value === 'Close';
+        setIsCollapsed(isCollapsed);
+    };
+    return ((0, jsx_runtime_1.jsxs)(material_1.Dialog, { open: true, children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { children: "Panel Group" }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { "aria-label": "Close", onClick: () => closePanelGroupDialog(), sx: (theme) => ({
+                    position: 'absolute',
+                    top: theme.spacing(0.5),
+                    right: theme.spacing(0.5),
+                }), children: (0, jsx_runtime_1.jsx)(Close_1.default, {}) }), (0, jsx_runtime_1.jsxs)("form", { onSubmit: handleSubmit, children: [(0, jsx_runtime_1.jsx)(material_1.DialogContent, { sx: { width: '500px' }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(material_1.FormControl, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { required: true, label: "Name", variant: "outlined", value: name, onChange: (e) => setName(e.target.value) }) }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', alignItems: 'center', width: '100%', justifyContent: 'space-between' }, children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { children: "Collapse State" }), (0, jsx_runtime_1.jsxs)(material_1.Select, { required: true, displayEmpty: true, labelId: "select-collapse-state", size: "small", value: isCollapsed ? 'Close' : 'Open', onChange: handleSelectCollapsedStateChange, children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: 'Open', children: "Open" }, 'open'), (0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: 'Close', children: "Close" }, 'close')] })] })] }) }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", type: "submit", children: isEditingPanelGroup ? 'Apply' : 'Add' }), (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: () => closePanelGroupDialog(), children: "Cancel" })] })] })] }));
+};
+exports.default = PanelGroupDialog;

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

@@ -0,0 +1,95 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+const user_event_1 = __importDefault(require("@testing-library/user-event"));
+const immer_1 = __importDefault(require("immer"));
+const dashboardAppSlice = __importStar(require("../../context/DashboardAppSlice"));
+const layoutsSlice = __importStar(require("../../context/LayoutsSlice"));
+const test_1 = require("../../test");
+const testDashboard_1 = __importDefault(require("../../test/testDashboard"));
+const PanelGroupDialog_1 = __importDefault(require("./PanelGroupDialog"));
+const dashboardApp = {
+    panelDrawer: undefined,
+    openPanelDrawer: jest.fn(),
+    closePanelDrawer: jest.fn(),
+    panelGroupDialog: {
+        groupIndex: undefined,
+    },
+    openPanelGroupDialog: jest.fn(),
+    closePanelGroupDialog: jest.fn(),
+};
+const updateLayout = jest.fn();
+jest.spyOn(layoutsSlice, 'useLayouts').mockReturnValue({
+    updateLayout,
+    addItemToLayout: jest.fn(),
+    layouts: testDashboard_1.default.spec.layouts,
+});
+describe('Add Panel Group', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+    it('should add new panel group', () => {
+        jest.spyOn(dashboardAppSlice, 'useDashboardApp').mockReturnValue(dashboardApp);
+        (0, test_1.renderWithContext)((0, jsx_runtime_1.jsx)(PanelGroupDialog_1.default, {}));
+        const nameInput = react_1.screen.getByLabelText(/Name/);
+        user_event_1.default.type(nameInput, 'New Panel Group');
+        user_event_1.default.click(react_1.screen.getByText('Add'));
+        expect(updateLayout).toHaveBeenCalledWith({
+            kind: 'Grid',
+            spec: {
+                display: {
+                    title: 'New Panel Group',
+                    collapse: {
+                        open: true,
+                    },
+                },
+                items: [],
+            },
+        }, undefined);
+    });
+    it('should edit existing panel group', () => {
+        jest.spyOn(dashboardAppSlice, 'useDashboardApp').mockReturnValue({
+            ...dashboardApp,
+            panelGroupDialog: {
+                groupIndex: 0,
+            },
+        });
+        (0, test_1.renderWithContext)((0, jsx_runtime_1.jsx)(PanelGroupDialog_1.default, {}));
+        const nameInput = react_1.screen.getByLabelText(/Name/);
+        user_event_1.default.type(nameInput, 'New Name');
+        user_event_1.default.click(react_1.screen.getByText('Apply'));
+        expect(updateLayout).toHaveBeenCalledWith((0, immer_1.default)(testDashboard_1.default.spec.layouts[0], (draftState) => {
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            draftState.spec.display.title += 'New Name';
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            draftState.spec.display.collapse = { open: false };
+        }), 0);
+    });
+});

package/dist/cjs/components/{TimeRangeControls.js → TimeRangeControls/TimeRangeControls.js}

@@ -16,11 +16,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // limitations under the License.
 const react_1 = require("react");
 const material_1 = require("@mui/material");
-const date_fns_1 = require("date-fns");
 const components_1 = require("@perses-dev/components");
 const core_1 = require("@perses-dev/core");
 const plugin_system_1 = require("@perses-dev/plugin-system");
-const TimeRangeStateProvider_1 = require("../context/TimeRangeStateProvider");
+const context_1 = require("../../context");
 // TODO: add time shortcut if one does not match duration
 exports.TIME_OPTIONS = [
     { value: { pastDuration: '5m' }, display: 'Last 5 minutes' },
@@ -33,17 +32,13 @@ exports.TIME_OPTIONS = [
     { value: { pastDuration: '7d' }, display: 'Last 7 days' },
     { value: { pastDuration: '14d' }, display: 'Last 14 days' },
 ];
-const FORM_CONTROL_LABEL = 'Time Range';
 function TimeRangeControls() {
-    const { setTimeRange } = (0, TimeRangeStateProvider_1.useTimeRangeSetter)();
-    const { defaultDuration } = (0, plugin_system_1.useTimeRange)();
-    const defaultStart = (0, core_1.parseDurationString)(defaultDuration);
-    // TODO: default to URL param if populated
-    const [selectedTimeRange, setSelectedTimeRange] = (0, react_1.useState)({ pastDuration: defaultDuration });
-    const [absoluteTimeRange, setAbsoluteTime] = (0, react_1.useState)({
-        start: (0, date_fns_1.sub)(new Date(), { ...defaultStart }),
-        end: new Date(),
-    });
+    const { timeRange, setTimeRange } = (0, plugin_system_1.useTimeRange)();
+    const { dashboard } = (0, context_1.useDashboard)();
+    const { queryString } = (0, plugin_system_1.useQueryString)();
+    const defaultTimeRange = (0, core_1.getDefaultTimeRange)(dashboard.duration, queryString);
+    // selected form value can be relative or absolute, timeRange from plugin-system is only absolute
+    const [selectedTimeRange, setSelectedTimeRange] = (0, react_1.useState)(defaultTimeRange);
     const [showCustomDateSelector, setShowCustomDateSelector] = (0, react_1.useState)(false);
     const anchorEl = (0, react_1.useRef)();
     return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 1, children: [(0, jsx_runtime_1.jsx)(material_1.Popover, { anchorEl: anchorEl.current, anchorOrigin: {
@@ -51,27 +46,21 @@ function TimeRangeControls() {
                     horizontal: 'center',
                 }, open: showCustomDateSelector, onClose: () => setShowCustomDateSelector(false), sx: (theme) => ({
                     padding: theme.spacing(2),
-                }), children: (0, jsx_runtime_1.jsx)(components_1.AbsoluteTimePicker, { initialTimeRange: absoluteTimeRange, onChange: (timeRange) => {
+                }), children: (0, jsx_runtime_1.jsx)(components_1.AbsoluteTimePicker, { initialTimeRange: timeRange, onChange: (timeRange) => {
                         setTimeRange(timeRange);
-                        if (!(0, core_1.isRelativeValue)(timeRange)) {
-                            setAbsoluteTime({ start: timeRange.start, end: timeRange.end });
-                        }
                         setSelectedTimeRange(timeRange);
                         setShowCustomDateSelector(false);
-                    } }) }), (0, jsx_runtime_1.jsxs)(material_1.FormControl, { fullWidth: true, children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { children: FORM_CONTROL_LABEL }), (0, jsx_runtime_1.jsx)(material_1.Box, { ref: anchorEl, children: (0, jsx_runtime_1.jsx)(components_1.TimeRangeSelector, { inputLabel: FORM_CONTROL_LABEL, timeOptions: exports.TIME_OPTIONS, value: selectedTimeRange, onSelectChange: (event) => {
-                                const duration = event.target.value;
-                                const relativeTimeInput = {
-                                    pastDuration: duration,
-                                    end: new Date(),
-                                };
-                                // TODO: consolidate unnecessary state
-                                setSelectedTimeRange(relativeTimeInput);
-                                const convertedAbsoluteTime = (0, core_1.toAbsoluteTimeRange)(relativeTimeInput);
-                                setTimeRange(convertedAbsoluteTime);
-                                setAbsoluteTime(convertedAbsoluteTime);
-                                setShowCustomDateSelector(false);
-                            }, onCustomClick: () => {
-                                setShowCustomDateSelector(true);
-                            } }) })] })] }));
+                    } }) }), (0, jsx_runtime_1.jsx)(material_1.FormControl, { fullWidth: true, children: (0, jsx_runtime_1.jsx)(material_1.Box, { ref: anchorEl, children: (0, jsx_runtime_1.jsx)(components_1.TimeRangeSelector, { timeOptions: exports.TIME_OPTIONS, value: selectedTimeRange, onSelectChange: (event) => {
+                            const duration = event.target.value;
+                            const relativeTimeInput = {
+                                pastDuration: duration,
+                                end: new Date(),
+                            };
+                            setTimeRange(relativeTimeInput);
+                            setSelectedTimeRange(relativeTimeInput);
+                            setShowCustomDateSelector(false);
+                        }, onCustomClick: () => {
+                            setShowCustomDateSelector(true);
+                        } }) }) })] }));
 }
 exports.TimeRangeControls = TimeRangeControls;

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

@@ -0,0 +1,51 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+// 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.
+const user_event_1 = __importDefault(require("@testing-library/user-event"));
+const core_1 = require("@perses-dev/core");
+const react_1 = require("@testing-library/react");
+const test_1 = require("../../test");
+const testDashboard_1 = __importDefault(require("../../test/testDashboard"));
+const context_1 = require("../../context");
+const TimeRangeControls_1 = require("./TimeRangeControls");
+describe('TimeRangeControls', () => {
+    let initialState;
+    beforeEach(() => {
+        initialState = {
+            dashboardSpec: testDashboard_1.default.spec,
+        };
+    });
+    const renderTimeRangeControls = () => {
+        const queryString = new URLSearchParams();
+        const defaultTimeRange = (0, core_1.getDefaultTimeRange)(initialState.dashboardSpec.duration, queryString);
+        (0, test_1.renderWithContext)((0, jsx_runtime_1.jsx)(context_1.QueryStringProvider, { queryString: queryString, children: (0, jsx_runtime_1.jsx)(context_1.DashboardProvider, { initialState: initialState, children: (0, jsx_runtime_1.jsx)(context_1.TimeRangeProvider, { initialTimeRange: defaultTimeRange, children: (0, jsx_runtime_1.jsx)(TimeRangeControls_1.TimeRangeControls, {}) }) }) }));
+    };
+    it('should render correct initial relative time shortcut', async () => {
+        renderTimeRangeControls();
+        expect(react_1.screen.getByText('Last 1 day')).toBeInTheDocument();
+    });
+    it('should be able to select the first option', () => {
+        renderTimeRangeControls();
+        const dateButton = react_1.screen.getByRole('button');
+        user_event_1.default.click(dateButton);
+        const firstOption = react_1.screen.getByRole('option', { name: 'Last 5 minutes' });
+        user_event_1.default.click(firstOption);
+        expect(dateButton).toHaveTextContent(/5 minutes/i);
+    });
+    // TODO: add additional tests for absolute time selection, other inputs, form validation, etc.
+});

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

@@ -0,0 +1,29 @@
+"use strict";
+// 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.
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./TimeRangeControls"), exports);

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

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TemplateVariable = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// 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.
+const react_1 = require("react");
+const material_1 = require("@mui/material");
+const mdi_material_ui_1 = require("mdi-material-ui");
+const context_1 = require("../../context");
+function TemplateVariable({ name }) {
+    var _a;
+    const ctx = (0, context_1.useTemplateVariable)(name);
+    const kind = (_a = ctx.definition) === null || _a === void 0 ? void 0 : _a.kind;
+    switch (kind) {
+        case 'TextVariable':
+            return (0, jsx_runtime_1.jsx)(TextVariable, { name: name });
+        case 'ListVariable':
+            return (0, jsx_runtime_1.jsx)(ListVariable, { name: name });
+    }
+    return (0, jsx_runtime_1.jsxs)("div", { children: ["Unsupported Variable Kind: $", kind] });
+}
+exports.TemplateVariable = TemplateVariable;
+function ListVariable({ name }) {
+    var _a, _b, _c, _d;
+    const ctx = (0, context_1.useTemplateVariable)(name);
+    const definition = ctx.definition;
+    const { setVariableValue, loadTemplateVariable } = (0, context_1.useTemplateVariableActions)();
+    const allowMultiple = (definition === null || definition === void 0 ? void 0 : definition.options.allowMultiple) === true;
+    (0, react_1.useEffect)(() => {
+        loadTemplateVariable(name);
+    }, [name, loadTemplateVariable]);
+    let value = (_a = ctx.state) === null || _a === void 0 ? void 0 : _a.value;
+    if (allowMultiple && !Array.isArray(value)) {
+        value = [];
+    }
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { display: 'flex', children: [(0, jsx_runtime_1.jsxs)(material_1.FormControl, { children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { id: name, children: name }), (0, jsx_runtime_1.jsx)(material_1.Select, { id: name, label: name, value: value, onChange: (e) => {
+                            setVariableValue(name, e.target.value);
+                        }, multiple: allowMultiple, children: (_c = (_b = ctx.state) === null || _b === void 0 ? void 0 : _b.options) === null || _c === void 0 ? void 0 : _c.map((option) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: option.value, children: option.label }, option.value))) }), ((_d = ctx.state) === null || _d === void 0 ? void 0 : _d.loading) && (0, jsx_runtime_1.jsx)(material_1.LinearProgress, {})] }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: () => loadTemplateVariable(name), children: (0, jsx_runtime_1.jsx)(mdi_material_ui_1.Reload, {}) })] }));
+}
+function TextVariable({ name }) {
+    const { state } = (0, context_1.useTemplateVariable)(name);
+    const s = (0, context_1.useTemplateVariableStore)();
+    const setVariableValue = s.setVariableValue;
+    const ref = (0, react_1.useRef)(null);
+    return ((0, jsx_runtime_1.jsx)(material_1.TextField, { ref: ref, defaultValue: state === null || state === void 0 ? void 0 : state.value, onBlur: (e) => setVariableValue(name, e.target.value), placeholder: name, label: name }));
+}

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TemplateVariableList = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// 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.
+const react_1 = require("react");
+const material_1 = require("@mui/material");
+const context_1 = require("../../context");
+const Variable_1 = require("./Variable");
+function TemplateVariableList() {
+    const [isEditing, setIsEditing] = (0, react_1.useState)(false);
+    const variableDefinitions = (0, context_1.useTemplateVariableDefinitions)();
+    const { isEditMode } = (0, context_1.useEditMode)();
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { m: 2, children: [(0, jsx_runtime_1.jsx)(material_1.Drawer, { anchor: 'right', open: isEditing, onClose: () => setIsEditing(false), children: (0, jsx_runtime_1.jsxs)(material_1.Box, { width: 900, p: 4, children: [(0, jsx_runtime_1.jsx)(material_1.TableContainer, { component: material_1.Paper, children: (0, jsx_runtime_1.jsxs)(material_1.Table, { sx: { minWidth: 650 }, "aria-label": "simple table", children: [(0, jsx_runtime_1.jsx)(material_1.TableHead, { children: (0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, { children: "Variable Name" }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { align: "right", children: "Type" })] }) }), (0, jsx_runtime_1.jsx)(material_1.TableBody, { children: variableDefinitions.map((v) => ((0, jsx_runtime_1.jsxs)(material_1.TableRow, { sx: { '&:last-child td, &:last-child th': { border: 0 } }, children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, { component: "th", scope: "row", sx: { fontWeight: 'bold' }, children: v.name }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { align: "right", children: v.kind })] }, v.name))) })] }) }), (0, jsx_runtime_1.jsx)("pre", { children: JSON.stringify(variableDefinitions, null, 2) })] }) }), (0, jsx_runtime_1.jsx)(material_1.Box, { display: 'flex', justifyContent: "space-between", children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: 'row', spacing: 2, children: [variableDefinitions.map((v) => ((0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(Variable_1.TemplateVariable, { name: v.name }, v.name) }, v.name))), isEditMode && (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: () => setIsEditing(true), children: "Modify Variables" })] }) })] }));
+}
+exports.TemplateVariableList = TemplateVariableList;

package/dist/cjs/components/{VariableList → Variables}/index.js

@@ -26,4 +26,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Variable"), exports);
 __exportStar(require("./VariableList"), exports);

package/dist/cjs/components/index.js

@@ -28,7 +28,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./Dashboard"), exports);
 __exportStar(require("./GridLayout"), exports);
-__exportStar(require("./Panel/Panel"), exports);
+__exportStar(require("./Panel"), exports);
 __exportStar(require("./TimeRangeControls"), exports);
-__exportStar(require("./VariableAutocomplete"), exports);
-__exportStar(require("./VariableList"), exports);
+__exportStar(require("./Variables"), exports);

package/dist/cjs/context/DashboardAppSlice.js

@@ -0,0 +1,45 @@
+"use strict";
+// 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.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDashboardApp = exports.createDashboardAppSlice = void 0;
+const immer_1 = require("zustand/middleware/immer");
+const DashboardProvider_1 = require("./DashboardProvider");
+exports.createDashboardAppSlice = (0, immer_1.immer)((set) => ({
+    openPanelDrawer: ({ groupIndex, panelKey }) => set((state) => {
+        state.panelDrawer = {
+            groupIndex,
+            panelKey,
+        };
+    }),
+    closePanelDrawer: () => set((state) => {
+        state.panelDrawer = undefined;
+    }),
+    openPanelGroupDialog: (groupIndex) => set((state) => {
+        state.panelGroupDialog = { groupIndex };
+    }),
+    closePanelGroupDialog: () => set((state) => {
+        state.panelGroupDialog = undefined;
+    }),
+}));
+function useDashboardApp() {
+    return (0, DashboardProvider_1.useDashboardStore)(({ panelDrawer, openPanelDrawer, closePanelDrawer, panelGroupDialog, openPanelGroupDialog, closePanelGroupDialog, }) => ({
+        panelDrawer,
+        openPanelDrawer,
+        closePanelDrawer,
+        panelGroupDialog,
+        openPanelGroupDialog,
+        closePanelGroupDialog,
+    }));
+}
+exports.useDashboardApp = useDashboardApp;

package/dist/cjs/context/DashboardProvider.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DashboardProvider = exports.useDashboard = exports.useEditMode = exports.useLayouts = exports.usePanels = void 0;
+exports.DashboardProvider = exports.useDashboardStore = exports.useDashboard = exports.useEditMode = exports.usePanels = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 // Copyright 2022 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
@@ -17,64 +17,82 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // 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.
-const zustand_1 = __importDefault(require("zustand"));
-const context_1 = __importDefault(require("zustand/context"));
-const immer_1 = __importDefault(require("immer"));
-const { Provider, useStore } = (0, context_1.default)();
+const zustand_1 = require("zustand");
+const immer_1 = require("zustand/middleware/immer");
+const shallow_1 = __importDefault(require("zustand/shallow"));
+const react_1 = require("react");
+const immer_2 = __importDefault(require("immer"));
+const DashboardAppSlice_1 = require("./DashboardAppSlice");
+const LayoutsSlice_1 = require("./LayoutsSlice");
 function usePanels() {
-    const { panels, addPanel } = useStore(({ panels, addPanel }) => ({ panels, addPanel }));
-    return { panels, addPanel };
+    return useDashboardStore(({ panels, updatePanel }) => ({ panels, updatePanel }));
 }
 exports.usePanels = usePanels;
-function useLayouts() {
-    const { layouts, setLayouts, addLayout, addItemToLayout } = useStore(({ layouts, setLayouts, addLayout, addItemToLayout }) => ({
-        layouts,
-        setLayouts,
-        addLayout,
-        addItemToLayout,
-    }));
-    return { layouts, setLayouts, addLayout, addItemToLayout };
-}
-exports.useLayouts = useLayouts;
 function useEditMode() {
-    const { isEditMode, setEditMode } = useStore(({ isEditMode, setEditMode }) => ({ isEditMode, setEditMode }));
-    return { isEditMode, setEditMode };
+    return useDashboardStore(({ isEditMode, setEditMode }) => ({ isEditMode, setEditMode }));
 }
 exports.useEditMode = useEditMode;
 function useDashboard() {
     const selectDashboardSpec = (state) => {
-        return (0, immer_1.default)(state.dashboard, (draftState) => {
+        return (0, immer_2.default)(state.dashboard, (draftState) => {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             draftState.panels = state.panels;
             draftState.layouts = state.layouts;
         });
     };
-    const dashboard = useStore(selectDashboardSpec);
+    const dashboard = useDashboardStore(selectDashboardSpec);
     return { dashboard };
 }
 exports.useDashboard = useDashboard;
+const DashboardContext = (0, react_1.createContext)(undefined);
+function useDashboardStore(selector) {
+    const store = (0, react_1.useContext)(DashboardContext);
+    if (store === undefined) {
+        throw new Error('No DashboardContext found. Did you forget a Provider?');
+    }
+    return (0, zustand_1.useStore)(store, selector, shallow_1.default);
+}
+exports.useDashboardStore = useDashboardStore;
 function DashboardProvider(props) {
     const { children, initialState: { dashboardSpec, isEditMode }, } = props;
     const { layouts, panels } = dashboardSpec;
-    return ((0, jsx_runtime_1.jsx)(Provider, { createStore: () => (0, zustand_1.default)((set) => ({
+    const dashboardStore = (0, zustand_1.createStore)()((0, immer_1.immer)((set, get, api) => {
+        return {
+            ...(0, DashboardAppSlice_1.createDashboardAppSlice)(set, get, api, []),
+            ...(0, LayoutsSlice_1.createLayoutsSlice)(set, get, api, []),
             layouts,
             panels,
             dashboard: dashboardSpec,
+            updatePanel: (name, panel, groupIndex = 0) => set((state) => {
+                var _a, _b;
+                // add new panel to layouts if panels[name] is undefined
+                if (state.panels[name] === undefined) {
+                    // find maximum y so new panel is added to the end of the grid
+                    let maxY = 0;
+                    (_a = state.layouts[groupIndex]) === null || _a === void 0 ? void 0 : _a.spec.items.forEach((layout) => {
+                        if (layout.y > maxY) {
+                            maxY = layout.y;
+                        }
+                    });
+                    const panelLayout = {
+                        x: 0,
+                        y: maxY + 1,
+                        width: 12,
+                        height: 6,
+                        content: { $ref: `#/spec/panels/${name}` },
+                    };
+                    const layouts = state.layouts;
+                    if (layouts && layouts[groupIndex]) {
+                        (_b = layouts[groupIndex]) === null || _b === void 0 ? void 0 : _b.spec.items.push(panelLayout);
+                    }
+                }
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                state.panels[name] = panel;
+            }),
             isEditMode: !!isEditMode,
             setEditMode: (isEditMode) => set({ isEditMode }),
-            setLayouts: (layouts) => set({ layouts }),
-            addLayout: (layout) => set((0, immer_1.default)((state) => {
-                state.layouts.push(layout);
-            })),
-            addItemToLayout: (index, item) => set((0, immer_1.default)((state) => {
-                state.layouts[index].spec.items.push(item);
-            })),
-            setPanels: (panels) => set({ panels }),
-            addPanel: (name, panel) => {
-                set((0, immer_1.default)((state) => {
-                    state.panels[name] = panel;
-                }, {}));
-            },
-        })), children: children }));
+        };
+    }));
+    return ((0, jsx_runtime_1.jsx)(DashboardContext.Provider, { value: dashboardStore, children: children }));
 }
 exports.DashboardProvider = DashboardProvider;

package/dist/cjs/context/LayoutsSlice.js

@@ -0,0 +1,42 @@
+"use strict";
+// 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.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLayouts = exports.createLayoutsSlice = void 0;
+const immer_1 = require("zustand/middleware/immer");
+const DashboardProvider_1 = require("./DashboardProvider");
+exports.createLayoutsSlice = (0, immer_1.immer)((set) => ({
+    updateLayout: (layout, index) => set((state) => {
+        if (index === undefined) {
+            state.layouts.unshift(layout);
+        }
+        else {
+            state.layouts[index] = layout;
+        }
+    }),
+    addItemToLayout: (index, item) => set((state) => {
+        var _a;
+        const layouts = state.layouts;
+        if (layouts && layouts[index]) {
+            (_a = layouts[index]) === null || _a === void 0 ? void 0 : _a.spec.items.push(item);
+        }
+    }),
+}));
+function useLayouts() {
+    return (0, DashboardProvider_1.useDashboardStore)(({ layouts, updateLayout, addItemToLayout }) => ({
+        layouts,
+        updateLayout,
+        addItemToLayout,
+    }));
+}
+exports.useLayouts = useLayouts;