@perses-dev/dashboards 0.53.0-beta.1 → 0.53.0-beta.3

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 (31) hide show
  1. package/dist/cjs/components/Panel/PanelActions.js +41 -3
  2. package/dist/cjs/components/Panel/PanelPluginLoader.js +4 -2
  3. package/dist/cjs/components/PanelDrawer/PanelEditorForm.js +165 -198
  4. package/dist/cjs/components/PanelDrawer/PanelPreview.js +2 -23
  5. package/dist/cjs/components/PanelDrawer/PanelQueriesSharedControls.js +96 -0
  6. package/dist/cjs/components/Variables/VariableEditor.js +15 -22
  7. package/dist/cjs/context/PanelEditorProvider/PanelEditorProvider.js +1 -2
  8. package/dist/components/Panel/PanelActions.d.ts.map +1 -1
  9. package/dist/components/Panel/PanelActions.js +41 -3
  10. package/dist/components/Panel/PanelActions.js.map +1 -1
  11. package/dist/components/Panel/PanelPluginLoader.d.ts.map +1 -1
  12. package/dist/components/Panel/PanelPluginLoader.js +4 -2
  13. package/dist/components/Panel/PanelPluginLoader.js.map +1 -1
  14. package/dist/components/PanelDrawer/PanelEditorForm.d.ts.map +1 -1
  15. package/dist/components/PanelDrawer/PanelEditorForm.js +168 -201
  16. package/dist/components/PanelDrawer/PanelEditorForm.js.map +1 -1
  17. package/dist/components/PanelDrawer/PanelPreview.d.ts.map +1 -1
  18. package/dist/components/PanelDrawer/PanelPreview.js +2 -23
  19. package/dist/components/PanelDrawer/PanelPreview.js.map +1 -1
  20. package/dist/components/PanelDrawer/PanelQueriesSharedControls.d.ts +13 -0
  21. package/dist/components/PanelDrawer/PanelQueriesSharedControls.d.ts.map +1 -0
  22. package/dist/components/PanelDrawer/PanelQueriesSharedControls.js +90 -0
  23. package/dist/components/PanelDrawer/PanelQueriesSharedControls.js.map +1 -0
  24. package/dist/components/Variables/VariableEditor.d.ts.map +1 -1
  25. package/dist/components/Variables/VariableEditor.js +17 -24
  26. package/dist/components/Variables/VariableEditor.js.map +1 -1
  27. package/dist/context/PanelEditorProvider/PanelEditorProvider.d.ts +3 -3
  28. package/dist/context/PanelEditorProvider/PanelEditorProvider.d.ts.map +1 -1
  29. package/dist/context/PanelEditorProvider/PanelEditorProvider.js +1 -2
  30. package/dist/context/PanelEditorProvider/PanelEditorProvider.js.map +1 -1
  31. package/package.json +5 -5
package/dist/cjs/components/Panel/PanelActions.js CHANGED
@@ -33,6 +33,7 @@ const _DragVertical = /*#__PURE__*/ _interop_require_default(require("mdi-materi
33
33
  const _ContentCopy = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ContentCopy"));
34
34
  const _Menu = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Menu"));
35
35
  const _Alert = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Alert"));
36
+ const _AlertCircle = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/AlertCircle"));
36
37
  const _InformationOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/InformationOutline"));
37
38
  const _constants = require("../../constants");
38
39
  const _HeaderIconButton = require("./HeaderIconButton");
@@ -42,6 +43,19 @@ function _interop_require_default(obj) {
42
43
  default: obj
43
44
  };
44
45
  }
46
+ const noticeTypeToIcon = {
47
+ error: /*#__PURE__*/ (0, _jsxruntime.jsx)(_AlertCircle.default, {
48
+ color: "error"
49
+ }),
50
+ warning: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Alert.default, {
51
+ fontSize: "inherit",
52
+ color: "warning"
53
+ }),
54
+ info: /*#__PURE__*/ (0, _jsxruntime.jsx)(_InformationOutline.default, {
55
+ fontSize: "inherit",
56
+ color: "info"
57
+ })
58
+ };
45
59
  const ConditionalBox = (0, _material.styled)(_material.Box)({
46
60
  display: 'none',
47
61
  alignItems: 'center',
@@ -88,15 +102,17 @@ const PanelActions = ({ editHandlers, readHandlers, viewQueriesHandler, extra, t
88
102
  size: "1.125rem"
89
103
  });
90
104
  } else if (queryErrors.length > 0) {
91
- const errorTexts = queryErrors.map((q)=>q.error).map((e)=>e?.message ?? e?.toString() ?? 'Unknown error') // eslint-disable-line @typescript-eslint/no-explicit-any
92
- .join('\n');
105
+ const errorTexts = queryErrors.map((q)=>q.error).map((e)=>e.message).join('\n');
93
106
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
94
107
  description: errorTexts,
95
108
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_HeaderIconButton.HeaderIconButton, {
96
109
  "aria-label": "panel errors",
97
110
  size: "small",
98
111
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Alert.default, {
99
- fontSize: "inherit"
112
+ fontSize: "inherit",
113
+ sx: {
114
+ color: (theme)=>theme.palette.error.main
115
+ }
100
116
  })
101
117
  })
