@perses-dev/dashboards 0.0.0-snapshot-saving-defaults-refinements-1b25cec → 0.0.0-snapshot-time-chart-rewrite-4667058

package/dist/cjs/components/DashboardToolbar/DashboardToolbar.js

@@ -34,8 +34,8 @@ const _dashboardStickyToolbar = require("../DashboardStickyToolbar");
 const DashboardToolbar = (props)=>{
     const { dashboardName , dashboardTitleComponent , initialVariableIsSticky , isReadonly , onEditButtonClick , onCancelButtonClick , onSave ,  } = props;
     const { isEditMode  } = (0, _context.useEditMode)();
-    const isBiggerThanMd = (0, _material.useMediaQuery)((0, _material.useTheme)().breakpoints.up('md'));
     const isBiggerThanSm = (0, _material.useMediaQuery)((0, _material.useTheme)().breakpoints.up('sm'));
+    const isBiggerThanLg = (0, _material.useMediaQuery)((0, _material.useTheme)().breakpoints.up('lg'));
     const dashboardTitle = dashboardTitleComponent ? dashboardTitleComponent : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
         variant: "h2",
         children: dashboardName
@@ -85,7 +85,7 @@ const DashboardToolbar = (props)=>{
                         display: 'flex',
                         width: '100%',
                         alignItems: 'start',
-                        padding: (theme)=>theme.spacing(1, 2, 2, 2)
+                        padding: (theme)=>theme.spacing(1, 2)
                     },
                     children: [
                         /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
@@ -93,54 +93,37 @@ const DashboardToolbar = (props)=>{
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dashboardStickyToolbar.DashboardStickyToolbar, {
                                 initialVariableIsSticky: initialVariableIsSticky,
                                 sx: {
-                                    backgroundColor: ({ palette  })=>palette.mode === 'dark' ? palette.background.default : palette.background.paper
+                                    backgroundColor: ({ palette  })=>palette.background.default
                                 }
                             })
                         }),
-                        isBiggerThanMd ? // On bigger screens, make it one row
                         /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                            ml: "auto",
                             direction: "row",
-                            spacing: 1,
-                            marginLeft: "auto",
-                            sx: {
-                                whiteSpace: 'nowrap'
-                            },
-                            children: [
-                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variables.EditVariablesButton, {}),
-                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_addPanelButton.AddPanelButton, {}),
-                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_addGroupButton.AddGroupButton, {}),
-                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeRangeControls.TimeRangeControls, {}),
-                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_downloadButton.DownloadButton, {}),
-                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_editJsonButton.EditJsonButton, {})
-                            ]
-                        }) : // On smaller screens, make it two rows
-                        /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
-                            spacing: 1,
+                            flexWrap: isBiggerThanLg ? 'nowrap' : 'wrap-reverse',
+                            justifyContent: "end",
                             children: [
                                 /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
                                     direction: "row",
                                     spacing: 1,
-                                    marginLeft: "auto",
-                                    sx: {
-                                        whiteSpace: 'nowrap'
-                                    },
+                                    ml: 1,
+                                    mb: 1,
+                                    whiteSpace: "nowrap",
                                     children: [
-                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeRangeControls.TimeRangeControls, {}),
-                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_downloadButton.DownloadButton, {}),
-                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_editJsonButton.EditJsonButton, {})
+                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variables.EditVariablesButton, {}),
+                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_addPanelButton.AddPanelButton, {}),
+                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_addGroupButton.AddGroupButton, {})
                                     ]
                                 }),
                                 /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
                                     direction: "row",
                                     spacing: 1,
-                                    marginLeft: "auto",
-                                    sx: {
-                                        whiteSpace: 'nowrap'
-                                    },
+                                    ml: 1,
+                                    mb: 1,
                                     children: [
-                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variables.EditVariablesButton, {}),
-                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_addPanelButton.AddPanelButton, {}),
-                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_addGroupButton.AddGroupButton, {})
+                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeRangeControls.TimeRangeControls, {}),
+                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_downloadButton.DownloadButton, {}),
+                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_editJsonButton.EditJsonButton, {})
                                     ]
                                 })
                             ]
