@perses-dev/dashboards 0.8.1 → 0.10.0

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

@@ -0,0 +1,165 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("@testing-library/react");
+const _userEvent = /*#__PURE__*/ _interopRequireDefault(require("@testing-library/user-event"));
+const _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 : {
+        default: 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)()
+                            })
+                        ]
+                    })
+                })
+            })
+        }));
+        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();
+        const panel = _react.screen.getByText('CPU');
+        _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['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']
+        }));
+    });
+    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');
+        _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']
+        }));
+    });
+    it('should swap panels', ()=>{
+        var ref, ref1, ref2;
+        const storeApi = renderDashboard();
+        // should move panel down
+        const group1 = _react.screen.getByText('CPU Stats');
+        _userEvent.default.hover(group1);
+        const moveGroupDownBtn = _react.screen.getByLabelText('move group down');
+        _userEvent.default.click(moveGroupDownBtn);
+        _userEvent.default.unhover(moveGroupDownBtn);
+        // should move panel up
+        const group2 = _react.screen.getByText('Disk Stats');
+        _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');
+    });
+    it('should delete a panel group', ()=>{
+        const storeApi = renderDashboard();
+        const group = _react.screen.getByText('CPU Stats');
+        _userEvent.default.hover(group);
+        const deleteGroupIcon = _react.screen.getByLabelText('delete group');
+        _userEvent.default.click(deleteGroupIcon);
+        _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']
+        }));
+    });
+});

package/dist/cjs/views/index.js

@@ -1,4 +1,3 @@
-"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.
@@ -11,19 +10,19 @@
 // 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("./ViewDashboard"), exports);
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_exportStar(require("./ViewDashboard"), 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/components/Dashboard.d.ts

@@ -1,9 +1,6 @@
 /// <reference types="react" />
 import { BoxProps } from '@mui/material';
-import { DashboardSpec } from '@perses-dev/core';
-export interface DashboardProps extends BoxProps {
-    spec: DashboardSpec;
-}
+export declare type DashboardProps = BoxProps;
 /**
  * Renders a Dashboard for the provided Dashboard spec.
  */

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

@@ -1 +1 @@
-{"version":3,"file":"Dashboard.d.ts","sourceRoot":"","sources":["../../src/components/Dashboard.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAO,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE9C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGjD,MAAM,WAAW,cAAe,SAAQ,QAAQ;IAC9C,IAAI,EAAE,aAAa,CAAC;CACrB;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eAmB9C"}
+{"version":3,"file":"Dashboard.d.ts","sourceRoot":"","sources":["../../src/components/Dashboard.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAO,QAAQ,EAAE,MAAM,eAAe,CAAC;AAK9C,oBAAY,cAAc,GAAG,QAAQ,CAAC;AAEtC;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eAW9C"}

package/dist/components/Dashboard.js

@@ -1 +1,34 @@
-import{jsx as _jsx}from"react/jsx-runtime";import{Box}from"@mui/material";import{ErrorBoundary,ErrorAlert}from"@perses-dev/components";import{GridLayout,GridItemContent}from"./GridLayout";export function Dashboard(r){const{spec:o,...t}=r;return _jsx(Box,{...t,children:_jsx(ErrorBoundary,{FallbackComponent:ErrorAlert,children:o.layouts.map(((r,t)=>_jsx(GridLayout,{groupIndex:t,definition:r,renderGridItemContent:(r,t)=>_jsx(GridItemContent,{content:r.content,spec:o,groupIndex:t})},`${JSON.stringify(o.layouts)} ${t}`)))})})}
+// 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.
+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 { GridLayout } from './GridLayout';
+/**
+ * Renders a Dashboard for the provided Dashboard spec.
+ */ export function Dashboard(props) {
+    const { layouts  } = useLayouts();
+    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))
+        })
+    });
+}
+
+//# sourceMappingURL=Dashboard.js.map

package/dist/components/Dashboard.js.map

@@ -0,0 +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"}

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

