@perses-dev/plugin-system 0.52.0 → 0.53.0-beta.0

package/dist/cjs/components/{DatasourceSelect.js → DatasourceSelect/DatasourceSelect.js}

@@ -47,8 +47,8 @@ const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _OpenInNew = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/OpenInNew"));
 const _material = require("@mui/material");
-const _runtime = require("../runtime");
-const _utils = require("../utils");
+const _runtime = require("../../runtime");
+const _utils = require("../../utils");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj

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

@@ -0,0 +1,30 @@
+// Copyright 2023 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("./DatasourceSelect"), 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/Variables/VariableEditorForm/VariableEditorForm.js

@@ -32,6 +32,7 @@ const _context = require("../../../context");
 const _variablemodel = require("../variable-model");
 const _runtime = require("../../../runtime");
 const _VariablePreview = require("./VariablePreview");
+const _variableeditorformmodel = require("./variable-editor-form-model");
 function FallbackPreview() {
     return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
         children: "Error previewing values"
@@ -117,6 +118,10 @@ function ListVariableEditorForm({ action, control }) {
         control: control,
         name: 'spec.allowAllValue'
     });
+    const sortMethod = (0, _reacthookform.useWatch)({
+        control: control,
+        name: 'spec.sort'
+    });
     // When variable kind is selected we need to provide default values
     // TODO: check if react-hook-form has a better way to do this
     const values = form.getValues();
@@ -126,6 +131,15 @@ function ListVariableEditorForm({ action, control }) {
     if (values.spec.allowMultiple === undefined) {
         form.setValue('spec.allowMultiple', false);
     }
+    if (!values.spec.plugin) {
+        form.setValue('spec.plugin', {
+            kind: 'StaticListVariable',
+            spec: {}
+        });
+    }
+    if (!values.spec.sort) {
+        form.setValue('spec.sort', 'none');
+    }
     const { refresh } = (0, _runtime.useTimeRange)();
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
@@ -138,18 +152,17 @@ function ListVariableEditorForm({ action, control }) {
                 spacing: 2,
                 mb: 2,
                 children: [
-                    kind ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
                         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
                             FallbackComponent: FallbackPreview,
                             resetKeys: [
                                 previewSpec
                             ],
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_VariablePreview.VariableListPreview, {
+                                sortMethod: sortMethod,
                                 definition: previewSpec
                             })
                         })
-                    }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_VariablePreview.VariablePreview, {
-                        isLoading: true
                     }),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
                         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
@@ -215,7 +228,7 @@ function ListVariableEditorForm({ action, control }) {
                         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
                             control: control,
                             name: "spec.sort",
-                            render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TextField, {
+                            render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                                     select: true,
                                     ...field,
                                     fullWidth: true,
@@ -232,36 +245,14 @@ function ListVariableEditorForm({ action, control }) {
                                     onChange: (event)=>{
                                         field.onChange(event);
                                     },
-                                    children: [
-                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                                            value: "none",
-                                            children: "None"
-                                        }),
-                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                                            value: "alphabetical-asc",
-                                            children: "Alphabetical, asc"
-                                        }),
-                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                                            value: "alphabetical-desc",
-                                            children: "Alphabetical, desc"
-                                        }),
-                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                                            value: "numerical-asc",
-                                            children: "Numerical, asc"
-                                        }),
-                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                                            value: "numerical-desc",
-                                            children: "Numerical, desc"
-                                        }),
-                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                                            value: "alphabetical-ci-asc",
-                                            children: "Alphabetical, case-insensitive, asc"
-                                        }),
-                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                                            value: "alphabetical-ci-desc",
-                                            children: "Alphabetical, case-insensitive, desc"
-                                        })
-                                    ]
+                                    children: Object.keys(_variableeditorformmodel.SORT_METHODS).map((key)=>{
+                                        if (!_variableeditorformmodel.SORT_METHODS[key]) return null;
+                                        const { label } = _variableeditorformmodel.SORT_METHODS[key];
+                                        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                            value: key,
+                                            children: label
+                                        }, key);
+                                    })
                                 })
                         })
                     })

