@perses-dev/dashboards 0.24.0 → 0.26.0

package/dist/cjs/stories/decorators/WithDatasourceStore.js

@@ -0,0 +1,82 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "WithDatasourceStore", {
+    enumerable: true,
+    get: ()=>WithDatasourceStore
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _dashboards = require("@perses-dev/dashboards");
+const _constants = require("./constants");
+// Type guard because storybook types parameters as `any`
+function isWithDatasourceStoreParameter(parameter) {
+    return !!parameter && typeof parameter === 'object' && 'props' in parameter;
+}
+const prometheusDemoUrl = 'https://prometheus.demo.do.prometheus.io';
+const prometheusDemo = {
+    kind: 'GlobalDatasource',
+    metadata: {
+        name: 'PrometheusDemo',
+        created_at: '0001-01-01T00:00:00Z',
+        updated_at: '0001-01-01T00:00:00Z',
+        version: 0
+    },
+    spec: {
+        default: true,
+        plugin: {
+            kind: 'PrometheusDatasource',
+            spec: {
+                direct_url: prometheusDemoUrl
+            }
+        }
+    }
+};
+const WithDatasourceStore = (Story, context)=>{
+    const initParameter = context.parameters.withDatasourceStore;
+    const parameter = isWithDatasourceStoreParameter(initParameter) ? initParameter : undefined;
+    const props = parameter === null || parameter === void 0 ? void 0 : parameter.props;
+    // This default currently defines the bare minimum to get a story working in
+    // the `Dashboard` storybook with the Prometheus demo api. We'll likely want
+    // to expand it to do more in the future.
+    const defaultDatasourceProps = {
+        dashboardResource: _constants.EMPTY_DASHBOARD_RESOURCE,
+        datasourceApi: {
+            getDatasource: ()=>{
+                return Promise.resolve(undefined);
+            },
+            getGlobalDatasource: (selector)=>{
+                if (selector.kind === 'PrometheusDatasource') {
+                    return Promise.resolve({
+                        resource: prometheusDemo,
+                        proxyUrl: prometheusDemoUrl
+                    });
+                }
+                return Promise.resolve(undefined);
+            },
+            listDatasources: ()=>{
+                return Promise.resolve([]);
+            },
+            listGlobalDatasources: ()=>{
+                return Promise.resolve([]);
+            }
+        }
+    };
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dashboards.DatasourceStoreProvider, {
+        ...defaultDatasourceProps,
+        ...props,
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(Story, {})
+    });
+};

package/dist/cjs/stories/decorators/WithPluginRegistry.js

@@ -0,0 +1,91 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "WithPluginRegistry", {
+    enumerable: true,
+    get: ()=>WithPluginRegistry
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _pluginSystem = require("@perses-dev/plugin-system");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interopRequireWildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+// NOTE: the aliases we use for components break these top level imports, so we
+// import relatively.
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const prometheusResource = require('../../../../prometheus-plugin/plugin.json');
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const panelsResource = require('../../../../panels-plugin/plugin.json');
+const bundledPluginLoader = (0, _pluginSystem.dynamicImportPluginLoader)([
+    {
+        resource: prometheusResource,
+        // This throws an error in CI (but not locally for some reason), likely because
+        // this package isn't a dependency for dashboards. We probably do not want to
+        // make it one solely for type-checking in storybook.
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        importPlugin: ()=>Promise.resolve().then(()=>/*#__PURE__*/ _interopRequireWildcard(require("@perses-dev/prometheus-plugin")))
+    },
+    {
+        resource: panelsResource,
+        // Same comment as above.
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        importPlugin: ()=>Promise.resolve().then(()=>/*#__PURE__*/ _interopRequireWildcard(require("@perses-dev/panels-plugin")))
+    }
+]);
+const WithPluginRegistry = (Story)=>{
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.PluginRegistry, {
+        pluginLoader: bundledPluginLoader,
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(Story, {})
+    });
+};

package/dist/cjs/stories/decorators/WithQueryClient.js

@@ -0,0 +1,29 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "WithQueryClient", {
+    enumerable: true,
+    get: ()=>WithQueryClient
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _reactQuery = require("@tanstack/react-query");
+const WithQueryClient = (Story)=>{
+    const queryClient = new _reactQuery.QueryClient({});
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_reactQuery.QueryClientProvider, {
+        client: queryClient,
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(Story, {})
+    });
+};

