@perses-dev/dashboards 0.0.0-snapshot-scatterplot-fix-imports-95e1b59 → 0.0.0-snapshot-explorer-plugin-c4a7621

package/dist/cjs/components/PanelDrawer/PanelEditorForm.js

@@ -36,25 +36,35 @@ const _pluginsystem = require("@perses-dev/plugin-system");
 const _reacthookform = require("react-hook-form");
 const _zod = require("@hookform/resolvers/zod");
 const _context = require("../../context");
-const _validation = require("../../validation");
 const _PanelPreview = require("./PanelPreview");
 const _usePanelEditor = require("./usePanelEditor");
 function PanelEditorForm(props) {
-    const { initialValues: { panelDefinition: initialPanelDef, groupId: initialGroupId }, initialAction, onSave, onClose } = props;
+    const { initialValues, initialAction, onSave, onClose } = props;
     const panelGroups = (0, _context.useListPanelGroups)();
-    const [groupId, setGroupId] = (0, _react.useState)(initialGroupId);
-    const { panelDefinition, setName, setDescription, setQueries, setPlugin, setPanelDefinition } = (0, _usePanelEditor.usePanelEditor)(initialPanelDef);
+    const { panelDefinition, setName, setDescription, setLinks, setQueries, setPlugin, setPanelDefinition } = (0, _usePanelEditor.usePanelEditor)(initialValues.panelDefinition);
     const { plugin } = panelDefinition.spec;
     const [isDiscardDialogOpened, setDiscardDialogOpened] = (0, _react.useState)(false);
     // Use common plugin editor logic even though we've split the inputs up in this form
     const pluginEditor = (0, _pluginsystem.usePluginEditor)({
-        pluginType: 'Panel',
+        pluginTypes: [
+            'Panel'
+        ],
         value: {
-            kind: plugin.kind,
+            selection: {
+                kind: plugin.kind,
+                type: 'Panel'
+            },
             spec: plugin.spec
         },
         onChange: (plugin)=>{
-            setPlugin(plugin);
+            form.setValue('panelDefinition.spec.plugin', {
+                kind: plugin.selection.kind,
+                spec: plugin.spec
+            });
+            setPlugin({
+                kind: plugin.selection.kind,
+                spec: plugin.spec
+            });
         },
         onHideQueryEditorChange: (isHidden)=>{
             setQueries(undefined, isHidden);
@@ -62,35 +72,31 @@ function PanelEditorForm(props) {
     });
     const titleAction = (0, _pluginsystem.getTitleAction)(initialAction, true);
     const submitText = (0, _pluginsystem.getSubmitText)(initialAction, true);
+    const { panelEditorSchema } = (0, _pluginsystem.useValidationSchemas)();
     const form = (0, _reacthookform.useForm)({
-        resolver: (0, _zod.zodResolver)(_validation.panelEditorValidationSchema),
+        resolver: (0, _zod.zodResolver)(panelEditorSchema),
         mode: 'onBlur',
-        defaultValues: {
-            name: initialPanelDef.spec.display.name,
-            groupId: initialGroupId,
-            description: initialPanelDef.spec.display.description,
-            type: pluginEditor.pendingKind ? pluginEditor.pendingKind : plugin.kind
-        }
+        defaultValues: initialValues
+    });
+    const links = (0, _reacthookform.useWatch)({
+        control: form.control,
+        name: 'panelDefinition.spec.links'
     });
-    const processForm = ()=>{
-        const values = {
-            groupId,
-            panelDefinition
-        };
-        onSave(values);
+    (0, _react.useEffect)(()=>{
+        setLinks(links);
+    }, [
+        setLinks,
+        links
+    ]);
+    const processForm = (data)=>{
+        onSave(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
     function handleCancel() {
-        if (JSON.stringify({
-            groupId: initialGroupId,
-            panelDefinition: initialPanelDef
-        }) !== JSON.stringify({
-            groupId,
-            panelDefinition
-        })) {
+        if (JSON.stringify(initialValues) !== JSON.stringify(form.getValues())) {
             setDiscardDialogOpened(true);
         } else {
             onClose();
@@ -159,98 +165,93 @@ function PanelEditorForm(props) {
                             item: true,
                             xs: 8,
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                                name: "name",
-                                render: ({ field, fieldState })=>{
-                                    var _fieldState_error;
-                                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                                control: form.control,
+                                name: "panelDefinition.spec.display.name",
+                                render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                                         ...field,
                                         required: true,
                                         fullWidth: true,
                                         label: "Name",
                                         error: !!fieldState.error,
-                                        helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                        helperText: fieldState.error?.message,
+                                        value: field.value ?? '',
                                         onChange: (event)=>{
                                             field.onChange(event);
                                             setName(event.target.value);
                                         }
-                                    });
-                                }
+                                    })
                             })
                         }),
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
                             item: true,
                             xs: 4,
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
+                                control: form.control,
                                 name: "groupId",
-                                render: ({ field, fieldState })=>{
-                                    var _fieldState_error;
-                                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                                render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                                         select: true,
                                         ...field,
                                         required: true,
                                         fullWidth: true,
                                         label: "Group",
                                         error: !!fieldState.error,
-                                        helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                        helperText: fieldState.error?.message,
                                         onChange: (event)=>{
                                             field.onChange(event);
-                                            setGroupId(+event.target.value);
                                         },
-                                        children: panelGroups.map((panelGroup, index)=>/*#__PURE__*/ {
-                                            var _panelGroup_title;
-                                            return (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                        children: panelGroups.map((panelGroup, index)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
                                                 value: panelGroup.id,
-                                                children: (_panelGroup_title = panelGroup.title) !== null && _panelGroup_title !== void 0 ? _panelGroup_title : `Group ${index + 1}`
-                                            }, panelGroup.id);
-                                        })
-                                    });
-                                }
+                                                children: panelGroup.title ?? `Group ${index + 1}`
+                                            }, panelGroup.id))
+                                    })
                             })
                         }),
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
                             item: true,
                             xs: 8,
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                                name: "description",
-                                render: ({ field, fieldState })=>{
-                                    var _fieldState_error;
-                                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                                control: form.control,
+                                name: "panelDefinition.spec.display.description",
+                                render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                                         ...field,
                                         fullWidth: true,
                                         label: "Description",
                                         error: !!fieldState.error,
-                                        helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                        helperText: fieldState.error?.message,
+                                        value: field.value ?? '',
                                         onChange: (event)=>{
                                             field.onChange(event);
                                             setDescription(event.target.value);
                                         }
-                                    });
-                                }
+                                    })
                             })
                         }),
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
                             item: true,
                             xs: 4,
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
-                                name: "type",
-                                render: ({ field, fieldState })=>/*#__PURE__*/ {
-                                    var _pluginEditor_error, _fieldState_error;
-                                    var _pluginEditor_error_message;
-                                    return (0, _jsxruntime.jsx)(_pluginsystem.PluginKindSelect, {
+                                control: form.control,
+                                name: "panelDefinition.spec.plugin.kind",
+                                render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.PluginKindSelect, {
                                         ...field,
-                                        pluginType: "Panel",
+                                        pluginTypes: [
+                                            'Panel'
+                                        ],
                                         required: true,
                                         fullWidth: true,
                                         label: "Type",
                                         disabled: pluginEditor.isLoading,
                                         error: !!pluginEditor.error || !!fieldState.error,
-                                        helperText: (_pluginEditor_error_message = (_pluginEditor_error = pluginEditor.error) === null || _pluginEditor_error === void 0 ? void 0 : _pluginEditor_error.message) !== null && _pluginEditor_error_message !== void 0 ? _pluginEditor_error_message : (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                        helperText: pluginEditor.error?.message ?? fieldState.error?.message,
+                                        value: {
+                                            type: 'Panel',
+                                            kind: field.value
+                                        },
                                         onChange: (event)=>{
-                                            field.onChange(event);
-                                            pluginEditor.onKindChange(event);
+                                            field.onChange(event.kind);
+                                            pluginEditor.onSelectionChange(event);
                                         }
-                                    });
-                                }
+                                    })
                             })
                         }),
                         /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Grid, {
@@ -276,6 +277,7 @@ function PanelEditorForm(props) {
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
                                 FallbackComponent: _components.ErrorAlert,
                                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.PanelSpecEditor, {
+                                    control: form.control,
                                     panelDefinition: panelDefinition,
                                     onJSONChange: handlePanelDefinitionChange,
                                     onQueriesChange: (queries)=>{

package/dist/cjs/components/PanelDrawer/PanelPreview.js

@@ -34,11 +34,14 @@ function PanelPreview({ panelDefinition }) {
         width = boxRef.current.getBoundingClientRect().width;
     }
     const suggestedStepMs = (0, _pluginsystem.useSuggestedStepMs)(width);
+    const { data: plugin, isPending } = (0, _pluginsystem.usePlugin)('Panel', panelDefinition.spec.plugin.kind);
+    if (isPending) {
+        return null;
+    }
     if (panelDefinition.spec.plugin.kind === '') {
         return null;
     }
-    var _panelDefinition_spec_queries;
-    const queries = (_panelDefinition_spec_queries = panelDefinition.spec.queries) !== null && _panelDefinition_spec_queries !== void 0 ? _panelDefinition_spec_queries : [];
+    const queries = panelDefinition.spec.queries ?? [];
     // map TimeSeriesQueryDefinition to Definition<UnknownSpec>
     const definitions = queries.length ? queries.map((query)=>{
         return {
@@ -52,7 +55,8 @@ function PanelPreview({ panelDefinition }) {
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DataQueriesProvider, {
             definitions: definitions,
             options: {
-                suggestedStepMs
+                suggestedStepMs,
+                ...plugin?.queryOptions
             },
             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Panel.Panel, {
                 definition: panelDefinition

package/dist/cjs/components/PanelDrawer/usePanelEditor.js

@@ -22,9 +22,10 @@ Object.defineProperty(exports, "usePanelEditor", {
 });
 const _react = require("react");
 const usePanelEditor = (panelDefinition)=>{
-    const { display, plugin: pluginDefinition, queries: initialQueries } = panelDefinition.spec;
+    const { display, plugin: pluginDefinition, queries: initialQueries, links: initialLinks } = panelDefinition.spec;
     const [name, setName] = (0, _react.useState)(display.name);
     const [description, setDescription] = (0, _react.useState)(display.description);
+    const [links, setLinks] = (0, _react.useState)(initialLinks);
     const [plugin, setPlugin] = (0, _react.useState)(pluginDefinition);
     // need to keep track of prevQueries if switching from a panel with no queries (ex: markdown) to one with queries
     const [prevQueries, setPrevQueries] = (0, _react.useState)(initialQueries);
@@ -47,14 +48,16 @@ const usePanelEditor = (panelDefinition)=>{
     ]);
     // reset panel definition
     const setPanelDefinition = (0, _react.useCallback)((panelDefinition)=>{
-        const { display, plugin, queries } = panelDefinition.spec;
+        const { display, plugin, queries, links } = panelDefinition.spec;
         setName(display.name);
         setDescription(display.description);
+        setLinks(links);
         setPlugin(plugin);
         setQueries(queries);
     }, [
         setName,
         setDescription,
+        setLinks,
         setPlugin,
         setQueries
     ]);
@@ -67,23 +70,23 @@ const usePanelEditor = (panelDefinition)=>{
                         description
                     },
                     plugin,
-                    queries: currentQueries
+                    queries: currentQueries,
+                    links
                 }
             },
             setName,
             setDescription,
+            setLinks,
             setQueries,
             setPlugin,
             setPanelDefinition
         }), [
         name,
         description,
+        links,
         plugin,
         currentQueries,
-        setName,
-        setDescription,
         setQueries,
-        setPlugin,
         setPanelDefinition
     ]);
 };

package/dist/cjs/components/PanelGroupDialog/PanelGroupDialog.js

@@ -38,7 +38,7 @@ function PanelGroupDialog() {
     const handleClose = ()=>setIsClosing(true);
     // Don't call close on the store until the Dialog has completely transitioned out
     const handleExited = ()=>{
-        panelGroupEditor === null || panelGroupEditor === void 0 ? void 0 : panelGroupEditor.close();
+        panelGroupEditor?.close();
         setIsClosing(false);
     };
     // Dialog is open if we have a model and we're not transitioning out

package/dist/cjs/components/QuerySummaryTable/QuerySummaryTable.js

@@ -34,7 +34,7 @@ function QuerySummaryTable(props) {
     // for displaying a summary of recent query results
     const queryClient = (0, _reactquery.useQueryClient)();
     const queries = queryClient.getQueryCache().findAll();
-    const activeQueries = queries.filter((query)=>query.state.status === 'loading');
+    const activeQueries = queries.filter((query)=>query.state.status === 'pending');
     const completedQueries = queries.filter((query)=>query.state.status === 'success');
     const querySummary = (0, _pluginsystem.useActiveTimeSeriesQueries)();
     if (datasourceClient.isLoading === true) {
@@ -42,12 +42,10 @@ function QuerySummaryTable(props) {
     }
     const warnings = [];
     querySummary.forEach((query)=>{
-        var _queryData_metadata;
         const queryData = query.state.data;
-        if (queryData && ((_queryData_metadata = queryData.metadata) === null || _queryData_metadata === void 0 ? void 0 : _queryData_metadata.notices)) {
-            var _queryData_metadata_notices_;
+        if (queryData && queryData.metadata?.notices) {
             const queryKey = query.queryKey;
-            const warningMessage = (_queryData_metadata_notices_ = queryData.metadata.notices[0]) === null || _queryData_metadata_notices_ === void 0 ? void 0 : _queryData_metadata_notices_.message;
+            const warningMessage = queryData.metadata.notices[0]?.message;
             if (warningMessage) {
                 warnings.push({
                     query: String(queryKey[0].spec.plugin.spec.query),

package/dist/cjs/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.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
@@ -29,13 +29,11 @@ const _components = require("@perses-dev/components");
 const _context = require("../../context");
 const SaveChangesConfirmationDialog = ()=>{
     const { saveChangesConfirmationDialog: dialog } = (0, _context.useSaveChangesConfirmationDialog)();
-    var _dialog_isSavedDurationModified;
-    const isSavedDurationModified = (_dialog_isSavedDurationModified = dialog === null || dialog === void 0 ? void 0 : dialog.isSavedDurationModified) !== null && _dialog_isSavedDurationModified !== void 0 ? _dialog_isSavedDurationModified : true;
-    var _dialog_isSavedVariableModified;
-    const isSavedVariableModified = (_dialog_isSavedVariableModified = dialog === null || dialog === void 0 ? void 0 : dialog.isSavedVariableModified) !== null && _dialog_isSavedVariableModified !== void 0 ? _dialog_isSavedVariableModified : true;
+    const isSavedDurationModified = dialog?.isSavedDurationModified ?? true;
+    const isSavedVariableModified = dialog?.isSavedVariableModified ?? true;
     const [saveDefaultTimeRange, setSaveDefaultTimeRange] = (0, _react.useState)(isSavedDurationModified);
     const [saveDefaultVariables, setSaveDefaultVariables] = (0, _react.useState)(isSavedVariableModified);
-    const { getSavedVariablesStatus } = (0, _context.useTemplateVariableActions)();
+    const { getSavedVariablesStatus } = (0, _context.useVariableDefinitionActions)();
     const { modifiedVariableNames } = getSavedVariablesStatus();
     const isOpen = dialog !== undefined;
     const { timeRange } = (0, _pluginsystem.useTimeRange)();

package/dist/cjs/components/SaveDashboardButton/SaveDashboardButton.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
@@ -29,7 +29,7 @@ const _context = require("../../context");
 const SaveDashboardButton = ({ onSave, isDisabled, variant = 'contained' })=>{
     const [isSavingDashboard, setSavingDashboard] = (0, _react.useState)(false);
     const { dashboard, setDashboard } = (0, _context.useDashboard)();
-    const { getSavedVariablesStatus, setVariableDefaultValues } = (0, _context.useTemplateVariableActions)();
+    const { getSavedVariablesStatus, setVariableDefaultValues } = (0, _context.useVariableDefinitionActions)();
     const { isSavedVariableModified } = getSavedVariablesStatus();
     const { timeRange } = (0, _pluginsystem.useTimeRange)();
     const { setEditMode } = (0, _context.useEditMode)();

package/dist/cjs/components/Variables/BuiltinVariableAccordions.js

@@ -59,9 +59,7 @@ function BuiltinVariableAccordions({ builtinVariableDefinitions }) {
         builtinVariablesBySource
     ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
-        children: sources.map((source)=>/*#__PURE__*/ {
-            var _builtinVariablesBySource_source;
-            return (0, _jsxruntime.jsxs)(_material.Accordion, {
+        children: sources.map((source)=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Accordion, {
                 sx: (theme)=>({
                         '.MuiAccordionSummary-root': {
                             backgroundColor: theme.palette.background.lighter
@@ -78,12 +76,12 @@ function BuiltinVariableAccordions({ builtinVariableDefinitions }) {
                         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
                             variant: "h2",
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
-                                title: `${source} Builtin Variables`,
+                                title: `${source} Built-in Variables`,
                                 description: "Variables computed during dashboard rendering.",
                                 children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
                                     children: [
                                         source,
-                                        " Builtin Variables"
+                                        " Built-in Variables"
                                     ]
                                 })
                             })
@@ -110,10 +108,7 @@ function BuiltinVariableAccordions({ builtinVariableDefinitions }) {
                                         })
                                     }),
                                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableBody, {
-                                        children: ((_builtinVariablesBySource_source = builtinVariablesBySource[source]) !== null && _builtinVariablesBySource_source !== void 0 ? _builtinVariablesBySource_source : []).map((v)=>/*#__PURE__*/ {
-                                            var _v_spec_display;
-                                            var _v_spec_display_description;
-                                            return (0, _jsxruntime.jsxs)(_material.TableRow, {
+                                        children: (builtinVariablesBySource[source] ?? []).map((v)=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TableRow, {
                                                 children: [
                                                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {
                                                         component: "th",
@@ -124,18 +119,16 @@ function BuiltinVariableAccordions({ builtinVariableDefinitions }) {
                                                         children: v.spec.name
                                                     }),
                                                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {
-                                                        children: (_v_spec_display_description = (_v_spec_display = v.spec.display) === null || _v_spec_display === void 0 ? void 0 : _v_spec_display.description) !== null && _v_spec_display_description !== void 0 ? _v_spec_display_description : ''
+                                                        children: v.spec.display?.description ?? ''
                                                     })
                                                 ]
-                                            }, source + '-' + v.spec.name);
-                                        })
+                                            }, source + '-' + v.spec.name))
                                     })
                                 ]
                             })
                         })
                     })
                 ]
-            }, source);
-        })
+            }, source))
     });
 }

package/dist/cjs/components/Variables/EditVariablesButton.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
@@ -36,10 +36,10 @@ function _interop_require_default(obj) {
 }
 function EditVariablesButton({ variant = 'text', label = 'Variables', color = 'primary', fullWidth }) {
     const [isVariableEditorOpen, setIsVariableEditorOpen] = (0, _react.useState)(false);
-    const variableDefinitions = (0, _context.useTemplateVariableDefinitions)();
-    const externalVariableDefinitions = (0, _context.useTemplateExternalVariableDefinitions)();
+    const variableDefinitions = (0, _context.useVariableDefinitions)();
+    const externalVariableDefinitions = (0, _context.useExternalVariableDefinitions)();
     const builtinVariableDefinitions = (0, _pluginsystem.useBuiltinVariableDefinitions)();
-    const { setVariableDefinitions } = (0, _context.useTemplateVariableActions)();
+    const { setVariableDefinitions } = (0, _context.useVariableDefinitionActions)();
     const openVariableEditor = ()=>{
         setIsVariableEditorOpen(true);
     };