@perses-dev/dashboards 0.10.0 → 0.12.0

package/dist/cjs/test/testDashboard.js

@@ -28,7 +28,7 @@ const testDashboard = {
         version: 0
     },
     spec: {
-        duration: '24h',
+        duration: '5m',
         variables: [
             {
                 kind: 'TextVariable',
@@ -144,6 +144,7 @@ const testDashboard = {
                     }
                 }
             },
+            // This panel is referenced in more than one layout below
             diskIO: {
                 kind: 'Panel',
                 spec: {
@@ -242,6 +243,15 @@ const testDashboard = {
                 kind: 'Grid',
                 spec: {
                     items: [
+                        {
+                            x: 0,
+                            y: 0,
+                            width: 6,
+                            height: 2,
+                            content: {
+                                $ref: '#/spec/panels/diskIO'
+                            }
+                        },
                         {
                             x: 8,
                             y: 0,
@@ -265,15 +275,6 @@ const testDashboard = {
                         }
                     },
                     items: [
-                        {
-                            x: 0,
-                            y: 0,
-                            width: 6,
-                            height: 2,
-                            content: {
-                                $ref: '#/spec/panels/diskIO'
-                            }
-                        },
                         {
                             x: 18,
                             y: 0,

package/dist/cjs/utils/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("./time-range-params"), 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/utils/time-range-params.js

@@ -0,0 +1,151 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    encodeTimeRangeValue: ()=>encodeTimeRangeValue,
+    decodeTimeRangeValue: ()=>decodeTimeRangeValue,
+    TimeRangeParam: ()=>TimeRangeParam,
+    timeRangeQueryConfig: ()=>timeRangeQueryConfig,
+    useInitialTimeRange: ()=>useInitialTimeRange,
+    useSetTimeRangeParams: ()=>useSetTimeRangeParams
+});
+const _react = require("react");
+const _useQueryParams = require("use-query-params");
+const _dateFns = require("date-fns");
+const _core = require("@perses-dev/core");
+/* Interprets an encoded string and returns either the string or null/undefined if not available */ function getEncodedValue(input, allowEmptyString) {
+    if (input == null) {
+        return input;
+    }
+    // '' or []
+    if (input.length === 0 && (!allowEmptyString || allowEmptyString && input !== '')) {
+        return null;
+    }
+    const str = input instanceof Array ? input[0] : input;
+    if (str == null) {
+        return str;
+    }
+    if (!allowEmptyString && str === '') {
+        return null;
+    }
+    return str;
+}
+function encodeTimeRangeValue(timeOptionValue) {
+    if (!timeOptionValue) {
+        return timeOptionValue;
+    }
+    if (typeof timeOptionValue === 'string') {
+        if ((0, _core.isDurationString)(timeOptionValue)) {
+            return timeOptionValue;
+        }
+    }
+    return ((0, _dateFns.getUnixTime)(timeOptionValue) * 1000).toString();
+}
+function decodeTimeRangeValue(input) {
+    const paramString = getEncodedValue(input);
+    if (paramString == null) return paramString;
+    return (0, _core.isDurationString)(paramString) ? paramString : new Date(Number(paramString));
+}
+const TimeRangeParam = {
+    encode: encodeTimeRangeValue,
+    decode: decodeTimeRangeValue,
+    equals: (valueA, valueB)=>{
+        if (valueA === valueB) return true;
+        if (valueA == null || valueB == null) return valueA === valueB;
+        return valueA.valueOf() === valueB.valueOf();
+    }
+};
+const timeRangeQueryConfig = {
+    start: TimeRangeParam,
+    end: TimeRangeParam
+};
+function useInitialTimeRange(dashboardDuration) {
+    const [query] = (0, _useQueryParams.useQueryParams)(timeRangeQueryConfig);
+    const { start , end  } = query;
+    return (0, _react.useMemo)(()=>{
+        let initialTimeRange = {
+            pastDuration: dashboardDuration
+        };
+        if (!start) {
+            return initialTimeRange;
+        }
+        const startStr = start.toString();
+        if ((0, _core.isDurationString)(startStr)) {
+            initialTimeRange = {
+                pastDuration: startStr
+            };
+        } else if ((0, _dateFns.isDate)(start) && (0, _dateFns.isDate)(end)) {
+            initialTimeRange = {
+                start: start,
+                end: end
+            };
+        }
+        return initialTimeRange;
+    }, [
+        start,
+        end,
+        dashboardDuration
+    ]);
+}
+function useSetTimeRangeParams(initialTimeRange, paramsEnabled = true) {
+    const [query, setQuery] = (0, _useQueryParams.useQueryParams)(timeRangeQueryConfig);
+    // fallback when app does not want query string as source of truth
+    const [timeRangeState, setTimeRangeState] = (0, _react.useState)(initialTimeRange);
+    const { start  } = query;
+    (0, _react.useEffect)(()=>{
+        if (paramsEnabled && !start) {
+            if ((0, _core.isRelativeTimeRange)(initialTimeRange)) {
+                setQuery({
+                    start: initialTimeRange.pastDuration,
+                    end: undefined
+                });
+            }
+        }
+    }, [
+        initialTimeRange,
+        paramsEnabled,
+        start,
+        setQuery
+    ]);
+    const setTimeRange = (0, _react.useCallback)((value)=>{
+        if ((0, _core.isRelativeTimeRange)(value)) {
+            setQuery({
+                start: value.pastDuration,
+                end: undefined
+            });
+        } else {
+            setQuery(value);
+        }
+    }, [
+        setQuery
+    ]);
+    if (!paramsEnabled) {
+        return {
+            timeRange: timeRangeState,
+            setTimeRange: setTimeRangeState
+        };
+    }
+    return {
+        timeRange: initialTimeRange,
+        setTimeRange: setTimeRange
+    };
+}

package/dist/cjs/views/ViewDashboard/DashboardApp.js

@@ -22,9 +22,7 @@ const _jsxRuntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
 const _components1 = require("../../components");
-const _panelGroupDialog = /*#__PURE__*/ _interopRequireDefault(require("../../components/PanelGroupDialog/PanelGroupDialog"));
 const _dashboardToolbar = require("../../components/DashboardToolbar");
-const _deletePanelGroupDialog = /*#__PURE__*/ _interopRequireDefault(require("../../components/PanelGroupDialog/DeletePanelGroupDialog"));
 const _deletePanelDialog = /*#__PURE__*/ _interopRequireDefault(require("../../components/Panel/DeletePanelDialog"));
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -35,7 +33,6 @@ const DashboardApp = (props)=>{
     const { dashboardResource  } = props;
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
         sx: {
-            padding: (theme)=>theme.spacing(1, 0),
             flexGrow: 1,
             overflowX: 'hidden',
             overflowY: 'auto',
@@ -56,8 +53,8 @@ const DashboardApp = (props)=>{
                         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.Dashboard, {})
                     }),
                     /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.PanelDrawer, {}),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panelGroupDialog.default, {}),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_deletePanelGroupDialog.default, {}),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.PanelGroupDialog, {}),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.DeletePanelGroupDialog, {}),
                     /*#__PURE__*/ (0, _jsxRuntime.jsx)(_deletePanelDialog.default, {})
                 ]
             })