package/dist/cjs/components/Variables/VariableEditorForm/VariablePreview.js

@@ -35,6 +35,7 @@ const _components = require("@perses-dev/components");
 const _ClipboardOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ClipboardOutline"));
 const _constants = require("../../../constants");
 const _variablemodel = require("../variable-model");
+const _variableeditorformmodel = require("./variable-editor-form-model");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -93,6 +94,33 @@ function VariablePreview(props) {
     if (values && values?.length > 0 && maxValues) {
         notShown = values.length - maxValues;
     }
+    const variablePreviewState = (0, _react.useMemo)(()=>{
+        if (isLoading) {
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+                width: "100%",
+                sx: {
+                    alignItems: 'center',
+                    justifyContent: 'center'
+                },
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CircularProgress, {})
+            });
+        } else if (error) {
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Alert, {
+                severity: "error",
+                children: error
+            });
+        } else if (!values?.length) {
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Alert, {
+                severity: "info",
+                children: "No results"
+            });
+        }
+        return null;
+    }, [
+        error,
+        isLoading,
+        values
+    ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
@@ -130,22 +158,7 @@ function VariablePreview(props) {
                         m: 2
                     },
                     children: [
-                        error && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Alert, {
-                            severity: "error",
-                            children: error
-                        }),
-                        values?.length === 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Alert, {
-                            severity: "info",
-                            children: "No results"
-                        }),
-                        isLoading && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
-                            width: "100%",
-                            sx: {
-                                alignItems: 'center',
-                                justifyContent: 'center'
-                            },
-                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CircularProgress, {})
-                        }),
+                        variablePreviewState,
                         values?.slice(0, maxValues).map((val, index)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Chip, {
                                 size: "small",
                                 label: val
@@ -163,17 +176,18 @@ function VariablePreview(props) {
     });
 }
 function VariableListPreview(props) {
-    const { definition } = props;
+    const { definition, sortMethod } = props;
     const { data, isFetching, error } = (0, _variablemodel.useListVariablePluginValues)(definition);
     const errorMessage = error?.message;
+    const result = !sortMethod || sortMethod === 'none' || !data ? data : _variableeditorformmodel.SORT_METHODS[sortMethod].sort(data);
     const variablePreview = (0, _react.useMemo)(()=>/*#__PURE__*/ (0, _jsxruntime.jsx)(VariablePreview, {
-            values: data?.map((val)=>val.value) || [],
+            values: result?.map((val)=>val.label || val.value),
             isLoading: isFetching,
             error: errorMessage
         }), [
         errorMessage,
         isFetching,
-        data
+        result
     ]);
     return variablePreview;
 }

package/dist/cjs/components/Variables/VariableEditorForm/index.js

@@ -16,6 +16,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 _export_star(require("./VariableEditorForm"), exports);
 _export_star(require("./VariablePreview"), exports);