102
118
  });
@@ -104,6 +120,24 @@ const PanelActions = ({ editHandlers, readHandlers, viewQueriesHandler, extra, t
104
120
  }, [
105
121
  queryResults
106
122
  ]);
123
+ const noticesIndicator = (0, _react.useMemo)(()=>{
124
+ const notices = queryResults.flatMap((q)=>{
125
+ return q.data?.metadata?.notices ?? [];
126
+ });
127
+ if (notices.length > 0) {
128
+ const lastNotice = notices[notices.length - 1];
129
+ return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
130
+ description: lastNotice.message,
131
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_HeaderIconButton.HeaderIconButton, {
132
+ "aria-label": "panel notices",
133
+ size: "small",
134
+ children: noticeTypeToIcon[lastNotice.type]
135
+ })
136
+ });
137
+ }
138
+ }, [
139
+ queryResults
140
+ ]);
107
141
  const readActions = (0, _react.useMemo)(()=>{
108
142
  if (readHandlers !== undefined) {
109
143
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
@@ -251,6 +285,8 @@ const PanelActions = ({ editHandlers, readHandlers, viewQueriesHandler, extra, t
251
285
  " ",
252
286
  queryStateIndicator,
253
287
  " ",
288
+ noticesIndicator,
289
+ " ",
254
290
  extraActions,
255
291
  " ",
256
292
  viewQueryAction,
@@ -282,6 +318,7 @@ const PanelActions = ({ editHandlers, readHandlers, viewQueriesHandler, extra, t
282
318
  divider,
283
319
  " ",
284
320
  queryStateIndicator,
321
+ noticesIndicator,
285
322
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(OnHover, {
286
323
  children: [
287
324
  extraActions,
@@ -320,6 +357,7 @@ const PanelActions = ({ editHandlers, readHandlers, viewQueriesHandler, extra, t
320
357
  divider,
321
358
  " ",
322
359
  queryStateIndicator,
360
+ noticesIndicator,
323
361
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(OnHover, {
324
362
  children: [
325
363
  extraActions,
package/dist/cjs/components/Panel/PanelPluginLoader.js CHANGED
@@ -30,6 +30,8 @@ function PanelPluginLoader(props) {
30
30
  });
31
31
  const PanelComponent = plugin?.PanelComponent;
32
32
  const supportedQueryTypes = plugin?.supportedQueryTypes || [];
33
+ // Clear out the queryResults parameter for plugins which don't support any query types
34
+ const supportedQueryResults = supportedQueryTypes.length > 0 ? queryResults : [];
33
35
  // Show fullsize skeleton if the panel plugin is loading.
34
36
  if (isPanelLoading) {
35
37
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Skeleton, {
@@ -42,7 +44,7 @@ function PanelPluginLoader(props) {
42
44
  if (PanelComponent === undefined) {
43
45
  throw new Error(`Missing PanelComponent from panel plugin for kind '${kind}'`);
44
46
  }
45
- for (const queryResult of queryResults){
47
+ for (const queryResult of supportedQueryResults){
46
48
  if (!supportedQueryTypes.includes(queryResult.definition.kind)) {
47
49
  throw new Error(`This panel does not support queries of type '${queryResult.definition.kind}'. Supported query types: ${supportedQueryTypes.join(', ')}.`);
48
50
  }
@@ -51,6 +53,6 @@ function PanelPluginLoader(props) {
51
53
  spec: spec,
52
54
  contentDimensions: contentDimensions,
53
55
  definition: definition,
54
- queryResults: queryResults
56
+ queryResults: supportedQueryResults
55
57
  });
56
58
  }
package/dist/cjs/components/PanelDrawer/PanelEditorForm.js CHANGED
@@ -31,18 +31,16 @@ _export(exports, {
31
31
  const _jsxruntime = require("react/jsx-runtime");
32
32
  const _react = require("react");
33
33
  const _material = require("@mui/material");
34
- const _core = require("@perses-dev/core");
35
34
  const _components = require("@perses-dev/components");
36
35
  const _pluginsystem = require("@perses-dev/plugin-system");
37
36
  const _reacthookform = require("react-hook-form");
38
37
  const _zod = require("@hookform/resolvers/zod");
39
38
  const _context = require("../../context");
40
39
  const _PanelEditorProvider = require("../../context/PanelEditorProvider/PanelEditorProvider");
41
- const _PanelPreview = require("./PanelPreview");
42
40
  const _usePanelEditor = require("./usePanelEditor");
41
+ const _PanelQueriesSharedControls = require("./PanelQueriesSharedControls");
43
42
  function PanelEditorForm(props) {
44
43
  const { initialValues, initialAction, onSave, onClose } = props;
45
- const pluginEditorRef = (0, _react.useRef)(null);
46
44
  const panelGroups = (0, _context.useListPanelGroups)();
47
45
  const { panelDefinition, setName, setDescription, setLinks, setQueries, setPlugin, setPanelDefinition } = (0, _usePanelEditor.usePanelEditor)(initialValues.panelDefinition);
48
46
  const { plugin } = panelDefinition.spec;
@@ -53,9 +51,6 @@ function PanelEditorForm(props) {
53
51
  mode: 'onBlur',
54
52
  defaultValues: initialValues
55
53
  });
56
- const { dashboard } = (0, _context.useDashboard)();
57
- const dashboardDuration = dashboard?.kind === 'Dashboard' ? dashboard.spec.duration : _core.DEFAULT_DASHBOARD_DURATION;
58
- const initialTimeRange = (0, _pluginsystem.useInitialTimeRange)(dashboardDuration);
59
54
  // Use common plugin editor logic even though we've split the inputs up in this form
60
55
  const pluginEditor = (0, _pluginsystem.usePluginEditor)({
61
56
  pluginTypes: [
@@ -131,212 +126,184 @@ function PanelEditorForm(props) {
131
126
  control: form.control,
132
127
  name: 'panelDefinition.spec.plugin.kind'
133
128
  });
134
- const { timeRange } = (0, _pluginsystem.useTimeRangeParams)(initialTimeRange);
135
129
  const handleSubmit = (0, _react.useCallback)(()=>{
136
- pluginEditorRef.current?.flushChanges?.();
137
130
  form.handleSubmit(processForm)();
138
131
  }, [
139
132
  form,
140
133
  processForm
141
134
  ]);
142
- return /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.TimeRangeProvider, {
143
- timeRange: timeRange,
144
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.FormProvider, {
145
- ...form,
146
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_PanelEditorProvider.PanelEditorProvider, {
147
- children: [
148
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
149
- sx: {
150
- display: 'flex',
151
- alignItems: 'center',
152
- padding: (theme)=>theme.spacing(1, 2),
153
- borderBottom: (theme)=>`1px solid ${theme.palette.divider}`
154
- },
155
- children: [
156
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Typography, {
157
- variant: "h2",
158
- children: [
159
- titleAction,
160
- " Panel"
161
- ]
162
- }),
163
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
164
- direction: "row",
165
- spacing: 1,
166
- marginLeft: "auto",
167
- children: [
168
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
169
- variant: "contained",
170
- disabled: !form.formState.isValid,
171
- onClick: handleSubmit,
172
- children: submitText
173
- }),
174
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
175
- color: "secondary",
176
- variant: "outlined",
177
- onClick: handleCancel,
178
- children: "Cancel"
179
- })
180
- ]
181
- })
182
- ]
183
- }),
184
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
185
- id: panelEditorFormId,
186
- sx: {
187
- flex: 1,
188
- overflowY: 'scroll',
189
- padding: (theme)=>theme.spacing(2)
190
- },
191
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Grid, {
192
- container: true,
193
- spacing: 2,
135
+ return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.FormProvider, {
136
+ ...form,
137
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_PanelEditorProvider.PanelEditorProvider, {
138
+ children: [
139
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
140
+ sx: {
141
+ display: 'flex',
142
+ alignItems: 'center',
143
+ padding: (theme)=>theme.spacing(1, 2),
144
+ borderBottom: (theme)=>`1px solid ${theme.palette.divider}`
145
+ },
146
+ children: [
147
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Typography, {
148
+ variant: "h2",
194
149
  children: [
195
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
196
- item: true,
197
- xs: 8,
198
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
199
- control: form.control,
200
- name: "panelDefinition.spec.display.name",
201
- render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
202
- ...field,
203
- required: true,
204
- fullWidth: true,
205
- label: "Name",
206
- error: !!fieldState.error,
207
- helperText: fieldState.error?.message,
208
- value: watchedName ?? '',
209
- onChange: (event)=>{
210
- field.onChange(event);
211
- setName(event.target.value);
212
- }
213
- })
214
- })
215
- }),
216
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
217
- item: true,
218
- xs: 4,
219
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
220
- control: form.control,
221
- name: "groupId",
222
- render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
223
- select: true,
224
- ...field,
225
- required: true,
226
- fullWidth: true,
227
- label: "Group",
228
- error: !!fieldState.error,
229
- helperText: fieldState.error?.message,
230
- onChange: (event)=>{
231
- field.onChange(event);
232
- },
233
- children: panelGroups.map((panelGroup, index)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
234
- value: panelGroup.id,
235
- children: panelGroup.title ?? `Group ${index + 1}`
236
- }, panelGroup.id))
237
- })
238
- })
239
- }),
240
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
241
- item: true,
242
- xs: 8,
243
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
244
- control: form.control,
245
- name: "panelDefinition.spec.display.description",
246
- render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
247
- ...field,
248
- fullWidth: true,
249
- label: "Description",
250
- error: !!fieldState.error,
251
- helperText: fieldState.error?.message,
252
- value: watchedDescription ?? '',
253
- onChange: (event)=>{
254
- field.onChange(event);
255
- setDescription(event.target.value);
256
- }
257
- })
258
- })
259
- }),
260
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
261
- item: true,
262
- xs: 4,
263
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
264
- control: form.control,
265
- name: "panelDefinition.spec.plugin.kind",
266
- render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.PluginKindSelect, {
267
- ...field,
268
- pluginTypes: [
269
- 'Panel'
270
- ],
271
- required: true,
272
- fullWidth: true,
273
- label: "Type",
274
- disabled: pluginEditor.isLoading,
275
- error: !!pluginEditor.error || !!fieldState.error,
276
- helperText: pluginEditor.error?.message ?? fieldState.error?.message,
277
- value: {
278
- type: 'Panel',
279
- kind: watchedPluginKind
280
- },
281
- onChange: (event)=>{
282
- field.onChange(event.kind);
283
- pluginEditor.onSelectionChange(event);
284
- }
285
- })
286
- })
150
+ titleAction,
151
+ " Panel"
152
+ ]
153
+ }),
154
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
155
+ direction: "row",
156
+ spacing: 1,
157
+ marginLeft: "auto",
158
+ children: [
159
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
160
+ variant: "contained",
161
+ disabled: !form.formState.isValid,
162
+ onClick: handleSubmit,
163
+ children: submitText
287
164
  }),
