@perses-dev/plugin-system 0.54.0-beta.5 → 0.54.0-beta.7

package/dist/cjs/components/Annotations/AnnotationEditorForm/AnnotationEditorForm.js

@@ -0,0 +1,283 @@
+// Copyright 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
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "AnnotationEditorForm", {
+    enumerable: true,
+    get: function() {
+        return AnnotationEditorForm;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _components = require("@perses-dev/components");
+const _reacthookform = require("react-hook-form");
+const _zod = require("@hookform/resolvers/zod");
+const _reactquery = require("@tanstack/react-query");
+const _InvertColors = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/InvertColors"));
+const _PluginEditor = require("../../PluginEditor");
+const _context = require("../../../context");
+const _AnnotationPreview = require("./AnnotationPreview");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const DEFAULT_ANNOTATION_COLOR = '#FF6B6B';
+function FallbackPreview() {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+        children: "Error previewing annotations"
+    });
+}
+function AnnotationPluginControl({ action, control, onRunQuery }) {
+    const plugin = (0, _reacthookform.useWatch)({
+        control,
+        name: 'plugin'
+    });
+    const kind = plugin?.kind;
+    const pluginSpec = plugin?.spec;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
+        control: control,
+        name: "plugin",
+        render: ({ field })=>{
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_PluginEditor.PluginEditor, {
+                withRunQueryButton: true,
+                width: "100%",
+                pluginTypes: [
+                    'Annotation'
+                ],
+                pluginKindLabel: "Source",
+                value: {
+                    selection: {
+                        type: 'Annotation',
+                        kind: kind ?? 'StaticListAnnotation'
+                    },
+                    spec: pluginSpec ?? {}
+                },
+                isReadonly: action === 'read',
+                onChange: (v)=>{
+                    field.onChange({
+                        kind: v.selection.kind,
+                        spec: v.spec
+                    });
+                },
+                onRunQuery: onRunQuery
+            });
+        }
+    });
+}
+function AnnotationEditorForm({ initialAnnotationSpec, action, isDraft, isReadonly, onActionChange, onSave, onClose, onDelete }) {
+    const queryClient = (0, _reactquery.useQueryClient)();
+    const [isDiscardDialogOpened, setDiscardDialogOpened] = (0, _react.useState)(false);
+    const titleAction = (0, _components.getTitleAction)(action, isDraft);
+    const submitText = (0, _components.getSubmitText)(action, isDraft);
+    const { annotationEditorSchema } = (0, _context.useValidationSchemas)();
+    const form = (0, _reacthookform.useForm)({
+        resolver: (0, _zod.zodResolver)(annotationEditorSchema),
+        mode: 'onBlur',
+        defaultValues: initialAnnotationSpec
+    });
+    /* We use `previewDefinition` to explicitly update the spec
+   * that will be used for preview when running query. The reason why we do this is to avoid
+   * having to re-fetch the values when the user is still editing the spec.
+   * Using structuredClone to not have reference issues with nested objects.
+   */ const [previewSpec, setPreviewSpec] = (0, _react.useState)(structuredClone(form.getValues()));
+    const handleRunQuery = (0, _react.useCallback)(async ()=>{
+        const values = form.getValues();
+        if (JSON.stringify(previewSpec) === JSON.stringify(values)) {
+            await queryClient.invalidateQueries({
+                queryKey: [
+                    'annotation',
+                    previewSpec
+                ]
+            });
+        } else {
+            setPreviewSpec(structuredClone(values));
+        }
+    }, [
+        form,
+        previewSpec,
+        queryClient
+    ]);
+    const processForm = (data)=>{
+        // reset display attributes to undefined when empty, because we don't want to save empty strings
+        onSave(data);
+    };
+    function handleCancel() {
+        if (JSON.stringify(initialAnnotationSpec) !== JSON.stringify(form.getValues())) {
+            setDiscardDialogOpened(true);
+        } else {
+            onClose();
+        }
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reacthookform.FormProvider, {
+        ...form,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+                sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    padding: (theme)=>theme.spacing(1, 2),
+                    borderBottom: (theme)=>`1px solid ${theme.palette.divider}`
+                },
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Typography, {
+                        variant: "h2",
+                        children: [
+                            titleAction,
+                            " Annotation"
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.FormActions, {
+                        action: action,
+                        submitText: submitText,
+                        isReadonly: isReadonly,
+                        isValid: form.formState.isValid,
+                        onActionChange: onActionChange,
+                        onSubmit: form.handleSubmit(processForm),
+                        onDelete: onDelete,
+                        onCancel: handleCancel
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+                padding: 2,
+                sx: {
+                    overflowY: 'scroll'
+                },
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Grid, {
+                        container: true,
+                        spacing: 2,
+                        mb: 2,
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
+                                item: true,
+                                xs: 12,
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
+                                    control: form.control,
+                                    name: "display.name",
+                                    render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                                            ...field,
+                                            required: true,
+                                            fullWidth: true,
+                                            label: "Name",
+                                            InputLabelProps: {
+                                                shrink: action === 'read' ? true : undefined
+                                            },
+                                            InputProps: {
+                                                disabled: action === 'update' && !isDraft,
+                                                readOnly: action === 'read'
+                                            },
+                                            error: !!fieldState.error,
+                                            helperText: fieldState.error?.message,
+                                            value: field.value ?? '',
+                                            onChange: (event)=>{
+                                                field.onChange(event);
+                                            }
+                                        })
+                                })
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
+                                item: true,
+                                xs: 12,
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                                    direction: "row",
+                                    gap: 1,
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
+                                            control: form.control,
+                                            name: "display.color",
+                                            render: ({ field })=>{
+                                                const isEnabled = field.value !== undefined;
+                                                return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+                                                    children: isEnabled ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsColorPicker, {
+                                                        size: "medium",
+                                                        label: "annotation",
+                                                        color: field.value ?? DEFAULT_ANNOTATION_COLOR,
+                                                        onColorChange: (color)=>field.onChange(color),
+                                                        onClear: ()=>field.onChange(undefined)
+                                                    }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                                        size: "medium",
+                                                        onClick: ()=>field.onChange(DEFAULT_ANNOTATION_COLOR),
+                                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_InvertColors.default, {})
+                                                    })
+                                                });
+                                            }
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
+                                            control: form.control,
+                                            name: "display.description",
+                                            render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                                                    ...field,
+                                                    fullWidth: true,
+                                                    label: "Description",
+                                                    InputLabelProps: {
+                                                        shrink: action === 'read' ? true : undefined
+                                                    },
+                                                    InputProps: {
+                                                        readOnly: action === 'read'
+                                                    },
+                                                    error: !!fieldState.error,
+                                                    helperText: fieldState.error?.message,
+                                                    value: field.value ?? '',
+                                                    onChange: (event)=>{
+                                                        field.onChange(event);
+                                                    }
+                                                })
+                                        })
+                                    ]
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {}),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
+                        FallbackComponent: FallbackPreview,
+                        resetKeys: [
+                            previewSpec
+                        ],
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_AnnotationPreview.AnnotationPreview, {
+                            spec: previewSpec,
+                            sx: {
+                                marginY: 2
+                            }
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
+                        FallbackComponent: _components.ErrorAlert,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(AnnotationPluginControl, {
+                            action: action,
+                            control: form.control,
+                            onRunQuery: handleRunQuery
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.DiscardChangesConfirmationDialog, {
+                description: "Are you sure you want to discard these changes? Changes cannot be recovered.",
+                isOpen: isDiscardDialogOpened,
+                onCancel: ()=>{
+                    setDiscardDialogOpened(false);
+                },
+                onDiscardChanges: ()=>{
+                    setDiscardDialogOpened(false);
+                    onClose();
+                }
+            })
+        ]
+    });
+}

