@perses-dev/dashboards 0.24.0 → 0.25.0

package/dist/cjs/components/QuerySummaryTable/QuerySummaryTable.js

@@ -0,0 +1,185 @@
+// 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, "QuerySummaryTable", {
+    enumerable: true,
+    get: ()=>QuerySummaryTable
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _reactQuery = require("@tanstack/react-query");
+const _pluginSystem = require("@perses-dev/plugin-system");
+const TABLE_MAX_WIDTH = 1000;
+function QuerySummaryTable(props) {
+    const { showTotalQueries =true  } = props;
+    const datasourcClient = (0, _pluginSystem.useDatasourceClient)({
+        kind: 'PrometheusDatasource'
+    });
+    const { absoluteTimeRange  } = (0, _pluginSystem.useTimeRange)();
+    // for displaying a summary of recent query results
+    const queryClient = (0, _reactQuery.useQueryClient)();
+    const queries = queryClient.getQueryCache().findAll();
+    const activeQueries = queries.filter((query)=>query.state.status === 'loading');
+    const completedQueries = queries.filter((query)=>query.state.status === 'success');
+    const querySummary = (0, _pluginSystem.useActiveTimeSeriesQueries)();
+    if (datasourcClient.isLoading === true) {
+        return null;
+    }
+    const warnings = [];
+    querySummary.forEach((query)=>{
+        var ref;
+        const queryData = query.state.data;
+        if (queryData && ((ref = queryData.metadata) === null || ref === void 0 ? void 0 : ref.notices)) {
+            var ref1;
+            const queryKey = query.queryKey;
+            const warningMessage = (ref1 = queryData.metadata.notices[0]) === null || ref1 === void 0 ? void 0 : ref1.message;
+            if (warningMessage) {
+                warnings.push({
+                    query: String(queryKey[0].spec.plugin.spec.query),
+                    summary: warningMessage
+                });
+            }
+        }
+    });
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+        spacing: 1,
+        mb: 2,
+        sx: {
+            maxWidth: TABLE_MAX_WIDTH
+        },
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+                sx: {
+                    p: 1
+                },
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                        variant: "h2",
+                        mb: 1,
+                        children: "Query Summary"
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableContainer, {
+                        component: _material.Paper,
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Table, {
+                            size: "small",
+                            "aria-label": "query summary table",
+                            children: [
+                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableHead, {
+                                    children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.TableRow, {
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
+                                                children: "Queries Loading"
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
+                                                children: "Recent Time Series Queries"
+                                            }),
+                                            showTotalQueries && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
+                                                children: "Total Queries"
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
+                                                children: "Start Time"
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
+                                                children: "End Time"
+                                            })
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableBody, {
+                                    children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.TableRow, {
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
+                                                children: activeQueries.length
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
+                                                children: querySummary.length
+                                            }),
+                                            showTotalQueries && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
+                                                children: completedQueries.length
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
+                                                children: absoluteTimeRange.start.toString()
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
+                                                children: absoluteTimeRange.end.toString()
+                                            })
+                                        ]
+                                    })
+                                })
+                            ]
+                        })
+                    })
+                ]
+            }),
+            warnings.length > 0 && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+                sx: {
+                    p: 1,
+                    m: 0
+                },
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                        variant: "h3",
+                        mb: 1,
+                        children: "Warnings"
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableContainer, {
+                        component: _material.Paper,
+                        sx: {
+                            mb: 2
+                        },
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Table, {
+                            size: "small",
+                            "aria-label": "query warnings table",
+                            children: [
+                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableHead, {
+                                    children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.TableRow, {
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
+                                                children: "Query"
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
+                                                children: "Summary"
+                                            })
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableBody, {
+                                    children: warnings.map((details, idx)=>{
+                                        return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.TableRow, {
+                                            children: [
+                                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
+                                                    children: details.query
+                                                }),
+                                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
+                                                    children: details.summary
+                                                })
+                                            ]
+                                        }, idx);
+                                    })
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                        disabled: true,
+                        variant: "outlined",
+                        children: "TODO: Action Button"
+                    })
+                ]
+            })
+        ]
+    });
+}

