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

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 (25) hide show
  1. package/dist/cjs/components/Panel/PanelActions.js +5 -3
  2. package/dist/cjs/components/PanelDrawer/PanelEditorForm.js +165 -196
  3. package/dist/cjs/components/PanelDrawer/PanelPreview.js +2 -23
  4. package/dist/cjs/components/PanelDrawer/PanelQueriesSharedControls.js +80 -0
  5. package/dist/cjs/components/Variables/VariableEditor.js +15 -22
  6. package/dist/components/Panel/PanelActions.d.ts.map +1 -1
  7. package/dist/components/Panel/PanelActions.js +5 -3
  8. package/dist/components/Panel/PanelActions.js.map +1 -1
  9. package/dist/components/PanelDrawer/PanelEditorForm.d.ts.map +1 -1
  10. package/dist/components/PanelDrawer/PanelEditorForm.js +167 -198
  11. package/dist/components/PanelDrawer/PanelEditorForm.js.map +1 -1
  12. package/dist/components/PanelDrawer/PanelPreview.d.ts.map +1 -1
  13. package/dist/components/PanelDrawer/PanelPreview.js +2 -23
  14. package/dist/components/PanelDrawer/PanelPreview.js.map +1 -1
  15. package/dist/components/PanelDrawer/PanelQueriesSharedControls.d.ts +13 -0
  16. package/dist/components/PanelDrawer/PanelQueriesSharedControls.d.ts.map +1 -0
  17. package/dist/components/PanelDrawer/PanelQueriesSharedControls.js +74 -0
  18. package/dist/components/PanelDrawer/PanelQueriesSharedControls.js.map +1 -0
  19. package/dist/components/Variables/VariableEditor.d.ts.map +1 -1
  20. package/dist/components/Variables/VariableEditor.js +17 -24
  21. package/dist/components/Variables/VariableEditor.js.map +1 -1
  22. package/dist/context/PanelEditorProvider/PanelEditorProvider.d.ts +2 -2
  23. package/dist/context/PanelEditorProvider/PanelEditorProvider.d.ts.map +1 -1
  24. package/dist/context/PanelEditorProvider/PanelEditorProvider.js.map +1 -1
  25. package/package.json +5 -5
package/dist/cjs/components/Panel/PanelActions.js CHANGED
@@ -88,15 +88,17 @@ const PanelActions = ({ editHandlers, readHandlers, viewQueriesHandler, extra, t
88
88
  size: "1.125rem"
89
89
  });
90
90
  } 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');
91
+ const errorTexts = queryErrors.map((q)=>q.error).map((e)=>e.message).join('\n');
93
92
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
94
93
  description: errorTexts,
95
94
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_HeaderIconButton.HeaderIconButton, {
96
95
  "aria-label": "panel errors",
97
96
  size: "small",
98
97
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Alert.default, {
99
- fontSize: "inherit"
98
+ fontSize: "inherit",
99
+ sx: {
100
+ color: (theme)=>theme.palette.error.main
101
+ }
100
102
  })
101
103
  })
102
104
  });
package/dist/cjs/components/PanelDrawer/PanelEditorForm.js CHANGED
@@ -31,15 +31,14 @@ _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
44
  const pluginEditorRef = (0, _react.useRef)(null);
@@ -53,9 +52,6 @@ function PanelEditorForm(props) {
53
52
  mode: 'onBlur',
54
53
  defaultValues: initialValues
55
54
  });
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
55
  // Use common plugin editor logic even though we've split the inputs up in this form
