@perses-dev/dashboards 0.0.0-snapshot-scatter-chart-embed-8efdfab → 0.0.0-snapshot-scatterplot-fix-imports-95e1b59

package/dist/cjs/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.js

@@ -28,17 +28,17 @@ const _core = require("@perses-dev/core");
 const _components = require("@perses-dev/components");
 const _context = require("../../context");
 const SaveChangesConfirmationDialog = ()=>{
-    const { saveChangesConfirmationDialog: dialog  } = (0, _context.useSaveChangesConfirmationDialog)();
+    const { saveChangesConfirmationDialog: dialog } = (0, _context.useSaveChangesConfirmationDialog)();
     var _dialog_isSavedDurationModified;
     const isSavedDurationModified = (_dialog_isSavedDurationModified = dialog === null || dialog === void 0 ? void 0 : dialog.isSavedDurationModified) !== null && _dialog_isSavedDurationModified !== void 0 ? _dialog_isSavedDurationModified : true;
     var _dialog_isSavedVariableModified;
     const isSavedVariableModified = (_dialog_isSavedVariableModified = dialog === null || dialog === void 0 ? void 0 : dialog.isSavedVariableModified) !== null && _dialog_isSavedVariableModified !== void 0 ? _dialog_isSavedVariableModified : true;
     const [saveDefaultTimeRange, setSaveDefaultTimeRange] = (0, _react.useState)(isSavedDurationModified);
     const [saveDefaultVariables, setSaveDefaultVariables] = (0, _react.useState)(isSavedVariableModified);
-    const { getSavedVariablesStatus  } = (0, _context.useTemplateVariableActions)();
-    const { modifiedVariableNames  } = getSavedVariablesStatus();
+    const { getSavedVariablesStatus } = (0, _context.useTemplateVariableActions)();
+    const { modifiedVariableNames } = getSavedVariablesStatus();
     const isOpen = dialog !== undefined;
-    const { timeRange  } = (0, _pluginsystem.useTimeRange)();
+    const { timeRange } = (0, _pluginsystem.useTimeRange)();
     const currentTimeRangeText = (0, _core.isRelativeTimeRange)(timeRange) ? `(Last ${timeRange.pastDuration})` : '(Absolute time ranges can not be saved)';
     const saveTimeRangeText = `Save current time range as new default ${currentTimeRangeText}`;
     const saveVariablesText = `Save current variable values as new default (${modifiedVariableNames.length > 0 ? modifiedVariableNames.join(', ') : 'No modified variables'})`;

package/dist/cjs/components/SaveDashboardButton/SaveDashboardButton.js

@@ -26,14 +26,14 @@ const _material = require("@mui/material");
 const _core = require("@perses-dev/core");
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _context = require("../../context");
-const SaveDashboardButton = ({ onSave , isDisabled , variant ='contained'  })=>{
+const SaveDashboardButton = ({ onSave, isDisabled, variant = 'contained' })=>{
     const [isSavingDashboard, setSavingDashboard] = (0, _react.useState)(false);
-    const { dashboard , setDashboard  } = (0, _context.useDashboard)();
-    const { getSavedVariablesStatus , setVariableDefaultValues  } = (0, _context.useTemplateVariableActions)();
-    const { isSavedVariableModified  } = getSavedVariablesStatus();
-    const { timeRange  } = (0, _pluginsystem.useTimeRange)();
-    const { setEditMode  } = (0, _context.useEditMode)();
-    const { openSaveChangesConfirmationDialog , closeSaveChangesConfirmationDialog  } = (0, _context.useSaveChangesConfirmationDialog)();
+    const { dashboard, setDashboard } = (0, _context.useDashboard)();
+    const { getSavedVariablesStatus, setVariableDefaultValues } = (0, _context.useTemplateVariableActions)();
+    const { isSavedVariableModified } = getSavedVariablesStatus();
+    const { timeRange } = (0, _pluginsystem.useTimeRange)();
+    const { setEditMode } = (0, _context.useEditMode)();
+    const { openSaveChangesConfirmationDialog, closeSaveChangesConfirmationDialog } = (0, _context.useSaveChangesConfirmationDialog)();
     const onSaveButtonClick = ()=>{
         const isSavedDurationModified = (0, _core.isRelativeTimeRange)(timeRange) && dashboard.spec.duration !== timeRange.pastDuration;
         // Save dashboard

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

@@ -30,7 +30,7 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-function BuiltinVariableAccordions({ builtinVariableDefinitions  }) {
+function BuiltinVariableAccordions({ builtinVariableDefinitions }) {
     const builtinVariablesBySource = (0, _react.useMemo)(()=>{
         const result = {};
         for (const definition of builtinVariableDefinitions){
@@ -58,10 +58,10 @@ function BuiltinVariableAccordions({ builtinVariableDefinitions  }) {
     }, [
         builtinVariablesBySource
     ]);
-    var _builtinVariablesBySource_source, _v_spec_display_description;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
-        children: sources.map((source)=>{
-            /*#__PURE__*/ return (0, _jsxruntime.jsxs)(_material.Accordion, {
+        children: sources.map((source)=>/*#__PURE__*/ {
+            var _builtinVariablesBySource_source;
+            return (0, _jsxruntime.jsxs)(_material.Accordion, {
                 sx: (theme)=>({
                         '.MuiAccordionSummary-root': {
                             backgroundColor: theme.palette.background.lighter
@@ -110,9 +110,10 @@ function BuiltinVariableAccordions({ builtinVariableDefinitions  }) {
                                         })
                                     }),
                                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableBody, {
-                                        children: ((_builtinVariablesBySource_source = builtinVariablesBySource[source]) !== null && _builtinVariablesBySource_source !== void 0 ? _builtinVariablesBySource_source : []).map((v)=>{
+                                        children: ((_builtinVariablesBySource_source = builtinVariablesBySource[source]) !== null && _builtinVariablesBySource_source !== void 0 ? _builtinVariablesBySource_source : []).map((v)=>/*#__PURE__*/ {
                                             var _v_spec_display;
-                                            /*#__PURE__*/ return (0, _jsxruntime.jsxs)(_material.TableRow, {
+                                            var _v_spec_display_description;
+                                            return (0, _jsxruntime.jsxs)(_material.TableRow, {
                                                 children: [
                                                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {
                                                         component: "th",

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

@@ -34,12 +34,12 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-function EditVariablesButton({ variant ='text' , label ='Variables' , color ='primary' , fullWidth  }) {
+function EditVariablesButton({ variant = 'text', label = 'Variables', color = 'primary', fullWidth }) {
     const [isVariableEditorOpen, setIsVariableEditorOpen] = (0, _react.useState)(false);
     const variableDefinitions = (0, _context.useTemplateVariableDefinitions)();
     const externalVariableDefinitions = (0, _context.useTemplateExternalVariableDefinitions)();
     const builtinVariableDefinitions = (0, _pluginsystem.useBuiltinVariableDefinitions)();
-    const { setVariableDefinitions  } = (0, _context.useTemplateVariableActions)();
+    const { setVariableDefinitions } = (0, _context.useTemplateVariableActions)();
     const openVariableEditor = ()=>{
         setIsVariableEditorOpen(true);
     };

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

@@ -46,7 +46,7 @@ function variableOptionToVariableValue(options) {
     }
     return options.value;
 }
-function TemplateVariable({ name , source  }) {
+function TemplateVariable({ name, source }) {
     var _ctx_definition;
     const ctx = (0, _context.useTemplateVariable)(name, source);
     const kind = (_ctx_definition = ctx.definition) === null || _ctx_definition === void 0 ? void 0 : _ctx_definition.kind;
@@ -73,10 +73,18 @@ function useListVariableState(spec, state, variablesOptionsQuery) {
     const allowMultiple = (spec === null || spec === void 0 ? void 0 : spec.allowMultiple) === true;
     const allowAllValue = (spec === null || spec === void 0 ? void 0 : spec.allowAllValue) === true;
     const sort = spec === null || spec === void 0 ? void 0 : spec.sort;
-    const loading = (0, _react.useMemo)(()=>variablesOptionsQuery.isFetching || false, [
-        variablesOptionsQuery
+    const loading = (0, _react.useMemo)(()=>{
+        var _variablesOptionsQuery_isFetching;
+        return (_variablesOptionsQuery_isFetching = variablesOptionsQuery.isFetching) !== null && _variablesOptionsQuery_isFetching !== void 0 ? _variablesOptionsQuery_isFetching : false;
+    }, [
+        variablesOptionsQuery.isFetching
+    ]);
+    const options = (0, _react.useMemo)(()=>{
+        var _variablesOptionsQuery_data;
+        return (_variablesOptionsQuery_data = variablesOptionsQuery.data) !== null && _variablesOptionsQuery_data !== void 0 ? _variablesOptionsQuery_data : [];
+    }, [
+        variablesOptionsQuery.data
     ]);
-    const options = variablesOptionsQuery.data;
     let value = state === null || state === void 0 ? void 0 : state.value;
     // Make sure value is an array if allowMultiple is true
     if (allowMultiple && !Array.isArray(value)) {
@@ -185,6 +193,7 @@ function useListVariableState(spec, state, variablesOptionsQuery) {
     };
 }
 const StyledPopper = (props)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Popper, {
+        placeholder: undefined,
         ...props,
         sx: {
             minWidth: 'fit-content'
@@ -203,17 +212,17 @@ const getWidthPx = (inputValue, kind)=>{
         return width;
     }
 };
-function ListVariable({ name , source  }) {
+function ListVariable({ name, source }) {
     var _definition_spec_display;
     const ctx = (0, _context.useTemplateVariable)(name, source);
     const definition = ctx.definition;
     const variablesOptionsQuery = (0, _pluginsystem.useListVariablePluginValues)(definition);
-    const { setVariableValue , setVariableLoading , setVariableOptions  } = (0, _context.useTemplateVariableActions)();
-    const { selectedOptions , value , loading , options , viewOptions  } = useListVariableState(definition === null || definition === void 0 ? void 0 : definition.spec, ctx.state, variablesOptionsQuery);
+    const { setVariableValue, setVariableLoading, setVariableOptions } = (0, _context.useTemplateVariableActions)();
+    const { selectedOptions, value, loading, options, viewOptions } = useListVariableState(definition === null || definition === void 0 ? void 0 : definition.spec, ctx.state, variablesOptionsQuery);
     const [inputValue, setInputValue] = (0, _react.useState)('');
     const [inputWidth, setInputWidth] = (0, _react.useState)(_constants.MIN_TEMPLATE_VARIABLE_WIDTH);
     var _definition_spec_display_name;
-    const title = (_definition_spec_display_name = (_definition_spec_display = definition === null || definition === void 0 ? void 0 : definition.spec.display) === null || _definition_spec_display === void 0 ? void 0 : _definition_spec_display.name) !== null && _definition_spec_display_name !== void 0 ? _definition_spec_display_name : name;
+    const title = (_definition_spec_display_name = definition === null || definition === void 0 ? void 0 : (_definition_spec_display = definition.spec.display) === null || _definition_spec_display === void 0 ? void 0 : _definition_spec_display.name) !== null && _definition_spec_display_name !== void 0 ? _definition_spec_display_name : name;
     const allowMultiple = (definition === null || definition === void 0 ? void 0 : definition.spec.allowMultiple) === true;
     const allowAllValue = (definition === null || definition === void 0 ? void 0 : definition.spec.allowAllValue) === true;
     // Update value when changed
@@ -300,7 +309,7 @@ function ListVariable({ name , source  }) {
         ]
     });
 }
-function TextVariable({ name , source  }) {
+function TextVariable({ name, source }) {
     var _definition_spec_display;
     const ctx = (0, _context.useTemplateVariable)(name, source);
     const state = ctx.state;
@@ -308,7 +317,7 @@ function TextVariable({ name , source  }) {
     var _state_value;
     const [tempValue, setTempValue] = (0, _react.useState)((_state_value = state === null || state === void 0 ? void 0 : state.value) !== null && _state_value !== void 0 ? _state_value : '');
     const [inputWidth, setInputWidth] = (0, _react.useState)(getWidthPx(tempValue, 'text'));
-    const { setVariableValue  } = (0, _context.useTemplateVariableActions)();
+    const { setVariableValue } = (0, _context.useTemplateVariableActions)();
     (0, _react.useEffect)(()=>{
         var _state_value;
         setTempValue((_state_value = state === null || state === void 0 ? void 0 : state.value) !== null && _state_value !== void 0 ? _state_value : '');
@@ -326,7 +335,7 @@ function TextVariable({ name , source  }) {
         },
         onBlur: ()=>setVariableValue(name, tempValue, source),
         placeholder: name,
-        label: (_definition_spec_display_name = (_definition_spec_display = definition === null || definition === void 0 ? void 0 : definition.spec.display) === null || _definition_spec_display === void 0 ? void 0 : _definition_spec_display.name) !== null && _definition_spec_display_name !== void 0 ? _definition_spec_display_name : name,
+        label: (_definition_spec_display_name = definition === null || definition === void 0 ? void 0 : (_definition_spec_display = definition.spec.display) === null || _definition_spec_display === void 0 ? void 0 : _definition_spec_display.name) !== null && _definition_spec_display_name !== void 0 ? _definition_spec_display_name : name,
         InputProps: {
             readOnly: (_definition_spec_constant = definition === null || definition === void 0 ? void 0 : definition.spec.constant) !== null && _definition_spec_constant !== void 0 ? _definition_spec_constant : false
         },

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

@@ -84,7 +84,7 @@ function VariableEditor(props) {
         variableDefinitions
     ]);
     const currentEditingVariableDefinition = typeof variableEditIdx === 'number' && variableDefinitions[variableEditIdx];
-    const { openDiscardChangesConfirmationDialog , closeDiscardChangesConfirmationDialog  } = (0, _context.useDiscardChangesConfirmationDialog)();
+    const { openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog } = (0, _context.useDiscardChangesConfirmationDialog)();
     const handleCancel = ()=>{
         if (JSON.stringify(props.variableDefinitions) !== JSON.stringify(variableDefinitions)) {
             openDiscardChangesConfirmationDialog({
@@ -164,7 +164,6 @@ function VariableEditor(props) {
             draft.push(v);
         });
     };
-    var _getVariableLabelByKind, _v_spec_display_description, _getVariableLabelByKind1, _v_spec_display_description1;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             currentEditingVariableDefinition && /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.VariableEditorForm, {
@@ -266,9 +265,10 @@ function VariableEditor(props) {
                                                         })
                                                     }),
                                                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableBody, {
-                                                        children: variableDefinitions.map((v, idx)=>{
+                                                        children: variableDefinitions.map((v, idx)=>/*#__PURE__*/ {
                                                             var _v_spec_display, _v_spec_display1;
-                                                            /*#__PURE__*/ return (0, _jsxruntime.jsxs)(_material.TableRow, {
+                                                            var _getVariableLabelByKind, _v_spec_display_description;
+                                                            return (0, _jsxruntime.jsxs)(_material.TableRow, {
                                                                 children: [
                                                                     /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
                                                                         component: "th",
@@ -346,8 +346,7 @@ function VariableEditor(props) {
                                         })
                                     ]
                                 }),
-                                externalVariableDefinitions && !externalVariableDefinitions.every((v)=>v.definitions.length === 0) && externalVariableDefinitions.map((extVar)=>{
-                                    return extVar.definitions.length > 0 && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Accordion, {
+                                externalVariableDefinitions && !externalVariableDefinitions.every((v)=>v.definitions.length === 0) && externalVariableDefinitions.map((extVar, key)=>extVar.definitions.length > 0 && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Accordion, {
                                         sx: (theme)=>({
                                                 '.MuiAccordionSummary-root': {
                                                     backgroundColor: theme.palette.background.lighter
@@ -428,9 +427,10 @@ function VariableEditor(props) {
                                                                 })
                                                             }),
                                                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableBody, {
-                                                                children: extVar.definitions.map((v)=>{
+                                                                children: extVar.definitions.map((v)=>/*#__PURE__*/ {
                                                                     var _v_spec_display, _v_spec_display1;
-                                                                    /*#__PURE__*/ return (0, _jsxruntime.jsxs)(_material.TableRow, {
+                                                                    var _getVariableLabelByKind, _v_spec_display_description;
+                                                                    return (0, _jsxruntime.jsxs)(_material.TableRow, {
                                                                         children: [
                                                                             /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
                                                                                 component: "th",
@@ -455,10 +455,10 @@ function VariableEditor(props) {
                                                                                 })
                                                                             }),
                                                                             /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
-                                                                                children: (_getVariableLabelByKind1 = getVariableLabelByKind(v.kind)) !== null && _getVariableLabelByKind1 !== void 0 ? _getVariableLabelByKind1 : v.kind
+                                                                                children: (_getVariableLabelByKind = getVariableLabelByKind(v.kind)) !== null && _getVariableLabelByKind !== void 0 ? _getVariableLabelByKind : v.kind
                                                                             }),
                                                                             /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
-                                                                                children: (_v_spec_display_description1 = (_v_spec_display1 = v.spec.display) === null || _v_spec_display1 === void 0 ? void 0 : _v_spec_display1.description) !== null && _v_spec_display_description1 !== void 0 ? _v_spec_display_description1 : ''
+                                                                                children: (_v_spec_display_description = (_v_spec_display1 = v.spec.display) === null || _v_spec_display1 === void 0 ? void 0 : _v_spec_display1.description) !== null && _v_spec_display_description !== void 0 ? _v_spec_display_description : ''
                                                                             }),
                                                                             /*#__PURE__*/ (0, _jsxruntime.jsxs)(TableCell, {
                                                                                 align: "right",
@@ -500,8 +500,7 @@ function VariableEditor(props) {
                                                 })
                                             })
                                         ]
-                                    });
-                                }),
+                                    }, key)),
                                 builtinVariableDefinitions && /*#__PURE__*/ (0, _jsxruntime.jsx)(_BuiltinVariableAccordions.BuiltinVariableAccordions, {
                                     builtinVariableDefinitions: builtinVariableDefinitions
                                 })
@@ -513,11 +512,11 @@ function VariableEditor(props) {
         ]
     });
 }
-const TableCell = (0, _material.styled)(_material.TableCell)(({ theme  })=>({
+const TableCell = (0, _material.styled)(_material.TableCell)(({ theme })=>({
         borderBottom: `solid 1px ${theme.palette.divider}`
     }));
 function VariableName(props) {
-    const { name , state  } = props;
+    const { name, state } = props;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             !(state === null || state === void 0 ? void 0 : state.overridden) && `${name} `,

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

@@ -49,7 +49,7 @@ function TemplateVariableList() {
         ]
     });
 }
-function TemplateVariableListItem({ spec , source  }) {
+function TemplateVariableListItem({ spec, source }) {
     var _ctx_state, _spec_display;
     const ctx = (0, _context.useTemplateVariable)(spec.name, source);
     var _ref, _ref1;

package/dist/cjs/components/index.js

@@ -34,8 +34,6 @@ _export_star(require("./PanelGroupDialog"), exports);
 _export_star(require("./QuerySummaryTable"), exports);
 _export_star(require("./SaveChangesConfirmationDialog"), exports);
 _export_star(require("./SaveDashboardButton"), exports);
-_export_star(require("./TimeRangeControls"), exports);
-_export_star(require("./ToolbarIconButton"), exports);
 _export_star(require("./Variables"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {

package/dist/cjs/constants/styles.js

@@ -21,14 +21,14 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    editButtonStyle: function() {
-        return editButtonStyle;
+    MAX_TEMPLATE_VARIABLE_WIDTH: function() {
+        return MAX_TEMPLATE_VARIABLE_WIDTH;
     },
     MIN_TEMPLATE_VARIABLE_WIDTH: function() {
         return MIN_TEMPLATE_VARIABLE_WIDTH;
     },
-    MAX_TEMPLATE_VARIABLE_WIDTH: function() {
-        return MAX_TEMPLATE_VARIABLE_WIDTH;
+    editButtonStyle: function() {
+        return editButtonStyle;
     }
 });
 const editButtonStyle = {

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

@@ -21,11 +21,11 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    TOOLTIP_TEXT: function() {
-        return TOOLTIP_TEXT;
-    },
     ARIA_LABEL_TEXT: function() {
         return ARIA_LABEL_TEXT;
+    },
+    TOOLTIP_TEXT: function() {
+        return TOOLTIP_TEXT;
     }
 });
 const TOOLTIP_TEXT = {
@@ -36,8 +36,6 @@ const TOOLTIP_TEXT = {
     editDatasources: 'Edit datasources',
     editJson: 'Edit JSON',
     editVariables: 'Edit variables',
-    refreshDashboard: 'Refresh dashboard',
-    refreshDashboardInterval: 'Auto refresh interval',
     viewJson: 'View JSON',
     // Group buttons
     addPanelToGroup: 'Add panel to group',

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

@@ -24,11 +24,11 @@ _export(exports, {
     DashboardContext: function() {
         return DashboardContext;
     },
-    useDashboardStore: function() {
-        return useDashboardStore;
-    },
     DashboardProvider: function() {
         return DashboardProvider;
+    },
+    useDashboardStore: function() {
+        return useDashboardStore;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -63,10 +63,10 @@ function DashboardProvider(props) {
         props
     ]);
     // load plugin to retrieve initial spec if default panel kind is defined
-    const { defaultPluginKinds  } = (0, _pluginsystem.usePluginRegistry)();
+    const { defaultPluginKinds } = (0, _pluginsystem.usePluginRegistry)();
     var _defaultPluginKinds_Panel;
     const defaultPanelKind = (_defaultPluginKinds_Panel = defaultPluginKinds === null || defaultPluginKinds === void 0 ? void 0 : defaultPluginKinds['Panel']) !== null && _defaultPluginKinds_Panel !== void 0 ? _defaultPluginKinds_Panel : '';
-    const { data: plugin  } = (0, _pluginsystem.usePlugin)('Panel', defaultPanelKind);
+    const { data: plugin } = (0, _pluginsystem.usePlugin)('Panel', defaultPanelKind);
     const [store] = (0, _react.useState)(createDashboardStore(props)); // prevent calling createDashboardStore every time it rerenders
     (0, _react.useEffect)(()=>{
         if (plugin === undefined) return;
@@ -88,9 +88,10 @@ function DashboardProvider(props) {
     });
 }
 function initStore(props) {
-    const { initialState: { dashboardResource , isEditMode  }  } = props;
-    const { spec: { display , duration , refreshInterval =_core.DEFAULT_REFRESH_INTERVAL , datasources  } , metadata  } = dashboardResource;
-    let { spec: { layouts , panels  }  } = dashboardResource;
+    const { initialState: { dashboardResource, isEditMode } } = props;
+    const { kind, metadata, spec: { display, duration, refreshInterval = _core.DEFAULT_REFRESH_INTERVAL, datasources } } = dashboardResource;
+    const ttl = 'ttl' in dashboardResource.spec ? dashboardResource.spec.ttl : undefined;
+    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 : {};
@@ -107,26 +108,30 @@ function initStore(props) {
             /* General */ ...(0, _discardchangesdialogslice.createDiscardChangesDialogSlice)(...args),
             ...(0, _editjsondialogslice.createEditJsonDialogSlice)(...args),
             ...(0, _savechangesdialogslice.createSaveChangesDialogSlice)(...args),
+            kind,
             metadata,
             display,
             duration,
             refreshInterval,
             datasources,
+            ttl,
             isEditMode: !!isEditMode,
             setEditMode: (isEditMode)=>set({
                     isEditMode
                 }),
-            setDashboard: ({ metadata , spec: { display , panels ={} , layouts =[] , duration , refreshInterval , datasources ={}  }  })=>{
+            setDashboard: ({ kind, metadata, spec: { display, panels = {}, layouts = [], duration, refreshInterval, datasources = {} } })=>{
                 set((state)=>{
+                    state.kind = kind;
                     state.metadata = metadata;
                     state.display = display;
                     state.panels = panels;
-                    const { panelGroups , panelGroupOrder  } = (0, _panelgroupslice.convertLayoutsToPanelGroups)(layouts);
+                    const { panelGroups, panelGroupOrder } = (0, _panelgroupslice.convertLayoutsToPanelGroups)(layouts);
                     state.panelGroups = panelGroups;
                     state.panelGroupOrder = panelGroupOrder;
                     state.duration = duration;
                     state.refreshInterval = refreshInterval !== null && refreshInterval !== void 0 ? refreshInterval : _core.DEFAULT_REFRESH_INTERVAL;
                     state.datasources = datasources;
+                // TODO: add ttl here to e.g allow edition from JSON view, but probably requires quite some refactoring
                 });
             }
         };

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

@@ -21,11 +21,11 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    generateId: function() {
-        return generateId;
-    },
     createPanelDefinition: function() {
         return createPanelDefinition;
+    },
+    generateId: function() {
+        return generateId;
     }
 });
 function generateId() {

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

@@ -21,29 +21,29 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    useEditMode: function() {
-        return useEditMode;
-    },
     useDashboardActions: function() {
         return useDashboardActions;
     },
-    usePanelGroupIds: function() {
-        return usePanelGroupIds;
+    useDashboardDuration: function() {
+        return useDashboardDuration;
     },
-    useListPanelGroups: function() {
-        return useListPanelGroups;
+    useDeletePanelDialog: function() {
+        return useDeletePanelDialog;
     },
-    usePanelGroup: function() {
-        return usePanelGroup;
+    useDeletePanelGroupDialog: function() {
+        return useDeletePanelGroupDialog;
     },
-    usePanelGroupActions: function() {
-        return usePanelGroupActions;
+    useDiscardChangesConfirmationDialog: function() {
+        return useDiscardChangesConfirmationDialog;
     },
-    usePanelGroupEditor: function() {
-        return usePanelGroupEditor;
+    useEditJsonDialog: function() {
+        return useEditJsonDialog;
     },
-    useDeletePanelGroupDialog: function() {
-        return useDeletePanelGroupDialog;
+    useEditMode: function() {
+        return useEditMode;
+    },
+    useListPanelGroups: function() {
+        return useListPanelGroups;
     },
     usePanel: function() {
         return usePanel;
@@ -54,38 +54,38 @@ _export(exports, {
     usePanelEditor: function() {
         return usePanelEditor;
     },
-    useDeletePanelDialog: function() {
-        return useDeletePanelDialog;
+    usePanelGroup: function() {
+        return usePanelGroup;
     },
-    useDashboardDuration: function() {
-        return useDashboardDuration;
+    usePanelGroupActions: function() {
+        return usePanelGroupActions;
     },
-    useSaveChangesConfirmationDialog: function() {
-        return useSaveChangesConfirmationDialog;
+    usePanelGroupEditor: function() {
+        return usePanelGroupEditor;
     },
-    useDiscardChangesConfirmationDialog: function() {
-        return useDiscardChangesConfirmationDialog;
+    usePanelGroupIds: function() {
+        return usePanelGroupIds;
     },
-    useEditJsonDialog: function() {
-        return useEditJsonDialog;
+    useSaveChangesConfirmationDialog: function() {
+        return useSaveChangesConfirmationDialog;
     }
 });
 const _react = require("react");
 const _DashboardProvider = require("./DashboardProvider");
-const selectEditMode = ({ isEditMode , setEditMode  })=>({
+const selectEditMode = ({ isEditMode, setEditMode })=>({
         isEditMode,
         setEditMode
     });
 function useEditMode() {
     return (0, _DashboardProvider.useDashboardStore)(selectEditMode);
 }
-const selectDashboardActions = ({ setDashboard , openAddPanelGroup , openAddPanel  })=>({
+const selectDashboardActions = ({ setDashboard, openAddPanelGroup, openAddPanel })=>({
         setDashboard,
         openAddPanelGroup,
         openAddPanel
     });
 function useDashboardActions() {
-    const { setDashboard , openAddPanelGroup , openAddPanel  } = (0, _DashboardProvider.useDashboardStore)(selectDashboardActions);
+    const { setDashboard, openAddPanelGroup, openAddPanel } = (0, _DashboardProvider.useDashboardStore)(selectDashboardActions);
     return {
         setDashboard,
         openAddPanelGroup: ()=>openAddPanelGroup(),
@@ -122,15 +122,15 @@ function usePanelGroup(panelGroupId) {
     }
     return panelGroup;
 }
-const selectPanelGroupActions = ({ openEditPanelGroup , deletePanelGroup , openAddPanel , updatePanelGroupLayouts  })=>({
+const selectPanelGroupActions = ({ openEditPanelGroup, deletePanelGroup, openAddPanel, updatePanelGroupLayouts })=>({
         openEditPanelGroup,
         deletePanelGroup,
         openAddPanel,
         updatePanelGroupLayouts
     });
 function usePanelGroupActions(panelGroupId) {
-    const { moveUp , moveDown  } = useMovePanelGroup(panelGroupId);
-    const { openEditPanelGroup , deletePanelGroup , openAddPanel , updatePanelGroupLayouts  } = (0, _DashboardProvider.useDashboardStore)(selectPanelGroupActions);
+    const { moveUp, moveDown } = useMovePanelGroup(panelGroupId);
+    const { openEditPanelGroup, deletePanelGroup, openAddPanel, updatePanelGroupLayouts } = (0, _DashboardProvider.useDashboardStore)(selectPanelGroupActions);
     return {
         openEditPanelGroup: ()=>openEditPanelGroup(panelGroupId),
         deletePanelGroup: ()=>deletePanelGroup(panelGroupId),
@@ -165,14 +165,14 @@ const selectPanelGroupEditor = (state)=>state.panelGroupEditor;
 function usePanelGroupEditor() {
     return (0, _DashboardProvider.useDashboardStore)(selectPanelGroupEditor);
 }
-const selectDeletePanelGroupDialog = ({ deletePanelGroupDialog , openDeletePanelGroupDialog , closeDeletePanelGroupDialog , deletePanelGroup  })=>({
+const selectDeletePanelGroupDialog = ({ deletePanelGroupDialog, openDeletePanelGroupDialog, closeDeletePanelGroupDialog, deletePanelGroup })=>({
         deletePanelGroupDialog,
         openDeletePanelGroupDialog,
         closeDeletePanelGroupDialog,
         deletePanelGroup
     });
 function useDeletePanelGroupDialog() {
-    const { deletePanelGroupDialog , openDeletePanelGroupDialog , closeDeletePanelGroupDialog , deletePanelGroup  } = (0, _DashboardProvider.useDashboardStore)(selectDeletePanelGroupDialog);
+    const { deletePanelGroupDialog, openDeletePanelGroupDialog, closeDeletePanelGroupDialog, deletePanelGroup } = (0, _DashboardProvider.useDashboardStore)(selectDeletePanelGroupDialog);
     return {
         deletePanelGroupDialog,
         deletePanelGroup,
@@ -181,7 +181,7 @@ function useDeletePanelGroupDialog() {
     };
 }
 function usePanel(panelGroupItemId) {
-    const { panelGroupId , panelGroupItemLayoutId: panelGroupLayoutId  } = panelGroupItemId;
+    const { panelGroupId, panelGroupItemLayoutId: panelGroupLayoutId } = panelGroupItemId;
     const panel = (0, _DashboardProvider.useDashboardStore)((0, _react.useCallback)((store)=>{
         var _store_panelGroups_panelGroupId;
         const panelKey = (_store_panelGroups_panelGroupId = store.panelGroups[panelGroupId]) === null || _store_panelGroups_panelGroupId === void 0 ? void 0 : _store_panelGroups_panelGroupId.itemPanelKeys[panelGroupLayoutId];
@@ -196,13 +196,13 @@ function usePanel(panelGroupItemId) {
     }
     return panel;
 }
-const selectPanelActions = ({ openEditPanel , openDeletePanelDialog , duplicatePanel  })=>({
+const selectPanelActions = ({ openEditPanel, openDeletePanelDialog, duplicatePanel })=>({
         openEditPanel,
         openDeletePanelDialog,
         duplicatePanel
     });
 function usePanelActions(panelGroupItemId) {
-    const { openEditPanel , openDeletePanelDialog , duplicatePanel  } = (0, _DashboardProvider.useDashboardStore)(selectPanelActions);
+    const { openEditPanel, openDeletePanelDialog, duplicatePanel } = (0, _DashboardProvider.useDashboardStore)(selectPanelActions);
     return {
         openEditPanel: ()=>openEditPanel(panelGroupItemId),
         openDeletePanelDialog: ()=>openDeletePanelDialog(panelGroupItemId),
@@ -213,7 +213,7 @@ const selectPanelEditor = (state)=>state.panelEditor;
 function usePanelEditor() {
     return (0, _DashboardProvider.useDashboardStore)(selectPanelEditor);
 }
-const selectDeletePanelDialog = ({ deletePanelDialog , deletePanel , closeDeletePanelDialog  })=>({
+const selectDeletePanelDialog = ({ deletePanelDialog, deletePanel, closeDeletePanelDialog })=>({
         deletePanelDialog,
         deletePanel,
         closeDeletePanelDialog
@@ -226,7 +226,7 @@ const selectDashboardDuration = (state)=>state.duration;
 function useDashboardDuration() {
     return (0, _DashboardProvider.useDashboardStore)(selectDashboardDuration);
 }
-const selectSaveChangesConfirmationDialog = ({ saveChangesConfirmationDialog , openSaveChangesConfirmationDialog , closeSaveChangesConfirmationDialog  })=>({
+const selectSaveChangesConfirmationDialog = ({ saveChangesConfirmationDialog, openSaveChangesConfirmationDialog, closeSaveChangesConfirmationDialog })=>({
         saveChangesConfirmationDialog,
         openSaveChangesConfirmationDialog,
         closeSaveChangesConfirmationDialog
@@ -234,7 +234,7 @@ const selectSaveChangesConfirmationDialog = ({ saveChangesConfirmationDialog , o
 function useSaveChangesConfirmationDialog() {
     return (0, _DashboardProvider.useDashboardStore)(selectSaveChangesConfirmationDialog);
 }
-const selectDiscardChangesConfirmationDialog = ({ discardChangesConfirmationDialog , openDiscardChangesConfirmationDialog , closeDiscardChangesConfirmationDialog  })=>({
+const selectDiscardChangesConfirmationDialog = ({ discardChangesConfirmationDialog, openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog })=>({
         discardChangesConfirmationDialog,
         openDiscardChangesConfirmationDialog,
         closeDiscardChangesConfirmationDialog
@@ -242,7 +242,7 @@ const selectDiscardChangesConfirmationDialog = ({ discardChangesConfirmationDial
 function useDiscardChangesConfirmationDialog() {
     return (0, _DashboardProvider.useDashboardStore)(selectDiscardChangesConfirmationDialog);
 }
-const selectEditJsonDialog = ({ editJsonDialog , openEditJsonDialog , closeEditJsonDialog  })=>({
+const selectEditJsonDialog = ({ editJsonDialog, openEditJsonDialog, closeEditJsonDialog })=>({
         editJsonDialog,
         openEditJsonDialog,
         closeEditJsonDialog

package/dist/cjs/context/DashboardProvider/delete-panel-group-slice.js

@@ -22,7 +22,7 @@ Object.defineProperty(exports, "createDeletePanelGroupSlice", {
 });
 const createDeletePanelGroupSlice = (set, get)=>({
         deletePanelGroup (panelGroupId) {
-            const { panelGroups , panelGroupOrder  } = get();
+            const { panelGroups, panelGroupOrder } = get();
             const group = panelGroups[panelGroupId];
             const idIndex = panelGroupOrder.findIndex((id)=>id === panelGroupId);
             if (group === undefined || idIndex === -1) {