@@ -181,7 +164,7 @@ const DashboardToolbar = (props)=>{
                         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dashboardStickyToolbar.DashboardStickyToolbar, {
                             initialVariableIsSticky: initialVariableIsSticky,
                             sx: {
-                                backgroundColor: ({ palette  })=>palette.mode === 'dark' ? palette.background.default : palette.background.paper
+                                backgroundColor: ({ palette  })=>palette.background.default
                             }
                         })
                     })

package/dist/cjs/components/EditJsonDialog/EditJsonDialog.js

@@ -43,7 +43,7 @@ const EditJsonDialog = ()=>{
 };
 const EditJsonDialogForm = ()=>{
     const { closeEditJsonDialog  } = (0, _dashboardProvider.useEditJsonDialog)();
-    const { setTimeRange  } = (0, _pluginSystem.useTimeRange)();
+    const { setTimeRange , setRefreshInterval  } = (0, _pluginSystem.useTimeRange)();
     const { dashboard , setDashboard  } = (0, _useDashboard.useDashboard)();
     const [draftDashboard, setDraftDashboard] = (0, _react.useState)(dashboard);
     const handleApply = (e)=>{
@@ -52,6 +52,7 @@ const EditJsonDialogForm = ()=>{
         setTimeRange({
             pastDuration: draftDashboard.spec.duration
         });
+        setRefreshInterval(draftDashboard.spec.refreshInterval);
         closeEditJsonDialog();
     };
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_components.Dialog.Form, {

package/dist/cjs/components/GridLayout/GridTitle.js

@@ -28,6 +28,7 @@ const _arrowUp = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/A
 const _arrowDown = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ArrowDown"));
 const _deleteOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/DeleteOutline"));
 const _components = require("@perses-dev/components");
+const _pluginSystem = require("@perses-dev/plugin-system");
 const _constants = require("../../constants");
 const _context = require("../../context");
 function _interopRequireDefault(obj) {
@@ -36,7 +37,8 @@ function _interopRequireDefault(obj) {
     };
 }
 function GridTitle(props) {
-    const { panelGroupId , title , collapse  } = props;
+    const { panelGroupId , title: rawTitle , collapse  } = props;
+    const title = (0, _pluginSystem.useReplaceVariablesInString)(rawTitle);
     const { openAddPanel , openEditPanelGroup , moveUp , moveDown  } = (0, _context.usePanelGroupActions)(panelGroupId);
     const { openDeletePanelGroupDialog  } = (0, _context.useDeletePanelGroupDialog)();
     const { isEditMode  } = (0, _context.useEditMode)();
@@ -52,7 +54,7 @@ function GridTitle(props) {
             alignItems: 'center',
             padding: (theme)=>theme.spacing(1),
             cursor: collapse ? 'pointer' : 'auto',
-            backgroundColor: ({ palette  })=>palette.mode === 'dark' ? palette.background.paper : palette.background.default
+            backgroundColor: ({ palette  })=>palette.background.paper
         },
         "data-testid": "panel-group-header",
         children: collapse ? /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {

package/dist/cjs/components/Panel/PanelHeader.js

@@ -26,15 +26,18 @@ const _pencilOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-materia
 const _deleteOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/DeleteOutline"));
 const _dragVertical = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/DragVertical"));
 const _contentCopy = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ContentCopy"));
+const _pluginSystem = require("@perses-dev/plugin-system");
 const _constants = require("../../constants");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-function PanelHeader({ id , title , description , editHandlers , sx , ...rest }) {
+function PanelHeader({ id , title: rawTitle , description: rawDescription , editHandlers , sx , ...rest }) {
     const titleElementId = `${id}-title`;
     const descriptionTooltipId = `${id}-description`;
+    const title = (0, _pluginSystem.useReplaceVariablesInString)(rawTitle);
+    const description = (0, _pluginSystem.useReplaceVariablesInString)(rawDescription);
     let actions = undefined;
     if (editHandlers !== undefined) {
         // If there are edit handlers, always just show the edit buttons
@@ -94,25 +97,6 @@ function PanelHeader({ id , title , description , editHandlers , sx , ...rest })
                 })
             ]
         });
-    } else if (description !== undefined) {
-        // If there aren't edit handlers and we have a description, show a button with a tooltip for the panel description
-        actions = /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
-            id: descriptionTooltipId,
-            description: description,
-            enterDelay: 100,
-            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
-                "aria-label": "panel description",
-                size: "small",
-                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_informationOutline.default, {
-                    "aria-describedby": "info-tooltip",
-                    "aria-hidden": false,
-                    fontSize: "inherit",
-                    sx: {
-                        color: (theme)=>theme.palette.grey[700]
-                    }
-                })
-            })
-        });
     }
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.CardHeader, {
         id: id,
@@ -120,19 +104,41 @@ function PanelHeader({ id , title , description , editHandlers , sx , ...rest })
         "aria-labelledby": titleElementId,
         "aria-describedby": descriptionTooltipId,
         disableTypography: true,
-        title: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
-            id: titleElementId,
-            variant: "subtitle1",
-            sx: {
-                // `minHeight` guarantees that the header has the correct height
-                // when there is no title (i.e. in the preview)
-                lineHeight: '24px',
-                minHeight: '24px',
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis'
-            },
-            children: title
+        title: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+            direction: "row",
+            children: [
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                    id: titleElementId,
+                    variant: "subtitle1",
+                    sx: {
+                        // `minHeight` guarantees that the header has the correct height
+                        // when there is no title (i.e. in the preview)
+                        lineHeight: '24px',
+                        minHeight: '24px',
+                        whiteSpace: 'nowrap',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis'
+                    },
+                    children: title
+                }),
+                description !== undefined && description.trim().length > 0 && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
+                    id: descriptionTooltipId,
+                    description: description,
+                    enterDelay: 100,
+                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
+                        "aria-label": "panel description",
+                        size: "small",
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_informationOutline.default, {
+                            "aria-describedby": "info-tooltip",
+                            "aria-hidden": false,
+                            fontSize: "inherit",
+                            sx: {
+                                color: (theme)=>theme.palette.text.secondary
+                            }
+                        })
+                    })
+                })
+            ]
         }),
         action: /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderActionWrapper, {
             direction: "row",

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

@@ -26,11 +26,15 @@ const _core = require("@perses-dev/core");
 const _components = require("@perses-dev/components");
 const _context = require("../../context");
 const SaveChangesConfirmationDialog = ()=>{
-    const [saveDefaultTimeRange, setSaveDefaultTimeRange] = (0, _react.useState)(true);
-    const [saveDefaultVariables, setSaveDefaultVariables] = (0, _react.useState)(true);
-    const { getSavedVariablesStatus  } = (0, _context.useTemplateVariableActions)();
-    const { isSavedVariableModified , modifiedVariableNames  } = getSavedVariablesStatus();
     const { saveChangesConfirmationDialog: dialog  } = (0, _context.useSaveChangesConfirmationDialog)();
+    var ref;
+    const isSavedDurationModified = (ref = dialog === null || dialog === void 0 ? void 0 : dialog.isSavedDurationModified) !== null && ref !== void 0 ? ref : true;
+    var ref1;
+    const isSavedVariableModified = (ref1 = dialog === null || dialog === void 0 ? void 0 : dialog.isSavedVariableModified) !== null && ref1 !== void 0 ? ref1 : true;
+    const [saveDefaultTimeRange, setSaveDefaultTimeRange] = (0, _react.useState)(isSavedDurationModified);
+    const [saveDefaultVariables, setSaveDefaultVariables] = (0, _react.useState)(isSavedVariableModified);
+    const { getSavedVariablesStatus  } = (0, _context.useTemplateVariableActions)();
+    const { modifiedVariableNames  } = getSavedVariablesStatus();
     const isOpen = dialog !== undefined;
     const { timeRange  } = (0, _pluginSystem.useTimeRange)();
     const currentTimeRangeText = (0, _core.isRelativeTimeRange)(timeRange) ? `(Last ${timeRange.pastDuration})` : '(Absolute time ranges can not be saved)';
@@ -54,8 +58,8 @@ const SaveChangesConfirmationDialog = ()=>{
                             children: [
                                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.FormControlLabel, {
                                     control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Checkbox, {
-                                        disabled: !(0, _core.isRelativeTimeRange)(timeRange),
-                                        checked: saveDefaultTimeRange && (0, _core.isRelativeTimeRange)(timeRange),
+                                        disabled: !isSavedDurationModified || !(0, _core.isRelativeTimeRange)(timeRange),
+                                        checked: saveDefaultTimeRange && isSavedDurationModified && (0, _core.isRelativeTimeRange)(timeRange),
                                         onChange: (e)=>setSaveDefaultTimeRange(e.target.checked)
                                     }),
                                     label: saveTimeRangeText

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

@@ -45,11 +45,14 @@ const SaveDashboardButton = ({ onSave , isDisabled , variant ='contained'  })=>{
                         const variables = setVariableDefaultValues();
                         dashboard.spec.variables = variables;
                     }
+                    setDashboard(dashboard);
                     saveDashboard();
                 },
                 onCancel: ()=>{
                     closeSaveChangesConfirmationDialog();
-                }
+                },
+                isSavedDurationModified,
+                isSavedVariableModified
             });
         } else {
             saveDashboard();
@@ -62,11 +65,12 @@ const SaveDashboardButton = ({ onSave , isDisabled , variant ='contained'  })=>{
                 await onSave(dashboard);
                 closeSaveChangesConfirmationDialog();
                 setEditMode(false);
-                setDashboard(dashboard);
             } catch (error) {
                 throw new Error(`An error occurred while saving the dashboard. ${error}`);
             } finally{
-                setSavingDashboard(false);
+                if (isSavingDashboard) {
+                    setSavingDashboard(false);
+                }
             }
         } else {
             setEditMode(false);

package/dist/cjs/components/TimeRangeControls/TimeRangeControls.js

@@ -21,7 +21,8 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    TIME_OPTIONS: ()=>TIME_OPTIONS,
+    DEFAULT_TIME_RANGE_OPTIONS: ()=>DEFAULT_TIME_RANGE_OPTIONS,
+    DEFAULT_REFRESH_INTERVAL_OPTIONS: ()=>DEFAULT_REFRESH_INTERVAL_OPTIONS,
     TimeRangeControls: ()=>TimeRangeControls
 });
 const _jsxRuntime = require("react/jsx-runtime");