package/dist/cjs/components/QuerySummaryTable/index.js

@@ -0,0 +1,28 @@
+// 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("./QuerySummaryTable"), exports);
+function _exportStar(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
+            enumerable: true,
+            get: function() {
+                return from[k];
+            }
+        });
+    });
+    return from;
+}

package/dist/cjs/components/ToolbarIconButton/ToolbarIconButton.js

@@ -19,17 +19,20 @@ Object.defineProperty(exports, "ToolbarIconButton", {
     get: ()=>ToolbarIconButton
 });
 const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
 const _material = require("@mui/material");
-function ToolbarIconButton(props) {
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(IconButton, {
+function IconButton(props, ref) {
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(StyledIconButton, {
+        ref: ref,
         variant: "outlined",
         color: "secondary",
         ...props
     });
 }
-const IconButton = (0, _material.styled)(_material.Button)(({ theme  })=>({
+const StyledIconButton = (0, _material.styled)(_material.Button)(({ theme  })=>({
         // Using a button with some adjusted styles because it is easier to inherit
         // styling and variants from themes than with an IconButton.
         padding: theme.spacing(0.5),
         minWidth: 'auto'
     }));
+const ToolbarIconButton = /*#__PURE__*/ (0, _react.forwardRef)(IconButton);

package/dist/cjs/components/Variables/EditVariablesButton.js

@@ -31,7 +31,7 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
-function EditVariablesButton() {
+function EditVariablesButton({ variant ='text' , label ='Variables' , color ='primary' , fullWidth  }) {
     const [isVariableEditorOpen, setIsVariableEditorOpen] = (0, _react.useState)(false);
     const variableDefinitions = (0, _context.useTemplateVariableDefinitions)();
     const { setVariableDefinitions  } = (0, _context.useTemplateVariableActions)();
@@ -49,7 +49,14 @@ function EditVariablesButton() {
                     startIcon: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencilOutline.default, {}),
                     onClick: openVariableEditor,
                     "aria-label": _constants.TOOLTIP_TEXT.editVariables,
-                    children: "Variables"
+                    variant: variant,
+                    color: color,
+                    fullWidth: fullWidth,
+                    sx: {
+                        whiteSpace: 'nowrap',
+                        minWidth: 'auto'
+                    },
+                    children: label
                 })
             }),
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.Drawer, {

package/dist/cjs/components/index.js

@@ -22,10 +22,14 @@ _exportStar(require("./DeletePanelDialog"), exports);
 _exportStar(require("./DeletePanelGroupDialog"), exports);
 _exportStar(require("./DiscardChangesConfirmationDialog"), exports);
 _exportStar(require("./DownloadButton"), exports);
+_exportStar(require("./EditJsonButton"), exports);
+_exportStar(require("./EditJsonDialog"), exports);
+_exportStar(require("./EmptyDashboard"), exports);
 _exportStar(require("./GridLayout"), exports);
 _exportStar(require("./Panel"), exports);
 _exportStar(require("./PanelDrawer"), exports);
 _exportStar(require("./PanelGroupDialog"), exports);
+_exportStar(require("./QuerySummaryTable"), exports);
 _exportStar(require("./TimeRangeControls"), exports);
 _exportStar(require("./ToolbarIconButton"), exports);
 _exportStar(require("./Variables"), exports);

package/dist/cjs/constants/user-interface-text.js

@@ -29,6 +29,7 @@ const TOOLTIP_TEXT = {
     addPanel: 'Add panel',
     addGroup: 'Add panel group',
     downloadDashboard: 'Download JSON',
+    editJson: 'Edit JSON',
     editVariables: 'Edit variables',
     refreshDashboard: 'Refresh dashboard',
     // Group buttons

package/dist/cjs/context/DashboardProvider/DashboardProvider.js

@@ -40,6 +40,7 @@ const _deletePanelGroupSlice = require("./delete-panel-group-slice");
 const _deletePanelSlice = require("./delete-panel-slice");
 const _discardChangesDialogSlice = require("./discard-changes-dialog-slice");
 const _duplicatePanelSlice = require("./duplicate-panel-slice");
+const _editJsonDialogSlice = require("./edit-json-dialog-slice");
 const DashboardContext = /*#__PURE__*/ (0, _react.createContext)(undefined);
 function useDashboardStore(selector) {
     const store = (0, _react.useContext)(DashboardContext);
@@ -80,18 +81,23 @@ function DashboardProvider(props) {
 }
 function initStore(props) {
     const { initialState: { dashboardResource , isEditMode  } ,  } = props;
-    const { spec: { display , layouts , panels , duration  } , metadata ,  } = dashboardResource;
+    const { spec: { display , duration  } , metadata ,  } = dashboardResource;
+    let { spec: { layouts , panels  } ,  } = dashboardResource;
+    // Set fallbacks in case the frontend is used with a non-Perses backend
+    layouts = layouts !== null && layouts !== void 0 ? layouts : [];
+    panels = panels !== null && panels !== void 0 ? panels : {};
     const store = (0, _zustand.createStore)()((0, _immer.immer)((0, _middleware.devtools)((...args)=>{
         const [set] = args;
         return {
-            ...(0, _panelGroupSlice.createPanelGroupSlice)(layouts)(...args),
-            ...(0, _panelSlice.createPanelSlice)(panels)(...args),
+            /* Groups */ ...(0, _panelGroupSlice.createPanelGroupSlice)(layouts)(...args),
             ...(0, _panelGroupEditorSlice.createPanelGroupEditorSlice)(...args),
             ...(0, _deletePanelGroupSlice.createDeletePanelGroupSlice)(...args),
+            /* Panels */ ...(0, _panelSlice.createPanelSlice)(panels)(...args),
             ...(0, _panelEditorSlice.createPanelEditorSlice)()(...args),
             ...(0, _deletePanelSlice.createDeletePanelSlice)()(...args),
-            ...(0, _discardChangesDialogSlice.createDiscardChangesDialogSlice)(...args),
             ...(0, _duplicatePanelSlice.createDuplicatePanelSlice)()(...args),
+            /* General */ ...(0, _discardChangesDialogSlice.createDiscardChangesDialogSlice)(...args),
+            ...(0, _editJsonDialogSlice.createEditJsonDialogSlice)(...args),
             metadata,
             display,
             defaultTimeRange: {
@@ -101,12 +107,12 @@ function initStore(props) {
             setEditMode: (isEditMode)=>set({
                     isEditMode
                 }),
-            setDashboard: ({ metadata , spec: { display , panels , layouts  }  })=>{
+            setDashboard: ({ metadata , spec: { display , panels ={} , layouts =[]  }  })=>{
                 set((state)=>{
                     state.metadata = metadata;
                     state.display = display;
-                    const { panelGroups , panelGroupOrder  } = (0, _panelGroupSlice.convertLayoutsToPanelGroups)(layouts);
                     state.panels = panels;
+                    const { panelGroups , panelGroupOrder  } = (0, _panelGroupSlice.convertLayoutsToPanelGroups)(layouts);
                     state.panelGroups = panelGroups;
                     state.panelGroupOrder = panelGroupOrder;
                 });

package/dist/cjs/context/DashboardProvider/dashboard-provider-api.js

@@ -34,7 +34,8 @@ _export(exports, {
     usePanelEditor: ()=>usePanelEditor,
     useDeletePanelDialog: ()=>useDeletePanelDialog,
     useDefaultTimeRange: ()=>useDefaultTimeRange,
-    useDiscardChangesConfirmationDialog: ()=>useDiscardChangesConfirmationDialog
+    useDiscardChangesConfirmationDialog: ()=>useDiscardChangesConfirmationDialog,
+    useEditJsonDialog: ()=>useEditJsonDialog
 });
 const _react = require("react");
 const _dashboardProvider = require("./DashboardProvider");
@@ -200,3 +201,11 @@ const selectDiscardChangesConfirmationDialog = ({ discardChangesConfirmationDial
 function useDiscardChangesConfirmationDialog() {
     return (0, _dashboardProvider.useDashboardStore)(selectDiscardChangesConfirmationDialog);
 }
+const selectEditJsonDialog = ({ editJsonDialog , openEditJsonDialog , closeEditJsonDialog  })=>({
+        editJsonDialog,
+        openEditJsonDialog,
+        closeEditJsonDialog
+    });
+function useEditJsonDialog() {
+    return (0, _dashboardProvider.useDashboardStore)(selectEditJsonDialog);
+}

package/dist/cjs/context/DashboardProvider/edit-json-dialog-slice.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, "createEditJsonDialogSlice", {
+    enumerable: true,
+    get: ()=>createEditJsonDialogSlice
+});
+const createEditJsonDialogSlice = (set)=>({
+        openEditJsonDialog () {
+            set((state)=>{
+                state.editJsonDialog = {
+                    isOpen: true
+                };
+            });
+        },
+        closeEditJsonDialog () {
+            set((state)=>{
+                state.editJsonDialog = {
+                    isOpen: false
+                };
+            });
+        }
+    });

package/dist/cjs/context/DatasourceStoreProvider.js

@@ -23,7 +23,7 @@ const _react = require("react");
 const _core = require("@perses-dev/core");
 const _pluginSystem = require("@perses-dev/plugin-system");
 function DatasourceStoreProvider(props) {
-    const { dashboardResource , datasourceApi , children  } = props;
+    const { dashboardResource , datasourceApi , onCreate , children  } = props;
     const { project  } = dashboardResource.metadata;
     const { getPlugin , listPluginMetadata  } = (0, _pluginSystem.usePluginRegistry)();
     const findDatasource = (0, _core.useEvent)(async (selector)=>{
@@ -68,12 +68,18 @@ function DatasourceStoreProvider(props) {
             findDatasource(selector),
             getPlugin('Datasource', kind)
         ]);
-        return plugin.createClient(spec.plugin.spec, {
+        // allows extending client
+        const client = plugin.createClient(spec.plugin.spec, {
             proxyUrl
         });
+        if (onCreate !== undefined) {
+            return onCreate(client);
+        }
+        return client;
     }, [
         findDatasource,
-        getPlugin
+        getPlugin,
+        onCreate
     ]);
     const listDatasourceMetadata = (0, _core.useEvent)(async (datasourcePluginKind)=>{
         const [pluginMetadata, datasources, globalDatasources] = await Promise.all([

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

@@ -0,0 +1,60 @@
+// 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
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    DEFAULT_DASHBOARD_INITIAL_STATE: ()=>DEFAULT_DASHBOARD_INITIAL_STATE,
+    WithDashboard: ()=>WithDashboard
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _dashboards = require("@perses-dev/dashboards");
+// Type guard because storybook types parameters as `any`
+function isWithDashboardParameter(parameter) {
+    return !!parameter && typeof parameter === 'object' && 'props' in parameter;
+}
+const DEFAULT_DASHBOARD_INITIAL_STATE = {
+    dashboardResource: {
+        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: {}
+        }
+    }
+};
+const WithDashboard = (Story, context)=>{
+    const initParameter = context.parameters.withDashboard;
+    const parameter = isWithDashboardParameter(initParameter) ? initParameter : undefined;
+    const props = parameter === null || parameter === void 0 ? void 0 : parameter.props;
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dashboards.DashboardProvider, {
+        initialState: DEFAULT_DASHBOARD_INITIAL_STATE,
+        ...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, {})
+    });
+};