@perses-dev/dashboards 0.17.0 → 0.18.0

package/dist/cjs/components/DashboardToolbar/DashboardToolbar.js

@@ -34,7 +34,7 @@ function _interopRequireDefault(obj) {
     };
 }
 const DashboardToolbar = (props)=>{
-    const { dashboardName , dashboardTitleComponent , initialVariableIsSticky , onEditButtonClick , onCancelButtonClick  } = props;
+    const { dashboardName , dashboardTitleComponent , initialVariableIsSticky , isReadonly , onEditButtonClick , onCancelButtonClick ,  } = props;
     const { isEditMode , setEditMode  } = (0, _context.useEditMode)();
     const { openAddPanelGroup , openAddPanel  } = (0, _context.useDashboardActions)();
     const isLaptopSize = (0, _material.useMediaQuery)((0, _material.useTheme)().breakpoints.up('sm'));
@@ -47,55 +47,68 @@ const DashboardToolbar = (props)=>{
     };
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
         children: isEditMode ? /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
-            spacing: 2,
+            spacing: 1,
             children: [
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+                    p: 2,
+                    display: "flex",
                     sx: {
-                        backgroundColor: (theme)=>theme.palette.primary.light + '20'
+                        backgroundColor: (theme)=>theme.palette.primary.main + '30'
                     },
-                    children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
-                        padding: 2,
-                        display: "flex",
-                        children: [
-                            dashboardTitle,
-                            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
-                                direction: "row",
-                                spacing: 1,
-                                marginLeft: "auto",
-                                children: [
-                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
-                                        variant: "contained",
-                                        onClick: onSave,
-                                        children: "Save"
-                                    }),
-                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
-                                        variant: "outlined",
-                                        onClick: onCancelButtonClick,
-                                        children: "Cancel"
-                                    })
-                                ]
-                            })
-                        ]
-                    })
+                    children: [
+                        dashboardTitle,
+                        /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                            direction: "row",
+                            spacing: 1,
+                            marginLeft: "auto",
+                            children: [
+                                isReadonly && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Alert, {
+                                    severity: 'warning',
+                                    sx: {
+                                        backgroundColor: 'transparent',
+                                        padding: 0
+                                    },
+                                    children: "Dashboard managed via code only. Download JSON and commit changes to save."
+                                }),
+                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                                    variant: "contained",
+                                    onClick: onSave,
+                                    disabled: isReadonly,
+                                    children: "Save"
+                                }),
+                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                                    variant: "outlined",
+                                    onClick: onCancelButtonClick,
+                                    children: "Cancel"
+                                })
+                            ]
+                        })
+                    ]
                 }),
                 /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
                     sx: {
                         display: 'flex',
                         width: '100%',
                         alignItems: 'flex-start',
-                        padding: (theme)=>theme.spacing(2)
+                        padding: (theme)=>theme.spacing(0, 2, 2, 2)
                     },
                     children: [
                         /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
                             FallbackComponent: _components.ErrorAlert,
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variables.TemplateVariableList, {
-                                initialVariableIsSticky: initialVariableIsSticky
+                                initialVariableIsSticky: initialVariableIsSticky,
+                                sx: {
+                                    backgroundColor: ({ palette  })=>palette.mode === 'dark' ? palette.background.default : palette.background.paper
+                                }
                             })
                         }),
                         /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
                             direction: "row",
                             spacing: 1,
                             marginLeft: "auto",
+                            sx: {
+                                whiteSpace: 'nowrap'
+                            },
                             children: [
                                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
                                     startIcon: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_plusBoxOutline.default, {}),
@@ -107,7 +120,8 @@ const DashboardToolbar = (props)=>{
                                     onClick: openAddPanel,
                                     children: "Add Panel"
                                 }),
-                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeRangeControls.TimeRangeControls, {})
+                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeRangeControls.TimeRangeControls, {}),
+                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_downloadButton.DownloadButton, {})
                             ]
                         })
                     ]
