@perses-dev/dashboards 0.13.0 → 0.15.0

package/dist/cjs/components/TimeRangeControls/TimeRangeControls.test.js

@@ -45,29 +45,43 @@ describe('TimeRangeControls', ()=>{
             dashboardResource: _testDashboard.default
         };
     });
-    const renderTimeRangeControls = ()=>{
+    const renderTimeRangeControls = (testURLParams)=>{
         (0, _test.renderWithContext)(/*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.DashboardProvider, {
             initialState: initialState,
             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.TimeRangeProvider, {
-                timeRange: testDefaultTimeRange,
+                initialTimeRange: testDefaultTimeRange,
+                enabledURLParams: testURLParams,
                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeRangeControls.TimeRangeControls, {})
             })
         }), undefined, history);
     };
-    it('should render correct initial relative time shortcut', async ()=>{
-        renderTimeRangeControls();
-        expect(_react.screen.getByText('Last 5 minutes')).toBeInTheDocument();
-    });
-    // TODO: fix setTimeRange no-op, test query params
-    it('should be able to select the first option', ()=>{
-        renderTimeRangeControls();
+    it('should default to dashboard duration and update selected time option when clicked', async ()=>{
+        renderTimeRangeControls(false);
+        expect(_react.screen.getByText('Last 30 minutes')).toBeInTheDocument();
         const dateButton = _react.screen.getByRole('button');
         _userEvent.default.click(dateButton);
-        const firstOption = _react.screen.getByRole('option', {
+        const firstSelected = _react.screen.getByRole('option', {
             name: 'Last 5 minutes'
         });
-        _userEvent.default.click(firstOption);
+        _userEvent.default.click(firstSelected);
         expect(dateButton).toHaveTextContent(/5 minutes/i);
     });
+    it('should update URL params with correct time range values', ()=>{
+        renderTimeRangeControls(true);
+        const dateButton = _react.screen.getByRole('button');
+        _userEvent.default.click(dateButton);
+        const firstSelected = _react.screen.getByRole('option', {
+            name: 'Last 5 minutes'
+        });
+        _userEvent.default.click(firstSelected);
+        expect(history.location.search).toEqual('?start=5m');
+        // pick another option from TimeRangeSelector dropdown
+        const secondSelected = _react.screen.getByText('Last 12 hours');
+        _userEvent.default.click(secondSelected);
+        expect(history.location.search).toEqual('?start=12h');
+        // back button should return to first option selected
+        history.back();
+        expect(history.location.search).toEqual('?start=5m');
+    });
 // TODO: add additional tests for absolute time selection, other inputs, form validation, etc.
 });

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

@@ -57,16 +57,24 @@ function ListVariable({ name  }) {
     const { data: variablePlugin  } = (0, _pluginSystem.usePlugin)('Variable', definition.spec.plugin.kind);
     const { setVariableValue , setVariableLoading , setVariableOptions  } = (0, _context.useTemplateVariableActions)();
     const datasourceStore = (0, _pluginSystem.useDatasourceStore)();
+    const allVariables = (0, _pluginSystem.useTemplateVariableValues)();
+    const { timeRange  } = (0, _pluginSystem.useTimeRange)();
+    const variablePluginCtx = {
+        timeRange,
+        datasourceStore,
+        variables: allVariables
+    };
     const spec = definition.spec.plugin.spec;
     let dependsOnVariables;
     if (variablePlugin === null || variablePlugin === void 0 ? void 0 : variablePlugin.dependsOn) {
-        dependsOnVariables = variablePlugin.dependsOn(spec);
+        const dependencies = variablePlugin.dependsOn(spec, variablePluginCtx);
+        dependsOnVariables = dependencies.variables;
     }
     const variables = (0, _pluginSystem.useTemplateVariableValues)(dependsOnVariables);
     const allowMultiple = (definition === null || definition === void 0 ? void 0 : definition.spec.allow_multiple) === true;
     const allowAllValue = (definition === null || definition === void 0 ? void 0 : definition.spec.allow_all_value) === true;
     var ref4;
-    const label = (ref4 = (ref = definition === null || definition === void 0 ? void 0 : definition.spec.display) === null || ref === void 0 ? void 0 : ref.label) !== null && ref4 !== void 0 ? ref4 : name;
+    const title = (ref4 = (ref = definition === null || definition === void 0 ? void 0 : definition.spec.display) === null || ref === void 0 ? void 0 : ref.name) !== null && ref4 !== void 0 ? ref4 : name;
     let waitToLoad = false;
     if (dependsOnVariables) {
         waitToLoad = dependsOnVariables.some((v)=>{
@@ -75,7 +83,6 @@ function ListVariable({ name  }) {
         });
     }
     const variablesValueKey = getVariableValuesKey(variables);
-    const { timeRange  } = (0, _pluginSystem.useTimeRange)();
     const variablesOptionsQuery = (0, _reactQuery.useQuery)([
         name,
         definition,
@@ -165,7 +172,7 @@ function ListVariable({ name  }) {
             children: [
                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.InputLabel, {
                     id: name,
-                    children: label
+                    children: title
                 }),
                 /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Select, {
                     sx: {

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

@@ -60,6 +60,7 @@ function VariableEditor(props) {
             }
             if (!v.spec.display) {
                 v.spec.display = {
+                    name: v.spec.name,
                     hidden: false
                 };
             }

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

@@ -98,10 +98,10 @@ function VariableEditForm({ initialVariableDefinition , onChange , onCancel  })
                         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
                             fullWidth: true,
                             label: "Label",
-                            value: state.label,
+                            value: state.title,
                             onChange: (v)=>{
                                 setState((draft)=>{
-                                    draft.label = v.target.value;
+                                    draft.title = v.target.value;
                                 });
                             }
                         })

package/dist/cjs/components/Variables/VariableEditorForm/variable-editor-form-model.js

@@ -47,7 +47,7 @@ function getInitialState(initialVariableDefinition) {
     }
     return {
         name: initialVariableDefinition.spec.name,
-        label: (ref = initialVariableDefinition.spec.display) === null || ref === void 0 ? void 0 : ref.label,
+        title: (ref = initialVariableDefinition.spec.display) === null || ref === void 0 ? void 0 : ref.name,
         kind: initialVariableDefinition.kind,
         description: '',
         listVariableFields,
@@ -55,11 +55,11 @@ function getInitialState(initialVariableDefinition) {
     };
 }
 function getVariableDefinitionFromState(state) {
-    const { name , label , kind  } = state;
+    const { name , title , kind  } = state;
     const commonSpec = {
         name,
         display: {
-            label
+            name: title
         }
     };
     if (kind === 'TextVariable') {

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

@@ -19,10 +19,12 @@ Object.defineProperty(exports, "TemplateVariableList", {
     get: ()=>TemplateVariableList
 });
 const _jsxRuntime = require("react/jsx-runtime");
-const _react = require("react");
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _material = require("@mui/material");
 const _eye = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Eye"));
 const _pencil = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Pencil"));
+const _pinOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/PinOutline"));
+const _pinOffOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/PinOffOutline"));
 const _context = require("../../context");
 const _variable = require("./Variable");
 const _variableEditor = require("./VariableEditor");
@@ -31,13 +33,57 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
-function TemplateVariableList() {
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interopRequireWildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function TemplateVariableList(props) {
     const [isEditing, setIsEditing] = (0, _react.useState)(false);
+    const [isPin, setIsPin] = (0, _react.useState)(props.initialVariableIsSticky);
     const variableDefinitions = (0, _context.useTemplateVariableDefinitions)();
     const { isEditMode  } = (0, _context.useEditMode)();
     const [showVariablesInEditMode, setShowVariablesInEditMode] = (0, _react.useState)(true);
     const showVariables = isEditMode ? showVariablesInEditMode : true;
     const { setVariableDefinitions  } = (0, _context.useTemplateVariableActions)();
+    const scrollTrigger = (0, _material.useScrollTrigger)({
+        disableHysteresis: true
+    });
+    const isSticky = scrollTrigger && props.initialVariableIsSticky && isPin;
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
         children: [
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Drawer, {
@@ -72,21 +118,34 @@ function TemplateVariableList() {
                     })
                 ]
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
-                display: 'flex',
-                justifyContent: "space-between",
-                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Stack, {
-                    direction: 'row',
-                    spacing: 2,
-                    children: showVariables && variableDefinitions.map((v)=>{
-                        var ref;
-                        /*#__PURE__*/ return (0, _jsxRuntime.jsx)(_material.Box, {
-                            display: ((ref = v.spec.display) === null || ref === void 0 ? void 0 : ref.hidden) ? 'none' : undefined,
-                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variable.TemplateVariable, {
-                                name: v.spec.name
-                            }, v.spec.name)
-                        }, v.spec.name);
-                    })
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.AppBar, {
+                color: 'inherit',
+                position: isSticky ? 'fixed' : 'static',
+                elevation: isSticky ? 4 : 0,
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+                    display: 'flex',
+                    justifyContent: "space-between",
+                    my: isSticky ? 2 : 0,
+                    ml: isSticky ? 2 : 0,
+                    children: [
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Stack, {
+                            direction: 'row',
+                            spacing: 2,
+                            children: showVariables && variableDefinitions.map((v)=>{
+                                var ref;
+                                /*#__PURE__*/ return (0, _jsxRuntime.jsx)(_material.Box, {
+                                    display: ((ref = v.spec.display) === null || ref === void 0 ? void 0 : ref.hidden) ? 'none' : undefined,
+                                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variable.TemplateVariable, {
+                                        name: v.spec.name
+                                    }, v.spec.name)
+                                }, v.spec.name);
+                            })
+                        }),
+                        props.initialVariableIsSticky && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                            onClick: ()=>setIsPin(!isPin),
+                            children: isPin ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pinOutline.default, {}) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pinOffOutline.default, {})
+                        })
+                    ]
                 })
             })
         ]

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