288
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Grid, {
289
- item: true,
290
- xs: 12,
291
- children: [
292
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
293
- variant: "h4",
294
- marginBottom: 1,
295
- children: "Preview"
296
- }),
297
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
298
- FallbackComponent: _components.ErrorAlert,
299
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelPreview.PanelPreview, {
300
- panelDefinition: panelDefinition
301
- })
165
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
166
+ color: "secondary",
167
+ variant: "outlined",
168
+ onClick: handleCancel,
169
+ children: "Cancel"
170
+ })
171
+ ]
172
+ })
173
+ ]
174
+ }),
175
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
176
+ id: panelEditorFormId,
177
+ sx: {
178
+ flex: 1,
179
+ overflowY: 'scroll',
180
+ padding: (theme)=>theme.spacing(2)
181
+ },
182
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Grid, {
183
+ container: true,
184
+ spacing: 2,
185
+ children: [
186
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
187
+ item: true,
188
+ xs: 8,
189
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
190
+ control: form.control,
191
+ name: "panelDefinition.spec.display.name",
192
+ render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
193
+ ...field,
194
+ required: true,
195
+ fullWidth: true,
196
+ label: "Name",
197
+ error: !!fieldState.error,
198
+ helperText: fieldState.error?.message,
199
+ value: watchedName ?? '',
200
+ onChange: (event)=>{
201
+ field.onChange(event);
202
+ setName(event.target.value);
203
+ }
302
204
  })
