@perses-dev/plugin-system 0.54.0-beta.0 → 0.54.0-beta.10

package/dist/cjs/runtime/silences-queries.js

@@ -0,0 +1,101 @@
+// 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
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get SILENCES_QUERY_KEY () {
+        return SILENCES_QUERY_KEY;
+    },
+    get useSilencesQueries () {
+        return useSilencesQueries;
+    }
+});
+const _reactquery = require("@tanstack/react-query");
+const _datasources = require("./datasources");
+const _pluginregistry = require("./plugin-registry");
+const _variables = require("./variables");
+const _utils = require("./utils");
+const SILENCES_QUERY_KEY = 'SilencesQuery';
+function useSilencesQueries(definitions) {
+    const { getPlugin } = (0, _pluginregistry.usePluginRegistry)();
+    const context = useSilencesQueryContext();
+    const pluginLoaderResponse = (0, _pluginregistry.usePlugins)('SilencesQuery', definitions.map((d)=>({
+            kind: d.spec.plugin.kind
+        })));
+    return (0, _reactquery.useQueries)({
+        queries: definitions.map((definition, idx)=>{
+            const plugin = pluginLoaderResponse[idx]?.data;
+            const { queryEnabled, queryKey } = getQueryOptions({
+                context,
+                definition,
+                plugin
+            });
+            const silencesQueryKind = definition?.spec?.plugin?.kind;
+            return {
+                enabled: queryEnabled,
+                queryKey: queryKey,
+                refetchOnMount: false,
+                refetchOnWindowFocus: false,
+                refetchOnReconnect: false,
+                staleTime: 60_000,
+                queryFn: async ({ signal })=>{
+                    const plugin = await getPlugin({
+                        kind: SILENCES_QUERY_KEY,
+                        name: silencesQueryKind
+                    });
+                    const data = await plugin.getSilencesData(definition.spec.plugin.spec, context, signal);
+                    return data;
+                }
+            };
+        })
+    });
+}
+function getQueryOptions({ plugin, definition, context }) {
+    const { variableState } = context;
+    const dependencies = plugin?.dependsOn ? plugin.dependsOn(definition.spec.plugin.spec, context) : {};
+    const variableDependencies = dependencies?.variables;
+    const filteredVariabledState = (0, _utils.filterVariableStateMap)(variableState, variableDependencies);
+    const variablesValueKey = (0, _utils.getVariableValuesKey)(filteredVariabledState);
+    // Note: no absoluteTimeRange in query key since silences are current state
+    const queryKey = [
+        'query',
+        SILENCES_QUERY_KEY,
+        definition,
+        variablesValueKey
+    ];
+    let waitToLoad = false;
+    if (variableDependencies) {
+        waitToLoad = variableDependencies.some((v)=>variableState[v]?.loading);
+    }
+    const queryEnabled = plugin !== undefined && !waitToLoad;
+    return {
+        queryKey,
+        queryEnabled
+    };
+}
+function useSilencesQueryContext() {
+    const variableState = (0, _variables.useAllVariableValues)();
+    const datasourceStore = (0, _datasources.useDatasourceStore)();
+    return {
+        variableState,
+        datasourceStore
+    };
+}

package/dist/cjs/runtime/time-series-queries.js

