@perses-dev/dashboards 0.30.0 → 0.32.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 (107) hide show
  1. package/dist/cjs/components/DashboardToolbar/DashboardToolbar.js +5 -22
  2. package/dist/cjs/components/EditJsonButton/EditJsonButton.js +1 -0
  3. package/dist/cjs/components/GridLayout/GridTitle.js +30 -9
  4. package/dist/cjs/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.js +92 -0
  5. package/dist/cjs/components/SaveChangesConfirmationDialog/index.js +28 -0
  6. package/dist/cjs/components/SaveDashboardButton/SaveDashboardButton.js +80 -0
  7. package/dist/cjs/components/SaveDashboardButton/index.js +28 -0
  8. package/dist/cjs/components/Variables/VariableEditorForm/VariableEditorForm.js +123 -197
  9. package/dist/cjs/components/Variables/VariableEditorForm/VariablePreview.js +178 -0
  10. package/dist/cjs/components/Variables/VariableEditorForm/index.js +1 -0
  11. package/dist/cjs/components/Variables/index.js +1 -0
  12. package/dist/cjs/components/index.js +2 -0
  13. package/dist/cjs/context/DashboardProvider/DashboardProvider.js +2 -0
  14. package/dist/cjs/context/DashboardProvider/dashboard-provider-api.js +9 -0
  15. package/dist/cjs/context/DashboardProvider/index.js +1 -0
  16. package/dist/cjs/context/DashboardProvider/save-changes-dialog-slice.js +33 -0
  17. package/dist/cjs/context/TemplateVariableProvider/TemplateVariableProvider.js +56 -7
  18. package/dist/cjs/context/TemplateVariableProvider/hydrationUtils.js +2 -0
  19. package/dist/cjs/context/TemplateVariableProvider/utils.js +44 -0
  20. package/dist/cjs/test/render.js +35 -13
  21. package/dist/cjs/views/ViewDashboard/DashboardApp.js +2 -1
  22. package/dist/components/DashboardToolbar/DashboardToolbar.d.ts +2 -2
  23. package/dist/components/DashboardToolbar/DashboardToolbar.d.ts.map +1 -1
  24. package/dist/components/DashboardToolbar/DashboardToolbar.js +6 -23
  25. package/dist/components/DashboardToolbar/DashboardToolbar.js.map +1 -1
  26. package/dist/components/EditJsonButton/EditJsonButton.js +1 -0
  27. package/dist/components/EditJsonButton/EditJsonButton.js.map +1 -1
  28. package/dist/components/GridLayout/GridTitle.d.ts.map +1 -1
  29. package/dist/components/GridLayout/GridTitle.js +30 -9
  30. package/dist/components/GridLayout/GridTitle.js.map +1 -1
  31. package/dist/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.d.ts +3 -0
  32. package/dist/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.d.ts.map +1 -0
  33. package/dist/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.js +86 -0
  34. package/dist/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.js.map +1 -0
  35. package/dist/components/SaveChangesConfirmationDialog/index.d.ts +2 -0
  36. package/dist/components/SaveChangesConfirmationDialog/index.d.ts.map +1 -0
  37. package/dist/components/SaveChangesConfirmationDialog/index.js +15 -0
  38. package/dist/components/SaveChangesConfirmationDialog/index.js.map +1 -0
  39. package/dist/components/SaveDashboardButton/SaveDashboardButton.d.ts +10 -0
  40. package/dist/components/SaveDashboardButton/SaveDashboardButton.d.ts.map +1 -0
  41. package/dist/components/SaveDashboardButton/SaveDashboardButton.js +74 -0
  42. package/dist/components/SaveDashboardButton/SaveDashboardButton.js.map +1 -0
  43. package/dist/components/SaveDashboardButton/index.d.ts +2 -0
  44. package/dist/components/SaveDashboardButton/index.d.ts.map +1 -0
  45. package/dist/components/SaveDashboardButton/index.js +15 -0
  46. package/dist/components/SaveDashboardButton/index.js.map +1 -0
  47. package/dist/components/Variables/VariableEditorForm/VariableEditorForm.d.ts +4 -2
  48. package/dist/components/Variables/VariableEditorForm/VariableEditorForm.d.ts.map +1 -1
  49. package/dist/components/Variables/VariableEditorForm/VariableEditorForm.js +126 -195
  50. package/dist/components/Variables/VariableEditorForm/VariableEditorForm.js.map +1 -1
  51. package/dist/components/Variables/VariableEditorForm/VariablePreview.d.ts +16 -0
  52. package/dist/components/Variables/VariableEditorForm/VariablePreview.d.ts.map +1 -0
  53. package/dist/components/Variables/VariableEditorForm/VariablePreview.js +122 -0
  54. package/dist/components/Variables/VariableEditorForm/VariablePreview.js.map +1 -0
  55. package/dist/components/Variables/VariableEditorForm/index.d.ts +1 -0
  56. package/dist/components/Variables/VariableEditorForm/index.d.ts.map +1 -1
  57. package/dist/components/Variables/VariableEditorForm/index.js +1 -0
  58. package/dist/components/Variables/VariableEditorForm/index.js.map +1 -1
  59. package/dist/components/Variables/index.d.ts +1 -0
  60. package/dist/components/Variables/index.d.ts.map +1 -1
  61. package/dist/components/Variables/index.js +1 -0
  62. package/dist/components/Variables/index.js.map +1 -1
  63. package/dist/components/index.d.ts +2 -0
  64. package/dist/components/index.d.ts.map +1 -1
  65. package/dist/components/index.js +2 -0
  66. package/dist/components/index.js.map +1 -1
  67. package/dist/context/DashboardProvider/DashboardProvider.d.ts +2 -1
  68. package/dist/context/DashboardProvider/DashboardProvider.d.ts.map +1 -1
  69. package/dist/context/DashboardProvider/DashboardProvider.js +2 -0
  70. package/dist/context/DashboardProvider/DashboardProvider.js.map +1 -1
  71. package/dist/context/DashboardProvider/common.d.ts +2 -1
  72. package/dist/context/DashboardProvider/common.d.ts.map +1 -1
  73. package/dist/context/DashboardProvider/common.js.map +1 -1
  74. package/dist/context/DashboardProvider/dashboard-provider-api.d.ts +5 -0
  75. package/dist/context/DashboardProvider/dashboard-provider-api.d.ts.map +1 -1
  76. package/dist/context/DashboardProvider/dashboard-provider-api.js +8 -0
  77. package/dist/context/DashboardProvider/dashboard-provider-api.js.map +1 -1
  78. package/dist/context/DashboardProvider/index.d.ts +1 -0
  79. package/dist/context/DashboardProvider/index.d.ts.map +1 -1
  80. package/dist/context/DashboardProvider/index.js +1 -0
  81. package/dist/context/DashboardProvider/index.js.map +1 -1
  82. package/dist/context/DashboardProvider/save-changes-dialog-slice.d.ts +15 -0
  83. package/dist/context/DashboardProvider/save-changes-dialog-slice.d.ts.map +1 -0
  84. package/dist/context/DashboardProvider/save-changes-dialog-slice.js +27 -0
  85. package/dist/context/DashboardProvider/save-changes-dialog-slice.js.map +1 -0
  86. package/dist/context/TemplateVariableProvider/TemplateVariableProvider.d.ts +10 -0
  87. package/dist/context/TemplateVariableProvider/TemplateVariableProvider.d.ts.map +1 -1
  88. package/dist/context/TemplateVariableProvider/TemplateVariableProvider.js +51 -7
  89. package/dist/context/TemplateVariableProvider/TemplateVariableProvider.js.map +1 -1
  90. package/dist/context/TemplateVariableProvider/hydrationUtils.d.ts.map +1 -1
  91. package/dist/context/TemplateVariableProvider/hydrationUtils.js +2 -0
  92. package/dist/context/TemplateVariableProvider/hydrationUtils.js.map +1 -1
  93. package/dist/context/TemplateVariableProvider/utils.d.ts +7 -0
  94. package/dist/context/TemplateVariableProvider/utils.d.ts.map +1 -0
  95. package/dist/context/TemplateVariableProvider/utils.js +40 -0
  96. package/dist/context/TemplateVariableProvider/utils.js.map +1 -0
  97. package/dist/stories/decorators/WithDashboard.js.map +1 -1
  98. package/dist/stories/decorators/WithDatasourceStore.js.map +1 -1
  99. package/dist/stories/decorators/WithTemplateVariables.js.map +1 -1
  100. package/dist/test/render.d.ts.map +1 -1
  101. package/dist/test/render.js +35 -13
  102. package/dist/test/render.js.map +1 -1
  103. package/dist/views/ViewDashboard/DashboardApp.d.ts +2 -1
  104. package/dist/views/ViewDashboard/DashboardApp.d.ts.map +1 -1
  105. package/dist/views/ViewDashboard/DashboardApp.js +3 -2
  106. package/dist/views/ViewDashboard/DashboardApp.js.map +1 -1
  107. package/package.json +7 -6