@@ -149,7 +163,10 @@ const DashboardToolbar = (props)=>{
                     children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
                         FallbackComponent: _components.ErrorAlert,
                         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variables.TemplateVariableList, {
-                            initialVariableIsSticky: initialVariableIsSticky
+                            initialVariableIsSticky: initialVariableIsSticky,
+                            sx: {
+                                backgroundColor: ({ palette  })=>palette.mode === 'dark' ? palette.background.default : palette.background.paper
+                            }
                         })
                     })
                 })

package/dist/cjs/components/GridLayout/GridContainer.js

@@ -98,8 +98,8 @@ function GridContainer(props) {
             bottom: '3px',
             width: '5px',
             height: '5px',
-            borderRight: '2px solid rgba(0, 0, 0, 0.4)',
-            borderBottom: '2px solid rgba(0, 0, 0, 0.4)'
+            borderRight: `2px solid ${theme.palette.text.secondary}`,
+            borderBottom: `2px solid ${theme.palette.text.secondary}`
         },
         '& .react-resizable-hide > .react-resizable-handle': {
             display: 'none'

package/dist/cjs/components/GridLayout/GridTitle.js

@@ -51,7 +51,7 @@ function GridTitle(props) {
             justifyContent: 'start',
             alignItems: 'center',
             padding: (theme)=>theme.spacing(1),
-            backgroundColor: (theme)=>theme.palette.background.default
+            backgroundColor: ({ palette  })=>palette.mode === 'dark' ? palette.background.paper : palette.background.default
         },
         children: collapse ? /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
             children: [

package/dist/cjs/components/PanelDrawer/PanelDrawer.js

@@ -57,7 +57,7 @@ const PanelDrawer = ()=>{
                         display: 'flex',
                         alignItems: 'center',
                         padding: (theme)=>theme.spacing(1, 2),
-                        borderBottom: (theme)=>`1px solid ${theme.palette.grey[100]}`
+                        borderBottom: (theme)=>`1px solid ${theme.palette.divider}`
                     },
                     children: [
                         /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Typography, {
@@ -79,6 +79,7 @@ const PanelDrawer = ()=>{
                                     children: panelEditor.mode === 'Add' ? 'Add' : 'Apply'
                                 }),
                                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                                    color: "secondary",
                                     variant: "outlined",
                                     onClick: handleClose,
                                     children: "Cancel"

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

@@ -25,9 +25,17 @@ _export(exports, {
     TimeRangeControls: ()=>TimeRangeControls
 });
 const _jsxRuntime = require("react/jsx-runtime");
+const _refresh = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Refresh"));
+const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
+const _pluginSystem = require("@perses-dev/plugin-system");
 const _core = require("@perses-dev/core");
 const _context = require("../../context");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 const TIME_OPTIONS = [
     {
         value: {
@@ -85,7 +93,7 @@ const TIME_OPTIONS = [
     }
 ];
 function TimeRangeControls() {
-    const { timeRange , setTimeRange  } = (0, _context.useDashboardTimeRange)();
+    const { timeRange , setTimeRange , refresh  } = (0, _pluginSystem.useTimeRange)();
     const defaultTimeRange = (0, _context.useDefaultTimeRange)();
     // add time shortcut if one does not match duration from dashboard JSON
     if (!TIME_OPTIONS.some((option)=>option.value.pastDuration === defaultTimeRange.pastDuration)) {
@@ -98,9 +106,24 @@ function TimeRangeControls() {
             });
         }
     }
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.DateTimeRangePicker, {
-        timeOptions: TIME_OPTIONS,
-        value: timeRange,
-        onChange: setTimeRange
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.DateTimeRangePicker, {
+                timeOptions: TIME_OPTIONS,
+                value: timeRange,
+                onChange: setTimeRange
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(RefreshIconButton, {
+                "aria-label": "Refresh Dashboard",
+                onClick: refresh,
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_refresh.default, {})
+            })
+        ]
     });
 }
+const RefreshIconButton = (0, _material.styled)(_material.IconButton)(({ theme  })=>({
+        border: `1px solid ${theme.palette.grey[300]}`,
+        borderRadius: theme.shape.borderRadius,
+        padding: theme.spacing(0.5),
+        color: theme.palette.grey[900]
+    }));

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

@@ -19,6 +19,7 @@ const _reactRouter = require("react-router");
 const _history = require("history");
 const _userEvent = /*#__PURE__*/ _interopRequireDefault(require("@testing-library/user-event"));
 const _react = require("@testing-library/react");
+const _pluginSystem = require("@perses-dev/plugin-system");
 const _test = require("../../test");
 const _testDashboard = /*#__PURE__*/ _interopRequireDefault(require("../../test/testDashboard"));
 const _context = require("../../context");
@@ -30,6 +31,7 @@ function _interopRequireDefault(obj) {
 }
 const history = (0, _history.createMemoryHistory)({
     initialEntries: [
+        (0, _reactRouter.generatePath)('/home'),
         (0, _reactRouter.generatePath)('/dashboards/:id', {
             id: 'test'
         })
@@ -48,7 +50,7 @@ describe('TimeRangeControls', ()=>{
     const renderTimeRangeControls = (testURLParams)=>{
         (0, _test.renderWithContext)(/*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.DashboardProvider, {
             initialState: initialState,
-            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.TimeRangeProvider, {
+            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.TimeRangeProvider, {
                 initialTimeRange: testDefaultTimeRange,
                 enabledURLParams: testURLParams,
                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeRangeControls.TimeRangeControls, {})
@@ -58,7 +60,9 @@ describe('TimeRangeControls', ()=>{
     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');
+        const dateButton = _react.screen.getByRole('button', {
+            name: /last/i
+        });
         _userEvent.default.click(dateButton);
         const firstSelected = _react.screen.getByRole('option', {
             name: 'Last 5 minutes'
@@ -68,7 +72,9 @@ describe('TimeRangeControls', ()=>{
     });
     it('should update URL params with correct time range values', ()=>{
         renderTimeRangeControls(true);
-        const dateButton = _react.screen.getByRole('button');
+        const dateButton = _react.screen.getByRole('button', {
+            name: /last/i
+        });
         _userEvent.default.click(dateButton);
         const firstSelected = _react.screen.getByRole('option', {
             name: 'Last 5 minutes'
@@ -79,11 +85,11 @@ describe('TimeRangeControls', ()=>{
         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
+        // back button should return to previous page selected
         (0, _react.act)(()=>{
             history.back();
         });
-        expect(history.location.search).toEqual('?start=5m');
+        expect(history.location.pathname).toEqual('/home');
     });
 // TODO: add additional tests for absolute time selection, other inputs, form validation, etc.
 });

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

@@ -334,6 +334,18 @@ function VariableEditForm({ initialVariableDefinition , onChange , onCancel  })
                                         item: true,
                                         xs: 6,
                                         children: [
+                                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                                                sx: {
+                                                    mb: 1
+                                                },
+                                                label: "Capturing Regexp",
+                                                value: state.listVariableFields.capturing_regexp,
+                                                onChange: (e)=>{
+                                                    setState((draft)=>{
+                                                        draft.listVariableFields.capturing_regexp = e.target.value;
+                                                    });
+                                                }
+                                            }),
                                             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.ClickAwayListener, {
                                                 onClickAway: ()=>refreshPreview(),
                                                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {})
@@ -351,13 +363,16 @@ function VariableEditForm({ initialVariableDefinition , onChange , onCancel  })
                                             })
                                         ]
                                     }),
-                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+                                    state.listVariableFields.plugin.kind && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
                                         item: true,
                                         xs: 12,
                                         children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_components.ErrorBoundary, {
                                             FallbackComponent: ()=>/*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
-                                                    children: "Error"
+                                                    children: "Error previewing values"
                                                 }),
+                                            resetKeys: [
+                                                previewSpec
+                                            ],
                                             children: [
                                                 /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
                                                     direction: 'row',

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

@@ -33,6 +33,7 @@ function getInitialState(initialVariableDefinition) {
     const listVariableFields = {
         allowMultiple: false,
         allowAll: false,
+        capturing_regexp: undefined,
         plugin: {
             kind: '',
             spec: {}
@@ -43,6 +44,7 @@ function getInitialState(initialVariableDefinition) {
         listVariableFields.allowMultiple = (_allow_all_value = initialVariableDefinition.spec.allow_all_value) !== null && _allow_all_value !== void 0 ? _allow_all_value : false;
         var _allow_all_value1;
         listVariableFields.allowAll = (_allow_all_value1 = initialVariableDefinition.spec.allow_all_value) !== null && _allow_all_value1 !== void 0 ? _allow_all_value1 : false;
+        listVariableFields.capturing_regexp = initialVariableDefinition.spec.capturing_regexp;
         listVariableFields.plugin = initialVariableDefinition.spec.plugin;
     }
     return {
@@ -63,26 +65,25 @@ function getVariableDefinitionFromState(state) {
         }
     };
     if (kind === 'TextVariable') {
-        const textVariableDefinition = {
+        return {
             kind,
             spec: {
                 ...commonSpec,
                 ...state.textVariableFields
             }
         };
-        return textVariableDefinition;
     }
     if (kind === 'ListVariable') {
-        const listVariableDefinition = {
+        return {
             kind,
             spec: {
                 ...commonSpec,
                 allow_multiple: state.listVariableFields.allowMultiple,
                 allow_all_value: state.listVariableFields.allowAll,
+                capturing_regexp: state.listVariableFields.capturing_regexp,
                 plugin: state.listVariableFields.plugin
             }
         };
-        return listVariableDefinition;
     }
     throw new Error(`Unknown variable kind: ${kind}`);
 }

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

@@ -129,6 +129,9 @@ function TemplateVariableList(props) {
                 color: 'inherit',
                 position: isSticky ? 'fixed' : 'static',
                 elevation: isSticky ? 4 : 0,
+                sx: {
+                    ...props.sx
+                },
                 children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
                     display: 'flex',
                     justifyContent: "space-between",

package/dist/cjs/components/Variables/variable-model.js

@@ -21,22 +21,49 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    filterVariableList: ()=>filterVariableList,
     useListVariablePluginValues: ()=>useListVariablePluginValues,
     getVariableValuesKey: ()=>getVariableValuesKey
 });
 const _pluginSystem = require("@perses-dev/plugin-system");
 const _reactQuery = require("@tanstack/react-query");
+function filterVariableList(data, capturedRegexp) {
+    const result = [];
+    const filteredSet = new Set();
+    for (const variableValue of data){
+        const matches = variableValue.value.matchAll(capturedRegexp);
+        let concat = '';
+        for (const match of matches){
+            for(let i = 1; i < match.length; i++){
+                const m = match[i];
+                if (m !== undefined) {
+                    concat = `${concat}${m}`;
+                }
+            }
+        }
+        if (concat !== '' && !filteredSet.has(concat)) {
+            // like that we are avoiding to have duplicating variable value
+            filteredSet.add(concat);
+            result.push({
+                label: variableValue.label,
+                value: concat
+            });
+        }
+    }
+    return result;
+}
 function useListVariablePluginValues(definition) {
     const { data: variablePlugin  } = (0, _pluginSystem.usePlugin)('Variable', definition.spec.plugin.kind);
     const datasourceStore = (0, _pluginSystem.useDatasourceStore)();
     const allVariables = (0, _pluginSystem.useTemplateVariableValues)();
-    const { timeRange  } = (0, _pluginSystem.useTimeRange)();
+    const { absoluteTimeRange: timeRange , refreshKey  } = (0, _pluginSystem.useTimeRange)();
     const variablePluginCtx = {
         timeRange,
         datasourceStore,
         variables: allVariables
     };
     const spec = definition.spec.plugin.spec;
+    const capturingRegexp = definition.spec.capturing_regexp !== undefined ? new RegExp(definition.spec.capturing_regexp, 'g') : undefined;
     let dependsOnVariables;
     if (variablePlugin === null || variablePlugin === void 0 ? void 0 : variablePlugin.dependsOn) {
         const dependencies = variablePlugin.dependsOn(spec, variablePluginCtx);
@@ -51,23 +78,28 @@ function useListVariablePluginValues(definition) {
         });
     }
     const variablesValueKey = getVariableValuesKey(variables);
-    const variablesOptionsQuery = (0, _reactQuery.useQuery)([
+    return (0, _reactQuery.useQuery)([
         name,
         definition,
         variablesValueKey,
-        timeRange
+        timeRange,
+        refreshKey
     ], async ()=>{
         const resp = await (variablePlugin === null || variablePlugin === void 0 ? void 0 : variablePlugin.getVariableOptions(spec, {
             datasourceStore,
             variables,
             timeRange
         }));
-        var ref;
-        return (ref = resp === null || resp === void 0 ? void 0 : resp.data) !== null && ref !== void 0 ? ref : [];
+        if (resp === undefined) {
+            return [];
+        }
+        if (capturingRegexp === undefined) {
+            return resp.data;
+        }
+        return filterVariableList(resp.data, capturingRegexp);
     }, {
         enabled: !!variablePlugin || waitToLoad
     });
-    return variablesOptionsQuery;
 }
 function getVariableValuesKey(v) {
     return Object.values(v).map((v)=>JSON.stringify(v.value)).join(',');

package/dist/cjs/components/Variables/variable-model.test.js

@@ -0,0 +1,106 @@
+// Copyright 2022 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
+});
+const _variableModel = require("./variable-model");
+describe('filterVariableList', ()=>{
+    const testSuite = [
+        {
+            title: 'basic case',
+            capturing_regexp: /([^-]*)-host-([^-]*)/g,
+            originalValues: [
+                {
+                    label: 'l1',
+                    value: 'us1-host-ahdix'
+                },
+                {
+                    label: 'l2',
+                    value: 'us1-host-diua'
+                },
+                {
+                    label: 'l3',
+                    value: 'eu1-host-adf'
+                },
+                {
+                    label: 'l4',
+                    value: 'bar'
+                }
+            ],
+            result: [
+                {
+                    label: 'l1',
+                    value: 'us1ahdix'
+                },
+                {
+                    label: 'l2',
+                    value: 'us1diua'
+                },
+                {
+                    label: 'l3',
+                    value: 'eu1adf'
+                }
+            ]
+        },
+        {
+            title: 'duplicate captured value',
+            capturing_regexp: /prometheus-(.+):\d+/g,
+            originalValues: [
+                {
+                    label: 'l1',
+                    value: 'prometheus-app:9090'
+                },
+                {
+                    label: 'l2',
+                    value: 'prometheus-app:9091'
+                },
+                {
+                    label: 'l3',
+                    value: 'prometheus-platform:9091'
+                },
+                {
+                    label: 'l4',
+                    value: 'prometheus-database:9091'
+                },
+                {
+                    label: 'l5',
+                    value: 'prometheus-perses:9091'
+                }
+            ],
+            result: [
+                {
+                    label: 'l1',
+                    value: 'app'
+                },
+                {
+                    label: 'l3',
+                    value: 'platform'
+                },
+                {
+                    label: 'l4',
+                    value: 'database'
+                },
+                {
+                    label: 'l5',
+                    value: 'perses'
+                }
+            ]
+        }
+    ];
+    testSuite.forEach(({ title , capturing_regexp , originalValues , result  })=>{
+        it(title, ()=>{
+            expect((0, _variableModel.filterVariableList)(originalValues, capturing_regexp)).toEqual(result);
+        });
+    });
+});

package/dist/cjs/context/TemplateVariableProvider/query-params.js

@@ -63,7 +63,9 @@ function useVariableQueryParams(defs) {
         const name = getURLQueryParamName(def.spec.name);
         config[name] = VariableValueParam;
     });
-    return (0, _useQueryParams.useQueryParams)(config);
+    return (0, _useQueryParams.useQueryParams)(config, {
+        updateType: 'replaceIn'
+    });
 }
 function getInitalValuesFromQueryParameters(queryParamValues) {
     const values = {};

package/dist/cjs/context/index.js

@@ -17,7 +17,6 @@ Object.defineProperty(exports, "__esModule", {
 _exportStar(require("./DashboardProvider"), exports);
 _exportStar(require("./DatasourceStoreProvider"), exports);
 _exportStar(require("./TemplateVariableProvider"), exports);
-_exportStar(require("./TimeRangeProvider"), exports);
 _exportStar(require("./useDashboard"), exports);
 function _exportStar(from, to) {
     Object.keys(from).forEach(function(k) {

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 , dashboardTitleComponent , initialVariableIsSticky  } = props;
+    const { dashboardResource , dashboardTitleComponent , initialVariableIsSticky , isReadonly  } = props;
     const { setEditMode  } = (0, _context.useEditMode)();
     const { dashboard , setDashboard  } = (0, _context.useDashboard)();
     const [originalDashboard, setOriginalDashboard] = (0, _react.useState)(undefined);
@@ -67,6 +67,7 @@ const DashboardApp = (props)=>{
                 dashboardName: dashboardResource.metadata.name,
                 dashboardTitleComponent: dashboardTitleComponent,
                 initialVariableIsSticky: initialVariableIsSticky,
+                isReadonly: isReadonly,
                 onEditButtonClick: onEditButtonClick,
                 onCancelButtonClick: onCancelButtonClick
             }),

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

@@ -21,14 +21,15 @@ Object.defineProperty(exports, "ViewDashboard", {
 const _jsxRuntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
+const _pluginSystem = require("@perses-dev/plugin-system");
 const _context = require("../../context");
 const _dashboardApp = require("./DashboardApp");
 function ViewDashboard(props) {
-    const { dashboardResource , datasourceApi , dashboardTitleComponent , initialVariableIsSticky , sx , ...others } = props;
+    const { dashboardResource , datasourceApi , dashboardTitleComponent , initialVariableIsSticky , isReadonly , sx , ...others } = props;
     const { spec  } = dashboardResource;
     var _duration;
     const dashboardDuration = (_duration = spec.duration) !== null && _duration !== void 0 ? _duration : '1h';
-    const initialTimeRange = (0, _context.useInitialTimeRange)(dashboardDuration);
+    const initialTimeRange = (0, _pluginSystem.useInitialTimeRange)(dashboardDuration);
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.DatasourceStoreProvider, {
         dashboardResource: dashboardResource,
         datasourceApi: datasourceApi,
@@ -36,7 +37,7 @@ function ViewDashboard(props) {
             initialState: {
                 dashboardResource
             },
-            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.TimeRangeProvider, {
+            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.TimeRangeProvider, {
                 initialTimeRange: initialTimeRange,
                 enabledURLParams: true,
                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.TemplateVariableProvider, {
@@ -55,7 +56,8 @@ function ViewDashboard(props) {
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dashboardApp.DashboardApp, {
                                 dashboardResource: dashboardResource,
                                 dashboardTitleComponent: dashboardTitleComponent,
-                                initialVariableIsSticky: initialVariableIsSticky
+                                initialVariableIsSticky: initialVariableIsSticky,
+                                isReadonly: isReadonly
                             })
                         })
                     })