@@ -123,7 +123,10 @@ function useTimeSeriesQueries(definitions, options, queryOptions) {
                 staleTime: Infinity,
                 queryKey: queryKey,
                 queryFn: async ({ signal })=>{
-                    const plugin = await getPlugin(TIME_SERIES_QUERY_KEY, definition.spec.plugin.kind);
+                    const plugin = await getPlugin({
+                        kind: TIME_SERIES_QUERY_KEY,
+                        name: definition.spec.plugin.kind
+                    });
                     const data = await plugin.getTimeSeriesData(definition.spec.plugin.spec, context, signal);
                     return data;
                 }

package/dist/cjs/runtime/trace-queries.js

@@ -60,7 +60,10 @@ function useTraceQueries(definitions) {
                 refetchOnReconnect: false,
                 staleTime: Infinity,
                 queryFn: async ({ signal })=>{
-                    const plugin = await getPlugin(TRACE_QUERY_KEY, traceQueryKind);
+                    const plugin = await getPlugin({
+                        kind: TRACE_QUERY_KEY,
+                        name: traceQueryKind
+                    });
                     const data = await plugin.getTraceData(definition.spec.plugin.spec, context, signal);
                     return data;
                 }

package/dist/cjs/test/mock-data.js

@@ -21,6 +21,9 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    get MOCK_ALERTS_DATA () {
+        return MOCK_ALERTS_DATA;
+    },
     get MOCK_EMPTY_PLUGIN_MODULE () {
         return MOCK_EMPTY_PLUGIN_MODULE;
     },
@@ -45,6 +48,9 @@ _export(exports, {
     get MOCK_REMOTE_PLUGIN_MODULE () {
         return MOCK_REMOTE_PLUGIN_MODULE;
     },
+    get MOCK_SILENCES_DATA () {
+        return MOCK_SILENCES_DATA;
+    },
     get MOCK_TIME_SERIES_DATA () {
         return MOCK_TIME_SERIES_DATA;
     },
@@ -170,6 +176,51 @@ const MOCK_PROFILE_DATA = {
         name: 'cpu'
     }
 };
+const MOCK_ALERTS_DATA = {
+    alerts: [
+        {
+            id: 'abc123',
+            name: 'HighErrorRate',
+            state: 'firing',
+            labels: {
+                alertname: 'HighErrorRate',
+                severity: 'critical',
+                service: 'backend'
+            },
+            annotations: {
+                summary: 'High error rate detected'
+            },
+            severity: 'critical',
+            startsAt: '2024-01-01T00:00:00Z',
+            endsAt: '2024-01-02T00:00:00Z',
+            updatedAt: '2024-01-01T12:00:00Z',
+            receivers: [
+                'cluster-01'
+            ]
+        }
+    ]
+};
+const MOCK_SILENCES_DATA = {
+    silences: [
+        {
+            id: 'silence-1',
+            state: 'active',
+            matchers: [
+                {
+                    name: 'alertname',
+                    value: 'HighErrorRate',
+                    isRegex: false,
+                    isEqual: true
+                }
+            ],
+            startsAt: '2024-01-01T00:00:00Z',
+            endsAt: '2024-01-02T00:00:00Z',
+            createdBy: 'admin',
+            comment: 'Maintenance window',
+            updatedAt: '2024-01-01T00:00:00Z'
+        }
+    ]
+};
 const MOCK_VALID_PLUGIN_METADATA = {
     kind: 'Panel',
     spec: {

package/dist/cjs/test/test-plugins/bert/index.js

@@ -14,18 +14,10 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: Object.getOwnPropertyDescriptor(all, name).get
-    });
-}
-_export(exports, {
-    get BertPanel1 () {
-        return BertPanel1;
-    },
-    get BertPanel2 () {
-        return BertPanel2;
+Object.defineProperty(exports, "plugins", {
+    enumerable: true,
+    get: function() {
+        return plugins;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -48,6 +40,7 @@ function BertPanel1Editor({ value, onChange }) {
         ]
     });
 }
+// Dummy plugins to test loading
 const BertPanel1 = {
     PanelComponent: ()=>null,
     panelOptionsEditorComponents: [
@@ -100,3 +93,7 @@ const BertPanel2 = {
         }),
     hideQueryEditor: true
 };
+const plugins = {
+    'Panel:BertPanel1::1.0.0': BertPanel1,
+    'Panel:BertPanel2::1.0.0': BertPanel2
+};

package/dist/cjs/test/test-plugins/ernie/index.js

@@ -14,18 +14,10 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: Object.getOwnPropertyDescriptor(all, name).get
-    });
-}
-_export(exports, {
-    get ErnieVariable1 () {
-        return ErnieVariable1;
-    },
-    get ErnieVariable2 () {
-        return ErnieVariable2;
+Object.defineProperty(exports, "plugins", {
+    enumerable: true,
+    get: function() {
+        return plugins;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -39,6 +31,7 @@ const data = [
         value: 'Snuffleupagus'
     }
 ];
+// Dummy plugin to test loading
 const ErnieVariable1 = {
     getVariableOptions: async ()=>({
             data
@@ -93,3 +86,7 @@ const ErnieVariable2 = {
             variableOption2: ''
         })
 };
+const plugins = {
+    'Variable:ErnieVariable1::1.0.0': ErnieVariable1,
+    'Variable:ErnieVariable2::1.0.0': ErnieVariable2
+};

package/dist/cjs/test/test-plugins/index.js

@@ -72,10 +72,10 @@ function _interop_require_wildcard(obj, nodeInterop) {
 const testPluginLoader = (0, _model.dynamicImportPluginLoader)([
     {
         resource: _pluginjson.default,
-        importPlugin: ()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("./bert")))
+        importPlugin: ()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("./bert"))).then((m)=>m.plugins)
     },
     {
         resource: _pluginjson1.default,
-        importPlugin: ()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("./ernie")))
+        importPlugin: ()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("./ernie"))).then((m)=>m.plugins)
     }
 ]);

package/dist/cjs/test/utils.js

@@ -22,7 +22,6 @@ Object.defineProperty(exports, "getTestContextWrapper", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _reactquery = require("@tanstack/react-query");
-const _core = require("@perses-dev/core");
 const _components = require("../components");
 const _runtime = require("../runtime");
 const _testplugins = require("./test-plugins");
@@ -36,8 +35,9 @@ function getTestContextWrapper(contextOptions) {
             }
         }
     });