303
- ]
304
- }),
305
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
306
- item: true,
307
- xs: 12,
308
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
309
- FallbackComponent: _components.ErrorAlert,
310
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.PanelSpecEditor, {
311
- ref: pluginEditorRef,
312
- control: form.control,
313
- panelDefinition: panelDefinition,
314
- onJSONChange: handlePanelDefinitionChange,
315
- onQueriesChange: (queries)=>{
316
- setQueries(queries);
205
+ })
206
+ }),
207
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
208
+ item: true,
209
+ xs: 4,
210
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
211
+ control: form.control,
212
+ name: "groupId",
213
+ render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
214
+ select: true,
215
+ ...field,
216
+ required: true,
217
+ fullWidth: true,
218
+ label: "Group",
219
+ error: !!fieldState.error,
220
+ helperText: fieldState.error?.message,
221
+ onChange: (event)=>{
222
+ field.onChange(event);
317
223
  },
318
- onPluginSpecChange: (spec)=>{
319
- pluginEditor.onSpecChange(spec);
224
+ children: panelGroups.map((panelGroup, index)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
225
+ value: panelGroup.id,
226
+ children: panelGroup.title ?? `Group ${index + 1}`
227
+ }, panelGroup.id))
228
+ })
229
+ })
230
+ }),
231
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
232
+ item: true,
233
+ xs: 8,
234
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
235
+ control: form.control,
236
+ name: "panelDefinition.spec.display.description",
237
+ render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
238
+ ...field,
239
+ fullWidth: true,
240
+ label: "Description",
241
+ error: !!fieldState.error,
242
+ helperText: fieldState.error?.message,
243
+ value: watchedDescription ?? '',
244
+ onChange: (event)=>{
245
+ field.onChange(event);
246
+ setDescription(event.target.value);
320
247
  }
