@perses-dev/dashboards 0.5.2 → 0.7.1

package/dist/cjs/components/AddPanel/AddPanel.js

@@ -0,0 +1,75 @@
+"use strict";
+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 material_1 = require("@mui/material");
+const components_1 = require("@perses-dev/components");
+const react_1 = require("react");
+const context_1 = require("../../context");
+const functions_1 = require("../../utils/functions");
+const AddPanel = ({ isOpen, onClose }) => {
+    const { layouts, addItemToLayout } = (0, context_1.useLayouts)();
+    const { addPanel } = (0, context_1.usePanels)();
+    const [group, setGroup] = (0, react_1.useState)(0);
+    const [panelName, setPanelName] = (0, react_1.useState)('');
+    const [panelDescription, setPanelDescription] = (0, react_1.useState)('');
+    const onSelectGroupChange = (e) => {
+        setGroup(e.target.value);
+    };
+    const onPanelNameChange = (e) => {
+        setPanelName(e.target.value);
+    };
+    const onPanelDescriptionChange = (e) => {
+        setPanelDescription(e.target.value);
+    };
+    const onAddPanelClick = (e) => {
+        var _a;
+        e.preventDefault();
+        const panelKey = (0, functions_1.removeWhiteSpacesAndSpecialCharacters)(panelName);
+        addPanel(panelKey, {
+            kind: 'EmptyChart',
+            display: { name: panelName, description: panelDescription },
+            options: {},
+        });
+        // find maximum y so new panel is added to the end of the grid
+        let maxY = 0;
+        (_a = layouts[group]) === null || _a === void 0 ? void 0 : _a.spec.items.forEach((layout) => {
+            if (layout.y > maxY) {
+                maxY = layout.y;
+            }
+        });
+        addItemToLayout(group, {
+            x: 0,
+            y: maxY + 1,
+            width: 12,
+            height: 6,
+            content: { $ref: `#/spec/panels/${panelKey}` },
+        });
+        onClose();
+    };
+    return ((0, jsx_runtime_1.jsx)(components_1.Drawer, { isOpen: isOpen, onClose: onClose, children: (0, jsx_runtime_1.jsxs)("form", { onSubmit: onAddPanelClick, children: [(0, jsx_runtime_1.jsx)(AddPanelHeader, { onClose: onClose }), (0, jsx_runtime_1.jsxs)(material_1.Grid, { container: true, spacing: 2, children: [(0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 4, children: (0, jsx_runtime_1.jsxs)(material_1.FormControl, { children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { id: "select-group", children: "Group" }), (0, jsx_runtime_1.jsx)(material_1.Select, { required: true, labelId: "select-group", label: "Group", value: group, onChange: onSelectGroupChange, children: layouts.map((layout, index) => {
+                                            var _a;
+                                            return ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: index, children: ((_a = layout.spec.display) === null || _a === void 0 ? void 0 : _a.title) || `Group ${index + 1}` }, index));
+                                        }) })] }) }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 8, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { spacing: 2, sx: { flexGrow: '1' }, children: [(0, jsx_runtime_1.jsx)(material_1.FormControl, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { required: true, label: "Panel Name", variant: "outlined", onChange: onPanelNameChange }) }), (0, jsx_runtime_1.jsx)(material_1.FormControl, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { label: "Description", variant: "outlined", onChange: onPanelDescriptionChange }) })] }) })] })] }) }));
+};
+const AddPanelHeader = ({ onClose }) => {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+            display: 'flex',
+            alignItems: 'center',
+            marginBottom: (theme) => theme.spacing(2),
+            paddingBottom: (theme) => theme.spacing(2),
+            borderBottom: (theme) => `1px solid ${theme.palette.grey[100]}`,
+        }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h5", children: "Add Panel" }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 1, sx: { marginLeft: 'auto' }, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { type: "submit", variant: "contained", children: "Add Panel" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", onClick: onClose, children: "Cancel" })] })] }));
+};
+exports.default = AddPanel;

package/dist/cjs/components/DashboardToolbar.js

