@perses-dev/dashboards 0.30.0 → 0.31.0

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

@@ -19,7 +19,6 @@ Object.defineProperty(exports, "DashboardToolbar", {
     get: ()=>DashboardToolbar
 });
 const _jsxRuntime = require("react/jsx-runtime");
-const _react = require("react");
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
 const _context = require("../../context");
@@ -30,31 +29,17 @@ const _timeRangeControls = require("../TimeRangeControls");
 const _variables = require("../Variables");
 const _editButton = require("../EditButton");
 const _editJsonButton = require("../EditJsonButton");
+const _saveDashboardButton = require("../SaveDashboardButton");
 const _dashboardStickyToolbar = require("../DashboardStickyToolbar");
 const DashboardToolbar = (props)=>{
     const { dashboardName , dashboardTitleComponent , initialVariableIsSticky , isReadonly , onEditButtonClick , onCancelButtonClick , onSave ,  } = props;
-    const dashboard = (0, _context.useDashboard)();
-    const { isEditMode , setEditMode  } = (0, _context.useEditMode)();
+    const { isEditMode  } = (0, _context.useEditMode)();
     const isBiggerThanMd = (0, _material.useMediaQuery)((0, _material.useTheme)().breakpoints.up('md'));
     const isBiggerThanSm = (0, _material.useMediaQuery)((0, _material.useTheme)().breakpoints.up('sm'));
-    const [isSavingDashboard, setSavingDashboard] = (0, _react.useState)(false);
     const dashboardTitle = dashboardTitleComponent ? dashboardTitleComponent : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
         variant: "h2",
         children: dashboardName
     });
-    const onSaveButtonClick = ()=>{
-        if (onSave !== undefined) {
-            setSavingDashboard(true);
-            onSave(dashboard.dashboard).then(()=>{
-                setSavingDashboard(false);
-                setEditMode(false);
-            }).catch(()=>{
-                setSavingDashboard(false);
-            });
-        } else {
-            setEditMode(false);
-        }
-    };
     const testId = 'dashboard-toolbar';
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
         children: isEditMode ? /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
@@ -82,11 +67,9 @@ const DashboardToolbar = (props)=>{
                                     },
                                     children: "Dashboard managed via code only. Download JSON and commit changes to save."
                                 }),
-                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
-                                    variant: "contained",
-                                    onClick: onSaveButtonClick,
-                                    disabled: isReadonly || isSavingDashboard,
-                                    children: "Save"
+                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_saveDashboardButton.SaveDashboardButton, {
+                                    onSave: onSave,
+                                    isDisabled: isReadonly
                                 }),
                                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
                                     variant: "outlined",

package/dist/cjs/components/EditJsonButton/EditJsonButton.js

@@ -34,6 +34,7 @@ const EditJsonButton = ()=>{
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
         description: _constants.TOOLTIP_TEXT.editJson,
         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_toolbarIconButton.ToolbarIconButton, {
+            "aria-label": _constants.TOOLTIP_TEXT.editJson,
             variant: "outlined",
             onClick: ()=>openEditJsonDialog(),
             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_codeBraces.default, {})

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

@@ -42,24 +42,25 @@ function GridTitle(props) {
     const { isEditMode  } = (0, _context.useEditMode)();
     const text = /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
         variant: "h2",
-        sx: {
-            marginLeft: collapse !== undefined ? 1 : undefined
-        },
         children: title
     });
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+        onClick: collapse === null || collapse === void 0 ? void 0 : collapse.onToggleOpen,
         sx: {
             display: 'flex',
             justifyContent: 'start',
             alignItems: 'center',
             padding: (theme)=>theme.spacing(1),
+            cursor: collapse ? 'pointer' : 'auto',
             backgroundColor: ({ palette  })=>palette.mode === 'dark' ? palette.background.paper : palette.background.default
         },
         "data-testid": "panel-group-header",
         children: collapse ? /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
             children: [
                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
-                    onClick: collapse.onToggleOpen,
+                    sx: {
+                        marginRight: 1
+                    },
                     "aria-label": `${collapse.isOpen ? 'collapse' : 'expand'} group ${title}`,
                     children: collapse.isOpen ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_chevronDown.default, {}) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_chevronRight.default, {})
                 }),