package/dist/cjs/components/Annotations/AnnotationEditorForm/AnnotationPreview.js

@@ -0,0 +1,211 @@
+// Copyright 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
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "AnnotationPreview", {
+    enumerable: true,
+    get: function() {
+        return AnnotationPreview;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _components = require("@perses-dev/components");
+const _Alert = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Alert"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const formatDate = (timeMs, format)=>{
+    // Disallows NaN, Infinity, and -Infinity
+    if (!Number.isFinite(timeMs)) {
+        return {
+            date: 'N/A',
+            time: 'N/A'
+        };
+    }
+    const d = new Date(timeMs);
+    return {
+        date: format(d, 'MMM dd, yyyy'),
+        time: format(d, 'HH:mm:ss')
+    };
+};
+function AnnotationPreviewCard({ value, formatWithUserTimeZone, ...props }) {
+    const start = formatDate(value.start, formatWithUserTimeZone);
+    const end = value.end !== undefined ? formatDate(value.start, formatWithUserTimeZone) : null;
+    const tags = (0, _react.useMemo)(()=>{
+        return Object.entries(value.tags ?? []).map(([key, value])=>{
+            return {
+                key: key,
+                value: value
+            };
+        });
+    }, [
+        value.tags
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Card, {
+        ...props,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.CardContent, {
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                    gap: 2,
+                    children: [
+                        value.title && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                            variant: "h3",
+                            children: value.title
+                        }),
+                        value.legend && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                            children: value.legend
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+                            flexWrap: "wrap",
+                            direction: "row",
+                            gap: 0.5,
+                            children: tags.map((tag)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Chip, {
+                                    size: "small",
+                                    label: `${tag.key}: ${tag.value}`
+                                }, `${tag.key}=${tag.value}`))
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {
+                    sx: {
+                        marginY: 2
+                    }
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                    gap: 0.5,
+                    direction: "row",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Typography, {
+                            variant: "caption",
+                            children: [
+                                start.date,
+                                " - ",
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)("strong", {
+                                    children: start.time
+                                })
+                            ]
+                        }),
+                        end && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                    variant: "caption",
+                                    children: ' → '
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Typography, {
+                                    variant: "caption",
+                                    children: [
+                                        end.date,
+                                        " - ",
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)("strong", {
+                                            children: end.time
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+function AnnotationPreview({ spec, ...props }) {
+    const { data, isFetching, error } = (0, _pluginsystem.useAnnotationData)(spec);
+    const { formatWithUserTimeZone } = (0, _components.useTimeZone)();
+    const [showAll, setShowAll] = (0, _react.useState)(false);
+    const annotationsToShow = showAll ? data : data?.slice(0, 1);
+    let notShown = 0;
+    if (data && data?.length > 0 && annotationsToShow) {
+        notShown = data.length - annotationsToShow.length;
+    }
+    const stateIndicator = (0, _react.useMemo)(()=>{
+        if (isFetching) {
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CircularProgress, {
+                "aria-label": "loading",
+                size: "1.125rem"
+            });
+        } else if (error) {
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
+                description: error.toString(),
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                    "aria-label": "preview errors",
+                    size: "small",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Alert.default, {
+                        fontSize: "inherit",
+                        sx: {
+                            color: (theme)=>theme.palette.error.main
+                        }
+                    })
+                })
+            });
+        }
+    }, [
+        isFetching,
+        error
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Card, {
+        variant: "outlined",
+        ...props,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CardHeader, {
+                title: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                    direction: "row",
+                    justifyContent: "space-between",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                            variant: "h4",
+                            children: "Preview Annotations"
+                        }),
+                        stateIndicator
+                    ]
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.CardContent, {
+                sx: {
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    gap: 1,
+                    paddingY: 0
+                },
+                children: [
+                    annotationsToShow?.map((item, index)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(AnnotationPreviewCard, {
+                            value: item,
+                            formatWithUserTimeZone: formatWithUserTimeZone,
+                            sx: {
+                                width: '100%'
+                            }
+                        }, index)),
+                    notShown > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Chip, {
+                        onClick: ()=>setShowAll(true),
+                        variant: "outlined",
+                        size: "small",
+                        label: `+${notShown} more`
+                    }),
+                    showAll && data && data.length > 1 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Chip, {
+                        onClick: ()=>setShowAll(false),
+                        variant: "outlined",
+                        size: "small",
+                        label: "-"
+                    })
+                ]
+            })
+        ]
+    });
+}

