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

package/dist/cjs/context/AnnotationProvider/AnnotationHydrationWrapper.js

@@ -0,0 +1,50 @@
+// 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, "AnnotationHydrationWrapper", {
+    enumerable: true,
+    get: function() {
+        return AnnotationHydrationWrapper;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _AnnotationProvider = require("./AnnotationProvider");
+function AnnotationHydrationWrapper({ children }) {
+    const annotationSpecs = (0, _AnnotationProvider.useAnnotationSpecs)();
+    const { setAnnotationState } = (0, _AnnotationProvider.useAnnotationActions)();
+    const annotations = (0, _pluginsystem.useAnnotations)(annotationSpecs);
+    (0, _react.useEffect)(()=>{
+        for (const [index, definition] of annotationSpecs.entries()){
+            const query = annotations[index] ?? null;
+            if (query) {
+                setAnnotationState(definition.display.name, {
+                    data: query.data ?? null,
+                    isPending: query.isLoading,
+                    error: query?.error ?? null
+                });
+            }
+        }
+    }, [
+        annotationSpecs,
+        annotations,
+        setAnnotationState
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+        children: children
+    });
+}

package/dist/cjs/context/AnnotationProvider/AnnotationProvider.js

@@ -0,0 +1,145 @@
+// 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
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get AnnotationProvider () {
+        return AnnotationProvider;
+    },
+    get useAnnotationActions () {
+        return useAnnotationActions;
+    },
+    get useAnnotationSpecAndState () {
+        return useAnnotationSpecAndState;
+    },
+    get useAnnotationSpecs () {
+        return useAnnotationSpecs;
+    },
+    get useAnnotationStates () {
+        return useAnnotationStates;
+    },
+    get useAnnotationStoreCtx () {
+        return useAnnotationStoreCtx;
+    },
+    get useAnnotationsWithData () {
+        return useAnnotationsWithData;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+const _zustand = require("zustand");
+const _traditional = require("zustand/traditional");
+const _shallow = require("zustand/shallow");
+const _middleware = require("zustand/middleware");
+const _immer = require("zustand/middleware/immer");
+const _AnnotationHydrationWrapper = require("./AnnotationHydrationWrapper");
+const AnnotationStoreContext = /*#__PURE__*/ (0, _react.createContext)(undefined);
+function useAnnotationStoreCtx() {
+    const context = (0, _react.useContext)(AnnotationStoreContext);
+    if (!context) {
+        return createAnnotationStore({
+            initialAnnotationSpecs: []
+        });
+    }
+    return context;
+}
+function useAnnotationSpecs() {
+    const store = useAnnotationStoreCtx();
+    return (0, _zustand.useStore)(store, (s)=>s.annotationSpecs);
+}
+function useAnnotationStates(annotationNames) {
+    const store = useAnnotationStoreCtx();
+    return (0, _traditional.useStoreWithEqualityFn)(store, (s)=>{
+        if (annotationNames) {
+            const result = {};
+            annotationNames.forEach((name)=>{
+                const s = store.getState().annotationState[name];
+                if (s) {
+                    result[name] = s;
+                }
+            });
+            return result;
+        }
+        return s.annotationState;
+    }, (left, right)=>{
+        return JSON.stringify(left) === JSON.stringify(right);
+    });
+}
+function useAnnotationActions() {
+    const store = useAnnotationStoreCtx();
+    return (0, _traditional.useStoreWithEqualityFn)(store, (s)=>{
+        return {
+            setAnnotationState: s.setAnnotationState,
+            setAnnotationSpecs: s.setAnnotationSpecs
+        };
+    }, _shallow.shallow);
+}
+function useAnnotationSpecAndState(name) {
+    const store = useAnnotationStoreCtx();
+    return (0, _zustand.useStore)(store, (s)=>{
+        return {
+            definition: s.annotationSpecs.find((d)=>d.display.name === name),
+            state: s.annotationState[name]
+        };
+    });
+}
+function useAnnotationsWithData() {
+    const store = useAnnotationStoreCtx();
+    return (0, _zustand.useStore)(store, (s)=>{
+        return s.annotationSpecs.map((definition)=>{
+            const state = s.annotationState[definition.display.name];
+            return {
+                definition,
+                data: state?.data
+            };
+        }).filter((annotation)=>!!annotation.data);
+    });
+}
+function createAnnotationStore({ initialAnnotationSpecs = [] }) {
+    const store = (0, _zustand.createStore)()((0, _middleware.devtools)((0, _immer.immer)((set, _get)=>({
+            annotationSpecs: initialAnnotationSpecs,
+            annotationState: {},
+            setAnnotationSpecs (definitions) {
+                set((s)=>{
+                    s.annotationSpecs = definitions;
+                }, false, '[Annotations] setAnnotationSpecs' // Used for action name in Redux devtools
+                );
+            },
+            setAnnotationState: (name, state)=>{
+                set((s)=>{
+                    s.annotationState[name] = state;
+                }, false, '[Annotations] setAnnotationState' // Used for action name in Redux devtools
+                );
+            }
+        }))));
+    return store;
+}
+function AnnotationProvider({ children, initialAnnotationSpecs = [] }) {
+    const [store] = (0, _react.useState)(()=>createAnnotationStore({
+            initialAnnotationSpecs
+        }));
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(AnnotationStoreContext.Provider, {
+        value: store,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_AnnotationHydrationWrapper.AnnotationHydrationWrapper, {
+            children: children
+        })
+    });
+}

package/dist/{model/DashboardResource.js → cjs/context/AnnotationProvider/index.js}

@@ -10,9 +10,21 @@
 // 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.
-/* TODO: There is an open and ongoing issue whether the meta-data should be removed or not.
-   Such a decision would affect DashbaordProvider and buildDatasourceProxyUrl
-   https://github.com/perses/perses/issues/4016
-*/ export { };
-
-//# sourceMappingURL=DashboardResource.js.map
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_export_star(require("./AnnotationProvider"), exports);
+function _export_star(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
+    });
+    return from;
+}

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

