@perses-dev/dashboards 0.15.0 → 0.17.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 (86) hide show
  1. package/dist/cjs/components/DashboardToolbar/DashboardToolbar.js +8 -12
  2. package/dist/cjs/components/DownloadButton/DownloadButton.js +109 -0
  3. package/dist/cjs/{utils/component-ids.js → components/DownloadButton/index.js} +11 -14
  4. package/dist/cjs/components/GridLayout/GridLayout.js +13 -2
  5. package/dist/cjs/components/GridLayout/GridTitle.js +11 -17
  6. package/dist/cjs/components/Panel/Panel.js +4 -2
  7. package/dist/cjs/components/Panel/PanelHeader.js +54 -50
  8. package/dist/cjs/components/PanelDrawer/PanelDrawer.js +1 -3
  9. package/dist/cjs/components/PanelDrawer/PanelDrawer.test.js +23 -0
  10. package/dist/cjs/components/TimeRangeControls/TimeRangeControls.test.js +3 -1
  11. package/dist/cjs/components/Variables/Variable.js +7 -46
  12. package/dist/cjs/components/Variables/VariableEditor.js +157 -126
  13. package/dist/cjs/components/Variables/VariableEditorForm/VariableEditorForm.js +353 -161
  14. package/dist/cjs/components/Variables/VariableList.js +15 -8
  15. package/dist/cjs/components/Variables/variable-model.js +74 -0
  16. package/dist/cjs/components/index.js +1 -0
  17. package/dist/cjs/context/DashboardProvider/panel-editor-slice.js +40 -15
  18. package/dist/cjs/context/DashboardProvider/panel-group-editor-slice.js +5 -9
  19. package/dist/cjs/context/DashboardProvider/panel-group-slice.js +16 -1
  20. package/dist/cjs/views/ViewDashboard/tests/panelGroups.test.js +15 -21
  21. package/dist/components/DashboardToolbar/DashboardToolbar.d.ts.map +1 -1
  22. package/dist/components/DashboardToolbar/DashboardToolbar.js +8 -12
  23. package/dist/components/DashboardToolbar/DashboardToolbar.js.map +1 -1
  24. package/dist/components/DownloadButton/DownloadButton.d.ts +3 -0
  25. package/dist/components/DownloadButton/DownloadButton.d.ts.map +1 -0
  26. package/dist/components/DownloadButton/DownloadButton.js +60 -0
  27. package/dist/components/DownloadButton/DownloadButton.js.map +1 -0
  28. package/dist/components/DownloadButton/index.d.ts +2 -0
  29. package/dist/components/DownloadButton/index.d.ts.map +1 -0
  30. package/dist/{utils/component-ids.js → components/DownloadButton/index.js} +2 -14
  31. package/dist/components/DownloadButton/index.js.map +1 -0
  32. package/dist/components/GridLayout/GridLayout.d.ts.map +1 -1
  33. package/dist/components/GridLayout/GridLayout.js +13 -2
  34. package/dist/components/GridLayout/GridLayout.js.map +1 -1
  35. package/dist/components/GridLayout/GridTitle.d.ts.map +1 -1
  36. package/dist/components/GridLayout/GridTitle.js +11 -17
  37. package/dist/components/GridLayout/GridTitle.js.map +1 -1
  38. package/dist/components/Panel/Panel.d.ts.map +1 -1
  39. package/dist/components/Panel/Panel.js +4 -2
  40. package/dist/components/Panel/Panel.js.map +1 -1
  41. package/dist/components/Panel/PanelHeader.d.ts.map +1 -1
  42. package/dist/components/Panel/PanelHeader.js +54 -50
  43. package/dist/components/Panel/PanelHeader.js.map +1 -1
  44. package/dist/components/PanelDrawer/PanelDrawer.js +1 -3
  45. package/dist/components/PanelDrawer/PanelDrawer.js.map +1 -1
  46. package/dist/components/PanelDrawer/PanelDrawer.test.js +23 -0
  47. package/dist/components/PanelDrawer/PanelDrawer.test.js.map +1 -1
  48. package/dist/components/TimeRangeControls/TimeRangeControls.test.js +4 -2
  49. package/dist/components/TimeRangeControls/TimeRangeControls.test.js.map +1 -1
  50. package/dist/components/Variables/Variable.d.ts.map +1 -1
  51. package/dist/components/Variables/Variable.js +8 -47
  52. package/dist/components/Variables/Variable.js.map +1 -1
  53. package/dist/components/Variables/VariableEditor.d.ts.map +1 -1
  54. package/dist/components/Variables/VariableEditor.js +159 -128
  55. package/dist/components/Variables/VariableEditor.js.map +1 -1
  56. package/dist/components/Variables/VariableEditorForm/VariableEditorForm.d.ts.map +1 -1
  57. package/dist/components/Variables/VariableEditorForm/VariableEditorForm.js +315 -162
  58. package/dist/components/Variables/VariableEditorForm/VariableEditorForm.js.map +1 -1
  59. package/dist/components/Variables/VariableEditorForm/variable-editor-form-model.js.map +1 -1
  60. package/dist/components/Variables/VariableList.d.ts.map +1 -1
  61. package/dist/components/Variables/VariableList.js +15 -8
  62. package/dist/components/Variables/VariableList.js.map +1 -1
  63. package/dist/components/Variables/variable-model.d.ts +8 -0
  64. package/dist/components/Variables/variable-model.d.ts.map +1 -0
  65. package/dist/components/Variables/variable-model.js +64 -0
  66. package/dist/components/Variables/variable-model.js.map +1 -0
  67. package/dist/components/index.d.ts +1 -0
  68. package/dist/components/index.d.ts.map +1 -1
  69. package/dist/components/index.js +1 -0
  70. package/dist/components/index.js.map +1 -1
  71. package/dist/context/DashboardProvider/panel-editor-slice.d.ts.map +1 -1
  72. package/dist/context/DashboardProvider/panel-editor-slice.js +40 -15
  73. package/dist/context/DashboardProvider/panel-editor-slice.js.map +1 -1
  74. package/dist/context/DashboardProvider/panel-group-editor-slice.d.ts.map +1 -1
  75. package/dist/context/DashboardProvider/panel-group-editor-slice.js +5 -9
  76. package/dist/context/DashboardProvider/panel-group-editor-slice.js.map +1 -1
  77. package/dist/context/DashboardProvider/panel-group-slice.d.ts +9 -0
  78. package/dist/context/DashboardProvider/panel-group-slice.d.ts.map +1 -1
  79. package/dist/context/DashboardProvider/panel-group-slice.js +17 -0
  80. package/dist/context/DashboardProvider/panel-group-slice.js.map +1 -1
  81. package/dist/views/ViewDashboard/tests/panelGroups.test.js +15 -21
  82. package/dist/views/ViewDashboard/tests/panelGroups.test.js.map +1 -1
  83. package/package.json +4 -4
  84. package/dist/utils/component-ids.d.ts +0 -8
  85. package/dist/utils/component-ids.d.ts.map +0 -1
  86. package/dist/utils/component-ids.js.map +0 -1
