@perses-dev/dashboards 0.0.0-snapshot-panel-extra-content-3-17f9c42 → 0.0.0-snapshot-scatterplot-fix-imports-95e1b59

package/dist/cjs/context/DatasourceStoreProvider.js

@@ -16,25 +16,34 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "DatasourceStoreProvider", {
     enumerable: true,
-    get: ()=>DatasourceStoreProvider
+    get: function() {
+        return DatasourceStoreProvider;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _core = require("@perses-dev/core");
-const _pluginSystem = require("@perses-dev/plugin-system");
+const _pluginsystem = require("@perses-dev/plugin-system");
 function DatasourceStoreProvider(props) {
-    const { dashboardResource , projectName , datasourceApi , onCreate , children  } = props;
+    const { projectName, datasourceApi, onCreate, children } = props;
+    const [dashboardResource, setDashboardResource] = (0, _react.useState)(props.dashboardResource);
+    var _props_savedDatasources;
+    const [savedDatasources, setSavedDatasources] = (0, _react.useState)((_props_savedDatasources = props.savedDatasources) !== null && _props_savedDatasources !== void 0 ? _props_savedDatasources : {});
     const project = projectName !== null && projectName !== void 0 ? projectName : dashboardResource === null || dashboardResource === void 0 ? void 0 : dashboardResource.metadata.project;
-    const { getPlugin , listPluginMetadata  } = (0, _pluginSystem.usePluginRegistry)();
+    const { getPlugin, listPluginMetadata } = (0, _pluginsystem.usePluginRegistry)();
     const findDatasource = (0, _core.useEvent)(async (selector)=>{
         // Try to find it in dashboard spec
         if (dashboardResource) {
-            const { datasources  } = dashboardResource.spec;
+            const { datasources } = dashboardResource.spec;
             const dashboardDatasource = findDashboardDatasource(datasources, selector);
             if (dashboardDatasource !== undefined) {
                 return {
-                    spec: dashboardDatasource,
-                    proxyUrl: undefined
+                    spec: dashboardDatasource.spec,
+                    proxyUrl: buildDatasourceProxyUrl(datasourceApi, {
+                        project: dashboardResource.metadata.project,
+                        dashboard: dashboardResource.metadata.name,
+                        name: dashboardDatasource.name
+                    })
                 };
             }
         }
@@ -43,8 +52,11 @@ function DatasourceStoreProvider(props) {
             const datasource = await datasourceApi.getDatasource(project, selector);
             if (datasource !== undefined) {
                 return {
-                    spec: datasource.resource.spec,
-                    proxyUrl: datasource.proxyUrl
+                    spec: datasource.spec,
+                    proxyUrl: buildDatasourceProxyUrl(datasourceApi, {
+                        project: datasource.metadata.project,
+                        name: datasource.metadata.name
+                    })
                 };
             }
         }
@@ -52,23 +64,25 @@ function DatasourceStoreProvider(props) {
         const globalDatasource = await datasourceApi.getGlobalDatasource(selector);
         if (globalDatasource !== undefined) {
             return {
-                spec: globalDatasource.resource.spec,
-                proxyUrl: globalDatasource.proxyUrl
+                spec: globalDatasource.spec,
+                proxyUrl: buildDatasourceProxyUrl(datasourceApi, {
+                    name: globalDatasource.metadata.name
+                })
             };
         }
         throw new Error(`No datasource found for kind '${selector.kind}' and name '${selector.name}'`);
     });
     // Gets a datasource spec for a given selector
     const getDatasource = (0, _react.useCallback)(async (selector)=>{
-        const { spec  } = await findDatasource(selector);
+        const { spec } = await findDatasource(selector);
         return spec;
     }, [
         findDatasource
     ]);
     // Given a Datasource selector, finds the spec for it and then uses its corresponding plugin the create a client
     const getDatasourceClient = (0, _react.useCallback)(async function getClient(selector) {
-        const { kind  } = selector;
-        const [{ spec , proxyUrl  }, plugin] = await Promise.all([
+        const { kind } = selector;
+        const [{ spec, proxyUrl }, plugin] = await Promise.all([
             findDatasource(selector),
             getPlugin('Datasource', kind)
         ]);
@@ -85,53 +99,110 @@ function DatasourceStoreProvider(props) {
         getPlugin,
         onCreate
     ]);
-    const listDatasourceMetadata = (0, _core.useEvent)(async (datasourcePluginKind)=>{
+    const listDatasourceSelectItems = (0, _core.useEvent)(async (datasourcePluginKind)=>{
         const [pluginMetadata, datasources, globalDatasources] = await Promise.all([
             listPluginMetadata('Datasource'),
             project ? datasourceApi.listDatasources(project, datasourcePluginKind) : [],
             datasourceApi.listGlobalDatasources(datasourcePluginKind)
         ]);
-        // Find the metadata for the plugin type they asked for so we can use it for the name of the default datasource
+        // Find the metadata for the plugin type they asked for, so we can use it for the name of the default datasource
         const datasourcePluginMetadata = pluginMetadata.find((metadata)=>metadata.kind === datasourcePluginKind);
         if (datasourcePluginMetadata === undefined) {
             throw new Error(`Could not find a Datasource plugin with kind '${datasourcePluginKind}'`);
         }
-        // Get helper for de-duping results properly
-        const { results , addResult  } = buildListDatasourceMetadataResults(datasourcePluginMetadata.display.name);
-        // Start with dashboard datasources that have highest precedence
+        // Get helper for computing results properly
+        const { results, addItem } = buildDatasourceSelectItemGroups(datasourcePluginMetadata.display.name);
+        // Start with dashboard datasources with the highest precedence
         if (dashboardResource === null || dashboardResource === void 0 ? void 0 : dashboardResource.spec.datasources) {
             for(const selectorName in dashboardResource.spec.datasources){
                 const spec = dashboardResource.spec.datasources[selectorName];
                 if (spec === undefined || spec.plugin.kind !== datasourcePluginKind) continue;
-                addResult(spec, selectorName);
+                const saved = selectorName in savedDatasources;
+                addItem({
+                    spec,
+                    selectorName,
+                    selectorGroup: 'dashboard',
+                    saved
+                });
             }
         }
         // Now look at project-level datasources
         for (const datasource of datasources){
-            const selectorName1 = datasource.metadata.name;
-            addResult(datasource.spec, selectorName1);
+            const selectorName = datasource.metadata.name;
+            addItem({
+                spec: datasource.spec,
+                selectorName,
+                selectorGroup: 'project',
+                editLink: `/projects/${project}/datasources`
+            });
         }
         // And finally global datasources
         for (const globalDatasource of globalDatasources){
-            const selectorName2 = globalDatasource.metadata.name;
-            addResult(globalDatasource.spec, selectorName2);
+            const selectorName = globalDatasource.metadata.name;
+            addItem({
+                spec: globalDatasource.spec,
+                selectorName,
+                selectorGroup: 'global',
+                editLink: '/admin/datasources'
+            });
         }
         return results;
     });
+    const getLocalDatasources = (0, _react.useCallback)(()=>{
+        var _dashboardResource_spec_datasources;
+        return (_dashboardResource_spec_datasources = dashboardResource === null || dashboardResource === void 0 ? void 0 : dashboardResource.spec.datasources) !== null && _dashboardResource_spec_datasources !== void 0 ? _dashboardResource_spec_datasources : {};
+    }, [
+        dashboardResource
+    ]);
+    const getSavedDatasources = (0, _react.useCallback)(()=>{
+        return savedDatasources;
+    }, [
+        savedDatasources
+    ]);
+    const setLocalDatasources = (0, _react.useCallback)((datasources)=>{
+        if (dashboardResource) {
+            setDashboardResource(dashboardResource.kind === 'Dashboard' ? {
+                ...dashboardResource,
+                spec: {
+                    ...dashboardResource.spec,
+                    datasources: datasources
+                }
+            } : {
+                ...dashboardResource,
+                spec: {
+                    ...dashboardResource.spec,
+                    datasources: datasources
+                }
+            });
+        }
+    }, [
+        dashboardResource
+    ]);
     const ctxValue = (0, _react.useMemo)(()=>({
             getDatasource,
             getDatasourceClient,
-            listDatasourceMetadata
+            getLocalDatasources,
+            setLocalDatasources,
+            setSavedDatasources,
+            getSavedDatasources,
+            listDatasourceSelectItems
         }), [
         getDatasource,
         getDatasourceClient,
-        listDatasourceMetadata
+        getLocalDatasources,
+        setLocalDatasources,
+        listDatasourceSelectItems,
+        setSavedDatasources,
+        getSavedDatasources
     ]);
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.DatasourceStoreContext.Provider, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DatasourceStoreContext.Provider, {
         value: ctxValue,
         children: children
     });
 }
+function buildDatasourceProxyUrl(api, params) {
+    return api.buildProxyUrl ? api.buildProxyUrl(params) : '';
+}
 // Helper to find a datasource in the list embedded in a dashboard spec
 function findDashboardDatasource(dashboardDatasources, selector) {
     if (dashboardDatasources === undefined) return undefined;
@@ -139,42 +210,98 @@ function findDashboardDatasource(dashboardDatasources, selector) {
     if (selector.name !== undefined) {
         const named = dashboardDatasources[selector.name];
         if (named === undefined) return undefined;
-        return named.plugin.kind === selector.kind ? named : undefined;
+        return named.plugin.kind === selector.kind ? {
+            name: selector.name,
+            spec: named
+        } : undefined;
     }
     // If only using a kind, try to find one with that kind that is the default
-    return Object.values(dashboardDatasources).find((ds)=>ds.plugin.kind === selector.kind && ds.default === true);
+    const result = Object.entries(dashboardDatasources).find((entry)=>entry[1].plugin.kind === selector.kind && entry[1].default);
+    if (!result) {
+        return undefined;
+    }
+    return {
+        name: result[0],
+        spec: result[1]
+    };
 }
-// Helper for building a list of DatasourceMetadata results that will take care of de-duping already used selectors
-function buildListDatasourceMetadataResults(pluginDisplayName) {
+/**
+ * Helper for building a list of DatasourceSelectItemGroup results.
+ * @param pluginDisplayName
+ */ function buildDatasourceSelectItemGroups(pluginDisplayName) {
     const results = [];
     const usedNames = new Set();
-    let defaultAdded = false;
-    const addResult = (spec, selectorName)=>{
-        var ref;
-        // If we haven't added a default yet and this is a default, add default option to the beginning of the results
-        if (spec.default && defaultAdded === false) {
-            results.unshift({
-                name: `Default ${pluginDisplayName}`,
-                selector: {
-                    kind: spec.plugin.kind
-                }
+    let isFirst = true;
+    let explicitDefaultAdded = false;
+    const groupIndices = {};
+    let currentGroupIndex = 1; // 0 is the default group, always there as it contains at least the first item.
+    const addItem = ({ spec, selectorName, selectorGroup: group, editLink, saved })=>{
+        var _spec_display;
+        group = group !== null && group !== void 0 ? group : '';
+        // Ensure the default group is always present as soon as an item is added.
+        if (isFirst) {
+            results.push({
+                group: `Default ${pluginDisplayName}`,
+                items: []
             });
-            defaultAdded = true;
         }
-        // If we already have a datasource with this selector name, ignore it, otherwise add to end of list
-        if (usedNames.has(selectorName)) return;
-        var ref1;
-        results.push({
-            name: (ref1 = (ref = spec.display) === null || ref === void 0 ? void 0 : ref.name) !== null && ref1 !== void 0 ? ref1 : selectorName,
+        var _groupIndices_group;
+        // Create the group if necessary
+        let selectItemGroup = results[(_groupIndices_group = groupIndices[group]) !== null && _groupIndices_group !== void 0 ? _groupIndices_group : -1];
+        if (!selectItemGroup) {
+            groupIndices[group] = currentGroupIndex;
+            selectItemGroup = {
+                items: [],
+                group,
+                editLink
+            };
+            results[currentGroupIndex] = selectItemGroup;
+            currentGroupIndex++;
+        }
+        // Add item to the group
+        const isOverridden = usedNames.has(selectorName);
+        var _spec_display_name;
+        selectItemGroup.items.push({
+            name: (_spec_display_name = (_spec_display = spec.display) === null || _spec_display === void 0 ? void 0 : _spec_display.name) !== null && _spec_display_name !== void 0 ? _spec_display_name : selectorName,
+            overridden: isOverridden,
+            saved,
             selector: {
                 kind: spec.plugin.kind,
-                name: selectorName
+                name: selectorName,
+                group
             }
         });
         usedNames.add(selectorName);
+        const isExplicitDefault = !isOverridden && spec.default && !explicitDefaultAdded;
+        if (results[0] && (isFirst || 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 = [
+                {
+                    name: `Default (${selectorName} from ${group})`,
+                    selector: {
+                        kind: spec.plugin.kind
+                    }
+                }
+            ];
+            // We consider that we added the default datasource only if it has been explicitly set as default.
+            // If we add this datasource as default just because it's the first, it still needs to be overridable by
+            // another datasource explicitly set as default.
+            explicitDefaultAdded = isExplicitDefault;
+        }
+        // At the end, we make sure the overriding item(s) is well flagged so
+        if (isOverridden) {
+            for(let i = explicitDefaultAdded ? 1 : 0; i < currentGroupIndex; i++){
+                var _results_i;
+                var _results_i_items;
+                ((_results_i_items = (_results_i = results[i]) === null || _results_i === void 0 ? void 0 : _results_i.items) !== null && _results_i_items !== void 0 ? _results_i_items : []).filter((item)=>item.selector.name === selectorName).forEach((item)=>{
+                    item.overriding = true;
+                });
+            }
+        }
+        isFirst = false;
     };
     return {
         results,
-        addResult
+        addItem
     };
 }

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

@@ -21,27 +21,46 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    useTemplateVariableStoreCtx: ()=>useTemplateVariableStoreCtx,
-    useTemplateVariableValues: ()=>useTemplateVariableValues,
-    useTemplateVariable: ()=>useTemplateVariable,
-    useTemplateVariableActions: ()=>useTemplateVariableActions,
-    useTemplateVariableDefinitions: ()=>useTemplateVariableDefinitions,
-    useTemplateExternalVariableDefinitions: ()=>useTemplateExternalVariableDefinitions,
-    useTemplateVariableStore: ()=>useTemplateVariableStore,
-    TemplateVariableProvider: ()=>TemplateVariableProvider
+    TemplateVariableProvider: function() {
+        return TemplateVariableProvider;
+    },
+    TemplateVariableProviderWithQueryParams: function() {
+        return TemplateVariableProviderWithQueryParams;
+    },
+    useTemplateExternalVariableDefinitions: function() {
+        return useTemplateExternalVariableDefinitions;
+    },
+    useTemplateVariable: function() {
+        return useTemplateVariable;
+    },
+    useTemplateVariableActions: function() {
+        return useTemplateVariableActions;
+    },
+    useTemplateVariableDefinitions: function() {
+        return useTemplateVariableDefinitions;
+    },
+    useTemplateVariableStore: function() {
+        return useTemplateVariableStore;
+    },
+    useTemplateVariableStoreCtx: function() {
+        return useTemplateVariableStoreCtx;
+    },
+    useTemplateVariableValues: function() {
+        return useTemplateVariableValues;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _zustand = require("zustand");
 const _immer = require("zustand/middleware/immer");
 const _middleware = require("zustand/middleware");
-const _immer1 = /*#__PURE__*/ _interopRequireDefault(require("immer"));
-const _pluginSystem = require("@perses-dev/plugin-system");
+const _immer1 = /*#__PURE__*/ _interop_require_default(require("immer"));
+const _pluginsystem = require("@perses-dev/plugin-system");
 const _core = require("@perses-dev/core");
 const _utils = require("./utils");
 const _hydrationUtils = require("./hydrationUtils");
-const _queryParams = require("./query-params");
-function _interopRequireDefault(obj) {
+const _queryparams = require("./query-params");
+function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
@@ -92,12 +111,12 @@ function useTemplateVariableValues(variableNames) {
 function useTemplateVariable(name, source) {
     const store = useTemplateVariableStoreCtx();
     return (0, _zustand.useStore)(store, (s)=>{
-        var ref;
+        var _s_externalVariableDefinitions_find;
         const state = s.variableState.get({
             name,
             source
         });
-        const definitions = source ? (ref = s.externalVariableDefinitions.find((v)=>v.source === source)) === null || ref === void 0 ? void 0 : ref.definitions : s.variableDefinitions;
+        const definitions = source ? (_s_externalVariableDefinitions_find = s.externalVariableDefinitions.find((v)=>v.source === source)) === null || _s_externalVariableDefinitions_find === void 0 ? void 0 : _s_externalVariableDefinitions_find.definitions : s.variableDefinitions;
         const definition = (definitions || []).find((v)=>v.spec.name === name);
         return {
             state,
@@ -130,10 +149,11 @@ function useTemplateVariableStore() {
     const store = useTemplateVariableStoreCtx();
     return (0, _zustand.useStore)(store);
 }
-function PluginProvider({ children  }) {
+function PluginProvider({ children, builtinVariables }) {
     const originalValues = useTemplateVariableValues();
     const definitions = useTemplateVariableDefinitions();
     const externalDefinitions = useTemplateExternalVariableDefinitions();
+    const { absoluteTimeRange } = (0, _pluginsystem.useTimeRange)();
     const values = (0, _react.useMemo)(()=>{
         const contextValues = {};
         // This will loop through all the current variables values
@@ -146,12 +166,12 @@ function PluginProvider({ children  }) {
             if (v.value === _core.DEFAULT_ALL_VALUE) {
                 const definition = (0, _utils.findVariableDefinitionByName)(name, definitions, externalDefinitions);
                 // If the variable is a list variable and has a custom all value, then use that value instead
-                if ((definition === null || definition === void 0 ? void 0 : definition.kind) === 'ListVariable' && definition.spec.custom_all_value) {
-                    v.value = definition.spec.custom_all_value;
+                if ((definition === null || definition === void 0 ? void 0 : definition.kind) === 'ListVariable' && definition.spec.customAllValue) {
+                    v.value = definition.spec.customAllValue;
                 } else {
-                    var ref;
-                    var ref1;
-                    v.value = (ref1 = (ref = v.options) === null || ref === void 0 ? void 0 : ref.map((o)=>o.value)) !== null && ref1 !== void 0 ? ref1 : null;
+                    var _v_options;
+                    var _v_options_map;
+                    v.value = (_v_options_map = (_v_options = v.options) === null || _v_options === void 0 ? void 0 : _v_options.map((o)=>o.value)) !== null && _v_options_map !== void 0 ? _v_options_map : null;
                 }
             }
             contextValues[name] = v;
@@ -162,17 +182,95 @@ function PluginProvider({ children  }) {
         definitions,
         externalDefinitions
     ]);
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.TemplateVariableContext.Provider, {
+    const allBuiltinVariables = (0, _react.useMemo)(()=>{
+        const result = [
+            {
+                kind: 'BuiltinVariable',
+                spec: {
+                    name: '__from',
+                    value: ()=>absoluteTimeRange.start.valueOf().toString(),
+                    source: 'Dashboard',
+                    display: {
+                        name: '__from',
+                        description: 'Start time of the current time range in unix millisecond epoch',
+                        hidden: true
+                    }
+                }
+            },
+            {
+                kind: 'BuiltinVariable',
+                spec: {
+                    name: '__to',
+                    value: ()=>absoluteTimeRange.end.valueOf().toString(),
+                    source: 'Dashboard',
+                    display: {
+                        name: '__to',
+                        description: 'End time of the current time range in unix millisecond epoch',
+                        hidden: true
+                    }
+                }
+            },
+            {
+                kind: 'BuiltinVariable',
+                spec: {
+                    name: '__range',
+                    value: ()=>(0, _core.formatDuration)((0, _core.intervalToPrometheusDuration)(absoluteTimeRange)),
+                    source: 'Dashboard',
+                    display: {
+                        name: '__range',
+                        description: 'The range for the current dashboard in human readable format',
+                        hidden: true
+                    }
+                }
+            },
+            {
+                kind: 'BuiltinVariable',
+                spec: {
+                    name: '__range_s',
+                    value: ()=>((absoluteTimeRange.end.valueOf() - absoluteTimeRange.start.valueOf()) / 1000).toString(),
+                    source: 'Dashboard',
+                    display: {
+                        name: '__range_s',
+                        description: 'The range for the current dashboard in second',
+                        hidden: true
+                    }
+                }
+            },
+            {
+                kind: 'BuiltinVariable',
+                spec: {
+                    name: '__range_ms',
+                    value: ()=>(absoluteTimeRange.end.valueOf() - absoluteTimeRange.start.valueOf()).toString(),
+                    source: 'Dashboard',
+                    display: {
+                        name: '__range_ms',
+                        description: 'The range for the current dashboard in millisecond',
+                        hidden: true
+                    }
+                }
+            }
+        ];
+        builtinVariables === null || builtinVariables === void 0 ? void 0 : builtinVariables.forEach((def)=>result.push(def));
+        return result;
+    }, [
+        absoluteTimeRange,
+        builtinVariables
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.BuiltinVariableContext.Provider, {
         value: {
-            state: values
+            variables: allBuiltinVariables
         },
-        children: children
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.TemplateVariableContext.Provider, {
+            value: {
+                state: values
+            },
+            children: children
+        })
     });
 }
-function createTemplateVariableSrvStore({ initialVariableDefinitions =[] , externalVariableDefinitions =[] , queryParams  }) {
-    const initialParams = (0, _queryParams.getInitalValuesFromQueryParameters)(queryParams ? queryParams[0] : {});
-    const store = (0, _zustand.createStore)()((0, _middleware.devtools)((0, _immer.immer)((set, get)=>{
-        return {
+function createTemplateVariableSrvStore({ initialVariableDefinitions = [], externalVariableDefinitions = [], queryParams }) {
+    const initialParams = (0, _queryparams.getInitalValuesFromQueryParameters)(queryParams ? queryParams[0] : {});
+    const store = (0, _zustand.createStore)()((0, _middleware.devtools)((0, _immer.immer)((set, get)=>({
             variableState: (0, _hydrationUtils.hydrateTemplateVariableStates)(initialVariableDefinitions, initialParams, externalVariableDefinitions),
             variableDefinitions: initialVariableDefinitions,
             externalVariableDefinitions: externalVariableDefinitions,
@@ -227,7 +325,7 @@ function createTemplateVariableSrvStore({ initialVariableDefinitions =[] , exter
                     if (queryParams) {
                         const setQueryParams = queryParams[1];
                         setQueryParams({
-                            [(0, _queryParams.getURLQueryParamName)(name)]: val
+                            [(0, _queryparams.getURLQueryParamName)(name)]: val
                         });
                     }
                     varState.value = val;
@@ -246,16 +344,16 @@ function createTemplateVariableSrvStore({ initialVariableDefinitions =[] , exter
                                 draft[index] = {
                                     kind: 'ListVariable',
                                     spec: (0, _immer1.default)(variable.spec, (specDraft)=>{
-                                        specDraft.default_value = currentVariable.value;
+                                        specDraft.defaultValue = currentVariable.value;
                                     })
                                 };
                             }
                         } else if (variable.kind === 'TextVariable') {
-                            const currentVariable1 = variableState.get({
+                            const currentVariable = variableState.get({
                                 name
                             });
-                            const currentVariableValue = typeof (currentVariable1 === null || currentVariable1 === void 0 ? void 0 : currentVariable1.value) === 'string' ? currentVariable1.value : '';
-                            if ((currentVariable1 === null || currentVariable1 === void 0 ? void 0 : currentVariable1.value) !== undefined) {
+                            const currentVariableValue = typeof (currentVariable === null || currentVariable === void 0 ? void 0 : currentVariable.value) === 'string' ? currentVariable.value : '';
+                            if ((currentVariable === null || currentVariable === void 0 ? void 0 : currentVariable.value) !== undefined) {
                                 draft[index] = {
                                     kind: 'TextVariable',
                                     spec: (0, _immer1.default)(variable.spec, (specDraft)=>{
@@ -274,21 +372,34 @@ function createTemplateVariableSrvStore({ initialVariableDefinitions =[] , exter
             getSavedVariablesStatus: ()=>{
                 return (0, _utils.checkSavedDefaultVariableStatus)(get().variableDefinitions, get().variableState);
             }
-        };
-    })));
+        }))));
     return store;
 }
-function TemplateVariableProvider({ children , initialVariableDefinitions =[] , externalVariableDefinitions =[]  }) {
+function TemplateVariableProvider({ children, initialVariableDefinitions = [], externalVariableDefinitions = [], builtinVariables = [] }) {
+    const [store] = (0, _react.useState)(createTemplateVariableSrvStore({
+        initialVariableDefinitions,
+        externalVariableDefinitions
+    }));
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(TemplateVariableStoreContext.Provider, {
+        value: store,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(PluginProvider, {
+            builtinVariables: builtinVariables,
+            children: children
+        })
+    });
+}
+function TemplateVariableProviderWithQueryParams({ children, initialVariableDefinitions = [], externalVariableDefinitions = [], builtinVariables = [] }) {
     const allVariableDefs = (0, _utils.mergeVariableDefinitions)(initialVariableDefinitions, externalVariableDefinitions);
-    const queryParams = (0, _queryParams.useVariableQueryParams)(allVariableDefs);
+    const queryParams = (0, _queryparams.useVariableQueryParams)(allVariableDefs);
     const [store] = (0, _react.useState)(createTemplateVariableSrvStore({
         initialVariableDefinitions,
         externalVariableDefinitions,
         queryParams
     }));
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(TemplateVariableStoreContext.Provider, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(TemplateVariableStoreContext.Provider, {
         value: store,
-        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(PluginProvider, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(PluginProvider, {
+            builtinVariables: builtinVariables,
             children: children
         })
     });

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

@@ -16,10 +16,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "hydrateTemplateVariableStates", {
     enumerable: true,
-    get: ()=>hydrateTemplateVariableStates
+    get: function() {
+        return hydrateTemplateVariableStates;
+    }
 });
 const _core = require("@perses-dev/core");
-const _pluginSystem = require("@perses-dev/plugin-system");
+const _pluginsystem = require("@perses-dev/plugin-system");
 // TODO: move to TemplateVariableProvider/utils.ts
 function hydrateTemplateVariableState(variable, initialValue) {
     const varState = {
@@ -34,15 +36,15 @@ function hydrateTemplateVariableState(variable, initialValue) {
             break;
         case 'ListVariable':
             varState.options = [];
-            var ref;
-            varState.value = (ref = initialValue !== null && initialValue !== void 0 ? initialValue : variable.spec.default_value) !== null && ref !== void 0 ? ref : null;
-            // TODO: smarter fallbacks for default_value when allow_all_value is true
+            var _ref;
+            varState.value = (_ref = initialValue !== null && initialValue !== void 0 ? initialValue : variable.spec.defaultValue) !== null && _ref !== void 0 ? _ref : null;
+            // TODO: smarter fallbacks for defaultValue when allowAllValue is true
             if (varState.options.length > 0 && !varState.value) {
-                var ref1;
-                var ref2;
-                const firstOptionValue = (ref2 = (ref1 = varState.options[0]) === null || ref1 === void 0 ? void 0 : ref1.value) !== null && ref2 !== void 0 ? ref2 : null;
+                var _varState_options_;
+                var _varState_options__value;
+                const firstOptionValue = (_varState_options__value = (_varState_options_ = varState.options[0]) === null || _varState_options_ === void 0 ? void 0 : _varState_options_.value) !== null && _varState_options__value !== void 0 ? _varState_options__value : null;
                 if (firstOptionValue !== null) {
-                    varState.value = variable.spec.allow_multiple ? [
+                    varState.value = variable.spec.allowMultiple ? [
                         firstOptionValue
                     ] : firstOptionValue;
                 }
@@ -62,7 +64,7 @@ function hydrateTemplateVariableState(variable, initialValue) {
     return varState;
 }
 function hydrateTemplateVariableStates(localDefinitions, initialValues, externalDefinitions = []) {
-    const state = new _pluginSystem.VariableStoreStateMap();
+    const state = new _pluginsystem.VariableStoreStateMap();
     // Collect the names used by local definitions
     let overridingNames = {};
     localDefinitions.forEach((v)=>{