60
56
  const pluginEditor = (0, _pluginsystem.usePluginEditor)({
61
57
  pluginTypes: [
@@ -131,7 +127,6 @@ function PanelEditorForm(props) {
131
127
  control: form.control,
132
128
  name: 'panelDefinition.spec.plugin.kind'
133
129
  });
134
- const { timeRange } = (0, _pluginsystem.useTimeRangeParams)(initialTimeRange);
135
130
  const handleSubmit = (0, _react.useCallback)(()=>{
136
131
  pluginEditorRef.current?.flushChanges?.();
137
132
  form.handleSubmit(processForm)();
@@ -139,204 +134,178 @@ function PanelEditorForm(props) {
139
134
  form,
140
135
  processForm
141
136
  ]);
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,
137
+ return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.FormProvider, {
138
+ ...form,
139
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_PanelEditorProvider.PanelEditorProvider, {
140
+ children: [
141
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
142
+ sx: {
143
+ display: 'flex',
144
+ alignItems: 'center',
145
+ padding: (theme)=>theme.spacing(1, 2),
146
+ borderBottom: (theme)=>`1px solid ${theme.palette.divider}`
147
+ },
148
+ children: [
149
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Typography, {
150
+ variant: "h2",
194
151
  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
- })
152
+ titleAction,
153
+ " Panel"
154
+ ]
155
+ }),
156
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
157
+ direction: "row",
158
+ spacing: 1,
159
+ marginLeft: "auto",
160
+ children: [
161
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
162
+ variant: "contained",
163
+ disabled: !form.formState.isValid,
164
+ onClick: handleSubmit,
165
+ children: submitText
287
166
  }),
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
- })
167
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
168
+ color: "secondary",
169
+ variant: "outlined",
170
+ onClick: handleCancel,
171
+ children: "Cancel"
172
+ })
173
+ ]
174
+ })
175
+ ]
176
+ }),
177
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
178
+ id: panelEditorFormId,
179
+ sx: {
180
+ flex: 1,
181
+ overflowY: 'scroll',
182
+ padding: (theme)=>theme.spacing(2)
183
+ },
184
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Grid, {
185
+ container: true,
186
+ spacing: 2,
187
+ children: [
188
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
189
+ item: true,
190
+ xs: 8,
191
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
192
+ control: form.control,
193
+ name: "panelDefinition.spec.display.name",
194
+ render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
195
+ ...field,
196
+ required: true,
197
+ fullWidth: true,
198
+ label: "Name",
199
+ error: !!fieldState.error,
200
+ helperText: fieldState.error?.message,
201
+ value: watchedName ?? '',
202
+ onChange: (event)=>{
203
+ field.onChange(event);
204
+ setName(event.target.value);
205
+ }
302
206
  })
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);
207
+ })
208
+ }),
209
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
210
+ item: true,
211
+ xs: 4,
212
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
213
+ control: form.control,
214
+ name: "groupId",
215
+ render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
216
+ select: true,
217
+ ...field,
218
+ required: true,
219
+ fullWidth: true,
220
+ label: "Group",
221
+ error: !!fieldState.error,
222
+ helperText: fieldState.error?.message,
223
+ onChange: (event)=>{
224
+ field.onChange(event);
317
225
  },
318
- onPluginSpecChange: (spec)=>{
319
- pluginEditor.onSpecChange(spec);
226
+ children: panelGroups.map((panelGroup, index)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
227
+ value: panelGroup.id,
228
+ children: panelGroup.title ?? `Group ${index + 1}`
229
+ }, panelGroup.id))
230
+ })
231
+ })
232
+ }),
233
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
234
+ item: true,
235
+ xs: 8,
236
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
237
+ control: form.control,
238
+ name: "panelDefinition.spec.display.description",
239
+ render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
240
+ ...field,
241
+ fullWidth: true,
242
+ label: "Description",
243
+ error: !!fieldState.error,
244
+ helperText: fieldState.error?.message,
245
+ value: watchedDescription ?? '',
246
+ onChange: (event)=>{
247
+ field.onChange(event);
248
+ setDescription(event.target.value);
320
249
  }
321
250
  })
322
- })
323
251
  })
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
- }
252
+ }),
253
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
254
+ item: true,
255
+ xs: 4,
256
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
257
+ control: form.control,
258
+ name: "panelDefinition.spec.plugin.kind",
259
+ render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.PluginKindSelect, {
260
+ ...field,
261
+ pluginTypes: [
262
+ 'Panel'
263
+ ],
264
+ required: true,
265
+ fullWidth: true,
266
+ label: "Type",
267
+ disabled: pluginEditor.isLoading,
268
+ error: !!pluginEditor.error || !!fieldState.error,
269
+ helperText: pluginEditor.error?.message ?? fieldState.error?.message,
270
+ value: {
271
+ type: 'Panel',
272
+ kind: watchedPluginKind
273
+ },
274
+ onChange: (event)=>{
275
+ field.onChange(event.kind);
276
+ pluginEditor.onSelectionChange(event);
277
+ }
278
+ })
279
+ })
280
+ }),
281
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
282
+ FallbackComponent: _components.ErrorAlert,
283
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelQueriesSharedControls.PanelQueriesSharedControls, {
284
+ control: form.control,
285
+ plugin: plugin,
286
+ panelDefinition: panelDefinition,
287
+ onQueriesChange: (q)=>setQueries(q),
288
+ onPluginSpecChange: (spec)=>{
289
+ pluginEditor.onSpecChange(spec);
290
+ },
291
+ onJSONChange: handlePanelDefinitionChange
292
+ })
293
+ })
294
+ ]
337
295
  })
