@perses-dev/dashboards 0.54.0-beta.1 → 0.54.0-beta.11

package/dist/cjs/components/Annotations/AnnotationsEditor.js

@@ -0,0 +1,302 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "AnnotationEditor", {
+    enumerable: true,
+    get: function() {
+        return AnnotationEditor;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _Plus = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Plus"));
+const _useimmer = require("use-immer");
+const _Pencil = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Pencil"));
+const _TrashCan = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/TrashCan"));
+const _ArrowUp = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ArrowUp"));
+const _ArrowDown = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ArrowDown"));
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _context = require("../../context");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function validateAnnotationSpecs(annotationSpecs) {
+    const errors = [];
+    const annotationNames = [];
+    for (const annotationSpec of annotationSpecs){
+        if (annotationNames.includes(annotationSpec.display.name)) {
+            errors.push(`Duplicate annotation name: ${annotationSpec.display.name}`);
+        } else {
+            annotationNames.push(annotationSpec.display.name);
+        }
+    }
+    return {
+        errors: errors,
+        isValid: errors.length === 0
+    };
+}
+function AnnotationEditor(props) {
+    const [annotationSpecs, setAnnotationSpecs] = (0, _useimmer.useImmer)(props.annotationSpecs);
+    const [annotationEditIdx, setAnnotationEditIdx] = (0, _react.useState)(null);
+    const [annotationFormAction, setAnnotationFormAction] = (0, _react.useState)('update');
+    const validation = (0, _react.useMemo)(()=>validateAnnotationSpecs(annotationSpecs), [
+        annotationSpecs
+    ]);
+    const currentEditingAnnotationSpec = annotationEditIdx !== null ? annotationSpecs[annotationEditIdx] : undefined;
+    const { openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog } = (0, _context.useDiscardChangesConfirmationDialog)();
+    const handleCancel = ()=>{
+        if (JSON.stringify(props.annotationSpecs) !== JSON.stringify(annotationSpecs)) {
+            openDiscardChangesConfirmationDialog({
+                onDiscardChanges: ()=>{
+                    closeDiscardChangesConfirmationDialog();
+                    props.onCancel();
+                },
+                onCancel: ()=>{
+                    closeDiscardChangesConfirmationDialog();
+                },
+                description: 'You have unapplied changes. Are you sure you want to discard these changes? Changes cannot be recovered.'
+            });
+        } else {
+            props.onCancel();
+        }
+    };
+    const removeAnnotation = (index)=>{
+        setAnnotationSpecs((draft)=>{
+            draft.splice(index, 1);
+        });
+    };
+    const addAnnotation = ()=>{
+        setAnnotationFormAction('create');
+        setAnnotationSpecs((draft)=>{
+            draft.push({
+                display: {
+                    name: 'NewAnnotation'
+                },
+                plugin: {}
+            });
+        });
+        setAnnotationEditIdx(annotationSpecs.length);
+    };
+    const editAnnotation = (index)=>{
+        setAnnotationFormAction('update');
+        setAnnotationEditIdx(index);
+    };
+    const toggleAnnotationVisibility = (index, visible)=>{
+        setAnnotationSpecs((draft)=>{
+            const v = draft[index];
+            if (!v) {
+                return;
+            }
+            v.display.hidden = !visible;
+        });
+    };
+    const changeAnnotationOrder = (index, direction)=>{
+        const step = direction === 'up' ? -1 : 1;
+        setAnnotationSpecs((draft)=>{
+            const current = draft[index];
+            const adjacent = draft[index + step];
+            if (!current || !adjacent) {
+                return;
+            }
+            draft[index + step] = current;
+            draft[index] = adjacent;
+        });
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+        children: annotationEditIdx !== null && currentEditingAnnotationSpec ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.ValidationProvider, {
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.AnnotationEditorForm, {
+                initialAnnotationSpec: currentEditingAnnotationSpec,
+                action: annotationFormAction,
+                isDraft: true,
+                onActionChange: setAnnotationFormAction,
+                onSave: (definition)=>{
+                    setAnnotationSpecs((draft)=>{
+                        draft[annotationEditIdx] = definition;
+                        setAnnotationEditIdx(null);
+                    });
+                },
+                onClose: ()=>{
+                    if (annotationFormAction === 'create') {
+                        removeAnnotation(annotationEditIdx);
+                    }
+                    setAnnotationEditIdx(null);
+                }
+            })
+        }) : /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+                    sx: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        padding: (theme)=>theme.spacing(1, 2),
+                        borderBottom: (theme)=>`1px solid ${theme.palette.divider}`
+                    },
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                            variant: "h2",
+                            children: "Edit Dashboard Annotations"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                            direction: "row",
+                            spacing: 1,
+                            marginLeft: "auto",
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                                    disabled: props.annotationSpecs === annotationSpecs || !validation.isValid,
+                                    variant: "contained",
+                                    onClick: ()=>{
+                                        props.onChange(annotationSpecs);
+                                    },
+                                    children: "Apply"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                                    color: "secondary",
+                                    variant: "outlined",
+                                    onClick: handleCancel,
+                                    children: "Cancel"
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                    padding: 2,
+                    sx: {
+                        overflowY: 'scroll'
+                    },
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+                        spacing: 2,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                            spacing: 2,
+                            children: [
+                                !validation.isValid && validation.errors.map((error)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Alert, {
+                                        severity: "error",
+                                        children: error
+                                    }, error)),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableContainer, {
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Table, {
+                                        sx: {
+                                            minWidth: 650
+                                        },
+                                        "aria-label": "table of annotations",
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableHead, {
+                                                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TableRow, {
+                                                    children: [
+                                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
+                                                            children: "Visibility"
+                                                        }),
+                                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
+                                                            children: "Name"
+                                                        }),
+                                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
+                                                            children: "Type"
+                                                        }),
+                                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
+                                                            children: "Description"
+                                                        }),
+                                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
+                                                            align: "right",
+                                                            children: "Actions"
+                                                        })
+                                                    ]
+                                                })
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableBody, {
+                                                children: annotationSpecs.map((v, idx)=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TableRow, {
+                                                        children: [
+                                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
+                                                                component: "th",
+                                                                scope: "row",
+                                                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Switch, {
+                                                                    checked: v.display?.hidden !== true,
+                                                                    onChange: (e)=>{
+                                                                        toggleAnnotationVisibility(idx, e.target.checked);
+                                                                    }
+                                                                })
+                                                            }),
+                                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
+                                                                component: "th",
+                                                                scope: "row",
+                                                                sx: {
+                                                                    fontWeight: 'bold'
+                                                                },
+                                                                children: v.display.name
+                                                            }),
+                                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
+                                                                children: v.plugin.kind
+                                                            }),
+                                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
+                                                                children: v.display?.description ?? ''
+                                                            }),
+                                                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(TableCell, {
+                                                                align: "right",
+                                                                sx: {
+                                                                    whiteSpace: 'nowrap'
+                                                                },
+                                                                children: [
+                                                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                                                        onClick: ()=>changeAnnotationOrder(idx, 'up'),
+                                                                        disabled: idx === 0,
+                                                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ArrowUp.default, {})
+                                                                    }),
+                                                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                                                        onClick: ()=>changeAnnotationOrder(idx, 'down'),
+                                                                        disabled: idx === annotationSpecs.length - 1,
+                                                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ArrowDown.default, {})
+                                                                    }),
+                                                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                                                        onClick: ()=>editAnnotation(idx),
+                                                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Pencil.default, {})
+                                                                    }),
+                                                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                                                        onClick: ()=>removeAnnotation(idx),
+                                                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_TrashCan.default, {})
+                                                                    })
+                                                                ]
+                                                            })
+                                                        ]
+                                                    }, v.display.name))
+                                            })
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                                    display: "flex",
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                                        variant: "contained",
+                                        startIcon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Plus.default, {}),
+                                        sx: {
+                                            marginLeft: 'auto'
+                                        },
+                                        onClick: addAnnotation,
+                                        children: "Add Annotation"
+                                    })
+                                })
+                            ]
+                        })
+                    })
+                })
+            ]
+        })
+    });
+}
+const TableCell = (0, _material.styled)(_material.TableCell)(({ theme })=>({
+        borderBottom: `solid 1px ${theme.palette.divider}`
+    }));

