@perses-dev/dashboards 0.21.0 → 0.22.0

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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
@@ -25,6 +25,7 @@ const _informationOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-ma
 const _pencilOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/PencilOutline"));
 const _deleteOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/DeleteOutline"));
 const _dragVertical = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/DragVertical"));
+const _constants = require("../../constants");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -39,9 +40,9 @@ function PanelHeader({ id , title , description , editHandlers , isHovered , sx
         actions = /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
             children: [
                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
-                    description: "Edit",
+                    description: _constants.TOOLTIP_TEXT.editPanel,
                     children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
-                        "aria-label": `edit panel ${title}`,
+                        "aria-label": _constants.ARIA_LABEL_TEXT.editPanel(title),
                         size: "small",
                         onClick: editHandlers.onEditPanelClick,
                         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencilOutline.default, {
@@ -50,9 +51,9 @@ function PanelHeader({ id , title , description , editHandlers , isHovered , sx
                     })
                 }),
                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
-                    description: "Delete",
+                    description: _constants.TOOLTIP_TEXT.deletePanel,
                     children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
-                        "aria-label": `delete panel ${title}`,
+                        "aria-label": _constants.ARIA_LABEL_TEXT.deletePanel(title),
                         size: "small",
                         onClick: editHandlers.onDeletePanelClick,
                         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_deleteOutline.default, {
@@ -61,9 +62,9 @@ function PanelHeader({ id , title , description , editHandlers , isHovered , sx
                     })
                 }),
                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
-                    description: "Drag and drop panel to reorganize",
+                    description: _constants.TOOLTIP_TEXT.movePanel,
                     children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
-                        "aria-label": `move panel ${title}`,
+                        "aria-label": _constants.ARIA_LABEL_TEXT.movePanel(title),
                         size: "small",
                         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dragVertical.default, {
                             className: "drag-handle",
@@ -83,7 +84,7 @@ function PanelHeader({ id , title , description , editHandlers , isHovered , sx
             description: description,
             enterDelay: 100,
             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderIconButton, {
-                "aria-label": "Panel Description",
+                "aria-label": "panel description",
                 size: "small",
                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_informationOutline.default, {
                     "aria-describedby": "info-tooltip",

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

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

@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/no-empty-function */ // Copyright 2022 The Perses Authors
+/* eslint-disable @typescript-eslint/no-empty-function */ // 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
@@ -71,6 +71,7 @@ const PanelDrawer = ()=>{
         SlideProps: {
             onExited: handleExited
         },
+        "data-testid": "panel-editor",
         children: panelEditor !== undefined && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
             children: [
                 /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/components/PanelGroupDialog/PanelGroupDialog.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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
@@ -73,6 +73,7 @@ function PanelGroupDialog() {
                     children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_close.default, {})
                 }),
                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.DialogContent, {
+                    dividers: true,
                     sx: {
                         width: '500px'
                     },
@@ -90,6 +91,7 @@ function PanelGroupDialog() {
                             children: panelGroupEditor.mode === 'Edit' ? 'Apply' : 'Add'
                         }),
                         /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                            variant: "outlined",
                             onClick: panelGroupEditor.close,
                             children: "Cancel"
                         })

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/components/PanelGroupDialog/PanelGroupEditorForm.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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
@@ -26,11 +26,12 @@ _export(exports, {
 });
 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 _constants = require("../../constants");
 const _context = require("../../context");
+const _toolbarIconButton = require("../ToolbarIconButton");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -96,7 +97,7 @@ const DEFAULT_HEIGHT = '34px';
 function TimeRangeControls({ heightPx  }) {
     const { timeRange , setTimeRange , refresh  } = (0, _pluginSystem.useTimeRange)();
     const defaultTimeRange = (0, _context.useDefaultTimeRange)();
-    // Convert height as a number to height as a string, then use this value for styling
+    // 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)) {
@@ -117,20 +118,17 @@ function TimeRangeControls({ heightPx  }) {
                 onChange: setTimeRange,
                 height: height
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(RefreshIconButton, {
-                "aria-label": "Refresh Dashboard",
-                onClick: refresh,
-                sx: {
-                    height
-                },
-                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_refresh.default, {})
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
+                description: _constants.TOOLTIP_TEXT.refreshDashboard,
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_toolbarIconButton.ToolbarIconButton, {
+                    "aria-label": _constants.TOOLTIP_TEXT.refreshDashboard,
+                    onClick: refresh,
+                    sx: {
+                        height
+                    },
+                    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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/components/ToolbarIconButton/ToolbarIconButton.js

@@ -0,0 +1,35 @@
+// 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, "ToolbarIconButton", {
+    enumerable: true,
+    get: ()=>ToolbarIconButton
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+function ToolbarIconButton(props) {
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(IconButton, {
+        variant: "outlined",
+        color: "secondary",
+        ...props
+    });
+}
+const IconButton = (0, _material.styled)(_material.Button)(({ theme  })=>({
+        // Using a button with some adjusted styles because it is easier to inherit
+        // styling and variants from themes than with an IconButton.
+        padding: theme.spacing(0.5),
+        minWidth: 'auto'
+    }));

package/dist/cjs/components/ToolbarIconButton/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("./ToolbarIconButton"), 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/Variables/EditVariablesButton.js

@@ -0,0 +1,74 @@
+// 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, "EditVariablesButton", {
+    enumerable: true,
+    get: ()=>EditVariablesButton
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _pencilOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/PencilOutline"));
+const _components = require("@perses-dev/components");
+const _constants = require("../../constants");
+const _context = require("../../context");
+const _variableEditor = require("./VariableEditor");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function EditVariablesButton() {
+    const [isVariableEditorOpen, setIsVariableEditorOpen] = (0, _react.useState)(false);
+    const variableDefinitions = (0, _context.useTemplateVariableDefinitions)();
+    const { setVariableDefinitions  } = (0, _context.useTemplateVariableActions)();
+    const openVariableEditor = ()=>{
+        setIsVariableEditorOpen(true);
+    };
+    const closeVariableEditor = ()=>{
+        setIsVariableEditorOpen(false);
+    };
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
+                description: _constants.TOOLTIP_TEXT.editVariables,
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                    startIcon: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencilOutline.default, {}),
+                    onClick: openVariableEditor,
+                    "aria-label": _constants.TOOLTIP_TEXT.editVariables,
+                    children: "Variables"
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.Drawer, {
+                isOpen: isVariableEditorOpen,
+                onClose: closeVariableEditor,
+                PaperProps: {
+                    sx: {
+                        width: '50%'
+                    }
+                },
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variableEditor.VariableEditor, {
+                    variableDefinitions: variableDefinitions,
+                    onCancel: closeVariableEditor,
+                    onChange: (variables)=>{
+                        setVariableDefinitions(variables);
+                        setIsVariableEditorOpen(false);
+                    }
+                })
+            })
+        ]
+    });
+}

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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
@@ -21,6 +21,7 @@ Object.defineProperty(exports, "VariableEditor", {
 const _jsxRuntime = require("react/jsx-runtime");
 const _react = require("react");
 const _material = require("@mui/material");
+const _plus = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Plus"));
 const _useImmer = require("use-immer");
 const _pencil = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Pencil"));
 const _trashCan = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/TrashCan"));
@@ -209,8 +210,7 @@ function VariableEditor(props) {
                                                             children: "Type"
                                                         }),
                                                         /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
-                                                            align: "right",
-                                                            children: "Action"
+                                                            align: "right"
                                                         })
                                                     ]
                                                 })
