@perses-dev/plugin-system 0.51.0-beta.0 → 0.51.0-rc.0

package/dist/cjs/remote/PluginRuntime.js

@@ -24,9 +24,6 @@ _export(exports, {
     loadPlugin: function() {
         return loadPlugin;
     },
-    pluginRuntime: function() {
-        return pluginRuntime;
-    },
     usePluginRuntime: function() {
         return usePluginRuntime;
     }
@@ -35,8 +32,8 @@ const _runtime = require("@module-federation/enhanced/runtime");
 const _reactquery = /*#__PURE__*/ _interop_require_wildcard(require("@tanstack/react-query"));
 const _react = /*#__PURE__*/ _interop_require_default(require("react"));
 const _reactdom = /*#__PURE__*/ _interop_require_default(require("react-dom"));
-const _reactrouterdom = /*#__PURE__*/ _interop_require_wildcard(require("react-router-dom"));
 const _reacthookform = /*#__PURE__*/ _interop_require_wildcard(require("react-hook-form"));
+const _reactrouterdom = /*#__PURE__*/ _interop_require_wildcard(require("react-router-dom"));
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -83,166 +80,175 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const pluginRuntime = (0, _runtime.init)({
-    name: '@perses/perses-ui-host',
-    remotes: [],
-    shared: {
-        react: {
-            version: _react.default.version,
-            lib: ()=>_react.default,
-            shareConfig: {
-                singleton: true,
-                requiredVersion: `^${_react.default.version}`
-            }
-        },
-        'react-dom': {
-            version: '18.3.1',
-            lib: ()=>_reactdom.default,
-            shareConfig: {
-                singleton: true,
-                requiredVersion: `^18.3.1`
-            }
-        },
-        'react-router-dom': {
-            version: '6.26.0',
-            lib: ()=>_reactrouterdom,
-            shareConfig: {
-                singleton: true,
-                requiredVersion: '^6.26.0'
-            }
-        },
-        '@tanstack/react-query': {
-            version: '4.36.1',
-            lib: ()=>_reactquery,
-            shareConfig: {
-                singleton: true,
-                requiredVersion: '^4.36.1'
-            }
-        },
-        'react-hook-form': {
-            version: '7.52.2',
-            lib: ()=>_reacthookform,
-            shareConfig: {
-                singleton: true,
-                requiredVersion: '^7.52.2'
-            }
-        },
-        echarts: {
-            version: '5.5.0',
-            lib: ()=>require('echarts'),
-            shareConfig: {
-                singleton: true,
-                requiredVersion: '^5.5.0'
-            }
-        },
-        '@perses-dev/components': {
-            version: '0.50.0',
-            lib: ()=>require('@perses-dev/components'),
-            shareConfig: {
-                singleton: true,
-                requiredVersion: '^0.50.0'
-            }
-        },
-        '@perses-dev/plugin-system': {
-            version: '0.50.0',
-            lib: ()=>require('@perses-dev/plugin-system'),
-            shareConfig: {
-                singleton: true,
-                requiredVersion: '^0.50.0'
-            }
-        },
-        '@perses-dev/explore': {
-            version: '0.50.0',
-            lib: ()=>require('@perses-dev/explore'),
-            shareConfig: {
-                singleton: true,
-                requiredVersion: '^0.50.0'
-            }
-        },
-        '@perses-dev/dashboards': {
-            version: '0.50.0',
-            lib: ()=>require('@perses-dev/dashboards'),
-            shareConfig: {
-                singleton: true,
-                requiredVersion: '^0.50.0'
+let instance = null;
+const getPluginRuntime = ()=>{
+    if (instance === null) {
+        const pluginRuntime = (0, _runtime.init)({
+            name: '@perses/perses-ui-host',
+            remotes: [],
+            shared: {
+                react: {
+                    version: _react.default.version,
+                    lib: ()=>_react.default,
+                    shareConfig: {
+                        singleton: true,
+                        requiredVersion: `^${_react.default.version}`
+                    }
+                },
+                'react-dom': {
+                    version: '18.3.1',
+                    lib: ()=>_reactdom.default,
+                    shareConfig: {
+                        singleton: true,
+                        requiredVersion: `^18.3.1`
+                    }
+                },
+                'react-router-dom': {
+                    version: '6.26.0',
+                    lib: ()=>_reactrouterdom,
+                    shareConfig: {
+                        singleton: true,
+                        requiredVersion: '^6.26.0'
+                    }
+                },
+                '@tanstack/react-query': {
+                    version: '5.64.2',
+                    lib: ()=>_reactquery,
+                    shareConfig: {
+                        singleton: true,
+                        requiredVersion: '^5.64.2'
+                    }
+                },
+                'react-hook-form': {
+                    version: '7.52.2',
+                    lib: ()=>_reacthookform,
+                    shareConfig: {
+                        singleton: true,
+                        requiredVersion: '^7.52.2'
+                    }
+                },
+                echarts: {
+                    version: '5.5.0',
+                    lib: ()=>require('echarts'),
+                    shareConfig: {
+                        singleton: true,
+                        requiredVersion: '^5.5.0'
+                    }
+                },
+                '@perses-dev/components': {
+                    version: '0.51.0-beta.0',
+                    lib: ()=>require('@perses-dev/components'),
+                    shareConfig: {
+                        singleton: true,
+                        requiredVersion: '^0.51.0-beta.0'
+                    }
+                },
+                '@perses-dev/plugin-system': {
+                    version: '0.51.0-beta.0',
+                    lib: ()=>require('@perses-dev/plugin-system'),
+                    shareConfig: {
+                        singleton: true,
+                        requiredVersion: '^0.51.0-beta.0'
+                    }
+                },
+                '@perses-dev/explore': {
+                    version: '0.51.0-beta.0',
+                    lib: ()=>require('@perses-dev/explore'),
+                    shareConfig: {
+                        singleton: true,
+                        requiredVersion: '^0.51.0-beta.0'
+                    }
+                },
+                '@perses-dev/dashboards': {
+                    version: '0.51.0-beta.0',
+                    lib: ()=>require('@perses-dev/dashboards'),
+                    shareConfig: {
+                        singleton: true,
+                        requiredVersion: '^0.51.0-beta.0'
+                    }
+                },
+                // Below are the shared modules that are used by the plugins, this can be part of the SDK
+                'date-fns': {
+                    version: '4.1.0',
+                    lib: ()=>require('date-fns'),
+                    shareConfig: {
+                        singleton: true,
+                        requiredVersion: '^4.1.0'
+                    }
+                },
+                'date-fns-tz': {
+                    version: '3.2.0',
+                    lib: ()=>require('date-fns-tz'),
+                    shareConfig: {
+                        singleton: true,
+                        requiredVersion: '^3.2.0'
+                    }
+                },
+                lodash: {
+                    version: '4.17.21',
+                    lib: ()=>require('lodash'),
+                    shareConfig: {
+                        singleton: true,
+                        requiredVersion: '^4.17.21'
+                    }
+                },
+                '@emotion/react': {
+                    version: '11.11.3',
+                    lib: ()=>require('@emotion/react'),
+                    shareConfig: {
+                        singleton: true,
+                        requiredVersion: '^11.11.3'
+                    }
+                },
+                '@emotion/styled': {
+                    version: '11.11.0',
+                    lib: ()=>require('@emotion/styled'),
+                    shareConfig: {
+                        singleton: true,
+                        requiredVersion: '^11.11.0'
+                    }
+                },
+                '@hookform/resolvers/zod': {
+                    version: '3.3.4',
+                    lib: ()=>require('@hookform/resolvers/zod'),
+                    shareConfig: {
+                        singleton: true,
+                        requiredVersion: '^3.3.4'
+                    }
+                },
+                'use-resize-observer': {
+                    version: '9.1.0',
+                    lib: ()=>require('use-resize-observer'),
+                    shareConfig: {
+                        singleton: true,
+                        requiredVersion: '^9.1.0'
+                    }
+                },
+                'mdi-material-ui': {
+                    version: '7.4.0',
+                    lib: ()=>require('mdi-material-ui'),
+                    shareConfig: {
+                        singleton: true,
+                        requiredVersion: '^7.4.0'
+                    }
+                },
+                immer: {
+                    version: '10.1.1',
+                    lib: ()=>require('immer'),
+                    shareConfig: {
+                        singleton: true,
+                        requiredVersion: '^10.1.1'
+                    }
+                }
             }
-        },
-        // Below are the shared modules that are used by the plugins, this can be part of the SDK
-        'date-fns': {
-            version: '2.29.3',
-            lib: ()=>require('date-fns'),
-            shareConfig: {
-                singleton: true,
-                requiredVersion: '^2.29.3'
-            }
-        },
-        'date-fns-tz': {
-            version: '1.3.8',
-            lib: ()=>require('date-fns-tz'),
-            shareConfig: {
-                singleton: true,
-                requiredVersion: '^1.3.8'
-            }
-        },
-        lodash: {
-            version: '4.17.21',
-            lib: ()=>require('lodash'),
-            shareConfig: {
-                singleton: true,
-                requiredVersion: '^4.17.21'
-            }
-        },
-        '@emotion/react': {
-            version: '11.11.3',
-            lib: ()=>require('@emotion/react'),
-            shareConfig: {
-                singleton: true,
-                requiredVersion: '^11.11.3'
-            }
-        },
-        '@emotion/styled': {
-            version: '11.11.0',
-            lib: ()=>require('@emotion/styled'),
-            shareConfig: {
-                singleton: true,
-                requiredVersion: '^11.11.0'
-            }
-        },
-        '@hookform/resolvers/zod': {
-            version: '3.3.4',
-            lib: ()=>require('@hookform/resolvers/zod'),
-            shareConfig: {
-                singleton: true,
-                requiredVersion: '^3.3.4'
-            }
-        },
-        'use-resize-observer': {
-            version: '9.1.0',
-            lib: ()=>require('use-resize-observer'),
-            shareConfig: {
-                singleton: true,
-                requiredVersion: '^9.1.0'
-            }
-        },
-        'mdi-material-ui': {
-            version: '7.4.0',
-            lib: ()=>require('mdi-material-ui'),
-            shareConfig: {
-                singleton: true,
-                requiredVersion: '^7.4.0'
-            }
-        },
-        immer: {
-            version: '9.0.15',
-            lib: ()=>require('immer'),
-            shareConfig: {
-                singleton: true,
-                requiredVersion: '^9.0.15'
-            }
-        }
+        });
+        instance = pluginRuntime;
+        return instance;
     }
-});
+    return instance;
+};
 const registerRemote = (name, baseURL)=>{
+    const pluginRuntime = getPluginRuntime();
     const existingRemote = pluginRuntime.options.remotes.find((remote)=>remote.name === name);
     if (!existingRemote) {
         const remoteEntryURL = baseURL ? `${baseURL}/${name}/mf-manifest.json` : `/plugins/${name}/mf-manifest.json`;
@@ -261,7 +267,7 @@ const loadPlugin = async (moduleName, pluginName, baseURL)=>{
 };
 function usePluginRuntime({ plugin }) {
     return {
-        pluginRuntime,
+        pluginRuntime: getPluginRuntime(),
         loadPlugin: ()=>loadPlugin(plugin.moduleName, plugin.name, plugin.baseURL)
     };
 }

package/dist/cjs/runtime/TimeRangeProvider/TimeRangeSettingsProvider.js

@@ -30,6 +30,9 @@ _export(exports, {
     useShowCustomTimeRangeSetting: function() {
         return useShowCustomTimeRangeSetting;
     },
+    useShowZoomRangeSetting: function() {
+        return useShowZoomRangeSetting;
+    },
     useTimeRangeOptionsSetting: function() {
         return useTimeRangeOptionsSetting;
     },
@@ -56,6 +59,7 @@ const DEFAULT_OPTIONS = [
 ];
 const defaultTimeRangeSettings = {
     showCustom: true,
+    showZoomButtons: true,
     options: DEFAULT_OPTIONS.map((duration)=>(0, _components.buildRelativeTimeOption)(duration))
 };
 const TimeRangeSettingsContext = /*#__PURE__*/ (0, _react.createContext)(defaultTimeRangeSettings);
@@ -76,6 +80,13 @@ function useShowCustomTimeRangeSetting(override) {
     }
     return showCustomTimeRange;
 }
+function useShowZoomRangeSetting(override) {
+    const showZoomTimeRange = useTimeRangeSettings().showZoomButtons;
+    if (override !== undefined) {
+        return override;
+    }
+    return showZoomTimeRange;
+}
 function useTimeRangeOptionsSetting(override) {
     const showCustomTimeRange = useTimeRangeSettings().options;
     if (override !== undefined) {
@@ -87,10 +98,12 @@ function TimeRangeSettingsProvider(props) {
     const ctx = (0, _react.useMemo)(()=>{
         return {
             showCustom: props.showCustom === undefined ? defaultTimeRangeSettings.showCustom : props.showCustom,
+            showZoomButtons: props.showZoomButtons === undefined ? defaultTimeRangeSettings.showZoomButtons : props.showZoomButtons,
             options: props.options === undefined ? defaultTimeRangeSettings.options : props.options
         };
     }, [
         props.showCustom,
+        props.showZoomButtons,
         props.options
     ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(TimeRangeSettingsContext.Provider, {

package/dist/cjs/runtime/plugin-registry.js

@@ -69,18 +69,27 @@ function usePlugin(pluginType, kind, options) {
 }
 function usePlugins(pluginType, plugins) {
     const { getPlugin } = usePluginRegistry();
-    return (0, _reactquery.useQueries)({
-        queries: plugins.map((p)=>{
+    // useQueries() does not support queries with duplicate keys, therefore we de-duplicate the plugin kinds before running useQueries()
+    // This resolves the following warning in the JS console: "[QueriesObserver]: Duplicate Queries found. This might result in unexpected behavior."
+    // https://github.com/TanStack/query/issues/8224#issuecomment-2523554831
+    // https://github.com/TanStack/query/issues/4187#issuecomment-1256336901
+    const kinds = [
+        ...new Set(plugins.map((p)=>p.kind))
+    ];
+    const result = (0, _reactquery.useQueries)({
+        queries: kinds.map((kind)=>{
             return {
                 queryKey: [
                     'getPlugin',
                     pluginType,
-                    p.kind
+                    kind
                 ],
-                queryFn: ()=>getPlugin(pluginType, p.kind)
+                queryFn: ()=>getPlugin(pluginType, kind)
             };
         })
     });
+    // Re-assemble array in original order
+    return plugins.map((p)=>result[kinds.indexOf(p.kind)]);
 }
 function useListPluginMetadata(pluginTypes, options) {
     const { listPluginMetadata } = usePluginRegistry();

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

@@ -42,25 +42,15 @@ const _variables = require("./variables");
 const _TimeRangeProvider = require("./TimeRangeProvider");
 const _datasources = require("./datasources");
 const _pluginregistry = require("./plugin-registry");
+const _utils = require("./utils");
 const TIME_SERIES_QUERY_KEY = 'TimeSeriesQuery';
-/**
- * Returns a serialized string of the current state of variable values.
- */ function getVariableValuesKey(v) {
-    return Object.values(v).map((v)=>JSON.stringify(v.value)).join(',');
-}
-function filterVariableStateMap(v, names) {
-    if (!names) {
-        return v;
-    }
-    return Object.fromEntries(Object.entries(v).filter(([name])=>names.includes(name)));
-}
 function getQueryOptions({ plugin, definition, context }) {
     const { timeRange, datasourceStore, suggestedStepMs, mode, variableState, refreshKey } = context;
     const dependencies = plugin?.dependsOn ? plugin.dependsOn(definition.spec.plugin.spec, context) : {};
     const variableDependencies = dependencies?.variables;
     // Determine queryKey
-    const filteredVariabledState = filterVariableStateMap(variableState, variableDependencies);
-    const variablesValueKey = getVariableValuesKey(filteredVariabledState);
+    const filteredVariabledState = (0, _utils.filterVariableStateMap)(variableState, variableDependencies);
+    const variablesValueKey = (0, _utils.getVariableValuesKey)(filteredVariabledState);
     const queryKey = [
         definition,
         timeRange,

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

@@ -36,6 +36,8 @@ const _reactquery = require("@tanstack/react-query");
 const _datasources = require("./datasources");
 const _pluginregistry = require("./plugin-registry");
 const _TimeRangeProvider = require("./TimeRangeProvider");
+const _variables = require("./variables");
+const _utils = require("./utils");
 const TRACE_QUERY_KEY = 'TraceQuery';
 function getUnixTimeRange(timeRange) {
     const { start, end } = timeRange;
@@ -46,34 +48,62 @@ function getUnixTimeRange(timeRange) {
 }
 function useTraceQueries(definitions) {
     const { getPlugin } = (0, _pluginregistry.usePluginRegistry)();
-    const datasourceStore = (0, _datasources.useDatasourceStore)();
-    const { absoluteTimeRange } = (0, _TimeRangeProvider.useTimeRange)();
-    const context = {
-        datasourceStore,
-        absoluteTimeRange
-    };
+    const context = useTraceQueryContext();
+    const pluginLoaderResponse = (0, _pluginregistry.usePlugins)('TraceQuery', definitions.map((d)=>({
+            kind: d.spec.plugin.kind
+        })));
     // useQueries() handles data fetching from query plugins (e.g. traceQL queries, promQL queries)
     // https://tanstack.com/query/v4/docs/react/reference/useQuery
     return (0, _reactquery.useQueries)({
-        queries: definitions.map((definition)=>{
-            const queryKey = [
+        queries: definitions.map((definition, idx)=>{
+            const plugin = pluginLoaderResponse[idx]?.data;
+            const { queryEnabled, queryKey } = getQueryOptions({
+                context,
                 definition,
-                datasourceStore,
-                absoluteTimeRange
-            ]; // `queryKey` watches and reruns `queryFn` if keys in the array change
+                plugin
+            });
             const traceQueryKind = definition?.spec?.plugin?.kind;
             return {
+                enabled: queryEnabled,
                 queryKey: queryKey,
                 queryFn: async ()=>{
                     const plugin = await getPlugin(TRACE_QUERY_KEY, traceQueryKind);
                     const data = await plugin.getTraceData(definition.spec.plugin.spec, context);
                     return data;
-                },
-                // The data returned by getTraceData() contains circular dependencies (a span has a reference to the parent span, and the parent span has an array of child spans)
-                // Therefore structuralSharing must be turned off, otherwise the query is stuck in the 'fetching' state on re-fetch.
-                // Ref: https://github.com/TanStack/query/issues/6954#issuecomment-1962321426
-                structuralSharing: false
+                }
             };
         })
     });
 }
+function getQueryOptions({ plugin, definition, context }) {
+    const { datasourceStore, variableState, absoluteTimeRange } = 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);
+    const queryKey = [
+        definition,
+        datasourceStore,
+        absoluteTimeRange,
+        variablesValueKey
+    ];
+    let waitToLoad = false;
+    if (variableDependencies) {
+        waitToLoad = variableDependencies.some((v)=>variableState[v]?.loading);
+    }
+    const queryEnabled = plugin !== undefined && !waitToLoad;
+    return {
+        queryKey,
+        queryEnabled
+    };
+}
+function useTraceQueryContext() {
+    const { absoluteTimeRange } = (0, _TimeRangeProvider.useTimeRange)();
+    const variableState = (0, _variables.useAllVariableValues)();
+    const datasourceStore = (0, _datasources.useDatasourceStore)();
+    return {
+        variableState,
+        datasourceStore,
+        absoluteTimeRange
+    };
+}

package/dist/cjs/{stories/shared-utils/index.js → runtime/utils.js}

@@ -14,17 +14,26 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_export_star(require("./decorators"), 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];
-                }
-            });
-        }
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
     });
-    return from;
+}
+_export(exports, {
+    filterVariableStateMap: function() {
+        return filterVariableStateMap;
+    },
+    getVariableValuesKey: function() {
+        return getVariableValuesKey;
+    }
+});
+function filterVariableStateMap(v, names) {
+    if (!names) {
+        return v;
+    }
+    return Object.fromEntries(Object.entries(v).filter(([name])=>names.includes(name)));
+}
+function getVariableValuesKey(v) {
+    return Object.values(v).map((v)=>JSON.stringify(v.value)).join(',');
 }