@perses-dev/dashboards 0.7.1 → 0.8.0

package/dist/cjs/css/styles.js

@@ -12,173 +12,177 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
-    '&.react-grid-layout': {
-        position: 'relative',
-        transition: 'height 200ms ease',
-    },
-    '&.react-grid-item': {
-        transition: 'all 200ms ease',
-        transitionProperty: 'left, top',
-    },
-    '&.react-grid-item img': {
-        pointerEvents: 'none',
-        userSelect: 'none',
-    },
-    '&.react-grid-item.cssTransforms': {
-        transitionProperty: 'transform',
-    },
-    '&.react-grid-item.resizing': {
-        zIndex: 1,
-        willChange: 'width, height',
-    },
-    '&.react-grid-item.react-draggable-dragging': {
-        transition: 'none',
-        zIndex: 3,
-        willChange: 'transform',
-    },
-    '&.react-grid-item.dropping': {
-        visibility: 'hidden',
-    },
-    '&.react-grid-item.react-grid-placeholder': {
-        background: 'red',
-        opacity: 0.2,
-        transitionDuration: '100ms',
-        zIndex: 2,
-        userSelect: 'none',
-        '-webkit-user-select': 'none',
-        '-moz-user-select': 'none',
-        '-ms-user-select': 'none',
-        '-o-user-select': 'none',
-    },
-    '&.react-grid-item > .react-resizable-handle': {
-        position: 'absolute',
-        width: '20px',
-        height: '20px',
-    },
-    '&.react-grid-item > .react-resizable-handle::after': {
-        content: '""',
-        position: 'absolute',
-        right: '3px',
-        bottom: '3px',
-        width: '5px',
-        height: '5px',
-        borderRight: '2px solid rgba(0, 0, 0, 0.4)',
-        borderBottom: '2px solid rgba(0, 0, 0, 0.4)',
-    },
-    '&.react-resizable-hide > .react-resizable-handle': {
-        display: 'none',
-    },
-    '&.react-grid-item > .react-resizable-handle.react-resizable-handle-sw': {
-        bottom: '0',
-        left: '0',
-        cursor: 'sw-resize',
-        transform: 'rotate(90deg)',
-    },
-    '&.react-grid-item > .react-resizable-handle.react-resizable-handle-se': {
-        bottom: '0',
-        right: '0',
-        cursor: 'se-resize',
-    },
-    '&.react-grid-item > .react-resizable-handle.react-resizable-handle-nw': {
-        top: '0',
-        left: '0',
-        cursor: 'nw-resize',
-        transform: 'rotate(180deg)',
-    },
-    '&.react-grid-item > .react-resizable-handle.react-resizable-handle-ne': {
-        top: '0',
-        right: '0',
-        cursor: 'ne-resize',
-        transform: 'rotate(270deg)',
-    },
-    '&.react-grid-item > .react-resizable-handle.react-resizable-handle-w, &.react-grid-item > .react-resizable-handle.react-resizable-handle-e': {
-        top: '50%',
-        marginTop: '-10px',
-        cursor: 'ew-resize',
-    },
-    '&.react-grid-item > .react-resizable-handle.react-resizable-handle-w': {
-        left: '0',
-        transform: 'rotate(135deg)',
-    },
-    '&.react-grid-item > .react-resizable-handle.react-resizable-handle-e': {
-        right: '0',
-        transform: 'rotate(315deg)',
-    },
-    '&.react-grid-item > .react-resizable-handle.react-resizable-handle-n, &.react-grid-item > .react-resizable-handle.react-resizable-handle-s': {
-        left: '50%',
-        marginLeft: '-10px',
-        cursor: 'ns-resize',
-    },
-    '&.react-grid-item > .react-resizable-handle.react-resizable-handle-n': {
-        top: '0',
-        transform: 'rotate(225deg)',
-    },
-    '&.react-grid-item > .react-resizable-handle.react-resizable-handle-s': {
-        bottom: '0',
-        transform: 'rotate(45deg)',
-    },
-    '&.react-resizable': {
-        position: 'relative',
-    },
-    '&.react-resizable-handle': {
-        position: 'absolute',
-        width: '20px',
-        height: '20px',
-        backgroundRepeat: 'no-repeat',
-        backgroundOrigin: 'content-box',
-        boxSizing: 'border-box',
-        backgroundImage: `url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+')`,
-        backgroundPosition: 'bottom right',
-        padding: '0 3px 3px 0',
-    },
-    '&.react-resizable-handle-sw': {
-        bottom: '0',
-        left: '0',
-        cursor: 'sw-resize',
-        transform: 'rotate(90deg)',
-    },
-    '&.react-resizable-handle-se': {
-        bottom: '0',
-        right: '0',
-        cursor: 'se-resize',
-    },
-    '&.react-resizable-handle-nw': {
-        top: '0',
-        left: '0',
-        cursor: 'nw-resize',
-        transform: 'rotate(180deg)',
-    },
-    '&.react-resizable-handle-ne': {
-        top: '0',
-        right: '0',
-        cursor: 'ne-resize',
-        transform: 'rotate(270deg)',
-    },
-    '&.react-resizable-handle-w, .react-resizable-handle-e': {
-        top: '50%',
-        marginTop: '-10px',
-        cursor: 'ew-resize',
-    },
-    '&.react-resizable-handle-w': {
-        left: '0',
-        transform: 'rotate(135deg)',
-    },
-    '&.react-resizable-handle-e': {
-        right: '0',
-        transform: 'rotate(315deg)',
-    },
-    '&.react-resizable-handle-n, .react-resizable-handle-s': {
-        left: '50%',
-        marginLeft: '-10px',
-        cursor: 'ns-resize',
-    },
-    '&.react-resizable-handle-n': {
-        top: '0',
-        transform: 'rotate(225deg)',
-    },
-    '&.react-resizable-handle-s': {
-        bottom: '0',
-        transform: 'rotate(45deg)',
-    },
+exports.styles = void 0;
+const styles = (theme) => {
+    return {
+        '&.react-grid-layout': {
+            position: 'relative',
+            transition: 'height 200ms ease',
+        },
+        '&.react-grid-item': {
+            transition: 'all 200ms ease',
+            transitionProperty: 'left, top',
+        },
+        '&.react-grid-item img': {
+            pointerEvents: 'none',
+            userSelect: 'none',
+        },
+        '&.react-grid-item.cssTransforms': {
+            transitionProperty: 'transform',
+        },
+        '&.react-grid-item.resizing': {
+            zIndex: 1,
+            willChange: 'width, height',
+        },
+        '&.react-grid-item.react-draggable-dragging': {
+            transition: 'none',
+            zIndex: 3,
+            willChange: 'transform',
+        },
+        '&.react-grid-item.dropping': {
+            visibility: 'hidden',
+        },
+        '&.react-grid-item.react-grid-placeholder': {
+            background: theme.palette.primary.main,
+            opacity: 0.2,
+            transitionDuration: '100ms',
+            zIndex: 2,
+            userSelect: 'none',
+            WebkitUserSelect: 'none',
+            MozUserSelect: 'none',
+            msUserSelect: 'none',
+            OUserSelect: 'none',
+        },
+        '&.react-grid-item > .react-resizable-handle': {
+            position: 'absolute',
+            width: '20px',
+            height: '20px',
+        },
+        '&.react-grid-item > .react-resizable-handle::after': {
+            content: '""',
+            position: 'absolute',
+            right: '3px',
+            bottom: '3px',
+            width: '5px',
+            height: '5px',
+            borderRight: '2px solid rgba(0, 0, 0, 0.4)',
+            borderBottom: '2px solid rgba(0, 0, 0, 0.4)',
+        },
+        '&.react-resizable-hide > .react-resizable-handle': {
+            display: 'none',
+        },
+        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-sw': {
+            bottom: '0',
+            left: '0',
+            cursor: 'sw-resize',
+            transform: 'rotate(90deg)',
+        },
+        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-se': {
+            bottom: '0',
+            right: '0',
+            cursor: 'se-resize',
+        },
+        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-nw': {
+            top: '0',
+            left: '0',
+            cursor: 'nw-resize',
+            transform: 'rotate(180deg)',
+        },
+        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-ne': {
+            top: '0',
+            right: '0',
+            cursor: 'ne-resize',
+            transform: 'rotate(270deg)',
+        },
+        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-w, &.react-grid-item > .react-resizable-handle.react-resizable-handle-e': {
+            top: '50%',
+            marginTop: '-10px',
+            cursor: 'ew-resize',
+        },
+        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-w': {
+            left: '0',
+            transform: 'rotate(135deg)',
+        },
+        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-e': {
+            right: '0',
+            transform: 'rotate(315deg)',
+        },
+        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-n, &.react-grid-item > .react-resizable-handle.react-resizable-handle-s': {
+            left: '50%',
+            marginLeft: '-10px',
+            cursor: 'ns-resize',
+        },
+        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-n': {
+            top: '0',
+            transform: 'rotate(225deg)',
+        },
+        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-s': {
+            bottom: '0',
+            transform: 'rotate(45deg)',
+        },
+        '&.react-resizable': {
+            position: 'relative',
+        },
+        '&.react-resizable-handle': {
+            position: 'absolute',
+            width: '20px',
+            height: '20px',
+            backgroundRepeat: 'no-repeat',
+            backgroundOrigin: 'content-box',
+            boxSizing: 'border-box',
+            backgroundImage: `url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+')`,
+            backgroundPosition: 'bottom right',
+            padding: '0 3px 3px 0',
+        },
+        '&.react-resizable-handle-sw': {
+            bottom: '0',
+            left: '0',
+            cursor: 'sw-resize',
+            transform: 'rotate(90deg)',
+        },
+        '&.react-resizable-handle-se': {
+            bottom: '0',
+            right: '0',
+            cursor: 'se-resize',
+        },
+        '&.react-resizable-handle-nw': {
+            top: '0',
+            left: '0',
+            cursor: 'nw-resize',
+            transform: 'rotate(180deg)',
+        },
+        '&.react-resizable-handle-ne': {
+            top: '0',
+            right: '0',
+            cursor: 'ne-resize',
+            transform: 'rotate(270deg)',
+        },
+        '&.react-resizable-handle-w, .react-resizable-handle-e': {
+            top: '50%',
+            marginTop: '-10px',
+            cursor: 'ew-resize',
+        },
+        '&.react-resizable-handle-w': {
+            left: '0',
+            transform: 'rotate(135deg)',
+        },
+        '&.react-resizable-handle-e': {
+            right: '0',
+            transform: 'rotate(315deg)',
+        },
+        '&.react-resizable-handle-n, .react-resizable-handle-s': {
+            left: '50%',
+            marginLeft: '-10px',
+            cursor: 'ns-resize',
+        },
+        '&.react-resizable-handle-n': {
+            top: '0',
+            transform: 'rotate(225deg)',
+        },
+        '&.react-resizable-handle-s': {
+            bottom: '0',
+            transform: 'rotate(45deg)',
+        },
+    };
 };