package/dist/cjs/components/Annotations/EditAnnotationsButton.js

@@ -0,0 +1,83 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "EditAnnotationsButton", {
+    enumerable: true,
+    get: function() {
+        return EditAnnotationsButton;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _PencilOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/PencilOutline"));
+const _components = require("@perses-dev/components");
+const _constants = require("../../constants");
+const _context = require("../../context");
+const _AnnotationsEditor = require("./AnnotationsEditor");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function EditAnnotationsButton({ variant = 'text', label = 'Annotations', color = 'primary', fullWidth }) {
+    const [isAnnotationEditorOpen, setIsAnnotationEditorOpen] = (0, _react.useState)(false);
+    const annotationSpecs = (0, _context.useAnnotationSpecs)();
+    const { setAnnotationSpecs } = (0, _context.useAnnotationActions)();
+    const openAnnotationEditor = ()=>{
+        setIsAnnotationEditorOpen(true);
+    };
+    const closeAnnotationEditor = ()=>{
+        setIsAnnotationEditorOpen(false);
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
+                description: _constants.TOOLTIP_TEXT.editAnnotations,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                    startIcon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PencilOutline.default, {}),
+                    onClick: openAnnotationEditor,
+                    "aria-label": _constants.TOOLTIP_TEXT.editAnnotations,
+                    variant: variant,
+                    color: color,
+                    fullWidth: fullWidth,
+                    sx: _constants.editButtonStyle,
+                    children: label
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Drawer, {
+                isOpen: isAnnotationEditorOpen,
+                onClose: closeAnnotationEditor,
+                slotProps: {
+                    paper: {
+                        sx: {
+                            width: '50%'
+                        }
+                    }
+                },
+                "data-testid": "annotation-editor",
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_AnnotationsEditor.AnnotationEditor, {
+                    annotationSpecs: annotationSpecs,
+                    onCancel: closeAnnotationEditor,
+                    onChange: (annotations)=>{
+                        setAnnotationSpecs(annotations);
+                        setIsAnnotationEditorOpen(false);
+                    }
+                })
+            })
+        ]
+    });
+}

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