package/dist/cjs/views/ViewDashboard/ViewDashboard.js

@@ -19,36 +19,18 @@ Object.defineProperty(exports, "ViewDashboard", {
     get: ()=>ViewDashboard
 });
 const _jsxRuntime = require("react/jsx-runtime");
-const _react = require("react");
 const _material = require("@mui/material");
-const _core = require("@perses-dev/core");
-const _pluginSystem = require("@perses-dev/plugin-system");
 const _components = require("@perses-dev/components");
 const _context = require("../../context");
+const _utils = require("../../utils");
 const _dashboardApp = require("./DashboardApp");
 function ViewDashboard(props) {
     const { dashboardResource , datasourceApi , sx , ...others } = props;
     const { spec  } = dashboardResource;
-    const { queryString , setQueryString  } = (0, _pluginSystem.useQueryString)();
     var _duration;
     const dashboardDuration = (_duration = spec.duration) !== null && _duration !== void 0 ? _duration : '1h';
-    const defaultTimeRange = (0, _core.getDefaultTimeRange)(dashboardDuration, queryString);
-    // TODO: add reusable sync query string or no-op util
-    (0, _react.useEffect)(()=>{
-        const currentParams = Object.fromEntries([
-            ...queryString
-        ]);
-        // if app does not provide query string implementation, setTimeRange is used instead
-        if (!currentParams.start && setQueryString) {
-            // default to duration in dashboard definition if start param is not already set
-            queryString.set('start', dashboardDuration);
-            setQueryString(queryString);
-        }
-    }, [
-        dashboardDuration,
-        queryString,
-        setQueryString
-    ]);
+    const initialTimeRange = (0, _utils.useInitialTimeRange)(dashboardDuration);
+    const { timeRange , setTimeRange  } = (0, _utils.useSetTimeRangeParams)(initialTimeRange, true);
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.DatasourceStoreProvider, {
         dashboardResource: dashboardResource,
         datasourceApi: datasourceApi,
@@ -57,7 +39,8 @@ function ViewDashboard(props) {
                 dashboardSpec: spec
             },
             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.TimeRangeProvider, {
-                initialTimeRange: defaultTimeRange,
+                timeRange: timeRange,
+                setTimeRange: setTimeRange,
                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.TemplateVariableProvider, {
                     initialVariableDefinitions: spec.variables,
                     children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {

package/dist/cjs/views/ViewDashboard/tests/panelGroups.test.js

@@ -19,7 +19,6 @@ const _react = require("@testing-library/react");
 const _userEvent = /*#__PURE__*/ _interopRequireDefault(require("@testing-library/user-event"));
 const _context = require("../../../context");
 const _test = require("../../../test");
-const _testDashboard = /*#__PURE__*/ _interopRequireDefault(require("../../../test/testDashboard"));
 const _dashboardApp = require("../DashboardApp");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -28,47 +27,25 @@ function _interopRequireDefault(obj) {
 }
 describe('Panel Groups', ()=>{
     const renderDashboard = ()=>{
-        const { store , DashboardProviderSpy  } = (0, _test.createDashboardProviderSpy)();
-        (0, _test.renderWithContext)(/*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.QueryStringProvider, {
-            queryString: new URLSearchParams('https://localhost:3000/'),
-            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.TimeRangeProvider, {
-                initialTimeRange: {
-                    pastDuration: '30m'
-                },
-                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.TemplateVariableProvider, {
-                    children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_context.DashboardProvider, {
-                        initialState: {
-                            dashboardSpec: (0, _test.getTestDashboard)().spec,
-                            isEditMode: true
-                        },
-                        children: [
-                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(DashboardProviderSpy, {}),
-                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dashboardApp.DashboardApp, {
-                                dashboardResource: (0, _test.getTestDashboard)()
-                            })
-                        ]
+        (0, _test.renderWithContext)(/*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.TimeRangeProvider, {
+            timeRange: {
+                pastDuration: '30m'
+            },
+            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.TemplateVariableProvider, {
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.DashboardProvider, {
+                    initialState: {
+                        dashboardSpec: (0, _test.getTestDashboard)().spec,
+                        isEditMode: true
+                    },
+                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dashboardApp.DashboardApp, {
+                        dashboardResource: (0, _test.getTestDashboard)()
                     })
                 })
             })
         }));
-        const { value: storeApi  } = store;
-        if (storeApi === undefined) {
-            throw new Error('Expected dashboard store to be set after initial render');
-        }
-        return storeApi;
     };
-    beforeEach(()=>{
-        const mockIntersectionObserver = jest.fn();
-        mockIntersectionObserver.mockReturnValue({
-            observe: ()=>null,
-            unobserve: ()=>null,
-            disconnect: ()=>null
-        });
-        window.IntersectionObserver = mockIntersectionObserver;
-    });
     it('should delete panel', ()=>{
-        var ref;
-        const storeApi = renderDashboard();
+        renderDashboard();
         const panel = _react.screen.getByText('CPU');
         _userEvent.default.hover(panel);
         const deletePanelButton = _react.screen.getByLabelText('delete panel');
@@ -76,37 +53,28 @@ describe('Panel Groups', ()=>{
         _react.screen.getByText('Delete Panel');
         const deleteButton = _react.screen.getByText('Delete');
         _userEvent.default.click(deleteButton);
-        const layouts = storeApi.getState().layouts;
-        const deletedPanel = _testDashboard.default.spec.panels['cpu'];
-        expect((ref = layouts[0]) === null || ref === void 0 ? void 0 : ref.items).toEqual(expect.not.objectContaining(deletedPanel));
-        const panels = storeApi.getState().panels;
-        // should remove cpu from state.panels since it's not used anymore
-        expect(panels).toEqual(expect.not.objectContaining({
-            cpu: _testDashboard.default.spec.panels['cpu']
-        }));
+        // The panel should disappear
+        const deletedPanel = _react.screen.queryByText('CPU');
+        expect(deletedPanel).not.toBeInTheDocument();
     });
-    it('should only delete panel from panel group if panel is referenced more than once', ()=>{
-        var ref;
-        const storeApi = renderDashboard();
-        const panel = _react.screen.getByText('Disk I/O Utilization');
+    it('should only delete panel from panel group if panel is not referenced more than once', ()=>{
+        renderDashboard();
+        const panels = _react.screen.getAllByText('Disk I/O Utilization');
+        expect(panels).toHaveLength(2);
+        const panel = panels[0];
+        if (panel === undefined) throw new Error('Missing panel');
         _userEvent.default.hover(panel);
         const deletePanelButton = _react.screen.getByLabelText('delete panel');
         _userEvent.default.click(deletePanelButton);
         _react.screen.getByText('Delete Panel');
         const deleteButton = _react.screen.getByText('Delete');
         _userEvent.default.click(deleteButton);
-        const layouts = storeApi.getState().layouts;
-        const deletedPanel = _testDashboard.default.spec.panels['diskIO'];
-        expect((ref = layouts[0]) === null || ref === void 0 ? void 0 : ref.items).toEqual(expect.not.objectContaining(deletedPanel));
-        const panels = storeApi.getState().panels;
-        // should NOT remove diskIO from state.panels since it's used in another panel group
-        expect(panels).toEqual(expect.objectContaining({
-            diskIO: _testDashboard.default.spec.panels['diskIO']
-        }));
+        // The deleted panel should still be on screen in the other group
+        const deletedPanel = _react.screen.queryByText('Disk I/O Utilization');
+        expect(deletedPanel).toBeInTheDocument();
     });
     it('should swap panels', ()=>{
-        var ref, ref1, ref2;
-        const storeApi = renderDashboard();
+        renderDashboard();
         // should move panel down
         const group1 = _react.screen.getByText('CPU Stats');
         _userEvent.default.hover(group1);
@@ -118,13 +86,14 @@ describe('Panel Groups', ()=>{
         _userEvent.default.hover(group2);
         const moveGroupUpBtn = _react.screen.getByLabelText('move group up');
         _userEvent.default.click(moveGroupUpBtn);
-        const layouts = storeApi.getState().layouts;
-        expect((ref = layouts[0]) === null || ref === void 0 ? void 0 : ref.title).toBe(undefined);
-        expect((ref1 = layouts[1]) === null || ref1 === void 0 ? void 0 : ref1.title).toBe('Disk Stats');
-        expect((ref2 = layouts[2]) === null || ref2 === void 0 ? void 0 : ref2.title).toBe('CPU Stats');
-    });
+    /* TODO: Figure out how to test this visually without coupling to the store
+    const layouts = storeApi.getState().layouts;
+    expect(layouts[0]?.title).toBe(undefined);
+    expect(layouts[1]?.title).toBe('Disk Stats');
+    expect(layouts[2]?.title).toBe('CPU Stats');
+    */ });
     it('should delete a panel group', ()=>{
-        const storeApi = renderDashboard();
+        renderDashboard();
         const group = _react.screen.getByText('CPU Stats');
         _userEvent.default.hover(group);
         const deleteGroupIcon = _react.screen.getByLabelText('delete group');
@@ -132,34 +101,14 @@ describe('Panel Groups', ()=>{
         _react.screen.getByText('Delete Panel Group');
         const deleteButton = _react.screen.getByText('Delete');
         _userEvent.default.click(deleteButton);
-        // should remove group from state.layouts
-        const layouts = storeApi.getState().layouts;
-        expect(layouts).toHaveLength(2);
-        const deletedLayout = {
-            id: 0,
-            title: 'CPU Stats',
-            isCollapsed: false,
-            items: [
-                {
-                    x: 0,
-                    y: 0,
-                    width: 12,
-                    height: 4,
-                    content: {
-                        $ref: '#/spec/panels/cpu'
-                    }
-                }
-            ]
-        };
-        expect(layouts).toEqual(expect.not.objectContaining(deletedLayout));
-        const panels = storeApi.getState().panels;
-        // should remove cpu from state.panels since it's not used anymore
-        expect(panels).toEqual(expect.not.objectContaining({
-            cpu: _testDashboard.default.spec.panels['cpu']
-        }));
-        // should not remove diskIO from state.panels since it's still used in another group
-        expect(panels).toEqual(expect.objectContaining({
-            diskIO: _testDashboard.default.spec.panels['diskIO']
-        }));
+        // should remove group
+        const deletedGroup = _react.screen.queryByText('CPU Stats');
+        expect(deletedGroup).not.toBeInTheDocument();
+        // CPU panel should be completely gone since it wasn't in any other group
+        let panel = _react.screen.queryByText('CPU');
+        expect(panel).not.toBeInTheDocument();
+        // A DiskIO panel should still be present in the other group that wasn't deleted
+        panel = _react.screen.queryByText('Disk I/O Utilization');
+        expect(panel).toBeInTheDocument();
     });
 });

package/dist/components/Dashboard.js

@@ -13,20 +13,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@mui/material';
 import { ErrorBoundary, ErrorAlert } from '@perses-dev/components';
-import { useLayouts } from '../context';
+import { usePanelGroupIds } from '../context';
 import { GridLayout } from './GridLayout';
 /**
  * Renders a Dashboard for the provided Dashboard spec.
  */ export function Dashboard(props) {
-    const { layouts  } = useLayouts();
+    const panelGroupIds = usePanelGroupIds();
     return /*#__PURE__*/ _jsx(Box, {
         ...props,
         children: /*#__PURE__*/ _jsx(ErrorBoundary, {
             FallbackComponent: ErrorAlert,
-            children: layouts.map((layout, groupIndex)=>/*#__PURE__*/ _jsx(GridLayout, {
-                    groupIndex: groupIndex,
-                    groupDefinition: layout
-                }, layout.id))
+            children: panelGroupIds.map((panelGroupId)=>/*#__PURE__*/ _jsx(GridLayout, {
+                    panelGroupId: panelGroupId
+                }, panelGroupId))
         })
     });
 }

package/dist/components/Dashboard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/Dashboard.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, BoxProps } from '@mui/material';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { useLayouts } from '../context';\nimport { GridLayout } from './GridLayout';\n\nexport type DashboardProps = BoxProps;\n\n/**\n * Renders a Dashboard for the provided Dashboard spec.\n */\nexport function Dashboard(props: DashboardProps) {\n  const { layouts } = useLayouts();\n  return (\n    <Box {...props}>\n      <ErrorBoundary FallbackComponent={ErrorAlert}>\n        {layouts.map((layout, groupIndex) => (\n          <GridLayout key={layout.id} groupIndex={groupIndex} groupDefinition={layout} />\n        ))}\n      </ErrorBoundary>\n    </Box>\n  );\n}\n"],"names":["Box","ErrorBoundary","ErrorAlert","useLayouts","GridLayout","Dashboard","props","layouts","FallbackComponent","map","layout","groupIndex","groupDefinition","id"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,GAAG,QAAkB,eAAe,CAAC;AAC9C,SAASC,aAAa,EAAEC,UAAU,QAAQ,wBAAwB,CAAC;AACnE,SAASC,UAAU,QAAQ,YAAY,CAAC;AACxC,SAASC,UAAU,QAAQ,cAAc,CAAC;AAI1C;;CAEC,GACD,OAAO,SAASC,SAAS,CAACC,KAAqB,EAAE;IAC/C,MAAM,EAAEC,OAAO,CAAA,EAAE,GAAGJ,UAAU,EAAE,AAAC;IACjC,qBACE,KAACH,GAAG;QAAE,GAAGM,KAAK;kBACZ,cAAA,KAACL,aAAa;YAACO,iBAAiB,EAAEN,UAAU;sBACzCK,OAAO,CAACE,GAAG,CAAC,CAACC,MAAM,EAAEC,UAAU,iBAC9B,KAACP,UAAU;oBAAiBO,UAAU,EAAEA,UAAU;oBAAEC,eAAe,EAAEF,MAAM;mBAA1DA,MAAM,CAACG,EAAE,CAAqD,AAChF,CAAC;UACY;MACZ,CACN;AACJ,CAAC"}
+{"version":3,"sources":["../../src/components/Dashboard.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, BoxProps } from '@mui/material';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { usePanelGroupIds } from '../context';\nimport { GridLayout } from './GridLayout';\n\nexport type DashboardProps = BoxProps;\n\n/**\n * Renders a Dashboard for the provided Dashboard spec.\n */\nexport function Dashboard(props: DashboardProps) {\n  const panelGroupIds = usePanelGroupIds();\n  return (\n    <Box {...props}>\n      <ErrorBoundary FallbackComponent={ErrorAlert}>\n        {panelGroupIds.map((panelGroupId) => (\n          <GridLayout key={panelGroupId} panelGroupId={panelGroupId} />\n        ))}\n      </ErrorBoundary>\n    </Box>\n  );\n}\n"],"names":["Box","ErrorBoundary","ErrorAlert","usePanelGroupIds","GridLayout","Dashboard","props","panelGroupIds","FallbackComponent","map","panelGroupId"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,GAAG,QAAkB,eAAe,CAAC;AAC9C,SAASC,aAAa,EAAEC,UAAU,QAAQ,wBAAwB,CAAC;AACnE,SAASC,gBAAgB,QAAQ,YAAY,CAAC;AAC9C,SAASC,UAAU,QAAQ,cAAc,CAAC;AAI1C;;CAEC,GACD,OAAO,SAASC,SAAS,CAACC,KAAqB,EAAE;IAC/C,MAAMC,aAAa,GAAGJ,gBAAgB,EAAE,AAAC;IACzC,qBACE,KAACH,GAAG;QAAE,GAAGM,KAAK;kBACZ,cAAA,KAACL,aAAa;YAACO,iBAAiB,EAAEN,UAAU;sBACzCK,aAAa,CAACE,GAAG,CAAC,CAACC,YAAY,iBAC9B,KAACN,UAAU;oBAAoBM,YAAY,EAAEA,YAAY;mBAAxCA,YAAY,CAAgC,AAC9D,CAAC;UACY;MACZ,CACN;AACJ,CAAC"}

package/dist/components/DashboardToolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../src/components/DashboardToolbar.tsx"],"names":[],"mappings":";AAqBA,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,gBA6E5D,CAAC"}
+{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../src/components/DashboardToolbar.tsx"],"names":[],"mappings":";AAuBA,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,gBA6F5D,CAAC"}

package/dist/components/DashboardToolbar.js

@@ -11,22 +11,34 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Typography, Stack, Button, Box } from '@mui/material';
+import { useState } from 'react';
+import { Typography, Stack, Button, Box, useTheme, useMediaQuery } from '@mui/material';
 import PencilIcon from 'mdi-material-ui/PencilOutline';
 import AddPanelGroupIcon from 'mdi-material-ui/PlusBoxOutline';
 import AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';
 import { ErrorBoundary, ErrorAlert } from '@perses-dev/components';
-import { usePanelGroupDialog, useEditMode, usePanels } from '../context';
+import { useDashboardActions, useDashboardSpec, useEditMode } from '../context';
 import { TemplateVariableList, TimeRangeControls } from '../components';
 export const DashboardToolbar = (props)=>{
     const { dashboardName  } = props;
     const { isEditMode , setEditMode  } = useEditMode();
-    const { openPanelGroupDialog  } = usePanelGroupDialog();
-    const { addPanel  } = usePanels();
+    const { openAddPanelGroup , openAddPanel , save  } = useDashboardActions();
+    const isLaptopSize = useMediaQuery(useTheme().breakpoints.up('sm'));
+    const [originalSpec, setOriginalSpec] = useState(undefined);
+    const { spec , resetSpec  } = useDashboardSpec();
     const onEditButtonClick = ()=>{
+        setOriginalSpec(spec);
         setEditMode(true);
     };
     const onCancelButtonClick = ()=>{
+        // Reset to the original spec and exit edit mode
+        if (originalSpec) {
+            resetSpec(originalSpec);
+        }
+        setEditMode(false);
+    };
+    const onSave = ()=>{
+        save();
         setEditMode(false);
     };
     return /*#__PURE__*/ _jsx(_Fragment, {
@@ -57,6 +69,7 @@ export const DashboardToolbar = (props)=>{
                                 children: [
                                     /*#__PURE__*/ _jsx(Button, {
                                         variant: "contained",
+                                        onClick: onSave,
                                         children: "Save"
                                     }),
                                     /*#__PURE__*/ _jsx(Button, {
@@ -90,12 +103,12 @@ export const DashboardToolbar = (props)=>{
                             children: [
                                 /*#__PURE__*/ _jsx(Button, {
                                     startIcon: /*#__PURE__*/ _jsx(AddPanelGroupIcon, {}),
-                                    onClick: ()=>openPanelGroupDialog(),
+                                    onClick: openAddPanelGroup,
                                     children: "Add Panel Group"
                                 }),
                                 /*#__PURE__*/ _jsx(Button, {
                                     startIcon: /*#__PURE__*/ _jsx(AddPanelIcon, {}),
-                                    onClick: ()=>addPanel(0),
+                                    onClick: openAddPanel,
                                     children: "Add Panel"
                                 }),
                                 /*#__PURE__*/ _jsx(TimeRangeControls, {})
@@ -126,7 +139,7 @@ export const DashboardToolbar = (props)=>{
                             },
                             children: [
                                 /*#__PURE__*/ _jsx(TimeRangeControls, {}),
-                                /*#__PURE__*/ _jsx(Button, {
+                                isLaptopSize && /*#__PURE__*/ _jsx(Button, {
                                     variant: "outlined",
                                     startIcon: /*#__PURE__*/ _jsx(PencilIcon, {}),
                                     onClick: onEditButtonClick,