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