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

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

@@ -0,0 +1,246 @@
+// 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, "PanelAnnotationsEditor", {
+    enumerable: true,
+    get: function() {
+        return PanelAnnotationsEditor;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _Plus = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Plus"));
+const _Pencil = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Pencil"));
+const _TrashCan = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/TrashCan"));
+const _ArrowUp = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ArrowUp"));
+const _ArrowDown = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ArrowDown"));
+const _context = require("../../context");
+const _Annotations = require("../Annotations");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const TableCell = (0, _material.styled)(_material.TableCell)(({ theme })=>({
+        borderBottom: `solid 1px ${theme.palette.divider}`
+    }));
+function findDuplicateNames(specs) {
+    const seen = new Set();
+    const duplicates = new Set();
+    for (const spec of specs){
+        const name = spec.display.name;
+        if (seen.has(name)) {
+            duplicates.add(name);
+        }
+        seen.add(name);
+    }
+    return Array.from(duplicates);
+}
+function PanelAnnotationsEditor({ value, onChange, isReadonly }) {
+    const [target, setTarget] = (0, _react.useState)(null);
+    const [formAction, setFormAction] = (0, _react.useState)('update');
+    const duplicateNames = (0, _react.useMemo)(()=>findDuplicateNames(value), [
+        value
+    ]);
+    const initialSpec = (0, _react.useMemo)(()=>{
+        if (target?.kind === 'new') {
+            return {
+                display: {
+                    name: 'NewAnnotation'
+                },
+                plugin: {}
+            };
+        }
+        if (target?.kind === 'edit') {
+            return value[target.index];
+        }
+        return undefined;
+    }, [
+        target,
+        value
+    ]);
+    const removeAnnotation = (index)=>{
+        onChange(value.filter((_, i)=>i !== index));
+    };
+    const changeAnnotationOrder = (index, direction)=>{
+        const step = direction === 'up' ? -1 : 1;
+        const swapWith = index + step;
+        const current = value[index];
+        const adjacent = value[swapWith];
+        if (!current || !adjacent) {
+            return;
+        }
+        const next = [
+            ...value
+        ];
+        next[index] = adjacent;
+        next[swapWith] = current;
+        onChange(next);
+    };
+    const toggleAnnotationVisibility = (index, visible)=>{
+        onChange(value.map((spec, i)=>i === index ? {
+                ...spec,
+                display: {
+                    ...spec.display,
+                    hidden: !visible
+                }
+            } : spec));
+    };
+    const handleSave = (definition)=>{
+        if (target?.kind === 'new') {
+            onChange([
+                ...value,
+                definition
+            ]);
+        } else if (target?.kind === 'edit') {
+            onChange(value.map((spec, i)=>i === target.index ? definition : spec));
+        }
+        setTarget(null);
+    };
+    if (target !== null && initialSpec) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_context.ValidationProvider, {
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Annotations.AnnotationEditorForm, {
+                initialAnnotationSpec: initialSpec,
+                action: formAction,
+                isDraft: true,
+                isReadonly: isReadonly,
+                onActionChange: setFormAction,
+                onSave: handleSave,
+                onClose: ()=>setTarget(null)
+            })
+        });
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+        spacing: 2,
+        padding: 1,
+        children: [
+            duplicateNames.map((name)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Alert, {
+                    severity: "error",
+                    children: `Duplicate annotation name: ${name}`
+                }, name)),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableContainer, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Table, {
+                    "aria-label": "table of panel annotations",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableHead, {
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TableRow, {
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
+                                        children: "Visibility"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
+                                        children: "Name"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
+                                        children: "Type"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
+                                        children: "Description"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
+                                        align: "right",
+                                        children: "Actions"
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableBody, {
+                            children: value.map((annotation, index)=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TableRow, {
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
+                                            component: "th",
+                                            scope: "row",
+                                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Switch, {
+                                                checked: annotation.display?.hidden !== true,
+                                                disabled: isReadonly,
+                                                onChange: (e)=>toggleAnnotationVisibility(index, e.target.checked)
+                                            })
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
+                                            component: "th",
+                                            scope: "row",
+                                            sx: {
+                                                fontWeight: 'bold'
+                                            },
+                                            children: annotation.display.name
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
+                                            children: annotation.plugin.kind
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
+                                            children: annotation.display?.description ?? ''
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(TableCell, {
+                                            align: "right",
+                                            sx: {
+                                                whiteSpace: 'nowrap'
+                                            },
+                                            children: [
+                                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                                    onClick: ()=>changeAnnotationOrder(index, 'up'),
+                                                    disabled: isReadonly || index === 0,
+                                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ArrowUp.default, {})
+                                                }),
+                                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                                    onClick: ()=>changeAnnotationOrder(index, 'down'),
+                                                    disabled: isReadonly || index === value.length - 1,
+                                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ArrowDown.default, {})
+                                                }),
+                                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                                    onClick: ()=>{
+                                                        setFormAction('update');
+                                                        setTarget({
+                                                            kind: 'edit',
+                                                            index
+                                                        });
+                                                    },
+                                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Pencil.default, {})
+                                                }),
+                                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                                    disabled: isReadonly,
+                                                    onClick: ()=>removeAnnotation(index),
+                                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_TrashCan.default, {})
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                }, `${annotation.display.name}-${index}`))
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                display: "flex",
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                    variant: "contained",
+                    startIcon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Plus.default, {}),
+                    sx: {
+                        marginLeft: 'auto'
+                    },
+                    disabled: isReadonly,
+                    onClick: ()=>{
+                        setFormAction('create');
+                        setTarget({
+                            kind: 'new'
+                        });
+                    },
+                    children: "Add Annotation"
+                })
+            })
+        ]
+    });
+}

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