338
- ]
339
- })
296
+ }),
297
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.DiscardChangesConfirmationDialog, {
298
+ description: "You have unapplied changes in this panel. Are you sure you want to discard these changes? Changes cannot be recovered.",
299
+ isOpen: isDiscardDialogOpened,
300
+ onCancel: ()=>{
301
+ setDiscardDialogOpened(false);
302
+ },
303
+ onDiscardChanges: ()=>{
304
+ setDiscardDialogOpened(false);
305
+ onClose();
306
+ }
307
+ })
308
+ ]
340
309
  })
341
310
  });
342
311
  }
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
  }
package/dist/cjs/components/PanelDrawer/PanelQueriesSharedControls.js ADDED
@@ -0,0 +1,80 @@
1
+ // Copyright 2025 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, "PanelQueriesSharedControls", {
18
+ enumerable: true,
19
+ get: function() {
20
+ return PanelQueriesSharedControls;
21
+ }
22
+ });
23
+ const _jsxruntime = require("react/jsx-runtime");
24
+ const _material = require("@mui/material");
25
+ const _components = require("@perses-dev/components");
26
+ const _dashboards = require("@perses-dev/dashboards");
27
+ const _pluginsystem = require("@perses-dev/plugin-system");
28
+ const _react = require("react");
29
+ function PanelQueriesSharedControls({ plugin, control, panelDefinition, onQueriesChange, onPluginSpecChange, onJSONChange }) {
30
+ const { data: pluginPreview } = (0, _pluginsystem.usePlugin)('Panel', plugin.kind);
31
+ const panelEditorContext = (0, _react.useContext)(_dashboards.PanelEditorContext);
32
+ const pluginQueryOptions = typeof pluginPreview?.queryOptions === 'function' ? pluginPreview?.queryOptions(panelDefinition.spec.plugin.spec) : pluginPreview?.queryOptions;
33
+ const suggestedStepMs = (0, _pluginsystem.useSuggestedStepMs)(panelEditorContext?.preview.previewPanelWidth);
34
+ const definitions = panelDefinition.spec.queries?.map((query)=>{
35
+ return {
36
+ kind: query.spec.plugin.kind,
37
+ spec: query.spec.plugin.spec
38
+ };
39
+ }) ?? [];
40
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_pluginsystem.DataQueriesProvider, {
41
+ definitions: definitions,
42
+ options: {
43
+ suggestedStepMs,
44
+ ...pluginQueryOptions
45
+ },
46
+ children: [
47
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Grid, {
48
+ item: true,
49
+ xs: 12,
50
+ children: [
51
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
52
+ variant: "h4",
53
+ marginBottom: 1,
54
+ children: "Preview"
55
+ }),
56
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
57
+ FallbackComponent: _components.ErrorAlert,
58
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_dashboards.PanelPreview, {
59
+ panelDefinition: panelDefinition
60
+ })
61
+ })
62
+ ]
63
+ }),
64
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
65
+ item: true,
66
+ xs: 12,
67
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
68
+ FallbackComponent: _components.ErrorAlert,
69
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.PanelSpecEditor, {
70
+ control: control,
71
+ panelDefinition: panelDefinition,
72
+ onJSONChange: onJSONChange,
73
+ onQueriesChange: onQueriesChange,
74
+ onPluginSpecChange: onPluginSpecChange
75
+ })
76
+ })
77
+ })
78
+ ]
79
+ });
80
+ }
package/dist/cjs/components/Variables/VariableEditor.js CHANGED
@@ -32,7 +32,6 @@ const _jsxruntime = require("react/jsx-runtime");
32
32
  const _react = require("react");
33
33
  const _material = require("@mui/material");
34
34
  const _Plus = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Plus"));
35
- const _core = require("@perses-dev/core");
36
35
  const _useimmer = require("use-immer");
37
36
  const _Pencil = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Pencil"));
38
37
  const _TrashCan = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/TrashCan"));
@@ -164,32 +163,26 @@ function VariableEditor(props) {
164
163
  draft.push(v);
165
164
  });
166
165
  };
167
- const { dashboard } = (0, _context.useDashboard)();
168
- const dashboardDuration = dashboard?.kind === 'Dashboard' ? dashboard.spec.duration : _core.DEFAULT_DASHBOARD_DURATION;
169
- const initialTimeRange = (0, _pluginsystem.useInitialTimeRange)(dashboardDuration);
170
166
  return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