package/dist/cjs/stories/decorators/WithQueryParams.js

@@ -0,0 +1,29 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "WithQueryParams", {
+    enumerable: true,
+    get: ()=>WithQueryParams
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _window = require("use-query-params/adapters/window");
+const _useQueryParams = require("use-query-params");
+const WithQueryParams = (Story)=>{
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_useQueryParams.QueryParamProvider, {
+        adapter: _window.WindowHistoryAdapter,
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(Story, {})
+    });
+};

package/dist/cjs/stories/decorators/WithTemplateVariables.js

@@ -0,0 +1,35 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "WithTemplateVariables", {
+    enumerable: true,
+    get: ()=>WithTemplateVariables
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _dashboards = require("@perses-dev/dashboards");
+// Type guard because storybook types parameters as `any`
+function isWithTemplateVariableParameter(parameter) {
+    return !!parameter && typeof parameter === 'object' && 'props' in parameter;
+}
+const WithTemplateVariables = (Story, context)=>{
+    const initParameter = context.parameters.withTemplateVariables;
+    const parameter = isWithTemplateVariableParameter(initParameter) ? initParameter : undefined;
+    const props = parameter === null || parameter === void 0 ? void 0 : parameter.props;
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dashboards.TemplateVariableProvider, {
+        ...props,
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(Story, {})
+    });
+};

package/dist/cjs/stories/decorators/WithTimeRange.js

@@ -0,0 +1,38 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "WithTimeRange", {
+    enumerable: true,
+    get: ()=>WithTimeRange
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _pluginSystem = require("@perses-dev/plugin-system");
+// Type guard because storybook types parameters as `any`
+function isWithTimeRangeParameter(parameter) {
+    return !!parameter && typeof parameter === 'object' && 'props' in parameter;
+}
+const WithTimeRange = (Story, context)=>{
+    const initParameter = context.parameters.withTimeRange;
+    const parameter = isWithTimeRangeParameter(initParameter) ? initParameter : undefined;
+    const props = parameter === null || parameter === void 0 ? void 0 : parameter.props;
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.TimeRangeProvider, {
+        initialTimeRange: {
+            pastDuration: '1h'
+        },
+        ...props,
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(Story, {})
+    });
+};

package/dist/cjs/stories/decorators/constants.js

@@ -0,0 +1,36 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "EMPTY_DASHBOARD_RESOURCE", {
+    enumerable: true,
+    get: ()=>EMPTY_DASHBOARD_RESOURCE
+});
+const EMPTY_DASHBOARD_RESOURCE = {
+    kind: 'Dashboard',
+    metadata: {
+        name: 'My Dashboard',
+        project: 'Storybook',
+        created_at: '2021-11-09T00:00:00Z',
+        updated_at: '2021-11-09T00:00:00Z',
+        version: 0
+    },
+    spec: {
+        duration: '1h',
+        variables: [],
+        layouts: [],
+        panels: {}
+    }
+};

package/dist/cjs/stories/decorators/index.js

@@ -0,0 +1,35 @@
+// Copyright 2023 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("./constants"), exports);
+_exportStar(require("./WithDashboard"), exports);
+_exportStar(require("./WithDatasourceStore"), exports);
+_exportStar(require("./WithPluginRegistry"), exports);
+_exportStar(require("./WithQueryClient"), exports);
+_exportStar(require("./WithQueryParams"), exports);
+_exportStar(require("./WithTemplateVariables"), exports);
+_exportStar(require("./WithTimeRange"), 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/views/ViewDashboard/DashboardApp.js

@@ -25,7 +25,7 @@ const _components = require("@perses-dev/components");
 const _components1 = require("../../components");
 const _context = require("../../context");
 const DashboardApp = (props)=>{
-    const { dashboardResource , dashboardTitleComponent , onSave , onDiscard , initialVariableIsSticky , isReadonly  } = props;
+    const { dashboardResource , dashboardTitleComponent , emptyDashboardProps , onSave , onDiscard , initialVariableIsSticky , isReadonly ,  } = props;
     const { setEditMode  } = (0, _context.useEditMode)();
     const { dashboard , setDashboard  } = (0, _context.useDashboard)();
     const [originalDashboard, setOriginalDashboard] = (0, _react.useState)(undefined);
@@ -80,18 +80,25 @@ const DashboardApp = (props)=>{
             }),
             /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
                 sx: {
-                    padding: (theme)=>theme.spacing(2)
+                    padding: (theme)=>theme.spacing(2),
+                    height: '100%'
                 },
                 children: [
                     /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
                         FallbackComponent: _components.ErrorAlert,
-                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.Dashboard, {})
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.Dashboard, {
+                            emptyDashboardProps: {
+                                onEditButtonClick,
+                                ...emptyDashboardProps
+                            }
+                        })
                     }),
                     /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.PanelDrawer, {}),
                     /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.PanelGroupDialog, {}),
                     /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.DeletePanelGroupDialog, {}),
                     /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.DeletePanelDialog, {}),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.DiscardChangesConfirmationDialog, {})
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.DiscardChangesConfirmationDialog, {}),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.EditJsonDialog, {})
                 ]
             })
         ]

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

