@perses-dev/dashboards 0.0.0-snapshot-color-palette-gen-test-0ebddd6 → 0.0.0-snapshot-saving-defaults-refinements-1b25cec

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

@@ -0,0 +1,87 @@
+// 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, "usePanelEditor", {
+    enumerable: true,
+    get: ()=>usePanelEditor
+});
+const _react = require("react");
+const usePanelEditor = (panelDefinition)=>{
+    const { display , plugin: pluginDefinition , queries: initialQueries  } = panelDefinition.spec;
+    const [name, setName] = (0, _react.useState)(display.name);
+    const [description, setDescription] = (0, _react.useState)(display.description);
+    const [plugin, setPlugin] = (0, _react.useState)(pluginDefinition);
+    // need to keep track of prevQueries if switching from a panel with no queries (ex: markdown) to one with queries
+    const [prevQueries, setPrevQueries] = (0, _react.useState)(initialQueries);
+    const [currentQueries, setCurrentQueries] = (0, _react.useState)(initialQueries);
+    /**
+   * If hideQueryEditor is true, set panelDefinition.spec.queries to undefined.
+   * If hideQueryEditor is false and query is undefined, set panelDefinition.spec.queries to previous queries.
+   */ const setQueries = (0, _react.useCallback)((queries, hideQueryEditor)=>{
+        if (hideQueryEditor) {
+            setPrevQueries(currentQueries);
+            setCurrentQueries(undefined);
+        } else {
+            setCurrentQueries(queries === undefined ? prevQueries : queries);
+        }
+    }, [
+        setCurrentQueries,
+        currentQueries,
+        setPrevQueries,
+        prevQueries
+    ]);
+    // reset panel definition
+    const setPanelDefinition = (0, _react.useCallback)((panelDefinition)=>{
+        const { display , plugin , queries  } = panelDefinition.spec;
+        setName(display.name);
+        setDescription(display.description);
+        setPlugin(plugin);
+        setQueries(queries);
+    }, [
+        setName,
+        setDescription,
+        setPlugin,
+        setQueries
+    ]);
+    return (0, _react.useMemo)(()=>({
+            panelDefinition: {
+                kind: 'Panel',
+                spec: {
+                    display: {
+                        name,
+                        description
+                    },
+                    plugin,
+                    queries: currentQueries
+                }
+            },
+            setName,
+            setDescription,
+            setQueries,
+            setPlugin,
+            setPanelDefinition
+        }), [
+        name,
+        description,
+        plugin,
+        currentQueries,
+        setName,
+        setDescription,
+        setQueries,
+        setPlugin,
+        setPanelDefinition
+    ]);
+};

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

@@ -0,0 +1,92 @@
+// 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 { getSavedVariablesStatus  } = (0, _context.useTemplateVariableActions)();
+    const { isSavedVariableModified , modifiedVariableNames  } = getSavedVariablesStatus();
+    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 saveTimeRangeText = `Save current time range as new default ${currentTimeRangeText}`;
+    const saveVariablesText = `Save current variable values as new default (${modifiedVariableNames.length > 0 ? modifiedVariableNames.join(', ') : 'No modified variables'})`;
+    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: saveTimeRangeText
+                                }),
+                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.FormControlLabel, {
+                                    control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Checkbox, {
+                                        disabled: !isSavedVariableModified,
+                                        checked: saveDefaultVariables && isSavedVariableModified,
+                                        onChange: (e)=>setSaveDefaultVariables(e.target.checked)
+                                    }),
+                                    label: saveVariablesText
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__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,81 @@
+// 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 , setDashboard  } = (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 = async ()=>{
+        if (onSave) {
+            try {
+                setSavingDashboard(true);
+                await onSave(dashboard);
+                closeSaveChangesConfirmationDialog();
+                setEditMode(false);
+                setDashboard(dashboard);
+            } catch (error) {
+                throw new Error(`An error occurred while saving the dashboard. ${error}`);
+            } finally{
+                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;
+}

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

@@ -98,17 +98,17 @@ const DEFAULT_HEIGHT = '34px';
 function TimeRangeControls({ heightPx , showRefresh =true  }) {
     const { timeRange , setTimeRange , refresh  } = (0, _pluginSystem.useTimeRange)();
     // TODO: Remove this since it couples to the dashboard context
-    const defaultTimeRange = (0, _context.useDefaultTimeRange)();
+    const dashboardDuration = (0, _context.useDashboardDuration)();
     // Convert height to a string, then use the string for styling
     const height = heightPx === undefined ? DEFAULT_HEIGHT : `${heightPx}px`;
     // add time shortcut if one does not match duration from dashboard JSON
-    if (!TIME_OPTIONS.some((option)=>option.value.pastDuration === defaultTimeRange.pastDuration)) {
-        if ((0, _core.isDurationString)(defaultTimeRange.pastDuration)) {
+    if (!TIME_OPTIONS.some((option)=>option.value.pastDuration === dashboardDuration)) {
+        if ((0, _core.isDurationString)(dashboardDuration)) {
             TIME_OPTIONS.push({
                 value: {
-                    pastDuration: defaultTimeRange.pastDuration
+                    pastDuration: dashboardDuration
                 },
-                display: `Last ${defaultTimeRange.pastDuration}`
+                display: `Last ${dashboardDuration}`
             });
         }
     }