@@ -38,7 +39,7 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
-const TIME_OPTIONS = [
+const DEFAULT_TIME_RANGE_OPTIONS = [
     {
         value: {
             pastDuration: '5m'
@@ -94,17 +95,55 @@ const TIME_OPTIONS = [
         display: 'Last 14 days'
     }
 ];
+const DEFAULT_REFRESH_INTERVAL_OPTIONS = [
+    {
+        value: {
+            pastDuration: '0s'
+        },
+        display: 'Off'
+    },
+    {
+        value: {
+            pastDuration: '5s'
+        },
+        display: '5s'
+    },
+    {
+        value: {
+            pastDuration: '10s'
+        },
+        display: '10s'
+    },
+    {
+        value: {
+            pastDuration: '15s'
+        },
+        display: '15s'
+    },
+    {
+        value: {
+            pastDuration: '30s'
+        },
+        display: '30s'
+    },
+    {
+        value: {
+            pastDuration: '60s'
+        },
+        display: '1m'
+    }
+];
 const DEFAULT_HEIGHT = '34px';
-function TimeRangeControls({ heightPx , showRefresh =true  }) {
-    const { timeRange , setTimeRange , refresh  } = (0, _pluginSystem.useTimeRange)();
+function TimeRangeControls({ heightPx , showTimeRangeSelector =true , showRefreshButton =true , showRefreshInterval =true , timePresets =DEFAULT_TIME_RANGE_OPTIONS  }) {
+    const { timeRange , setTimeRange , refresh , refreshInterval , setRefreshInterval  } = (0, _pluginSystem.useTimeRange)();
     // TODO: Remove this since it couples to the dashboard context
     const dashboardDuration = (0, _context.useDashboardDuration)();
     // Convert height to a string, then use the string for styling
     const height = heightPx === undefined ? DEFAULT_HEIGHT : `${heightPx}px`;
     // add time shortcut if one does not match duration from dashboard JSON
-    if (!TIME_OPTIONS.some((option)=>option.value.pastDuration === dashboardDuration)) {
+    if (!timePresets.some((option)=>option.value.pastDuration === dashboardDuration)) {
         if ((0, _core.isDurationString)(dashboardDuration)) {
-            TIME_OPTIONS.push({
+            timePresets.push({
                 value: {
                     pastDuration: dashboardDuration
                 },
@@ -116,13 +155,13 @@ function TimeRangeControls({ heightPx , showRefresh =true  }) {
         direction: "row",
         spacing: 1,
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.DateTimeRangePicker, {
-                timeOptions: TIME_OPTIONS,
+            showTimeRangeSelector && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.DateTimeRangePicker, {
+                timeOptions: timePresets,
                 value: timeRange,
                 onChange: setTimeRange,
                 height: height
             }),
-            showRefresh && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
+            showRefreshButton && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
                 description: _constants.TOOLTIP_TEXT.refreshDashboard,
                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_toolbarIconButton.ToolbarIconButton, {
                     "aria-label": _constants.TOOLTIP_TEXT.refreshDashboard,
@@ -132,6 +171,12 @@ function TimeRangeControls({ heightPx , showRefresh =true  }) {
                     },
                     children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_refresh.default, {})
                 })
+            }),
+            showRefreshInterval && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.RefreshIntervalPicker, {
+                timeOptions: DEFAULT_REFRESH_INTERVAL_OPTIONS,
+                value: refreshInterval,
+                onChange: setRefreshInterval,
+                height: height
             })
         ]
     });

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

@@ -21,7 +21,7 @@ Object.defineProperty(exports, "TemplateVariable", {
 const _jsxRuntime = require("react/jsx-runtime");
 const _react = require("react");
 const _material = require("@mui/material");
-const _pluginSystem = require("@perses-dev/plugin-system");
+const _core = require("@perses-dev/core");
 const _context = require("../../context");
 const _variableModel = require("./variable-model");
 function TemplateVariable({ name  }) {
@@ -83,7 +83,7 @@ function ListVariable({ name  }) {
         if (allowAllValue) {
             computedOptions = [
                 {
-                    value: _pluginSystem.DEFAULT_ALL_VALUE,
+                    value: _core.DEFAULT_ALL_VALUE,
                     label: 'All'
                 },
                 ...computedOptions
@@ -142,7 +142,7 @@ function ListVariable({ name  }) {
                         // Must be selected
                         if (e.target.value === null || e.target.value.length === 0) {
                             if (allowAllValue) {
-                                setVariableValue(name, _pluginSystem.DEFAULT_ALL_VALUE);
+                                setVariableValue(name, _core.DEFAULT_ALL_VALUE);
                             }
                             return;
                         }

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

@@ -368,8 +368,23 @@ function VariableEditForm(props) {
                                                 label: "Allow All option"
                                             }),
                                             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                                                mb: 1,
                                                 variant: "caption",
                                                 children: "Enables an option to include all variable values"
+                                            }),
+                                            state.listVariableFields.allowAll && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                                                label: "Custom All Value",
+                                                value: state.listVariableFields.customAllValue,
+                                                onChange: (e)=>{
+                                                    setState((draft)=>{
+                                                        if (e.target.value) {
+                                                            draft.listVariableFields.customAllValue = e.target.value;
+                                                        } else {
+                                                            draft.listVariableFields.customAllValue = undefined;
+                                                        }
+                                                    });
+                                                },
+                                                helperText: "When All is selected, this value will be used"
                                             })
                                         ]
                                     })

package/dist/cjs/components/Variables/VariableEditorForm/variable-editor-form-model.js

@@ -37,7 +37,8 @@ function getInitialState(initialVariableDefinition) {
         plugin: {
             kind: '',
             spec: {}
-        }
+        },
+        customAllValue: undefined
     };
     if (initialVariableDefinition.kind === 'ListVariable') {
         var _allow_all_value;
@@ -46,6 +47,7 @@ function getInitialState(initialVariableDefinition) {
         listVariableFields.allowAll = (_allow_all_value1 = initialVariableDefinition.spec.allow_all_value) !== null && _allow_all_value1 !== void 0 ? _allow_all_value1 : false;
         listVariableFields.capturing_regexp = initialVariableDefinition.spec.capturing_regexp;
         listVariableFields.plugin = initialVariableDefinition.spec.plugin;
+        listVariableFields.customAllValue = initialVariableDefinition.spec.custom_all_value;
     }
     return {
         name: initialVariableDefinition.spec.name,
@@ -80,7 +82,8 @@ function getVariableDefinitionFromState(state) {
                 allow_multiple: state.listVariableFields.allowMultiple,
                 allow_all_value: state.listVariableFields.allowAll,
                 capturing_regexp: state.listVariableFields.capturing_regexp,
-                plugin: state.listVariableFields.plugin
+                plugin: state.listVariableFields.plugin,
+                custom_all_value: state.listVariableFields.customAllValue
             }
         };
     }

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

@@ -82,7 +82,7 @@ function DashboardProvider(props) {
 }
 function initStore(props) {
     const { initialState: { dashboardResource , isEditMode  } ,  } = props;
-    const { spec: { display , duration  } , metadata ,  } = dashboardResource;
+    const { spec: { display , duration , refreshInterval  } , 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 : [];
@@ -103,11 +103,12 @@ function initStore(props) {
             metadata,
             display,
             duration,
+            refreshInterval,
             isEditMode: !!isEditMode,
             setEditMode: (isEditMode)=>set({
                     isEditMode
                 }),
-            setDashboard: ({ metadata , spec: { display , panels ={} , layouts =[] , duration  }  })=>{
+            setDashboard: ({ metadata , spec: { display , panels ={} , layouts =[] , duration , refreshInterval  }  })=>{
                 set((state)=>{
                     state.metadata = metadata;
                     state.display = display;
@@ -116,6 +117,7 @@ function initStore(props) {
                     state.panelGroups = panelGroups;
                     state.panelGroupOrder = panelGroupOrder;
                     state.duration = duration;
+                    state.refreshInterval = refreshInterval;
                 });
             }
         };

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

@@ -35,6 +35,7 @@ const _immer = require("zustand/middleware/immer");
 const _middleware = require("zustand/middleware");
 const _immer1 = /*#__PURE__*/ _interopRequireDefault(require("immer"));
 const _pluginSystem = require("@perses-dev/plugin-system");
+const _core = require("@perses-dev/core");
 const _utils = require("./utils");
 const _hydrationUtils = require("./hydrationUtils");
 const _queryParams = require("./query-params");
@@ -103,6 +104,7 @@ function useTemplateVariableStore() {
 }
 function PluginProvider({ children  }) {
     const originalValues = useTemplateVariableValues();
+    const definitions = useTemplateVariableDefinitions();
     const values = (0, _react.useMemo)(()=>{
         const contextValues = {};
         // This will loop through all the current variables values
@@ -112,16 +114,23 @@ function PluginProvider({ children  }) {
             const v = {
                 ...originalValues[name]
             };
-            if (v.value === _pluginSystem.DEFAULT_ALL_VALUE) {
-                var ref;
-                var ref1;
-                v.value = (ref1 = (ref = v.options) === null || ref === void 0 ? void 0 : ref.map((o)=>o.value)) !== null && ref1 !== void 0 ? ref1 : null;
+            if (v.value === _core.DEFAULT_ALL_VALUE) {
+                const definition = definitions.find((d)=>d.spec.name === name);
+                // 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;
+                } else {
+                    var ref;
+                    var ref1;
+                    v.value = (ref1 = (ref = v.options) === null || ref === void 0 ? void 0 : ref.map((o)=>o.value)) !== null && ref1 !== void 0 ? ref1 : null;
+                }
             }
             contextValues[name] = v;
         });
         return contextValues;
     }, [
-        originalValues
+        originalValues,
+        definitions
     ]);
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.TemplateVariableContext.Provider, {
         value: {
@@ -168,11 +177,11 @@ function createTemplateVariableSrvStore({ initialVariableDefinitions =[] , query
                         return;
                     }
                     // Make sure there is only one all value
-                    if (Array.isArray(val) && val.includes(_pluginSystem.DEFAULT_ALL_VALUE)) {
-                        if (val.at(-1) === _pluginSystem.DEFAULT_ALL_VALUE) {
-                            val = _pluginSystem.DEFAULT_ALL_VALUE;
+                    if (Array.isArray(val) && val.includes(_core.DEFAULT_ALL_VALUE)) {
+                        if (val.at(-1) === _core.DEFAULT_ALL_VALUE) {
+                            val = _core.DEFAULT_ALL_VALUE;
                         } else {
-                            val = val.filter((v)=>v !== _pluginSystem.DEFAULT_ALL_VALUE);
+                            val = val.filter((v)=>v !== _core.DEFAULT_ALL_VALUE);
                         }
                     }
                     if (queryParams) {

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

@@ -18,7 +18,7 @@ Object.defineProperty(exports, "hydrateTemplateVariableStates", {
     enumerable: true,
     get: ()=>hydrateTemplateVariableStates
 });
-const _pluginSystem = require("@perses-dev/plugin-system");
+const _core = require("@perses-dev/core");
 // TODO: move to TemplateVariableProvider/utils.ts
 function hydrateTemplateVariableState(variable, initialValue) {
     const varState = {
@@ -49,8 +49,8 @@ function hydrateTemplateVariableState(variable, initialValue) {
             // 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;
+            if (Array.isArray(varState.value) && varState.value.length === 1 && varState.value[0] === _core.DEFAULT_ALL_VALUE) {
+                varState.value = _core.DEFAULT_ALL_VALUE;
             }
             break;
         default:

package/dist/cjs/context/useDashboard.js

@@ -22,14 +22,15 @@ const _core = require("@perses-dev/core");
 const _dashboardProvider = require("./DashboardProvider");
 const _templateVariableProvider = require("./TemplateVariableProvider");
 function useDashboard() {
-    const { panels , panelGroups , panelGroupOrder , setDashboard: setDashboardResource , metadata , display , duration ,  } = (0, _dashboardProvider.useDashboardStore)(({ panels , panelGroups , panelGroupOrder , setDashboard , metadata , display , duration  })=>({
+    const { panels , panelGroups , panelGroupOrder , setDashboard: setDashboardResource , metadata , display , duration , refreshInterval ,  } = (0, _dashboardProvider.useDashboardStore)(({ panels , panelGroups , panelGroupOrder , setDashboard , metadata , display , duration , refreshInterval  })=>({
             panels,
             panelGroups,
             panelGroupOrder,
             setDashboard,
             metadata,
             display,
-            duration
+            duration,
+            refreshInterval
         }));
     const { setVariableDefinitions  } = (0, _templateVariableProvider.useTemplateVariableActions)();
     const variables = (0, _templateVariableProvider.useTemplateVariableDefinitions)();
@@ -42,7 +43,8 @@ function useDashboard() {
             panels,
             layouts,
             variables,
-            duration
+            duration,
+            refreshInterval
         }
     };
     const setDashboard = (dashboardResource)=>{

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

@@ -29,6 +29,7 @@ const EMPTY_DASHBOARD_RESOURCE = {
     },
     spec: {
         duration: '1h',
+        refreshInterval: '0s',
         variables: [],
         layouts: [],
         panels: {}