@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.
Files changed (258) hide show
  1. package/dist/cjs/components/Dashboard.js +25 -14
  2. package/dist/cjs/components/DashboardToolbar.js +148 -20
  3. package/dist/cjs/components/GridLayout/GridItemContent.js +25 -19
  4. package/dist/cjs/components/GridLayout/GridLayout.js +92 -27
  5. package/dist/cjs/components/GridLayout/GridTitle.js +91 -31
  6. package/dist/cjs/components/GridLayout/index.js +18 -19
  7. package/dist/cjs/components/Panel/DeletePanelDialog.js +91 -0
  8. package/dist/cjs/components/Panel/Panel.js +156 -55
  9. package/dist/cjs/components/Panel/Panel.test.js +58 -41
  10. package/dist/cjs/components/Panel/PanelContent.js +41 -12
  11. package/dist/cjs/components/Panel/index.js +16 -17
  12. package/dist/cjs/components/PanelDrawer/PanelDrawer.js +84 -108
  13. package/dist/cjs/components/PanelDrawer/PanelDrawer.test.js +87 -92
  14. package/dist/cjs/components/PanelDrawer/PanelEditorForm.js +194 -0
  15. package/dist/cjs/components/PanelDrawer/PanelPreview.js +48 -0
  16. package/dist/cjs/components/PanelDrawer/index.js +28 -0
  17. package/dist/cjs/components/PanelGroupDialog/DeletePanelGroupDialog.js +86 -0
  18. package/dist/cjs/components/PanelGroupDialog/PanelGroupDialog.js +121 -39
  19. package/dist/cjs/components/PanelGroupDialog/PanelGroupDialog.test.js +74 -88
  20. package/dist/cjs/components/TimeRangeControls/TimeRangeControls.js +120 -38
  21. package/dist/cjs/components/TimeRangeControls/TimeRangeControls.test.js +42 -27
  22. package/dist/cjs/components/TimeRangeControls/index.js +16 -17
  23. package/dist/cjs/components/Variables/Variable.js +195 -36
  24. package/dist/cjs/components/Variables/VariableEditor.js +207 -0
  25. package/dist/cjs/components/Variables/VariableEditorForm/VariableEditorForm.js +236 -0
  26. package/dist/cjs/components/Variables/VariableEditorForm/index.js +28 -0
  27. package/dist/cjs/components/Variables/VariableEditorForm/variable-editor-form-model.js +88 -0
  28. package/dist/cjs/components/Variables/VariableList.js +81 -13
  29. package/dist/cjs/components/Variables/index.js +18 -18
  30. package/dist/cjs/components/index.js +21 -21
  31. package/dist/cjs/context/DashboardProvider/DashboardProvider.js +70 -0
  32. package/dist/cjs/context/DashboardProvider/common.js +18 -0
  33. package/dist/cjs/context/DashboardProvider/dashboard-provider-api.js +71 -0
  34. package/dist/cjs/context/DashboardProvider/index.js +29 -0
  35. package/dist/cjs/context/DashboardProvider/layout-slice.js +200 -0
  36. package/dist/cjs/context/DashboardProvider/panel-editing-slice.js +156 -0
  37. package/dist/cjs/context/DashboardProvider/panel-group-slice.js +38 -0
  38. package/dist/cjs/context/DatasourceStoreProvider.js +170 -0
  39. package/dist/cjs/context/QueryStringProvider.js +69 -15
  40. package/dist/cjs/context/TemplateVariableProvider.js +135 -136
  41. package/dist/cjs/context/TimeRangeProvider.js +79 -30
  42. package/dist/cjs/context/index.js +20 -22
  43. package/dist/cjs/css/styles.js +43 -39
  44. package/dist/cjs/index.js +19 -20
  45. package/dist/cjs/test/dashboard-provider.js +51 -0
  46. package/dist/cjs/test/index.js +18 -18
  47. package/dist/cjs/test/plugin-registry.js +52 -25
  48. package/dist/cjs/test/render.js +25 -22
  49. package/dist/cjs/test/setup-tests.js +4 -2
  50. package/dist/cjs/test/testDashboard.js +203 -107
  51. package/dist/cjs/utils/functions.js +9 -5
  52. package/dist/cjs/views/ViewDashboard/DashboardApp.js +49 -23
  53. package/dist/cjs/views/ViewDashboard/ViewDashboard.js +62 -31
  54. package/dist/cjs/views/ViewDashboard/index.js +16 -17
  55. package/dist/cjs/views/ViewDashboard/tests/panelGroups.test.js +165 -0
  56. package/dist/cjs/views/index.js +16 -17
  57. package/dist/components/Dashboard.d.ts +1 -4
  58. package/dist/components/Dashboard.d.ts.map +1 -1
  59. package/dist/components/Dashboard.js +34 -1
  60. package/dist/components/Dashboard.js.map +1 -0
  61. package/dist/components/DashboardToolbar.d.ts.map +1 -1
  62. package/dist/components/DashboardToolbar.js +154 -1
  63. package/dist/components/DashboardToolbar.js.map +1 -0
  64. package/dist/components/GridLayout/GridItemContent.d.ts +3 -3
  65. package/dist/components/GridLayout/GridItemContent.d.ts.map +1 -1
  66. package/dist/components/GridLayout/GridItemContent.js +35 -1
  67. package/dist/components/GridLayout/GridItemContent.js.map +1 -0
  68. package/dist/components/GridLayout/GridLayout.d.ts +2 -3
  69. package/dist/components/GridLayout/GridLayout.d.ts.map +1 -1
  70. package/dist/components/GridLayout/GridLayout.js +102 -1
  71. package/dist/components/GridLayout/GridLayout.js.map +1 -0
  72. package/dist/components/GridLayout/GridTitle.d.ts.map +1 -1
  73. package/dist/components/GridLayout/GridTitle.js +99 -1
  74. package/dist/components/GridLayout/GridTitle.js.map +1 -0
  75. package/dist/components/GridLayout/index.js +16 -1
  76. package/dist/components/GridLayout/index.js.map +1 -0
  77. package/dist/components/Panel/DeletePanelDialog.d.ts +5 -0
  78. package/dist/components/Panel/DeletePanelDialog.d.ts.map +1 -0
  79. package/dist/components/Panel/DeletePanelDialog.js +80 -0
  80. package/dist/components/Panel/DeletePanelDialog.js.map +1 -0
  81. package/dist/components/Panel/Panel.d.ts +1 -1
  82. package/dist/components/Panel/Panel.d.ts.map +1 -1
  83. package/dist/components/Panel/Panel.js +181 -1
  84. package/dist/components/Panel/Panel.js.map +1 -0
  85. package/dist/components/Panel/Panel.test.js +74 -1
  86. package/dist/components/Panel/Panel.test.js.map +1 -0
  87. package/dist/components/Panel/PanelContent.d.ts +5 -4
  88. package/dist/components/Panel/PanelContent.d.ts.map +1 -1
  89. package/dist/components/Panel/PanelContent.js +41 -1
  90. package/dist/components/Panel/PanelContent.js.map +1 -0
  91. package/dist/components/Panel/index.js +15 -1
  92. package/dist/components/Panel/index.js.map +1 -0
  93. package/dist/components/PanelDrawer/PanelDrawer.d.ts +4 -2
  94. package/dist/components/PanelDrawer/PanelDrawer.d.ts.map +1 -1
  95. package/dist/components/PanelDrawer/PanelDrawer.js +96 -1
  96. package/dist/components/PanelDrawer/PanelDrawer.js.map +1 -0
  97. package/dist/components/PanelDrawer/PanelDrawer.test.js +99 -1
  98. package/dist/components/PanelDrawer/PanelDrawer.test.js.map +1 -0
  99. package/dist/components/PanelDrawer/PanelEditorForm.d.ts +12 -0
  100. package/dist/components/PanelDrawer/PanelEditorForm.d.ts.map +1 -0
  101. package/dist/components/PanelDrawer/PanelEditorForm.js +184 -0
  102. package/dist/components/PanelDrawer/PanelEditorForm.js.map +1 -0
  103. package/dist/components/PanelDrawer/PanelPreview.d.ts +4 -0
  104. package/dist/components/PanelDrawer/PanelPreview.d.ts.map +1 -0
  105. package/dist/components/PanelDrawer/PanelPreview.js +42 -0
  106. package/dist/components/PanelDrawer/PanelPreview.js.map +1 -0
  107. package/dist/components/PanelDrawer/index.d.ts +2 -0
  108. package/dist/components/PanelDrawer/index.d.ts.map +1 -0
  109. package/dist/components/PanelDrawer/index.js +15 -0
  110. package/dist/components/PanelDrawer/index.js.map +1 -0
  111. package/dist/components/PanelGroupDialog/DeletePanelGroupDialog.d.ts +4 -0
  112. package/dist/components/PanelGroupDialog/DeletePanelGroupDialog.d.ts.map +1 -0
  113. package/dist/components/PanelGroupDialog/DeletePanelGroupDialog.js +75 -0
  114. package/dist/components/PanelGroupDialog/DeletePanelGroupDialog.js.map +1 -0
  115. package/dist/components/PanelGroupDialog/PanelGroupDialog.d.ts.map +1 -1
  116. package/dist/components/PanelGroupDialog/PanelGroupDialog.js +131 -1
  117. package/dist/components/PanelGroupDialog/PanelGroupDialog.js.map +1 -0
  118. package/dist/components/PanelGroupDialog/PanelGroupDialog.test.js +74 -1
  119. package/dist/components/PanelGroupDialog/PanelGroupDialog.test.js.map +1 -0
  120. package/dist/components/TimeRangeControls/TimeRangeControls.js +137 -1
  121. package/dist/components/TimeRangeControls/TimeRangeControls.js.map +1 -0
  122. package/dist/components/TimeRangeControls/TimeRangeControls.test.js +59 -1
  123. package/dist/components/TimeRangeControls/TimeRangeControls.test.js.map +1 -0
  124. package/dist/components/TimeRangeControls/index.js +15 -1
  125. package/dist/components/TimeRangeControls/index.js.map +1 -0
  126. package/dist/components/Variables/Variable.d.ts.map +1 -1
  127. package/dist/components/Variables/Variable.js +210 -1
  128. package/dist/components/Variables/Variable.js.map +1 -0
  129. package/dist/components/Variables/VariableEditor.d.ts +8 -0
  130. package/dist/components/Variables/VariableEditor.d.ts.map +1 -0
  131. package/dist/components/Variables/VariableEditor.js +196 -0
  132. package/dist/components/Variables/VariableEditor.js.map +1 -0
  133. package/dist/components/Variables/VariableEditorForm/VariableEditorForm.d.ts +8 -0
  134. package/dist/components/Variables/VariableEditorForm/VariableEditorForm.d.ts.map +1 -0
  135. package/dist/components/Variables/VariableEditorForm/VariableEditorForm.js +225 -0
  136. package/dist/components/Variables/VariableEditorForm/VariableEditorForm.js.map +1 -0
  137. package/dist/components/Variables/VariableEditorForm/index.d.ts +2 -0
  138. package/dist/components/Variables/VariableEditorForm/index.d.ts.map +1 -0
  139. package/dist/components/Variables/VariableEditorForm/index.js +15 -0
  140. package/dist/components/Variables/VariableEditorForm/index.js.map +1 -0
  141. package/dist/components/Variables/VariableEditorForm/variable-editor-form-model.d.ts +21 -0
  142. package/dist/components/Variables/VariableEditorForm/variable-editor-form-model.d.ts.map +1 -0
  143. package/dist/components/Variables/VariableEditorForm/variable-editor-form-model.js +76 -0
  144. package/dist/components/Variables/VariableEditorForm/variable-editor-form-model.js.map +1 -0
  145. package/dist/components/Variables/VariableList.d.ts.map +1 -1
  146. package/dist/components/Variables/VariableList.js +84 -1
  147. package/dist/components/Variables/VariableList.js.map +1 -0
  148. package/dist/components/Variables/index.d.ts +1 -0
  149. package/dist/components/Variables/index.d.ts.map +1 -1
  150. package/dist/components/Variables/index.js +17 -1
  151. package/dist/components/Variables/index.js.map +1 -0
  152. package/dist/components/index.d.ts +1 -0
  153. package/dist/components/index.d.ts.map +1 -1
  154. package/dist/components/index.js +20 -1
  155. package/dist/components/index.js.map +1 -0
  156. package/dist/context/DashboardProvider/DashboardProvider.d.ts +23 -0
  157. package/dist/context/DashboardProvider/DashboardProvider.d.ts.map +1 -0
  158. package/dist/context/DashboardProvider/DashboardProvider.js +52 -0
  159. package/dist/context/DashboardProvider/DashboardProvider.js.map +1 -0
  160. package/dist/context/DashboardProvider/common.d.ts +5 -0
  161. package/dist/context/DashboardProvider/common.d.ts.map +1 -0
  162. package/dist/context/DashboardProvider/common.js +17 -0
  163. package/dist/context/DashboardProvider/common.js.map +1 -0
  164. package/dist/context/DashboardProvider/dashboard-provider-api.d.ts +32 -0
  165. package/dist/context/DashboardProvider/dashboard-provider-api.d.ts.map +1 -0
  166. package/dist/context/DashboardProvider/dashboard-provider-api.js +56 -0
  167. package/dist/context/DashboardProvider/dashboard-provider-api.js.map +1 -0
  168. package/dist/context/DashboardProvider/index.d.ts +3 -0
  169. package/dist/context/DashboardProvider/index.d.ts.map +1 -0
  170. package/dist/context/DashboardProvider/index.js +16 -0
  171. package/dist/context/DashboardProvider/index.js.map +1 -0
  172. package/dist/context/DashboardProvider/layout-slice.d.ts +57 -0
  173. package/dist/context/DashboardProvider/layout-slice.d.ts.map +1 -0
  174. package/dist/context/DashboardProvider/layout-slice.js +196 -0
  175. package/dist/context/DashboardProvider/layout-slice.js.map +1 -0
  176. package/dist/context/DashboardProvider/panel-editing-slice.d.ts +70 -0
  177. package/dist/context/DashboardProvider/panel-editing-slice.d.ts.map +1 -0
  178. package/dist/context/DashboardProvider/panel-editing-slice.js +152 -0
  179. package/dist/context/DashboardProvider/panel-editing-slice.js.map +1 -0
  180. package/dist/context/DashboardProvider/panel-group-slice.d.ts +15 -0
  181. package/dist/context/DashboardProvider/panel-group-slice.d.ts.map +1 -0
  182. package/dist/context/DashboardProvider/panel-group-slice.js +32 -0
  183. package/dist/context/DashboardProvider/panel-group-slice.js.map +1 -0
  184. package/dist/context/DatasourceStoreProvider.d.ts +24 -0
  185. package/dist/context/DatasourceStoreProvider.d.ts.map +1 -0
  186. package/dist/context/DatasourceStoreProvider.js +166 -0
  187. package/dist/context/DatasourceStoreProvider.js.map +1 -0
  188. package/dist/context/QueryStringProvider.js +40 -1
  189. package/dist/context/QueryStringProvider.js.map +1 -0
  190. package/dist/context/TemplateVariableProvider.d.ts +8 -3
  191. package/dist/context/TemplateVariableProvider.d.ts.map +1 -1
  192. package/dist/context/TemplateVariableProvider.js +199 -1
  193. package/dist/context/TemplateVariableProvider.js.map +1 -0
  194. package/dist/context/TimeRangeProvider.js +72 -1
  195. package/dist/context/TimeRangeProvider.js.map +1 -0
  196. package/dist/context/index.d.ts +3 -4
  197. package/dist/context/index.d.ts.map +1 -1
  198. package/dist/context/index.js +19 -1
  199. package/dist/context/index.js.map +1 -0
  200. package/dist/css/styles.js +186 -1
  201. package/dist/css/styles.js.map +1 -0
  202. package/dist/index.js +17 -1
  203. package/dist/index.js.map +1 -0
  204. package/dist/test/dashboard-provider.d.ts +19 -0
  205. package/dist/test/dashboard-provider.d.ts.map +1 -0
  206. package/dist/test/dashboard-provider.js +40 -0
  207. package/dist/test/dashboard-provider.js.map +1 -0
  208. package/dist/test/index.d.ts +1 -0
  209. package/dist/test/index.d.ts.map +1 -1
  210. package/dist/test/index.js +17 -1
  211. package/dist/test/index.js.map +1 -0
  212. package/dist/test/plugin-registry.d.ts +3 -4
  213. package/dist/test/plugin-registry.d.ts.map +1 -1
  214. package/dist/test/plugin-registry.js +74 -1
  215. package/dist/test/plugin-registry.js.map +1 -0
  216. package/dist/test/render.d.ts +1 -2
  217. package/dist/test/render.d.ts.map +1 -1
  218. package/dist/test/render.js +34 -1
  219. package/dist/test/render.js.map +1 -0
  220. package/dist/test/setup-tests.js +18 -1
  221. package/dist/test/setup-tests.js.map +1 -0
  222. package/dist/test/testDashboard.d.ts.map +1 -1
  223. package/dist/test/testDashboard.js +286 -1
  224. package/dist/test/testDashboard.js.map +1 -0
  225. package/dist/utils/functions.js +17 -1
  226. package/dist/utils/functions.js.map +1 -0
  227. package/dist/views/ViewDashboard/DashboardApp.d.ts.map +1 -1
  228. package/dist/views/ViewDashboard/DashboardApp.js +55 -1
  229. package/dist/views/ViewDashboard/DashboardApp.js.map +1 -0
  230. package/dist/views/ViewDashboard/ViewDashboard.d.ts +2 -0
  231. package/dist/views/ViewDashboard/ViewDashboard.d.ts.map +1 -1
  232. package/dist/views/ViewDashboard/ViewDashboard.js +79 -1
  233. package/dist/views/ViewDashboard/ViewDashboard.js.map +1 -0
  234. package/dist/views/ViewDashboard/index.js +15 -1
  235. package/dist/views/ViewDashboard/index.js.map +1 -0
  236. package/dist/views/ViewDashboard/tests/panelGroups.test.d.ts +2 -0
  237. package/dist/views/ViewDashboard/tests/panelGroups.test.d.ts.map +1 -0
  238. package/dist/views/ViewDashboard/tests/panelGroups.test.js +158 -0
  239. package/dist/views/ViewDashboard/tests/panelGroups.test.js.map +1 -0
  240. package/dist/views/index.js +15 -1
  241. package/dist/views/index.js.map +1 -0
  242. package/package.json +13 -7
  243. package/dist/cjs/components/PanelDrawer/PanelOptionsEditor.js +0 -19
  244. package/dist/cjs/context/DashboardAppSlice.js +0 -45
  245. package/dist/cjs/context/DashboardProvider.js +0 -98
  246. package/dist/cjs/context/LayoutsSlice.js +0 -42
  247. package/dist/components/PanelDrawer/PanelOptionsEditor.d.ts +0 -9
  248. package/dist/components/PanelDrawer/PanelOptionsEditor.d.ts.map +0 -1
  249. package/dist/components/PanelDrawer/PanelOptionsEditor.js +0 -1
  250. package/dist/context/DashboardAppSlice.d.ts +0 -26
  251. package/dist/context/DashboardAppSlice.d.ts.map +0 -1
  252. package/dist/context/DashboardAppSlice.js +0 -1
  253. package/dist/context/DashboardProvider.d.ts +0 -34
  254. package/dist/context/DashboardProvider.d.ts.map +0 -1
  255. package/dist/context/DashboardProvider.js +0 -1
  256. package/dist/context/LayoutsSlice.d.ts +0 -12
  257. package/dist/context/LayoutsSlice.d.ts.map +0 -1
  258. 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