@@ -0,0 +1,52 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DashboardToolbar = 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 material_1 = require("@mui/material");
+const PencilOutline_1 = __importDefault(require("mdi-material-ui/PencilOutline"));
+const Plus_1 = __importDefault(require("mdi-material-ui/Plus"));
+const context_1 = require("../context");
+const components_1 = require("../components");
+const DashboardToolbar = (props) => {
+    const { dashboardName, onAddPanel } = props;
+    const { isEditMode, setEditMode } = (0, context_1.useEditMode)();
+    const onEditButtonClick = () => {
+        setEditMode(true);
+    };
+    const onCancelButtonClick = () => {
+        setEditMode(false);
+    };
+    const { addLayout } = (0, context_1.useLayouts)();
+    const onAddGroup = () => {
+        const newLayout = {
+            kind: 'Grid',
+            spec: {
+                display: {
+                    title: 'New Group',
+                    collapse: {
+                        open: true,
+                    },
+                },
+                items: [],
+            },
+        };
+        addLayout(newLayout);
+    };
+    return ((0, jsx_runtime_1.jsx)(material_1.Toolbar, { disableGutters: true, sx: { display: 'block', padding: (theme) => theme.spacing(2, 0) }, children: isEditMode ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', width: '100%' }, children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "h2", children: ["Edit ", dashboardName] }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 1, sx: { marginLeft: 'auto' }, children: [(0, jsx_runtime_1.jsx)(components_1.TimeRangeControls, {}), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", onClick: onCancelButtonClick, children: "Cancel" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", children: "Save" })] })] }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: 'row', spacing: 1, sx: { display: 'flex', justifyContent: 'flex-end', width: '100%', padding: (theme) => theme.spacing(2, 0) }, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { startIcon: (0, jsx_runtime_1.jsx)(Plus_1.default, {}), onClick: onAddGroup, children: "Add Group" }), (0, jsx_runtime_1.jsx)(material_1.Button, { startIcon: (0, jsx_runtime_1.jsx)(Plus_1.default, {}), onClick: onAddPanel, children: "Add Panel" })] })] })) : ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', width: '100%' }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h2", children: dashboardName }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 2, sx: { marginLeft: 'auto' }, children: [(0, jsx_runtime_1.jsx)(components_1.TimeRangeControls, {}), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", startIcon: (0, jsx_runtime_1.jsx)(PencilOutline_1.default, {}), onClick: onEditButtonClick, sx: { marginLeft: 'auto' }, children: "Edit" })] })] })) }));
+};
+exports.DashboardToolbar = DashboardToolbar;

package/dist/cjs/components/GridLayout/GridLayout.js

@@ -1,4 +1,7 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridLayout = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -15,9 +18,12 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // See the License for the specific language governing permissions and
 // limitations under the License.
 const react_1 = require("react");
+const react_grid_layout_1 = require("react-grid-layout");
 const material_1 = require("@mui/material");
+const styles_1 = __importDefault(require("../../css/styles"));
+const context_1 = require("../../context");
 const GridTitle_1 = require("./GridTitle");
-const COLUMNS = 24;
+const ResponsiveGridLayout = (0, react_grid_layout_1.WidthProvider)(react_grid_layout_1.Responsive);
 /**
  * Layout component that arranges children in a Grid based on the definition.
  */
