@perses-dev/dashboards 0.24.0 → 0.25.0

package/dist/cjs/components/AddPanelButton/AddPanelButton.js

@@ -29,7 +29,7 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
-const AddPanelButton = ()=>{
+const AddPanelButton = ({ variant ='text' , color ='primary' , label ='Panel' , fullWidth  })=>{
     const { openAddPanel  } = (0, _context.useDashboardActions)();
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
         description: _constants.TOOLTIP_TEXT.addPanel,
@@ -37,7 +37,14 @@ const AddPanelButton = ()=>{
             startIcon: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_chartBoxPlusOutline.default, {}),
             onClick: openAddPanel,
             "aria-label": _constants.TOOLTIP_TEXT.addPanel,
-            children: "Panel"
+            variant: variant,
+            color: color,
+            fullWidth: fullWidth,
+            sx: {
+                whiteSpace: 'nowrap',
+                minWidth: 'auto'
+            },
+            children: label
         })
     });
 };

package/dist/cjs/components/Dashboard/Dashboard.js

@@ -23,15 +23,32 @@ const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
 const _context = require("../../context");
 const _gridLayout = require("../GridLayout");
-function Dashboard(props) {
+const _emptyDashboard = require("../EmptyDashboard");
+function Dashboard({ emptyDashboardProps , ...boxProps }) {
     const panelGroupIds = (0, _context.usePanelGroupIds)();
+    const isEmpty = !panelGroupIds.length;
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
-        ...props,
-        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
+        ...boxProps,
+        sx: {
+            height: '100%'
+        },
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_components.ErrorBoundary, {
             FallbackComponent: _components.ErrorAlert,
-            children: panelGroupIds.map((panelGroupId)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_gridLayout.GridLayout, {
-                    panelGroupId: panelGroupId
-                }, panelGroupId))
+            children: [
+                isEmpty && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                    sx: {
+                        height: '100%',
+                        display: 'flex',
+                        alignItems: 'center'
+                    },
+                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_emptyDashboard.EmptyDashboard, {
+                        ...emptyDashboardProps
+                    })
+                }),
+                !isEmpty && panelGroupIds.map((panelGroupId)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_gridLayout.GridLayout, {
+                        panelGroupId: panelGroupId
+                    }, panelGroupId))
+            ]
         })
     });
 }

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

@@ -21,7 +21,6 @@ Object.defineProperty(exports, "DashboardToolbar", {
 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 _context = require("../../context");
 const _addPanelButton = require("../AddPanelButton");
@@ -29,11 +28,8 @@ const _addGroupButton = require("../AddGroupButton");
 const _downloadButton = require("../DownloadButton");
 const _timeRangeControls = require("../TimeRangeControls");
 const _variables = require("../Variables");
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
+const _editButton = require("../EditButton");
+const _editJsonButton = require("../EditJsonButton");
 const DashboardToolbar = (props)=>{
     const { dashboardName , dashboardTitleComponent , initialVariableIsSticky , isReadonly , onEditButtonClick , onCancelButtonClick , onSave ,  } = props;
     const dashboard = (0, _context.useDashboard)();
@@ -130,7 +126,8 @@ const DashboardToolbar = (props)=>{
                                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_addPanelButton.AddPanelButton, {}),
                                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_addGroupButton.AddGroupButton, {}),
                                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeRangeControls.TimeRangeControls, {}),
-                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_downloadButton.DownloadButton, {})
+                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_downloadButton.DownloadButton, {}),
+                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_editJsonButton.EditJsonButton, {})
                             ]
                         }) : // On smaller screens, make it two rows
                         /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
@@ -145,7 +142,8 @@ const DashboardToolbar = (props)=>{
                                     },
                                     children: [
                                         /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeRangeControls.TimeRangeControls, {}),
-                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_downloadButton.DownloadButton, {})
+                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_downloadButton.DownloadButton, {}),
+                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_editJsonButton.EditJsonButton, {})
                                     ]
                                 }),
                                 /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