@@ -72,7 +73,11 @@ function GridTitle(props) {
                             description: _constants.TOOLTIP_TEXT.addPanelToGroup,
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
                                 "aria-label": _constants.ARIA_LABEL_TEXT.addPanelToGroup(title),
-                                onClick: openAddPanel,
+                                onClick: (e)=>{
+                                    // Don't trigger expand/collapse
+                                    e.stopPropagation();
+                                    openAddPanel();
+                                },
                                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_chartBoxPlusOutline.default, {})
                             })
                         }),
@@ -80,7 +85,11 @@ function GridTitle(props) {
                             description: _constants.TOOLTIP_TEXT.editGroup,
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
                                 "aria-label": _constants.ARIA_LABEL_TEXT.editGroup(title),
-                                onClick: openEditPanelGroup,
+                                onClick: (e)=>{
+                                    // Don't trigger expand/collapse
+                                    e.stopPropagation();
+                                    openEditPanelGroup();
+                                },
                                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencilOutline.default, {})
                             })
                         }),
@@ -88,7 +97,11 @@ function GridTitle(props) {
                             description: _constants.TOOLTIP_TEXT.deleteGroup,
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
                                 "aria-label": _constants.ARIA_LABEL_TEXT.deleteGroup(title),
-                                onClick: ()=>openDeletePanelGroupDialog(panelGroupId),
+                                onClick: (e)=>{
+                                    // Don't trigger expand/collapse
+                                    e.stopPropagation();
+                                    openDeletePanelGroupDialog(panelGroupId);
+                                },
                                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_deleteOutline.default, {})
                             })
                         }),
@@ -97,7 +110,11 @@ function GridTitle(props) {
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
                                 "aria-label": _constants.ARIA_LABEL_TEXT.moveGroupDown(title),
                                 disabled: moveDown === undefined,
-                                onClick: moveDown,
+                                onClick: (e)=>{
+                                    // Don't trigger expand/collapse
+                                    e.stopPropagation();
+                                    moveDown && moveDown();
+                                },
                                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_arrowDown.default, {})
                             })
                         }),
@@ -106,7 +123,11 @@ function GridTitle(props) {
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
                                 "aria-label": _constants.ARIA_LABEL_TEXT.moveGroupUp(title),
                                 disabled: moveUp === undefined,
-                                onClick: moveUp,
+                                onClick: (e)=>{
+                                    // Don't trigger expand/collapse
+                                    e.stopPropagation();
+                                    moveUp && moveUp();
+                                },
                                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_arrowUp.default, {})
                             })
                         })

package/dist/cjs/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.js