@@ -25,35 +31,14 @@ function GridLayout(props) {
     var _a, _b, _c;
     const { definition: { spec }, renderGridItemContent, ...others } = props;
     const [isOpen, setIsOpen] = (0, react_1.useState)((_c = (_b = (_a = spec.display) === null || _a === void 0 ? void 0 : _a.collapse) === null || _b === void 0 ? void 0 : _b.open) !== null && _c !== void 0 ? _c : true);
+    const { isEditMode } = (0, context_1.useEditMode)();
     const gridItems = [];
-    let mobileRowStart = 1;
     spec.items.forEach((item, idx) => {
-        // Try to maintain the chart's aspect ratio on mobile
-        const widthScale = COLUMNS / item.width;
-        const mobileRows = Math.floor(item.height * widthScale);
-        gridItems.push((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
-                gridColumn: {
-                    xs: `1 / span ${COLUMNS}`,
-                    sm: `${item.x + 1} / span ${item.width}`,
-                },
-                gridRow: {
-                    xs: `${mobileRowStart} / span ${mobileRows}`,
-                    sm: `${item.y + 1} / span ${item.height}`,
-                },
-            }, children: renderGridItemContent(item) }, idx));
-        mobileRowStart += mobileRows;
+        const { x, y, width: w, height: h } = item;
+        gridItems.push((0, jsx_runtime_1.jsx)("div", { "data-grid": { x, y, w, h }, children: renderGridItemContent(item) }, idx));
     });
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { ...others, component: "section", sx: { '& + &': { marginTop: (theme) => theme.spacing(1) } }, children: [spec.display !== undefined && ((0, jsx_runtime_1.jsx)(GridTitle_1.GridTitle, { title: spec.display.title, collapse: spec.display.collapse === undefined
-                    ? undefined
-                    : { isOpen, onToggleOpen: () => setIsOpen((current) => !current) } })), (0, jsx_runtime_1.jsx)(material_1.Collapse, { in: isOpen, unmountOnExit: true, children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
-                        display: 'grid',
-                        gridTemplateColumns: `repeat(${COLUMNS}, 1fr)`,
-                        gridAutoRows: {
-                            xs: 24,
-                            sm: 36,
-                        },
-                        columnGap: (theme) => theme.spacing(1),
-                        rowGap: (theme) => theme.spacing(1),
-                    }, children: gridItems }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.GlobalStyles, { styles: styles_1.default }), (0, jsx_runtime_1.jsxs)(material_1.Box, { ...others, component: "section", sx: { '& + &': { marginTop: (theme) => theme.spacing(1) } }, children: [spec.display !== undefined && ((0, jsx_runtime_1.jsx)(GridTitle_1.GridTitle, { title: spec.display.title, collapse: spec.display.collapse === undefined
+                            ? undefined
+                            : { isOpen, onToggleOpen: () => setIsOpen((current) => !current) } })), (0, jsx_runtime_1.jsx)(material_1.Collapse, { in: isOpen, unmountOnExit: true, children: (0, jsx_runtime_1.jsx)(ResponsiveGridLayout, { className: "layout", breakpoints: { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }, cols: { lg: 24, md: 24, sm: 24, xs: 24, xxs: 2 }, rowHeight: 30, draggableHandle: '.drag-handle', resizeHandles: ['se'], isDraggable: isEditMode, isResizable: isEditMode, children: gridItems }) })] })] }));
 }
 exports.GridLayout = GridLayout;

package/dist/cjs/components/Panel/Panel.js

@@ -24,6 +24,10 @@ const plugin_system_1 = require("@perses-dev/plugin-system");
 const components_1 = require("@perses-dev/components");
 const material_1 = require("@mui/material");
 const InformationOutline_1 = __importDefault(require("mdi-material-ui/InformationOutline"));
+const Pencil_1 = __importDefault(require("mdi-material-ui/Pencil"));
+const DotsVertical_1 = __importDefault(require("mdi-material-ui/DotsVertical"));
+const Drag_1 = __importDefault(require("mdi-material-ui/Drag"));
+const context_1 = require("../../context");
 /**
  * Renders a PanelDefinition's content inside of a Card.
  */
@@ -43,6 +47,7 @@ function Panel(props) {
     });
     // TODO: adjust padding for small panels, consistent way to determine isLargePanel here and in StatChart
     const panelPadding = 1.5;
+    const { isEditMode } = (0, context_1.useEditMode)();
     return ((0, jsx_runtime_1.jsxs)(material_1.Card, { ref: ref, sx: {
             ...others.sx,
             width: '100%',
@@ -52,7 +57,12 @@ function Panel(props) {
         }, variant: "outlined", ...others, children: [(0, jsx_runtime_1.jsx)(material_1.CardHeader, { title: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                         display: 'flex',
                         alignItems: 'center',
-                    }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { component: "h2", variant: "body2", fontWeight: (theme) => theme.typography.fontWeightMedium, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", children: definition.display.name }), definition.display.description && ((0, jsx_runtime_1.jsx)(components_1.InfoTooltip, { id: "info-tooltip", description: definition.display.description, placement: components_1.TooltipPlacement.Right, children: (0, jsx_runtime_1.jsx)(InformationOutline_1.default, { "aria-describedby": "info-tooltip", "aria-hidden": false, sx: { fontSize: '1rem', position: 'relative', left: '4px', cursor: 'pointer' } }) }))] }), sx: {
+                        minHeight: '24px',
+                    }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { component: "h2", variant: "body2", fontWeight: (theme) => theme.typography.fontWeightMedium, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", children: definition.display.name }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                marginLeft: 'auto',
+                            }, children: [!isEditMode && definition.display.description && ((0, jsx_runtime_1.jsx)(components_1.InfoTooltip, { id: "info-tooltip", description: definition.display.description, placement: components_1.TooltipPlacement.Bottom, children: (0, jsx_runtime_1.jsx)(InformationOutline_1.default, { "aria-describedby": "info-tooltip", "aria-hidden": false, fontSize: "small", sx: { cursor: 'pointer' } }) })), isEditMode && ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [(0, jsx_runtime_1.jsx)(IconButton, { "aria-label": "drag handle", size: "small", children: (0, jsx_runtime_1.jsx)(Drag_1.default, { className: "drag-handle", sx: { cursor: 'grab' } }) }), (0, jsx_runtime_1.jsx)(IconButton, { "aria-label": "edit panel", size: "small", children: (0, jsx_runtime_1.jsx)(Pencil_1.default, {}) }), (0, jsx_runtime_1.jsx)(IconButton, { "aria-label": "more", size: "small", children: (0, jsx_runtime_1.jsx)(DotsVertical_1.default, {}) })] }))] })] }), sx: {
                     display: 'block',
                     padding: (theme) => theme.spacing(1, panelPadding),
                     borderBottom: (theme) => `solid 1px ${theme.palette.divider}`,
@@ -68,3 +78,7 @@ function Panel(props) {
                 }, ref: setContentElement, children: (0, jsx_runtime_1.jsx)(plugin_system_1.PluginBoundary, { loadingFallback: "Loading...", ErrorFallbackComponent: components_1.ErrorAlert, children: inView === true && (0, jsx_runtime_1.jsx)(plugin_system_1.PanelComponent, { definition: definition, contentDimensions: contentDimensions }) }) })] }));
 }
 exports.Panel = Panel;