@@ -274,9 +274,13 @@ function VariableEditor(props) {
                                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
                                     display: "flex",
                                     children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
-                                        onClick: addVariable,
                                         variant: "contained",
-                                        children: "Add New"
+                                        startIcon: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_plus.default, {}),
+                                        sx: {
+                                            marginLeft: 'auto'
+                                        },
+                                        onClick: addVariable,
+                                        children: "Add Variable"
                                     })
                                 })
                             ]

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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
@@ -26,6 +26,7 @@ const _pluginSystem = require("@perses-dev/plugin-system");
 const _components = require("@perses-dev/components");
 const _refresh = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Refresh"));
 const _clipboardOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ClipboardOutline"));
+const _constants = require("../../../constants");
 const _variableModel = require("../variable-model");
 const _variableEditorFormModel = require("./variable-editor-form-model");
 function _interopRequireDefault(obj) {
@@ -115,18 +116,16 @@ function VariableListPreview({ definition , onRefresh  }) {
                         variant: "caption",
                         children: "Preview Values"
                     }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Tooltip, {
-                        title: "Refresh Values",
-                        placement: "right",
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
+                        description: _constants.TOOLTIP_TEXT.refreshVariableValues,
                         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
                             onClick: onRefresh,
                             size: "small",
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_refresh.default, {})
                         })
                     }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Tooltip, {
-                        title: "Copy Values to Clipboard",
-                        placement: "right",
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
+                        description: _constants.TOOLTIP_TEXT.copyVariableValues,
                         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
                             onClick: async ()=>{
                                 if (data === null || data === void 0 ? void 0 : data.length) {

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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