@@ -34,12 +34,13 @@ const _EditButton = require("../EditButton");
 const _EditJsonButton = require("../EditJsonButton");
 const _SaveDashboardButton = require("../SaveDashboardButton");
 const _DashboardStickyToolbar = require("../DashboardStickyToolbar");
+const _EditAnnotationsButton = require("../Annotations/EditAnnotationsButton");
 const _DashboardLinks = require("../DashboardLinks");
 const _LinksDisplay = require("../LinksDisplay");
 const DashboardToolbar = (props)=>{
-    const { dashboardName, dashboardTitleComponent, initialVariableIsSticky, isReadonly, isVariableEnabled, isDatasourceEnabled, isLinksEnabled = true, onEditButtonClick, onCancelButtonClick, onSave } = props;
+    const { dashboardName, dashboardTitleComponent, initialVariableIsSticky, isReadonly, isVariableEnabled, isAnnotationEnabled, isDatasourceEnabled, isLinksEnabled = true, timezone: toolbarTimezone, onEditButtonClick, onCancelButtonClick, onSave } = props;
     const { isEditMode } = (0, _context.useEditMode)();
-    const { timeZone, setTimeZone } = (0, _pluginsystem.useTimeZoneParams)('local');
+    const { timeZone, setTimeZone } = (0, _pluginsystem.useTimeZoneParams)(toolbarTimezone);
     const dashboardLinks = (0, _context.useDashboardLinks)();
     const isBiggerThanSm = (0, _material.useMediaQuery)((0, _material.useTheme)().breakpoints.up('sm'));
     const isBiggerThanMd = (0, _material.useMediaQuery)((0, _material.useTheme)().breakpoints.up('md'));
@@ -91,6 +92,7 @@ const DashboardToolbar = (props)=>{
                                     ml: 1,
                                     whiteSpace: "nowrap",
                                     children: [
+                                        isAnnotationEnabled && /*#__PURE__*/ (0, _jsxruntime.jsx)(_EditAnnotationsButton.EditAnnotationsButton, {}),
                                         isVariableEnabled && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Variables.EditVariablesButton, {}),
                                         isDatasourceEnabled && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Datasources.EditDatasourcesButton, {}),
                                         isLinksEnabled && /*#__PURE__*/ (0, _jsxruntime.jsx)(_DashboardLinks.EditDashboardLinksButton, {}),

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

@@ -124,13 +124,6 @@ function GridItemContent(props) {
     // map TimeSeriesQueryDefinition to Definition<UnknownSpec>
     const suggestedStepMs = (0, _pluginsystem.useSuggestedStepMs)(width);
     const { data: plugin } = (0, _pluginsystem.usePlugin)('Panel', panelDefinition.spec.plugin.kind);
-    const queryDefinitions = queries ?? [];
-    const definitions = queryDefinitions.map((query)=>{
-        return {
-            kind: query.spec.plugin.kind,
-            spec: query.spec.plugin.spec
-        };
-    });
     const pluginQueryOptions = typeof plugin?.queryOptions === 'function' ? plugin?.queryOptions(panelDefinition.spec.plugin.spec) : plugin?.queryOptions;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
         ref: mergedRef,
@@ -144,7 +137,7 @@ function GridItemContent(props) {
         },
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DataQueriesProvider, {
-                definitions: definitions,
+                definitions: queries ?? [],
                 options: {
                     suggestedStepMs,
                     ...pluginQueryOptions
@@ -163,7 +156,7 @@ function GridItemContent(props) {
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_QueryViewerDialog.QueryViewerDialog, {
                 open: openQueryViewer,
-                queryDefinitions: queryDefinitions,
+                queryDefinitions: queries ?? [],
                 onClose: ()=>setOpenQueryViewer(false)
             })
         ]

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

@@ -79,7 +79,10 @@ const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
                 return;
             }
             try {
-                const plugin = await getPlugin('Panel', panelPluginKind);
+                const plugin = await getPlugin({
+                    kind: 'Panel',
+                    name: panelPluginKind
+                });
                 // More defensive checking for plugin and actions
                 if (!plugin || typeof plugin !== 'object' || !plugin.actions || !Array.isArray(plugin.actions) || plugin.actions.length === 0) {
                     setPluginActions([]);

package/dist/cjs/components/PanelDrawer/PanelQueriesSharedControls.js

@@ -34,22 +34,12 @@ function PanelQueriesSharedControls({ plugin, control, panelDefinition, onQuerie
         panelDefinition.spec.plugin.spec,
         pluginPreview
     ]);
-    const [previewDefinition, setPreviewDefinition] = (0, _react.useState)(()=>panelDefinition.spec.queries?.map((query)=>{
-            return {
-                kind: query.spec.plugin.kind,
-                spec: query.spec.plugin.spec
-            };
-        }) ?? []);
+    const [previewDefinition, setPreviewDefinition] = (0, _react.useState)(panelDefinition.spec.queries ?? []);
     const handleOnQueriesChange = (0, _react.useCallback)((queries)=>{
         onQueriesChange(queries);
         // If the number of queries has changed, force preview definition update to remove results of deleted queries.
         if (queries.length !== previewDefinition.length) {
-            setPreviewDefinition(queries.map((query)=>{
-                return {
-                    kind: query.spec.plugin.kind,
-                    spec: query.spec.plugin.spec
-                };
-            }));
+            setPreviewDefinition(queries);
         }
     }, [
         onQueriesChange,
@@ -60,10 +50,7 @@ function PanelQueriesSharedControls({ plugin, control, panelDefinition, onQuerie
             const newDefinitions = [
                 ...prev
             ];
-            newDefinitions[index] = {
-                kind: newDef.spec.plugin.kind,
-                spec: newDef.spec.plugin.spec
-            };
+            newDefinitions[index] = newDef;
             return newDefinitions;
         });
     }, []);

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

@@ -33,16 +33,20 @@ const SaveChangesConfirmationDialog = ()=>{
     const isSavedDurationModified = dialog?.isSavedDurationModified ?? true;
     const isSavedVariableModified = dialog?.isSavedVariableModified ?? true;
     const isSavedRefreshIntervalModified = dialog?.isSavedRefreshIntervalModified ?? true;
+    const isSavedTimeZoneModified = dialog?.isTimeZoneModified ?? true;
     const [saveDefaultTimeRange, setSaveDefaultTimeRange] = (0, _react.useState)(isSavedDurationModified);
     const [saveDefaultVariables, setSaveDefaultVariables] = (0, _react.useState)(isSavedVariableModified);
     const [saveDefaultRefreshInterval, setDefaultRefreshInterval] = (0, _react.useState)(isSavedRefreshIntervalModified);
+    const [saveDefaultTimeZone, setSaveDefaultTimeZone] = (0, _react.useState)(isSavedTimeZoneModified);
     const { getSavedVariablesStatus } = (0, _context.useVariableDefinitionActions)();
     const { modifiedVariableNames } = getSavedVariablesStatus();
     const isOpen = dialog !== undefined;
     const { timeRange, refreshInterval } = (0, _pluginsystem.useTimeRange)();
+    const { timeZone } = (0, _pluginsystem.useTimeZoneParams)();
     const currentTimeRangeText = (0, _spec.isRelativeTimeRange)(timeRange) ? `(Last ${timeRange.pastDuration})` : '(Absolute time ranges can not be saved)';
-    const saveTimeRangeMessage = `Save current time range as new default ${currentTimeRangeText}`;
-    const saveVariableMessage = `Save current variable values as new default (${modifiedVariableNames.length > 0 ? modifiedVariableNames.join(', ') : 'No modified variables'})`;
+    const saveTimeRangeMessage = `Save current time range as the new default ${currentTimeRangeText}`;
+    const saveTimeZoneMessage = `Save the current timezone as the new default (${timeZone})`;
+    const saveVariableMessage = `Save current variable values as the new default (${modifiedVariableNames.length > 0 ? modifiedVariableNames.join(', ') : 'No modified variables'})`;
     const refreshIntervalDisplay = _pluginsystem.DEFAULT_REFRESH_INTERVAL_OPTIONS.some((i)=>i.display === refreshInterval) ? refreshInterval : _pluginsystem.DEFAULT_REFRESH_INTERVAL_OPTIONS.find((i)=>i.value.pastDuration === refreshInterval)?.display;
     const saveRefreshIntervalMessage = `Save current refresh interval as new default ${refreshIntervalDisplay ? `(${refreshIntervalDisplay})` : 'refresh interval not modified'}`;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Dialog, {
@@ -84,6 +88,14 @@ const SaveChangesConfirmationDialog = ()=>{
                                         onChange: (e)=>setSaveDefaultVariables(e.target.checked)
                                     }),
                                     label: saveVariableMessage
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
+                                    control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Checkbox, {
+                                        disabled: !isSavedTimeZoneModified,
+                                        checked: saveDefaultTimeZone && isSavedTimeZoneModified,
+                                        onChange: (e)=>setSaveDefaultTimeZone(e.target.checked)
+                                    }),
+                                    label: saveTimeZoneMessage
                                 })
                             ]
                         })