package/dist/cjs/components/Variables/VariableEditor.js CHANGED
@@ -32,9 +32,24 @@ function _interopRequireDefault(obj) {
32
32
  default: obj
33
33
  };
34
34
  }
35
+ function getValidation(variableDefinitions) {
36
+ const errors = [];
37
+ /** Variable names must be unique */ const variableNames = variableDefinitions.map((variableDefinition)=>variableDefinition.spec.name);
38
+ const uniqueVariableNames = new Set(variableNames);
39
+ if (variableNames.length !== uniqueVariableNames.size) {
40
+ errors.push('Variable names must be unique');
41
+ }
42
+ return {
43
+ errors: errors,
44
+ isValid: errors.length === 0
45
+ };
46
+ }
35
47
  function VariableEditor(props) {
36
48
  const [variableDefinitions, setVariableDefinitions] = (0, _useImmer.useImmer)(props.variableDefinitions);
37
49
  const [variableEditIdx, setVariableEditIdx] = (0, _react.useState)(null);
50
+ const validation = (0, _react.useMemo)(()=>getValidation(variableDefinitions), [
51
+ variableDefinitions
52
+ ]);
38
53
  const currentEditingVariableDefinition = typeof variableEditIdx === 'number' && variableDefinitions[variableEditIdx];
39
54
  const removeVariable = (index)=>{
40
55
  setVariableDefinitions((draft)=>{
@@ -88,150 +103,166 @@ function VariableEditor(props) {
88
103
  }
89
104
  });
90
105
  };
91
- return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
92
- p: 4,
106
+ return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
93
107
  children: [
94
- currentEditingVariableDefinition && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
95
- children: [
96
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
97
- variant: "h3",
98
- mb: 2,
99
- children: "Edit Variable"
100
- }),
101
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variableEditorForm.VariableEditForm, {
102
- initialVariableDefinition: currentEditingVariableDefinition,
103
- onChange: (definition)=>{
104
- setVariableDefinitions((draft)=>{
105
- draft[variableEditIdx] = definition;
106
- setVariableEditIdx(null);
107
- });
108
- },
109
- onCancel: ()=>setVariableEditIdx(null)
110
- })
111
- ]
108
+ currentEditingVariableDefinition && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variableEditorForm.VariableEditForm, {
109
+ initialVariableDefinition: currentEditingVariableDefinition,
110
+ onChange: (definition)=>{
111
+ setVariableDefinitions((draft)=>{
112
+ draft[variableEditIdx] = definition;
113
+ setVariableEditIdx(null);
114
+ });
115
+ },
116
+ onCancel: ()=>setVariableEditIdx(null)
112
117
  }),