@@ -12,16 +12,13 @@
12
12
  // limitations under the License.
13
13
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
14
14
  import React, { useMemo, useState } from 'react';
15
- import { Box, Typography, Switch, TextField, Grid, FormControl, InputLabel, MenuItem, Select, Button, Stack, Alert, Chip, IconButton, ClickAwayListener } from '@mui/material';
15
+ import { Box, Typography, Switch, TextField, Grid, FormControl, FormControlLabel, InputLabel, MenuItem, Select, Button, Stack, ClickAwayListener, Divider } from '@mui/material';
16
16
  import { useImmer } from 'use-immer';
17
17
  import { PluginEditor } from '@perses-dev/plugin-system';
18
- import { ErrorBoundary, InfoTooltip } from '@perses-dev/components';
19
- import Refresh from 'mdi-material-ui/Refresh';
20
- import Clipboard from 'mdi-material-ui/ClipboardOutline';
21
- import { TOOLTIP_TEXT } from '../../../constants';
22
- import { useListVariablePluginValues, VARIABLE_TYPES } from '../variable-model';
18
+ import { ErrorBoundary } from '@perses-dev/components';
19
+ import { VARIABLE_TYPES } from '../variable-model';
20
+ import { VariableListPreview, VariablePreview } from './VariablePreview';
23
21
  import { getVariableDefinitionFromState, getInitialState } from './variable-editor-form-model';
24
- const DEFAULT_MAX_PREVIEW_VALUES = 50;
25
22
  // TODO: Replace with proper validation library
26
23
  function getValidation(state) {
27
24
  /** Name validation */ let name = null;
@@ -37,96 +34,18 @@ function getValidation(state) {
37
34
  isValid: !name
38
35
  };
39
36
  }