+    const DEFAULT_DASHBOARD_DURATION = '1h';
     const timeRange = {
-        start: new Date(Date.now() - Number(_core.DEFAULT_DASHBOARD_DURATION)),
+        start: new Date(Date.now() - Number(DEFAULT_DASHBOARD_DURATION)),
         end: new Date()
     };
     return function Wrapper({ children }) {

package/dist/cjs/test-utils/mock-plugin-registry.js

@@ -28,12 +28,13 @@ _export(exports, {
         return mockPluginRegistry;
     }
 });
+const _model = require("../model");
 function mockPluginRegistry(...mockPlugins) {
     const mockPluginResource = {
         kind: 'PluginModule',
         metadata: {
             name: 'Fake Plugin Module for Tests',
-            version: '0'
+            version: '1.0.0'
         },
         spec: {
             // Add metadata for all mock plugins
@@ -51,7 +52,12 @@ function mockPluginRegistry(...mockPlugins) {
     const mockPluginModule = {};
     for (const mockPlugin of mockPlugins){
         // "Export" on the module under the same name as the kind the plugin handles
-        mockPluginModule[mockPlugin.spec.name] = mockPlugin.plugin;
+        mockPluginModule[(0, _model.getPluginModuleCompoundKey)({
+            kind: mockPlugin.kind,
+            name: mockPlugin.spec.name,
+            registry: mockPluginResource.metadata.registry,
+            version: mockPluginResource.metadata.version
+        })] = mockPlugin.plugin;
     }
     const pluginLoader = {
         getInstalledPlugins () {

package/dist/cjs/utils/index.js

@@ -14,7 +14,6 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_export_star(require("./action"), exports);
 _export_star(require("./event"), exports);
 _export_star(require("./variables"), exports);
 _export_star(require("./csv-export"), exports);

package/dist/components/Annotations/AnnotationEditorForm/AnnotationEditorForm.d.ts

@@ -0,0 +1,16 @@
+import { DispatchWithoutAction, ReactElement } from 'react';
+import { AnnotationSpec } from '@perses-dev/spec';
+import { Action } from '@perses-dev/client';
+interface AnnotationEditorFormProps {
+    initialAnnotationSpec: AnnotationSpec;
+    action: Action;
+    isDraft: boolean;
+    isReadonly?: boolean;
+    onActionChange?: (action: Action) => void;
+    onSave: (def: AnnotationSpec) => void;
+    onClose: () => void;
+    onDelete?: DispatchWithoutAction;
+}
+export declare function AnnotationEditorForm({ initialAnnotationSpec, action, isDraft, isReadonly, onActionChange, onSave, onClose, onDelete, }: AnnotationEditorFormProps): ReactElement;
+export {};
+//# sourceMappingURL=AnnotationEditorForm.d.ts.map

package/dist/components/Annotations/AnnotationEditorForm/AnnotationEditorForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnnotationEditorForm.d.ts","sourceRoot":"","sources":["../../../../src/components/Annotations/AnnotationEditorForm/AnnotationEditorForm.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,qBAAqB,EAAE,YAAY,EAAyB,MAAM,OAAO,CAAC;AAEnF,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAclD,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAmD5C,UAAU,yBAAyB;IACjC,qBAAqB,EAAE,cAAc,CAAC;IACtC,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,MAAM,EAAE,CAAC,GAAG,EAAE,cAAc,KAAK,IAAI,CAAC;IACtC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,qBAAqB,CAAC;CAClC;AAED,wBAAgB,oBAAoB,CAAC,EACnC,qBAAqB,EACrB,MAAM,EACN,OAAO,EACP,UAAU,EACV,cAAc,EACd,MAAM,EACN,OAAO,EACP,QAAQ,GACT,EAAE,yBAAyB,GAAG,YAAY,CAuK1C"}

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

@@ -0,0 +1,270 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// 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.
+import { useCallback, useState } from 'react';
+import { Box, Typography, TextField, Grid, Divider, Stack, IconButton } from '@mui/material';
+import { DiscardChangesConfirmationDialog, ErrorAlert, ErrorBoundary, FormActions, OptionsColorPicker, getSubmitText, getTitleAction } from '@perses-dev/components';
+import { Controller, FormProvider, useForm, useWatch } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useQueryClient } from '@tanstack/react-query';
+import InvertColorsIcon from 'mdi-material-ui/InvertColors';
+import { PluginEditor } from '../../PluginEditor';
+import { useValidationSchemas } from '../../../context';
+import { DEFAULT_ANNOTATION_COLOR } from '../constants';
+import { AnnotationPreview } from './AnnotationPreview';
+function FallbackPreview() {
+    return /*#__PURE__*/ _jsx("div", {
+        children: "Error previewing annotations"
+    });
+}
+function AnnotationPluginControl({ action, control, onRunQuery }) {
+    const plugin = useWatch({
+        control,
+        name: 'plugin'
+    });
+    const kind = plugin?.kind;
+    const pluginSpec = plugin?.spec;
+    return /*#__PURE__*/ _jsx(Controller, {
+        control: control,
+        name: "plugin",
+        render: ({ field })=>{
+            return /*#__PURE__*/ _jsx(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
+            });
+        }
+    });
+}
+export function AnnotationEditorForm({ initialAnnotationSpec, action, isDraft, isReadonly, onActionChange, onSave, onClose, onDelete }) {
+    const queryClient = useQueryClient();
+    const [isDiscardDialogOpened, setDiscardDialogOpened] = useState(false);
+    const titleAction = getTitleAction(action, isDraft);
+    const submitText = getSubmitText(action, isDraft);
+    const { annotationEditorSchema } = useValidationSchemas();
+    const form = useForm({
+        resolver: 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] = useState(structuredClone(form.getValues()));
+    const handleRunQuery = 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__*/ _jsxs(FormProvider, {
+        ...form,
+        children: [
+            /*#__PURE__*/ _jsxs(Box, {
+                sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    padding: (theme)=>theme.spacing(1, 2),
+                    borderBottom: (theme)=>`1px solid ${theme.palette.divider}`
+                },
+                children: [
+                    /*#__PURE__*/ _jsxs(Typography, {
+                        variant: "h2",
+                        children: [
+                            titleAction,
+                            " Annotation"
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(FormActions, {
+                        action: action,
+                        submitText: submitText,
+                        isReadonly: isReadonly,
+                        isValid: form.formState.isValid,
+                        onActionChange: onActionChange,
+                        onSubmit: form.handleSubmit(processForm),
+                        onDelete: onDelete,
+                        onCancel: handleCancel
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(Box, {
+                padding: 2,
+                sx: {
+                    overflowY: 'scroll'
+                },
+                children: [
+                    /*#__PURE__*/ _jsxs(Grid, {
+                        container: true,
+                        spacing: 2,
+                        mb: 2,
+                        children: [
+                            /*#__PURE__*/ _jsx(Grid, {
+                                item: true,
+                                xs: 12,
+                                children: /*#__PURE__*/ _jsx(Controller, {
+                                    control: form.control,
+                                    name: "display.name",
+                                    render: ({ field, fieldState })=>/*#__PURE__*/ _jsx(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__*/ _jsx(Grid, {
+                                item: true,
+                                xs: 12,
+                                children: /*#__PURE__*/ _jsxs(Stack, {
+                                    direction: "row",
+                                    gap: 1,
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Controller, {
+                                            control: form.control,
+                                            name: "display.color",
+                                            render: ({ field })=>{
+                                                const isEnabled = field.value !== undefined;
+                                                return /*#__PURE__*/ _jsx(_Fragment, {
+                                                    children: isEnabled ? /*#__PURE__*/ _jsx(OptionsColorPicker, {
+                                                        size: "medium",
+                                                        label: "annotation",
+                                                        color: field.value ?? DEFAULT_ANNOTATION_COLOR,
+                                                        onColorChange: (color)=>field.onChange(color),
+                                                        onClear: ()=>field.onChange(undefined)
+                                                    }) : /*#__PURE__*/ _jsx(IconButton, {
+                                                        size: "medium",
+                                                        onClick: ()=>field.onChange(DEFAULT_ANNOTATION_COLOR),
+                                                        children: /*#__PURE__*/ _jsx(InvertColorsIcon, {})
+                                                    })
+                                                });
+                                            }
+                                        }),
+                                        /*#__PURE__*/ _jsx(Controller, {
+                                            control: form.control,
+                                            name: "display.description",
+                                            render: ({ field, fieldState })=>/*#__PURE__*/ _jsx(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__*/ _jsx(Divider, {}),
+                    /*#__PURE__*/ _jsx(ErrorBoundary, {
+                        FallbackComponent: FallbackPreview,
+                        resetKeys: [
+                            previewSpec
+                        ],
+                        children: /*#__PURE__*/ _jsx(AnnotationPreview, {
+                            spec: previewSpec,
+                            sx: {
+                                marginY: 2
+                            }
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(ErrorBoundary, {
+                        FallbackComponent: ErrorAlert,
+                        children: /*#__PURE__*/ _jsx(AnnotationPluginControl, {
+                            action: action,
+                            control: form.control,
+                            onRunQuery: handleRunQuery
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(DiscardChangesConfirmationDialog, {
+                description: "Are you sure you want to discard these changes? Changes cannot be recovered.",
+                isOpen: isDiscardDialogOpened,
+                onCancel: ()=>{
+                    setDiscardDialogOpened(false);
+                },
+                onDiscardChanges: ()=>{
+                    setDiscardDialogOpened(false);
+                    onClose();
+                }
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=AnnotationEditorForm.js.map