@perses-dev/dashboards 0.54.0-beta.0 → 0.54.0-beta.10

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/defaults.js

@@ -0,0 +1,32 @@
+// 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 DEFAULT_DASHBOARD_DURATION () {
+        return DEFAULT_DASHBOARD_DURATION;
+    },
+    get DEFAULT_REFRESH_INTERVAL () {
+        return DEFAULT_REFRESH_INTERVAL;
+    }
+});
+const DEFAULT_DASHBOARD_DURATION = '1h';
+const DEFAULT_REFRESH_INTERVAL = '0s';

package/dist/cjs/constants/index.js

@@ -17,6 +17,7 @@ Object.defineProperty(exports, "__esModule", {
 _export_star(require("./grid-layout-config"), exports);
 _export_star(require("./styles"), exports);
 _export_star(require("./user-interface-text"), exports);
+_export_star(require("./defaults"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

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',

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/cjs/context/AnnotationProvider/index.js

@@ -0,0 +1,30 @@
+// 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
+});
+_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

@@ -38,8 +38,8 @@ const _middleware = require("zustand/middleware");
 const _immer = require("zustand/middleware/immer");
 const _shallow = require("zustand/shallow");
 const _react = require("react");
-const _core = require("@perses-dev/core");
 const _pluginsystem = require("@perses-dev/plugin-system");
+const _constants = require("../../constants");
 const _panelgroupeditorslice = require("./panel-group-editor-slice");
 const _panelgroupslice = require("./panel-group-slice");
 const _paneleditorslice = require("./panel-editor-slice");
@@ -92,7 +92,7 @@ function DashboardProvider(props) {
 }
 function initStore(props) {
     const { initialState: { dashboardResource, isEditMode, viewPanelRef, setViewPanelRef } } = props;
-    const { kind, metadata, spec: { display, duration, refreshInterval = _core.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,21 +124,27 @@ 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;
                     state.panelGroupOrder = panelGroupOrder;
                     state.duration = duration;
-                    state.refreshInterval = refreshInterval ?? _core.DEFAULT_REFRESH_INTERVAL;
+                    state.refreshInterval = refreshInterval ?? _constants.DEFAULT_REFRESH_INTERVAL;
                     state.datasources = datasources;
                     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 = [
                 {