@@ -1 +1 @@
-{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../src/components/DashboardToolbar.tsx"],"names":[],"mappings":";AAmBA,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,gBA2D5D,CAAC"}
+{"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"}

package/dist/components/DashboardToolbar.js

@@ -1 +1,154 @@
-import{jsxs as _jsxs,jsx as _jsx,Fragment as _Fragment}from"react/jsx-runtime";import{Toolbar,Typography,Stack,Button,Box}from"@mui/material";import PencilIcon from"mdi-material-ui/PencilOutline";import AddIcon from"mdi-material-ui/Plus";import{useDashboardApp,useEditMode}from"../context";import{TimeRangeControls}from"../components";export const DashboardToolbar=n=>{const{dashboardName:o}=n,{isEditMode:i,setEditMode:t}=useEditMode(),{openPanelDrawer:a,openPanelGroupDialog:s}=useDashboardApp();return _jsx(Toolbar,{disableGutters:!0,sx:{display:"block",padding:n=>n.spacing(2,0)},children:i?_jsxs(_Fragment,{children:[_jsxs(Box,{sx:{display:"flex",width:"100%"},children:[_jsxs(Typography,{variant:"h2",children:["Edit ",o]}),_jsxs(Stack,{direction:"row",spacing:1,sx:{marginLeft:"auto"},children:[_jsx(TimeRangeControls,{}),_jsx(Button,{variant:"outlined",onClick:()=>{t(!1)},children:"Cancel"}),_jsx(Button,{variant:"contained",children:"Save"})]})]}),_jsxs(Stack,{direction:"row",spacing:1,sx:{display:"flex",justifyContent:"flex-end",width:"100%",padding:n=>n.spacing(2,0)},children:[_jsx(Button,{startIcon:_jsx(AddIcon,{}),onClick:()=>s(),children:"Add Group"}),_jsx(Button,{startIcon:_jsx(AddIcon,{}),onClick:()=>a({groupIndex:0}),children:"Add Panel"})]})]}):_jsxs(Box,{sx:{display:"flex",width:"100%"},children:[_jsx(Typography,{variant:"h2",children:o}),_jsxs(Stack,{direction:"row",spacing:2,sx:{marginLeft:"auto"},children:[_jsx(TimeRangeControls,{}),_jsx(Button,{variant:"contained",startIcon:_jsx(PencilIcon,{}),onClick:()=>{t(!0)},sx:{marginLeft:"auto"},children:"Edit"})]})]})})};
+// 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.
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Typography, Stack, Button, Box } 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 { TemplateVariableList, TimeRangeControls } from '../components';
+export const DashboardToolbar = (props)=>{
+    const { dashboardName  } = props;
+    const { isEditMode , setEditMode  } = useEditMode();
+    const { openPanelGroupDialog  } = usePanelGroupDialog();
+    const { addPanel  } = usePanels();
+    const onEditButtonClick = ()=>{
+        setEditMode(true);
+    };
+    const onCancelButtonClick = ()=>{
+        setEditMode(false);
+    };
+    return /*#__PURE__*/ _jsx(_Fragment, {
+        children: isEditMode ? /*#__PURE__*/ _jsxs(Stack, {
+            spacing: 2,
+            children: [
+                /*#__PURE__*/ _jsx(Box, {
+                    sx: {
+                        backgroundColor: (theme)=>theme.palette.primary.light + '20'
+                    },
+                    children: /*#__PURE__*/ _jsxs(Box, {
+                        padding: 2,
+                        display: "flex",
+                        children: [
+                            /*#__PURE__*/ _jsxs(Typography, {
+                                variant: "h2",
+                                children: [
+                                    "Edit ",
+                                    dashboardName
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs(Stack, {
+                                direction: "row",
+                                spacing: 1,
+                                sx: {
+                                    marginLeft: 'auto'
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        variant: "contained",
+                                        children: "Save"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        variant: "outlined",
+                                        onClick: onCancelButtonClick,
+                                        children: "Cancel"
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ _jsxs(Box, {
+                    sx: {
+                        display: 'flex',
+                        width: '100%',
+                        alignItems: 'flex-start',
+                        padding: (theme)=>theme.spacing(2)
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx(ErrorBoundary, {
+                            FallbackComponent: ErrorAlert,
+                            children: /*#__PURE__*/ _jsx(TemplateVariableList, {})
+                        }),
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            direction: 'row',
+                            spacing: 1,
+                            sx: {
+                                marginLeft: 'auto'
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx(Button, {
+                                    startIcon: /*#__PURE__*/ _jsx(AddPanelGroupIcon, {}),
+                                    onClick: ()=>openPanelGroupDialog(),
+                                    children: "Add Panel Group"
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    startIcon: /*#__PURE__*/ _jsx(AddPanelIcon, {}),
+                                    onClick: ()=>addPanel(0),
+                                    children: "Add Panel"
+                                }),
+                                /*#__PURE__*/ _jsx(TimeRangeControls, {})
+                            ]
+                        })
+                    ]
+                })
+            ]
+        }) : /*#__PURE__*/ _jsxs(Stack, {
+            spacing: 2,
+            padding: 2,
+            children: [
+                /*#__PURE__*/ _jsxs(Box, {
+                    sx: {
+                        display: 'flex',
+                        width: '100%'
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "h2",
+                            children: dashboardName
+                        }),
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            direction: "row",
+                            spacing: 2,
+                            sx: {
+                                marginLeft: 'auto'
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx(TimeRangeControls, {}),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    variant: "outlined",
+                                    startIcon: /*#__PURE__*/ _jsx(PencilIcon, {}),
+                                    onClick: onEditButtonClick,
+                                    sx: {
+                                        marginLeft: 'auto'
+                                    },
+                                    children: "Edit"
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(Box, {
+                    paddingY: 2,
+                    children: /*#__PURE__*/ _jsx(ErrorBoundary, {
+                        FallbackComponent: ErrorAlert,
+                        children: /*#__PURE__*/ _jsx(TemplateVariableList, {})
+                    })
+                })
+            ]
+        })
+    });
+};
+
+//# sourceMappingURL=DashboardToolbar.js.map

package/dist/components/DashboardToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/DashboardToolbar.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 { Typography, Stack, Button, Box } from '@mui/material';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport AddPanelGroupIcon from 'mdi-material-ui/PlusBoxOutline';\nimport AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { usePanelGroupDialog, useEditMode, usePanels } from '../context';\nimport { TemplateVariableList, TimeRangeControls } from '../components';\n\nexport interface DashboardToolbarProps {\n  dashboardName: string;\n}\n\nexport const DashboardToolbar = (props: DashboardToolbarProps) => {\n  const { dashboardName } = props;\n\n  const { isEditMode, setEditMode } = useEditMode();\n  const { openPanelGroupDialog } = usePanelGroupDialog();\n  const { addPanel } = usePanels();\n\n  const onEditButtonClick = () => {\n    setEditMode(true);\n  };\n\n  const onCancelButtonClick = () => {\n    setEditMode(false);\n  };\n\n  return (\n    <>\n      {isEditMode ? (\n        <Stack spacing={2}>\n          <Box sx={{ backgroundColor: (theme) => theme.palette.primary.light + '20' }}>\n            <Box padding={2} display=\"flex\">\n              <Typography variant=\"h2\">Edit {dashboardName}</Typography>\n              <Stack direction=\"row\" spacing={1} sx={{ marginLeft: 'auto' }}>\n                <Button variant=\"contained\">Save</Button>\n                <Button variant=\"outlined\" onClick={onCancelButtonClick}>\n                  Cancel\n                </Button>\n              </Stack>\n            </Box>\n          </Box>\n          <Box\n            sx={{\n              display: 'flex',\n              width: '100%',\n              alignItems: 'flex-start',\n              padding: (theme) => theme.spacing(2),\n            }}\n          >\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <TemplateVariableList />\n            </ErrorBoundary>\n            <Stack direction={'row'} spacing={1} sx={{ marginLeft: 'auto' }}>\n              <Button startIcon={<AddPanelGroupIcon />} onClick={() => openPanelGroupDialog()}>\n                Add Panel Group\n              </Button>\n              <Button startIcon={<AddPanelIcon />} onClick={() => addPanel(0)}>\n                Add Panel\n              </Button>\n              <TimeRangeControls />\n            </Stack>\n          </Box>\n        </Stack>\n      ) : (\n        <Stack spacing={2} padding={2}>\n          <Box sx={{ display: 'flex', width: '100%' }}>\n            <Typography variant=\"h2\">{dashboardName}</Typography>\n            <Stack direction=\"row\" spacing={2} sx={{ marginLeft: 'auto' }}>\n              <TimeRangeControls />\n              <Button\n                variant=\"outlined\"\n                startIcon={<PencilIcon />}\n                onClick={onEditButtonClick}\n                sx={{ marginLeft: 'auto' }}\n              >\n                Edit\n              </Button>\n            </Stack>\n          </Box>\n          <Box paddingY={2}>\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <TemplateVariableList />\n            </ErrorBoundary>\n          </Box>\n        </Stack>\n      )}\n    </>\n  );\n};\n"],"names":["Typography","Stack","Button","Box","PencilIcon","AddPanelGroupIcon","AddPanelIcon","ErrorBoundary","ErrorAlert","usePanelGroupDialog","useEditMode","usePanels","TemplateVariableList","TimeRangeControls","DashboardToolbar","props","dashboardName","isEditMode","setEditMode","openPanelGroupDialog","addPanel","onEditButtonClick","onCancelButtonClick","spacing","sx","backgroundColor","theme","palette","primary","light","padding","display","variant","direction","marginLeft","onClick","width","alignItems","FallbackComponent","startIcon","paddingY"],"mappings":"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"}

package/dist/components/GridLayout/GridItemContent.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-import { DashboardSpec, GridItemDefinition } from '@perses-dev/core';
+import { GridItemDefinition } from '@perses-dev/core';
 export interface GridItemContentProps {
-    spec: DashboardSpec;
-    content: GridItemDefinition['content'];
     groupIndex: number;
+    itemIndex: number;
+    content: GridItemDefinition['content'];
 }
 /**
  * Resolves the reference to panel content in a GridItemDefinition and renders the panel.

package/dist/components/GridLayout/GridItemContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GridItemContent.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridItemContent.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAmB,MAAM,kBAAkB,CAAC;AAGtF,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,aAAa,CAAC;IACpB,OAAO,EAAE,kBAAkB,CAAC,SAAS,CAAC,CAAC;IACvC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAQ1D"}
+{"version":3,"file":"GridItemContent.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridItemContent.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAsB,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAI1E,MAAM,WAAW,oBAAoB;IACnC,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,kBAAkB,CAAC,SAAS,CAAC,CAAC;CACxC;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAW1D"}

package/dist/components/GridLayout/GridItemContent.js

@@ -1 +1,35 @@
-import{jsx as _jsx}from"react/jsx-runtime";import{ErrorAlert}from"@perses-dev/components";import{resolvePanelRef}from"@perses-dev/core";import{Panel}from"../Panel/Panel";export function GridItemContent(e){const{content:r,spec:n,groupIndex:o}=e;try{const{panelDefinition:e,panelsKey:t}=resolvePanelRef(n,r);return _jsx(Panel,{definition:e,groupIndex:o,panelKey:t})}catch(e){return _jsx(ErrorAlert,{error:e})}}
+// 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.
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getPanelKeyFromRef } from '@perses-dev/core';
+import { usePanels } from '../../context';
+import { Panel } from '../Panel/Panel';
+/**
+ * Resolves the reference to panel content in a GridItemDefinition and renders the panel.
+ */ export function GridItemContent(props) {
+    const { content , groupIndex , itemIndex  } = props;
+    // Find the panel referenced in content in the store
+    const { panels  } = usePanels();
+    const panelKey = getPanelKeyFromRef(content);
+    const panelDefinition = panels[panelKey];
+    if (panelDefinition === undefined) {
+        throw new Error(`Panel with key '${panelKey}' was not found`);
+    }
+    return /*#__PURE__*/ _jsx(Panel, {
+        definition: panelDefinition,
+        groupIndex: groupIndex,
+        itemIndex: itemIndex
+    });
+}
+
+//# sourceMappingURL=GridItemContent.js.map

package/dist/components/GridLayout/GridItemContent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/GridLayout/GridItemContent.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 { getPanelKeyFromRef, GridItemDefinition } from '@perses-dev/core';\nimport { usePanels } from '../../context';\nimport { Panel } from '../Panel/Panel';\n\nexport interface GridItemContentProps {\n  groupIndex: number;\n  itemIndex: number;\n  content: GridItemDefinition['content'];\n}\n\n/**\n * Resolves the reference to panel content in a GridItemDefinition and renders the panel.\n */\nexport function GridItemContent(props: GridItemContentProps) {\n  const { content, groupIndex, itemIndex } = props;\n\n  // Find the panel referenced in content in the store\n  const { panels } = usePanels();\n  const panelKey = getPanelKeyFromRef(content);\n  const panelDefinition = panels[panelKey];\n  if (panelDefinition === undefined) {\n    throw new Error(`Panel with key '${panelKey}' was not found`);\n  }\n  return <Panel definition={panelDefinition} groupIndex={groupIndex} itemIndex={itemIndex} />;\n}\n"],"names":["getPanelKeyFromRef","usePanels","Panel","GridItemContent","props","content","groupIndex","itemIndex","panels","panelKey","panelDefinition","undefined","Error","definition"],"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,kBAAkB,QAA4B,kBAAkB,CAAC;AAC1E,SAASC,SAAS,QAAQ,eAAe,CAAC;AAC1C,SAASC,KAAK,QAAQ,gBAAgB,CAAC;AAQvC;;CAEC,GACD,OAAO,SAASC,eAAe,CAACC,KAA2B,EAAE;IAC3D,MAAM,EAAEC,OAAO,CAAA,EAAEC,UAAU,CAAA,EAAEC,SAAS,CAAA,EAAE,GAAGH,KAAK,AAAC;IAEjD,oDAAoD;IACpD,MAAM,EAAEI,MAAM,CAAA,EAAE,GAAGP,SAAS,EAAE,AAAC;IAC/B,MAAMQ,QAAQ,GAAGT,kBAAkB,CAACK,OAAO,CAAC,AAAC;IAC7C,MAAMK,eAAe,GAAGF,MAAM,CAACC,QAAQ,CAAC,AAAC;IACzC,IAAIC,eAAe,KAAKC,SAAS,EAAE;QACjC,MAAM,IAAIC,KAAK,CAAC,CAAC,gBAAgB,EAAEH,QAAQ,CAAC,eAAe,CAAC,CAAC,CAAC;IAChE,CAAC;IACD,qBAAO,KAACP,KAAK;QAACW,UAAU,EAAEH,eAAe;QAAEJ,UAAU,EAAEA,UAAU;QAAEC,SAAS,EAAEA,SAAS;MAAI,CAAC;AAC9F,CAAC"}

package/dist/components/GridLayout/GridLayout.d.ts

@@ -1,10 +1,9 @@
 /// <reference types="react" />
 import { BoxProps } from '@mui/material';
-import { GridDefinition, GridItemDefinition } from '@perses-dev/core';
+import { PanelGroupDefinition } from '../../context/DashboardProvider/layout-slice';
 export interface GridLayoutProps extends BoxProps {
     groupIndex: number;
-    definition: GridDefinition;
-    renderGridItemContent: (definition: GridItemDefinition, groupIndex: number) => React.ReactNode;
+    groupDefinition: PanelGroupDefinition;
 }
 /**
  * Layout component that arranges children in a Grid based on the definition.

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

@@ -1 +1 @@
-{"version":3,"file":"GridLayout.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridLayout.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAO,QAAQ,EAA0B,MAAM,eAAe,CAAC;AACtE,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAOtE,MAAM,WAAW,eAAgB,SAAQ,QAAQ;IAC/C,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,cAAc,CAAC;IAC3B,qBAAqB,EAAE,CAAC,UAAU,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;CAChG;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAwDhD"}
+{"version":3,"file":"GridLayout.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridLayout.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAO,QAAQ,EAA0B,MAAM,eAAe,CAAC;AAItE,OAAO,EAAE,oBAAoB,EAAE,MAAM,8CAA8C,CAAC;AAMpF,MAAM,WAAW,eAAgB,SAAQ,QAAQ;IAC/C,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,oBAAoB,CAAC;CACvC;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eA4ChD"}