171
167
  children: [
172
168
  currentEditingVariableDefinition && /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.ValidationProvider, {
173
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.TimeRangeProvider, {
174
- timeRange: initialTimeRange,
175
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.VariableEditorForm, {
176
- initialVariableDefinition: currentEditingVariableDefinition,
177
- action: variableFormAction,
178
- isDraft: true,
179
- onActionChange: setVariableFormAction,
180
- onSave: (definition)=>{
181
- setVariableDefinitions((draft)=>{
182
- draft[variableEditIdx] = definition;
183
- setVariableEditIdx(null);
184
- });
185
- },
186
- onClose: ()=>{
187
- if (variableFormAction === 'create') {
188
- removeVariable(variableEditIdx);
189
- }
169
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.VariableEditorForm, {
170
+ initialVariableDefinition: currentEditingVariableDefinition,
171
+ action: variableFormAction,
172
+ isDraft: true,
173
+ onActionChange: setVariableFormAction,
174
+ onSave: (definition)=>{
175
+ setVariableDefinitions((draft)=>{
176
+ draft[variableEditIdx] = definition;
190
177
  setVariableEditIdx(null);
178
+ });
179
+ },
180
+ onClose: ()=>{
181
+ if (variableFormAction === 'create') {
182
+ removeVariable(variableEditIdx);
191
183
  }
192
- })
184
+ setVariableEditIdx(null);
185
+ }
193
186
  })
194
187
  }),
195
188
  !currentEditingVariableDefinition && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
package/dist/components/Panel/PanelActions.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PanelActions.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/PanelActions.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAqC,SAAS,EAAqB,MAAM,OAAO,CAAC;AAExF,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAWtD,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAUxC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE;QACb,gBAAgB,EAAE,MAAM,IAAI,CAAC;QAC7B,qBAAqB,EAAE,MAAM,IAAI,CAAC;QAClC,kBAAkB,EAAE,MAAM,IAAI,CAAC;KAChC,CAAC;IACF,YAAY,CAAC,EAAE;QACb,aAAa,CAAC,EAAE,OAAO,CAAC;QACxB,gBAAgB,EAAE,MAAM,IAAI,CAAC;KAC9B,CAAC;IACF,kBAAkB,CAAC,EAAE;QACnB,OAAO,EAAE,MAAM,IAAI,CAAC;KACrB,CAAC;IACF,YAAY,EAAE,SAAS,EAAE,CAAC;IAC1B,aAAa,CAAC,EAAE,SAAS,EAAE,CAAC;IAC5B,SAAS,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;CACtC;AASD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA6NpD,CAAC"}
1
+ {"version":3,"file":"PanelActions.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/PanelActions.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAqC,SAAS,EAAqB,MAAM,OAAO,CAAC;AAExF,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAWtD,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAUxC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE;QACb,gBAAgB,EAAE,MAAM,IAAI,CAAC;QAC7B,qBAAqB,EAAE,MAAM,IAAI,CAAC;QAClC,kBAAkB,EAAE,MAAM,IAAI,CAAC;KAChC,CAAC;IACF,YAAY,CAAC,EAAE;QACb,aAAa,CAAC,EAAE,OAAO,CAAC;QACxB,gBAAgB,EAAE,MAAM,IAAI,CAAC;KAC9B,CAAC;IACF,kBAAkB,CAAC,EAAE;QACnB,OAAO,EAAE,MAAM,IAAI,CAAC;KACrB,CAAC;IACF,YAAY,EAAE,SAAS,EAAE,CAAC;IAC1B,aAAa,CAAC,EAAE,SAAS,EAAE,CAAC;IAC5B,SAAS,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;CACtC;AASD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAkOpD,CAAC"}
package/dist/components/Panel/PanelActions.js CHANGED
@@ -73,15 +73,17 @@ export const PanelActions = ({ editHandlers, readHandlers, viewQueriesHandler, e
73
73
  size: "1.125rem"
74
74
  });
75
75
  } else if (queryErrors.length > 0) {
76
- const errorTexts = queryErrors.map((q)=>q.error).map((e)=>e?.message ?? e?.toString() ?? 'Unknown error') // eslint-disable-line @typescript-eslint/no-explicit-any
77
- .join('\n');
76
+ const errorTexts = queryErrors.map((q)=>q.error).map((e)=>e.message).join('\n');
78
77
  return /*#__PURE__*/ _jsx(InfoTooltip, {
79
78
  description: errorTexts,
80
79
  children: /*#__PURE__*/ _jsx(HeaderIconButton, {
81
80
  "aria-label": "panel errors",
82
81
  size: "small",
83
82
  children: /*#__PURE__*/ _jsx(AlertIcon, {
84
- fontSize: "inherit"
83
+ fontSize: "inherit",
84
+ sx: {
85
+ color: (theme)=>theme.palette.error.main
86
+ }
85
87
  })
86
88
  })
87
89
  });