+const IconButton = (0, material_1.styled)(material_1.IconButton)(({ theme }) => ({
+    borderRadius: theme.shape.borderRadius,
+    padding: '4px',
+}));

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

@@ -1,10 +1,15 @@
 "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");
 const plugin_system_1 = require("@perses-dev/plugin-system");
 require("intersection-observer");
 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 Panel_1 = require("./Panel");
 const FAKE_PANEL_PLUGIN = {
     pluginType: 'Panel',
@@ -17,6 +22,7 @@ const FAKE_PANEL_PLUGIN = {
 };
 describe('Panel', () => {
     let props;
+    let initialState;
     beforeEach(() => {
         props = {
             definition: {
@@ -28,16 +34,27 @@ describe('Panel', () => {
                 options: {},
             },
         };
+        initialState = {
+            isEditMode: false,
+            dashboardSpec: testDashboard_1.default.spec,
+        };
     });
     // Helper to render the panel with some context set
-    const renderPanel = () => {
+    const renderPanel = (initialState) => {
         const { addMockPlugin, pluginRegistryProps } = (0, test_1.mockPluginRegistryProps)();
         addMockPlugin(FAKE_PANEL_PLUGIN);
-        (0, test_1.renderWithContext)((0, jsx_runtime_1.jsx)(plugin_system_1.PluginRegistry, { ...pluginRegistryProps, children: (0, jsx_runtime_1.jsx)(Panel_1.Panel, { ...props }) }));
+        (0, test_1.renderWithContext)((0, jsx_runtime_1.jsx)(context_1.DashboardProvider, { initialState: initialState, children: (0, jsx_runtime_1.jsx)(plugin_system_1.PluginRegistry, { ...pluginRegistryProps, children: (0, jsx_runtime_1.jsx)(Panel_1.Panel, { ...props }) }) }));
     };
     it('should render name and info icon', async () => {
-        renderPanel();
+        renderPanel(initialState);
         await react_1.screen.findByText('Fake Panel');
         react_1.screen.queryByLabelText('info-tooltip');
     });
+    it('should render edit icons when in edit mode', async () => {
+        initialState.isEditMode = true;
+        renderPanel(initialState);
+        await react_1.screen.queryByLabelText('drag handle');
+        react_1.screen.queryByLabelText('edit panel');
+        react_1.screen.queryByLabelText('more');
+    });
 });

package/dist/cjs/components/TimeRangeControls.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimeRangeControls = exports.TIME_OPTIONS = 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 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");
+// TODO: add time shortcut if one does not match duration
+exports.TIME_OPTIONS = [
+    { value: { pastDuration: '5m' }, display: 'Last 5 minutes' },
+    { value: { pastDuration: '15m' }, display: 'Last 15 minutes' },
+    { value: { pastDuration: '30m' }, display: 'Last 30 minutes' },
+    { value: { pastDuration: '1h' }, display: 'Last 1 hour' },
+    { value: { pastDuration: '6h' }, display: 'Last 6 hours' },
+    { value: { pastDuration: '12h' }, display: 'Last 12 hours' },
+    { value: { pastDuration: '24h' }, display: 'Last 1 day' },
+    { 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 [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: {
+                    vertical: 'bottom',
+                    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) => {
+                        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);
+                            } }) })] })] }));
+}
+exports.TimeRangeControls = TimeRangeControls;