@@ -80,8 +80,9 @@ function initStore(props) {
             setEditMode: (isEditMode)=>set({
                     isEditMode
                 }),
-            setDashboard: ({ spec: { panels , layouts  }  })=>{
+            setDashboard: ({ metadata , spec: { panels , layouts  }  })=>{
                 set((state)=>{
+                    state.metadata = metadata;
                     const { panelGroups , panelGroupOrder  } = (0, _panelGroupSlice.convertLayoutsToPanelGroups)(layouts);
                     state.panels = panels;
                     state.panelGroups = panelGroups;

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

@@ -20,9 +20,9 @@ Object.defineProperty(exports, "generateId", {
     enumerable: true,
     get: ()=>generateId
 });
-if (globalThis.dashboardStoreId === undefined) {
-    globalThis.dashboardStoreId = 0;
-}
 function generateId() {
+    if (globalThis.dashboardStoreId === undefined) {
+        globalThis.dashboardStoreId = 0;
+    }
     return globalThis.dashboardStoreId++;
 }

package/dist/cjs/context/DashboardProvider/dashboard-provider-api.js

@@ -37,28 +37,34 @@ _export(exports, {
 });
 const _react = require("react");
 const _dashboardProvider = require("./DashboardProvider");
+const selectEditMode = ({ isEditMode , setEditMode  })=>({
+        isEditMode,
+        setEditMode
+    });
 function useEditMode() {
-    return (0, _dashboardProvider.useDashboardStore)(({ isEditMode , setEditMode  })=>({
-            isEditMode,
-            setEditMode
-        }));
+    return (0, _dashboardProvider.useDashboardStore)(selectEditMode);
 }
+const selectDashboardActions = ({ setDashboard , openAddPanelGroup , openAddPanel  })=>({
+        setDashboard,
+        openAddPanelGroup,
+        openAddPanel
+    });
 function useDashboardActions() {
-    const setDashboard = (0, _dashboardProvider.useDashboardStore)((store)=>store.setDashboard);
-    const openAddPanelGroup = (0, _dashboardProvider.useDashboardStore)((store)=>store.openAddPanelGroup);
-    const openAddPanel = (0, _dashboardProvider.useDashboardStore)((store)=>store.openAddPanel);
+    const { setDashboard , openAddPanelGroup , openAddPanel  } = (0, _dashboardProvider.useDashboardStore)(selectDashboardActions);
     return {
         setDashboard,
-        openAddPanelGroup,
-        openAddPanel: ()=>openAddPanel(undefined)
+        openAddPanelGroup: ()=>openAddPanelGroup(),
+        openAddPanel: ()=>openAddPanel()
     };
 }
+const selectPanelGroupOrder = (state)=>state.panelGroupOrder;
 function usePanelGroupIds() {
-    return (0, _dashboardProvider.useDashboardStore)((store)=>store.panelGroupOrder);
+    return (0, _dashboardProvider.useDashboardStore)(selectPanelGroupOrder);
 }
+const selectPanelGroups = (state)=>state.panelGroups;
 function useListPanelGroups() {
     const panelGroupIds = usePanelGroupIds();
-    const panelGroups = (0, _dashboardProvider.useDashboardStore)((store)=>store.panelGroups);
+    const panelGroups = (0, _dashboardProvider.useDashboardStore)(selectPanelGroups);
     return (0, _react.useMemo)(()=>{
         return panelGroupIds.map((id)=>{
             const group = panelGroups[id];
@@ -73,18 +79,23 @@ function useListPanelGroups() {
     ]);
 }
 function usePanelGroup(panelGroupId) {
-    const panelGroup = (0, _dashboardProvider.useDashboardStore)((store)=>store.panelGroups[panelGroupId]);
+    const panelGroup = (0, _dashboardProvider.useDashboardStore)((0, _react.useCallback)((state)=>state.panelGroups[panelGroupId], [
+        panelGroupId
+    ]));
     if (panelGroup === undefined) {
         throw new Error(`Panel group with Id ${panelGroupId} was not found`);
     }
     return panelGroup;
 }
+const selectPanelGroupActions = ({ openEditPanelGroup , deletePanelGroup , openAddPanel , updatePanelGroupLayouts  })=>({
+        openEditPanelGroup,
+        deletePanelGroup,
+        openAddPanel,
+        updatePanelGroupLayouts
+    });
 function usePanelGroupActions(panelGroupId) {
     const { moveUp , moveDown  } = useMovePanelGroup(panelGroupId);
-    const openEditPanelGroup = (0, _dashboardProvider.useDashboardStore)((store)=>store.openEditPanelGroup);
-    const deletePanelGroup = (0, _dashboardProvider.useDashboardStore)((store)=>store.openDeletePanelGroupDialog);
-    const openAddPanel = (0, _dashboardProvider.useDashboardStore)((store)=>store.openAddPanel);
-    const updatePanelGroupLayouts = (0, _dashboardProvider.useDashboardStore)((store)=>store.updatePanelGroupLayouts);
+    const { openEditPanelGroup , deletePanelGroup , openAddPanel , updatePanelGroupLayouts  } = (0, _dashboardProvider.useDashboardStore)(selectPanelGroupActions);
     return {
         openEditPanelGroup: ()=>openEditPanelGroup(panelGroupId),
         deletePanelGroup: ()=>deletePanelGroup(panelGroupId),
@@ -94,13 +105,17 @@ function usePanelGroupActions(panelGroupId) {
         updatePanelGroupLayouts: (itemLayouts)=>updatePanelGroupLayouts(panelGroupId, itemLayouts)
     };
 }
+const selectSwapPanelGroups = (state)=>state.swapPanelGroups;
+const selectPanelGroupsLength = (state)=>state.panelGroupOrder.length;
 /**
  * Returns functions for moving a panel group up or down. A function will be undefined if the panel group can't be
  * moved in that direction.
  */ function useMovePanelGroup(panelGroupId) {
-    const currentIndex = (0, _dashboardProvider.useDashboardStore)((store)=>store.panelGroupOrder.findIndex((id)=>id === panelGroupId));
-    const panelGroupsLength = (0, _dashboardProvider.useDashboardStore)((store)=>store.panelGroupOrder.length);
-    const swapPanelGroups = (0, _dashboardProvider.useDashboardStore)((store)=>store.swapPanelGroups);
+    const currentIndex = (0, _dashboardProvider.useDashboardStore)((0, _react.useCallback)((store)=>store.panelGroupOrder.findIndex((id)=>id === panelGroupId), [
+        panelGroupId
+    ]));
+    const panelGroupsLength = (0, _dashboardProvider.useDashboardStore)(selectPanelGroupsLength);
+    const swapPanelGroups = (0, _dashboardProvider.useDashboardStore)(selectSwapPanelGroups);
     if (currentIndex < 0) {
         throw new Error(`Could not find panel group with Id ${panelGroupId} in order array`);
     }
@@ -111,52 +126,66 @@ function usePanelGroupActions(panelGroupId) {
         moveDown: currentIndex < panelGroupsLength - 1 ? moveDown : undefined
     };
 }
+const selectPanelGroupEditor = (state)=>state.panelGroupEditor;
 function usePanelGroupEditor() {
-    return (0, _dashboardProvider.useDashboardStore)((store)=>store.panelGroupEditor);
+    return (0, _dashboardProvider.useDashboardStore)(selectPanelGroupEditor);
 }
+const selectDeletePanelGroupDialog = ({ deletePanelGroupDialog , openDeletePanelGroupDialog , closeDeletePanelGroupDialog , deletePanelGroup  })=>({
+        deletePanelGroupDialog,
+        openDeletePanelGroupDialog,
+        closeDeletePanelGroupDialog,
+        deletePanelGroup
+    });
 function useDeletePanelGroupDialog() {
-    return (0, _dashboardProvider.useDashboardStore)(({ deletePanelGroupDialog , openDeletePanelGroupDialog , closeDeletePanelGroupDialog , deletePanelGroup  })=>({
-            deletePanelGroupDialog,
-            openDeletePanelGroupDialog,
-            closeDeletePanelGroupDialog,
-            deletePanelGroup
-        }));
+    const { deletePanelGroupDialog , openDeletePanelGroupDialog , closeDeletePanelGroupDialog , deletePanelGroup  } = (0, _dashboardProvider.useDashboardStore)(selectDeletePanelGroupDialog);
+    return {
+        deletePanelGroupDialog,
+        deletePanelGroup,
+        openDeletePanelGroupDialog,
+        closeDeletePanelGroupDialog: ()=>closeDeletePanelGroupDialog()
+    };
 }
 function usePanel(panelGroupItemId) {
     const { panelGroupId , panelGroupItemLayoutId: panelGroupLayoutId  } = panelGroupItemId;
-    const panel = (0, _dashboardProvider.useDashboardStore)((store)=>{
+    const panel = (0, _dashboardProvider.useDashboardStore)((0, _react.useCallback)((store)=>{
         var ref;
         const panelKey = (ref = store.panelGroups[panelGroupId]) === null || ref === void 0 ? void 0 : ref.itemPanelKeys[panelGroupLayoutId];
         if (panelKey === undefined) return;
         return store.panels[panelKey];
-    });
+    }, [
+        panelGroupId,
+        panelGroupLayoutId
+    ]));
     if (panel === undefined) {
         throw new Error(`Could not find panel for Id ${panelGroupItemId}`);
     }
     return panel;
 }
+const selectPanelActions = ({ openEditPanel , openDeletePanelDialog  })=>({
+        openEditPanel,
+        openDeletePanelDialog
+    });
 function usePanelActions(panelGroupItemId) {
-    const openEditPanel = (0, _dashboardProvider.useDashboardStore)((store)=>store.openEditPanel);
-    const openDeletePanelDialog = (0, _dashboardProvider.useDashboardStore)((store)=>store.openDeletePanelDialog);
+    const { openEditPanel , openDeletePanelDialog  } = (0, _dashboardProvider.useDashboardStore)(selectPanelActions);
     return {
         openEditPanel: ()=>openEditPanel(panelGroupItemId),
         openDeletePanelDialog: ()=>openDeletePanelDialog(panelGroupItemId)
     };
 }
+const selectPanelEditor = (state)=>state.panelEditor;
 function usePanelEditor() {
-    return (0, _dashboardProvider.useDashboardStore)((store)=>store.panelEditor);
+    return (0, _dashboardProvider.useDashboardStore)(selectPanelEditor);
 }
-function useDeletePanelDialog() {
-    const deletePanelDialog = (0, _dashboardProvider.useDashboardStore)((store)=>store.deletePanelDialog);
-    // TODO: Refactor similar to other dialogs/editors so these are on the editor state itself
-    const deletePanel = (0, _dashboardProvider.useDashboardStore)((store)=>store.deletePanel);
-    const closeDeletePanelDialog = (0, _dashboardProvider.useDashboardStore)((store)=>store.closeDeletePanelDialog);
-    return {
+const selectDeletePanelDialog = ({ deletePanelDialog , deletePanel , closeDeletePanelDialog  })=>({
         deletePanelDialog,
         deletePanel,
         closeDeletePanelDialog
-    };
+    });
+function useDeletePanelDialog() {
+    // TODO: Refactor similar to other dialogs/editors so these are on the editor state itself
+    return (0, _dashboardProvider.useDashboardStore)(selectDeletePanelDialog);
 }
+const selectDefaultTimeRange = (state)=>state.defaultTimeRange;
 function useDefaultTimeRange() {
-    return (0, _dashboardProvider.useDashboardStore)((state)=>state.defaultTimeRange);
+    return (0, _dashboardProvider.useDashboardStore)(selectDefaultTimeRange);
 }

package/dist/cjs/context/{TimeRangeProvider.js → TimeRangeProvider/TimeRangeProvider.js}

@@ -27,6 +27,7 @@ _export(exports, {
 const _jsxRuntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _pluginSystem = require("@perses-dev/plugin-system");
+const _queryParams = require("./query-params");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -67,12 +68,11 @@ function _interopRequireWildcard(obj, nodeInterop) {
     return newObj;
 }
 function TimeRangeProvider(props) {
-    const { timeRange , children , setTimeRange  } = props;
-    // TODO: fix no-op, pass paramsEnabled as false in useSetTimeRangeParams as workaround
+    const { initialTimeRange , enabledURLParams , children  } = props;
+    const { timeRange , setTimeRange  } = (0, _queryParams.useSetTimeRangeParams)(initialTimeRange, enabledURLParams);
     const ctx = (0, _react.useMemo)(()=>({
             timeRange,
-            setTimeRange: setTimeRange !== null && setTimeRange !== void 0 ? setTimeRange : ()=>{
-            /* no-op */ }
+            setTimeRange
         }), [
         timeRange,
         setTimeRange

package/dist/cjs/{utils → context/TimeRangeProvider}/index.js

@@ -14,7 +14,8 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./time-range-params"), exports);
+_exportStar(require("./TimeRangeProvider"), exports);
+_exportStar(require("./query-params"), exports);
 function _exportStar(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {

package/dist/cjs/{utils/time-range-params.js → context/TimeRangeProvider/query-params.js}

@@ -106,23 +106,29 @@ function useInitialTimeRange(dashboardDuration) {
         dashboardDuration
     ]);
 }
-function useSetTimeRangeParams(initialTimeRange, paramsEnabled = true) {
+function useSetTimeRangeParams(initialTimeRange, enabledURLParams = true) {
     const [query, setQuery] = (0, _useQueryParams.useQueryParams)(timeRangeQueryConfig);
-    // fallback when app does not want query string as source of truth
+    // determine whether initial param had previously been populated to fix back btn
+    const [paramsLoaded, setParamsLoaded] = (0, _react.useState)(false);
+    // optional fallback when app does not want query string as source of truth
+    // this occurs when enabledURLParams is set to false on TimeRangeProvider
     const [timeRangeState, setTimeRangeState] = (0, _react.useState)(initialTimeRange);
     const { start  } = query;
     (0, _react.useEffect)(()=>{
-        if (paramsEnabled && !start) {
+        // when dashboard loaded with no params, default to dashboard duration
+        if (enabledURLParams && !paramsLoaded && !start) {
             if ((0, _core.isRelativeTimeRange)(initialTimeRange)) {
                 setQuery({
                     start: initialTimeRange.pastDuration,
                     end: undefined
                 });
+                setParamsLoaded(true);
             }
         }
     }, [
         initialTimeRange,
-        paramsEnabled,
+        enabledURLParams,
+        paramsLoaded,
         start,
         setQuery
     ]);
@@ -138,7 +144,7 @@ function useSetTimeRangeParams(initialTimeRange, paramsEnabled = true) {
     }, [
         setQuery
     ]);
-    if (!paramsEnabled) {
+    if (!enabledURLParams) {
         return {
             timeRange: timeRangeState,
             setTimeRange: setTimeRangeState

package/dist/cjs/index.js

@@ -16,7 +16,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 _exportStar(require("./components"), exports);
 _exportStar(require("./context"), exports);
-_exportStar(require("./utils"), exports);
 _exportStar(require("./views"), exports);
 function _exportStar(from, to) {
     Object.keys(from).forEach(function(k) {

package/dist/cjs/test/render.js

@@ -48,7 +48,6 @@ function renderWithContext(ui, options, history) {
                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_useQueryParams.QueryParamProvider, {
                     adapter: _reactRouter6.ReactRouter6Adapter,
                     children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ChartsThemeProvider, {
-                        themeName: "perses",
                         chartsTheme: _components.testChartsTheme,
                         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.PluginRegistry, {
                             ...(0, _pluginSystem.mockPluginRegistry)(..._pluginRegistry.MOCK_PLUGINS),

package/dist/cjs/test/testDashboard.js

@@ -28,7 +28,7 @@ const testDashboard = {
         version: 0
     },
     spec: {
-        duration: '5m',
+        duration: '30m',
         variables: [
             {
                 kind: 'TextVariable',

package/dist/cjs/utils/component-ids.js

@@ -19,10 +19,10 @@ Object.defineProperty(exports, "useId", {
     get: ()=>useId
 });
 const _react = require("react");
-if (globalThis.useIdValue === undefined) {
-    globalThis.useIdValue = 0;
-}
 function useId(prefix) {
+    if (globalThis.useIdValue === undefined) {
+        globalThis.useIdValue = 0;
+    }
     const id = (0, _react.useRef)(undefined);
     if (id.current === undefined) {
         id.current = `${prefix}-${globalThis.useIdValue++}`;

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

@@ -25,7 +25,7 @@ const _components = require("@perses-dev/components");
 const _components1 = require("../../components");
 const _context = require("../../context");
 const DashboardApp = (props)=>{
-    const { dashboardResource  } = props;
+    const { dashboardResource , dashboardTitleComponent , initialVariableIsSticky  } = props;
     const { setEditMode  } = (0, _context.useEditMode)();
     const { dashboard , setDashboard  } = (0, _context.useDashboard)();
     const [originalDashboard, setOriginalDashboard] = (0, _react.useState)(undefined);
@@ -65,6 +65,8 @@ const DashboardApp = (props)=>{
         children: [
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.DashboardToolbar, {
                 dashboardName: dashboardResource.metadata.name,
+                dashboardTitleComponent: dashboardTitleComponent,
+                initialVariableIsSticky: initialVariableIsSticky,
                 onEditButtonClick: onEditButtonClick,
                 onCancelButtonClick: onCancelButtonClick
             }),