@@ -185,15 +183,8 @@ const DashboardToolbar = (props)=>{
                             children: [
                                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeRangeControls.TimeRangeControls, {}),
                                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_downloadButton.DownloadButton, {}),
-                                isBiggerThanSm && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
-                                    variant: "outlined",
-                                    color: "secondary",
-                                    startIcon: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencilOutline.default, {}),
-                                    onClick: onEditButtonClick,
-                                    sx: {
-                                        marginLeft: 'auto'
-                                    },
-                                    children: "Edit"
+                                isBiggerThanSm && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_editButton.EditButton, {
+                                    onClick: onEditButtonClick
                                 })
                             ]
                         })

package/dist/cjs/components/EditButton/EditButton.js

@@ -0,0 +1,41 @@
+// 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, "EditButton", {
+    enumerable: true,
+    get: ()=>EditButton
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _pencilOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/PencilOutline"));
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const EditButton = ({ label ='Edit' , onClick  })=>{
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+        onClick: onClick,
+        startIcon: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencilOutline.default, {}),
+        variant: "outlined",
+        color: "secondary",
+        sx: {
+            whiteSpace: 'nowrap',
+            minWidth: 'auto'
+        },
+        children: label
+    });
+};

package/dist/cjs/components/EditButton/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("./EditButton"), 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/EditJsonButton/EditJsonButton.js

@@ -0,0 +1,42 @@
+// 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, "EditJsonButton", {
+    enumerable: true,
+    get: ()=>EditJsonButton
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _codeBraces = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/CodeBraces"));
+const _components = require("@perses-dev/components");
+const _constants = require("../../constants");
+const _toolbarIconButton = require("../ToolbarIconButton");
+const _context = require("../../context");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const EditJsonButton = ()=>{
+    const { openEditJsonDialog  } = (0, _context.useEditJsonDialog)();
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
+        description: _constants.TOOLTIP_TEXT.editJson,
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_toolbarIconButton.ToolbarIconButton, {
+            variant: "outlined",
+            onClick: ()=>openEditJsonDialog(),
+            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_codeBraces.default, {})
+        })
+    });
+};

package/dist/cjs/components/EditJsonButton/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("./EditJsonButton"), 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/EditJsonDialog/EditJsonDialog.js

@@ -0,0 +1,86 @@
+// 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, "EditJsonDialog", {
+    enumerable: true,
+    get: ()=>EditJsonDialog
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _components = require("@perses-dev/components");
+const _dashboardProvider = require("../../context/DashboardProvider");
+const _useDashboard = require("../../context/useDashboard");
+const EditJsonDialog = ()=>{
+    const { editJsonDialog , closeEditJsonDialog  } = (0, _dashboardProvider.useEditJsonDialog)();
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_components.Dialog, {
+        open: !!(editJsonDialog === null || editJsonDialog === void 0 ? void 0 : editJsonDialog.isOpen),
+        scroll: "paper",
+        fullWidth: true,
+        maxWidth: "lg",
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.Dialog.Header, {
+                onClose: ()=>closeEditJsonDialog(),
+                children: "Edit Dashboard"
+            }),
+            (editJsonDialog === null || editJsonDialog === void 0 ? void 0 : editJsonDialog.isOpen) && /*#__PURE__*/ (0, _jsxRuntime.jsx)(EditJsonDialogForm, {})
+        ]
+    });
+};
+const EditJsonDialogForm = ()=>{
+    const { closeEditJsonDialog  } = (0, _dashboardProvider.useEditJsonDialog)();
+    const { dashboard , setDashboard  } = (0, _useDashboard.useDashboard)();
+    const [draftDashboard, setDraftDashboard] = (0, _react.useState)(dashboard);
+    const handleApply = (e)=>{
+        e.preventDefault();
+        setDashboard(draftDashboard);
+        closeEditJsonDialog();
+    };
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_components.Dialog.Form, {
+        onSubmit: handleApply,
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_components.Dialog.Content, {
+                sx: {
+                    width: '100%'
+                },
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Alert, {
+                        sx: {
+                            marginBottom: (theme)=>theme.spacing(1)
+                        },
+                        severity: "warning",
+                        children: "Metadata cannot be modified or saved."
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.FormControl, {
+                        fullWidth: true,
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.JSONEditor, {
+                            minHeight: "300px",
+                            maxHeight: "700px",
+                            value: draftDashboard,
+                            onChange: (value)=>setDraftDashboard(value)
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.Dialog.Actions, {
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.Dialog.PrimaryButton, {
+                    onClick: handleApply,
+                    children: "Apply"
+                })
+            })
+        ]
+    });
+};