- const react_1 = require("react");
21
- const use_resize_observer_1 = __importDefault(require("use-resize-observer"));
22
- const react_intersection_observer_1 = require("react-intersection-observer");
23
- const plugin_system_1 = require("@perses-dev/plugin-system");
24
- const components_1 = require("@perses-dev/components");
25
- const material_1 = require("@mui/material");
26
- const InformationOutline_1 = __importDefault(require("mdi-material-ui/InformationOutline"));
27
- const Pencil_1 = __importDefault(require("mdi-material-ui/Pencil"));
28
- const DragVertical_1 = __importDefault(require("mdi-material-ui/DragVertical"));
29
- const context_1 = require("../../context");
30
- const PanelContent_1 = require("./PanelContent");
31
- /**
32
- * Renders a PanelDefinition's content inside of a Card.
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, panelKey, ...others } = props;
36
- const [contentElement, setContentElement] = (0, react_1.useState)(null);
37
- const [isHovered, setIsHovered] = (0, react_1.useState)(false);
38
- const { width, height } = (0, use_resize_observer_1.default)({ ref: contentElement });
39
- const contentDimensions = (0, react_1.useMemo)(() => {
40
- if (width === undefined || height === undefined)
41
- return undefined;
42
- return { width, height };
43
- }, [width, height]);
44
- const { ref, inView } = (0, react_intersection_observer_1.useInView)({
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 } = (0, context_1.useEditMode)();
52
- const { openPanelDrawer } = (0, context_1.useDashboardApp)();
53
- const handleEditButtonClick = () => {
54
- openPanelDrawer({ groupIndex, panelKey });
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 ((0, jsx_runtime_1.jsxs)(material_1.Card, { ref: ref, sx: {
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
- }, variant: "outlined", ...others, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [(0, jsx_runtime_1.jsx)(material_1.CardHeader, { title: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
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
- }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { component: "h2", variant: "body2", fontWeight: (theme) => theme.typography.fontWeightMedium, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", children: definition.display.name }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
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
- }, children: [!isEditMode && isHovered && definition.display.description && ((0, jsx_runtime_1.jsx)(components_1.InfoTooltip, { id: "info-tooltip", description: definition.display.description, placement: components_1.TooltipPlacement.Bottom, children: (0, jsx_runtime_1.jsx)(InformationOutline_1.default, { "aria-describedby": "info-tooltip", "aria-hidden": false, fontSize: "small", sx: { cursor: 'pointer' } }) })), isEditMode && isHovered && ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [(0, jsx_runtime_1.jsx)(IconButton, { "aria-label": "edit panel", size: "small", onClick: handleEditButtonClick, children: (0, jsx_runtime_1.jsx)(Pencil_1.default, {}) }), (0, jsx_runtime_1.jsx)(IconButton, { "aria-label": "drag handle", size: "small", children: (0, jsx_runtime_1.jsx)(DragVertical_1.default, { className: "drag-handle", sx: { cursor: 'grab' } }) })] }))] })] }), sx: {
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) => theme.spacing(1, panelPadding),
73
- borderBottom: (theme) => `solid 1px ${theme.palette.divider}`,
74
- } }), (0, jsx_runtime_1.jsx)(material_1.CardContent, { sx: {
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) => theme.spacing(panelPadding),
168
+ padding: (theme)=>theme.spacing(panelPadding),
79
169
  // Override MUI default style for last-child
80
170
  ':last-child': {
81
- padding: (theme) => theme.spacing(panelPadding),
82
- },
83
- }, ref: setContentElement, children: (0, jsx_runtime_1.jsx)(plugin_system_1.PluginBoundary, { loadingFallback: "Loading...", ErrorFallbackComponent: components_1.ErrorAlert, children: inView === true && (0, jsx_runtime_1.jsx)(PanelContent_1.PanelContent, { definition: definition, contentDimensions: contentDimensions }) }) })] }));
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
- exports.Panel = Panel;
86
- const IconButton = (0, material_1.styled)(material_1.IconButton)(({ theme }) => ({
87
- borderRadius: theme.shape.borderRadius,
88
- padding: '4px',
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
- const plugin_system_1 = require("@perses-dev/plugin-system");
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 react_1 = require("@testing-library/react");
22
- const test_1 = require("../../test");
23
- const testDashboard_1 = __importDefault(require("../../test/testDashboard"));
24
- const Panel_1 = require("./Panel");
25
- describe('Panel', () => {
26
- let props;
27
- let initialState;
28
- beforeEach(() => {
29
- props = {
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
- display: {
32
- name: 'Fake Panel',
33
- description: 'This is a fake panel',
34
- },
35
- kind: 'FakePanel',
36
- options: {},
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
- panelKey: 'panelRef',
48
+ itemIndex: 0
40
49
  };
41
- initialState = {
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 = (initialState) => {
48
- const { addMockPlugin, pluginRegistryProps } = (0, test_1.mockPluginRegistryProps)();
49
- addMockPlugin('Panel', 'FakePanel', test_1.FAKE_PANEL_PLUGIN);
50
- (0, test_1.renderWithContext)((0, jsx_runtime_1.jsx)(plugin_system_1.PluginRegistry, { ...pluginRegistryProps, children: (0, jsx_runtime_1.jsx)(Panel_1.Panel, { ...props }) }), initialState);
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 react_1.screen.findByText('Fake Panel');
55
- react_1.screen.queryByLabelText('info-tooltip');
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', async () => {
58
- initialState.isEditMode = true;
59
- renderPanel(initialState);
60
- await react_1.screen.queryByLabelText('drag handle');
61
- react_1.screen.queryByLabelText('edit panel');
62
- react_1.screen.queryByLabelText('more');
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", { value: true });
3
- exports.PanelContent = void 0;
4
- const jsx_runtime_1 = require("react/jsx-runtime");
5
- const plugin_system_1 = require("@perses-dev/plugin-system");
6
- /**
7
- * A small wrapper component that renders the appropriate PanelComponent from a Panel plugin based on the panel
8
- * definition's kind. Used so that a PluginLoadingBoundary can be wrapped around this for fallback UI while
9
- * the plugin is loading.
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 { PanelComponent } = (0, plugin_system_1.usePanelPlugin)(props.definition.kind);
13
- return (0, jsx_runtime_1.jsx)(PanelComponent, { ...props });
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
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
15
- if (k2 === undefined) k2 = k;
16
- var desc = Object.getOwnPropertyDescriptor(m, k);
17
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
18
- desc = { enumerable: true, get: function() { return m[k]; } };
19
- }
20
- Object.defineProperty(o, k2, desc);
21
- }) : (function(o, m, k, k2) {
22
- if (k2 === undefined) k2 = k;
23
- o[k2] = m[k];
24
- }));
25
- var __exportStar = (this && this.__exportStar) || function(m, exports) {
26
- for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
27
- };
28
- Object.defineProperty(exports, "__esModule", { value: true });
29
- __exportStar(require("./Panel"), exports);
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
+ }