@@ -0,0 +1,88 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "SaveChangesConfirmationDialog", {
+    enumerable: true,
+    get: ()=>SaveChangesConfirmationDialog
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _pluginSystem = require("@perses-dev/plugin-system");
+const _core = require("@perses-dev/core");
+const _components = require("@perses-dev/components");
+const _context = require("../../context");
+const SaveChangesConfirmationDialog = ()=>{
+    const [saveDefaultTimeRange, setSaveDefaultTimeRange] = (0, _react.useState)(true);
+    const [saveDefaultVariables, setSaveDefaultVariables] = (0, _react.useState)(true);
+    const { saveChangesConfirmationDialog: dialog  } = (0, _context.useSaveChangesConfirmationDialog)();
+    const isOpen = dialog !== undefined;
+    const { timeRange  } = (0, _pluginSystem.useTimeRange)();
+    const currentTimeRangeText = (0, _core.isRelativeTimeRange)(timeRange) ? `(Last ${timeRange.pastDuration})` : '(Absolute time ranges can not be saved)';
+    const timeRangeInfoText = `Save current time range as new default ${currentTimeRangeText}`;
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.Dialog, {
+        open: isOpen,
+        children: dialog !== undefined && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.Dialog.Header, {
+                    onClose: ()=>dialog.onCancel(),
+                    children: "Save Dashboard"
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_components.Dialog.Content, {
+                    children: [
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                            marginBottom: 2,
+                            children: dialog.description || _core.SAVE_DEFAULTS_DIALOG_TEXT
+                        }),
+                        /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.FormGroup, {
+                            children: [
+                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.FormControlLabel, {
+                                    control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Checkbox, {
+                                        disabled: !(0, _core.isRelativeTimeRange)(timeRange),
+                                        checked: saveDefaultTimeRange && (0, _core.isRelativeTimeRange)(timeRange),
+                                        onChange: (e)=>setSaveDefaultTimeRange(e.target.checked)
+                                    }),
+                                    label: timeRangeInfoText
+                                }),
+                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.FormControlLabel, {
+                                    control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Checkbox, {
+                                        checked: saveDefaultVariables,
+                                        onChange: (e)=>setSaveDefaultVariables(e.target.checked)
+                                    }),
+                                    label: "Save current variable values as new default."
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_components.Dialog.Actions, {
+                    children: [
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.Dialog.PrimaryButton, {
+                            onClick: ()=>{
+                                return dialog.onSaveChanges(saveDefaultTimeRange, saveDefaultVariables);
+                            },
+                            children: "Save Changes"
+                        }),
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.Dialog.SecondaryButton, {
+                            onClick: ()=>dialog.onCancel(),
+                            children: "Cancel"
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};

package/dist/cjs/components/SaveChangesConfirmationDialog/index.js

@@ -0,0 +1,28 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_exportStar(require("./SaveChangesConfirmationDialog"), exports);
+function _exportStar(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
+            enumerable: true,
+            get: function() {
+                return from[k];
+            }
+        });
+    });
+    return from;
+}

package/dist/cjs/components/SaveDashboardButton/SaveDashboardButton.js

@@ -0,0 +1,78 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "SaveDashboardButton", {
+    enumerable: true,
+    get: ()=>SaveDashboardButton
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _core = require("@perses-dev/core");
+const _pluginSystem = require("@perses-dev/plugin-system");
+const _context = require("../../context");
+const SaveDashboardButton = ({ onSave , isDisabled , variant ='contained'  })=>{
+    const [isSavingDashboard, setSavingDashboard] = (0, _react.useState)(false);
+    const { dashboard  } = (0, _context.useDashboard)();
+    const { getSavedVariablesStatus , setVariableDefaultValues  } = (0, _context.useTemplateVariableActions)();
+    const isSavedVariableModified = getSavedVariablesStatus();
+    const { timeRange  } = (0, _pluginSystem.useTimeRange)();
+    const { setEditMode  } = (0, _context.useEditMode)();
+    const { openSaveChangesConfirmationDialog , closeSaveChangesConfirmationDialog  } = (0, _context.useSaveChangesConfirmationDialog)();
+    const onSaveButtonClick = ()=>{
+        const isSavedDurationModified = (0, _core.isRelativeTimeRange)(timeRange) && dashboard.spec.duration !== timeRange.pastDuration;
+        // Save dashboard if active timeRange from plugin-system is relative and different than currently saved
+        if (isSavedDurationModified || isSavedVariableModified) {
+            openSaveChangesConfirmationDialog({
+                onSaveChanges: (saveDefaultTimeRange, saveDefaultVariables)=>{
+                    if ((0, _core.isRelativeTimeRange)(timeRange) && saveDefaultTimeRange === true) {
+                        dashboard.spec.duration = timeRange.pastDuration;
+                    }
+                    if (saveDefaultVariables === true) {
+                        const variables = setVariableDefaultValues();
+                        dashboard.spec.variables = variables;
+                    }
+                    saveDashboard();
+                },
+                onCancel: ()=>{
+                    closeSaveChangesConfirmationDialog();
+                }
+            });
+        } else {
+            saveDashboard();
+        }
+    };
+    const saveDashboard = ()=>{
+        if (onSave !== undefined) {
+            setSavingDashboard(true);
+            onSave(dashboard).then(()=>{
+                setSavingDashboard(false);
+                closeSaveChangesConfirmationDialog();
+                setEditMode(false);
+            }).catch(()=>{
+                setSavingDashboard(false);
+            });
+        } else {
+            setEditMode(false);
+        }
+    };
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+        variant: variant,
+        onClick: onSaveButtonClick,
+        disabled: isDisabled || isSavingDashboard,
+        children: "Save"
+    });
+};

package/dist/cjs/components/SaveDashboardButton/index.js

@@ -0,0 +1,28 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_exportStar(require("./SaveDashboardButton"), exports);
+function _exportStar(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
+            enumerable: true,
+            get: function() {
+                return from[k];
+            }
+        });
+    });
+    return from;
+}