package/dist/cjs/components/VariableAutocomplete.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VariableAutocomplete = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-// Copyright 2021 The Perses Authors
+// 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
@@ -22,7 +22,7 @@ const plugin_system_1 = require("@perses-dev/plugin-system");
  * appropriate plugin.
  */
 function VariableAutocomplete(props) {
-    const { definition, state, onChange, onOptionsChange, TextFieldProps } = props;
+    const { definition, state, onChange, onOptionsChange, TextFieldProps, ...others } = props;
     const { value, options } = state;
     const allValue = 'all_value' in definition.selection ? definition.selection.all_value : undefined;
     const displayOptions = (0, react_1.useMemo)(() => {
@@ -58,6 +58,6 @@ function VariableAutocomplete(props) {
         }, getOptionLabel: (option) => (option === allValue ? 'All' : option), ChipProps: {
             color: 'default',
             variant: 'outlined',
-        } }));
+        }, ...others }));
 }
 exports.VariableAutocomplete = VariableAutocomplete;

package/dist/cjs/components/{VariableOptionsDrawer/VariableOptionsDrawer.js → VariableList/VariableList.js}

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VariableOptionsDrawer = void 0;
+exports.VariableList = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-// Copyright 2021 The Perses Authors
+// 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
@@ -19,20 +19,14 @@ const components_1 = require("@perses-dev/components");
 const plugin_system_1 = require("@perses-dev/plugin-system");
 const context_1 = require("../../context");
 const VariableAutocomplete_1 = require("../VariableAutocomplete");
-const DRAWER_WIDTH = 296;
 /**
- * Dashboard options drawer that includes variable inputs.
+ * Displays the list of variable inputs for a dashboard.
  */
-function VariableOptionsDrawer(props) {
-    const { variables, sx, ...others } = props;
+function VariableList(props) {
+    const { variables, ...others } = props;
     const { variables: variablesState } = (0, plugin_system_1.useTemplateVariables)();
     const { setValue, setOptions } = (0, context_1.useTemplateVariablesSetters)();
-    return ((0, jsx_runtime_1.jsxs)(material_1.Paper, { sx: (0, components_1.combineSx)({
-            width: DRAWER_WIDTH,
-            flexShrink: 0,
-            padding: (theme) => theme.spacing(1, 2),
-            borderLeft: (theme) => `1px solid ${theme.palette.divider}`,
-        }, sx), square: true, elevation: 0, ...others, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { component: "h2", variant: "h6", children: "Variables" }), Object.entries(variables).map(([variableName, variableDef]) => {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: { xs: 'column', sm: 'row' }, alignItems: { sm: 'center' }, spacing: 2, ...others, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", sx: { fontWeight: (theme) => theme.typography.fontWeightMedium }, children: "Variables" }), Object.entries(variables).map(([variableName, variableDef]) => {
                 if (variableDef.display.hide === true)
                     return null;
                 const variableState = variablesState[variableName];
@@ -40,7 +34,9 @@ function VariableOptionsDrawer(props) {
                     const error = new Error(`Variable state for '${variableName}' not found`);
                     return (0, jsx_runtime_1.jsx)(components_1.ErrorAlert, { error: error }, variableName);
                 }
-                return ((0, jsx_runtime_1.jsx)(plugin_system_1.PluginBoundary, { loadingFallback: "Loading...", ErrorFallbackComponent: components_1.ErrorAlert, children: (0, jsx_runtime_1.jsx)(VariableAutocomplete_1.VariableAutocomplete, { definition: variableDef, state: variableState, onChange: (value) => setValue(variableName, value), onOptionsChange: (options) => setOptions(variableName, options) }) }, variableName));
+                return ((0, jsx_runtime_1.jsx)(plugin_system_1.PluginBoundary, { loadingFallback: "Loading...", ErrorFallbackComponent: components_1.ErrorAlert, children: (0, jsx_runtime_1.jsx)(VariableAutocomplete_1.VariableAutocomplete, { definition: variableDef, state: variableState, onChange: (value) => setValue(variableName, value), onOptionsChange: (options) => setOptions(variableName, options), TextFieldProps: {
+                            margin: 'none',
+                        }, sx: { minWidth: 250 } }) }, variableName));
             })] }));
 }
-exports.VariableOptionsDrawer = VariableOptionsDrawer;
+exports.VariableList = VariableList;