package/dist/cjs/components/EditJsonDialog/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("./EditJsonDialog"), 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/EmptyDashboard/EmptyDashboard.js

@@ -0,0 +1,127 @@
+// 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, "EmptyDashboard", {
+    enumerable: true,
+    get: ()=>EmptyDashboard
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _context = require("../../context");
+const _addPanelButton = require("../AddPanelButton");
+const _variables = require("../Variables");
+const _editButton = require("../EditButton");
+const DEFAULT_TITLE = "Let's get started";
+const DEFAULT_DESCRIPTION = {
+    edit: 'We currently support time series charts, gauge charts, stat charts and more!',
+    view: 'This dashboard is currently empty. Get started by clicking the edit button.'
+};
+// Constants from specifics in designs to make the default messaging look good.
+const CONTAINER_WIDTH = '450px';
+const PRIMARY_CONTENT_WIDTH = '289px';
+const COMMON_BUTTON_PROPS = {
+    variant: 'outlined',
+    color: 'secondary'
+};
+const EmptyDashboardActions = ({ actions , isEditMode , onEditButtonClick  })=>{
+    if (actions && typeof actions !== 'boolean') {
+        // Custom actions
+        return actions;
+    }
+    if (actions === false) {
+        // Disable default actions
+        return null;
+    }
+    if (isEditMode) {
+        // Default edit mode actions
+        return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_addPanelButton.AddPanelButton, {
+                    variant: "outlined",
+                    color: "secondary",
+                    label: "Add Panel",
+                    fullWidth: true
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variables.EditVariablesButton, {
+                    variant: "outlined",
+                    color: "secondary",
+                    label: "Add Variables",
+                    fullWidth: true
+                })
+            ]
+        });
+    }
+    if (onEditButtonClick) {
+        // Default view mode actions
+        return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_editButton.EditButton, {
+            ...COMMON_BUTTON_PROPS,
+            label: "Edit Dashboard",
+            onClick: onEditButtonClick
+        });
+    }
+    return null;
+};
+const EmptyDashboard = ({ title =DEFAULT_TITLE , description , additionalText , actions , onEditButtonClick  })=>{
+    const { isEditMode  } = (0, _context.useEditMode)();
+    const defaultDescription = isEditMode ? DEFAULT_DESCRIPTION.edit : DEFAULT_DESCRIPTION.view;
+    const actionsContent = /*#__PURE__*/ (0, _jsxRuntime.jsx)(EmptyDashboardActions, {
+        actions: actions,
+        onEditButtonClick: onEditButtonClick,
+        isEditMode: isEditMode
+    });
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+        sx: {
+            width: CONTAINER_WIDTH,
+            textAlign: 'center',
+            margin: '0 auto'
+        },
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+                sx: {
+                    width: PRIMARY_CONTENT_WIDTH,
+                    margin: '0 auto'
+                },
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                        variant: "h2",
+                        gutterBottom: true,
+                        children: title
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                        variant: "body1",
+                        children: description !== null && description !== void 0 ? description : defaultDescription
+                    }),
+                    actionsContent && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                        sx: {
+                            display: 'flex',
+                            gap: 2,
+                            marginTop: 1,
+                            justifyContent: 'center'
+                        },
+                        children: actionsContent
+                    })
+                ]
+            }),
+            additionalText && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                variant: "subtitle1",
+                sx: {
+                    marginTop: 12
+                },
+                children: additionalText
+            })
+        ]
+    });
+};

package/dist/cjs/components/EmptyDashboard/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("./EmptyDashboard"), 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;
+}