40
- const SectionHeader = ({ children })=>/*#__PURE__*/ _jsx(Typography, {
41
- pb: 2,
42
- variant: "subtitle1",
43
- children: children
44
- });
45
- function VariableListPreview({ definition , onRefresh }) {
46
- const { data , isFetching , error } = useListVariablePluginValues(definition);
47
- const [maxValues, setMaxValues] = useState(DEFAULT_MAX_PREVIEW_VALUES);
48
- const showAll = ()=>{
49
- setMaxValues(undefined);
50
- };
51
- let notShown = 0;
52
- if (data && (data === null || data === void 0 ? void 0 : data.length) > 0 && maxValues) {
53
- notShown = data.length - maxValues;
54
- }
55
- const errorMessage = error === null || error === void 0 ? void 0 : error.message;
56
- return /*#__PURE__*/ _jsxs(Box, {
57
- children: [
58
- /*#__PURE__*/ _jsxs(Stack, {
59
- direction: 'row',
60
- spacing: 1,
61
- alignItems: "center",
62
- children: [
63
- /*#__PURE__*/ _jsx(Typography, {
64
- variant: "caption",
65
- children: "Preview Values"
66
- }),
67
- /*#__PURE__*/ _jsx(InfoTooltip, {
68
- description: TOOLTIP_TEXT.refreshVariableValues,
69
- children: /*#__PURE__*/ _jsx(IconButton, {
70
- onClick: onRefresh,
71
- size: "small",
72
- children: /*#__PURE__*/ _jsx(Refresh, {})
73
- })
74
- }),
75
- /*#__PURE__*/ _jsx(InfoTooltip, {
76
- description: TOOLTIP_TEXT.copyVariableValues,
77
- children: /*#__PURE__*/ _jsx(IconButton, {
78
- onClick: async ()=>{
79
- if (data === null || data === void 0 ? void 0 : data.length) {
80
- await navigator.clipboard.writeText(data.map((d)=>d.label).join(','));
81
- alert('Copied to clipboard!');
82
- }
83
- },
84
- size: "small",
85
- children: /*#__PURE__*/ _jsx(Clipboard, {})
86
- })
87
- })
88
- ]
89
- }),
90
- errorMessage && /*#__PURE__*/ _jsx(Alert, {
91
- severity: "error",
92
- children: errorMessage
93
- }),
94
- isFetching && 'Loading...',
95
- (data === null || data === void 0 ? void 0 : data.length) === 0 && /*#__PURE__*/ _jsx(Alert, {
96
- severity: "info",
97
- children: "No results"
98
- }),
99
- /*#__PURE__*/ _jsxs(_Fragment, {
100
- children: [
101
- data === null || data === void 0 ? void 0 : data.slice(0, maxValues).map((val)=>/*#__PURE__*/ _jsx(Chip, {
102
- sx: {
103
- mr: 1,
104
- mb: 1
105
- },
106
- size: "small",
107
- label: val.label
108
- }, val.value)),
109
- notShown > 0 && /*#__PURE__*/ _jsx(Chip, {
110
- onClick: showAll,
111
- variant: "outlined",
112
- sx: {
113
- mr: 1,
114
- mb: 1
115
- },
116
- size: "small",
117
- label: `+${notShown} more`
118
- })
119
- ]
120
- })
121
- ]
37
+ function FallbackPreview() {
38
+ return /*#__PURE__*/ _jsx("div", {
39
+ children: "Error previewing values"
122
40
  });
123
41
  }
124
- export function VariableEditForm({ initialVariableDefinition , onChange , onCancel }) {
42
+ export function VariableEditForm(props) {
43
+ const { initialVariableDefinition , onChange , onCancel } = props;
125
44
  const [state, setState] = useImmer(getInitialState(initialVariableDefinition));
126
45
  const validation = useMemo(()=>getValidation(state), [
127
46
  state
128
47
  ]);
129
- const [previewKey, setPreviewKey] = React.useState(0);
48
+ const [previewKey, setPreviewKey] = useState(0);
130
49
  const refreshPreview = ()=>{
131
50
  setPreviewKey((prev)=>prev + 1);
132
51
  };
@@ -186,9 +105,6 @@ export function VariableEditForm({ initialVariableDefinition , onChange , onCanc
186
105
  overflowY: 'scroll'
187
106
  },
188
107
  children: [
189
- /*#__PURE__*/ _jsx(SectionHeader, {
190
- children: "General"
191
- }),
192
108
  /*#__PURE__*/ _jsxs(Grid, {
193
109
  container: true,
194
110
  spacing: 2,
@@ -196,7 +112,7 @@ export function VariableEditForm({ initialVariableDefinition , onChange , onCanc
196
112
  children: [
197
113
  /*#__PURE__*/ _jsx(Grid, {
198
114
  item: true,
199
- xs: 6,
115
+ xs: 8,
200
116
  children: /*#__PURE__*/ _jsx(TextField, {
201
117
  required: true,
202
118
  error: !!validation.name,
@@ -213,7 +129,35 @@ export function VariableEditForm({ initialVariableDefinition , onChange , onCanc
213
129
  }),
214
130
  /*#__PURE__*/ _jsx(Grid, {
215
131
  item: true,
216
- xs: 6,
132
+ xs: 4,
133
+ children: /*#__PURE__*/ _jsx(TextField, {
134
+ fullWidth: true,
135
+ label: "Display Label",
136
+ value: state.title || '',
137
+ onChange: (v)=>{
138
+ setState((draft)=>{
139
+ draft.title = v.target.value;
140
+ });
141
+ }
142
+ })
143
+ }),
144
+ /*#__PURE__*/ _jsx(Grid, {
145
+ item: true,
146
+ xs: 8,
147
+ children: /*#__PURE__*/ _jsx(TextField, {
148
+ fullWidth: true,
149
+ label: "Description",
150
+ value: state.description,
151
+ onChange: (v)=>{
152
+ setState((draft)=>{
153
+ draft.description = v.target.value;
154
+ });
155
+ }
156
+ })
157
+ }),
158
+ /*#__PURE__*/ _jsx(Grid, {
159
+ item: true,
160
+ xs: 4,
217
161
  children: /*#__PURE__*/ _jsxs(FormControl, {
218
162
  fullWidth: true,
219
163
  children: [
@@ -238,50 +182,28 @@ export function VariableEditForm({ initialVariableDefinition , onChange , onCanc
238
182
  })
239
183
  ]
240
184
  })
241
- }),
242
- /*#__PURE__*/ _jsx(Grid, {
243
- item: true,
244
- xs: 6,
245
- children: /*#__PURE__*/ _jsx(TextField, {
246
- fullWidth: true,
247
- label: "Display Label",
248
- value: state.title || '',
249
- onChange: (v)=>{
250
- setState((draft)=>{
251
- draft.title = v.target.value;
252
- });
253
- }
254
- })
255
- }),
256
- /*#__PURE__*/ _jsx(Grid, {
257
- item: true,
258
- xs: 12,
259
- children: /*#__PURE__*/ _jsx(TextField, {
260
- fullWidth: true,
261
- label: "Description",
262
- value: state.description,
263
- onChange: (v)=>{
264
- setState((draft)=>{
265
- draft.description = v.target.value;
266
- });
267
- }
268
- })
269
185
  })
270
186
  ]
271
187
  }),
188
+ /*#__PURE__*/ _jsx(Divider, {}),
272
189
  state.kind === 'TextVariable' && /*#__PURE__*/ _jsxs(_Fragment, {
273
190
  children: [
274
- /*#__PURE__*/ _jsx(SectionHeader, {
191
+ /*#__PURE__*/ _jsx(Typography, {
192
+ py: 1,
193
+ variant: "subtitle1",
275
194
  children: "Text Options"
276
195
  }),
277
- /*#__PURE__*/ _jsx(Grid, {
278
- container: true,
196
+ /*#__PURE__*/ _jsxs(Stack, {
279
197
  spacing: 2,
280
- mb: 2,
281
- children: /*#__PURE__*/ _jsx(Grid, {
282
- item: true,
283
- xs: 12,
284
- children: /*#__PURE__*/ _jsx(TextField, {
198
+ children: [
199
+ /*#__PURE__*/ _jsx(Box, {
200
+ children: /*#__PURE__*/ _jsx(VariablePreview, {
201
+ values: [
202
+ state.textVariableFields.value
203
+ ]
204
+ })
205
+ }),
206
+ /*#__PURE__*/ _jsx(TextField, {
285
207
  label: "Value",
286
208
  value: state.textVariableFields.value,
287
209
  onChange: (v)=>{
@@ -290,30 +212,43 @@ export function VariableEditForm({ initialVariableDefinition , onChange , onCanc
290
212
  });
291
213
  }
292
214
  })
293
- })
215
+ ]
294
216
  })
295
217
  ]
296
218
  }),
297
219
  state.kind === 'ListVariable' && /*#__PURE__*/ _jsxs(_Fragment, {
298
220
  children: [
299
- /*#__PURE__*/ _jsx(SectionHeader, {
221
+ /*#__PURE__*/ _jsx(Typography, {
222
+ py: 1,
223
+ variant: "subtitle1",
300
224
  children: "List Options"
301
225
  }),
302
- /*#__PURE__*/ _jsxs(Grid, {
303
- container: true,
226
+ /*#__PURE__*/ _jsxs(Stack, {
304
227
  spacing: 2,
305
228
  mb: 2,
306
229
  children: [
307
- /*#__PURE__*/ _jsxs(Grid, {
308
- item: true,
309
- xs: 6,
230
+ state.listVariableFields.plugin.kind ? /*#__PURE__*/ _jsx(Box, {
231
+ children: /*#__PURE__*/ _jsx(ErrorBoundary, {
232
+ FallbackComponent: FallbackPreview,
233
+ resetKeys: [
234
+ previewSpec
235
+ ],
236
+ children: /*#__PURE__*/ _jsx(VariableListPreview, {
237
+ definition: previewSpec,
238
+ onRefresh: refreshPreview
239
+ })
240
+ })
241
+ }) : /*#__PURE__*/ _jsx(VariablePreview, {
242
+ isLoading: true
243
+ }),
244
+ /*#__PURE__*/ _jsxs(Stack, {
310
245
  children: [
311
246
  /*#__PURE__*/ _jsx(ClickAwayListener, {
312
247
  onClickAway: ()=>refreshPreview(),
313
248
  children: /*#__PURE__*/ _jsx(Box, {})
314
249
  }),
315
250
  /*#__PURE__*/ _jsx(PluginEditor, {
316
- width: 500,
251
+ width: "100%",
317
252
  pluginType: "Variable",
318
253
  pluginKindLabel: "Source",
319
254
  value: state.listVariableFields.plugin,
@@ -325,73 +260,69 @@ export function VariableEditForm({ initialVariableDefinition , onChange , onCanc
325
260
  })
326
261
  ]
327
262
  }),
328
- state.listVariableFields.plugin.kind && /*#__PURE__*/ _jsxs(Grid, {
329
- item: true,
330
- xs: 12,
331
- children: [
332
- /*#__PURE__*/ _jsx(TextField, {
333
- sx: {
334
- mb: 1
335
- },
336
- label: "Capturing Regexp Filter",
337
- value: state.listVariableFields.capturing_regexp || '',
338
- onChange: (e)=>{
339
- setState((draft)=>{
263
+ /*#__PURE__*/ _jsx(Stack, {
264
+ children: /*#__PURE__*/ _jsx(TextField, {
265
+ label: "Capturing Regexp Filter",
266
+ value: state.listVariableFields.capturing_regexp || '',
267
+ onChange: (e)=>{
268
+ setState((draft)=>{
269
+ if (e.target.value) {
270
+ // TODO: do a better fix, if empty string => it should skip the filter
340
271
  draft.listVariableFields.capturing_regexp = e.target.value;
341
- });
342
- }
343
- }),
344
- /*#__PURE__*/ _jsx(ErrorBoundary, {
345
- FallbackComponent: ()=>/*#__PURE__*/ _jsx("div", {
346
- children: "Error previewing values"
347
- }),
348
- resetKeys: [
349
- previewSpec
350
- ],
351
- children: /*#__PURE__*/ _jsx(VariableListPreview, {
352
- onRefresh: refreshPreview,
353
- definition: previewSpec
354
- })
355
- })
356
- ]
272
+ } else {
273
+ draft.listVariableFields.capturing_regexp = undefined;
274
+ }
275
+ });
276
+ },
277
+ helperText: "Optional, if you want to filter on captured result."
278
+ })
357
279
  })
358
280
  ]
359
281
  }),
360
- /*#__PURE__*/ _jsx(SectionHeader, {
282
+ /*#__PURE__*/ _jsx(Divider, {}),
283
+ /*#__PURE__*/ _jsx(Typography, {
284
+ py: 1,
285
+ variant: "subtitle1",
361
286
  children: "Dropdown Options"
362
287
  }),
363
- /*#__PURE__*/ _jsxs(Grid, {
364
- container: true,
365
- spacing: 1,
366
- mb: 1,
288
+ /*#__PURE__*/ _jsxs(Stack, {
289
+ spacing: "2",
367
290
  children: [
368
- /*#__PURE__*/ _jsxs(Grid, {
369
- item: true,
370
- xs: 12,
291
+ /*#__PURE__*/ _jsxs(Stack, {
371
292
  children: [
372
- "Allow Multiple",
373
- /*#__PURE__*/ _jsx(Switch, {
374
- checked: state.listVariableFields.allowMultiple,
375
- onChange: (e)=>{
376
- setState((draft)=>{
377
- draft.listVariableFields.allowMultiple = e.target.checked;
378
- });
379
- }
293
+ /*#__PURE__*/ _jsx(FormControlLabel, {
294
+ control: /*#__PURE__*/ _jsx(Switch, {
295
+ checked: state.listVariableFields.allowMultiple,
296
+ onChange: (e)=>{
297
+ setState((draft)=>{
298
+ draft.listVariableFields.allowMultiple = e.target.checked;
299
+ });
300
+ }
301
+ }),
302
+ label: "Allow Multiple Values"
303
+ }),
304
+ /*#__PURE__*/ _jsx(Typography, {
305
+ variant: "caption",
306
+ children: "Enables multiple values to be selected at the same time"
380
307
  })
381
308
  ]
382
309
  }),
383
- /*#__PURE__*/ _jsxs(Grid, {
384
- item: true,
385
- xs: 12,
310
+ /*#__PURE__*/ _jsxs(Stack, {
386
311
  children: [
387
- "Allow All",
388
- /*#__PURE__*/ _jsx(Switch, {
389
- checked: state.listVariableFields.allowAll,
390
- onChange: (e)=>{
391
- setState((draft)=>{
392
- draft.listVariableFields.allowAll = e.target.checked;
393
- });
394
- }
312
+ /*#__PURE__*/ _jsx(FormControlLabel, {
313
+ control: /*#__PURE__*/ _jsx(Switch, {
314
+ checked: state.listVariableFields.allowAll,
315
+ onChange: (e)=>{
316
+ setState((draft)=>{
317
+ draft.listVariableFields.allowAll = e.target.checked;
318
+ });
319
+ }
320
+ }),
321
+ label: "Allow All option"
322
+ }),
323
+ /*#__PURE__*/ _jsx(Typography, {
324
+ variant: "caption",
325
+ children: "Enables an option to include all variable values"
395
326
  })
396
327
  ]
397
328
  })
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/Variables/VariableEditorForm/VariableEditorForm.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React, { useMemo, useState } from 'react';\nimport {\n Box,\n Typography,\n Switch,\n TextField,\n Grid,\n FormControl,\n InputLabel,\n MenuItem,\n Select,\n Button,\n Stack,\n Alert,\n Chip,\n IconButton,\n ClickAwayListener,\n} from '@mui/material';\nimport { useImmer } from 'use-immer';\nimport { PluginEditor } from '@perses-dev/plugin-system';\nimport { VariableDefinition, ListVariableDefinition } from '@perses-dev/core';\nimport { ErrorBoundary, InfoTooltip } from '@perses-dev/components';\nimport Refresh from 'mdi-material-ui/Refresh';\nimport Clipboard from 'mdi-material-ui/ClipboardOutline';\n\nimport { TOOLTIP_TEXT } from '../../../constants';\nimport { useListVariablePluginValues, VARIABLE_TYPES } from '../variable-model';\nimport { VariableEditorState, getVariableDefinitionFromState, getInitialState } from './variable-editor-form-model';\n\nconst DEFAULT_MAX_PREVIEW_VALUES = 50;\n\n// TODO: Replace with proper validation library\nfunction getValidation(state: ReturnType<typeof getInitialState>) {\n /** Name validation */\n let name = null;\n if (!state.name) {\n name = 'Name is required';\n }\n // name can only contain alphanumeric characters and underscores and no spaces\n if (state.name && !/^[a-zA-Z0-9_-]+$/.test(state.name)) {\n name = 'Name can only contain alphanumeric characters, underscores, and dashes';\n }\n\n return {\n name,\n isValid: !name,\n };\n}\n\nconst SectionHeader = ({ children }: React.PropsWithChildren) => (\n <Typography pb={2} variant=\"subtitle1\">\n {children}\n </Typography>\n);\n\nfunction VariableListPreview({ definition, onRefresh }: { definition: ListVariableDefinition; onRefresh: () => void }) {\n const { data, isFetching, error } = useListVariablePluginValues(definition);\n const [maxValues, setMaxValues] = useState<number | undefined>(DEFAULT_MAX_PREVIEW_VALUES);\n const showAll = () => {\n setMaxValues(undefined);\n };\n let notShown = 0;\n\n if (data && data?.length > 0 && maxValues) {\n notShown = data.length - maxValues;\n }\n const errorMessage = (error as Error)?.message;\n\n return (\n <Box>\n <Stack direction={'row'} spacing={1} alignItems=\"center\">\n <Typography variant=\"caption\">Preview Values</Typography>\n <InfoTooltip description={TOOLTIP_TEXT.refreshVariableValues}>\n <IconButton onClick={onRefresh} size=\"small\">\n <Refresh />\n </IconButton>\n </InfoTooltip>\n <InfoTooltip description={TOOLTIP_TEXT.copyVariableValues}>\n <IconButton\n onClick={async () => {\n if (data?.length) {\n await navigator.clipboard.writeText(data.map((d) => d.label).join(','));\n alert('Copied to clipboard!');\n }\n }}\n size=\"small\"\n >\n <Clipboard />\n </IconButton>\n </InfoTooltip>\n </Stack>\n {errorMessage && <Alert severity=\"error\">{errorMessage}</Alert>}\n {isFetching && 'Loading...'}\n {data?.length === 0 && <Alert severity=\"info\">No results</Alert>}\n <>\n {data?.slice(0, maxValues).map((val) => (\n <Chip sx={{ mr: 1, mb: 1 }} size=\"small\" key={val.value} label={val.label} />\n ))}\n {notShown > 0 && (\n <Chip onClick={showAll} variant=\"outlined\" sx={{ mr: 1, mb: 1 }} size=\"small\" label={`+${notShown} more`} />\n )}\n </>\n </Box>\n );\n}\n\nexport function VariableEditForm({\n initialVariableDefinition,\n onChange,\n onCancel,\n}: {\n initialVariableDefinition: VariableDefinition;\n onChange: (def: VariableDefinition) => void;\n onCancel: () => void;\n}) {\n const [state, setState] = useImmer(getInitialState(initialVariableDefinition));\n const validation = useMemo(() => getValidation(state), [state]);\n\n const [previewKey, setPreviewKey] = React.useState(0);\n\n const refreshPreview = () => {\n setPreviewKey((prev) => prev + 1);\n };\n\n /** We use the `previewKey` that we increment to know when to explicitly update the\n * spec that will be used for preview. The reason why we do this is to avoid\n * having to re-fetch the values when the user is still editing the spec.\n */\n const previewSpec = useMemo(() => {\n return getVariableDefinitionFromState(state) as ListVariableDefinition;\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [previewKey]);\n\n return (\n <>\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n padding: (theme) => theme.spacing(1, 2),\n borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n }}\n >\n <Typography variant=\"h2\">Edit Variable</Typography>\n <Stack direction=\"row\" spacing={1} sx={{ marginLeft: 'auto' }}>\n <Button\n disabled={!validation.isValid}\n variant=\"contained\"\n onClick={() => {\n onChange(getVariableDefinitionFromState(state));\n }}\n >\n Update\n </Button>\n <Button\n color=\"secondary\"\n variant=\"outlined\"\n onClick={() => {\n onCancel();\n }}\n >\n Cancel\n </Button>\n </Stack>\n </Box>\n <Box padding={2} sx={{ overflowY: 'scroll' }}>\n <SectionHeader>General</SectionHeader>\n <Grid container spacing={2} mb={2}>\n <Grid item xs={6}>\n <TextField\n required\n error={!!validation.name}\n fullWidth\n label=\"Name\"\n value={state.name}\n helperText={validation.name}\n onChange={(v) => {\n setState((draft) => {\n draft.name = v.target.value as string;\n });\n }}\n />\n </Grid>\n <Grid item xs={6}>\n <FormControl fullWidth>\n <InputLabel id=\"variable-type-select-label\">Type</InputLabel>\n <Select\n labelId=\"variable-type-select-label\"\n id=\"variable-type-select\"\n label=\"Type\"\n value={state.kind}\n onChange={(v) => {\n setState((draft) => {\n draft.kind = v.target.value as VariableEditorState['kind'];\n });\n }}\n >\n {VARIABLE_TYPES.map((v) => (\n <MenuItem key={v.kind} value={v.kind}>\n {v.label}\n </MenuItem>\n ))}\n </Select>\n </FormControl>\n </Grid>\n <Grid item xs={6}>\n <TextField\n fullWidth\n label=\"Display Label\"\n value={state.title || ''}\n onChange={(v) => {\n setState((draft) => {\n draft.title = v.target.value;\n });\n }}\n />\n </Grid>\n <Grid item xs={12}>\n <TextField\n fullWidth\n label=\"Description\"\n value={state.description}\n onChange={(v) => {\n setState((draft) => {\n draft.description = v.target.value;\n });\n }}\n />\n </Grid>\n </Grid>\n\n {state.kind === 'TextVariable' && (\n <>\n <SectionHeader>Text Options</SectionHeader>\n <Grid container spacing={2} mb={2}>\n <Grid item xs={12}>\n <TextField\n label=\"Value\"\n value={state.textVariableFields.value}\n onChange={(v) => {\n setState((draft) => {\n draft.textVariableFields.value = v.target.value;\n });\n }}\n />\n </Grid>\n </Grid>\n </>\n )}\n\n {state.kind === 'ListVariable' && (\n <>\n <SectionHeader>List Options</SectionHeader>\n <Grid container spacing={2} mb={2}>\n <Grid item xs={6}>\n {/** Hack?: Cool technique to refresh the preview to simulate onBlur event */}\n <ClickAwayListener onClickAway={() => refreshPreview()}>\n <Box />\n </ClickAwayListener>\n {/** */}\n <PluginEditor\n width={500}\n pluginType=\"Variable\"\n pluginKindLabel=\"Source\"\n value={state.listVariableFields.plugin}\n onChange={(val) => {\n setState((draft) => {\n draft.listVariableFields.plugin = val;\n });\n }}\n />\n </Grid>\n\n {state.listVariableFields.plugin.kind && (\n <Grid item xs={12}>\n <TextField\n sx={{ mb: 1 }}\n label=\"Capturing Regexp Filter\"\n value={state.listVariableFields.capturing_regexp || ''}\n onChange={(e) => {\n setState((draft) => {\n draft.listVariableFields.capturing_regexp = e.target.value;\n });\n }}\n />\n <ErrorBoundary FallbackComponent={() => <div>Error previewing values</div>} resetKeys={[previewSpec]}>\n <VariableListPreview onRefresh={refreshPreview} definition={previewSpec} />\n </ErrorBoundary>\n </Grid>\n )}\n </Grid>\n\n <SectionHeader>Dropdown Options</SectionHeader>\n <Grid container spacing={1} mb={1}>\n <Grid item xs={12}>\n Allow Multiple\n <Switch\n checked={state.listVariableFields.allowMultiple}\n onChange={(e) => {\n setState((draft) => {\n draft.listVariableFields.allowMultiple = e.target.checked;\n });\n }}\n />\n </Grid>\n <Grid item xs={12}>\n Allow All\n <Switch\n checked={state.listVariableFields.allowAll}\n onChange={(e) => {\n setState((draft) => {\n draft.listVariableFields.allowAll = e.target.checked;\n });\n }}\n />\n </Grid>\n </Grid>\n </>\n )}\n </Box>\n </>\n );\n}\n"],"names":["React","useMemo","useState","Box","Typography","Switch","TextField","Grid","FormControl","InputLabel","MenuItem","Select","Button","Stack","Alert","Chip","IconButton","ClickAwayListener","useImmer","PluginEditor","ErrorBoundary","InfoTooltip","Refresh","Clipboard","TOOLTIP_TEXT","useListVariablePluginValues","VARIABLE_TYPES","getVariableDefinitionFromState","getInitialState","DEFAULT_MAX_PREVIEW_VALUES","getValidation","state","name","test","isValid","SectionHeader","children","pb","variant","VariableListPreview","definition","onRefresh","data","isFetching","error","maxValues","setMaxValues","showAll","undefined","notShown","length","errorMessage","message","direction","spacing","alignItems","description","refreshVariableValues","onClick","size","copyVariableValues","navigator","clipboard","writeText","map","d","label","join","alert","severity","slice","val","sx","mr","mb","value","VariableEditForm","initialVariableDefinition","onChange","onCancel","setState","validation","previewKey","setPreviewKey","refreshPreview","prev","previewSpec","display","padding","theme","borderBottom","palette","divider","marginLeft","disabled","color","overflowY","container","item","xs","required","fullWidth","helperText","v","draft","target","id","labelId","kind","title","textVariableFields","onClickAway","width","pluginType","pluginKindLabel","listVariableFields","plugin","capturing_regexp","e","FallbackComponent","div","resetKeys","checked","allowMultiple","allowAll"],"mappings":"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"}
1
+ {"version":3,"sources":["../../../../src/components/Variables/VariableEditorForm/VariableEditorForm.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React, { useMemo, useState } from 'react';\nimport {\n Box,\n Typography,\n Switch,\n TextField,\n Grid,\n FormControl,\n FormControlLabel,\n InputLabel,\n MenuItem,\n Select,\n Button,\n Stack,\n ClickAwayListener,\n Divider,\n} from '@mui/material';\nimport { useImmer } from 'use-immer';\nimport { PluginEditor } from '@perses-dev/plugin-system';\nimport { VariableDefinition, ListVariableDefinition } from '@perses-dev/core';\nimport { ErrorBoundary } from '@perses-dev/components';\n\nimport { VARIABLE_TYPES } from '../variable-model';\nimport { VariableListPreview, VariablePreview } from './VariablePreview';\nimport { VariableEditorState, getVariableDefinitionFromState, getInitialState } from './variable-editor-form-model';\n\n// TODO: Replace with proper validation library\nfunction getValidation(state: ReturnType<typeof getInitialState>) {\n /** Name validation */\n let name = null;\n if (!state.name) {\n name = 'Name is required';\n }\n // name can only contain alphanumeric characters and underscores and no spaces\n if (state.name && !/^[a-zA-Z0-9_-]+$/.test(state.name)) {\n name = 'Name can only contain alphanumeric characters, underscores, and dashes';\n }\n\n return {\n name,\n isValid: !name,\n };\n}\n\nfunction FallbackPreview() {\n return <div>Error previewing values</div>;\n}\n\ninterface VariableEditFormProps {\n initialVariableDefinition: VariableDefinition;\n onChange: (def: VariableDefinition) => void;\n onCancel: () => void;\n}\n\nexport function VariableEditForm(props: VariableEditFormProps) {\n const { initialVariableDefinition, onChange, onCancel } = props;\n const [state, setState] = useImmer(getInitialState(initialVariableDefinition));\n const validation = useMemo(() => getValidation(state), [state]);\n\n const [previewKey, setPreviewKey] = useState(0);\n\n const refreshPreview = () => {\n setPreviewKey((prev) => prev + 1);\n };\n\n /** We use the `previewKey` that we increment to know when to explicitly update the\n * spec that will be used for preview. The reason why we do this is to avoid\n * having to re-fetch the values when the user is still editing the spec.\n */\n const previewSpec = useMemo(() => {\n return getVariableDefinitionFromState(state) as ListVariableDefinition;\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [previewKey]);\n\n return (\n <>\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n padding: (theme) => theme.spacing(1, 2),\n borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n }}\n >\n <Typography variant=\"h2\">Edit Variable</Typography>\n <Stack direction=\"row\" spacing={1} sx={{ marginLeft: 'auto' }}>\n <Button\n disabled={!validation.isValid}\n variant=\"contained\"\n onClick={() => {\n onChange(getVariableDefinitionFromState(state));\n }}\n >\n Update\n </Button>\n <Button\n color=\"secondary\"\n variant=\"outlined\"\n onClick={() => {\n onCancel();\n }}\n >\n Cancel\n </Button>\n </Stack>\n </Box>\n <Box padding={2} sx={{ overflowY: 'scroll' }}>\n <Grid container spacing={2} mb={2}>\n <Grid item xs={8}>\n <TextField\n required\n error={!!validation.name}\n fullWidth\n label=\"Name\"\n value={state.name}\n helperText={validation.name}\n onChange={(v) => {\n setState((draft) => {\n draft.name = v.target.value;\n });\n }}\n />\n </Grid>\n <Grid item xs={4}>\n <TextField\n fullWidth\n label=\"Display Label\"\n value={state.title || ''}\n onChange={(v) => {\n setState((draft) => {\n draft.title = v.target.value;\n });\n }}\n />\n </Grid>\n <Grid item xs={8}>\n <TextField\n fullWidth\n label=\"Description\"\n value={state.description}\n onChange={(v) => {\n setState((draft) => {\n draft.description = v.target.value;\n });\n }}\n />\n </Grid>\n <Grid item xs={4}>\n <FormControl fullWidth>\n <InputLabel id=\"variable-type-select-label\">Type</InputLabel>\n <Select\n labelId=\"variable-type-select-label\"\n id=\"variable-type-select\"\n label=\"Type\"\n value={state.kind}\n onChange={(v) => {\n setState((draft) => {\n draft.kind = v.target.value as VariableEditorState['kind'];\n });\n }}\n >\n {VARIABLE_TYPES.map((v) => (\n <MenuItem key={v.kind} value={v.kind}>\n {v.label}\n </MenuItem>\n ))}\n </Select>\n </FormControl>\n </Grid>\n </Grid>\n\n <Divider />\n\n {state.kind === 'TextVariable' && (\n <>\n <Typography py={1} variant=\"subtitle1\">\n Text Options\n </Typography>\n <Stack spacing={2}>\n <Box>\n <VariablePreview values={[state.textVariableFields.value]} />\n </Box>\n <TextField\n label=\"Value\"\n value={state.textVariableFields.value}\n onChange={(v) => {\n setState((draft) => {\n draft.textVariableFields.value = v.target.value;\n });\n }}\n />\n </Stack>\n </>\n )}\n\n {state.kind === 'ListVariable' && (\n <>\n <Typography py={1} variant=\"subtitle1\">\n List Options\n </Typography>\n <Stack spacing={2} mb={2}>\n {state.listVariableFields.plugin.kind ? (\n <Box>\n <ErrorBoundary FallbackComponent={FallbackPreview} resetKeys={[previewSpec]}>\n <VariableListPreview definition={previewSpec} onRefresh={refreshPreview} />\n </ErrorBoundary>\n </Box>\n ) : (\n <VariablePreview isLoading={true} />\n )}\n\n <Stack>\n {/** Hack?: Cool technique to refresh the preview to simulate onBlur event */}\n <ClickAwayListener onClickAway={() => refreshPreview()}>\n <Box />\n </ClickAwayListener>\n {/** */}\n <PluginEditor\n width=\"100%\"\n pluginType=\"Variable\"\n pluginKindLabel=\"Source\"\n value={state.listVariableFields.plugin}\n onChange={(val) => {\n setState((draft) => {\n draft.listVariableFields.plugin = val;\n });\n }}\n />\n </Stack>\n\n <Stack>\n <TextField\n label=\"Capturing Regexp Filter\"\n value={state.listVariableFields.capturing_regexp || ''}\n onChange={(e) => {\n setState((draft) => {\n if (e.target.value) {\n // TODO: do a better fix, if empty string => it should skip the filter\n draft.listVariableFields.capturing_regexp = e.target.value;\n } else {\n draft.listVariableFields.capturing_regexp = undefined;\n }\n });\n }}\n helperText=\"Optional, if you want to filter on captured result.\"\n />\n </Stack>\n </Stack>\n\n <Divider />\n\n <Typography py={1} variant=\"subtitle1\">\n Dropdown Options\n </Typography>\n <Stack spacing=\"2\">\n <Stack>\n <FormControlLabel\n control={\n <Switch\n checked={state.listVariableFields.allowMultiple}\n onChange={(e) => {\n setState((draft) => {\n draft.listVariableFields.allowMultiple = e.target.checked;\n });\n }}\n />\n }\n label=\"Allow Multiple Values\"\n />\n <Typography variant=\"caption\">Enables multiple values to be selected at the same time</Typography>\n </Stack>\n <Stack>\n <FormControlLabel\n control={\n <Switch\n checked={state.listVariableFields.allowAll}\n onChange={(e) => {\n setState((draft) => {\n draft.listVariableFields.allowAll = e.target.checked;\n });\n }}\n />\n }\n label=\"Allow All option\"\n />\n <Typography variant=\"caption\">Enables an option to include all variable values</Typography>\n </Stack>\n </Stack>\n </>\n )}\n </Box>\n </>\n );\n}\n"],"names":["React","useMemo","useState","Box","Typography","Switch","TextField","Grid","FormControl","FormControlLabel","InputLabel","MenuItem","Select","Button","Stack","ClickAwayListener","Divider","useImmer","PluginEditor","ErrorBoundary","VARIABLE_TYPES","VariableListPreview","VariablePreview","getVariableDefinitionFromState","getInitialState","getValidation","state","name","test","isValid","FallbackPreview","div","VariableEditForm","props","initialVariableDefinition","onChange","onCancel","setState","validation","previewKey","setPreviewKey","refreshPreview","prev","previewSpec","sx","display","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","direction","marginLeft","disabled","onClick","color","overflowY","container","mb","item","xs","required","error","fullWidth","label","value","helperText","v","draft","target","title","description","id","labelId","kind","map","py","values","textVariableFields","listVariableFields","plugin","FallbackComponent","resetKeys","definition","onRefresh","isLoading","onClickAway","width","pluginType","pluginKindLabel","val","capturing_regexp","e","undefined","control","checked","allowMultiple","allowAll"],"mappings":"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"}
@@ -0,0 +1,16 @@
1
+ /// <reference types="react" />
2
+ import { ListVariableDefinition } from '@perses-dev/core';
3
+ interface VariablePreviewProps {
4
+ values?: string[];
5
+ onRefresh?: () => void;
6
+ isLoading?: boolean;
7
+ error?: string;
8
+ }
9
+ export declare function VariablePreview(props: VariablePreviewProps): JSX.Element;
10
+ interface VariableListPreviewProps {
11
+ definition: ListVariableDefinition;
12
+ onRefresh: () => void;
13
+ }
14
+ export declare function VariableListPreview(props: VariableListPreviewProps): JSX.Element;
15
+ export {};
16
+ //# sourceMappingURL=VariablePreview.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"VariablePreview.d.ts","sourceRoot":"","sources":["../../../../src/components/Variables/VariableEditorForm/VariablePreview.tsx"],"names":[],"mappings":";AAkBA,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAM1D,UAAU,oBAAoB;IAC5B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAuD1D;AAED,UAAU,wBAAwB;IAChC,UAAU,EAAE,sBAAsB,CAAC;IACnC,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,eAalE"}