321
248
  })
322
- })
323
249
  })
324
- ]
325
- })
326
- }),
327
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.DiscardChangesConfirmationDialog, {
328
- description: "You have unapplied changes in this panel. Are you sure you want to discard these changes? Changes cannot be recovered.",
329
- isOpen: isDiscardDialogOpened,
330
- onCancel: ()=>{
331
- setDiscardDialogOpened(false);
332
- },
333
- onDiscardChanges: ()=>{
334
- setDiscardDialogOpened(false);
335
- onClose();
336
- }
250
+ }),
251
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
252
+ item: true,
253
+ xs: 4,
254
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
255
+ control: form.control,
256
+ name: "panelDefinition.spec.plugin.kind",
257
+ render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.PluginKindSelect, {
258
+ ...field,
259
+ pluginTypes: [
260
+ 'Panel'
261
+ ],
262
+ required: true,
263
+ fullWidth: true,
264
+ label: "Type",
265
+ disabled: pluginEditor.isLoading,
266
+ error: !!pluginEditor.error || !!fieldState.error,
267
+ helperText: pluginEditor.error?.message ?? fieldState.error?.message,
268
+ value: {
269
+ type: 'Panel',
270
+ kind: watchedPluginKind
271
+ },
272
+ onChange: (event)=>{
273
+ field.onChange(event.kind);
274
+ pluginEditor.onSelectionChange(event);
275
+ }
276
+ })
277
+ })
278
+ }),
279
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
280
+ FallbackComponent: _components.ErrorAlert,
281
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelQueriesSharedControls.PanelQueriesSharedControls, {
282
+ control: form.control,
283
+ plugin: plugin,
284
+ panelDefinition: panelDefinition,
285
+ onQueriesChange: (q)=>setQueries(q),
286
+ onPluginSpecChange: (spec)=>{
287
+ pluginEditor.onSpecChange(spec);
288
+ },
289
+ onJSONChange: handlePanelDefinitionChange
290
+ })
291
+ })
292
+ ]
337
293
  })