@@ -25,7 +25,7 @@ const _pluginSystem = require("@perses-dev/plugin-system");
 const _context = require("../../context");
 const _dashboardApp = require("./DashboardApp");
 function ViewDashboard(props) {
-    const { dashboardResource , datasourceApi , dashboardTitleComponent , onSave , onDiscard , initialVariableIsSticky , isReadonly , isEditing , sx , ...others } = props;
+    const { dashboardResource , datasourceApi , dashboardTitleComponent , emptyDashboardProps , onSave , onDiscard , initialVariableIsSticky , isReadonly , isEditing , sx , ...others } = props;
     const { spec  } = dashboardResource;
     var _duration;
     const dashboardDuration = (_duration = spec.duration) !== null && _duration !== void 0 ? _duration : '1h';
@@ -57,6 +57,7 @@ function ViewDashboard(props) {
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dashboardApp.DashboardApp, {
                                 dashboardResource: dashboardResource,
                                 dashboardTitleComponent: dashboardTitleComponent,
+                                emptyDashboardProps: emptyDashboardProps,
                                 onSave: onSave,
                                 onDiscard: onDiscard,
                                 initialVariableIsSticky: initialVariableIsSticky,

package/dist/components/AddPanelButton/AddPanelButton.d.ts

@@ -1,3 +1,18 @@
 /// <reference types="react" />
-export declare const AddPanelButton: () => JSX.Element;
+import { ButtonProps } from '@mui/material';
+export interface AddPanelButtonProps extends Pick<ButtonProps, 'fullWidth'> {
+    /**
+     * The variant to use to display the button.
+     */
+    variant?: 'text' | 'outlined';
+    /**
+     * The color to use to display the button.
+     */
+    color?: 'primary' | 'secondary';
+    /**
+     * The label used inside the button.
+     */
+    label?: string;
+}
+export declare const AddPanelButton: ({ variant, color, label, fullWidth, }: AddPanelButtonProps) => JSX.Element;
 //# sourceMappingURL=AddPanelButton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AddPanelButton.d.ts","sourceRoot":"","sources":["../../../src/components/AddPanelButton/AddPanelButton.tsx"],"names":[],"mappings":";AAmBA,eAAO,MAAM,cAAc,mBAU1B,CAAC"}
+{"version":3,"file":"AddPanelButton.d.ts","sourceRoot":"","sources":["../../../src/components/AddPanelButton/AddPanelButton.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAU,WAAW,EAAE,MAAM,eAAe,CAAC;AAMpD,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC;IACzE;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAE9B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAEhC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,cAAc,0CAKxB,mBAAmB,gBAkBrB,CAAC"}

package/dist/components/AddPanelButton/AddPanelButton.js

@@ -16,7 +16,7 @@ import AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';
 import { InfoTooltip } from '@perses-dev/components';
 import { TOOLTIP_TEXT } from '../../constants';
 import { useDashboardActions } from '../../context';
-export const AddPanelButton = ()=>{
+export const AddPanelButton = ({ variant ='text' , color ='primary' , label ='Panel' , fullWidth  })=>{
     const { openAddPanel  } = useDashboardActions();
     return /*#__PURE__*/ _jsx(InfoTooltip, {
         description: TOOLTIP_TEXT.addPanel,
@@ -24,7 +24,14 @@ export const AddPanelButton = ()=>{
             startIcon: /*#__PURE__*/ _jsx(AddPanelIcon, {}),
             onClick: openAddPanel,
             "aria-label": TOOLTIP_TEXT.addPanel,
-            children: "Panel"
+            variant: variant,
+            color: color,
+            fullWidth: fullWidth,
+            sx: {
+                whiteSpace: 'nowrap',
+                minWidth: 'auto'
+            },
+            children: label
         })
     });
 };

package/dist/components/AddPanelButton/AddPanelButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/AddPanelButton/AddPanelButton.tsx"],"sourcesContent":["// Copyright 2023 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 { Button } from '@mui/material';\nimport AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { TOOLTIP_TEXT } from '../../constants';\nimport { useDashboardActions } from '../../context';\n\nexport const AddPanelButton = () => {\n  const { openAddPanel } = useDashboardActions();\n\n  return (\n    <InfoTooltip description={TOOLTIP_TEXT.addPanel}>\n      <Button startIcon={<AddPanelIcon />} onClick={openAddPanel} aria-label={TOOLTIP_TEXT.addPanel}>\n        Panel\n      </Button>\n    </InfoTooltip>\n  );\n};\n"],"names":["Button","AddPanelIcon","InfoTooltip","TOOLTIP_TEXT","useDashboardActions","AddPanelButton","openAddPanel","description","addPanel","startIcon","onClick","aria-label"],"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,MAAM,QAAQ,eAAe,CAAC;AACvC,OAAOC,YAAY,MAAM,qCAAqC,CAAC;AAC/D,SAASC,WAAW,QAAQ,wBAAwB,CAAC;AACrD,SAASC,YAAY,QAAQ,iBAAiB,CAAC;AAC/C,SAASC,mBAAmB,QAAQ,eAAe,CAAC;AAEpD,OAAO,MAAMC,cAAc,GAAG,IAAM;IAClC,MAAM,EAAEC,YAAY,CAAA,EAAE,GAAGF,mBAAmB,EAAE,AAAC;IAE/C,qBACE,KAACF,WAAW;QAACK,WAAW,EAAEJ,YAAY,CAACK,QAAQ;kBAC7C,cAAA,KAACR,MAAM;YAACS,SAAS,gBAAE,KAACR,YAAY,KAAG;YAAES,OAAO,EAAEJ,YAAY;YAAEK,YAAU,EAAER,YAAY,CAACK,QAAQ;sBAAE,OAE/F;UAAS;MACG,CACd;AACJ,CAAC,CAAC"}
+{"version":3,"sources":["../../../src/components/AddPanelButton/AddPanelButton.tsx"],"sourcesContent":["// Copyright 2023 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 { Button, ButtonProps } from '@mui/material';\nimport AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { TOOLTIP_TEXT } from '../../constants';\nimport { useDashboardActions } from '../../context';\n\nexport interface AddPanelButtonProps extends Pick<ButtonProps, 'fullWidth'> {\n  /**\n   * The variant to use to display the button.\n   */\n  variant?: 'text' | 'outlined';\n\n  /**\n   * The color to use to display the button.\n   */\n  color?: 'primary' | 'secondary';\n\n  /**\n   * The label used inside the button.\n   */\n  label?: string;\n}\n\nexport const AddPanelButton = ({\n  variant = 'text',\n  color = 'primary',\n  label = 'Panel',\n  fullWidth,\n}: AddPanelButtonProps) => {\n  const { openAddPanel } = useDashboardActions();\n\n  return (\n    <InfoTooltip description={TOOLTIP_TEXT.addPanel}>\n      <Button\n        startIcon={<AddPanelIcon />}\n        onClick={openAddPanel}\n        aria-label={TOOLTIP_TEXT.addPanel}\n        variant={variant}\n        color={color}\n        fullWidth={fullWidth}\n        sx={{ whiteSpace: 'nowrap', minWidth: 'auto' }}\n      >\n        {label}\n      </Button>\n    </InfoTooltip>\n  );\n};\n"],"names":["Button","AddPanelIcon","InfoTooltip","TOOLTIP_TEXT","useDashboardActions","AddPanelButton","variant","color","label","fullWidth","openAddPanel","description","addPanel","startIcon","onClick","aria-label","sx","whiteSpace","minWidth"],"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,MAAM,QAAqB,eAAe,CAAC;AACpD,OAAOC,YAAY,MAAM,qCAAqC,CAAC;AAC/D,SAASC,WAAW,QAAQ,wBAAwB,CAAC;AACrD,SAASC,YAAY,QAAQ,iBAAiB,CAAC;AAC/C,SAASC,mBAAmB,QAAQ,eAAe,CAAC;AAmBpD,OAAO,MAAMC,cAAc,GAAG,CAAC,EAC7BC,OAAO,EAAG,MAAM,CAAA,EAChBC,KAAK,EAAG,SAAS,CAAA,EACjBC,KAAK,EAAG,OAAO,CAAA,EACfC,SAAS,CAAA,EACW,GAAK;IACzB,MAAM,EAAEC,YAAY,CAAA,EAAE,GAAGN,mBAAmB,EAAE,AAAC;IAE/C,qBACE,KAACF,WAAW;QAACS,WAAW,EAAER,YAAY,CAACS,QAAQ;kBAC7C,cAAA,KAACZ,MAAM;YACLa,SAAS,gBAAE,KAACZ,YAAY,KAAG;YAC3Ba,OAAO,EAAEJ,YAAY;YACrBK,YAAU,EAAEZ,YAAY,CAACS,QAAQ;YACjCN,OAAO,EAAEA,OAAO;YAChBC,KAAK,EAAEA,KAAK;YACZE,SAAS,EAAEA,SAAS;YACpBO,EAAE,EAAE;gBAAEC,UAAU,EAAE,QAAQ;gBAAEC,QAAQ,EAAE,MAAM;aAAE;sBAE7CV,KAAK;UACC;MACG,CACd;AACJ,CAAC,CAAC"}

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

@@ -1,8 +1,16 @@
 /// <reference types="react" />
 import { BoxProps } from '@mui/material';
-export declare type DashboardProps = BoxProps;
+import { EmptyDashboardProps } from '../EmptyDashboard';
+export declare type DashboardProps = BoxProps & {
+    /**
+     * Props for `EmptyDashboard` component that will be rendered when the dashboard
+     * is empty (i.e. has no panel groups). If not specified, the defaults will
+     * be used.
+     */
+    emptyDashboardProps?: EmptyDashboardProps;
+};
 /**
  * Renders a Dashboard for the provided Dashboard spec.
  */
-export declare function Dashboard(props: DashboardProps): JSX.Element;
+export declare function Dashboard({ emptyDashboardProps, ...boxProps }: DashboardProps): JSX.Element;
 //# sourceMappingURL=Dashboard.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Dashboard.d.ts","sourceRoot":"","sources":["../../../src/components/Dashboard/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"}
+{"version":3,"file":"Dashboard.d.ts","sourceRoot":"","sources":["../../../src/components/Dashboard/Dashboard.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAO,QAAQ,EAAE,MAAM,eAAe,CAAC;AAI9C,OAAO,EAAkB,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAExE,oBAAY,cAAc,GAAG,QAAQ,GAAG;IACtC;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;CAC3C,CAAC;AAEF;;GAEG;AACH,wBAAgB,SAAS,CAAC,EAAE,mBAAmB,EAAE,GAAG,QAAQ,EAAE,EAAE,cAAc,eAgB7E"}

package/dist/components/Dashboard/Dashboard.js

@@ -10,22 +10,39 @@
 // 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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@mui/material';
 import { ErrorBoundary, ErrorAlert } from '@perses-dev/components';
 import { usePanelGroupIds } from '../../context';
 import { GridLayout } from '../GridLayout';
+import { EmptyDashboard } from '../EmptyDashboard';
 /**
  * Renders a Dashboard for the provided Dashboard spec.
- */ export function Dashboard(props) {
+ */ export function Dashboard({ emptyDashboardProps , ...boxProps }) {
     const panelGroupIds = usePanelGroupIds();
+    const isEmpty = !panelGroupIds.length;
     return /*#__PURE__*/ _jsx(Box, {
-        ...props,
-        children: /*#__PURE__*/ _jsx(ErrorBoundary, {
+        ...boxProps,
+        sx: {
+            height: '100%'
+        },
+        children: /*#__PURE__*/ _jsxs(ErrorBoundary, {
             FallbackComponent: ErrorAlert,
-            children: panelGroupIds.map((panelGroupId)=>/*#__PURE__*/ _jsx(GridLayout, {
-                    panelGroupId: panelGroupId
-                }, panelGroupId))
+            children: [
+                isEmpty && /*#__PURE__*/ _jsx(Box, {
+                    sx: {
+                        height: '100%',
+                        display: 'flex',
+                        alignItems: 'center'
+                    },
+                    children: /*#__PURE__*/ _jsx(EmptyDashboard, {
+                        ...emptyDashboardProps
+                    })
+                }),
+                !isEmpty && panelGroupIds.map((panelGroupId)=>/*#__PURE__*/ _jsx(GridLayout, {
+                        panelGroupId: panelGroupId
+                    }, panelGroupId))
+            ]
         })
     });
 }

package/dist/components/Dashboard/Dashboard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Dashboard/Dashboard.tsx"],"sourcesContent":["// Copyright 2023 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,eAAe,CAAC;AACjD,SAASC,UAAU,QAAQ,eAAe,CAAC;AAI3C;;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"}
+{"version":3,"sources":["../../../src/components/Dashboard/Dashboard.tsx"],"sourcesContent":["// Copyright 2023 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';\nimport { EmptyDashboard, EmptyDashboardProps } from '../EmptyDashboard';\n\nexport type DashboardProps = BoxProps & {\n  /**\n   * Props for `EmptyDashboard` component that will be rendered when the dashboard\n   * is empty (i.e. has no panel groups). If not specified, the defaults will\n   * be used.\n   */\n  emptyDashboardProps?: EmptyDashboardProps;\n};\n\n/**\n * Renders a Dashboard for the provided Dashboard spec.\n */\nexport function Dashboard({ emptyDashboardProps, ...boxProps }: DashboardProps) {\n  const panelGroupIds = usePanelGroupIds();\n  const isEmpty = !panelGroupIds.length;\n\n  return (\n    <Box {...boxProps} sx={{ height: '100%' }}>\n      <ErrorBoundary FallbackComponent={ErrorAlert}>\n        {isEmpty && (\n          <Box sx={{ height: '100%', display: 'flex', alignItems: 'center' }}>\n            <EmptyDashboard {...emptyDashboardProps} />\n          </Box>\n        )}\n        {!isEmpty && panelGroupIds.map((panelGroupId) => <GridLayout key={panelGroupId} panelGroupId={panelGroupId} />)}\n      </ErrorBoundary>\n    </Box>\n  );\n}\n"],"names":["Box","ErrorBoundary","ErrorAlert","usePanelGroupIds","GridLayout","EmptyDashboard","Dashboard","emptyDashboardProps","boxProps","panelGroupIds","isEmpty","length","sx","height","FallbackComponent","display","alignItems","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,eAAe,CAAC;AACjD,SAASC,UAAU,QAAQ,eAAe,CAAC;AAC3C,SAASC,cAAc,QAA6B,mBAAmB,CAAC;AAWxE;;CAEC,GACD,OAAO,SAASC,SAAS,CAAC,EAAEC,mBAAmB,CAAA,EAAE,GAAGC,QAAQ,EAAkB,EAAE;IAC9E,MAAMC,aAAa,GAAGN,gBAAgB,EAAE,AAAC;IACzC,MAAMO,OAAO,GAAG,CAACD,aAAa,CAACE,MAAM,AAAC;IAEtC,qBACE,KAACX,GAAG;QAAE,GAAGQ,QAAQ;QAAEI,EAAE,EAAE;YAAEC,MAAM,EAAE,MAAM;SAAE;kBACvC,cAAA,MAACZ,aAAa;YAACa,iBAAiB,EAAEZ,UAAU;;gBACzCQ,OAAO,kBACN,KAACV,GAAG;oBAACY,EAAE,EAAE;wBAAEC,MAAM,EAAE,MAAM;wBAAEE,OAAO,EAAE,MAAM;wBAAEC,UAAU,EAAE,QAAQ;qBAAE;8BAChE,cAAA,KAACX,cAAc;wBAAE,GAAGE,mBAAmB;sBAAI;kBACvC,AACP;gBACA,CAACG,OAAO,IAAID,aAAa,CAACQ,GAAG,CAAC,CAACC,YAAY,iBAAK,KAACd,UAAU;wBAAoBc,YAAY,EAAEA,YAAY;uBAAxCA,YAAY,CAAgC,CAAC;;UACjG;MACZ,CACN;AACJ,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAQrD,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,uBAAuB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,OAAO,CAAC,iBAAiB,CAAC,CAAC;CACpE;AAED,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,gBA4I5D,CAAC"}
+{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAUrD,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,uBAAuB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,OAAO,CAAC,iBAAiB,CAAC,CAAC;CACpE;AAED,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,gBAoI5D,CAAC"}