113
118
  !currentEditingVariableDefinition && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
114
119
  children: [
115
- /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
116
- direction: "row",
117
- spacing: 1,
118
- justifyContent: "end",
120
+ /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
121
+ sx: {
122
+ display: 'flex',
123
+ alignItems: 'center',
124
+ padding: (theme)=>theme.spacing(1, 2),
125
+ borderBottom: (theme)=>`1px solid ${theme.palette.grey[100]}`
126
+ },
119
127
  children: [
120
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
121
- disabled: props.variableDefinitions === variableDefinitions,
122
- variant: "contained",
123
- onClick: ()=>{
124
- props.onChange(variableDefinitions);
125
- },
126
- children: "Apply"
128
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
129
+ variant: "h2",
130
+ children: "Template Variables"
127
131
  }),
128
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
129
- variant: "outlined",
130
- onClick: ()=>{
131
- props.onCancel();
132
- },
133
- children: "Cancel"
132
+ /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
133
+ direction: "row",
134
+ spacing: 1,
135
+ marginLeft: "auto",
136
+ children: [
137
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
138
+ disabled: props.variableDefinitions === variableDefinitions || !validation.isValid,
139
+ variant: "contained",
140
+ onClick: ()=>{
141
+ props.onChange(variableDefinitions);
142
+ },
143
+ children: "Apply"
144
+ }),
145
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
146
+ variant: "outlined",
147
+ onClick: ()=>{
148
+ props.onCancel();
149
+ },
150
+ children: "Cancel"
151
+ })
152
+ ]
134
153
  })
135
154
  ]
136
155
  }),
