@perses-dev/plugin-system 0.38.0 → 0.40.0

package/dist/cjs/runtime/plugin-registry.js

@@ -21,14 +21,27 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    PluginRegistryContext: ()=>PluginRegistryContext,
-    usePluginRegistry: ()=>usePluginRegistry,
-    usePlugin: ()=>usePlugin,
-    usePlugins: ()=>usePlugins,
-    useListPluginMetadata: ()=>useListPluginMetadata
+    PluginRegistryContext: function() {
+        return PluginRegistryContext;
+    },
+    usePluginRegistry: function() {
+        return usePluginRegistry;
+    },
+    usePlugin: function() {
+        return usePlugin;
+    },
+    usePlugins: function() {
+        return usePlugins;
+    },
+    useListPluginMetadata: function() {
+        return useListPluginMetadata;
+    },
+    usePluginBuiltinVariableDefinitions: function() {
+        return usePluginBuiltinVariableDefinitions;
+    }
 });
 const _react = require("react");
-const _reactQuery = require("@tanstack/react-query");
+const _reactquery = require("@tanstack/react-query");
 const PluginRegistryContext = (0, _react.createContext)(undefined);
 function usePluginRegistry() {
     const ctx = (0, _react.useContext)(PluginRegistryContext);
@@ -38,14 +51,14 @@ function usePluginRegistry() {
     return ctx;
 }
 function usePlugin(pluginType, kind, options) {
-    var ref;
+    var _options_enabled;
     // We never want to ask for a plugin when the kind isn't set yet, so disable those queries automatically
     options = {
         ...options,
-        enabled: ((ref = options === null || options === void 0 ? void 0 : options.enabled) !== null && ref !== void 0 ? ref : true) && kind !== ''
+        enabled: ((_options_enabled = options === null || options === void 0 ? void 0 : options.enabled) !== null && _options_enabled !== void 0 ? _options_enabled : true) && kind !== ''
     };
     const { getPlugin  } = usePluginRegistry();
-    return (0, _reactQuery.useQuery)([
+    return (0, _reactquery.useQuery)([
         'getPlugin',
         pluginType,
         kind
@@ -53,7 +66,7 @@ function usePlugin(pluginType, kind, options) {
 }
 function usePlugins(pluginType, plugins) {
     const { getPlugin  } = usePluginRegistry();
-    return (0, _reactQuery.useQueries)({
+    return (0, _reactquery.useQueries)({
         queries: plugins.map((p)=>{
             return {
                 queryKey: [
@@ -68,8 +81,25 @@ function usePlugins(pluginType, plugins) {
 }
 function useListPluginMetadata(pluginType, options) {
     const { listPluginMetadata  } = usePluginRegistry();
-    return (0, _reactQuery.useQuery)([
+    return (0, _reactquery.useQuery)([
         'listPluginMetadata',
         pluginType
     ], ()=>listPluginMetadata(pluginType), options);
 }
+function usePluginBuiltinVariableDefinitions() {
+    const { getPlugin , listPluginMetadata  } = usePluginRegistry();
+    return (0, _reactquery.useQuery)([
+        'usePluginBuiltinVariableDefinitions'
+    ], async ()=>{
+        const datasources = await listPluginMetadata('Datasource');
+        const datasourceKinds = new Set(datasources.map((datasource)=>datasource.kind));
+        const result = [];
+        for (const kind of datasourceKinds){
+            const plugin = await getPlugin('Datasource', kind);
+            if (plugin.getBuiltinVariableDefinitions) {
+                plugin.getBuiltinVariableDefinitions().forEach((definition)=>result.push(definition));
+            }
+        }
+        return result;
+    });
+}

package/dist/cjs/runtime/template-variables.js

@@ -21,12 +21,99 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    TemplateVariableContext: ()=>TemplateVariableContext,
-    useTemplateVariableValues: ()=>useTemplateVariableValues,
-    useReplaceVariablesInString: ()=>useReplaceVariablesInString
+    VariableStoreStateMap: function() {
+        return VariableStoreStateMap;
+    },
+    TemplateVariableContext: function() {
+        return TemplateVariableContext;
+    },
+    useTemplateVariableValues: function() {
+        return useTemplateVariableValues;
+    },
+    useVariableValues: function() {
+        return useVariableValues;
+    },
+    useReplaceVariablesInString: function() {
+        return useReplaceVariablesInString;
+    }
 });
 const _react = require("react");
+const _immer = require("immer");
 const _utils = require("../utils");
+const _builtinvariables = require("./builtin-variables");
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+let _immerable = _immer.immerable;
+class VariableStoreStateMap {
+    /**
+   * Get variable state by key.
+   * @param key
+   */ get(key) {
+        return this._sourceStatesOrEmpty(key.source)[key.name];
+    }
+    /**
+   * Set variable state by key.
+   * @param key
+   * @param value
+   */ set(key, value) {
+        const sourceName = this._sourceName(key.source);
+        if (!this._state[sourceName]) {
+            this._state[sourceName] = {};
+        }
+        this._sourceStatesOrEmpty(key.source)[key.name] = value;
+        return value;
+    }
+    /**
+   * Check presence of variable state by key.
+   * @param key
+   */ has(key) {
+        return this._sourceStatesOrEmpty(key.source)[key.name] !== undefined;
+    }
+    /**
+   * Delete variable state by key.
+   * @param key
+   */ delete(key) {
+        var _Object_keys;
+        const result = this.has(key);
+        const sourceName = this._sourceName(key.source);
+        const sourceStates = this._state[sourceName];
+        // Delete var from source state
+        if (sourceStates) {
+            delete sourceStates[key.name];
+        }
+        // Delete source state from state if empty
+        if (((_Object_keys = Object.keys(sourceStates !== null && sourceStates !== void 0 ? sourceStates : {})) === null || _Object_keys === void 0 ? void 0 : _Object_keys.length) === 0) {
+            delete this._state[sourceName];
+        }
+        return result;
+    }
+    _sourceName(source) {
+        return source !== null && source !== void 0 ? source : this.DEFAULT_LOCAL_SOURCE_NAME;
+    }
+    _sourceStatesOrEmpty(source) {
+        var _this__state_this__sourceName;
+        return (_this__state_this__sourceName = this._state[this._sourceName(source)]) !== null && _this__state_this__sourceName !== void 0 ? _this__state_this__sourceName : {};
+    }
+    constructor(){
+        /**
+   * "Immerable" is mandatory to be able to use this class in an immer context.
+   * Ref: https://docs.pmnd.rs/zustand/integrations/immer-middleware#gotchas
+   */ _define_property(this, _immerable, true);
+        _define_property(this, "DEFAULT_LOCAL_SOURCE_NAME", '');
+        _define_property(this, "_state", {});
+    }
+}
 const TemplateVariableContext = (0, _react.createContext)(undefined);
 function useTemplateVariableContext() {
     const ctx = (0, _react.useContext)(TemplateVariableContext);
@@ -55,9 +142,14 @@ function useTemplateVariableValues(names) {
     }
     return values;
 }
+function useVariableValues(names) {
+    const templateVariableValues = useTemplateVariableValues(names);
+    const builtinVariableValues = (0, _builtinvariables.useBuiltinVariableValues)(names);
+    return Object.assign(templateVariableValues, builtinVariableValues);
+}
 function useReplaceVariablesInString(str) {
     const variablesInString = str ? (0, _utils.parseTemplateVariables)(str) : [];
-    const variableValues = useTemplateVariableValues(variablesInString);
+    const variableValues = useVariableValues(variablesInString);
     if (!str) return undefined;
     return (0, _utils.replaceTemplateVariables)(str, variableValues);
 }

package/dist/cjs/runtime/time-series-queries.js

@@ -21,17 +21,27 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    TIME_SERIES_QUERY_KEY: ()=>TIME_SERIES_QUERY_KEY,
-    useTimeSeriesQuery: ()=>useTimeSeriesQuery,
-    useTimeSeriesQueries: ()=>useTimeSeriesQueries,
-    useActiveTimeSeriesQueries: ()=>useActiveTimeSeriesQueries,
-    getActiveTimeSeriesQueries: ()=>getActiveTimeSeriesQueries
+    TIME_SERIES_QUERY_KEY: function() {
+        return TIME_SERIES_QUERY_KEY;
+    },
+    useTimeSeriesQuery: function() {
+        return useTimeSeriesQuery;
+    },
+    useTimeSeriesQueries: function() {
+        return useTimeSeriesQueries;
+    },
+    useActiveTimeSeriesQueries: function() {
+        return useActiveTimeSeriesQueries;
+    },
+    getActiveTimeSeriesQueries: function() {
+        return getActiveTimeSeriesQueries;
+    }
 });
-const _reactQuery = require("@tanstack/react-query");
-const _templateVariables = require("./template-variables");
-const _timeRangeProvider = require("./TimeRangeProvider");
+const _reactquery = require("@tanstack/react-query");
+const _templatevariables = require("./template-variables");
+const _TimeRangeProvider = require("./TimeRangeProvider");
 const _datasources = require("./datasources");
-const _pluginRegistry = require("./plugin-registry");
+const _pluginregistry = require("./plugin-registry");
 const TIME_SERIES_QUERY_KEY = 'TimeSeriesQuery';
 /**
  * Returns a serialized string of the current state of variable values.
@@ -63,8 +73,8 @@ function getQueryOptions({ plugin , definition , context  }) {
     let waitToLoad = false;
     if (variableDependencies) {
         waitToLoad = variableDependencies.some((v)=>{
-            var ref;
-            return (ref = variableState[v]) === null || ref === void 0 ? void 0 : ref.loading;
+            var _variableState_v;
+            return (_variableState_v = variableState[v]) === null || _variableState_v === void 0 ? void 0 : _variableState_v.loading;
         });
     }
     const queryEnabled = plugin !== undefined && !waitToLoad;
@@ -73,16 +83,17 @@ function getQueryOptions({ plugin , definition , context  }) {
         queryEnabled
     };
 }
-const useTimeSeriesQuery = (definition, options)=>{
-    const { data: plugin  } = (0, _pluginRegistry.usePlugin)(TIME_SERIES_QUERY_KEY, definition.spec.plugin.kind);
+const useTimeSeriesQuery = (definition, options, queryOptions)=>{
+    const { data: plugin  } = (0, _pluginregistry.usePlugin)(TIME_SERIES_QUERY_KEY, definition.spec.plugin.kind);
     const context = useTimeSeriesQueryContext();
     const { queryEnabled , queryKey  } = getQueryOptions({
         plugin,
         definition,
         context
     });
-    return (0, _reactQuery.useQuery)({
-        enabled: queryEnabled,
+    var _queryOptions_enabled;
+    return (0, _reactquery.useQuery)({
+        enabled: ((_queryOptions_enabled = queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.enabled) !== null && _queryOptions_enabled !== void 0 ? _queryOptions_enabled : true) || queryEnabled,
         queryKey: queryKey,
         refetchInterval: context.refreshIntervalInMs > 0 ? context.refreshIntervalInMs : false,
         queryFn: ()=>{
@@ -99,23 +110,24 @@ const useTimeSeriesQuery = (definition, options)=>{
         }
     });
 };
-function useTimeSeriesQueries(definitions, options) {
-    const { getPlugin  } = (0, _pluginRegistry.usePluginRegistry)();
+function useTimeSeriesQueries(definitions, options, queryOptions) {
+    const { getPlugin  } = (0, _pluginregistry.usePluginRegistry)();
     const context = useTimeSeriesQueryContext();
-    const pluginLoaderResponse = (0, _pluginRegistry.usePlugins)(TIME_SERIES_QUERY_KEY, definitions.map((d)=>({
+    const pluginLoaderResponse = (0, _pluginregistry.usePlugins)(TIME_SERIES_QUERY_KEY, definitions.map((d)=>({
             kind: d.spec.plugin.kind
         })));
-    return (0, _reactQuery.useQueries)({
+    return (0, _reactquery.useQueries)({
         queries: definitions.map((definition, idx)=>{
-            var ref;
-            const plugin = (ref = pluginLoaderResponse[idx]) === null || ref === void 0 ? void 0 : ref.data;
+            var _pluginLoaderResponse_idx;
+            const plugin = (_pluginLoaderResponse_idx = pluginLoaderResponse[idx]) === null || _pluginLoaderResponse_idx === void 0 ? void 0 : _pluginLoaderResponse_idx.data;
             const { queryEnabled , queryKey  } = getQueryOptions({
                 plugin,
                 definition,
                 context
             });
+            var _queryOptions_enabled;
             return {
-                enabled: queryEnabled,
+                enabled: ((_queryOptions_enabled = queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.enabled) !== null && _queryOptions_enabled !== void 0 ? _queryOptions_enabled : true) && queryEnabled,
                 queryKey: queryKey,
                 refetchInterval: context.refreshIntervalInMs > 0 ? context.refreshIntervalInMs : undefined,
                 queryFn: async ()=>{
@@ -135,8 +147,8 @@ function useTimeSeriesQueries(definitions, options) {
 /**
  * Build the time series query context object from data available at runtime
  */ function useTimeSeriesQueryContext() {
-    const { absoluteTimeRange , refreshKey , refreshIntervalInMs  } = (0, _timeRangeProvider.useTimeRange)();
-    const variableState = (0, _templateVariables.useTemplateVariableValues)();
+    const { absoluteTimeRange , refreshKey , refreshIntervalInMs  } = (0, _TimeRangeProvider.useTimeRange)();
+    const variableState = (0, _templatevariables.useVariableValues)();
     const datasourceStore = (0, _datasources.useDatasourceStore)();
     return {
         timeRange: absoluteTimeRange,
@@ -147,7 +159,7 @@ function useTimeSeriesQueries(definitions, options) {
     };
 }
 function useActiveTimeSeriesQueries() {
-    const queryClient = (0, _reactQuery.useQueryClient)();
+    const queryClient = (0, _reactquery.useQueryClient)();
     const queryCache = queryClient.getQueryCache();
     return getActiveTimeSeriesQueries(queryCache);
 }
@@ -156,8 +168,8 @@ function getActiveTimeSeriesQueries(cache) {
     for (const query of cache.findAll({
         type: 'active'
     })){
-        var ref;
-        const firstPart = (ref = query.queryKey) === null || ref === void 0 ? void 0 : ref[0];
+        var _query_queryKey;
+        const firstPart = (_query_queryKey = query.queryKey) === null || _query_queryKey === void 0 ? void 0 : _query_queryKey[0];
         if ((firstPart === null || firstPart === void 0 ? void 0 : firstPart.kind) && firstPart.kind.startsWith(TIME_SERIES_QUERY_KEY)) {
             queries.push(query);
         }

package/dist/cjs/stories/shared-utils/decorators/WithDataQueries.js

@@ -16,10 +16,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "WithDataQueries", {
     enumerable: true,
-    get: ()=>WithDataQueries
+    get: function() {
+        return WithDataQueries;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
-const _pluginSystem = require("@perses-dev/plugin-system");
+const _jsxruntime = require("react/jsx-runtime");
+const _pluginsystem = require("@perses-dev/plugin-system");
 // Type guard because storybook types parameters as `any`
 function isWithDataQueriesParameter(parameter) {
     return !!parameter && typeof parameter === 'object' && 'props' in parameter;
@@ -32,8 +34,8 @@ const WithDataQueries = (Story, context)=>{
         }
     };
     const props = parameter === null || parameter === void 0 ? void 0 : parameter.props;
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.DataQueriesProvider, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DataQueriesProvider, {
         ...props,
-        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(Story, {})
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(Story, {})
     });
 };

package/dist/cjs/stories/shared-utils/decorators/WithPluginRegistry.js

@@ -16,13 +16,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "WithPluginRegistry", {
     enumerable: true,
-    get: ()=>WithPluginRegistry
+    get: function() {
+        return WithPluginRegistry;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
-const _pluginSystem = require("@perses-dev/plugin-system");
-const _pluginJson = /*#__PURE__*/ _interopRequireDefault(require("@perses-dev/prometheus-plugin/plugin.json"));
-const _pluginJson1 = /*#__PURE__*/ _interopRequireDefault(require("@perses-dev/panels-plugin/plugin.json"));
-function _interopRequireDefault(obj) {
+const _jsxruntime = require("react/jsx-runtime");
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _pluginjson = /*#__PURE__*/ _interop_require_default(require("@perses-dev/prometheus-plugin/plugin.json"));
+const _pluginjson1 = /*#__PURE__*/ _interop_require_default(require("@perses-dev/panels-plugin/plugin.json"));
+function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
@@ -35,7 +37,7 @@ function _getRequireWildcardCache(nodeInterop) {
         return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
     })(nodeInterop);
 }
-function _interopRequireWildcard(obj, nodeInterop) {
+function _interop_require_wildcard(obj, nodeInterop) {
     if (!nodeInterop && obj && obj.__esModule) {
         return obj;
     }
@@ -66,30 +68,30 @@ function _interopRequireWildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const bundledPluginLoader = (0, _pluginSystem.dynamicImportPluginLoader)([
+const bundledPluginLoader = (0, _pluginsystem.dynamicImportPluginLoader)([
     {
-        resource: _pluginJson.default,
+        resource: _pluginjson.default,
         // This throws an error in CI (but not locally for some reason), likely because
         // this package isn't a dependency for dashboards. We probably do not want to
         // make it one solely for type-checking in storybook.
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
-        importPlugin: ()=>Promise.resolve().then(()=>/*#__PURE__*/ _interopRequireWildcard(require("@perses-dev/prometheus-plugin")))
+        importPlugin: ()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("@perses-dev/prometheus-plugin")))
     },
     {
-        resource: _pluginJson1.default,
+        resource: _pluginjson1.default,
         // Same comment as above.
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
-        importPlugin: ()=>Promise.resolve().then(()=>/*#__PURE__*/ _interopRequireWildcard(require("@perses-dev/panels-plugin")))
+        importPlugin: ()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("@perses-dev/panels-plugin")))
     }
 ]);
 const WithPluginRegistry = (Story)=>{
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.PluginRegistry, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.PluginRegistry, {
         pluginLoader: bundledPluginLoader,
         defaultPluginKinds: {
             TimeSeriesQuery: 'PrometheusTimeSeriesQuery'
         },
-        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(Story, {})
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(Story, {})
     });
 };

package/dist/cjs/stories/shared-utils/decorators/WithPluginSystemBuiltinVariables.js

@@ -0,0 +1,42 @@
+// Copyright 2023 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, "WithPluginSystemBuiltinVariables", {
+    enumerable: true,
+    get: function() {
+        return WithPluginSystemBuiltinVariables;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _runtime = require("../../../runtime");
+// Type guard because storybook types parameters as `any`
+function isWithBuiltinVariableParameter(parameter) {
+    return !!parameter && Array.isArray(parameter);
+}
+const WithPluginSystemBuiltinVariables = (Story, context)=>{
+    const initParameter = context.parameters.withPluginSystemBuiltinVariables;
+    const defaultValue = {
+        variables: []
+    };
+    const parameter = isWithBuiltinVariableParameter(initParameter) ? initParameter : {
+        props: defaultValue
+    };
+    const props = parameter === null || parameter === void 0 ? void 0 : parameter.props;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_runtime.BuiltinVariableContext.Provider, {
+        value: props,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(Story, {})
+    });
+};

package/dist/cjs/stories/shared-utils/decorators/WithPluginSystemDatasourceStore.js

@@ -16,23 +16,25 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "WithPluginSystemDatasourceStore", {
     enumerable: true,
-    get: ()=>WithPluginSystemDatasourceStore
+    get: function() {
+        return WithPluginSystemDatasourceStore;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
-const _pluginSystem = require("@perses-dev/plugin-system");
+const _jsxruntime = require("react/jsx-runtime");
+const _pluginsystem = require("@perses-dev/plugin-system");
 const prometheusDemoUrl = 'https://prometheus.demo.do.prometheus.io';
 // Type guard because storybook types parameters as `any`
 function isWithDatastoreStoreParameter(parameter) {
     return !!parameter && typeof parameter === 'object' && 'props' in parameter;
 }
 const WithPluginSystemDatasourceStore = (Story, context)=>{
-    const { getPlugin  } = (0, _pluginSystem.usePluginRegistry)();
+    const { getPlugin  } = (0, _pluginsystem.usePluginRegistry)();
     const initParameter = context.parameters.withPluginSystemDatasourceStore;
     // This currently provides a very simplified default to enable use in some
     // basic stories. It likely will need expanding in the future.
     // In general, `plugin-system` would probably benefit from a provider wrapper
     // for `DatasourceStoreContext` that is more generic than the one available
-    // in in the `dashboard` package for non-dashboard use cases.
+    // in the `dashboard` package for non-dashboard use cases.
     const defaultValue = {
         getDatasource: (selector)=>{
             if (selector.kind === 'PrometheusDatasource') {
@@ -50,7 +52,7 @@ const WithPluginSystemDatasourceStore = (Story, context)=>{
             if (selector.kind === 'PrometheusDatasource') {
                 const plugin = await getPlugin('Datasource', 'PrometheusDatasource');
                 const client = plugin.createClient({
-                    direct_url: prometheusDemoUrl
+                    directUrl: prometheusDemoUrl
                 }, {
                     proxyUrl: prometheusDemoUrl
                 });
@@ -58,14 +60,18 @@ const WithPluginSystemDatasourceStore = (Story, context)=>{
             }
             throw new Error(`WithDatasourceStore is not configured to support kind: ${selector.kind}`);
         },
-        listDatasourceMetadata: async (datasourcePluginKind)=>{
+        listDatasourceSelectItems: async (datasourcePluginKind)=>{
             if (datasourcePluginKind === 'PrometheusDatasource') {
                 return Promise.resolve([
                     {
-                        name: 'PrometheusDatasource',
-                        selector: {
-                            kind: 'PrometheusDatasource'
-                        }
+                        items: [
+                            {
+                                name: 'PrometheusDatasource',
+                                selector: {
+                                    kind: 'PrometheusDatasource'
+                                }
+                            }
+                        ]
                     }
                 ]);
             }
@@ -76,8 +82,8 @@ const WithPluginSystemDatasourceStore = (Story, context)=>{
         props: defaultValue
     };
     const props = parameter === null || parameter === void 0 ? void 0 : parameter.props;
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.DatasourceStoreContext.Provider, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DatasourceStoreContext.Provider, {
         value: props,
-        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(Story, {})
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(Story, {})
     });
 };

package/dist/cjs/stories/shared-utils/decorators/WithPluginSystemTemplateVariables.js

@@ -16,9 +16,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "WithPluginSystemTemplateVariables", {
     enumerable: true,
-    get: ()=>WithPluginSystemTemplateVariables
+    get: function() {
+        return WithPluginSystemTemplateVariables;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _runtime = require("../../../runtime");
 // Type guard because storybook types parameters as `any`
 function isWithTemplateVariableParameter(parameter) {
@@ -33,8 +35,8 @@ const WithPluginSystemTemplateVariables = (Story, context)=>{
         props: defaultValue
     };
     const props = parameter === null || parameter === void 0 ? void 0 : parameter.props;
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_runtime.TemplateVariableContext.Provider, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_runtime.TemplateVariableContext.Provider, {
         value: props,
-        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(Story, {})
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(Story, {})
     });
 };

package/dist/cjs/stories/shared-utils/decorators/WithTimeRange.js

@@ -16,10 +16,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "WithTimeRange", {
     enumerable: true,
-    get: ()=>WithTimeRange
+    get: function() {
+        return WithTimeRange;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
-const _pluginSystem = require("@perses-dev/plugin-system");
+const _jsxruntime = require("react/jsx-runtime");
+const _pluginsystem = require("@perses-dev/plugin-system");
 // Type guard because storybook types parameters as `any`
 function isWithTimeRangeParameter(parameter) {
     return !!parameter && typeof parameter === 'object' && 'props' in parameter;
@@ -28,12 +30,12 @@ const WithTimeRange = (Story, context)=>{
     const initParameter = context.parameters.withTimeRange;
     const parameter = isWithTimeRangeParameter(initParameter) ? initParameter : undefined;
     const props = parameter === null || parameter === void 0 ? void 0 : parameter.props;
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.TimeRangeProvider, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.TimeRangeProvider, {
         initialRefreshInterval: "0s",
         initialTimeRange: {
             pastDuration: '1h'
         },
         ...props,
-        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(Story, {})
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(Story, {})
     });
 };

package/dist/cjs/stories/shared-utils/decorators/index.js

@@ -14,19 +14,22 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./WithDataQueries"), exports);
-_exportStar(require("./WithPluginRegistry"), exports);
-_exportStar(require("./WithPluginSystemDatasourceStore"), exports);
-_exportStar(require("./WithPluginSystemTemplateVariables"), exports);
-_exportStar(require("./WithTimeRange"), exports);
-function _exportStar(from, to) {
+_export_star(require("./WithDataQueries"), exports);
+_export_star(require("./WithPluginRegistry"), exports);
+_export_star(require("./WithPluginSystemBuiltinVariables"), exports);
+_export_star(require("./WithPluginSystemDatasourceStore"), exports);
+_export_star(require("./WithPluginSystemTemplateVariables"), exports);
+_export_star(require("./WithTimeRange"), 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];
-            }
-        });
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
     });
     return from;
 }