338
- ]
339
- })
294
+ }),
295
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.DiscardChangesConfirmationDialog, {
296
+ description: "You have unapplied changes in this panel. Are you sure you want to discard these changes? Changes cannot be recovered.",
297
+ isOpen: isDiscardDialogOpened,
298
+ onCancel: ()=>{
299
+ setDiscardDialogOpened(false);
300
+ },
301
+ onDiscardChanges: ()=>{
302
+ setDiscardDialogOpened(false);
303
+ onClose();
304
+ }
305
+ })
306
+ ]
340
307
  })
341
308
  });
342
309
  }
package/dist/cjs/components/PanelDrawer/PanelPreview.js CHANGED
@@ -23,7 +23,6 @@ Object.defineProperty(exports, "PanelPreview", {
23
23
  const _jsxruntime = require("react/jsx-runtime");
24
24
  const _react = require("react");
25
25
  const _material = require("@mui/material");
26
- const _pluginsystem = require("@perses-dev/plugin-system");
27
26
  const _Panel = require("../Panel");
28
27
  const _context = require("../../context");
29
28
  const PANEL_PREVIEW_HEIGHT = 300;
@@ -36,34 +35,14 @@ function PanelPreview({ panelDefinition }) {
36
35
  width = boxRef.current.getBoundingClientRect().width;
37
36
  panelEditorContext?.preview?.setPreviewPanelWidth?.(width);
38
37
  }
39
- const suggestedStepMs = (0, _pluginsystem.useSuggestedStepMs)(width);
40
- const { data: plugin, isLoading } = (0, _pluginsystem.usePlugin)('Panel', panelDefinition.spec.plugin.kind);
41
- if (isLoading) {
42
- return null;
43
- }
44
38
  if (panelDefinition.spec.plugin.kind === '') {
45
39
  return null;
46
40
  }
47
- const queries = panelDefinition.spec.queries ?? [];
48
- // map TimeSeriesQueryDefinition to Definition<UnknownSpec>
49
- const definitions = queries.length ? queries.map((query)=>{
50
- return {
51
- kind: query.spec.plugin.kind,
52
- spec: query.spec.plugin.spec
53
- };
54
- }) : [];
55
41
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
56
42
  ref: boxRef,
57
43
  height: PANEL_PREVIEW_HEIGHT,
58
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DataQueriesProvider, {
59
- definitions: definitions,
60
- options: {
61
- suggestedStepMs,
62
- ...plugin?.queryOptions
63
- },
64
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Panel.Panel, {
65
- definition: panelDefinition
66
- })
44
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Panel.Panel, {
45
+ definition: panelDefinition
67
46
  })
68
47
  });
69
48
  }