@perses-dev/dashboards 0.8.1 → 0.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/Dashboard.js +25 -14
- package/dist/cjs/components/DashboardToolbar.js +148 -20
- package/dist/cjs/components/GridLayout/GridItemContent.js +25 -19
- package/dist/cjs/components/GridLayout/GridLayout.js +92 -27
- package/dist/cjs/components/GridLayout/GridTitle.js +91 -31
- package/dist/cjs/components/GridLayout/index.js +18 -19
- package/dist/cjs/components/Panel/DeletePanelDialog.js +91 -0
- package/dist/cjs/components/Panel/Panel.js +156 -55
- package/dist/cjs/components/Panel/Panel.test.js +58 -41
- package/dist/cjs/components/Panel/PanelContent.js +41 -12
- package/dist/cjs/components/Panel/index.js +16 -17
- package/dist/cjs/components/PanelDrawer/PanelDrawer.js +84 -108
- package/dist/cjs/components/PanelDrawer/PanelDrawer.test.js +87 -92
- package/dist/cjs/components/PanelDrawer/PanelEditorForm.js +194 -0
- package/dist/cjs/components/PanelDrawer/PanelPreview.js +48 -0
- package/dist/cjs/components/PanelDrawer/index.js +28 -0
- package/dist/cjs/components/PanelGroupDialog/DeletePanelGroupDialog.js +86 -0
- package/dist/cjs/components/PanelGroupDialog/PanelGroupDialog.js +121 -39
- package/dist/cjs/components/PanelGroupDialog/PanelGroupDialog.test.js +74 -88
- package/dist/cjs/components/TimeRangeControls/TimeRangeControls.js +120 -38
- package/dist/cjs/components/TimeRangeControls/TimeRangeControls.test.js +42 -27
- package/dist/cjs/components/TimeRangeControls/index.js +16 -17
- package/dist/cjs/components/Variables/Variable.js +195 -36
- package/dist/cjs/components/Variables/VariableEditor.js +207 -0
- package/dist/cjs/components/Variables/VariableEditorForm/VariableEditorForm.js +236 -0
- package/dist/cjs/components/Variables/VariableEditorForm/index.js +28 -0
- package/dist/cjs/components/Variables/VariableEditorForm/variable-editor-form-model.js +88 -0
- package/dist/cjs/components/Variables/VariableList.js +81 -13
- package/dist/cjs/components/Variables/index.js +18 -18
- package/dist/cjs/components/index.js +21 -21
- package/dist/cjs/context/DashboardProvider/DashboardProvider.js +70 -0
- package/dist/cjs/context/DashboardProvider/common.js +18 -0
- package/dist/cjs/context/DashboardProvider/dashboard-provider-api.js +71 -0
- package/dist/cjs/context/DashboardProvider/index.js +29 -0
- package/dist/cjs/context/DashboardProvider/layout-slice.js +200 -0
- package/dist/cjs/context/DashboardProvider/panel-editing-slice.js +156 -0
- package/dist/cjs/context/DashboardProvider/panel-group-slice.js +38 -0
- package/dist/cjs/context/DatasourceStoreProvider.js +170 -0
- package/dist/cjs/context/QueryStringProvider.js +69 -15
- package/dist/cjs/context/TemplateVariableProvider.js +135 -136
- package/dist/cjs/context/TimeRangeProvider.js +79 -30
- package/dist/cjs/context/index.js +20 -22
- package/dist/cjs/css/styles.js +43 -39
- package/dist/cjs/index.js +19 -20
- package/dist/cjs/test/dashboard-provider.js +51 -0
- package/dist/cjs/test/index.js +18 -18
- package/dist/cjs/test/plugin-registry.js +52 -25
- package/dist/cjs/test/render.js +25 -22
- package/dist/cjs/test/setup-tests.js +4 -2
- package/dist/cjs/test/testDashboard.js +203 -107
- package/dist/cjs/utils/functions.js +9 -5
- package/dist/cjs/views/ViewDashboard/DashboardApp.js +49 -23
- package/dist/cjs/views/ViewDashboard/ViewDashboard.js +62 -31
- package/dist/cjs/views/ViewDashboard/index.js +16 -17
- package/dist/cjs/views/ViewDashboard/tests/panelGroups.test.js +165 -0
- package/dist/cjs/views/index.js +16 -17
- package/dist/components/Dashboard.d.ts +1 -4
- package/dist/components/Dashboard.d.ts.map +1 -1
- package/dist/components/Dashboard.js +34 -1
- package/dist/components/Dashboard.js.map +1 -0
- package/dist/components/DashboardToolbar.d.ts.map +1 -1
- package/dist/components/DashboardToolbar.js +154 -1
- package/dist/components/DashboardToolbar.js.map +1 -0
- package/dist/components/GridLayout/GridItemContent.d.ts +3 -3
- package/dist/components/GridLayout/GridItemContent.d.ts.map +1 -1
- package/dist/components/GridLayout/GridItemContent.js +35 -1
- package/dist/components/GridLayout/GridItemContent.js.map +1 -0
- package/dist/components/GridLayout/GridLayout.d.ts +2 -3
- package/dist/components/GridLayout/GridLayout.d.ts.map +1 -1
- package/dist/components/GridLayout/GridLayout.js +102 -1
- package/dist/components/GridLayout/GridLayout.js.map +1 -0
- package/dist/components/GridLayout/GridTitle.d.ts.map +1 -1
- package/dist/components/GridLayout/GridTitle.js +99 -1
- package/dist/components/GridLayout/GridTitle.js.map +1 -0
- package/dist/components/GridLayout/index.js +16 -1
- package/dist/components/GridLayout/index.js.map +1 -0
- package/dist/components/Panel/DeletePanelDialog.d.ts +5 -0
- package/dist/components/Panel/DeletePanelDialog.d.ts.map +1 -0
- package/dist/components/Panel/DeletePanelDialog.js +80 -0
- package/dist/components/Panel/DeletePanelDialog.js.map +1 -0
- package/dist/components/Panel/Panel.d.ts +1 -1
- package/dist/components/Panel/Panel.d.ts.map +1 -1
- package/dist/components/Panel/Panel.js +181 -1
- package/dist/components/Panel/Panel.js.map +1 -0
- package/dist/components/Panel/Panel.test.js +74 -1
- package/dist/components/Panel/Panel.test.js.map +1 -0
- package/dist/components/Panel/PanelContent.d.ts +5 -4
- package/dist/components/Panel/PanelContent.d.ts.map +1 -1
- package/dist/components/Panel/PanelContent.js +41 -1
- package/dist/components/Panel/PanelContent.js.map +1 -0
- package/dist/components/Panel/index.js +15 -1
- package/dist/components/Panel/index.js.map +1 -0
- package/dist/components/PanelDrawer/PanelDrawer.d.ts +4 -2
- package/dist/components/PanelDrawer/PanelDrawer.d.ts.map +1 -1
- package/dist/components/PanelDrawer/PanelDrawer.js +96 -1
- package/dist/components/PanelDrawer/PanelDrawer.js.map +1 -0
- package/dist/components/PanelDrawer/PanelDrawer.test.js +99 -1
- package/dist/components/PanelDrawer/PanelDrawer.test.js.map +1 -0
- package/dist/components/PanelDrawer/PanelEditorForm.d.ts +12 -0
- package/dist/components/PanelDrawer/PanelEditorForm.d.ts.map +1 -0
- package/dist/components/PanelDrawer/PanelEditorForm.js +184 -0
- package/dist/components/PanelDrawer/PanelEditorForm.js.map +1 -0
- package/dist/components/PanelDrawer/PanelPreview.d.ts +4 -0
- package/dist/components/PanelDrawer/PanelPreview.d.ts.map +1 -0
- package/dist/components/PanelDrawer/PanelPreview.js +42 -0
- package/dist/components/PanelDrawer/PanelPreview.js.map +1 -0
- package/dist/components/PanelDrawer/index.d.ts +2 -0
- package/dist/components/PanelDrawer/index.d.ts.map +1 -0
- package/dist/components/PanelDrawer/index.js +15 -0
- package/dist/components/PanelDrawer/index.js.map +1 -0
- package/dist/components/PanelGroupDialog/DeletePanelGroupDialog.d.ts +4 -0
- package/dist/components/PanelGroupDialog/DeletePanelGroupDialog.d.ts.map +1 -0
- package/dist/components/PanelGroupDialog/DeletePanelGroupDialog.js +75 -0
- package/dist/components/PanelGroupDialog/DeletePanelGroupDialog.js.map +1 -0
- package/dist/components/PanelGroupDialog/PanelGroupDialog.d.ts.map +1 -1
- package/dist/components/PanelGroupDialog/PanelGroupDialog.js +131 -1
- package/dist/components/PanelGroupDialog/PanelGroupDialog.js.map +1 -0
- package/dist/components/PanelGroupDialog/PanelGroupDialog.test.js +74 -1
- package/dist/components/PanelGroupDialog/PanelGroupDialog.test.js.map +1 -0
- package/dist/components/TimeRangeControls/TimeRangeControls.js +137 -1
- package/dist/components/TimeRangeControls/TimeRangeControls.js.map +1 -0
- package/dist/components/TimeRangeControls/TimeRangeControls.test.js +59 -1
- package/dist/components/TimeRangeControls/TimeRangeControls.test.js.map +1 -0
- package/dist/components/TimeRangeControls/index.js +15 -1
- package/dist/components/TimeRangeControls/index.js.map +1 -0
- package/dist/components/Variables/Variable.d.ts.map +1 -1
- package/dist/components/Variables/Variable.js +210 -1
- package/dist/components/Variables/Variable.js.map +1 -0
- package/dist/components/Variables/VariableEditor.d.ts +8 -0
- package/dist/components/Variables/VariableEditor.d.ts.map +1 -0
- package/dist/components/Variables/VariableEditor.js +196 -0
- package/dist/components/Variables/VariableEditor.js.map +1 -0
- package/dist/components/Variables/VariableEditorForm/VariableEditorForm.d.ts +8 -0
- package/dist/components/Variables/VariableEditorForm/VariableEditorForm.d.ts.map +1 -0
- package/dist/components/Variables/VariableEditorForm/VariableEditorForm.js +225 -0
- package/dist/components/Variables/VariableEditorForm/VariableEditorForm.js.map +1 -0
- package/dist/components/Variables/VariableEditorForm/index.d.ts +2 -0
- package/dist/components/Variables/VariableEditorForm/index.d.ts.map +1 -0
- package/dist/components/Variables/VariableEditorForm/index.js +15 -0
- package/dist/components/Variables/VariableEditorForm/index.js.map +1 -0
- package/dist/components/Variables/VariableEditorForm/variable-editor-form-model.d.ts +21 -0
- package/dist/components/Variables/VariableEditorForm/variable-editor-form-model.d.ts.map +1 -0
- package/dist/components/Variables/VariableEditorForm/variable-editor-form-model.js +76 -0
- package/dist/components/Variables/VariableEditorForm/variable-editor-form-model.js.map +1 -0
- package/dist/components/Variables/VariableList.d.ts.map +1 -1
- package/dist/components/Variables/VariableList.js +84 -1
- package/dist/components/Variables/VariableList.js.map +1 -0
- package/dist/components/Variables/index.d.ts +1 -0
- package/dist/components/Variables/index.d.ts.map +1 -1
- package/dist/components/Variables/index.js +17 -1
- package/dist/components/Variables/index.js.map +1 -0
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +20 -1
- package/dist/components/index.js.map +1 -0
- package/dist/context/DashboardProvider/DashboardProvider.d.ts +23 -0
- package/dist/context/DashboardProvider/DashboardProvider.d.ts.map +1 -0
- package/dist/context/DashboardProvider/DashboardProvider.js +52 -0
- package/dist/context/DashboardProvider/DashboardProvider.js.map +1 -0
- package/dist/context/DashboardProvider/common.d.ts +5 -0
- package/dist/context/DashboardProvider/common.d.ts.map +1 -0
- package/dist/context/DashboardProvider/common.js +17 -0
- package/dist/context/DashboardProvider/common.js.map +1 -0
- package/dist/context/DashboardProvider/dashboard-provider-api.d.ts +32 -0
- package/dist/context/DashboardProvider/dashboard-provider-api.d.ts.map +1 -0
- package/dist/context/DashboardProvider/dashboard-provider-api.js +56 -0
- package/dist/context/DashboardProvider/dashboard-provider-api.js.map +1 -0
- package/dist/context/DashboardProvider/index.d.ts +3 -0
- package/dist/context/DashboardProvider/index.d.ts.map +1 -0
- package/dist/context/DashboardProvider/index.js +16 -0
- package/dist/context/DashboardProvider/index.js.map +1 -0
- package/dist/context/DashboardProvider/layout-slice.d.ts +57 -0
- package/dist/context/DashboardProvider/layout-slice.d.ts.map +1 -0
- package/dist/context/DashboardProvider/layout-slice.js +196 -0
- package/dist/context/DashboardProvider/layout-slice.js.map +1 -0
- package/dist/context/DashboardProvider/panel-editing-slice.d.ts +70 -0
- package/dist/context/DashboardProvider/panel-editing-slice.d.ts.map +1 -0
- package/dist/context/DashboardProvider/panel-editing-slice.js +152 -0
- package/dist/context/DashboardProvider/panel-editing-slice.js.map +1 -0
- package/dist/context/DashboardProvider/panel-group-slice.d.ts +15 -0
- package/dist/context/DashboardProvider/panel-group-slice.d.ts.map +1 -0
- package/dist/context/DashboardProvider/panel-group-slice.js +32 -0
- package/dist/context/DashboardProvider/panel-group-slice.js.map +1 -0
- package/dist/context/DatasourceStoreProvider.d.ts +24 -0
- package/dist/context/DatasourceStoreProvider.d.ts.map +1 -0
- package/dist/context/DatasourceStoreProvider.js +166 -0
- package/dist/context/DatasourceStoreProvider.js.map +1 -0
- package/dist/context/QueryStringProvider.js +40 -1
- package/dist/context/QueryStringProvider.js.map +1 -0
- package/dist/context/TemplateVariableProvider.d.ts +8 -3
- package/dist/context/TemplateVariableProvider.d.ts.map +1 -1
- package/dist/context/TemplateVariableProvider.js +199 -1
- package/dist/context/TemplateVariableProvider.js.map +1 -0
- package/dist/context/TimeRangeProvider.js +72 -1
- package/dist/context/TimeRangeProvider.js.map +1 -0
- package/dist/context/index.d.ts +3 -4
- package/dist/context/index.d.ts.map +1 -1
- package/dist/context/index.js +19 -1
- package/dist/context/index.js.map +1 -0
- package/dist/css/styles.js +186 -1
- package/dist/css/styles.js.map +1 -0
- package/dist/index.js +17 -1
- package/dist/index.js.map +1 -0
- package/dist/test/dashboard-provider.d.ts +19 -0
- package/dist/test/dashboard-provider.d.ts.map +1 -0
- package/dist/test/dashboard-provider.js +40 -0
- package/dist/test/dashboard-provider.js.map +1 -0
- package/dist/test/index.d.ts +1 -0
- package/dist/test/index.d.ts.map +1 -1
- package/dist/test/index.js +17 -1
- package/dist/test/index.js.map +1 -0
- package/dist/test/plugin-registry.d.ts +3 -4
- package/dist/test/plugin-registry.d.ts.map +1 -1
- package/dist/test/plugin-registry.js +74 -1
- package/dist/test/plugin-registry.js.map +1 -0
- package/dist/test/render.d.ts +1 -2
- package/dist/test/render.d.ts.map +1 -1
- package/dist/test/render.js +34 -1
- package/dist/test/render.js.map +1 -0
- package/dist/test/setup-tests.js +18 -1
- package/dist/test/setup-tests.js.map +1 -0
- package/dist/test/testDashboard.d.ts.map +1 -1
- package/dist/test/testDashboard.js +286 -1
- package/dist/test/testDashboard.js.map +1 -0
- package/dist/utils/functions.js +17 -1
- package/dist/utils/functions.js.map +1 -0
- package/dist/views/ViewDashboard/DashboardApp.d.ts.map +1 -1
- package/dist/views/ViewDashboard/DashboardApp.js +55 -1
- package/dist/views/ViewDashboard/DashboardApp.js.map +1 -0
- package/dist/views/ViewDashboard/ViewDashboard.d.ts +2 -0
- package/dist/views/ViewDashboard/ViewDashboard.d.ts.map +1 -1
- package/dist/views/ViewDashboard/ViewDashboard.js +79 -1
- package/dist/views/ViewDashboard/ViewDashboard.js.map +1 -0
- package/dist/views/ViewDashboard/index.js +15 -1
- package/dist/views/ViewDashboard/index.js.map +1 -0
- package/dist/views/ViewDashboard/tests/panelGroups.test.d.ts +2 -0
- package/dist/views/ViewDashboard/tests/panelGroups.test.d.ts.map +1 -0
- package/dist/views/ViewDashboard/tests/panelGroups.test.js +158 -0
- package/dist/views/ViewDashboard/tests/panelGroups.test.js.map +1 -0
- package/dist/views/index.js +15 -1
- package/dist/views/index.js.map +1 -0
- package/package.json +13 -7
- package/dist/cjs/components/PanelDrawer/PanelOptionsEditor.js +0 -19
- package/dist/cjs/context/DashboardAppSlice.js +0 -45
- package/dist/cjs/context/DashboardProvider.js +0 -98
- package/dist/cjs/context/LayoutsSlice.js +0 -42
- package/dist/components/PanelDrawer/PanelOptionsEditor.d.ts +0 -9
- package/dist/components/PanelDrawer/PanelOptionsEditor.d.ts.map +0 -1
- package/dist/components/PanelDrawer/PanelOptionsEditor.js +0 -1
- package/dist/context/DashboardAppSlice.d.ts +0 -26
- package/dist/context/DashboardAppSlice.d.ts.map +0 -1
- package/dist/context/DashboardAppSlice.js +0 -1
- package/dist/context/DashboardProvider.d.ts +0 -34
- package/dist/context/DashboardProvider.d.ts.map +0 -1
- package/dist/context/DashboardProvider.js +0 -1
- package/dist/context/LayoutsSlice.d.ts +0 -12
- package/dist/context/LayoutsSlice.d.ts.map +0 -1
- package/dist/context/LayoutsSlice.js +0 -1
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
// Copyright 2022 The Perses Authors
|
|
2
|
+
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
3
|
+
// you may not use this file except in compliance with the License.
|
|
4
|
+
// You may obtain a copy of the License at
|
|
5
|
+
//
|
|
6
|
+
// http://www.apache.org/licenses/LICENSE-2.0
|
|
7
|
+
//
|
|
8
|
+
// Unless required by applicable law or agreed to in writing, software
|
|
9
|
+
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
10
|
+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
11
|
+
// See the License for the specific language governing permissions and
|
|
12
|
+
// limitations under the License.
|
|
13
|
+
"use strict";
|
|
14
|
+
Object.defineProperty(exports, "__esModule", {
|
|
15
|
+
value: true
|
|
16
|
+
});
|
|
17
|
+
Object.defineProperty(exports, "default", {
|
|
18
|
+
enumerable: true,
|
|
19
|
+
get: ()=>_default
|
|
20
|
+
});
|
|
21
|
+
const _jsxRuntime = require("react/jsx-runtime");
|
|
22
|
+
const _material = require("@mui/material");
|
|
23
|
+
const _close = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Close"));
|
|
24
|
+
const _context = require("../../context");
|
|
25
|
+
function _interopRequireDefault(obj) {
|
|
26
|
+
return obj && obj.__esModule ? obj : {
|
|
27
|
+
default: obj
|
|
28
|
+
};
|
|
29
|
+
}
|
|
30
|
+
const DeletePanelDialog = ()=>{
|
|
31
|
+
const { deletePanelDialog , closeDeletePanelDialog } = (0, _context.usePanels)();
|
|
32
|
+
return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Dialog, {
|
|
33
|
+
open: deletePanelDialog !== undefined,
|
|
34
|
+
children: [
|
|
35
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.DialogTitle, {
|
|
36
|
+
children: "Delete Panel"
|
|
37
|
+
}),
|
|
38
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
|
|
39
|
+
"aria-label": "Close",
|
|
40
|
+
onClick: ()=>closeDeletePanelDialog(),
|
|
41
|
+
sx: (theme)=>({
|
|
42
|
+
position: 'absolute',
|
|
43
|
+
top: theme.spacing(0.5),
|
|
44
|
+
right: theme.spacing(0.5)
|
|
45
|
+
}),
|
|
46
|
+
children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_close.default, {})
|
|
47
|
+
}),
|
|
48
|
+
deletePanelDialog && /*#__PURE__*/ (0, _jsxRuntime.jsx)(DeletePanelForm, {
|
|
49
|
+
deletePanelDialog: deletePanelDialog
|
|
50
|
+
})
|
|
51
|
+
]
|
|
52
|
+
});
|
|
53
|
+
};
|
|
54
|
+
const DeletePanelForm = ({ deletePanelDialog })=>{
|
|
55
|
+
var ref;
|
|
56
|
+
const { layouts } = (0, _context.useLayouts)();
|
|
57
|
+
const { deletePanels , closeDeletePanelDialog } = (0, _context.usePanels)();
|
|
58
|
+
const handleDelete = (e)=>{
|
|
59
|
+
e.preventDefault();
|
|
60
|
+
const { layoutItem } = deletePanelDialog;
|
|
61
|
+
deletePanels([
|
|
62
|
+
layoutItem
|
|
63
|
+
]);
|
|
64
|
+
closeDeletePanelDialog();
|
|
65
|
+
};
|
|
66
|
+
return /*#__PURE__*/ (0, _jsxRuntime.jsxs)("form", {
|
|
67
|
+
onSubmit: handleDelete,
|
|
68
|
+
children: [
|
|
69
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.DialogContent, {
|
|
70
|
+
sx: {
|
|
71
|
+
width: '500px'
|
|
72
|
+
},
|
|
73
|
+
children: `Are you sure you want to delete ${deletePanelDialog.panelName} from ${(ref = layouts[deletePanelDialog.layoutItem.groupIndex]) === null || ref === void 0 ? void 0 : ref.title}? This action cannot be undone.`
|
|
74
|
+
}),
|
|
75
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.DialogActions, {
|
|
76
|
+
children: [
|
|
77
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
|
|
78
|
+
variant: "contained",
|
|
79
|
+
type: "submit",
|
|
80
|
+
children: "Delete"
|
|
81
|
+
}),
|
|
82
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
|
|
83
|
+
onClick: ()=>closeDeletePanelDialog(),
|
|
84
|
+
children: "Cancel"
|
|
85
|
+
})
|
|
86
|
+
]
|
|
87
|
+
})
|
|
88
|
+
]
|
|
89
|
+
});
|
|
90
|
+
};
|
|
91
|
+
const _default = DeletePanelDialog;
|
|
@@ -1,10 +1,3 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.Panel = void 0;
|
|
7
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
1
|
// Copyright 2022 The Perses Authors
|
|
9
2
|
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
10
3
|
// you may not use this file except in compliance with the License.
|
|
@@ -17,73 +10,181 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
17
10
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
18
11
|
// See the License for the specific language governing permissions and
|
|
19
12
|
// limitations under the License.
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
const
|
|
29
|
-
const
|
|
30
|
-
const
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
13
|
+
"use strict";
|
|
14
|
+
Object.defineProperty(exports, "__esModule", {
|
|
15
|
+
value: true
|
|
16
|
+
});
|
|
17
|
+
Object.defineProperty(exports, "Panel", {
|
|
18
|
+
enumerable: true,
|
|
19
|
+
get: ()=>Panel
|
|
20
|
+
});
|
|
21
|
+
const _jsxRuntime = require("react/jsx-runtime");
|
|
22
|
+
const _react = require("react");
|
|
23
|
+
const _useResizeObserver = /*#__PURE__*/ _interopRequireDefault(require("use-resize-observer"));
|
|
24
|
+
const _reactIntersectionObserver = require("react-intersection-observer");
|
|
25
|
+
const _components = require("@perses-dev/components");
|
|
26
|
+
const _material = require("@mui/material");
|
|
27
|
+
const _informationOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/InformationOutline"));
|
|
28
|
+
const _pencil = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Pencil"));
|
|
29
|
+
const _deleteOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/DeleteOutline"));
|
|
30
|
+
const _dragVertical = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/DragVertical"));
|
|
31
|
+
const _context = require("../../context");
|
|
32
|
+
const _panelContent = require("./PanelContent");
|
|
33
|
+
function _interopRequireDefault(obj) {
|
|
34
|
+
return obj && obj.__esModule ? obj : {
|
|
35
|
+
default: obj
|
|
36
|
+
};
|
|
37
|
+
}
|
|
34
38
|
function Panel(props) {
|
|
35
|
-
const { definition, groupIndex,
|
|
36
|
-
const [contentElement, setContentElement] = (0,
|
|
37
|
-
const [isHovered, setIsHovered] = (0,
|
|
38
|
-
const { width, height
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
39
|
+
const { definition , groupIndex , itemIndex , ...others } = props;
|
|
40
|
+
const [contentElement, setContentElement] = (0, _react.useState)(null);
|
|
41
|
+
const [isHovered, setIsHovered] = (0, _react.useState)(false);
|
|
42
|
+
const { width , height } = (0, _useResizeObserver.default)({
|
|
43
|
+
ref: contentElement
|
|
44
|
+
});
|
|
45
|
+
const contentDimensions = (0, _react.useMemo)(()=>{
|
|
46
|
+
if (width === undefined || height === undefined) return undefined;
|
|
47
|
+
return {
|
|
48
|
+
width,
|
|
49
|
+
height
|
|
50
|
+
};
|
|
51
|
+
}, [
|
|
52
|
+
width,
|
|
53
|
+
height
|
|
54
|
+
]);
|
|
55
|
+
const { ref , inView } = (0, _reactIntersectionObserver.useInView)({
|
|
45
56
|
threshold: 0.3,
|
|
46
57
|
initialInView: false,
|
|
47
|
-
triggerOnce: true
|
|
58
|
+
triggerOnce: true
|
|
48
59
|
});
|
|
49
60
|
// TODO: adjust padding for small panels, consistent way to determine isLargePanel here and in StatChart
|
|
50
61
|
const panelPadding = 1.5;
|
|
51
|
-
const { isEditMode
|
|
52
|
-
const {
|
|
53
|
-
const handleEditButtonClick = ()
|
|
54
|
-
|
|
62
|
+
const { isEditMode } = (0, _context.useEditMode)();
|
|
63
|
+
const { editPanel , openDeletePanelDialog } = (0, _context.usePanels)();
|
|
64
|
+
const handleEditButtonClick = ()=>{
|
|
65
|
+
editPanel({
|
|
66
|
+
groupIndex,
|
|
67
|
+
itemIndex
|
|
68
|
+
});
|
|
55
69
|
};
|
|
56
|
-
return (
|
|
70
|
+
return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Card, {
|
|
71
|
+
ref: ref,
|
|
72
|
+
sx: {
|
|
57
73
|
...others.sx,
|
|
58
74
|
width: '100%',
|
|
59
75
|
height: '100%',
|
|
60
76
|
display: 'flex',
|
|
61
|
-
flexFlow: 'column nowrap'
|
|
62
|
-
},
|
|
77
|
+
flexFlow: 'column nowrap'
|
|
78
|
+
},
|
|
79
|
+
variant: "outlined",
|
|
80
|
+
...others,
|
|
81
|
+
onMouseEnter: ()=>setIsHovered(true),
|
|
82
|
+
onMouseLeave: ()=>setIsHovered(false),
|
|
83
|
+
children: [
|
|
84
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.CardHeader, {
|
|
85
|
+
title: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
|
|
86
|
+
sx: {
|
|
63
87
|
display: 'flex',
|
|
64
88
|
alignItems: 'center',
|
|
65
|
-
minHeight: '24px'
|
|
66
|
-
},
|
|
89
|
+
minHeight: '24px'
|
|
90
|
+
},
|
|
91
|
+
children: [
|
|
92
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
|
|
93
|
+
component: "h2",
|
|
94
|
+
variant: "body2",
|
|
95
|
+
fontWeight: (theme)=>theme.typography.fontWeightMedium,
|
|
96
|
+
whiteSpace: "nowrap",
|
|
97
|
+
overflow: "hidden",
|
|
98
|
+
textOverflow: "ellipsis",
|
|
99
|
+
children: definition.spec.display.name
|
|
100
|
+
}),
|
|
101
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
|
|
102
|
+
sx: {
|
|
67
103
|
display: 'flex',
|
|
68
104
|
alignItems: 'center',
|
|
69
|
-
marginLeft: 'auto'
|
|
70
|
-
},
|
|
105
|
+
marginLeft: 'auto'
|
|
106
|
+
},
|
|
107
|
+
children: [
|
|
108
|
+
!isEditMode && isHovered && definition.spec.display.description && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
|
|
109
|
+
id: "info-tooltip",
|
|
110
|
+
description: definition.spec.display.description,
|
|
111
|
+
placement: _components.TooltipPlacement.Bottom,
|
|
112
|
+
children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_informationOutline.default, {
|
|
113
|
+
"aria-describedby": "info-tooltip",
|
|
114
|
+
"aria-hidden": false,
|
|
115
|
+
fontSize: "small",
|
|
116
|
+
sx: {
|
|
117
|
+
cursor: 'pointer'
|
|
118
|
+
}
|
|
119
|
+
})
|
|
120
|
+
}),
|
|
121
|
+
isEditMode && isHovered && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
|
|
122
|
+
direction: "row",
|
|
123
|
+
alignItems: "center",
|
|
124
|
+
spacing: 0.5,
|
|
125
|
+
children: [
|
|
126
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsx)(IconButton, {
|
|
127
|
+
"aria-label": "edit panel",
|
|
128
|
+
size: "small",
|
|
129
|
+
onClick: handleEditButtonClick,
|
|
130
|
+
children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencil.default, {})
|
|
131
|
+
}),
|
|
132
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsx)(IconButton, {
|
|
133
|
+
"aria-label": "delete panel",
|
|
134
|
+
size: "small",
|
|
135
|
+
onClick: ()=>openDeletePanelDialog({
|
|
136
|
+
groupIndex,
|
|
137
|
+
itemIndex
|
|
138
|
+
}),
|
|
139
|
+
children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_deleteOutline.default, {})
|
|
140
|
+
}),
|
|
141
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsx)(IconButton, {
|
|
142
|
+
"aria-label": "drag handle",
|
|
143
|
+
size: "small",
|
|
144
|
+
children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dragVertical.default, {
|
|
145
|
+
className: "drag-handle",
|
|
146
|
+
sx: {
|
|
147
|
+
cursor: 'grab'
|
|
148
|
+
}
|
|
149
|
+
})
|
|
150
|
+
})
|
|
151
|
+
]
|
|
152
|
+
})
|
|
153
|
+
]
|
|
154
|
+
})
|
|
155
|
+
]
|
|
156
|
+
}),
|
|
157
|
+
sx: {
|
|
71
158
|
display: 'block',
|
|
72
|
-
padding: (theme)
|
|
73
|
-
borderBottom: (theme)
|
|
74
|
-
}
|
|
159
|
+
padding: (theme)=>theme.spacing(1, panelPadding),
|
|
160
|
+
borderBottom: (theme)=>`solid 1px ${theme.palette.divider}`
|
|
161
|
+
}
|
|
162
|
+
}),
|
|
163
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.CardContent, {
|
|
164
|
+
sx: {
|
|
75
165
|
position: 'relative',
|
|
76
166
|
overflow: 'hidden',
|
|
77
167
|
flexGrow: 1,
|
|
78
|
-
padding: (theme)
|
|
168
|
+
padding: (theme)=>theme.spacing(panelPadding),
|
|
79
169
|
// Override MUI default style for last-child
|
|
80
170
|
':last-child': {
|
|
81
|
-
padding: (theme)
|
|
82
|
-
}
|
|
83
|
-
},
|
|
171
|
+
padding: (theme)=>theme.spacing(panelPadding)
|
|
172
|
+
}
|
|
173
|
+
},
|
|
174
|
+
ref: setContentElement,
|
|
175
|
+
children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
|
|
176
|
+
FallbackComponent: _components.ErrorAlert,
|
|
177
|
+
children: inView === true && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panelContent.PanelContent, {
|
|
178
|
+
panelPluginKind: definition.spec.plugin.kind,
|
|
179
|
+
spec: definition.spec.plugin.spec,
|
|
180
|
+
contentDimensions: contentDimensions
|
|
181
|
+
})
|
|
182
|
+
})
|
|
183
|
+
})
|
|
184
|
+
]
|
|
185
|
+
});
|
|
84
186
|
}
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
}));
|
|
187
|
+
const IconButton = (0, _material.styled)(_material.IconButton)(({ theme })=>({
|
|
188
|
+
borderRadius: theme.shape.borderRadius,
|
|
189
|
+
padding: '4px'
|
|
190
|
+
}));
|
|
@@ -1,9 +1,3 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
7
1
|
// Copyright 2022 The Perses Authors
|
|
8
2
|
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
9
3
|
// you may not use this file except in compliance with the License.
|
|
@@ -16,49 +10,72 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
16
10
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
17
11
|
// See the License for the specific language governing permissions and
|
|
18
12
|
// limitations under the License.
|
|
19
|
-
|
|
13
|
+
"use strict";
|
|
14
|
+
Object.defineProperty(exports, "__esModule", {
|
|
15
|
+
value: true
|
|
16
|
+
});
|
|
17
|
+
const _jsxRuntime = require("react/jsx-runtime");
|
|
18
|
+
const _pluginSystem = require("@perses-dev/plugin-system");
|
|
20
19
|
require("intersection-observer");
|
|
21
|
-
const
|
|
22
|
-
const
|
|
23
|
-
const
|
|
24
|
-
const
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
20
|
+
const _react = require("@testing-library/react");
|
|
21
|
+
const _userEvent = /*#__PURE__*/ _interopRequireDefault(require("@testing-library/user-event"));
|
|
22
|
+
const _test = require("../../test");
|
|
23
|
+
const _context = require("../../context");
|
|
24
|
+
const _panel = require("./Panel");
|
|
25
|
+
function _interopRequireDefault(obj) {
|
|
26
|
+
return obj && obj.__esModule ? obj : {
|
|
27
|
+
default: obj
|
|
28
|
+
};
|
|
29
|
+
}
|
|
30
|
+
describe('Panel', ()=>{
|
|
31
|
+
// Helper to create panel props for rendering tests
|
|
32
|
+
const createPanelProps = ()=>{
|
|
33
|
+
return {
|
|
30
34
|
definition: {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
35
|
+
kind: 'Panel',
|
|
36
|
+
spec: {
|
|
37
|
+
display: {
|
|
38
|
+
name: 'Fake Panel',
|
|
39
|
+
description: 'This is a fake panel'
|
|
40
|
+
},
|
|
41
|
+
plugin: {
|
|
42
|
+
kind: 'FakePanel',
|
|
43
|
+
spec: {}
|
|
44
|
+
}
|
|
45
|
+
}
|
|
37
46
|
},
|
|
38
47
|
groupIndex: 0,
|
|
39
|
-
|
|
48
|
+
itemIndex: 0
|
|
40
49
|
};
|
|
41
|
-
|
|
42
|
-
isEditMode: false,
|
|
43
|
-
dashboardSpec: testDashboard_1.default.spec,
|
|
44
|
-
};
|
|
45
|
-
});
|
|
50
|
+
};
|
|
46
51
|
// Helper to render the panel with some context set
|
|
47
|
-
const renderPanel = (
|
|
48
|
-
const { addMockPlugin, pluginRegistryProps
|
|
49
|
-
addMockPlugin('Panel', 'FakePanel',
|
|
50
|
-
(0,
|
|
52
|
+
const renderPanel = (isEditMode = false)=>{
|
|
53
|
+
const { addMockPlugin , pluginRegistryProps } = (0, _test.mockPluginRegistryProps)();
|
|
54
|
+
addMockPlugin('Panel', 'FakePanel', _test.FAKE_PANEL_PLUGIN);
|
|
55
|
+
(0, _test.renderWithContext)(/*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.PluginRegistry, {
|
|
56
|
+
...pluginRegistryProps,
|
|
57
|
+
children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.DashboardProvider, {
|
|
58
|
+
initialState: {
|
|
59
|
+
dashboardSpec: (0, _test.getTestDashboard)().spec,
|
|
60
|
+
isEditMode
|
|
61
|
+
},
|
|
62
|
+
children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panel.Panel, {
|
|
63
|
+
...createPanelProps()
|
|
64
|
+
})
|
|
65
|
+
})
|
|
66
|
+
}));
|
|
51
67
|
};
|
|
52
|
-
it('should render name and info icon', async ()
|
|
68
|
+
it('should render name and info icon', async ()=>{
|
|
53
69
|
renderPanel();
|
|
54
|
-
await
|
|
55
|
-
|
|
70
|
+
await _react.screen.findByText('Fake Panel');
|
|
71
|
+
_react.screen.queryByLabelText('info-tooltip');
|
|
56
72
|
});
|
|
57
|
-
it('should render edit icons when in edit mode',
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
73
|
+
it('should render edit icons when in edit mode', ()=>{
|
|
74
|
+
renderPanel(true);
|
|
75
|
+
const panelTitle = _react.screen.getByText('Fake Panel');
|
|
76
|
+
_userEvent.default.hover(panelTitle);
|
|
77
|
+
_react.screen.getByLabelText('drag handle');
|
|
78
|
+
_react.screen.getByLabelText('edit panel');
|
|
79
|
+
_react.screen.getByLabelText('delete panel');
|
|
63
80
|
});
|
|
64
81
|
});
|
|
@@ -1,15 +1,44 @@
|
|
|
1
|
+
// Copyright 2022 The Perses Authors
|
|
2
|
+
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
3
|
+
// you may not use this file except in compliance with the License.
|
|
4
|
+
// You may obtain a copy of the License at
|
|
5
|
+
//
|
|
6
|
+
// http://www.apache.org/licenses/LICENSE-2.0
|
|
7
|
+
//
|
|
8
|
+
// Unless required by applicable law or agreed to in writing, software
|
|
9
|
+
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
10
|
+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
11
|
+
// See the License for the specific language governing permissions and
|
|
12
|
+
// limitations under the License.
|
|
1
13
|
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
14
|
+
Object.defineProperty(exports, "__esModule", {
|
|
15
|
+
value: true
|
|
16
|
+
});
|
|
17
|
+
Object.defineProperty(exports, "PanelContent", {
|
|
18
|
+
enumerable: true,
|
|
19
|
+
get: ()=>PanelContent
|
|
20
|
+
});
|
|
21
|
+
const _jsxRuntime = require("react/jsx-runtime");
|
|
22
|
+
const _pluginSystem = require("@perses-dev/plugin-system");
|
|
23
|
+
const _material = require("@mui/material");
|
|
11
24
|
function PanelContent(props) {
|
|
12
|
-
const {
|
|
13
|
-
|
|
25
|
+
const { panelPluginKind , contentDimensions , ...others } = props;
|
|
26
|
+
const { data: plugin , isLoading } = (0, _pluginSystem.usePlugin)('Panel', panelPluginKind, {
|
|
27
|
+
useErrorBoundary: true
|
|
28
|
+
});
|
|
29
|
+
const PanelComponent = plugin === null || plugin === void 0 ? void 0 : plugin.PanelComponent;
|
|
30
|
+
if (isLoading) {
|
|
31
|
+
return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Skeleton, {
|
|
32
|
+
variant: "rectangular",
|
|
33
|
+
width: contentDimensions === null || contentDimensions === void 0 ? void 0 : contentDimensions.width,
|
|
34
|
+
height: contentDimensions === null || contentDimensions === void 0 ? void 0 : contentDimensions.height
|
|
35
|
+
});
|
|
36
|
+
}
|
|
37
|
+
if (PanelComponent === undefined) {
|
|
38
|
+
throw new Error(`Missing PanelComponent from panel plugin for kind '${panelPluginKind}'`);
|
|
39
|
+
}
|
|
40
|
+
return /*#__PURE__*/ (0, _jsxRuntime.jsx)(PanelComponent, {
|
|
41
|
+
...others,
|
|
42
|
+
contentDimensions: contentDimensions
|
|
43
|
+
});
|
|
14
44
|
}
|
|
15
|
-
exports.PanelContent = PanelContent;
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
"use strict";
|
|
2
1
|
// Copyright 2022 The Perses Authors
|
|
3
2
|
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
4
3
|
// you may not use this file except in compliance with the License.
|
|
@@ -11,19 +10,19 @@
|
|
|
11
10
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
12
11
|
// See the License for the specific language governing permissions and
|
|
13
12
|
// limitations under the License.
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
Object.
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
};
|
|
28
|
-
|
|
29
|
-
|
|
13
|
+
"use strict";
|
|
14
|
+
Object.defineProperty(exports, "__esModule", {
|
|
15
|
+
value: true
|
|
16
|
+
});
|
|
17
|
+
_exportStar(require("./Panel"), exports);
|
|
18
|
+
function _exportStar(from, to) {
|
|
19
|
+
Object.keys(from).forEach(function(k) {
|
|
20
|
+
if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
|
|
21
|
+
enumerable: true,
|
|
22
|
+
get: function() {
|
|
23
|
+
return from[k];
|
|
24
|
+
}
|
|
25
|
+
});
|
|
26
|
+
});
|
|
27
|
+
return from;
|
|
28
|
+
}
|