@perses-dev/dashboards 0.8.1 → 0.10.0

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/DeletePanelGroupDialog.js

@@ -0,0 +1,86 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: ()=>_default
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _close = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Close"));
+const _context = require("../../context");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const DeletePanelGroupDialog = ()=>{
+    var ref;
+    const { layouts , deletePanelGroup  } = (0, _context.useLayouts)();
+    const { deletePanelGroupDialog , closeDeletePanelGroupDialog  } = (0, _context.usePanelGroupDialog)();
+    const groupIndex = deletePanelGroupDialog === null || deletePanelGroupDialog === void 0 ? void 0 : deletePanelGroupDialog.groupIndex;
+    const handleDelete = (e)=>{
+        e.preventDefault();
+        if (groupIndex == undefined) {
+            throw new Error('group index is undefined');
+        }
+        deletePanelGroup(groupIndex);
+        closeDeletePanelGroupDialog();
+    };
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Dialog, {
+        open: deletePanelGroupDialog !== undefined,
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.DialogTitle, {
+                children: "Delete Panel Group"
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                "aria-label": "Close",
+                onClick: ()=>closeDeletePanelGroupDialog(),
+                sx: (theme)=>({
+                        position: 'absolute',
+                        top: theme.spacing(0.5),
+                        right: theme.spacing(0.5)
+                    }),
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_close.default, {})
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsxs)("form", {
+                onSubmit: handleDelete,
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.DialogContent, {
+                        sx: {
+                            width: '500px'
+                        },
+                        children: `Are you sure you want to delete ${groupIndex !== undefined && layouts[groupIndex] !== undefined ? (ref = layouts[groupIndex]) === null || ref === void 0 ? void 0 : ref.title : 'panel group'}? This will delete all the panels within the group.`
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.DialogActions, {
+                        children: [
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                                variant: "contained",
+                                type: "submit",
+                                children: "Delete"
+                            }),
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                                onClick: ()=>closeDeletePanelGroupDialog(),
+                                children: "Cancel"
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+const _default = DeletePanelGroupDialog;

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

@@ -1,9 +1,3 @@
-"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.
@@ -16,45 +10,133 @@ 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 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
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: ()=>_default
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _close = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Close"));
+const _context = require("../../context");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const PanelGroupDialog = ()=>{
+    var ref, ref1;
+    const { layouts , updatePanelGroup  } = (0, _context.useLayouts)();
+    const { panelGroupDialog , closePanelGroupDialog  } = (0, _context.usePanelGroupDialog)();
+    const groupIndex = panelGroupDialog === null || panelGroupDialog === void 0 ? void 0 : panelGroupDialog.groupIndex;
     const isEditingPanelGroup = groupIndex !== undefined;
-    const [isCollapsed, setIsCollapsed] = (0, react_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;
+    const [isCollapsed, setIsCollapsed] = (0, _react.useState)(isEditingPanelGroup && ((ref = layouts[groupIndex]) === null || ref === void 0 ? void 0 : ref.isCollapsed));
+    const [name, setName] = (0, _react.useState)(isEditingPanelGroup ? (ref1 = layouts[groupIndex]) === null || ref1 === void 0 ? void 0 : ref1.title : '');
+    const handleSubmit = (e)=>{
+        var ref;
         e.preventDefault();
-        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 : [],
-            },
+        var ref1;
+        const newGroup = {
+            isCollapsed,
+            title: name !== null && name !== void 0 ? name : '',
+            items: groupIndex === undefined ? [] : (ref1 = (ref = layouts[groupIndex]) === null || ref === void 0 ? void 0 : ref.items) !== null && ref1 !== void 0 ? ref1 : []
         };
-        updateLayout(newLayout, groupIndex);
+        updatePanelGroup(newGroup, groupIndex);
         closePanelGroupDialog();
     };
-    const handleSelectCollapsedStateChange = (e) => {
+    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" })] })] })] }));
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Dialog, {
+        open: panelGroupDialog !== undefined,
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.DialogTitle, {
+                children: "Panel Group"
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                "aria-label": "Close",
+                onClick: ()=>closePanelGroupDialog(),
+                sx: (theme)=>({
+                        position: 'absolute',
+                        top: theme.spacing(0.5),
+                        right: theme.spacing(0.5)
+                    }),
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_close.default, {})
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsxs)("form", {
+                onSubmit: handleSubmit,
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.DialogContent, {
+                        sx: {
+                            width: '500px'
+                        },
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                            spacing: 2,
+                            children: [
+                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.FormControl, {
+                                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                                        required: true,
+                                        label: "Name",
+                                        variant: "outlined",
+                                        value: name,
+                                        onChange: (e)=>setName(e.target.value)
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+                                    sx: {
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        width: '100%',
+                                        justifyContent: 'space-between'
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.InputLabel, {
+                                            children: "Collapse State"
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Select, {
+                                            required: true,
+                                            displayEmpty: true,
+                                            labelId: "select-collapse-state",
+                                            size: "small",
+                                            value: isCollapsed ? 'Close' : 'Open',
+                                            onChange: handleSelectCollapsedStateChange,
+                                            children: [
+                                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
+                                                    value: 'Open',
+                                                    children: "Open"
+                                                }, 'open'),
+                                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
+                                                    value: 'Close',
+                                                    children: "Close"
+                                                }, 'close')
+                                            ]
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.DialogActions, {
+                        children: [
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                                variant: "contained",
+                                type: "submit",
+                                children: isEditingPanelGroup ? 'Apply' : 'Add'
+                            }),
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                                onClick: ()=>closePanelGroupDialog(),
+                                children: "Cancel"
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
 };
-exports.default = PanelGroupDialog;
+const _default = PanelGroupDialog;

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

@@ -1,95 +1,81 @@
+// 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";
-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;
+Object.defineProperty(exports, "__esModule", {
+    value: true
 });
-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: [],
+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 _testDashboard = /*#__PURE__*/ _interopRequireDefault(require("../../test/testDashboard"));
+const _panelGroupDialog = /*#__PURE__*/ _interopRequireDefault(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: {
+                dashboardSpec: (0, _test.getTestDashboard)().spec,
+                isEditMode: true
             },
-        }, undefined);
+            children: [
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(DashboardProviderSpy, {}),
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panelGroupDialog.default, {})
+            ]
+        }));
+        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().openPanelGroupDialog());
+        const nameInput = await _react.screen.findByLabelText(/Name/);
+        _userEvent.default.type(nameInput, 'New Panel Group');
+        _userEvent.default.click(_react.screen.getByText('Add'));
+        const layouts = storeApi.getState().layouts;
+        expect(layouts).toContainEqual({
+            id: 3,
+            title: 'New Panel Group',
+            isCollapsed: false,
+            items: []
+        });
     });
-    it('should edit existing panel group', () => {
-        jest.spyOn(dashboardAppSlice, 'useDashboardApp').mockReturnValue({
-            ...dashboardApp,
-            panelGroupDialog: {
-                groupIndex: 0,
-            },
+    it('should edit existing panel group', async ()=>{
+        var ref;
+        const storeApi = renderDialog();
+        // Open the dialog for an existing panel group
+        (0, _testUtils.act)(()=>storeApi.getState().openPanelGroupDialog(0));
+        const nameInput = await _react.screen.findByLabelText(/Name/);
+        _userEvent.default.clear(nameInput);
+        _userEvent.default.type(nameInput, 'New Name');
+        _userEvent.default.click(_react.screen.getByText('Apply'));
+        const layouts = storeApi.getState().layouts;
+        expect(layouts).toContainEqual({
+            id: 0,
+            title: 'New Name',
+            isCollapsed: false,
+            items: (ref = _testDashboard.default.spec.layouts[0]) === null || ref === void 0 ? void 0 : ref.spec.items
         });
-        (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/TimeRangeControls.js

@@ -1,7 +1,3 @@
-"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.
@@ -14,53 +10,139 @@ 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 react_1 = require("react");
-const material_1 = require("@mui/material");
-const components_1 = require("@perses-dev/components");
-const core_1 = require("@perses-dev/core");
-const plugin_system_1 = require("@perses-dev/plugin-system");
-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' },
-    { 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' },
+"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, {
+    TIME_OPTIONS: ()=>TIME_OPTIONS,
+    TimeRangeControls: ()=>TimeRangeControls
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _components = require("@perses-dev/components");
+const _core = require("@perses-dev/core");
+const _pluginSystem = require("@perses-dev/plugin-system");
+const _context = require("../../context");
+const 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'
+    }
 ];
 function TimeRangeControls() {
-    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);
+    const { timeRange , setTimeRange  } = (0, _pluginSystem.useTimeRange)();
+    const dashboardDefaultTimeRange = (0, _context.useDefaultTimeRange)();
+    const { queryString  } = (0, _pluginSystem.useQueryString)();
+    const defaultTimeRange = (0, _core.getDefaultTimeRange)(dashboardDefaultTimeRange, queryString);
     // selected form value can be relative or absolute, timeRange from plugin-system is only absolute
-    const [selectedTimeRange, setSelectedTimeRange] = (0, react_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: {
+    const [selectedTimeRange, setSelectedTimeRange] = (0, _react.useState)(defaultTimeRange);
+    const [showCustomDateSelector, setShowCustomDateSelector] = (0, _react.useState)(false);
+    const anchorEl = (0, _react.useRef)();
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+        direction: "row",
+        spacing: 1,
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.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: timeRange, onChange: (timeRange) => {
+                    horizontal: 'center'
+                },
+                open: showCustomDateSelector,
+                onClose: ()=>setShowCustomDateSelector(false),
+                sx: (theme)=>({
+                        padding: theme.spacing(2)
+                    }),
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.AbsoluteTimePicker, {
+                    initialTimeRange: timeRange,
+                    onChange: (timeRange)=>{
                         setTimeRange(timeRange);
                         setSelectedTimeRange(timeRange);
                         setShowCustomDateSelector(false);
-                    } }) }), (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) => {
+                    }
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.FormControl, {
+                fullWidth: true,
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                    ref: anchorEl,
+                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.TimeRangeSelector, {
+                        timeOptions: TIME_OPTIONS,
+                        value: selectedTimeRange,
+                        onSelectChange: (event)=>{
                             const duration = event.target.value;
                             const relativeTimeInput = {
                                 pastDuration: duration,
-                                end: new Date(),
+                                end: new Date()
                             };
                             setTimeRange(relativeTimeInput);
                             setSelectedTimeRange(relativeTimeInput);
                             setShowCustomDateSelector(false);
-                        }, onCustomClick: () => {
+                        },
+                        onCustomClick: ()=>{
                             setShowCustomDateSelector(true);
-                        } }) }) })] }));
+                        }
+                    })
+                })
+            })
+        ]
+    });
 }
-exports.TimeRangeControls = TimeRangeControls;