@perses-dev/dashboards 0.37.2 → 0.39.0

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

@@ -21,10 +21,12 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    useTemplateVariableStoreCtx: ()=>useTemplateVariableStoreCtx,
     useTemplateVariableValues: ()=>useTemplateVariableValues,
     useTemplateVariable: ()=>useTemplateVariable,
     useTemplateVariableActions: ()=>useTemplateVariableActions,
     useTemplateVariableDefinitions: ()=>useTemplateVariableDefinitions,
+    useTemplateExternalVariableDefinitions: ()=>useTemplateExternalVariableDefinitions,
     useTemplateVariableStore: ()=>useTemplateVariableStore,
     TemplateVariableProvider: ()=>TemplateVariableProvider
 });
@@ -54,29 +56,51 @@ function useTemplateVariableStoreCtx() {
 }
 function useTemplateVariableValues(variableNames) {
     const store = useTemplateVariableStoreCtx();
-    const state = (0, _zustand.useStore)(store, (s)=>{
-        const names = variableNames !== null && variableNames !== void 0 ? variableNames : Object.keys(s.variableState);
+    return (0, _zustand.useStore)(store, (s)=>{
         const vars = {};
+        // Collect values of local variables, from the variable state
+        const names = variableNames !== null && variableNames !== void 0 ? variableNames : s.variableDefinitions.map((value)=>value.spec.name);
         names.forEach((name)=>{
-            const varState = s.variableState[name];
-            if (!varState) {
+            const varState = s.variableState.get({
+                name
+            });
+            if (!varState || varState.overridden) {
                 return;
             }
             vars[name] = varState;
         });
+        // Collect values of external variables, from the variable state
+        s.externalVariableDefinitions.forEach((d)=>{
+            const source = d.source;
+            d.definitions.forEach((value)=>{
+                const name = value.spec.name;
+                const varState = s.variableState.get({
+                    name,
+                    source
+                });
+                if (!varState || varState.overridden) {
+                    return;
+                }
+                vars[name] = varState;
+            });
+        });
         return vars;
     }, (left, right)=>{
         return JSON.stringify(left) === JSON.stringify(right);
     });
-    return state;
 }
-function useTemplateVariable(name) {
+function useTemplateVariable(name, source) {
     const store = useTemplateVariableStoreCtx();
     return (0, _zustand.useStore)(store, (s)=>{
-        const variableState = s.variableState[name];
-        const definition = s.variableDefinitions.find((v)=>v.spec.name === name);
+        var ref;
+        const state = s.variableState.get({
+            name,
+            source
+        });
+        const definitions = source ? (ref = s.externalVariableDefinitions.find((v)=>v.source === source)) === null || ref === void 0 ? void 0 : ref.definitions : s.variableDefinitions;
+        const definition = (definitions || []).find((v)=>v.spec.name === name);
         return {
-            state: variableState,
+            state,
             definition
         };
     });
@@ -98,6 +122,10 @@ function useTemplateVariableDefinitions() {
     const store = useTemplateVariableStoreCtx();
     return (0, _zustand.useStore)(store, (s)=>s.variableDefinitions);
 }
+function useTemplateExternalVariableDefinitions() {
+    const store = useTemplateVariableStoreCtx();
+    return (0, _zustand.useStore)(store, (s)=>s.externalVariableDefinitions);
+}
 function useTemplateVariableStore() {
     const store = useTemplateVariableStoreCtx();
     return (0, _zustand.useStore)(store);
@@ -105,6 +133,7 @@ function useTemplateVariableStore() {
 function PluginProvider({ children  }) {
     const originalValues = useTemplateVariableValues();
     const definitions = useTemplateVariableDefinitions();
+    const externalDefinitions = useTemplateExternalVariableDefinitions();
     const values = (0, _react.useMemo)(()=>{
         const contextValues = {};
         // This will loop through all the current variables values
@@ -115,7 +144,7 @@ function PluginProvider({ children  }) {
                 ...originalValues[name]
             };
             if (v.value === _core.DEFAULT_ALL_VALUE) {
-                const definition = definitions.find((d)=>d.spec.name === name);
+                const definition = (0, _utils.findVariableDefinitionByName)(name, definitions, externalDefinitions);
                 // If the variable is a list variable and has a custom all value, then use that value instead
                 if ((definition === null || definition === void 0 ? void 0 : definition.kind) === 'ListVariable' && definition.spec.custom_all_value) {
                     v.value = definition.spec.custom_all_value;
@@ -130,7 +159,8 @@ function PluginProvider({ children  }) {
         return contextValues;
     }, [
         originalValues,
-        definitions
+        definitions,
+        externalDefinitions
     ]);
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.TemplateVariableContext.Provider, {
         value: {
@@ -139,40 +169,50 @@ function PluginProvider({ children  }) {
         children: children
     });
 }
-function createTemplateVariableSrvStore({ initialVariableDefinitions =[] , queryParams  }) {
+function createTemplateVariableSrvStore({ initialVariableDefinitions =[] , externalVariableDefinitions =[] , queryParams  }) {
     const initialParams = (0, _queryParams.getInitalValuesFromQueryParameters)(queryParams ? queryParams[0] : {});
     const store = (0, _zustand.createStore)()((0, _middleware.devtools)((0, _immer.immer)((set, get)=>{
         return {
-            variableState: (0, _hydrationUtils.hydrateTemplateVariableStates)(initialVariableDefinitions, initialParams),
+            variableState: (0, _hydrationUtils.hydrateTemplateVariableStates)(initialVariableDefinitions, initialParams, externalVariableDefinitions),
             variableDefinitions: initialVariableDefinitions,
+            externalVariableDefinitions: externalVariableDefinitions,
             setVariableDefinitions (definitions) {
                 set((state)=>{
                     state.variableDefinitions = definitions;
-                    state.variableState = (0, _hydrationUtils.hydrateTemplateVariableStates)(definitions, initialParams);
+                    state.variableState = (0, _hydrationUtils.hydrateTemplateVariableStates)(definitions, initialParams, externalVariableDefinitions);
                 }, false, '[Variables] setVariableDefinitions' // Used for action name in Redux devtools
                 );
             },
-            setVariableOptions (name, options) {
+            setVariableOptions (name, options, source) {
                 set((state)=>{
-                    const varState = state.variableState[name];
+                    const varState = state.variableState.get({
+                        name,
+                        source
+                    });
                     if (!varState) {
                         return;
                     }
                     varState.options = options;
                 }, false, '[Variables] setVariableOptions');
             },
-            setVariableLoading (name, loading) {
+            setVariableLoading (name, loading, source) {
                 set((state)=>{
-                    const varState = state.variableState[name];
+                    const varState = state.variableState.get({
+                        name,
+                        source
+                    });
                     if (!varState) {
                         return;
                     }
                     varState.loading = loading;
                 }, false, '[Variables] setVariableLoading');
             },
-            setVariableValue: (name, value)=>set((state)=>{
+            setVariableValue: (name, value, source)=>set((state)=>{
                     let val = value;
-                    const varState = state.variableState[name];
+                    const varState = state.variableState.get({
+                        name,
+                        source
+                    });
                     if (!varState) {
                         return;
                     }
@@ -197,8 +237,11 @@ function createTemplateVariableSrvStore({ initialVariableDefinitions =[] , query
                 const variableState = get().variableState;
                 const updatedVariables = (0, _immer1.default)(variableDefinitions, (draft)=>{
                     draft.forEach((variable, index)=>{
+                        const name = variable.spec.name;
                         if (variable.kind === 'ListVariable') {
-                            const currentVariable = variableState[variable.spec.name];
+                            const currentVariable = variableState.get({
+                                name
+                            });
                             if ((currentVariable === null || currentVariable === void 0 ? void 0 : currentVariable.value) !== undefined) {
                                 draft[index] = {
                                     kind: 'ListVariable',
@@ -208,7 +251,9 @@ function createTemplateVariableSrvStore({ initialVariableDefinitions =[] , query
                                 };
                             }
                         } else if (variable.kind === 'TextVariable') {
-                            const currentVariable1 = variableState[variable.spec.name];
+                            const currentVariable1 = variableState.get({
+                                name
+                            });
                             const currentVariableValue = typeof (currentVariable1 === null || currentVariable1 === void 0 ? void 0 : currentVariable1.value) === 'string' ? currentVariable1.value : '';
                             if ((currentVariable1 === null || currentVariable1 === void 0 ? void 0 : currentVariable1.value) !== undefined) {
                                 draft[index] = {
@@ -233,10 +278,12 @@ function createTemplateVariableSrvStore({ initialVariableDefinitions =[] , query
     })));
     return store;
 }
-function TemplateVariableProvider({ children , initialVariableDefinitions =[]  }) {
-    const queryParams = (0, _queryParams.useVariableQueryParams)(initialVariableDefinitions);
+function TemplateVariableProvider({ children , initialVariableDefinitions =[] , externalVariableDefinitions =[]  }) {
+    const allVariableDefs = (0, _utils.mergeVariableDefinitions)(initialVariableDefinitions, externalVariableDefinitions);
+    const queryParams = (0, _queryParams.useVariableQueryParams)(allVariableDefs);
     const [store] = (0, _react.useState)(createTemplateVariableSrvStore({
         initialVariableDefinitions,
+        externalVariableDefinitions,
         queryParams
     }));
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(TemplateVariableStoreContext.Provider, {

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

@@ -19,11 +19,14 @@ Object.defineProperty(exports, "hydrateTemplateVariableStates", {
     get: ()=>hydrateTemplateVariableStates
 });
 const _core = require("@perses-dev/core");
+const _pluginSystem = require("@perses-dev/plugin-system");
 // TODO: move to TemplateVariableProvider/utils.ts
 function hydrateTemplateVariableState(variable, initialValue) {
     const varState = {
         value: null,
-        loading: false
+        loading: false,
+        overriding: false,
+        overridden: false
     };
     switch(variable.kind){
         case 'TextVariable':
@@ -58,13 +61,60 @@ function hydrateTemplateVariableState(variable, initialValue) {
     }
     return varState;
 }
-function hydrateTemplateVariableStates(definitions, initialValues) {
-    const state = {};
-    definitions.forEach((v)=>{
+function hydrateTemplateVariableStates(localDefinitions, initialValues, externalDefinitions = []) {
+    const state = new _pluginSystem.VariableStoreStateMap();
+    // Collect the names used by local definitions
+    let overridingNames = {};
+    localDefinitions.forEach((v)=>{
+        overridingNames[v.spec.name] = true;
+    }, {});
+    // Then populate the external variables state,
+    // taking care of well flagging each name as used, so the overridden state can be filled accordingly.
+    const overriddenNames = {};
+    externalDefinitions.forEach((externalDef)=>{
+        const source = externalDef.source;
+        externalDef.definitions.forEach((v)=>{
+            const name = v.spec.name;
+            const param = initialValues[name];
+            const initialValue = param ? param : null;
+            state.set({
+                source,
+                name
+            }, {
+                ...hydrateTemplateVariableState(v, initialValue),
+                overridden: !!overridingNames[name]
+            });
+            overridingNames[name] = true;
+            overriddenNames[v.spec.name] = true;
+        });
+    }, {});
+    // Then populate the local variables state,
+    // taking care the overriding state is filled according to the names used in external variables.
+    localDefinitions.forEach((v)=>{
         const name = v.spec.name;
         const param = initialValues[name];
         const initialValue = param ? param : null;
-        state[name] = hydrateTemplateVariableState(v, initialValue);
+        state.set({
+            name
+        }, {
+            ...hydrateTemplateVariableState(v, initialValue),
+            overriding: !!overriddenNames[name]
+        });
+    });
+    overridingNames = {};
+    externalDefinitions.slice().reverse().forEach((externalDef)=>{
+        const source = externalDef.source;
+        externalDef.definitions.forEach((v)=>{
+            const name = v.spec.name;
+            const value = state.get({
+                source,
+                name
+            });
+            if (value) {
+                value.overriding = !!overridingNames[name];
+            }
+            overridingNames[name] = true;
+        });
     });
     return state;
 }

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

@@ -14,25 +14,38 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "checkSavedDefaultVariableStatus", {
-    enumerable: true,
-    get: ()=>checkSavedDefaultVariableStatus
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    checkSavedDefaultVariableStatus: ()=>checkSavedDefaultVariableStatus,
+    mergeVariableDefinitions: ()=>mergeVariableDefinitions,
+    findVariableDefinitionByName: ()=>findVariableDefinitionByName,
+    forEachVariableDefinition: ()=>forEachVariableDefinition
 });
 function checkSavedDefaultVariableStatus(definitions, varState) {
     let isSavedVariableModified = false;
     const modifiedVariableNames = [];
     for (const savedVariable of definitions){
+        const name = savedVariable.spec.name;
         if (savedVariable.kind === 'ListVariable') {
-            const currentVariable = varState[savedVariable.spec.name];
+            const currentVariable = varState.get({
+                name
+            });
             if ((currentVariable === null || currentVariable === void 0 ? void 0 : currentVariable.value) !== null && (currentVariable === null || currentVariable === void 0 ? void 0 : currentVariable.value) !== savedVariable.spec.default_value) {
-                modifiedVariableNames.push(savedVariable.spec.name);
+                modifiedVariableNames.push(name);
                 isSavedVariableModified = true;
             }
         } else if (savedVariable.kind === 'TextVariable') {
-            const currentVariable1 = varState[savedVariable.spec.name];
+            const currentVariable1 = varState.get({
+                name
+            });
             const currentVariableValue = typeof (currentVariable1 === null || currentVariable1 === void 0 ? void 0 : currentVariable1.value) === 'string' ? currentVariable1.value : '';
             if (savedVariable.spec.value !== currentVariableValue) {
-                modifiedVariableNames.push(savedVariable.spec.name);
+                modifiedVariableNames.push(name);
                 isSavedVariableModified = true;
             }
         }
@@ -42,3 +55,22 @@ function checkSavedDefaultVariableStatus(definitions, varState) {
         modifiedVariableNames
     };
 }
+function mergeVariableDefinitions(locals, externals) {
+    const pushed = {};
+    const result = [];
+    // Append the value only if it's not already appended
+    forEachVariableDefinition(locals, externals, (value, name)=>{
+        if (!pushed[name]) {
+            result.push(value);
+            pushed[name] = true;
+        }
+    });
+    return result;
+}
+function findVariableDefinitionByName(name, localDefinitions, externalDefinitions) {
+    return mergeVariableDefinitions(localDefinitions, externalDefinitions).find((d)=>d.spec.name === name);
+}
+function forEachVariableDefinition(locals, externals, callbackFn) {
+    locals.forEach((v)=>callbackFn(v, v.spec.name));
+    externals.forEach((ext)=>ext.definitions.forEach((v)=>callbackFn(v, v.spec.name, ext.source)));
+}

package/dist/cjs/test/render.js

@@ -69,7 +69,7 @@ function renderWithContext(ui, options, history) {
                             vertical: 'bottom',
                             horizontal: 'right'
                         },
-                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ChartsThemeProvider, {
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ChartsProvider, {
                             chartsTheme: _components.testChartsTheme,
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.PluginRegistry, {
                                 ...(0, _pluginSystem.mockPluginRegistry)(..._pluginRegistry.MOCK_PLUGINS),

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

@@ -26,6 +26,7 @@ const _components1 = require("../../components");
 const _context = require("../../context");
 const DashboardApp = (props)=>{
     const { dashboardResource , dashboardTitleComponent , emptyDashboardProps , onSave , onDiscard , initialVariableIsSticky , isReadonly ,  } = props;
+    const chartsTheme = (0, _components.useChartsTheme)();
     const { setEditMode  } = (0, _context.useEditMode)();
     const { dashboard , setDashboard  } = (0, _context.useDashboard)();
     const [originalDashboard, setOriginalDashboard] = (0, _react.useState)(undefined);
@@ -93,11 +94,15 @@ const DashboardApp = (props)=>{
                             }
                         })
                     }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.PanelDrawer, {}),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ChartsProvider, {
+                        chartsTheme: chartsTheme,
+                        enablePinning: false,
+                        children: /*#__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.DashboardDiscardChangesConfirmationDialog, {}),
                     /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.EditJsonDialog, {}),
                     /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.SaveChangesConfirmationDialog, {})
                 ]

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

@@ -26,14 +26,14 @@ const _pluginSystem = require("@perses-dev/plugin-system");
 const _context = require("../../context");
 const _dashboardApp = require("./DashboardApp");
 function ViewDashboard(props) {
-    const { dashboardResource , datasourceApi , dashboardTitleComponent , emptyDashboardProps , onSave , onDiscard , initialVariableIsSticky , isReadonly , isEditing , sx , ...others } = props;
+    const { dashboardResource , datasourceApi , externalVariableDefinitions , 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 : _core.DEFAULT_DASHBOARD_DURATION;
     var _refreshInterval;
-    const dashhboardRefreshInterval = (_refreshInterval = spec.refreshInterval) !== null && _refreshInterval !== void 0 ? _refreshInterval : _core.DEFAULT_REFRESH_INTERVAL;
+    const dashboardRefreshInterval = (_refreshInterval = spec.refreshInterval) !== null && _refreshInterval !== void 0 ? _refreshInterval : _core.DEFAULT_REFRESH_INTERVAL;
     const initialTimeRange = (0, _pluginSystem.useInitialTimeRange)(dashboardDuration);
-    const initialRefreshInterval = (0, _pluginSystem.useInitialRefreshInterval)(dashhboardRefreshInterval);
+    const initialRefreshInterval = (0, _pluginSystem.useInitialRefreshInterval)(dashboardRefreshInterval);
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.DatasourceStoreProvider, {
         dashboardResource: dashboardResource,
         datasourceApi: datasourceApi,
@@ -48,6 +48,7 @@ function ViewDashboard(props) {
                 enabledURLParams: true,
                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.TemplateVariableProvider, {
                     initialVariableDefinitions: spec.variables,
+                    externalVariableDefinitions: externalVariableDefinitions,
                     children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
                         sx: (0, _components.combineSx)({
                             display: 'flex',

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { BoxProps } from '@mui/material';
 import { EmptyDashboardProps } from '../EmptyDashboard';
+import { PanelOptions } from '../Panel';
 export declare type DashboardProps = BoxProps & {
     /**
      * Props for `EmptyDashboard` component that will be rendered when the dashboard
@@ -8,9 +9,10 @@ export declare type DashboardProps = BoxProps & {
      * be used.
      */
     emptyDashboardProps?: EmptyDashboardProps;
+    panelOptions?: PanelOptions;
 };
 /**
  * Renders a Dashboard for the provided Dashboard spec.
  */
-export declare function Dashboard({ emptyDashboardProps, ...boxProps }: DashboardProps): JSX.Element;
+export declare function Dashboard({ emptyDashboardProps, panelOptions, ...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;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"}
+{"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;AACxE,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,oBAAY,cAAc,GAAG,QAAQ,GAAG;IACtC;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAC1C,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B,CAAC;AAEF;;GAEG;AACH,wBAAgB,SAAS,CAAC,EAAE,mBAAmB,EAAE,YAAY,EAAE,GAAG,QAAQ,EAAE,EAAE,cAAc,eAmB3F"}

package/dist/components/Dashboard/Dashboard.js

@@ -18,7 +18,7 @@ import { GridLayout } from '../GridLayout';
 import { EmptyDashboard } from '../EmptyDashboard';
 /**
  * Renders a Dashboard for the provided Dashboard spec.
- */ export function Dashboard({ emptyDashboardProps , ...boxProps }) {
+ */ export function Dashboard({ emptyDashboardProps , panelOptions , ...boxProps }) {
     const panelGroupIds = usePanelGroupIds();
     const isEmpty = !panelGroupIds.length;
     return /*#__PURE__*/ _jsx(Box, {
@@ -40,7 +40,8 @@ import { EmptyDashboard } from '../EmptyDashboard';
                     })
                 }),
                 !isEmpty && panelGroupIds.map((panelGroupId)=>/*#__PURE__*/ _jsx(GridLayout, {
-                        panelGroupId: panelGroupId
+                        panelGroupId: panelGroupId,
+                        panelOptions: panelOptions
                     }, 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';\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"}
+{"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';\nimport { PanelOptions } from '../Panel';\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  panelOptions?: PanelOptions;\n};\n\n/**\n * Renders a Dashboard for the provided Dashboard spec.\n */\nexport function Dashboard({ emptyDashboardProps, panelOptions, ...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 &&\n          panelGroupIds.map((panelGroupId) => (\n            <GridLayout key={panelGroupId} panelGroupId={panelGroupId} panelOptions={panelOptions} />\n          ))}\n      </ErrorBoundary>\n    </Box>\n  );\n}\n"],"names":["Box","ErrorBoundary","ErrorAlert","usePanelGroupIds","GridLayout","EmptyDashboard","Dashboard","emptyDashboardProps","panelOptions","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;AAYxE;;CAEC,GACD,OAAO,SAASC,SAAS,CAAC,EAAEC,mBAAmB,CAAA,EAAEC,YAAY,CAAA,EAAE,GAAGC,QAAQ,EAAkB,EAAE;IAC5F,MAAMC,aAAa,GAAGP,gBAAgB,EAAE,AAAC;IACzC,MAAMQ,OAAO,GAAG,CAACD,aAAa,CAACE,MAAM,AAAC;IAEtC,qBACE,KAACZ,GAAG;QAAE,GAAGS,QAAQ;QAAEI,EAAE,EAAE;YAAEC,MAAM,EAAE,MAAM;SAAE;kBACvC,cAAA,MAACb,aAAa;YAACc,iBAAiB,EAAEb,UAAU;;gBACzCS,OAAO,kBACN,KAACX,GAAG;oBAACa,EAAE,EAAE;wBAAEC,MAAM,EAAE,MAAM;wBAAEE,OAAO,EAAE,MAAM;wBAAEC,UAAU,EAAE,QAAQ;qBAAE;8BAChE,cAAA,KAACZ,cAAc;wBAAE,GAAGE,mBAAmB;sBAAI;kBACvC,AACP;gBACA,CAACI,OAAO,IACPD,aAAa,CAACQ,GAAG,CAAC,CAACC,YAAY,iBAC7B,KAACf,UAAU;wBAAoBe,YAAY,EAAEA,YAAY;wBAAEX,YAAY,EAAEA,YAAY;uBAApEW,YAAY,CAA4D,AAC1F,CAAC;;UACU;MACZ,CACN;AACJ,CAAC"}

package/dist/components/DiscardChangesConfirmationDialog/DiscardChangesConfirmationDialog.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-export declare const DiscardChangesConfirmationDialog: () => JSX.Element;
+export declare const DashboardDiscardChangesConfirmationDialog: () => JSX.Element | null;
 //# sourceMappingURL=DiscardChangesConfirmationDialog.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DiscardChangesConfirmationDialog.d.ts","sourceRoot":"","sources":["../../../src/components/DiscardChangesConfirmationDialog/DiscardChangesConfirmationDialog.tsx"],"names":[],"mappings":";AAiBA,eAAO,MAAM,gCAAgC,mBAoC5C,CAAC"}
+{"version":3,"file":"DiscardChangesConfirmationDialog.d.ts","sourceRoot":"","sources":["../../../src/components/DiscardChangesConfirmationDialog/DiscardChangesConfirmationDialog.tsx"],"names":[],"mappings":";AAgBA,eAAO,MAAM,yCAAyC,0BAgBrD,CAAC"}

package/dist/components/DiscardChangesConfirmationDialog/DiscardChangesConfirmationDialog.js

@@ -10,54 +10,19 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';
-import CloseIcon from 'mdi-material-ui/Close';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DiscardChangesConfirmationDialog } from '@perses-dev/components';
 import { useDiscardChangesConfirmationDialog } from '../../context';
-export const DiscardChangesConfirmationDialog = ()=>{
+export const DashboardDiscardChangesConfirmationDialog = ()=>{
     const { discardChangesConfirmationDialog: dialog  } = useDiscardChangesConfirmationDialog();
-    const isOpen = dialog !== undefined;
-    return /*#__PURE__*/ _jsx(Dialog, {
-        open: isOpen,
-        children: dialog !== undefined && /*#__PURE__*/ _jsxs(_Fragment, {
-            children: [
-                /*#__PURE__*/ _jsx(DialogTitle, {
-                    children: "Discard Changes"
-                }),
-                /*#__PURE__*/ _jsx(IconButton, {
-                    "aria-label": "Close",
-                    onClick: dialog.onCancel,
-                    sx: (theme)=>({
-                            position: 'absolute',
-                            top: theme.spacing(0.5),
-                            right: theme.spacing(0.5)
-                        }),
-                    children: /*#__PURE__*/ _jsx(CloseIcon, {})
-                }),
-                /*#__PURE__*/ _jsx(DialogContent, {
-                    dividers: true,
-                    sx: {
-                        width: '500px'
-                    },
-                    children: dialog.description || 'You have unsaved changes in this dashboard. Are you sure you want to discard these changes? Changes cannot be recovered.'
-                }),
-                /*#__PURE__*/ _jsxs(DialogActions, {
-                    children: [
-                        /*#__PURE__*/ _jsx(Button, {
-                            variant: "contained",
-                            onClick: dialog.onDiscardChanges,
-                            children: "Discard Changes"
-                        }),
-                        /*#__PURE__*/ _jsx(Button, {
-                            variant: "outlined",
-                            color: "secondary",
-                            onClick: dialog.onCancel,
-                            children: "Cancel"
-                        })
-                    ]
-                })
-            ]
-        })
+    if (dialog === undefined) {
+        return null;
+    }
+    return /*#__PURE__*/ _jsx(DiscardChangesConfirmationDialog, {
+        description: dialog.description || 'You have unsaved changes in this dashboard. Are you sure you want to discard these changes? Changes cannot be recovered.',
+        isOpen: true,
+        onCancel: dialog.onCancel,
+        onDiscardChanges: dialog.onDiscardChanges
     });
 };
 

package/dist/components/DiscardChangesConfirmationDialog/DiscardChangesConfirmationDialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DiscardChangesConfirmationDialog/DiscardChangesConfirmationDialog.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 { IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { useDiscardChangesConfirmationDialog } from '../../context';\n\nexport const DiscardChangesConfirmationDialog = () => {\n  const { discardChangesConfirmationDialog: dialog } = useDiscardChangesConfirmationDialog();\n  const isOpen = dialog !== undefined;\n\n  return (\n    <Dialog open={isOpen}>\n      {dialog !== undefined && (\n        <>\n          <DialogTitle>Discard Changes</DialogTitle>\n          <IconButton\n            aria-label=\"Close\"\n            onClick={dialog.onCancel}\n            sx={(theme) => ({\n              position: 'absolute',\n              top: theme.spacing(0.5),\n              right: theme.spacing(0.5),\n            })}\n          >\n            <CloseIcon />\n          </IconButton>\n          <DialogContent dividers sx={{ width: '500px' }}>\n            {dialog.description ||\n              'You have unsaved changes in this dashboard. Are you sure you want to discard these changes? Changes cannot be recovered.'}\n          </DialogContent>\n          <DialogActions>\n            <Button variant=\"contained\" onClick={dialog.onDiscardChanges}>\n              Discard Changes\n            </Button>\n            <Button variant=\"outlined\" color=\"secondary\" onClick={dialog.onCancel}>\n              Cancel\n            </Button>\n          </DialogActions>\n        </>\n      )}\n    </Dialog>\n  );\n};\n"],"names":["IconButton","Dialog","DialogTitle","DialogContent","DialogActions","Button","CloseIcon","useDiscardChangesConfirmationDialog","DiscardChangesConfirmationDialog","discardChangesConfirmationDialog","dialog","isOpen","undefined","open","aria-label","onClick","onCancel","sx","theme","position","top","spacing","right","dividers","width","description","variant","onDiscardChanges","color"],"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,UAAU,EAAEC,MAAM,EAAEC,WAAW,EAAEC,aAAa,EAAEC,aAAa,EAAEC,MAAM,QAAQ,eAAe,CAAC;AACtG,OAAOC,SAAS,MAAM,uBAAuB,CAAC;AAC9C,SAASC,mCAAmC,QAAQ,eAAe,CAAC;AAEpE,OAAO,MAAMC,gCAAgC,GAAG,IAAM;IACpD,MAAM,EAAEC,gCAAgC,EAAEC,MAAM,CAAA,EAAE,GAAGH,mCAAmC,EAAE,AAAC;IAC3F,MAAMI,MAAM,GAAGD,MAAM,KAAKE,SAAS,AAAC;IAEpC,qBACE,KAACX,MAAM;QAACY,IAAI,EAAEF,MAAM;kBACjBD,MAAM,KAAKE,SAAS,kBACnB;;8BACE,KAACV,WAAW;8BAAC,iBAAe;kBAAc;8BAC1C,KAACF,UAAU;oBACTc,YAAU,EAAC,OAAO;oBAClBC,OAAO,EAAEL,MAAM,CAACM,QAAQ;oBACxBC,EAAE,EAAE,CAACC,KAAK,GAAM,CAAA;4BACdC,QAAQ,EAAE,UAAU;4BACpBC,GAAG,EAAEF,KAAK,CAACG,OAAO,CAAC,GAAG,CAAC;4BACvBC,KAAK,EAAEJ,KAAK,CAACG,OAAO,CAAC,GAAG,CAAC;yBAC1B,CAAA,AAAC;8BAEF,cAAA,KAACf,SAAS,KAAG;kBACF;8BACb,KAACH,aAAa;oBAACoB,QAAQ;oBAACN,EAAE,EAAE;wBAAEO,KAAK,EAAE,OAAO;qBAAE;8BAC3Cd,MAAM,CAACe,WAAW,IACjB,0HAA0H;kBAC9G;8BAChB,MAACrB,aAAa;;sCACZ,KAACC,MAAM;4BAACqB,OAAO,EAAC,WAAW;4BAACX,OAAO,EAAEL,MAAM,CAACiB,gBAAgB;sCAAE,iBAE9D;0BAAS;sCACT,KAACtB,MAAM;4BAACqB,OAAO,EAAC,UAAU;4BAACE,KAAK,EAAC,WAAW;4BAACb,OAAO,EAAEL,MAAM,CAACM,QAAQ;sCAAE,QAEvE;0BAAS;;kBACK;;UACf,AACJ;MACM,CACT;AACJ,CAAC,CAAC"}
+{"version":3,"sources":["../../../src/components/DiscardChangesConfirmationDialog/DiscardChangesConfirmationDialog.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 { DiscardChangesConfirmationDialog } from '@perses-dev/components';\nimport { useDiscardChangesConfirmationDialog } from '../../context';\n\nexport const DashboardDiscardChangesConfirmationDialog = () => {\n  const { discardChangesConfirmationDialog: dialog } = useDiscardChangesConfirmationDialog();\n  if (dialog === undefined) {\n    return null;\n  }\n  return (\n    <DiscardChangesConfirmationDialog\n      description={\n        dialog.description ||\n        'You have unsaved changes in this dashboard. Are you sure you want to discard these changes? Changes cannot be recovered.'\n      }\n      isOpen={true}\n      onCancel={dialog.onCancel}\n      onDiscardChanges={dialog.onDiscardChanges}\n    />\n  );\n};\n"],"names":["DiscardChangesConfirmationDialog","useDiscardChangesConfirmationDialog","DashboardDiscardChangesConfirmationDialog","discardChangesConfirmationDialog","dialog","undefined","description","isOpen","onCancel","onDiscardChanges"],"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,gCAAgC,QAAQ,wBAAwB,CAAC;AAC1E,SAASC,mCAAmC,QAAQ,eAAe,CAAC;AAEpE,OAAO,MAAMC,yCAAyC,GAAG,IAAM;IAC7D,MAAM,EAAEC,gCAAgC,EAAEC,MAAM,CAAA,EAAE,GAAGH,mCAAmC,EAAE,AAAC;IAC3F,IAAIG,MAAM,KAAKC,SAAS,EAAE;QACxB,OAAO,IAAI,CAAC;IACd,CAAC;IACD,qBACE,KAACL,gCAAgC;QAC/BM,WAAW,EACTF,MAAM,CAACE,WAAW,IAClB,0HAA0H;QAE5HC,MAAM,EAAE,IAAI;QACZC,QAAQ,EAAEJ,MAAM,CAACI,QAAQ;QACzBC,gBAAgB,EAAEL,MAAM,CAACK,gBAAgB;MACzC,CACF;AACJ,CAAC,CAAC"}

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

@@ -1,8 +1,10 @@
 /// <reference types="react" />
 import { PanelGroupItemId } from '../../context';
+import { PanelOptions } from '../Panel';
 export interface GridItemContentProps {
     panelGroupItemId: PanelGroupItemId;
     width: number;
+    panelOptions?: PanelOptions;
 }
 /**
  * Resolves the reference to panel content in a GridItemDefinition and renders the panel.

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

@@ -1 +1 @@
-{"version":3,"file":"GridItemContent.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridItemContent.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,gBAAgB,EAA0C,MAAM,eAAe,CAAC;AAIzF,MAAM,WAAW,oBAAoB;IACnC,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAkC1D"}
+{"version":3,"file":"GridItemContent.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridItemContent.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,gBAAgB,EAA0C,MAAM,eAAe,CAAC;AAGzF,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,MAAM,WAAW,oBAAoB;IACnC,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAuC1D"}

package/dist/components/GridLayout/GridItemContent.js

@@ -48,7 +48,9 @@ import { Panel } from '../Panel/Panel';
         },
         children: /*#__PURE__*/ _jsx(Panel, {
             definition: panelDefinition,
-            editHandlers: editHandlers
+            editHandlers: editHandlers,
+            panelOptions: props.panelOptions,
+            panelGroupItemId: panelGroupItemId
         })
     });
 }