@perses-dev/dashboards 0.16.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.
- package/dist/cjs/components/DashboardToolbar/DashboardToolbar.js +6 -12
- package/dist/cjs/components/GridLayout/GridLayout.js +13 -2
- package/dist/cjs/components/GridLayout/GridTitle.js +3 -5
- package/dist/cjs/components/Panel/PanelHeader.js +1 -1
- package/dist/cjs/components/PanelDrawer/PanelDrawer.js +1 -3
- package/dist/cjs/components/Variables/Variable.js +2 -46
- package/dist/cjs/components/Variables/VariableEditor.js +142 -130
- package/dist/cjs/components/Variables/VariableEditorForm/VariableEditorForm.js +303 -167
- package/dist/cjs/components/Variables/VariableList.js +10 -8
- package/dist/cjs/components/Variables/variable-model.js +74 -0
- package/dist/components/DashboardToolbar/DashboardToolbar.js +6 -12
- package/dist/components/DashboardToolbar/DashboardToolbar.js.map +1 -1
- package/dist/components/GridLayout/GridLayout.d.ts.map +1 -1
- package/dist/components/GridLayout/GridLayout.js +13 -2
- package/dist/components/GridLayout/GridLayout.js.map +1 -1
- package/dist/components/GridLayout/GridTitle.js +3 -5
- package/dist/components/GridLayout/GridTitle.js.map +1 -1
- package/dist/components/Panel/PanelHeader.js +1 -1
- package/dist/components/Panel/PanelHeader.js.map +1 -1
- package/dist/components/PanelDrawer/PanelDrawer.js +1 -3
- package/dist/components/PanelDrawer/PanelDrawer.js.map +1 -1
- package/dist/components/Variables/Variable.d.ts.map +1 -1
- package/dist/components/Variables/Variable.js +3 -47
- package/dist/components/Variables/Variable.js.map +1 -1
- package/dist/components/Variables/VariableEditor.d.ts.map +1 -1
- package/dist/components/Variables/VariableEditor.js +142 -130
- package/dist/components/Variables/VariableEditor.js.map +1 -1
- package/dist/components/Variables/VariableEditorForm/VariableEditorForm.d.ts.map +1 -1
- package/dist/components/Variables/VariableEditorForm/VariableEditorForm.js +300 -169
- package/dist/components/Variables/VariableEditorForm/VariableEditorForm.js.map +1 -1
- package/dist/components/Variables/VariableEditorForm/variable-editor-form-model.js.map +1 -1
- package/dist/components/Variables/VariableList.d.ts.map +1 -1
- package/dist/components/Variables/VariableList.js +10 -8
- package/dist/components/Variables/VariableList.js.map +1 -1
- package/dist/components/Variables/variable-model.d.ts +8 -0
- package/dist/components/Variables/variable-model.d.ts.map +1 -0
- package/dist/components/Variables/variable-model.js +64 -0
- package/dist/components/Variables/variable-model.js.map +1 -0
- package/package.json +4 -4
|
@@ -23,7 +23,15 @@ const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
|
|
23
23
|
const _material = require("@mui/material");
|
|
24
24
|
const _useImmer = require("use-immer");
|
|
25
25
|
const _pluginSystem = require("@perses-dev/plugin-system");
|
|
26
|
+
const _components = require("@perses-dev/components");
|
|
27
|
+
const _refresh = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Refresh"));
|
|
28
|
+
const _variableModel = require("../variable-model");
|
|
26
29
|
const _variableEditorFormModel = require("./variable-editor-form-model");
|
|
30
|
+
function _interopRequireDefault(obj) {
|
|
31
|
+
return obj && obj.__esModule ? obj : {
|
|
32
|
+
default: obj
|
|
33
|
+
};
|
|
34
|
+
}
|
|
27
35
|
function _getRequireWildcardCache(nodeInterop) {
|
|
28
36
|
if (typeof WeakMap !== "function") return null;
|
|
29
37
|
var cacheBabelInterop = new WeakMap();
|
|
@@ -67,6 +75,7 @@ const VARIABLE_TYPES = [
|
|
|
67
75
|
'ListVariable',
|
|
68
76
|
'TextVariable'
|
|
69
77
|
];
|
|
78
|
+
const DEFAULT_MAX_PREVIEW_VALUES = 50;
|
|
70
79
|
// TODO: Replace with proper validation library
|
|
71
80
|
function getValidation(state) {
|
|
72
81
|
/** Name validation */ let name = null;
|
|
@@ -87,209 +96,336 @@ const SectionHeader = ({ children })=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_mater
|
|
|
87
96
|
variant: "subtitle1",
|
|
88
97
|
children: children
|
|
89
98
|
});
|
|
90
|
-
function
|
|
91
|
-
const
|
|
92
|
-
const
|
|
93
|
-
|
|
94
|
-
|
|
99
|
+
function VariableListPreview({ definition }) {
|
|
100
|
+
const { data , isFetching , error } = (0, _variableModel.useListVariablePluginValues)(definition);
|
|
101
|
+
const [maxValues, setMaxValues] = (0, _react.useState)(DEFAULT_MAX_PREVIEW_VALUES);
|
|
102
|
+
const showAll = ()=>{
|
|
103
|
+
setMaxValues(undefined);
|
|
104
|
+
};
|
|
105
|
+
let notShown = 0;
|
|
106
|
+
if (data && (data === null || data === void 0 ? void 0 : data.length) > 0 && maxValues) {
|
|
107
|
+
notShown = data.length - maxValues;
|
|
108
|
+
}
|
|
109
|
+
const errorMessage = error === null || error === void 0 ? void 0 : error.message;
|
|
95
110
|
return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
|
|
96
111
|
children: [
|
|
97
|
-
/*#__PURE__*/ (0, _jsxRuntime.jsx)(
|
|
98
|
-
|
|
112
|
+
errorMessage && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Alert, {
|
|
113
|
+
severity: "error",
|
|
114
|
+
children: errorMessage
|
|
115
|
+
}),
|
|
116
|
+
isFetching && 'Loading...',
|
|
117
|
+
(data === null || data === void 0 ? void 0 : data.length) === 0 && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Alert, {
|
|
118
|
+
severity: "info",
|
|
119
|
+
children: "No results"
|
|
99
120
|
}),
|
|
100
|
-
/*#__PURE__*/ (0, _jsxRuntime.jsxs)(
|
|
101
|
-
container: true,
|
|
102
|
-
spacing: 2,
|
|
103
|
-
mb: 2,
|
|
121
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
104
122
|
children: [
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
|
|
123
|
-
item: true,
|
|
124
|
-
xs: 6,
|
|
125
|
-
children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.FormControl, {
|
|
126
|
-
fullWidth: true,
|
|
127
|
-
children: [
|
|
128
|
-
/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.InputLabel, {
|
|
129
|
-
id: "variable-type-select-label",
|
|
130
|
-
children: "Type"
|
|
131
|
-
}),
|
|
132
|
-
/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Select, {
|
|
133
|
-
labelId: "variable-type-select-label",
|
|
134
|
-
id: "variable-type-select",
|
|
135
|
-
label: "Type",
|
|
136
|
-
value: state.kind,
|
|
137
|
-
onChange: (v)=>{
|
|
138
|
-
setState((draft)=>{
|
|
139
|
-
draft.kind = v.target.value;
|
|
140
|
-
});
|
|
141
|
-
},
|
|
142
|
-
children: VARIABLE_TYPES.map((v)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
|
|
143
|
-
value: v,
|
|
144
|
-
children: v
|
|
145
|
-
}, v))
|
|
146
|
-
})
|
|
147
|
-
]
|
|
148
|
-
})
|
|
149
|
-
}),
|
|
150
|
-
/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
|
|
151
|
-
item: true,
|
|
152
|
-
xs: 6,
|
|
153
|
-
children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
|
|
154
|
-
fullWidth: true,
|
|
155
|
-
label: "Label",
|
|
156
|
-
value: state.title,
|
|
157
|
-
onChange: (v)=>{
|
|
158
|
-
setState((draft)=>{
|
|
159
|
-
draft.title = v.target.value;
|
|
160
|
-
});
|
|
161
|
-
}
|
|
162
|
-
})
|
|
163
|
-
}),
|
|
164
|
-
/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
|
|
165
|
-
item: true,
|
|
166
|
-
xs: 12,
|
|
167
|
-
children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
|
|
168
|
-
fullWidth: true,
|
|
169
|
-
label: "Description",
|
|
170
|
-
value: state.description,
|
|
171
|
-
onChange: (v)=>{
|
|
172
|
-
setState((draft)=>{
|
|
173
|
-
draft.description = v.target.value;
|
|
174
|
-
});
|
|
175
|
-
}
|
|
176
|
-
})
|
|
123
|
+
data === null || data === void 0 ? void 0 : data.slice(0, maxValues).map((val)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Chip, {
|
|
124
|
+
sx: {
|
|
125
|
+
mr: 1,
|
|
126
|
+
mb: 1
|
|
127
|
+
},
|
|
128
|
+
size: "small",
|
|
129
|
+
label: val.label
|
|
130
|
+
}, val.value)),
|
|
131
|
+
notShown > 0 && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Chip, {
|
|
132
|
+
onClick: showAll,
|
|
133
|
+
variant: "outlined",
|
|
134
|
+
sx: {
|
|
135
|
+
mr: 1,
|
|
136
|
+
mb: 1
|
|
137
|
+
},
|
|
138
|
+
size: "small",
|
|
139
|
+
label: `+${notShown} more`
|
|
177
140
|
})
|
|
178
141
|
]
|
|
179
|
-
})
|
|
180
|
-
|
|
142
|
+
})
|
|
143
|
+
]
|
|
144
|
+
});
|
|
145
|
+
}
|
|
146
|
+
function VariableEditForm({ initialVariableDefinition , onChange , onCancel }) {
|
|
147
|
+
const [state, setState] = (0, _useImmer.useImmer)((0, _variableEditorFormModel.getInitialState)(initialVariableDefinition));
|
|
148
|
+
const validation = (0, _react.useMemo)(()=>getValidation(state), [
|
|
149
|
+
state
|
|
150
|
+
]);
|
|
151
|
+
const [previewKey, setPreviewKey] = _react.default.useState(0);
|
|
152
|
+
const refreshPreview = ()=>{
|
|
153
|
+
setPreviewKey((prev)=>prev + 1);
|
|
154
|
+
};
|
|
155
|
+
/** We use the `previewKey` that we increment to know when to explicity update the
|
|
156
|
+
* spec that will be used for preview. The reason why we do this is to avoid
|
|
157
|
+
* having to re-fetch the values when the user is still editing the spec.
|
|
158
|
+
*/ const previewSpec = (0, _react.useMemo)(()=>{
|
|
159
|
+
return (0, _variableEditorFormModel.getVariableDefinitionFromState)(state);
|
|
160
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
161
|
+
}, [
|
|
162
|
+
previewKey
|
|
163
|
+
]);
|
|
164
|
+
return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
165
|
+
children: [
|
|
166
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
|
|
167
|
+
sx: {
|
|
168
|
+
display: 'flex',
|
|
169
|
+
alignItems: 'center',
|
|
170
|
+
padding: (theme)=>theme.spacing(1, 2),
|
|
171
|
+
borderBottom: (theme)=>`1px solid ${theme.palette.grey[100]}`
|
|
172
|
+
},
|
|
181
173
|
children: [
|
|
182
|
-
/*#__PURE__*/ (0, _jsxRuntime.jsx)(
|
|
183
|
-
|
|
174
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
|
|
175
|
+
variant: "h2",
|
|
176
|
+
children: "Template Variables / Edit Variable"
|
|
184
177
|
}),
|
|
185
|
-
/*#__PURE__*/ (0, _jsxRuntime.
|
|
186
|
-
|
|
187
|
-
spacing:
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
178
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
|
|
179
|
+
direction: "row",
|
|
180
|
+
spacing: 1,
|
|
181
|
+
sx: {
|
|
182
|
+
marginLeft: 'auto'
|
|
183
|
+
},
|
|
184
|
+
children: [
|
|
185
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
|
|
186
|
+
disabled: !validation.isValid,
|
|
187
|
+
variant: "contained",
|
|
188
|
+
onClick: ()=>{
|
|
189
|
+
onChange((0, _variableEditorFormModel.getVariableDefinitionFromState)(state));
|
|
190
|
+
},
|
|
191
|
+
children: "Update"
|
|
192
|
+
}),
|
|
193
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
|
|
194
|
+
variant: "outlined",
|
|
195
|
+
onClick: ()=>{
|
|
196
|
+
onCancel();
|
|
197
|
+
},
|
|
198
|
+
children: "Cancel"
|
|
200
199
|
})
|
|
201
|
-
|
|
200
|
+
]
|
|
202
201
|
})
|
|
203
202
|
]
|
|
204
203
|
}),
|
|
205
|
-
|
|
204
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
|
|
205
|
+
padding: 2,
|
|
206
|
+
sx: {
|
|
207
|
+
overflowY: 'scroll'
|
|
208
|
+
},
|
|
206
209
|
children: [
|
|
207
|
-
/*#__PURE__*/ (0, _jsxRuntime.jsx)(
|
|
208
|
-
|
|
209
|
-
}),
|
|
210
|
-
/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
|
|
211
|
-
container: true,
|
|
212
|
-
spacing: 2,
|
|
210
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
|
|
211
|
+
variant: "h3",
|
|
213
212
|
mb: 2,
|
|
214
|
-
children:
|
|
215
|
-
item: true,
|
|
216
|
-
xs: 6,
|
|
217
|
-
children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.PluginEditor, {
|
|
218
|
-
width: 500,
|
|
219
|
-
pluginType: "Variable",
|
|
220
|
-
pluginKindLabel: "Source",
|
|
221
|
-
value: state.listVariableFields.plugin,
|
|
222
|
-
onChange: (val)=>{
|
|
223
|
-
setState((draft)=>{
|
|
224
|
-
draft.listVariableFields.plugin = val;
|
|
225
|
-
});
|
|
226
|
-
}
|
|
227
|
-
})
|
|
228
|
-
})
|
|
213
|
+
children: "Edit Variable"
|
|
229
214
|
}),
|
|
230
215
|
/*#__PURE__*/ (0, _jsxRuntime.jsx)(SectionHeader, {
|
|
231
|
-
children: "
|
|
216
|
+
children: "General"
|
|
232
217
|
}),
|
|
233
218
|
/*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Grid, {
|
|
234
219
|
container: true,
|
|
235
|
-
spacing:
|
|
236
|
-
mb:
|
|
220
|
+
spacing: 2,
|
|
221
|
+
mb: 2,
|
|
237
222
|
children: [
|
|
238
|
-
/*#__PURE__*/ (0, _jsxRuntime.
|
|
223
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
|
|
224
|
+
item: true,
|
|
225
|
+
xs: 6,
|
|
226
|
+
children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
|
|
227
|
+
required: true,
|
|
228
|
+
error: !!validation.name,
|
|
229
|
+
fullWidth: true,
|
|
230
|
+
label: "Name",
|
|
231
|
+
value: state.name,
|
|
232
|
+
helperText: validation.name,
|
|
233
|
+
onChange: (v)=>{
|
|
234
|
+
setState((draft)=>{
|
|
235
|
+
draft.name = v.target.value;
|
|
236
|
+
});
|
|
237
|
+
}
|
|
238
|
+
})
|
|
239
|
+
}),
|
|
240
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
|
|
241
|
+
item: true,
|
|
242
|
+
xs: 6,
|
|
243
|
+
children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.FormControl, {
|
|
244
|
+
fullWidth: true,
|
|
245
|
+
children: [
|
|
246
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.InputLabel, {
|
|
247
|
+
id: "variable-type-select-label",
|
|
248
|
+
children: "Type"
|
|
249
|
+
}),
|
|
250
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Select, {
|
|
251
|
+
labelId: "variable-type-select-label",
|
|
252
|
+
id: "variable-type-select",
|
|
253
|
+
label: "Type",
|
|
254
|
+
value: state.kind,
|
|
255
|
+
onChange: (v)=>{
|
|
256
|
+
setState((draft)=>{
|
|
257
|
+
draft.kind = v.target.value;
|
|
258
|
+
});
|
|
259
|
+
},
|
|
260
|
+
children: VARIABLE_TYPES.map((v)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
|
|
261
|
+
value: v,
|
|
262
|
+
children: v
|
|
263
|
+
}, v))
|
|
264
|
+
})
|
|
265
|
+
]
|
|
266
|
+
})
|
|
267
|
+
}),
|
|
268
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
|
|
269
|
+
item: true,
|
|
270
|
+
xs: 6,
|
|
271
|
+
children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
|
|
272
|
+
fullWidth: true,
|
|
273
|
+
label: "Label",
|
|
274
|
+
value: state.title,
|
|
275
|
+
onChange: (v)=>{
|
|
276
|
+
setState((draft)=>{
|
|
277
|
+
draft.title = v.target.value;
|
|
278
|
+
});
|
|
279
|
+
}
|
|
280
|
+
})
|
|
281
|
+
}),
|
|
282
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
|
|
239
283
|
item: true,
|
|
240
284
|
xs: 12,
|
|
241
|
-
children:
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
285
|
+
children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
|
|
286
|
+
fullWidth: true,
|
|
287
|
+
label: "Description",
|
|
288
|
+
value: state.description,
|
|
289
|
+
onChange: (v)=>{
|
|
290
|
+
setState((draft)=>{
|
|
291
|
+
draft.description = v.target.value;
|
|
292
|
+
});
|
|
293
|
+
}
|
|
294
|
+
})
|
|
295
|
+
})
|
|
296
|
+
]
|
|
297
|
+
}),
|
|
298
|
+
state.kind === 'TextVariable' && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
299
|
+
children: [
|
|
300
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsx)(SectionHeader, {
|
|
301
|
+
children: "Text Options"
|
|
302
|
+
}),
|
|
303
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
|
|
304
|
+
container: true,
|
|
305
|
+
spacing: 2,
|
|
306
|
+
mb: 2,
|
|
307
|
+
children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
|
|
308
|
+
item: true,
|
|
309
|
+
xs: 12,
|
|
310
|
+
children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
|
|
311
|
+
label: "Value",
|
|
312
|
+
value: state.textVariableFields.value,
|
|
313
|
+
onChange: (v)=>{
|
|
246
314
|
setState((draft)=>{
|
|
247
|
-
draft.
|
|
315
|
+
draft.textVariableFields.value = v.target.value;
|
|
248
316
|
});
|
|
249
317
|
}
|
|
250
318
|
})
|
|
319
|
+
})
|
|
320
|
+
})
|
|
321
|
+
]
|
|
322
|
+
}),
|
|
323
|
+
state.kind === 'ListVariable' && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
324
|
+
children: [
|
|
325
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsx)(SectionHeader, {
|
|
326
|
+
children: "List Options"
|
|
327
|
+
}),
|
|
328
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Grid, {
|
|
329
|
+
container: true,
|
|
330
|
+
spacing: 2,
|
|
331
|
+
mb: 2,
|
|
332
|
+
children: [
|
|
333
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Grid, {
|
|
334
|
+
item: true,
|
|
335
|
+
xs: 6,
|
|
336
|
+
children: [
|
|
337
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.ClickAwayListener, {
|
|
338
|
+
onClickAway: ()=>refreshPreview(),
|
|
339
|
+
children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {})
|
|
340
|
+
}),
|
|
341
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.PluginEditor, {
|
|
342
|
+
width: 500,
|
|
343
|
+
pluginType: "Variable",
|
|
344
|
+
pluginKindLabel: "Source",
|
|
345
|
+
value: state.listVariableFields.plugin,
|
|
346
|
+
onChange: (val)=>{
|
|
347
|
+
setState((draft)=>{
|
|
348
|
+
draft.listVariableFields.plugin = val;
|
|
349
|
+
});
|
|
350
|
+
}
|
|
351
|
+
})
|
|
352
|
+
]
|
|
353
|
+
}),
|
|
354
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
|
|
355
|
+
item: true,
|
|
356
|
+
xs: 12,
|
|
357
|
+
children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_components.ErrorBoundary, {
|
|
358
|
+
FallbackComponent: ()=>/*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
|
|
359
|
+
children: "Error"
|
|
360
|
+
}),
|
|
361
|
+
children: [
|
|
362
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
|
|
363
|
+
direction: 'row',
|
|
364
|
+
spacing: 1,
|
|
365
|
+
alignItems: "center",
|
|
366
|
+
children: [
|
|
367
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
|
|
368
|
+
variant: "caption",
|
|
369
|
+
children: "Preview Values"
|
|
370
|
+
}),
|
|
371
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
|
|
372
|
+
onClick: refreshPreview,
|
|
373
|
+
size: "small",
|
|
374
|
+
children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_refresh.default, {})
|
|
375
|
+
})
|
|
376
|
+
]
|
|
377
|
+
}),
|
|
378
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsx)(VariableListPreview, {
|
|
379
|
+
definition: previewSpec
|
|
380
|
+
})
|
|
381
|
+
]
|
|
382
|
+
})
|
|
383
|
+
})
|
|
251
384
|
]
|
|
252
385
|
}),
|
|
386
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsx)(SectionHeader, {
|
|
387
|
+
children: "Dropdown Options"
|
|
388
|
+
}),
|
|
253
389
|
/*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Grid, {
|
|
254
|
-
|
|
255
|
-
|
|
390
|
+
container: true,
|
|
391
|
+
spacing: 1,
|
|
392
|
+
mb: 1,
|
|
256
393
|
children: [
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
394
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Grid, {
|
|
395
|
+
item: true,
|
|
396
|
+
xs: 12,
|
|
397
|
+
children: [
|
|
398
|
+
"Allow Multiple",
|
|
399
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Switch, {
|
|
400
|
+
checked: state.listVariableFields.allowMultiple,
|
|
401
|
+
onChange: (e)=>{
|
|
402
|
+
setState((draft)=>{
|
|
403
|
+
draft.listVariableFields.allowMultiple = e.target.checked;
|
|
404
|
+
});
|
|
405
|
+
}
|
|
406
|
+
})
|
|
407
|
+
]
|
|
408
|
+
}),
|
|
409
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Grid, {
|
|
410
|
+
item: true,
|
|
411
|
+
xs: 12,
|
|
412
|
+
children: [
|
|
413
|
+
"Allow All",
|
|
414
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Switch, {
|
|
415
|
+
checked: state.listVariableFields.allowAll,
|
|
416
|
+
onChange: (e)=>{
|
|
417
|
+
setState((draft)=>{
|
|
418
|
+
draft.listVariableFields.allowAll = e.target.checked;
|
|
419
|
+
});
|
|
420
|
+
}
|
|
421
|
+
})
|
|
422
|
+
]
|
|
265
423
|
})
|
|
266
424
|
]
|
|
267
425
|
})
|
|
268
426
|
]
|
|
269
427
|
})
|
|
270
428
|
]
|
|
271
|
-
}),
|
|
272
|
-
/*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
|
|
273
|
-
direction: 'row',
|
|
274
|
-
spacing: 2,
|
|
275
|
-
justifyContent: "end",
|
|
276
|
-
children: [
|
|
277
|
-
/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
|
|
278
|
-
disabled: !validation.isValid,
|
|
279
|
-
variant: "contained",
|
|
280
|
-
onClick: ()=>{
|
|
281
|
-
onChange((0, _variableEditorFormModel.getVariableDefinitionFromState)(state));
|
|
282
|
-
},
|
|
283
|
-
children: "Update"
|
|
284
|
-
}),
|
|
285
|
-
/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
|
|
286
|
-
variant: "outlined",
|
|
287
|
-
onClick: ()=>{
|
|
288
|
-
onCancel();
|
|
289
|
-
},
|
|
290
|
-
children: "Cancel"
|
|
291
|
-
})
|
|
292
|
-
]
|
|
293
429
|
})
|
|
294
430
|
]
|
|
295
431
|
});
|
|
@@ -25,6 +25,7 @@ const _eye = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Eye")
|
|
|
25
25
|
const _pencil = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Pencil"));
|
|
26
26
|
const _pinOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/PinOutline"));
|
|
27
27
|
const _pinOffOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/PinOffOutline"));
|
|
28
|
+
const _components = require("@perses-dev/components");
|
|
28
29
|
const _context = require("../../context");
|
|
29
30
|
const _variable = require("./Variable");
|
|
30
31
|
const _variableEditor = require("./VariableEditor");
|
|
@@ -84,21 +85,22 @@ function TemplateVariableList(props) {
|
|
|
84
85
|
disableHysteresis: true
|
|
85
86
|
});
|
|
86
87
|
const isSticky = scrollTrigger && props.initialVariableIsSticky && isPin;
|
|
88
|
+
const onClose = ()=>{
|
|
89
|
+
setIsEditing(false);
|
|
90
|
+
};
|
|
87
91
|
return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
|
|
88
92
|
children: [
|
|
89
|
-
/*#__PURE__*/ (0, _jsxRuntime.jsx)(
|
|
90
|
-
|
|
91
|
-
|
|
93
|
+
/*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.Drawer, {
|
|
94
|
+
isOpen: isEditing,
|
|
95
|
+
onClose: onClose,
|
|
92
96
|
PaperProps: {
|
|
93
97
|
sx: {
|
|
94
98
|
width: '50%'
|
|
95
99
|
}
|
|
96
100
|
},
|
|
97
101
|
children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variableEditor.VariableEditor, {
|
|
98
|
-
onCancel: ()=>{
|
|
99
|
-
setIsEditing(false);
|
|
100
|
-
},
|
|
101
102
|
variableDefinitions: variableDefinitions,
|
|
103
|
+
onCancel: onClose,
|
|
102
104
|
onChange: (v)=>{
|
|
103
105
|
setVariableDefinitions(v);
|
|
104
106
|
setIsEditing(false);
|
|
@@ -134,8 +136,8 @@ function TemplateVariableList(props) {
|
|
|
134
136
|
ml: isSticky ? 2 : 0,
|
|
135
137
|
children: [
|
|
136
138
|
/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Stack, {
|
|
137
|
-
direction:
|
|
138
|
-
spacing:
|
|
139
|
+
direction: "row",
|
|
140
|
+
spacing: 1,
|
|
139
141
|
children: showVariables && variableDefinitions.map((v)=>{
|
|
140
142
|
var ref;
|
|
141
143
|
/*#__PURE__*/ return (0, _jsxRuntime.jsx)(_material.Box, {
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
// Copyright 2022 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
|
+
function _export(target, all) {
|
|
18
|
+
for(var name1 in all)Object.defineProperty(target, name1, {
|
|
19
|
+
enumerable: true,
|
|
20
|
+
get: all[name1]
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
_export(exports, {
|
|
24
|
+
useListVariablePluginValues: ()=>useListVariablePluginValues,
|
|
25
|
+
getVariableValuesKey: ()=>getVariableValuesKey
|
|
26
|
+
});
|
|
27
|
+
const _pluginSystem = require("@perses-dev/plugin-system");
|
|
28
|
+
const _reactQuery = require("@tanstack/react-query");
|
|
29
|
+
function useListVariablePluginValues(definition) {
|
|
30
|
+
const { data: variablePlugin } = (0, _pluginSystem.usePlugin)('Variable', definition.spec.plugin.kind);
|
|
31
|
+
const datasourceStore = (0, _pluginSystem.useDatasourceStore)();
|
|
32
|
+
const allVariables = (0, _pluginSystem.useTemplateVariableValues)();
|
|
33
|
+
const { timeRange } = (0, _pluginSystem.useTimeRange)();
|
|
34
|
+
const variablePluginCtx = {
|
|
35
|
+
timeRange,
|
|
36
|
+
datasourceStore,
|
|
37
|
+
variables: allVariables
|
|
38
|
+
};
|
|
39
|
+
const spec = definition.spec.plugin.spec;
|
|
40
|
+
let dependsOnVariables;
|
|
41
|
+
if (variablePlugin === null || variablePlugin === void 0 ? void 0 : variablePlugin.dependsOn) {
|
|
42
|
+
const dependencies = variablePlugin.dependsOn(spec, variablePluginCtx);
|
|
43
|
+
dependsOnVariables = dependencies.variables;
|
|
44
|
+
}
|
|
45
|
+
const variables = (0, _pluginSystem.useTemplateVariableValues)(dependsOnVariables);
|
|
46
|
+
let waitToLoad = false;
|
|
47
|
+
if (dependsOnVariables) {
|
|
48
|
+
waitToLoad = dependsOnVariables.some((v)=>{
|
|
49
|
+
var ref;
|
|
50
|
+
return (ref = variables[v]) === null || ref === void 0 ? void 0 : ref.loading;
|
|
51
|
+
});
|
|
52
|
+
}
|
|
53
|
+
const variablesValueKey = getVariableValuesKey(variables);
|
|
54
|
+
const variablesOptionsQuery = (0, _reactQuery.useQuery)([
|
|
55
|
+
name,
|
|
56
|
+
definition,
|
|
57
|
+
variablesValueKey,
|
|
58
|
+
timeRange
|
|
59
|
+
], async ()=>{
|
|
60
|
+
const resp = await (variablePlugin === null || variablePlugin === void 0 ? void 0 : variablePlugin.getVariableOptions(spec, {
|
|
61
|
+
datasourceStore,
|
|
62
|
+
variables,
|
|
63
|
+
timeRange
|
|
64
|
+
}));
|
|
65
|
+
var ref;
|
|
66
|
+
return (ref = resp === null || resp === void 0 ? void 0 : resp.data) !== null && ref !== void 0 ? ref : [];
|
|
67
|
+
}, {
|
|
68
|
+
enabled: !!variablePlugin || waitToLoad
|
|
69
|
+
});
|
|
70
|
+
return variablesOptionsQuery;
|
|
71
|
+
}
|
|
72
|
+
function getVariableValuesKey(v) {
|
|
73
|
+
return Object.values(v).map((v)=>JSON.stringify(v.value)).join(',');
|
|
74
|
+
}
|