@@ -28,6 +28,7 @@ const _LinksEditor = require("../LinksEditor");
 const _runtime = require("../../runtime");
 const _OptionsEditorTabs = require("../OptionsEditorTabs");
 const _MultiQueryEditor = require("../MultiQueryEditor");
+const _PanelAnnotationsEditor = require("./PanelAnnotationsEditor");
 const PanelSpecEditor = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
     const { control, panelDefinition, onQueriesChange, onQueryRun, onPluginSpecChange, onJSONChange } = props;
     const { kind } = panelDefinition.spec.plugin;
@@ -44,7 +45,7 @@ const PanelSpecEditor = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
     if (!plugin) {
         throw new Error(`Missing implementation for panel plugin with kind '${kind}'`);
     }
-    const { panelOptionsEditorComponents, hideQueryEditor } = plugin;
+    const { panelOptionsEditorComponents, hideQueryEditor, supportsAnnotations } = plugin;
     let tabs = [];
     if (!hideQueryEditor) {
         tabs.push({
@@ -88,6 +89,20 @@ const PanelSpecEditor = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
                 })
             })));
     }
+    // annotations are common to all panel plugins, but only shown for plugins that render them
+    if (supportsAnnotations) {
+        tabs.push({
+            label: 'Annotations',
+            content: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
+                control: control,
+                name: "panelDefinition.spec.annotations",
+                render: ({ field })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelAnnotationsEditor.PanelAnnotationsEditor, {
+                        value: panelDefinition.spec.annotations ?? [],
+                        onChange: (annotations)=>field.onChange(annotations)
+                    })
+            })
+        });
+    }
     // always show json editor and links editor by default
     tabs.push({
         label: 'Links',

package/dist/cjs/components/PluginRegistry/PluginRegistry.js

@@ -51,8 +51,12 @@ function PluginRegistry(props) {
             const resource = pluginIndexes.pluginResourcesByNameKindRegistryVersion.get(resourceKey);
             if (!resource) continue;
             const pluginModule = await loadPluginModule(resource);
+            // Try to get the plugin implementation from the module using the versioned export first
             const plugin = pluginModule?.[resourceKey];
             if (plugin) return plugin;
+            // If the plugin module doesn't have a versioned export, fallback to the plugin name
+            const versionlessPlugin = pluginModule?.[name];
+            if (versionlessPlugin) return versionlessPlugin;
         }
         throw new Error(`A ${name} plugin for kind '${kind}' is not installed`);
     }, [

package/dist/cjs/remote/PluginRuntime.js

@@ -148,11 +148,11 @@ const getPluginRuntime = ()=>{
                     }
                 },
                 '@perses-dev/spec': {
-                    version: '0.2.0-rc.0',
+                    version: '0.3.0-beta.0',
                     lib: ()=>require('@perses-dev/spec'),
                     shareConfig: {
                         singleton: true,
-                        requiredVersion: '^0.2.0-rc.0'
+                        requiredVersion: '^0.3.0-beta.0'
                     }
                 },
                 '@perses-dev/core': {
@@ -164,43 +164,43 @@ const getPluginRuntime = ()=>{
                     }
                 },
                 '@perses-dev/client': {
-                    version: '0.54.0-rc.1',
+                    version: '0.55.0-beta.0',
                     lib: ()=>require('@perses-dev/client'),
                     shareConfig: {
                         singleton: true,
-                        requiredVersion: '^0.54.0-rc.1'
+                        requiredVersion: '^0.55.0-beta.0'
                     }
                 },
                 '@perses-dev/components': {
-                    version: '0.54.0-rc.1',
+                    version: '0.55.0-beta.0',
                     lib: ()=>require('@perses-dev/components'),
                     shareConfig: {
                         singleton: true,
-                        requiredVersion: '^0.54.0-rc.1'
+                        requiredVersion: '^0.55.0-beta.0'
                     }
                 },
                 '@perses-dev/plugin-system': {
-                    version: '0.54.0-rc.1',
+                    version: '0.55.0-beta.0',
                     lib: ()=>require('@perses-dev/plugin-system'),
                     shareConfig: {
                         singleton: true,
-                        requiredVersion: '^0.54.0-rc.1'
+                        requiredVersion: '^0.55.0-beta.0'
                     }
                 },
                 '@perses-dev/explore': {
-                    version: '0.54.0-rc.1',
+                    version: '0.55.0-beta.0',
                     lib: ()=>require('@perses-dev/explore'),
                     shareConfig: {
                         singleton: true,
-                        requiredVersion: '^0.54.0-rc.1'
+                        requiredVersion: '^0.55.0-beta.0'
                     }
                 },
                 '@perses-dev/dashboards': {
-                    version: '0.54.0-rc.1',
+                    version: '0.55.0-beta.0',
                     lib: ()=>require('@perses-dev/dashboards'),
                     shareConfig: {
                         singleton: true,
-                        requiredVersion: '^0.54.0-rc.1'
+                        requiredVersion: '^0.55.0-beta.0'
                     }
                 },
                 // Below are the shared modules that are used by the plugins, this can be part of the SDK

package/dist/cjs/remote/remotePluginLoader.js

@@ -21,6 +21,7 @@ Object.defineProperty(exports, "remotePluginLoader", {
     }
 });
 const _pluginsystem = require("@perses-dev/plugin-system");