package/dist/cjs/components/{VariableOptionsDrawer/VariableOptionsDrawer.test.js → VariableList/VariableList.test.js}

@@ -21,8 +21,8 @@ const user_event_1 = __importDefault(require("@testing-library/user-event"));
 const plugin_system_1 = require("@perses-dev/plugin-system");
 const test_1 = require("../../test");
 const context_1 = require("../../context");
-const VariableOptionsDrawer_1 = require("./VariableOptionsDrawer");
-describe('VariableOptionsDrawer', () => {
+const VariableList_1 = require("./VariableList");
+describe('VariableList', () => {
     const variables = {
         job: {
             display: {
@@ -55,27 +55,32 @@ describe('VariableOptionsDrawer', () => {
     const renderVariableOptionsDrawer = () => {
         const { addMockPlugin, pluginRegistryProps } = (0, test_1.mockPluginRegistryProps)();
         addMockPlugin(FAKE_PANEL_PLUGIN);
-        (0, test_1.renderWithContext)((0, jsx_runtime_1.jsx)(plugin_system_1.PluginRegistry, { ...pluginRegistryProps, children: (0, jsx_runtime_1.jsx)(context_1.TemplateVariablesProvider, { variableDefinitions: variables, children: (0, jsx_runtime_1.jsx)(VariableOptionsDrawer_1.VariableOptionsDrawer, { variables: variables }) }) }));
+        (0, test_1.renderWithContext)((0, jsx_runtime_1.jsx)(plugin_system_1.PluginRegistry, { ...pluginRegistryProps, children: (0, jsx_runtime_1.jsx)(context_1.TemplateVariablesProvider, { variableDefinitions: variables, children: (0, jsx_runtime_1.jsx)(VariableList_1.VariableList, { variables: variables }) }) }));
     };
     it('should display Variables as the title', async () => {
         renderVariableOptionsDrawer();
-        await react_1.screen.findByText('Variables');
+        const title = await react_1.screen.findByText('Variables');
+        expect(title).toBeInTheDocument();
     });
     describe('VariableAutocomplete', () => {
         it('should display correct variable', async () => {
             renderVariableOptionsDrawer();
-            await react_1.screen.findByLabelText('Job');
+            const jobInput = await react_1.screen.findByLabelText('Job');
+            expect(jobInput).toBeInTheDocument();
         });
         it('should display correct default value', async () => {
             renderVariableOptionsDrawer();
-            await react_1.screen.findByDisplayValue('node');
+            const jobValue = await react_1.screen.findByDisplayValue('node');
+            expect(jobValue).toBeInTheDocument();
         });
         it('should display correct options', async () => {
             renderVariableOptionsDrawer();
             const openButton = await react_1.screen.findByRole('button', { name: 'Open' });
             user_event_1.default.click(openButton);
-            await react_1.screen.findByText('all');
-            react_1.screen.getByText('node');
+            const option1 = await react_1.screen.findByText('all');
+            expect(option1).toBeInTheDocument();
+            const option2 = react_1.screen.getByText('node');
+            expect(option2).toBeInTheDocument();
         });
     });
 });

package/dist/cjs/components/VariableList/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("./VariableList"), exports);

package/dist/cjs/components/index.js

@@ -1,5 +1,5 @@
 "use strict";
-// Copyright 2021 The Perses Authors
+// 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
@@ -29,5 +29,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./Dashboard"), exports);
 __exportStar(require("./GridLayout"), exports);
 __exportStar(require("./Panel/Panel"), exports);
+__exportStar(require("./TimeRangeControls"), exports);
 __exportStar(require("./VariableAutocomplete"), exports);
-__exportStar(require("./VariableOptionsDrawer/VariableOptionsDrawer"), exports);
+__exportStar(require("./VariableList"), exports);

package/dist/cjs/context/DashboardProvider.js

@@ -0,0 +1,80 @@
+"use strict";
+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;
+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 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)();
+function usePanels() {
+    const { panels, addPanel } = useStore(({ panels, addPanel }) => ({ panels, addPanel }));
+    return { panels, addPanel };
+}
+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 };
+}
+exports.useEditMode = useEditMode;
+function useDashboard() {
+    const selectDashboardSpec = (state) => {
+        return (0, immer_1.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);
+    return { dashboard };
+}
+exports.useDashboard = useDashboard;
+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) => ({
+            layouts,
+            panels,
+            dashboard: dashboardSpec,
+            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 }));
+}
+exports.DashboardProvider = DashboardProvider;