@@ -92,7 +92,7 @@ function DashboardProvider(props) {
 }
 function initStore(props) {
     const { initialState: { dashboardResource, isEditMode, viewPanelRef, setViewPanelRef } } = props;
-    const { kind, metadata, spec: { display, duration, refreshInterval = _constants.DEFAULT_REFRESH_INTERVAL, datasources, layouts = [], panels = {} } } = dashboardResource;
+    const { kind, metadata, spec: { display, timezone, duration, refreshInterval = _constants.DEFAULT_REFRESH_INTERVAL, datasources, layouts = [], panels = {} } } = dashboardResource;
     const links = dashboardResource.spec.links ?? [];
     const ttl = 'ttl' in dashboardResource.spec ? dashboardResource.spec.ttl : undefined;
     const store = (0, _zustand.createStore)()((0, _immer.immer)((0, _middleware.devtools)((...args)=>{
@@ -113,6 +113,7 @@ function initStore(props) {
             kind,
             metadata,
             display,
+            timezone,
             duration,
             refreshInterval,
             datasources,
@@ -123,11 +124,12 @@ function initStore(props) {
                     isEditMode
                 });
             },
-            setDashboard: ({ kind, metadata, spec: { display, panels = {}, layouts = [], duration, refreshInterval, datasources = {}, links = [] } })=>{
+            setDashboard: ({ kind, metadata, spec: { display, panels = {}, layouts = [], duration, refreshInterval, datasources = {}, links = [], timezone } })=>{
                 set((state)=>{
                     state.kind = kind;
                     state.metadata = metadata;
                     state.display = display;
+                    state.timezone = timezone;
                     state.panels = panels;
                     const { panelGroups, panelGroupOrder } = (0, _panelgroupslice.convertLayoutsToPanelGroups)(layouts);
                     state.panelGroups = panelGroups;
@@ -138,6 +140,11 @@ function initStore(props) {
                     state.links = links;
                 // TODO: add ttl here to e.g allow edition from JSON view, but probably requires quite some refactoring
                 });
+            },
+            setMetadata: (metadata)=>{
+                set((state)=>{
+                    state.metadata = typeof metadata === 'function' ? metadata(state.metadata) : metadata;
+                });
             }
         };
     })));

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

@@ -78,23 +78,26 @@ function convertLayoutsToPanelGroups(layouts) {
         const itemLayouts = [];
         const itemPanelKeys = {};
         // Split layout information from panel keys to make it easier to update just layouts on move/resize of panels
-        for (const item of layout.spec.items){
-            const panelGroupLayoutId = (0, _common.generateId)().toString();
-            itemLayouts.push({
-                i: panelGroupLayoutId,
-                w: item.width,
-                h: item.height,
-                x: item.x,
-                y: item.y
-            });
-            itemPanelKeys[panelGroupLayoutId] = (0, _spec.getPanelKeyFromRef)(item.content);
+        if ('items' in layout.spec) {
+            for (const item of layout.spec.items){
+                const panelGroupLayoutId = (0, _common.generateId)().toString();
+                itemLayouts.push({
+                    i: panelGroupLayoutId,
+                    w: item.width,
+                    h: item.height,
+                    x: item.x,
+                    y: item.y
+                });
+                itemPanelKeys[panelGroupLayoutId] = (0, _spec.getPanelKeyFromRef)(item.content);
+            }
         }
         // Create the panel group and keep track of the ID order
+        const repeatVariable = 'repeatVariable' in layout.spec ? layout.spec.repeatVariable : undefined;
         const panelGroupId = (0, _common.generateId)();
         panelGroups[panelGroupId] = {
             id: panelGroupId,
             isCollapsed: layout.spec.display?.collapse?.open === false,
-            repeatVariable: layout.spec.repeatVariable,
+            repeatVariable,
             title: layout.spec.display?.title,
             itemLayouts,
             itemPanelKeys

package/dist/cjs/context/DashboardProvider/use-save-dashboard.js

@@ -31,6 +31,7 @@ function useSaveDashboard(onSave) {
     const { dashboard, setDashboard } = (0, _useDashboard.useDashboard)();
     const { setEditMode } = (0, _dashboardproviderapi.useEditMode)();
     const { timeRange, refreshInterval } = (0, _pluginsystem.useTimeRange)();
+    const { timeZone } = (0, _pluginsystem.useTimeZoneParams)();
     const { getSavedVariablesStatus, setVariableDefaultValues } = (0, _VariableProvider.useVariableDefinitionActions)();
     const { openSaveChangesConfirmationDialog, closeSaveChangesConfirmationDialog } = (0, _dashboardproviderapi.useSaveChangesConfirmationDialog)();
     const performSave = (0, _react.useCallback)(async ()=>{
@@ -59,12 +60,17 @@ function useSaveDashboard(onSave) {
         const { isSavedVariableModified } = getSavedVariablesStatus();
         const isSavedDurationModified = (0, _spec.isRelativeTimeRange)(timeRange) && dashboard.spec.duration !== timeRange.pastDuration;
         const isSavedRefreshIntervalModified = dashboard.spec.refreshInterval !== refreshInterval;
-        if (isSavedDurationModified || isSavedVariableModified || isSavedRefreshIntervalModified) {
+        const isTimeZoneModified = timeZone === 'local' && !dashboard.spec.timezone ? false : dashboard.spec.timezone !== timeZone;
+        if (isSavedDurationModified || isSavedVariableModified || isSavedRefreshIntervalModified || isTimeZoneModified) {
             openSaveChangesConfirmationDialog({
-                onSaveChanges: (saveDefaultTimeRange, saveDefaultRefreshInterval, saveDefaultVariables)=>{
+                onSaveChanges: (options)=>{
+                    const { saveDefaultRefreshInterval, saveDefaultTimeRange, saveDefaultTimeZone, saveDefaultVariables } = options;
                     if ((0, _spec.isRelativeTimeRange)(timeRange) && saveDefaultTimeRange) {
                         dashboard.spec.duration = timeRange.pastDuration;
                     }
+                    if (saveDefaultTimeZone) {
+                        dashboard.spec.timezone = timeZone;
+                    }
                     if (saveDefaultVariables) {
                         const variables = setVariableDefaultValues();
                         dashboard.spec.variables = variables;
@@ -80,17 +86,19 @@ function useSaveDashboard(onSave) {
                 },
                 isSavedDurationModified,
                 isSavedVariableModified,
-                isSavedRefreshIntervalModified
+                isSavedRefreshIntervalModified,
+                isTimeZoneModified
             });
         } else {
             performSave();
         }
     }, [
         isSaving,
-        getSavedVariablesStatus,
         timeRange,
         dashboard,
         refreshInterval,
+        timeZone,
+        getSavedVariablesStatus,
         openSaveChangesConfirmationDialog,
         setVariableDefaultValues,
         setDashboard,

package/dist/cjs/context/DatasourceStoreProvider.js

@@ -27,15 +27,24 @@ function DatasourceStoreProvider(props) {
     const { projectName, datasourceApi, onCreate, children } = props;
     const [dashboardResource, setDashboardResource] = (0, _react.useState)(props.dashboardResource);
     const [savedDatasources, setSavedDatasources] = (0, _react.useState)(props.savedDatasources ?? {});
+    // Cache for synchronous datasource spec access
+    const datasourceSpecCache = (0, _react.useRef)(new Map());
     const project = projectName ?? dashboardResource?.metadata.project;
     const { getPlugin, listPluginMetadata } = (0, _pluginsystem.usePluginRegistry)();
+    // Helper to create cache key from DatasourceSelector
+    const createCacheKey = (0, _react.useCallback)((selector)=>{
+        const name = selector.name === undefined ? '__undefined__' : selector.name;
+        return `${selector.kind}:${name}:${project ?? 'global'}`;
+    }, [
+        project
+    ]);
     const findDatasource = (0, _pluginsystem.useEvent)(async (selector)=>{
         // Try to find it in dashboard spec
         if (dashboardResource) {
             const { datasources } = dashboardResource.spec;
             const dashboardDatasource = findDashboardDatasource(datasources, selector);
             if (dashboardDatasource !== undefined) {
-                return {
+                const result = {
                     spec: dashboardDatasource.spec,
                     proxyUrl: buildDatasourceProxyUrl(datasourceApi, {
                         project: dashboardResource.metadata.project,
@@ -43,30 +52,42 @@ function DatasourceStoreProvider(props) {
                         name: dashboardDatasource.name
                     })
                 };
+                // Cache the spec for synchronous access
+                const cacheKey = createCacheKey(selector);
+                datasourceSpecCache.current.set(cacheKey, result.spec);
+                return result;
             }
         }
         if (project) {
             // Try to find it at the project level as a Datasource resource
             const datasource = await datasourceApi.getDatasource(String(project), selector);
             if (datasource !== undefined) {
-                return {
+                const result = {
                     spec: datasource.spec,
                     proxyUrl: buildDatasourceProxyUrl(datasourceApi, {
                         project: datasource.metadata.project,
                         name: datasource.metadata.name
                     })
                 };
+                // Cache the spec for synchronous access
+                const cacheKey = createCacheKey(selector);
+                datasourceSpecCache.current.set(cacheKey, result.spec);
+                return result;
             }
         }
         // Try to find it at the global level as a GlobalDatasource resource
         const globalDatasource = await datasourceApi.getGlobalDatasource(selector);
         if (globalDatasource !== undefined) {
-            return {
+            const result = {
                 spec: globalDatasource.spec,
                 proxyUrl: buildDatasourceProxyUrl(datasourceApi, {
                     name: globalDatasource.metadata.name
                 })
             };
+            // Cache the spec for synchronous access
+            const cacheKey = createCacheKey(selector);
+            datasourceSpecCache.current.set(cacheKey, result.spec);
+            return result;
         }
         throw new Error(`No datasource found for kind '${selector.kind}' and name '${selector.name}'`);
     });
@@ -82,7 +103,10 @@ function DatasourceStoreProvider(props) {
         const { kind } = selector;
         const [{ spec, proxyUrl }, plugin] = await Promise.all([
             findDatasource(selector),
-            getPlugin('Datasource', kind)
+            getPlugin({
+                kind: 'Datasource',
+                name: kind
+            })
         ]);
         // allows extending client
         const client = plugin.createClient(spec.plugin.spec, {
@@ -158,6 +182,13 @@ function DatasourceStoreProvider(props) {
     }, [
         savedDatasources
     ]);
+    // Gets a cached datasource spec synchronously if available
+    const getDatasourceSpecSync = (0, _react.useCallback)((selector)=>{
+        const cacheKey = createCacheKey(selector);
+        return datasourceSpecCache.current.get(cacheKey);
+    }, [
+        createCacheKey
+    ]);
     const setLocalDatasources = (0, _react.useCallback)((datasources)=>{
         if (dashboardResource) {
             setDashboardResource({
@@ -174,6 +205,7 @@ function DatasourceStoreProvider(props) {
     const ctxValue = (0, _react.useMemo)(()=>({
             getDatasource,
             getDatasourceClient,
+            getDatasourceSpecSync,
             getLocalDatasources,
             setLocalDatasources,
             setSavedDatasources,
@@ -182,6 +214,7 @@ function DatasourceStoreProvider(props) {
         }), [
         getDatasource,
         getDatasourceClient,
+        getDatasourceSpecSync,
         getLocalDatasources,
         setLocalDatasources,
         listDatasourceSelectItems,
@@ -263,7 +296,7 @@ function findDashboardDatasource(dashboardDatasources, selector) {
         });
         usedNames.add(selectorName);
         const isExplicitDefault = !isOverridden && spec.default && !explicitDefaultAdded;
-        if (results[0] && (isFirst || isExplicitDefault)) {
+        if (results[0] && isExplicitDefault) {
             // If we haven't added a default yet and this is a default, add default option to the beginning of the results
             results[0].items = [
                 {

package/dist/cjs/context/VariableProvider/VariableProvider.js

@@ -55,7 +55,6 @@ const _middleware = require("zustand/middleware");
 const _shallow = require("zustand/shallow");
 const _immer1 = require("immer");
 const _pluginsystem = require("@perses-dev/plugin-system");
-const _core = require("@perses-dev/core");
 const _spec = require("@perses-dev/spec");
 const _utils = require("./utils");
 const _hydrationUtils = require("./hydrationUtils");
@@ -160,6 +159,7 @@ function PluginProvider({ children, builtinVariables }) {
                 // If the variable is a list variable and has a custom all value, then use that value instead
                 if (definition?.kind === 'ListVariable' && definition.spec.customAllValue) {
                     v.value = definition.spec.customAllValue;
+                    v.customAllValue = definition.spec.customAllValue;
                 } else {
                     v.value = v.options?.map((o)=>o.value) ?? null;
                 }
@@ -204,7 +204,7 @@ function PluginProvider({ children, builtinVariables }) {
                 kind: 'BuiltinVariable',
                 spec: {
                     name: '__range',
-                    value: ()=>(0, _spec.formatDuration)((0, _core.intervalToPrometheusDuration)(absoluteTimeRange)),
+                    value: ()=>(0, _spec.formatDuration)((0, _spec.intervalToDuration)(absoluteTimeRange)),
                     source: 'Dashboard',
                     display: {
                         name: '__range',
@@ -258,8 +258,12 @@ function PluginProvider({ children, builtinVariables }) {
         })
     });
 }
-function createVariableDefinitionStore({ initialVariableDefinitions = [], externalVariableDefinitions = [], queryParams }) {
-    const initialParams = (0, _queryparams.getInitalValuesFromQueryParameters)(queryParams ? queryParams[0] : {});
+function createVariableDefinitionStore({ initialVariableDefinitions = [], externalVariableDefinitions = [], queryParams, initialVariableValues }) {
+    const queryParamValues = (0, _queryparams.getInitalValuesFromQueryParameters)(queryParams ? queryParams[0] : {});
+    const initialParams = {
+        ...queryParamValues,
+        ...initialVariableValues
+    };
     const store = (0, _zustand.createStore)()((0, _middleware.devtools)((0, _immer.immer)((set, get)=>({
             variableState: (0, _hydrationUtils.hydrateVariableDefinitionStates)(initialVariableDefinitions, initialParams, externalVariableDefinitions),
             variableDefinitions: initialVariableDefinitions,
@@ -365,10 +369,11 @@ function createVariableDefinitionStore({ initialVariableDefinitions = [], extern
         }))));
     return store;
 }
-function VariableProvider({ children, initialVariableDefinitions = [], externalVariableDefinitions = [], builtinVariableDefinitions = [] }) {
+function VariableProvider({ children, initialVariableDefinitions = [], externalVariableDefinitions = [], builtinVariableDefinitions = [], initialVariableValues }) {
     const [store] = (0, _react.useState)(()=>createVariableDefinitionStore({
             initialVariableDefinitions,
-            externalVariableDefinitions
+            externalVariableDefinitions,
+            initialVariableValues
         }));
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(VariableDefinitionStoreContext.Provider, {
         value: store,

package/dist/cjs/context/index.js

@@ -14,6 +14,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+_export_star(require("./AnnotationProvider"), exports);
 _export_star(require("./DashboardProvider"), exports);
 _export_star(require("./DatasourceStoreProvider"), exports);
 _export_star(require("./VariableProvider"), exports);

package/dist/cjs/context/useDashboard.js

@@ -23,14 +23,16 @@ Object.defineProperty(exports, "useDashboard", {
 const _spec = require("@perses-dev/spec");
 const _DashboardProvider = require("./DashboardProvider");
 const _VariableProvider = require("./VariableProvider");
+const _AnnotationProvider = require("./AnnotationProvider");
 function useDashboard() {
-    const { panels, panelGroups, panelGroupOrder, setDashboard: setDashboardResource, kind, metadata, display, duration, refreshInterval, datasources, links, ttl } = (0, _DashboardProvider.useDashboardStore)(({ panels, panelGroups, panelGroupOrder, setDashboard, kind, metadata, display, duration, refreshInterval, datasources, links, ttl })=>({
+    const { panels, panelGroups, panelGroupOrder, setDashboard: setDashboardResource, kind, metadata, display, timezone, duration, refreshInterval, datasources, links, ttl } = (0, _DashboardProvider.useDashboardStore)(({ panels, panelGroups, panelGroupOrder, setDashboard, kind, metadata, timezone, display, duration, refreshInterval, datasources, links, ttl })=>({
             panels,
             panelGroups,
             panelGroupOrder,
             setDashboard,
             kind,
             metadata,
+            timezone,
             display,
             duration,
             refreshInterval,
@@ -39,7 +41,9 @@ function useDashboard() {
             ttl
         }));
     const { setVariableDefinitions } = (0, _VariableProvider.useVariableDefinitionActions)();
+    const { setAnnotationSpecs } = (0, _AnnotationProvider.useAnnotationActions)();
     const variables = (0, _VariableProvider.useVariableDefinitions)();
+    const annotations = (0, _AnnotationProvider.useAnnotationSpecs)();
     const layouts = convertPanelGroupsToLayouts(panelGroups, panelGroupOrder);
     const dashboard = kind === 'Dashboard' ? {
         kind,
@@ -49,7 +53,9 @@ function useDashboard() {
             panels,
             layouts,
             variables,
+            annotations,
             duration,
+            timezone,
             refreshInterval,
             datasources,
             links
@@ -62,6 +68,7 @@ function useDashboard() {
             panels,
             layouts,
             variables,
+            annotations,
             duration,
             refreshInterval,
             datasources,
@@ -71,6 +78,9 @@ function useDashboard() {
     };
     const setDashboard = (dashboardResource)=>{
         setVariableDefinitions(dashboardResource.spec.variables);
+        if (dashboardResource.spec.annotations) {
+            setAnnotationSpecs(dashboardResource.spec.annotations);
+        }
         setDashboardResource(dashboardResource);
     };
     return {

package/dist/cjs/model/index.js

@@ -14,8 +14,8 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_export_star(require("./DashboardResource"), exports);
 _export_star(require("./PanelGroupDefinition"), exports);
+_export_star(require("./VariableDefinition"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

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

@@ -36,7 +36,7 @@ const DashboardApp = (props)=>{
     });
 };
 const DashboardAppContent = (props)=>{
-    const { dashboardResource, emptyDashboardProps, isReadonly, isVariableEnabled, isDatasourceEnabled, disableShortcuts, isCreating, isInitialVariableSticky, isLeavingConfirmDialogEnabled, dashboardTitleComponent, onSave, onDiscard } = props;
+    const { dashboardResource, emptyDashboardProps, isReadonly, isVariableEnabled, isAnnotationEnabled, isDatasourceEnabled, disableShortcuts, isCreating, isInitialVariableSticky, isLeavingConfirmDialogEnabled, dashboardTitleComponent, userPreferenceTimezone, onSave, onDiscard } = props;
     const chartsTheme = (0, _components.useChartsTheme)();
     const { isEditMode, setEditMode } = (0, _context.useEditMode)();
     const { dashboard, setDashboard } = (0, _context.useDashboard)();
@@ -81,6 +81,12 @@ const DashboardAppContent = (props)=>{
         onCancelButtonClick,
         disabled: disableShortcuts
     });
+    const toolBarTimezone = (0, _react.useMemo)(()=>{
+        return dashboardResource.spec.timezone || userPreferenceTimezone || 'local';
+    }, [
+        dashboardResource.spec,
+        userPreferenceTimezone
+    ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
         sx: {
             flexGrow: 1,
@@ -92,11 +98,13 @@ const DashboardAppContent = (props)=>{
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.DashboardToolbar, {
                 dashboardName: dashboardResource.metadata.name,
+                timezone: toolBarTimezone,
                 dashboardTitleComponent: dashboardTitleComponent,
                 initialVariableIsSticky: isInitialVariableSticky,
                 onSave: onSave,
                 isReadonly: isReadonly,
                 isVariableEnabled: isVariableEnabled,
+                isAnnotationEnabled: isAnnotationEnabled,
                 isDatasourceEnabled: isDatasourceEnabled,
                 onEditButtonClick: onEditButtonClick,
                 onCancelButtonClick: onCancelButtonClick