@perses-dev/dashboards 0.16.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,58 +47,67 @@ 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,
-                                sx: {
-                                    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',
+                            direction: "row",
                             spacing: 1,
+                            marginLeft: "auto",
                             sx: {
-                                marginLeft: 'auto'
+                                whiteSpace: 'nowrap'
                             },
                             children: [
                                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
@@ -111,14 +120,15 @@ 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, {})
                             ]
                         })
                     ]
                 })
             ]
         }) : /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
-            spacing: 2,
+            spacing: 1,
             padding: 2,
             children: [
                 /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
@@ -130,10 +140,8 @@ const DashboardToolbar = (props)=>{
                         dashboardTitle,
                         /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
                             direction: "row",
-                            spacing: 2,
-                            sx: {
-                                marginLeft: 'auto'
-                            },
+                            spacing: 1,
+                            marginLeft: "auto",
                             children: [
                                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeRangeControls.TimeRangeControls, {}),
                                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_downloadButton.DownloadButton, {}),
@@ -155,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/GridLayout.js

@@ -28,6 +28,7 @@ const _gridTitle = require("./GridTitle");
 const _gridItemContent = require("./GridItemContent");
 const _gridContainer = require("./GridContainer");
 const ResponsiveGridLayout = (0, _reactGridLayout.WidthProvider)(_reactGridLayout.Responsive);
+const SMALL_LAYOUT_BREAKPOINT = 'sm';
 function GridLayout(props) {
     const { panelGroupId /*...others */  } = props;
     const theme = (0, _material.useTheme)();
@@ -36,6 +37,16 @@ function GridLayout(props) {
     var ref;
     const [isOpen, setIsOpen] = (0, _react.useState)((ref = !groupDefinition.isCollapsed) !== null && ref !== void 0 ? ref : true);
     const { isEditMode  } = (0, _context.useEditMode)();
+    const handleLayoutChange = (currentLayout, allLayouts)=>{
+        // Using the value from `allLayouts` instead of `currentLayout` because of
+        // a bug in react-layout-grid where `currentLayout` does not adjust properly
+        // when going to a smaller breakpoint and then back to a larger breakpoint.
+        // https://github.com/react-grid-layout/react-grid-layout/issues/1663
+        const smallLayout = allLayouts[SMALL_LAYOUT_BREAKPOINT];
+        if (smallLayout) {
+            updatePanelGroupLayouts(smallLayout);
+        }
+    };
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_gridContainer.GridContainer, {
         children: [
             groupDefinition.title !== undefined && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_gridTitle.GridTitle, {
@@ -72,9 +83,9 @@ function GridLayout(props) {
                         10
                     ],
                     layouts: {
-                        sm: groupDefinition.itemLayouts
+                        [SMALL_LAYOUT_BREAKPOINT]: groupDefinition.itemLayouts
                     },
-                    onLayoutChange: updatePanelGroupLayouts,
+                    onLayoutChange: handleLayoutChange,
                     children: groupDefinition.itemLayouts.map(({ i  })=>/*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
                                 FallbackComponent: _components.ErrorAlert,

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

@@ -20,8 +20,8 @@ Object.defineProperty(exports, "GridTitle", {
 });
 const _jsxRuntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
-const _chevronUp = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ChevronUp"));
 const _chevronDown = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ChevronDown"));
+const _chevronRight = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ChevronRight"));
 const _chartBoxPlusOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ChartBoxPlusOutline"));
 const _pencilOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/PencilOutline"));
 const _arrowUp = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ArrowUp"));
@@ -51,20 +51,18 @@ 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: [
                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
                     onClick: collapse.onToggleOpen,
-                    children: collapse.isOpen ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_chevronUp.default, {}) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_chevronDown.default, {})
+                    children: collapse.isOpen ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_chevronDown.default, {}) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_chevronRight.default, {})
                 }),
                 text,
                 isEditMode && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
                     direction: "row",
-                    sx: {
-                        marginLeft: 'auto'
-                    },
+                    marginLeft: "auto",
                     children: [
                         /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
                             "aria-label": `add panel to group ${title}`,

package/dist/cjs/components/Panel/PanelHeader.js

@@ -38,8 +38,8 @@ function PanelHeader({ id , title , description , editHandlers , isHovered , sx
         // If there are edit handlers, always just show the edit buttons
         action = /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
             direction: "row",
-            alignItems: "center",
             spacing: 0.5,
+            alignItems: "center",
             children: [
                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
                     "aria-label": `edit panel ${title}`,

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, {
@@ -70,9 +70,7 @@ const PanelDrawer = ()=>{
                         /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
                             direction: "row",
                             spacing: 1,
-                            sx: {
-                                marginLeft: 'auto'
-                            },
+                            marginLeft: "auto",
                             children: [
                                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
                                     type: "submit",
@@ -81,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/Variable.js

@@ -22,8 +22,8 @@ const _jsxRuntime = require("react/jsx-runtime");
 const _react = require("react");
 const _material = require("@mui/material");
 const _pluginSystem = require("@perses-dev/plugin-system");
-const _reactQuery = require("@tanstack/react-query");
 const _context = require("../../context");
+const _variableModel = require("./variable-model");
 function TemplateVariable({ name  }) {
     var ref;
     const ctx = (0, _context.useTemplateVariable)(name);
@@ -45,60 +45,16 @@ function TemplateVariable({ name  }) {
         ]
     });
 }
-/**
- * Returns a serialized string of the current state of variable values.
- */ function getVariableValuesKey(v) {
-    return Object.values(v).map((v)=>JSON.stringify(v.value)).join(',');
-}
 function ListVariable({ name  }) {
     var ref, ref1, ref2, ref3;
     const ctx = (0, _context.useTemplateVariable)(name);
     const definition = ctx.definition;
-    const { data: variablePlugin  } = (0, _pluginSystem.usePlugin)('Variable', definition.spec.plugin.kind);
+    const variablesOptionsQuery = (0, _variableModel.useListVariablePluginValues)(definition);
     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) {
-        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 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)=>{
-            var ref;
-            return (ref = variables[v]) === null || ref === void 0 ? void 0 : ref.loading;
-        });
-    }
-    const variablesValueKey = getVariableValuesKey(variables);
-    const variablesOptionsQuery = (0, _reactQuery.useQuery)([
-        name,
-        definition,
-        variablesValueKey,
-        timeRange
-    ], 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 : [];
-    }, {
-        enabled: !!variablePlugin || waitToLoad
-    });
     (0, _react.useEffect)(()=>{
         setVariableLoading(name, variablesOptionsQuery.isFetching);
         if (variablesOptionsQuery.data) {