@perses-dev/plugin-system 0.46.0 → 0.47.0

package/dist/cjs/components/DatasourceEditorForm/DatasourceEditorForm.js

@@ -21,7 +21,6 @@ Object.defineProperty(exports, "DatasourceEditorForm", {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
-const _useimmer = require("use-immer");
 const _material = require("@mui/material");
 const _react = require("react");
 const _components = require("@perses-dev/components");
@@ -29,71 +28,45 @@ const _reacthookform = require("react-hook-form");
 const _zod = require("@hookform/resolvers/zod");
 const _PluginEditor = require("../PluginEditor");
 const _utils = require("../../utils");
-const _validation = require("../../validation");
-/**
- * This preprocessing ensures that we always have a defined object for the `display` property
- * @param datasource
- */ function getInitialState(datasourceDefinition) {
-    var _datasourceDefinition_spec_display, _datasourceDefinition_spec_display1;
-    var _datasourceDefinition_spec_display_name, _datasourceDefinition_spec_display_description;
-    const patchedDisplay = {
-        name: (_datasourceDefinition_spec_display_name = (_datasourceDefinition_spec_display = datasourceDefinition.spec.display) === null || _datasourceDefinition_spec_display === void 0 ? void 0 : _datasourceDefinition_spec_display.name) !== null && _datasourceDefinition_spec_display_name !== void 0 ? _datasourceDefinition_spec_display_name : '',
-        description: (_datasourceDefinition_spec_display_description = (_datasourceDefinition_spec_display1 = datasourceDefinition.spec.display) === null || _datasourceDefinition_spec_display1 === void 0 ? void 0 : _datasourceDefinition_spec_display1.description) !== null && _datasourceDefinition_spec_display_description !== void 0 ? _datasourceDefinition_spec_display_description : ''
-    };
-    return {
-        name: datasourceDefinition.name,
-        spec: {
-            ...datasourceDefinition.spec,
-            display: patchedDisplay
-        }
-    };
-}
+const _context = require("../../context");
 function DatasourceEditorForm(props) {
-    var _state_spec_display, _state_spec_display1;
     const { initialDatasourceDefinition, initialAction, isDraft, isReadonly, onSave, onClose, onDelete } = props;
-    const initialState = getInitialState(initialDatasourceDefinition);
-    const [state, setState] = (0, _useimmer.useImmer)(initialState);
     const [isDiscardDialogOpened, setDiscardDialogOpened] = (0, _react.useState)(false);
     const [action, setAction] = (0, _react.useState)(initialAction);
     const titleAction = (0, _utils.getTitleAction)(action, isDraft);
     const submitText = (0, _utils.getSubmitText)(action, isDraft);
+    const { datasourceEditorSchema } = (0, _context.useValidationSchemas)();
     const form = (0, _reacthookform.useForm)({
-        resolver: (0, _zod.zodResolver)(_validation.datasourceEditValidationSchema),
+        resolver: (0, _zod.zodResolver)(datasourceEditorSchema),
         mode: 'onBlur',
-        defaultValues: {
-            name: state.name,
-            title: (_state_spec_display = state.spec.display) === null || _state_spec_display === void 0 ? void 0 : _state_spec_display.name,
-            description: (_state_spec_display1 = state.spec.display) === null || _state_spec_display1 === void 0 ? void 0 : _state_spec_display1.description,
-            default: state.spec.default
-        }
+        defaultValues: initialDatasourceDefinition
     });
-    const processForm = ()=>{
-        var _state_spec_display, _state_spec_display1, _state_spec_display2, _state_spec_display3;
-        // reset display attributes to undefined when empty, because we don't want to save empty strings
-        onSave(state.name, {
-            ...state.spec,
-            display: {
-                name: ((_state_spec_display = state.spec.display) === null || _state_spec_display === void 0 ? void 0 : _state_spec_display.name) === '' ? undefined : (_state_spec_display1 = state.spec.display) === null || _state_spec_display1 === void 0 ? void 0 : _state_spec_display1.name,
-                description: ((_state_spec_display2 = state.spec.display) === null || _state_spec_display2 === void 0 ? void 0 : _state_spec_display2.description) === '' ? undefined : (_state_spec_display3 = state.spec.display) === null || _state_spec_display3 === void 0 ? void 0 : _state_spec_display3.description
-            }
-        });
+    /*
+   * Remove empty fields that are optional
+   */ function clearFormData(data) {
+        var _result_spec_display, _result_spec_display1;
+        const result = {
+            ...data
+        };
+        if (((_result_spec_display = result.spec.display) === null || _result_spec_display === void 0 ? void 0 : _result_spec_display.name) === undefined && ((_result_spec_display1 = result.spec.display) === null || _result_spec_display1 === void 0 ? void 0 : _result_spec_display1.description) === undefined) {
+            delete result.spec.display;
+        }
+        return result;
+    }
+    const processForm = (data)=>{
+        onSave(clearFormData(data));
     };
     // When user click on cancel, several possibilities:
     // - create action: ask for discard approval
     // - update action: ask for discard approval if changed
     // - read action: don´t ask for discard approval
-    const handleCancel = (0, _react.useCallback)(()=>{
-        if (JSON.stringify(initialState) !== JSON.stringify(state)) {
+    function handleCancel() {
+        if (JSON.stringify(initialDatasourceDefinition) !== JSON.stringify(clearFormData(form.getValues()))) {
             setDiscardDialogOpened(true);
         } else {
             onClose();
         }
-    }, [
-        state,
-        initialState,
-        setDiscardDialogOpened,
-        onClose
-    ]);
+    }
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reacthookform.FormProvider, {
         ...form,
         children: [
@@ -185,10 +158,12 @@ function DatasourceEditorForm(props) {
                                 item: true,
                                 xs: 4,
                                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
+                                    control: form.control,
                                     name: "name",
-                                    render: ({ field, fieldState })=>{
+                                    render: ({ field, fieldState })=>/*#__PURE__*/ {
                                         var _fieldState_error;
-                                        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                                        var _field_value;
+                                        return (0, _jsxruntime.jsx)(_material.TextField, {
                                             ...field,
                                             required: true,
                                             fullWidth: true,
@@ -203,11 +178,9 @@ function DatasourceEditorForm(props) {
                                             },
                                             error: !!fieldState.error,
                                             helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                            value: (_field_value = field.value) !== null && _field_value !== void 0 ? _field_value : '',
                                             onChange: (event)=>{
                                                 field.onChange(event);
-                                                setState((draft)=>{
-                                                    draft.name = event.target.value;
-                                                });
                                             }
                                         });
                                     }
@@ -217,10 +190,12 @@ function DatasourceEditorForm(props) {
                                 item: true,
                                 xs: 8,
                                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                                    name: "title",
-                                    render: ({ field, fieldState })=>{
+                                    control: form.control,
+                                    name: "spec.display.name",
+                                    render: ({ field, fieldState })=>/*#__PURE__*/ {
                                         var _fieldState_error;
-                                        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                                        var _field_value;
+                                        return (0, _jsxruntime.jsx)(_material.TextField, {
                                             ...field,
                                             fullWidth: true,
                                             name: "title",
@@ -233,13 +208,9 @@ function DatasourceEditorForm(props) {
                                             },
                                             error: !!fieldState.error,
                                             helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                            value: (_field_value = field.value) !== null && _field_value !== void 0 ? _field_value : '',
                                             onChange: (event)=>{
-                                                setState((draft)=>{
-                                                    field.onChange(event);
-                                                    if (draft.spec.display) {
-                                                        draft.spec.display.name = event.target.value;
-                                                    }
-                                                });
+                                                field.onChange(event);
                                             }
                                         });
                                     }
@@ -249,10 +220,12 @@ function DatasourceEditorForm(props) {
                                 item: true,
                                 xs: 12,
                                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                                    name: "description",
-                                    render: ({ field, fieldState })=>{
+                                    control: form.control,
+                                    name: "spec.display.description",
+                                    render: ({ field, fieldState })=>/*#__PURE__*/ {
                                         var _fieldState_error;
-                                        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                                        var _field_value;
+                                        return (0, _jsxruntime.jsx)(_material.TextField, {
                                             ...field,
                                             fullWidth: true,
                                             name: "description",
@@ -265,13 +238,9 @@ function DatasourceEditorForm(props) {
                                             },
                                             error: !!fieldState.error,
                                             helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                            value: (_field_value = field.value) !== null && _field_value !== void 0 ? _field_value : '',
                                             onChange: (event)=>{
                                                 field.onChange(event);
-                                                setState((draft)=>{
-                                                    if (draft.spec.display) {
-                                                        draft.spec.display.description = event.target.value;
-                                                    }
-                                                });
                                             }
                                         });
                                     }
@@ -286,28 +255,26 @@ function DatasourceEditorForm(props) {
                                 children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
                                     children: [
                                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                                            name: "default",
+                                            control: form.control,
+                                            name: "spec.default",
                                             render: ({ field })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
-                                                    ...field,
+                                                    label: "Set as default",
                                                     control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Switch, {
-                                                        checked: state.spec.default,
+                                                        ...field,
+                                                        checked: !!field.value,
                                                         readOnly: action === 'read',
                                                         onChange: (event)=>{
                                                             if (action === 'read') return; // ReadOnly prop is not blocking user interaction...
                                                             field.onChange(event);
-                                                            setState((draft)=>{
-                                                                draft.spec.default = event.target.checked;
-                                                            });
                                                         }
-                                                    }),
-                                                    label: "Set as default"
+                                                    })
                                                 })
                                         }),
                                         /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Typography, {
                                             variant: "caption",
                                             children: [
                                                 "Whether this datasource should be the default ",
-                                                state.spec.plugin.kind,
+                                                form.getValues().spec.plugin.kind,
                                                 " to be used"
                                             ]
                                         })
@@ -322,26 +289,30 @@ function DatasourceEditorForm(props) {
                         variant: "h3",
                         children: "Plugin Options"
                     }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_PluginEditor.PluginEditor, {
-                        width: "100%",
-                        pluginTypes: [
-                            'Datasource'
-                        ],
-                        pluginKindLabel: "Source",
-                        value: {
-                            selection: {
-                                kind: state.spec.plugin.kind,
-                                type: 'Datasource'
-                            },
-                            spec: state.spec.plugin.spec
-                        },
-                        isReadonly: action === 'read',
-                        onChange: (v)=>{
-                            setState((draft)=>{
-                                draft.spec.plugin.kind = v.selection.kind;
-                                draft.spec.plugin.spec = v.spec;
-                            });
-                        }
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
+                        control: form.control,
+                        name: "spec.plugin",
+                        render: ({ field })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_PluginEditor.PluginEditor, {
+                                width: "100%",
+                                pluginTypes: [
+                                    'Datasource'
+                                ],
+                                pluginKindLabel: "Source",
+                                value: {
+                                    selection: {
+                                        type: 'Datasource',
+                                        kind: field.value.kind
+                                    },
+                                    spec: field.value.spec
+                                },
+                                isReadonly: action === 'read',
+                                onChange: (v)=>{
+                                    field.onChange({
+                                        kind: v.selection.kind,
+                                        spec: v.spec
+                                    });
+                                }
+                            })
                     })
                 ]
             }),

package/dist/cjs/components/LegendOptionsEditor/LegendOptionsEditor.js

@@ -104,7 +104,8 @@ function LegendOptionsEditor({ value, onChange }) {
         }
         return result;
     }, []);
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.OptionsEditorGroup, {
+        title: "Legend",
         children: [
             !isValidLegend && /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorAlert, {
                 error: {

package/dist/cjs/components/MultiQueryEditor/QueryEditorContainer.js

@@ -51,7 +51,7 @@ const QueryEditorContainer = ({ queryTypes, index, query, isCollapsed, onDelete,
                         variant: "overline",
                         component: "h4",
                         children: [
-                            "Query ",
+                            "Query #",
                             index + 1
                         ]
                     }),

package/dist/cjs/components/PanelSpecEditor/PanelSpecEditor.js

@@ -22,11 +22,12 @@ Object.defineProperty(exports, "PanelSpecEditor", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _components = require("@perses-dev/components");
+const _reacthookform = require("react-hook-form");
 const _runtime = require("../../runtime");
 const _OptionsEditorTabs = require("../OptionsEditorTabs");
 const _MultiQueryEditor = require("../MultiQueryEditor");
 function PanelSpecEditor(props) {
-    const { panelDefinition, onJSONChange, onQueriesChange, onPluginSpecChange } = props;
+    const { control, panelDefinition, onJSONChange, onQueriesChange, onPluginSpecChange } = props;
     const { kind } = panelDefinition.spec.plugin;
     const { data: plugin, isLoading, error } = (0, _runtime.usePlugin)('Panel', kind);
     if (error) {
@@ -44,39 +45,68 @@ function PanelSpecEditor(props) {
     const { panelOptionsEditorComponents, hideQueryEditor } = plugin;
     let tabs = [];
     if (!hideQueryEditor) {
-        var _plugin_supportedQueryTypes, _panelDefinition_spec_queries;
         tabs.push({
             label: 'Query',
-            content: /*#__PURE__*/ (0, _jsxruntime.jsx)(_MultiQueryEditor.MultiQueryEditor, {
-                queryTypes: (_plugin_supportedQueryTypes = plugin.supportedQueryTypes) !== null && _plugin_supportedQueryTypes !== void 0 ? _plugin_supportedQueryTypes : [],
-                queries: (_panelDefinition_spec_queries = panelDefinition.spec.queries) !== null && _panelDefinition_spec_queries !== void 0 ? _panelDefinition_spec_queries : [],
-                onChange: onQueriesChange
+            content: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
+                control: control,
+                name: "panelDefinition.spec.queries",
+                render: ({ field })=>/*#__PURE__*/ {
+                    var _plugin_supportedQueryTypes, _panelDefinition_spec_queries;
+                    return (0, _jsxruntime.jsx)(_MultiQueryEditor.MultiQueryEditor, {
+                        queryTypes: (_plugin_supportedQueryTypes = plugin.supportedQueryTypes) !== null && _plugin_supportedQueryTypes !== void 0 ? _plugin_supportedQueryTypes : [],
+                        queries: (_panelDefinition_spec_queries = panelDefinition.spec.queries) !== null && _panelDefinition_spec_queries !== void 0 ? _panelDefinition_spec_queries : [],
+                        onChange: (queries)=>{
+                            field.onChange(queries);
+                            onQueriesChange(queries);
+                        }
+                    });
+                }
             })
         });
     }
     if (panelOptionsEditorComponents !== undefined) {
         tabs = tabs.concat(panelOptionsEditorComponents.map(({ label, content: OptionsEditorComponent })=>({
                 label,
-                content: /*#__PURE__*/ (0, _jsxruntime.jsx)(OptionsEditorComponent, {
-                    value: panelDefinition.spec.plugin.spec,
-                    onChange: onPluginSpecChange
+                content: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
+                    control: control,
+                    name: "panelDefinition.spec.plugin.spec",
+                    render: ({ field })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(OptionsEditorComponent, {
+                            value: panelDefinition.spec.plugin.spec,
+                            onChange: (spec)=>{
+                                field.onChange(spec);
+                                onPluginSpecChange(spec);
+                            }
+                        })
                 })
             })));
     }
     // always show json editor and links editor by default
     tabs.push({
-        label: 'JSON',
-        content: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.JSONEditor, {
-            maxHeight: "80vh",
-            value: panelDefinition,
-            onChange: onJSONChange
+        label: 'Links',
+        content: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.LinksEditor, {
+            control: control
         })
     });
     tabs.push({
-        label: 'Links',
-        content: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.LinksEditor, {})
+        label: 'JSON',
+        content: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
+            control: control,
+            name: "panelDefinition.spec.plugin.spec",
+            render: ({ field })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_components.JSONEditor, {
+                    maxHeight: "80vh",
+                    value: panelDefinition,
+                    onChange: (json)=>{
+                        field.onChange(json);
+                        onJSONChange(json);
+                    }
+                })
+        })
+    });
+    var _panelDefinition_spec_queries;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_runtime.QueryCountProvider, {
+        queryCount: ((_panelDefinition_spec_queries = panelDefinition.spec.queries) !== null && _panelDefinition_spec_queries !== void 0 ? _panelDefinition_spec_queries : []).length,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_OptionsEditorTabs.OptionsEditorTabs, {
+            tabs: tabs
+        }, tabs.length)
     });
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_OptionsEditorTabs.OptionsEditorTabs, {
-        tabs: tabs
-    }, tabs.length);
 }