+exports.styles = styles;

package/dist/cjs/test/plugin-registry.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.mockPluginRegistryProps = void 0;
+exports.FAKE_PANEL_PLUGIN = exports.mockPluginRegistryProps = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
 /**
  * Helper for mocking `PluginRegistry` data during tests. Returns props that can be spread on the `PluginRegistry`
  * component so that it will load the mock plugins you setup. You can use the `addMockPlugin` function that's returned
@@ -8,29 +9,26 @@ exports.mockPluginRegistryProps = void 0;
  */
 function mockPluginRegistryProps() {
     const mockPluginResource = {
-        kind: 'Plugin',
+        kind: 'PluginModule',
         metadata: {
-            name: 'Fake Plugin for Tests',
+            name: 'Fake Plugin Module for Tests',
         },
         spec: {
-            supported_kinds: {},
+            plugins: [],
         },
     };
+    const mockPluginModule = {};
     // Allow adding mock plugins in tests
-    const mockSetupFunctions = [];
-    const addMockPlugin = (config) => {
-        mockPluginResource.spec.supported_kinds[config.kind] = config.pluginType;
-        mockSetupFunctions.push((registerPlugin) => {
-            registerPlugin(config);
+    const addMockPlugin = (pluginType, kind, plugin) => {
+        mockPluginResource.spec.plugins.push({
+            pluginType,
+            kind,
+            display: {
+                name: `Fake ${pluginType} Plugin for ${kind}`,
+            },
         });
-    };
-    // Our mock plugin module just calls all the setup functions that were added
-    const mockPluginModule = {
-        setup(registerPlugin) {
-            for (const setup of mockSetupFunctions) {
-                setup(registerPlugin);
-            }
-        },
+        // "Export" on the module under the same name as the kind the plugin handles
+        mockPluginModule[kind] = plugin;
     };
     const pluginRegistryProps = {
         getInstalledPlugins() {
@@ -46,3 +44,12 @@ function mockPluginRegistryProps() {
     };
 }
 exports.mockPluginRegistryProps = mockPluginRegistryProps;
+exports.FAKE_PANEL_PLUGIN = {
+    PanelComponent: () => {
+        return (0, jsx_runtime_1.jsx)("div", { role: "figure", children: "FakePanel chart" });
+    },
+    OptionsEditorComponent: () => {
+        return (0, jsx_runtime_1.jsx)("div", { children: "Edit options here" });
+    },
+    createInitialOptions: () => ({}),
+};

package/dist/cjs/test/render.js

@@ -1,4 +1,7 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderWithContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -16,11 +19,17 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // limitations under the License.
 const react_1 = require("@testing-library/react");
 const react_query_1 = require("react-query");
+const context_1 = require("../context");
+const testDashboard_1 = __importDefault(require("./testDashboard"));
 const queryClient = new react_query_1.QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: false } } });
+const initialStore = {
+    isEditMode: true,
+    dashboardSpec: testDashboard_1.default.spec,
+};
 /**
  * Test helper to render a React component with some common app-level providers wrapped around it.
  */
-function renderWithContext(ui, options) {
-    return (0, react_1.render)((0, jsx_runtime_1.jsx)(react_query_1.QueryClientProvider, { client: queryClient, children: ui }), options);
+function renderWithContext(ui, initialState = initialStore, options) {
+    return (0, react_1.render)((0, jsx_runtime_1.jsx)(context_1.DashboardProvider, { initialState: initialState, children: (0, jsx_runtime_1.jsx)(react_query_1.QueryClientProvider, { client: queryClient, children: ui }) }), options);
 }
 exports.renderWithContext = renderWithContext;

package/dist/cjs/test/testDashboard.js

@@ -23,53 +23,30 @@ const testDashboard = {
     },
     spec: {
         datasource: { kind: 'Prometheus', global: true, name: 'Public Prometheus Demo Server' },
-        // TODO: Should duration actually be a time range?
         duration: '24h',
-        variables: {
-            job: {
-                kind: 'PrometheusLabelValues',
+        variables: [
+            {
+                name: 'job',
+                kind: 'TextVariable',
                 options: {
-                    label_name: 'job',
-                    match: ['node_uname_info'],
-                },
-                display: {
-                    label: 'Job',
-                },
-                selection: {
-                    default_value: 'node',
+                    value: 'node',
                 },
             },
-            instance: {
-                kind: 'PrometheusLabelValues',
+            {
+                name: 'instance',
+                kind: 'TextVariable',
                 options: {
-                    label_name: 'instance',
-                    match: ['node_uname_info{job="node"}'],
-                },
-                display: {
-                    label: 'Node',
-                },
-                selection: {
-                    default_value: ['demo.do.prometheus.io:9100'],
-                    all_value: '$__all',
+                    value: 'demo.do.prometheus.io:9100',
                 },
             },
-            interval: {
-                kind: 'Interval',
+            {
+                name: 'interval',
+                kind: 'TextVariable',
                 options: {
-                    values: ['1m', '5m', '10m', '1h'],
-                    auto: {
-                        step_count: 50,
-                        min_interval: '1m',
-                    },
-                },
-                display: {
-                    label: 'Interval',
-                },
-                selection: {
-                    default_value: '1m',
+                    value: '1m',
                 },
             },
-        },
+        ],
         panels: {
             cpu: {
                 kind: 'LineChart',

package/dist/cjs/views/DashboardApp.js

@@ -19,15 +19,15 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // limitations under the License.
 const material_1 = require("@mui/material");
 const components_1 = require("@perses-dev/components");
-const react_1 = require("react");
 const components_2 = require("../components");
-const AddPanel_1 = __importDefault(require("../components/AddPanel/AddPanel"));
+const PanelGroupDialog_1 = __importDefault(require("../components/PanelGroupDialog/PanelGroupDialog"));
+const PanelDrawer_1 = __importDefault(require("../components/PanelDrawer/PanelDrawer"));
 const DashboardToolbar_1 = require("../components/DashboardToolbar");
 const context_1 = require("../context");
 const DashboardApp = (props) => {
     const { dashboardResource, sx, children, ...others } = props;
-    const [showAddPanel, setShowAddPanel] = (0, react_1.useState)(false);
     const { dashboard } = (0, context_1.useDashboard)();
+    const { panelGroupDialog } = (0, context_1.useDashboardApp)();
     return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: (0, components_1.combineSx)({
             display: 'flex',
             width: '100%',
@@ -41,6 +41,6 @@ const DashboardApp = (props) => {
                 overflowY: 'auto',
                 display: 'flex',
                 flexDirection: 'column',
-            }, children: [(0, jsx_runtime_1.jsx)(DashboardToolbar_1.DashboardToolbar, { dashboardName: dashboardResource.metadata.name, onAddPanel: () => setShowAddPanel(true) }), (0, jsx_runtime_1.jsx)(components_2.VariableList, { variables: dashboardResource.spec.variables, sx: { margin: (theme) => theme.spacing(1, 0, 2) } }), (0, jsx_runtime_1.jsx)(components_2.Dashboard, { spec: dashboard }), (0, jsx_runtime_1.jsx)(AddPanel_1.default, { isOpen: showAddPanel, onClose: () => setShowAddPanel(false) }), children] }) }));
+            }, children: [(0, jsx_runtime_1.jsx)(DashboardToolbar_1.DashboardToolbar, { dashboardName: dashboardResource.metadata.name }), (0, jsx_runtime_1.jsx)(components_2.TemplateVariableList, {}), (0, jsx_runtime_1.jsx)(components_2.Dashboard, { spec: dashboard }), (0, jsx_runtime_1.jsx)(PanelDrawer_1.default, {}), panelGroupDialog && (0, jsx_runtime_1.jsx)(PanelGroupDialog_1.default, {}), children] }) }));
 };
 exports.DashboardApp = DashboardApp;