+const _client = require("@perses-dev/client");
 const _PluginRuntime = require("./PluginRuntime");
 const isPluginMetadata = (plugin)=>{
     return typeof plugin === 'object' && plugin !== null && 'kind' in plugin && 'spec' in plugin && typeof plugin.spec === 'object' && plugin.spec !== null && 'name' in plugin.spec;
@@ -44,9 +45,10 @@ const paramToOptions = (options)=>{
 };
 function remotePluginLoader(options) {
     const { pluginsApiPath, pluginsAssetsPath } = paramToOptions(options);
+    const fetchFn = options?.fetchFn ?? _client.fetch;
     return {
         getInstalledPlugins: async ()=>{
-            const pluginsResponse = await fetch(pluginsApiPath);
+            const pluginsResponse = await fetchFn(pluginsApiPath);
             const plugins = await pluginsResponse.json();
             let pluginModules = [];
             if (Array.isArray(plugins)) {

package/dist/cjs/runtime/UsageMetricsProvider.js

@@ -70,7 +70,7 @@ const useUsageMetrics = ()=>{
     };
 };
 const submitMetrics = async (stats)=>{
-    await (0, _client.fetch)(`${stats.apiPrefix ?? ''}/api/v1/view`, {
+    await stats.fetchFn(`${stats.apiPrefix ?? ''}/api/v1/view`, {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json'
@@ -84,6 +84,7 @@ const submitMetrics = async (stats)=>{
     });
 };
 const UsageMetricsProvider = ({ apiPrefix, project, dashboard, children })=>{
+    const { fetch } = (0, _client.useFetch)();
     const ctx = {
         project: project,
         dashboard: dashboard,
@@ -91,7 +92,8 @@ const UsageMetricsProvider = ({ apiPrefix, project, dashboard, children })=>{
         startRenderTime: Date.now(),
         renderDurationMs: 0,
         pendingQueries: new Map(),
-        apiPrefix
+        apiPrefix,
+        fetchFn: fetch
     };
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(UsageMetricsContext.Provider, {
         value: ctx,

package/dist/cjs/runtime/item-actions.js

@@ -21,7 +21,6 @@ Object.defineProperty(exports, "executeAction", {
     }
 });
 const _components = require("@perses-dev/components");
-const _client = require("@perses-dev/client");
 const BODY_METHODS = new Set([
     'POST',
     'PUT',
@@ -147,7 +146,7 @@ function buildWebhookHeaders(action) {
 }
 /**
  * Execute a webhook action in individual mode (one request per selection)
- */ async function executeWebhookIndividual(action, selectionMap, variableState, setActionStatus) {
+ */ async function executeWebhookIndividual(action, selectionMap, variableState, setActionStatus, fetchFn) {
     const entries = Array.from(selectionMap.entries());
     const count = entries.length;
     const itemResults = new Map();
@@ -174,7 +173,7 @@ function buildWebhookHeaders(action) {
                 body = bodyResult.text;
             }
             // Make the request
-            const response = await (0, _client.fetch)(urlResult.text, {
+            const response = await fetchFn(urlResult.text, {
                 method: action.method,
                 headers: buildWebhookHeaders(action),
                 body: body
@@ -222,7 +221,7 @@ function buildWebhookHeaders(action) {
 }
 /**
  * Execute a webhook action in batch mode (single request with all selections)
- */ async function executeWebhookBatch(action, selectionMap, variableState, setActionStatus) {
+ */ async function executeWebhookBatch(action, selectionMap, variableState, setActionStatus, fetchFn) {
     const items = Array.from(selectionMap.values());
     setActionStatus(action.name, {
         loading: true
@@ -239,7 +238,7 @@ function buildWebhookHeaders(action) {
             body = bodyResult.text;
         }
         // Make the request
-        const response = await (0, _client.fetch)(urlResult.text, {
+        const response = await fetchFn(urlResult.text, {
             method: action.method,
             headers: buildWebhookHeaders(action),
             body: body
@@ -268,11 +267,11 @@ function buildWebhookHeaders(action) {
 }
 /**
  * Execute a webhook action
- */ async function executeWebhookAction(action, selectionMap, variableState, setActionStatus) {
+ */ async function executeWebhookAction(action, selectionMap, variableState, setActionStatus, fetchFn) {
     if (action.batchMode === 'batch') {
-        return executeWebhookBatch(action, selectionMap, variableState, setActionStatus);
+        return executeWebhookBatch(action, selectionMap, variableState, setActionStatus, fetchFn);
     } else {
-        return executeWebhookIndividual(action, selectionMap, variableState, setActionStatus);
+        return executeWebhookIndividual(action, selectionMap, variableState, setActionStatus, fetchFn);
     }
 }
 /**
@@ -285,7 +284,7 @@ function buildWebhookHeaders(action) {
     }
 }
 async function executeAction(params) {
-    const { action, selectionMap, variableState, setActionStatus } = params;
+    const { action, selectionMap, variableState, setActionStatus, fetchFn } = params;
     if (selectionMap.size === 0) {
         return {
             success: true
@@ -294,7 +293,7 @@ async function executeAction(params) {
     if (action.type === 'event') {
         return executeEventAction(action, selectionMap, variableState, setActionStatus);
     } else if (action.type === 'webhook') {
-        return executeWebhookAction(action, selectionMap, variableState, setActionStatus);
+        return executeWebhookAction(action, selectionMap, variableState, setActionStatus, fetchFn);
     }
     return {
         success: false,

package/dist/components/PanelSpecEditor/PanelAnnotationsEditor.d.ts

@@ -0,0 +1,15 @@
+import { ReactElement } from 'react';
+import { AnnotationSpec } from '@perses-dev/spec';
+export interface PanelAnnotationsEditorProps {
+    value: AnnotationSpec[];
+    onChange: (annotations: AnnotationSpec[]) => void;
+    isReadonly?: boolean;
+}
+/**
+ * Panel-level annotations editor, rendered as a common tab in the panel editor for panel plugins
+ * that declare `supportsAnnotations`. Reuses {@link AnnotationEditorForm} for the per-annotation form
+ * and propagates every committed change through `onChange`, so it fits the inline panel-editor flow
+ * (no separate apply step).
+ */
+export declare function PanelAnnotationsEditor({ value, onChange, isReadonly }: PanelAnnotationsEditorProps): ReactElement;
+//# sourceMappingURL=PanelAnnotationsEditor.d.ts.map

package/dist/components/PanelSpecEditor/PanelAnnotationsEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelAnnotationsEditor.d.ts","sourceRoot":"","sources":["../../../src/components/PanelSpecEditor/PanelAnnotationsEditor.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAC;AAqBxD,OAAO,EAAE,cAAc,EAA2B,MAAM,kBAAkB,CAAC;AAyB3E,MAAM,WAAW,2BAA2B;IAC1C,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,QAAQ,EAAE,CAAC,WAAW,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;IAClD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;;GAKG;AACH,wBAAgB,sBAAsB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,2BAA2B,GAAG,YAAY,CA6IjH"}