package/dist/cjs/components/PluginKindSelect/PluginKindSelect.js

@@ -48,6 +48,7 @@ const PluginKindSelect = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
         inputRef: ref,
         ...others,
         value: value,
+        "aria-label": value,
         onChange: handleChange,
         SelectProps: {
             renderValue

package/dist/cjs/components/TimeRangeControls/TimeRangeControls.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -24,9 +24,6 @@ _export(exports, {
     DEFAULT_REFRESH_INTERVAL_OPTIONS: function() {
         return DEFAULT_REFRESH_INTERVAL_OPTIONS;
     },
-    DEFAULT_TIME_RANGE_OPTIONS: function() {
-        return DEFAULT_TIME_RANGE_OPTIONS;
-    },
     TimeRangeControls: function() {
         return TimeRangeControls;
     }
@@ -43,62 +40,6 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-const DEFAULT_TIME_RANGE_OPTIONS = [
-    {
-        value: {
-            pastDuration: '5m'
-        },
-        display: 'Last 5 minutes'
-    },
-    {
-        value: {
-            pastDuration: '15m'
-        },
-        display: 'Last 15 minutes'
-    },
-    {
-        value: {
-            pastDuration: '30m'
-        },
-        display: 'Last 30 minutes'
-    },
-    {
-        value: {
-            pastDuration: '1h'
-        },
-        display: 'Last 1 hour'
-    },
-    {
-        value: {
-            pastDuration: '6h'
-        },
-        display: 'Last 6 hours'
-    },
-    {
-        value: {
-            pastDuration: '12h'
-        },
-        display: 'Last 12 hours'
-    },
-    {
-        value: {
-            pastDuration: '24h'
-        },
-        display: 'Last 1 day'
-    },
-    {
-        value: {
-            pastDuration: '7d'
-        },
-        display: 'Last 7 days'
-    },
-    {
-        value: {
-            pastDuration: '14d'
-        },
-        display: 'Last 14 days'
-    }
-];
 const DEFAULT_REFRESH_INTERVAL_OPTIONS = [
     {
         value: {
@@ -138,18 +79,15 @@ const DEFAULT_REFRESH_INTERVAL_OPTIONS = [
     }
 ];
 const DEFAULT_HEIGHT = '34px';
-function TimeRangeControls({ heightPx, showTimeRangeSelector = true, showRefreshButton = true, showRefreshInterval = true, timePresets = DEFAULT_TIME_RANGE_OPTIONS }) {
+function TimeRangeControls({ heightPx, showTimeRangeSelector = true, showRefreshButton = true, showRefreshInterval = true, showCustomTimeRange, timePresets }) {
     const { timeRange, setTimeRange, refresh, refreshInterval, setRefreshInterval } = (0, _runtime.useTimeRange)();
+    const showCustomTimeRangeValue = (0, _runtime.useShowCustomTimeRangeSetting)(showCustomTimeRange);
+    const timePresetsValue = (0, _runtime.useTimeRangeOptionsSetting)(timePresets);
     // Convert height to a string, then use the string for styling
     const height = heightPx === undefined ? DEFAULT_HEIGHT : `${heightPx}px`;
     // add time preset if one does not match duration given in time range
-    if ('pastDuration' in timeRange && !timePresets.some((option)=>option.value.pastDuration === timeRange['pastDuration'])) {
-        timePresets.push({
-            value: {
-                pastDuration: timeRange['pastDuration']
-            },
-            display: `Last ${timeRange['pastDuration']}`
-        });
+    if ('pastDuration' in timeRange && !timePresetsValue.some((option)=>option.value.pastDuration === timeRange['pastDuration'])) {
+        timePresetsValue.push((0, _components.buildRelativeTimeOption)(timeRange['pastDuration']));
     }
     // set the new refresh interval both in the dashboard context & as query param
     const handleRefreshIntervalChange = (0, _react.useCallback)((duration)=>{
@@ -161,11 +99,12 @@ function TimeRangeControls({ heightPx, showTimeRangeSelector = true, showRefresh
         direction: "row",
         spacing: 1,
         children: [
-            showTimeRangeSelector && /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.DateTimeRangePicker, {
-                timeOptions: timePresets,
+            showTimeRangeSelector && /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.TimeRangeSelector, {
+                timeOptions: timePresetsValue,
                 value: timeRange,
                 onChange: setTimeRange,
-                height: height
+                height: height,
+                showCustomTimeRange: showCustomTimeRangeValue
             }),
             showRefreshButton && /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
                 description: _constants.TOOLTIP_TEXT.refresh,