package/dist/cjs/views/ViewDashboard.js

@@ -2,14 +2,42 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ViewDashboard = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+// Copyright 2021 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+const react_1 = require("react");
+const core_1 = require("@perses-dev/core");
+const plugin_system_1 = require("@perses-dev/plugin-system");
 const context_1 = require("../context");
 const DashboardApp_1 = require("./DashboardApp");
 /**
  * The View for displaying a Dashboard, along with the UI for selecting variable values.
  */
 function ViewDashboard(props) {
+    var _a;
     const { dashboardResource: { spec }, children, } = props;
-    const pastDuration = spec.duration;
-    return ((0, jsx_runtime_1.jsx)(context_1.DashboardProvider, { initialState: { dashboardSpec: spec }, children: (0, jsx_runtime_1.jsx)(context_1.TimeRangeStateProvider, { initialValue: { pastDuration }, children: (0, jsx_runtime_1.jsx)(context_1.TemplateVariablesProvider, { variableDefinitions: spec.variables, children: (0, jsx_runtime_1.jsx)(DashboardApp_1.DashboardApp, { ...props, children: children }) }) }) }));
+    const { queryString, setQueryString } = (0, plugin_system_1.useQueryString)();
+    const dashboardDuration = (_a = spec.duration) !== null && _a !== void 0 ? _a : '1h';
+    const defaultTimeRange = (0, core_1.getDefaultTimeRange)(dashboardDuration, queryString);
+    // TODO: add reusable sync query string or no-op util
+    (0, react_1.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]);
+    return ((0, jsx_runtime_1.jsx)(context_1.DashboardProvider, { initialState: { dashboardSpec: spec }, children: (0, jsx_runtime_1.jsx)(context_1.TimeRangeProvider, { initialTimeRange: defaultTimeRange, children: (0, jsx_runtime_1.jsx)(context_1.TemplateVariableProvider, { initialVariableDefinitions: spec.variables, children: (0, jsx_runtime_1.jsx)(DashboardApp_1.DashboardApp, { ...props, children: children }) }) }) }));
 }
 exports.ViewDashboard = ViewDashboard;