137
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
138
- variant: "h3",
139
- mb: 2,
140
- children: "Variable List"
141
- }),
142
- /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
143
- spacing: 2,
156
+ /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
157
+ padding: 2,
158
+ sx: {
159
+ overflowY: 'scroll'
160
+ },
144
161
  children: [
145
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableContainer, {
146
- component: _material.Paper,
147
- children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Table, {
148
- sx: {
149
- minWidth: 650
150
- },
151
- "aria-label": "simple table",
152
- children: [
153
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableHead, {
154
- children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.TableRow, {
155
- children: [
156
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
157
- children: "Visibility"
158
- }),
159
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
160
- children: "Variable Name"
161
- }),
162
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
163
- children: "Variable Type"
164
- }),
165
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
166
- align: "right",
167
- children: "Action"
168
- })
169
- ]
170
- })
171
- }),
172
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableBody, {
173
- children: variableDefinitions.map((v, idx)=>{
174
- var ref;
175
- /*#__PURE__*/ return (0, _jsxRuntime.jsxs)(_material.TableRow, {
176
- children: [
177
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
178
- component: "th",
179
- scope: "row",
180
- children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Switch, {
181
- checked: ((ref = v.spec.display) === null || ref === void 0 ? void 0 : ref.hidden) !== true,
182
- onChange: (e)=>{
183
- toggleVariableVisibility(idx, e.target.checked);
184
- }
162
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
163
+ variant: "h3",
164
+ mb: 2,
165
+ children: "Variable List"
166
+ }),
167
+ /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
168
+ spacing: 2,
169
+ children: [
170
+ !validation.isValid && validation.errors.map((error)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Alert, {
171
+ severity: "error",
172
+ children: error
173
+ }, error)),
174
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableContainer, {
175
+ component: _material.Paper,
176
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Table, {
177
+ sx: {
178
+ minWidth: 650
179
+ },
180
+ "aria-label": "simple table",
181
+ children: [
182
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableHead, {
183
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.TableRow, {
184
+ children: [
185
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
186
+ children: "Visibility"
187
+ }),
188
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
189
+ children: "Variable Name"
190
+ }),
191
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
192
+ children: "Variable Type"
193
+ }),
194
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
195
+ align: "right",
196
+ children: "Action"
185
197
  })
186
- }),
187
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
188
- component: "th",
189
- scope: "row",
190
- sx: {
191
- fontWeight: 'bold'
192
- },
193
- children: v.spec.name
194
- }),
195
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
196
- children: v.kind
197
- }),
198
- /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.TableCell, {
199
- align: "right",
198
+ ]
199
+ })
200
+ }),
201
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableBody, {
202
+ children: variableDefinitions.map((v, idx)=>{
203
+ var ref;
204
+ /*#__PURE__*/ return (0, _jsxRuntime.jsxs)(_material.TableRow, {
200
205
  children: [
201
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
202
- onClick: ()=>changeVariableOrder(idx, 'up'),
203
- disabled: idx === 0,
204
- children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_arrowUp.default, {})
206
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
207
+ component: "th",
208
+ scope: "row",
209
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Switch, {
210
+ checked: ((ref = v.spec.display) === null || ref === void 0 ? void 0 : ref.hidden) !== true,
211
+ onChange: (e)=>{
212
+ toggleVariableVisibility(idx, e.target.checked);
213
+ }
214
+ })
205
215
  }),
206
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
207
- onClick: ()=>changeVariableOrder(idx, 'down'),
208
- disabled: idx === variableDefinitions.length - 1,
209
- children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_arrowDown.default, {})
216
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
217
+ component: "th",
218
+ scope: "row",
219
+ sx: {
220
+ fontWeight: 'bold'
221
+ },
222
+ children: v.spec.name
210
223
  }),
211
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
212
- onClick: ()=>setVariableEditIdx(idx),
213
- children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencil.default, {})
224
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
225
+ children: v.kind
214
226
  }),
215
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
216
- onClick: ()=>removeVariable(idx),
217
- children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_trashCan.default, {})
227
+ /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.TableCell, {
228
+ align: "right",
229
+ children: [
230
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
231
+ onClick: ()=>changeVariableOrder(idx, 'up'),
232
+ disabled: idx === 0,
233
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_arrowUp.default, {})
234
+ }),
235
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
236
+ onClick: ()=>changeVariableOrder(idx, 'down'),
237
+ disabled: idx === variableDefinitions.length - 1,
238
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_arrowDown.default, {})
239
+ }),
240
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
241
+ onClick: ()=>setVariableEditIdx(idx),
242
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencil.default, {})
243
+ }),
244
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
245
+ onClick: ()=>removeVariable(idx),
246
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_trashCan.default, {})
247
+ })
248
+ ]
218
249
  })
219
250
  ]
220
- })
221
- ]
222
- }, v.spec.name);
223
- })
251
+ }, v.spec.name);
252
+ })
253
+ })
254
+ ]
224
255
  })
225
- ]
226
- })
227
- }),
228
- /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
229
- display: "flex",
230
- children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
231
- onClick: addVariable,
232
- variant: "contained",
233
- children: "Add New Variable"
234
- })
256
+ }),
257
+ /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
258
+ display: "flex",
259
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
260
+ onClick: addVariable,
261
+ variant: "contained",
262
+ children: "Add New Variable"
263
+ })
264
+ })
265
+ ]
235
266
  })
236
267
  ]
237
268
  })