@@ -93,7 +105,12 @@ const SaveChangesConfirmationDialog = ()=>{
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Dialog.PrimaryButton, {
                             onClick: ()=>{
-                                return dialog.onSaveChanges(saveDefaultTimeRange, saveDefaultRefreshInterval, saveDefaultVariables);
+                                return dialog.onSaveChanges({
+                                    saveDefaultTimeRange,
+                                    saveDefaultRefreshInterval,
+                                    saveDefaultVariables,
+                                    saveDefaultTimeZone
+                                });
                             },
                             children: "Save Changes"
                         }),

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

@@ -83,7 +83,7 @@ function VariableEditor(props) {
         externalVariableDefinitions,
         variableDefinitions
     ]);
-    const currentEditingVariableDefinition = typeof variableEditIdx === 'number' && variableDefinitions[variableEditIdx];
+    const currentEditingVariableDefinition = variableEditIdx !== null ? variableDefinitions[variableEditIdx] : undefined;
     const { openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog } = (0, _context.useDiscardChangesConfirmationDialog)();
     const handleCancel = ()=>{
         if (JSON.stringify(props.variableDefinitions) !== JSON.stringify(variableDefinitions)) {
@@ -166,25 +166,25 @@ function VariableEditor(props) {
     };
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
-            currentEditingVariableDefinition && /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.ValidationProvider, {
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.VariableEditorForm, {
-                    initialVariableDefinition: currentEditingVariableDefinition,
-                    action: variableFormAction,
-                    isDraft: true,
-                    onActionChange: setVariableFormAction,
-                    onSave: (definition)=>{
-                        setVariableDefinitions((draft)=>{
-                            draft[variableEditIdx] = definition;
-                            setVariableEditIdx(null);
-                        });
-                    },
-                    onClose: ()=>{
-                        if (variableFormAction === 'create') {
-                            removeVariable(variableEditIdx);
-                        }
+            variableEditIdx !== null && currentEditingVariableDefinition && /*#__PURE__*/ (0, _jsxruntime.jsx)(VariableEditorFormWithContext, {
+                variableDefinitions: variableDefinitions,
+                externalVariableDefinitions: externalVariableDefinitions,
+                builtinVariableDefinitions: builtinVariableDefinitions,
+                currentEditingVariableDefinition: currentEditingVariableDefinition,
+                variableFormAction: variableFormAction,
+                onActionChange: setVariableFormAction,
+                onSave: (definition)=>{
+                    setVariableDefinitions((draft)=>{
+                        draft[variableEditIdx] = definition;
                         setVariableEditIdx(null);
+                    });
+                },
+                onClose: ()=>{
+                    if (variableFormAction === 'create') {
+                        removeVariable(variableEditIdx);
                     }
-                })
+                    setVariableEditIdx(null);
+                }
             }),
             !currentEditingVariableDefinition && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
                 children: [
@@ -535,6 +535,40 @@ function VariableEditor(props) {
 const TableCell = (0, _material.styled)(_material.TableCell)(({ theme })=>({
         borderBottom: `solid 1px ${theme.palette.divider}`
     }));
+function VariableEditorFormWithContext({ variableDefinitions, externalVariableDefinitions, builtinVariableDefinitions, currentEditingVariableDefinition, variableFormAction, onActionChange, onSave, onClose }) {
+    const { initialVariableValues, isLoading } = (0, _pluginsystem.useResolveListVariableValues)(variableDefinitions);
+    if (isLoading) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+            sx: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                height: '100%',
+                width: '100%',
+                overflow: 'hidden'
+            },
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CircularProgress, {
+                "aria-label": "loading"
+            })
+        });
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_context.VariableProvider, {
+        initialVariableDefinitions: variableDefinitions,
+        externalVariableDefinitions: externalVariableDefinitions,
+        builtinVariableDefinitions: builtinVariableDefinitions,
+        initialVariableValues: initialVariableValues,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.ValidationProvider, {
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.VariableEditorForm, {
+                initialVariableDefinition: currentEditingVariableDefinition,
+                action: variableFormAction,
+                isDraft: true,
+                onActionChange: onActionChange,
+                onSave: onSave,
+                onClose: onClose
+            })
+        })
+    });
+}
 function VariableName(props) {
     const { name, state } = props;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {

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

@@ -36,6 +36,7 @@ const TOOLTIP_TEXT = {
     editJson: 'Edit JSON',
     editLinks: 'Edit links',
     editVariables: 'Edit variables',
+    editAnnotations: 'Edit annotations',
     viewJson: 'View JSON',
     // Group buttons
     addPanelToGroup: 'Add panel to group',