package/dist/cjs/views/index.js

@@ -1,5 +1,5 @@
 "use strict";
-// Copyright 2021 The Perses Authors
+// Copyright 2022 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

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,eAgB9C"}
+{"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"}

package/dist/components/Dashboard.js

@@ -1 +1 @@
-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,{definition:r,renderGridItemContent:r=>_jsx(GridItemContent,{content:r.content,spec:o})},t)))})})}
+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}`)))})})}

package/dist/components/DashboardToolbar.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 export interface DashboardToolbarProps {
     dashboardName: string;
-    onAddPanel: () => void;
 }
 export declare const DashboardToolbar: (props: DashboardToolbarProps) => JSX.Element;
 //# sourceMappingURL=DashboardToolbar.d.ts.map

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

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

package/dist/components/DashboardToolbar.js

@@ -1 +1 @@
-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{useEditMode,useLayouts}from"../context";import{TimeRangeControls}from"../components";export const DashboardToolbar=i=>{const{dashboardName:t,onAddPanel:n}=i,{isEditMode:o,setEditMode:s}=useEditMode(),{addLayout:a}=useLayouts();return _jsx(Toolbar,{disableGutters:!0,sx:{display:"block",padding:i=>i.spacing(2,0)},children:o?_jsxs(_Fragment,{children:[_jsxs(Box,{sx:{display:"flex",width:"100%"},children:[_jsxs(Typography,{variant:"h2",children:["Edit ",t]}),_jsxs(Stack,{direction:"row",spacing:1,sx:{marginLeft:"auto"},children:[_jsx(TimeRangeControls,{}),_jsx(Button,{variant:"outlined",onClick:()=>{s(!1)},children:"Cancel"}),_jsx(Button,{variant:"contained",children:"Save"})]})]}),_jsxs(Stack,{direction:"row",spacing:1,sx:{display:"flex",justifyContent:"flex-end",width:"100%",padding:i=>i.spacing(2,0)},children:[_jsx(Button,{startIcon:_jsx(AddIcon,{}),onClick:()=>{a({kind:"Grid",spec:{display:{title:"New Group",collapse:{open:!0}},items:[]}})},children:"Add Group"}),_jsx(Button,{startIcon:_jsx(AddIcon,{}),onClick:n,children:"Add Panel"})]})]}):_jsxs(Box,{sx:{display:"flex",width:"100%"},children:[_jsx(Typography,{variant:"h2",children:t}),_jsxs(Stack,{direction:"row",spacing:2,sx:{marginLeft:"auto"},children:[_jsx(TimeRangeControls,{}),_jsx(Button,{variant:"contained",startIcon:_jsx(PencilIcon,{}),onClick:()=>{s(!0)},sx:{marginLeft:"auto"},children:"Edit"})]})]})})};
+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"})]})]})})};