package/dist/cjs/components/Annotations/AnnotationEditorForm/index.js

@@ -0,0 +1,30 @@
+// Copyright 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
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_export_star(require("./AnnotationEditorForm"), exports);
+function _export_star(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
+    });
+    return from;
+}

package/dist/cjs/components/Annotations/index.js

@@ -0,0 +1,30 @@
+// Copyright 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
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_export_star(require("./AnnotationEditorForm"), exports);
+function _export_star(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
+    });
+    return from;
+}

package/dist/cjs/components/index.js

@@ -14,6 +14,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+_export_star(require("./Annotations"), exports);
 _export_star(require("./CalculationSelector"), exports);
 _export_star(require("./DatasourceEditorForm"), exports);
 _export_star(require("./DatasourceSelect"), exports);

package/dist/cjs/context/ValidationProvider.js

@@ -47,6 +47,7 @@ function ValidationProvider({ children }) {
     const [datasourceEditorSchema, setDatasourceEditorSchema] = (0, _react.useState)(_client.datasourceDefinitionSchema);
     const [panelEditorSchema, setPanelEditorSchema] = (0, _react.useState)(_spec.panelEditorSchema); // TODO I don't get why this does not compile
     const [variableEditorSchema, setVariableEditorSchema] = (0, _react.useState)(_spec.variableDefinitionSchema);
+    const [annotationEditorSchema, setAnnotationEditorSchema] = (0, _react.useState)(_spec.annotationSpecSchema);
     function setDatasourceEditorSchemaPlugin(pluginSchema) {
         setDatasourceEditorSchema((0, _client.buildDatasourceDefinitionSchema)(pluginSchema));
     }
@@ -56,14 +57,19 @@ function ValidationProvider({ children }) {
     function setVariableEditorSchemaPlugin(pluginSchema) {
         setVariableEditorSchema((0, _spec.buildVariableDefinitionSchema)(pluginSchema));
     }
+    function setAnnotationEditorSchemaPlugin(pluginSchema) {
+        setAnnotationEditorSchema((0, _spec.buildAnnotationSpecSchema)(pluginSchema));
+    }
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(ValidationSchemasContext.Provider, {
         value: {
             datasourceEditorSchema,
             panelEditorSchema,
             variableEditorSchema,
+            annotationEditorSchema,
             setDatasourceEditorSchemaPlugin,
             setPanelEditorSchemaPlugin,
-            setVariableEditorSchemaPlugin
+            setVariableEditorSchemaPlugin,
+            setAnnotationEditorSchemaPlugin
         },
         children: children
     });

package/dist/cjs/model/annotations.js

@@ -0,0 +1,16 @@
+// Copyright 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
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

package/dist/cjs/model/index.js

@@ -14,6 +14,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+_export_star(require("./annotations"), exports);
 _export_star(require("./datasource"), exports);
 _export_star(require("./legend"), exports);
 _export_star(require("./log-queries"), exports);