@perses-dev/dashboards 0.24.0 → 0.26.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/context/TemplateVariableProvider/TemplateVariableProvider.js

@@ -34,6 +34,7 @@ const _zustand = require("zustand");
 const _immer = require("zustand/middleware/immer");
 const _middleware = require("zustand/middleware");
 const _pluginSystem = require("@perses-dev/plugin-system");
+const _hydrationUtils = require("./hydrationUtils");
 const _queryParams = require("./query-params");
 const TemplateVariableStoreContext = /*#__PURE__*/ (0, _react.createContext)(undefined);
 function useTemplateVariableStoreCtx() {
@@ -123,12 +124,12 @@ function PluginProvider({ children  }) {
 function createTemplateVariableSrvStore({ initialVariableDefinitions =[] , queryParams  }) {
     const initialParams = (0, _queryParams.getInitalValuesFromQueryParameters)(queryParams ? queryParams[0] : {});
     const store = (0, _zustand.createStore)()((0, _middleware.devtools)((0, _immer.immer)((set)=>({
-            variableState: hydrateTemplateVariableStates(initialVariableDefinitions, initialParams),
+            variableState: (0, _hydrationUtils.hydrateTemplateVariableStates)(initialVariableDefinitions, initialParams),
             variableDefinitions: initialVariableDefinitions,
             setVariableDefinitions (definitions) {
                 set((state)=>{
                     state.variableDefinitions = definitions;
-                    state.variableState = hydrateTemplateVariableStates(definitions, initialParams);
+                    state.variableState = (0, _hydrationUtils.hydrateTemplateVariableStates)(definitions, initialParams);
                 });
             },
             setVariableOptions (name, options) {
@@ -187,42 +188,3 @@ function TemplateVariableProvider({ children , initialVariableDefinitions =[]  }
         })
     });
 }
-/** Helpers */ function hydrateTemplateVariableState(variable, initialValue) {
-    const varState = {
-        value: null,
-        loading: false
-    };
-    switch(variable.kind){
-        case 'TextVariable':
-            varState.value = initialValue !== null && initialValue !== void 0 ? initialValue : variable.spec.value;
-            break;
-        case 'ListVariable':
-            varState.options = [];
-            var ref;
-            varState.value = (ref = initialValue !== null && initialValue !== void 0 ? initialValue : variable.spec.default_value) !== null && ref !== void 0 ? ref : null;
-            if (varState.options.length > 0 && !varState.value) {
-                var ref1;
-                var ref2;
-                const firstOptionValue = (ref2 = (ref1 = varState.options[0]) === null || ref1 === void 0 ? void 0 : ref1.value) !== null && ref2 !== void 0 ? ref2 : null;
-                if (firstOptionValue !== null) {
-                    varState.value = variable.spec.allow_multiple ? [
-                        firstOptionValue
-                    ] : firstOptionValue;
-                }
-            }
-            break;
-        default:
-            break;
-    }
-    return varState;
-}
-function hydrateTemplateVariableStates(definitions, initialValues) {
-    const state = {};
-    definitions.forEach((v)=>{
-        const name = v.spec.name;
-        const param = initialValues[name];
-        const initialValue = param ? param : null;
-        state[name] = hydrateTemplateVariableState(v, initialValue);
-    });
-    return state;
-}

package/dist/cjs/context/TemplateVariableProvider/hydrationUtils.js

@@ -0,0 +1,68 @@
+// 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, "hydrateTemplateVariableStates", {
+    enumerable: true,
+    get: ()=>hydrateTemplateVariableStates
+});
+const _pluginSystem = require("@perses-dev/plugin-system");
+function hydrateTemplateVariableState(variable, initialValue) {
+    const varState = {
+        value: null,
+        loading: false
+    };
+    switch(variable.kind){
+        case 'TextVariable':
+            varState.value = initialValue !== null && initialValue !== void 0 ? initialValue : variable.spec.value;
+            break;
+        case 'ListVariable':
+            varState.options = [];
+            var ref;
+            varState.value = (ref = initialValue !== null && initialValue !== void 0 ? initialValue : variable.spec.default_value) !== null && ref !== void 0 ? ref : null;
+            if (varState.options.length > 0 && !varState.value) {
+                var ref1;
+                var ref2;
+                const firstOptionValue = (ref2 = (ref1 = varState.options[0]) === null || ref1 === void 0 ? void 0 : ref1.value) !== null && ref2 !== void 0 ? ref2 : null;
+                if (firstOptionValue !== null) {
+                    varState.value = variable.spec.allow_multiple ? [
+                        firstOptionValue
+                    ] : firstOptionValue;
+                }
+            }
+            // "all" variable handling assumes the value is not in an array. This is
+            // handled properly during internal variable interactions, but it is possible
+            // to end up in a buggy state if the variables are initialized with an "all"
+            // value inside an array. When hydrating variables, normalize this to minimize
+            // bugs.
+            if (Array.isArray(varState.value) && varState.value.length === 1 && varState.value[0] === _pluginSystem.DEFAULT_ALL_VALUE) {
+                varState.value = _pluginSystem.DEFAULT_ALL_VALUE;
+            }
+            break;
+        default:
+            break;
+    }
+    return varState;
+}
+function hydrateTemplateVariableStates(definitions, initialValues) {
+    const state = {};
+    definitions.forEach((v)=>{
+        const name = v.spec.name;
+        const param = initialValues[name];
+        const initialValue = param ? param : null;
+        state[name] = hydrateTemplateVariableState(v, initialValue);
+    });
+    return state;
+}

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

@@ -0,0 +1,39 @@
+// 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, "WithDashboard", {
+    enumerable: true,
+    get: ()=>WithDashboard
+});
+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 isWithDashboardParameter(parameter) {
+    return !!parameter && typeof parameter === 'object' && 'props' in parameter;
+}
+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: {
+            dashboardResource: _constants.EMPTY_DASHBOARD_RESOURCE
+        },
+        ...props,
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(Story, {})
+    });
+};