+_export_star(require("./variable-editor-form-model"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/dist/cjs/components/Variables/VariableEditorForm/variable-editor-form-model.js

@@ -21,6 +21,9 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    SORT_METHODS: function() {
+        return SORT_METHODS;
+    },
     getInitialState: function() {
         return getInitialState;
     },
@@ -28,6 +31,50 @@ _export(exports, {
         return getVariableDefinitionFromState;
     }
 });
+const SORT_METHODS = {
+    none: {
+        label: 'None',
+        sort: (input)=>{
+            return input.slice();
+        }
+    },
+    'alphabetical-asc': {
+        label: 'Alphabetical, asc',
+        sort: (input)=>{
+            return input.slice().sort((a, b)=>a.label > b.label ? 1 : -1);
+        }
+    },
+    'alphabetical-desc': {
+        label: 'Alphabetical, desc',
+        sort: (input)=>{
+            return input.slice().sort((a, b)=>a.label > b.label ? -1 : 1);
+        }
+    },
+    'numerical-asc': {
+        label: 'Numerical, asc',
+        sort: (input)=>{
+            return input.slice().sort((a, b)=>parseInt(a.label) > parseInt(b.label) ? 1 : -1);
+        }
+    },
+    'numerical-desc': {
+        label: 'Numerical, desc',
+        sort: (input)=>{
+            return input.slice().sort((a, b)=>parseInt(a.label) < parseInt(b.label) ? 1 : -1);
+        }
+    },
+    'alphabetical-ci-asc': {
+        label: 'Alphabetical, case-insensitive, asc',
+        sort: (input)=>{
+            return input.slice().sort((a, b)=>a.label.toLowerCase() > b.label.toLowerCase() ? 1 : -1);
+        }
+    },
+    'alphabetical-ci-desc': {
+        label: 'Alphabetical, case-insensitive, desc',
+        sort: (input)=>{
+            return input.slice().sort((a, b)=>a.label.toLowerCase() > b.label.toLowerCase() ? -1 : 1);
+        }
+    }
+};
 function getInitialState(initialVariableDefinition) {
     const textVariableFields = {
         value: initialVariableDefinition.spec.value ?? '',

package/dist/cjs/components/Variables/variable-model.js

@@ -93,13 +93,13 @@ function useListVariablePluginValues(definition) {
             timeRange,
             refreshKey
         ],
-        queryFn: async ()=>{
+        queryFn: async ({ signal })=>{
             const resp = await variablePlugin?.getVariableOptions(spec, {
                 datasourceStore,
                 variables,
                 timeRange
-            });
-            if (resp === undefined) {
+            }, signal);
+            if (!resp?.data?.length) {
                 return [];
             }
             if (!capturingRegexp) {

package/dist/cjs/components/index.js

@@ -29,7 +29,6 @@ _export_star(require("./PluginRegistry"), exports);
 _export_star(require("./PluginSpecEditor"), exports);
 _export_star(require("./TimeRangeControls"), exports);
 _export_star(require("./Variables"), exports);
-_export_star(require("./ProjectSelect"), exports);
 _export_star(require("./MetricLabelInput"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {

package/dist/cjs/context/index.js

@@ -14,7 +14,6 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_export_star(require("./ProjectStoreProvider"), exports);
 _export_star(require("./ValidationProvider"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {

package/dist/cjs/remote/remotePluginLoader.js

@@ -27,10 +27,25 @@ const isPluginMetadata = (plugin)=>{
 const isPluginModuleResource = (pluginModule)=>{
     return typeof pluginModule === 'object' && pluginModule !== null && 'metadata' in pluginModule && 'spec' in pluginModule && typeof pluginModule.spec === 'object' && pluginModule.spec !== null && 'plugins' in pluginModule.spec && Array.isArray(pluginModule.spec.plugins) && pluginModule.spec.plugins.every(isPluginMetadata);
 };
-const remotePluginLoader = (baseURL)=>{
+const DEFAULT_PLUGINS_API_PATH = '/api/v1/plugins';
+const DEFAULT_PLUGINS_ASSETS_PATH = '/plugins';
+const paramToOptions = (options)=>{
+    if (options === undefined) {
+        return {
+            pluginsApiPath: DEFAULT_PLUGINS_API_PATH,
+            pluginsAssetsPath: DEFAULT_PLUGINS_ASSETS_PATH
+        };
+    }
+    return {
+        pluginsApiPath: `${options?.apiPrefix ?? ''}${DEFAULT_PLUGINS_API_PATH}`,
+        pluginsAssetsPath: `${options?.baseURL ?? ''}${DEFAULT_PLUGINS_ASSETS_PATH}`
+    };
+};
+function remotePluginLoader(options) {
+    const { pluginsApiPath, pluginsAssetsPath } = paramToOptions(options);
     return {
         getInstalledPlugins: async ()=>{
-            const pluginsResponse = await fetch(`${baseURL ? baseURL : ''}/api/v1/plugins`);
+            const pluginsResponse = await fetch(pluginsApiPath);
             const plugins = await pluginsResponse.json();
             let pluginModules = [];
             if (Array.isArray(plugins)) {
@@ -47,7 +62,7 @@ const remotePluginLoader = (baseURL)=>{
             const pluginModuleName = resource.metadata.name;
             const pluginModule = {};
             for (const plugin of resource.spec.plugins){
-                const remotePluginModule = await (0, _PluginRuntime.loadPlugin)(pluginModuleName, plugin.spec.name);
+                const remotePluginModule = await (0, _PluginRuntime.loadPlugin)(pluginModuleName, plugin.spec.name, pluginsAssetsPath);
                 const remotePlugin = remotePluginModule?.[plugin.spec.name];
                 if (remotePlugin) {
                     pluginModule[plugin.spec.name] = remotePlugin;
@@ -58,4 +73,4 @@ const remotePluginLoader = (baseURL)=>{
             return pluginModule;
         }
     };
-};
+}

package/dist/cjs/runtime/UsageMetricsProvider.js

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

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

@@ -82,7 +82,7 @@ const useTimeSeriesQuery = (definition, options, queryOptions)=>{
     return (0, _reactquery.useQuery)({
         enabled: (queryOptions?.enabled ?? true) || queryEnabled,
         queryKey: queryKey,
-        queryFn: ()=>{
+        queryFn: ({ signal })=>{
             // The 'enabled' option should prevent this from happening, but make TypeScript happy by checking
             if (plugin === undefined) {
                 throw new Error('Expected plugin to be loaded');
@@ -92,7 +92,7 @@ const useTimeSeriesQuery = (definition, options, queryOptions)=>{
                 ...context,
                 suggestedStepMs: options?.suggestedStepMs
             };
-            return plugin.getTimeSeriesData(definition.spec.plugin.spec, ctx);
+            return plugin.getTimeSeriesData(definition.spec.plugin.spec, ctx, signal);
         }
     });
 };
@@ -118,14 +118,14 @@ function useTimeSeriesQueries(definitions, options, queryOptions) {
                 ...queryOptions,
                 enabled: (queryOptions?.enabled ?? true) && queryEnabled,
                 queryKey: queryKey,
-                queryFn: async ()=>{
+                queryFn: async ({ signal })=>{
                     const ctx = {
                         ...context,
                         // Keep suggested step changes out of the query key, so we don´t have to run again query when it changes
                         suggestedStepMs: options?.suggestedStepMs
                     };
                     const plugin = await getPlugin(TIME_SERIES_QUERY_KEY, definition.spec.plugin.kind);
-                    const data = await plugin.getTimeSeriesData(definition.spec.plugin.spec, ctx);
+                    const data = await plugin.getTimeSeriesData(definition.spec.plugin.spec, ctx, signal);
                     return data;
                 }
             };

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

@@ -21,17 +21,41 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    MOCK_EMPTY_PLUGIN_MODULE: function() {
+        return MOCK_EMPTY_PLUGIN_MODULE;
+    },
+    MOCK_INVALID_PLUGIN_MODULE: function() {
+        return MOCK_INVALID_PLUGIN_MODULE;
+    },
     MOCK_LOG_DATA: function() {
         return MOCK_LOG_DATA;
     },
+    MOCK_MIXED_VALIDITY_PLUGIN_MODULES: function() {
+        return MOCK_MIXED_VALIDITY_PLUGIN_MODULES;
+    },
+    MOCK_MULTI_PLUGIN_MODULE: function() {
+        return MOCK_MULTI_PLUGIN_MODULE;
+    },
+    MOCK_PARTIAL_FAILURE_MODULE: function() {
+        return MOCK_PARTIAL_FAILURE_MODULE;
+    },
     MOCK_PROFILE_DATA: function() {
         return MOCK_PROFILE_DATA;
     },
+    MOCK_REMOTE_PLUGIN_MODULE: function() {
+        return MOCK_REMOTE_PLUGIN_MODULE;
+    },
     MOCK_TIME_SERIES_DATA: function() {
         return MOCK_TIME_SERIES_DATA;
     },
     MOCK_TRACE_DATA: function() {
         return MOCK_TRACE_DATA;
+    },
+    MOCK_VALID_PLUGIN_METADATA: function() {
+        return MOCK_VALID_PLUGIN_METADATA;
+    },
+    MOCK_VALID_PLUGIN_MODULE_RESOURCE: function() {
+        return MOCK_VALID_PLUGIN_MODULE_RESOURCE;
     }
 });
 const MOCK_TIME_SERIES_DATA = {
@@ -146,3 +170,137 @@ const MOCK_PROFILE_DATA = {
         name: 'cpu'
     }
 };
+const MOCK_VALID_PLUGIN_METADATA = {
+    kind: 'Panel',
+    spec: {
+        name: 'testPlugin',
+        display: {
+            name: 'Test Plugin',
+            description: 'A test plugin for unit testing'
+        }
+    }
+};
+const MOCK_VALID_PLUGIN_MODULE_RESOURCE = {
+    kind: 'PluginModule',
+    metadata: {
+        name: 'test-module',
+        version: '1.0.0'
+    },
+    spec: {
+        plugins: [
+            MOCK_VALID_PLUGIN_METADATA
+        ]
+    }
+};
+const MOCK_INVALID_PLUGIN_MODULE = {
+    // Missing required fields
+    metadata: {
+        name: 'invalid-module'
+    },
+    spec: {
+        plugins: [
+            {
+                // Missing required fields
+                kind: 'Panel'
+            }
+        ]
+    }
+};
+const MOCK_MIXED_VALIDITY_PLUGIN_MODULES = [
+    MOCK_VALID_PLUGIN_MODULE_RESOURCE,
+    MOCK_INVALID_PLUGIN_MODULE,
+    {
+        kind: 'PluginModule',
+        metadata: {
+            name: 'another-valid-module',
+            version: '2.0.0'
+        },
+        spec: {
+            plugins: [
+                {
+                    kind: 'Variable',
+                    spec: {
+                        name: 'anotherPlugin',
+                        display: {
+                            name: 'Another Plugin'
+                        }
+                    }
+                }
+            ]
+        }
+    }
+];
+const MOCK_REMOTE_PLUGIN_MODULE = {
+    testPlugin: {
+        component: ()=>null,
+        createDefaultOptions: ()=>({})
+    }
+};
+const MOCK_MULTI_PLUGIN_MODULE = {
+    kind: 'PluginModule',
+    metadata: {
+        name: 'multi-plugin-module',
+        version: '1.0.0'
+    },
+    spec: {
+        plugins: [
+            {
+                kind: 'Panel',
+                spec: {
+                    name: 'plugin1',
+                    display: {
+                        name: 'Plugin 1'
+                    }
+                }
+            },
+            {
+                kind: 'Variable',
+                spec: {
+                    name: 'plugin2',
+                    display: {
+                        name: 'Plugin 2'
+                    }
+                }
+            }
+        ]
+    }
+};
+const MOCK_PARTIAL_FAILURE_MODULE = {
+    kind: 'PluginModule',
+    metadata: {
+        name: 'partial-failure-module',
+        version: '1.0.0'
+    },
+    spec: {
+        plugins: [
+            {
+                kind: 'Panel',
+                spec: {
+                    name: 'workingPlugin',
+                    display: {
+                        name: 'Working Plugin'
+                    }
+                }
+            },
+            {
+                kind: 'Variable',
+                spec: {
+                    name: 'failingPlugin',
+                    display: {
+                        name: 'Failing Plugin'
+                    }
+                }
+            }
+        ]
+    }
+};
+const MOCK_EMPTY_PLUGIN_MODULE = {
+    kind: 'PluginModule',
+    metadata: {
+        name: 'empty-module',
+        version: '1.0.0'
+    },
+    spec: {
+        plugins: []
+    }
+};

package/dist/components/{DatasourceSelect.d.ts → DatasourceSelect/DatasourceSelect.d.ts}

@@ -1,7 +1,7 @@
 import { OutlinedSelectProps, BaseSelectProps } from '@mui/material';
 import { DatasourceSelector, VariableName } from '@perses-dev/core';
 import { ReactElement } from 'react';
-import { DatasourceSelectItemGroup, DatasourceSelectItemSelector, VariableStateMap } from '../runtime';
+import { DatasourceSelectItemGroup, DatasourceSelectItemSelector, VariableStateMap } from '../../runtime';
 type OmittedMuiProps = 'children' | 'value' | 'onChange';
 export type DatasourceSelectValue<T = DatasourceSelector> = T | VariableName;
 export interface DatasourceSelectProps extends Omit<OutlinedSelectProps & BaseSelectProps<string>, OmittedMuiProps> {

package/dist/components/DatasourceSelect/DatasourceSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatasourceSelect.d.ts","sourceRoot":"","sources":["../../../src/components/DatasourceSelect/DatasourceSelect.tsx"],"names":[],"mappings":"AAcA,OAAO,EAML,mBAAmB,EACnB,eAAe,EAGhB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAC9C,OAAO,EAEL,yBAAyB,EACzB,4BAA4B,EAG5B,gBAAgB,EACjB,MAAM,eAAe,CAAC;AAOvB,KAAK,eAAe,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;AAWzD,MAAM,MAAM,qBAAqB,CAAC,CAAC,GAAG,kBAAkB,IAAI,CAAC,GAAG,YAAY,CAAC;AAE7E,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,mBAAmB,GAAG,eAAe,CAAC,MAAM,CAAC,EAAE,eAAe,CAAC;IACjH,KAAK,EAAE,qBAAqB,CAAC;IAC7B,QAAQ,EAAE,CAAC,IAAI,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAChD,oBAAoB,EAAE,MAAM,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,CAkH3E;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,YAAY,CAahH;AAKD;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,4BAA4B,GAAG,YAAY,GAAG,MAAM,CAKnG;AAED;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,WAAW,EAAE,MAAM,GAAG,qBAAqB,CAehF;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,qBAAqB,GAAG,SAAS,GAAG,KAAK,IAAI,YAAY,CAEpG;AAED,eAAO,MAAM,+BAA+B,UACnC,qBAAqB,GAAG,SAAS,aAC7B,gBAAgB,8BACC,yBAAyB,EAAE,GAAG,SAAS,KAClE,kBAAkB,GAAG,SA4BvB,CAAC;AAEF,eAAO,MAAM,kCAAkC,UACtC,qBAAqB,wBACN,MAAM,KAC3B,kBAQF,CAAC"}

package/dist/components/{DatasourceSelect.js → DatasourceSelect/DatasourceSelect.js}

@@ -15,8 +15,8 @@ import { createElement as _createElement } from "react";
 import OpenInNewIcon from 'mdi-material-ui/OpenInNew';
 import { Stack, ListItemText, Chip, IconButton, Box, Autocomplete, TextField } from '@mui/material';
 import { useMemo } from 'react';
-import { useListDatasourceSelectItems, useVariableValues } from '../runtime';
-import { parseVariables } from '../utils';
+import { useListDatasourceSelectItems, useVariableValues } from '../../runtime';
+import { parseVariables } from '../../utils';
 const DATASOURCE_VARIABLE_VALUE_PREFIX = '__DATASOURCE_VARIABLE_VALUE__';
 const VARIABLE_IDENTIFIER = '$';
 const emptyDatasourceOption = {