@perses-dev/plugin-system 0.0.0-snapshot-ts-panel-actions-90e9ef0 → 0.0.0-snapshot-reverse-proxy-75afbd7

package/dist/cjs/runtime/DataQueriesProvider/model.js

@@ -52,12 +52,16 @@ function useQueryType() {
     const { data: profileQueryPlugins, isLoading: isProfileQueryPluginLoading } = (0, _pluginregistry.useListPluginMetadata)([
         'ProfileQuery'
     ]);
+    const { data: logQueries, isLoading: isLogQueryPluginLoading } = (0, _pluginregistry.useListPluginMetadata)([
+        'LogQuery'
+    ]);
     // For example, `map: {"TimeSeriesQuery":["PrometheusTimeSeriesQuery"],"TraceQuery":["TempoTraceQuery"]}`
     const queryTypeMap = (0, _react.useMemo)(()=>{
         const map = {
             TimeSeriesQuery: [],
             TraceQuery: [],
-            ProfileQuery: []
+            ProfileQuery: [],
+            LogQuery: []
         };
         if (timeSeriesQueryPlugins) {
             timeSeriesQueryPlugins.forEach((plugin)=>{
@@ -74,11 +78,17 @@ function useQueryType() {
                 map[plugin.kind]?.push(plugin.spec.name);
             });
         }
+        if (logQueries) {
+            logQueries.forEach((plugin)=>{
+                map[plugin.kind]?.push(plugin.spec.name);
+            });
+        }
         return map;
     }, [
         timeSeriesQueryPlugins,
         traceQueryPlugins,
-        profileQueryPlugins
+        profileQueryPlugins,
+        logQueries
     ]);
     const getQueryType = (0, _react.useCallback)((pluginKind)=>{
         const isLoading = (pluginKind)=>{
@@ -89,8 +99,10 @@ function useQueryType() {
                     return isTraceQueryPluginLoading;
                 case 'PyroscopeProfileQuery':
                     return isProfileQueryPluginLoading;
+                case 'LokiLogQuery':
+                    return isLogQueryPluginLoading;
             }
-            return isTraceQueryPluginLoading || isTimeSeriesQueryLoading || isProfileQueryPluginLoading;
+            return isTraceQueryPluginLoading || isTimeSeriesQueryLoading || isProfileQueryPluginLoading || isLogQueryPluginLoading;
         };
         if (isLoading(pluginKind)) {
             return undefined;
@@ -105,7 +117,8 @@ function useQueryType() {
         queryTypeMap,
         isTimeSeriesQueryLoading,
         isTraceQueryPluginLoading,
-        isProfileQueryPluginLoading
+        isProfileQueryPluginLoading,
+        isLogQueryPluginLoading
     ]);
     return getQueryType;
 }

package/dist/cjs/runtime/RouterProvider.js

@@ -0,0 +1,114 @@
+// Copyright 2025 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    ReactRouterProvider: function() {
+        return ReactRouterProvider;
+    },
+    RouterContext: function() {
+        return RouterContext;
+    },
+    RouterProvider: function() {
+        return RouterProvider;
+    },
+    useRouterContext: function() {
+        return useRouterContext;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _reactrouterdom = require("react-router-dom");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const RouterContext = /*#__PURE__*/ (0, _react.createContext)(undefined);
+function useRouterContext() {
+    const ctx = (0, _react.useContext)(RouterContext);
+    if (ctx === undefined) {
+        console.warn('No RouterContext found. Did you forget a <RouterProvider>?');
+        return {};
+    }
+    return ctx;
+}
+function RouterProvider(props) {
+    const { RouterComponent, navigate, children } = props;
+    const ctx = (0, _react.useMemo)(()=>{
+        return {
+            RouterComponent,
+            navigate
+        };
+    }, [
+        RouterComponent,
+        navigate
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(RouterContext.Provider, {
+        value: ctx,
+        children: children
+    });
+}
+function ReactRouterProvider(props) {
+    const { children } = props;
+    const navigate = (0, _reactrouterdom.useNavigate)();
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(RouterProvider, {
+        RouterComponent: _reactrouterdom.Link,
+        navigate: navigate,
+        children: children
+    });
+}

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

@@ -100,7 +100,12 @@ function useSuggestedStepMs(width) {
 }
 function TimeRangeProvider(props) {
     const { timeRange, refreshInterval, children, setTimeRange, setRefreshInterval } = props;
-    const [localTimeRange, setLocalTimeRange] = (0, _react.useState)(timeRange);
+    /**
+   * TODO: The hook needs refactor. There is a bug here with refreshKey. If the refreshInterval is not set,
+   * refreshKey string includes an undefined xx:yy:zz:undefined:0
+   * I think exposing refresh functionality also is very risky. A careless usage of refresh may cause
+   * infinite rendering loop.
+   */ const [localTimeRange, setLocalTimeRange] = (0, _react.useState)(timeRange);
     const [localRefreshInterval, setLocalRefreshInterval] = (0, _react.useState)(refreshInterval);
     const [refreshCounter, setRefreshCounter] = (0, _react.useState)(0);
     (0, _react.useEffect)(()=>{

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/index.js

@@ -24,6 +24,7 @@ _export_star(require("./trace-queries"), exports);
 _export_star(require("./profile-queries"), exports);
 _export_star(require("./DataQueriesProvider"), exports);
 _export_star(require("./QueryCountProvider"), exports);
+_export_star(require("./RouterProvider"), exports);
 _export_star(require("./UsageMetricsProvider"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {

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

@@ -0,0 +1,68 @@
+// Copyright 2025 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    LOG_QUERY_KEY: function() {
+        return LOG_QUERY_KEY;
+    },
+    useLogQueries: function() {
+        return useLogQueries;
+    }
+});
+const _reactquery = require("@tanstack/react-query");
+const _datasources = require("./datasources");
+const _pluginregistry = require("./plugin-registry");
+const _TimeRangeProvider = require("./TimeRangeProvider");
+const _variables = require("./variables");
+const LOG_QUERY_KEY = 'LogQuery';
+function useLogQueries(definitions) {
+    const { getPlugin } = (0, _pluginregistry.usePluginRegistry)();
+    const datasourceStore = (0, _datasources.useDatasourceStore)();
+    const { absoluteTimeRange } = (0, _TimeRangeProvider.useTimeRange)();
+    const variableValues = (0, _variables.useVariableValues)();
+    const context = {
+        timeRange: absoluteTimeRange,
+        variableState: variableValues,
+        datasourceStore,
+        refreshKey: ''
+    };
+    return (0, _reactquery.useQueries)({
+        queries: definitions.map((definition)=>{
+            const queryKey = [
+                definition,
+                datasourceStore,
+                absoluteTimeRange,
+                variableValues
+            ];
+            const logQueryKind = definition?.spec?.plugin?.kind;
+            return {
+                queryKey: queryKey,
+                queryFn: async ()=>{
+                    const plugin = await getPlugin(LOG_QUERY_KEY, logQueryKind);
+                    const data = await plugin.getLogData(definition.spec.plugin.spec, context);
+                    return data;
+                },
+                structuralSharing: false
+            };
+        })
+    });
+}

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/runtime/variables.js

@@ -27,6 +27,9 @@ _export(exports, {
     VariableStoreStateMap: function() {
         return VariableStoreStateMap;
     },
+    replaceVariablesInString: function() {
+        return replaceVariablesInString;
+    },
     useAllVariableValues: function() {
         return useAllVariableValues;
     },
@@ -137,6 +140,18 @@ function useAllVariableValues(names) {
         builtinVariableValues
     ]);
 }
+function replaceVariablesInString(text, variableValues, extraVariables) {
+    const vars = {
+        ...variableValues
+    }; // shallow clone to avoid modifying the original object
+    for (const [key, value] of Object.entries(extraVariables ?? {})){
+        vars[key] = {
+            value,
+            loading: false
+        };
+    }
+    return (0, _utils.replaceVariables)(text, vars);
+}
 function useReplaceVariablesInString(str) {
     const variablesInString = str ? (0, _utils.parseVariables)(str) : [];
     const variableValues = useAllVariableValues(variablesInString);

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

@@ -21,14 +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 = {
@@ -102,6 +129,27 @@ const MOCK_TRACE_DATA = {
         executedQueryString: '{ duration > 1000ms }'
     }
 };
+const MOCK_LOG_DATA = {
+    totalCount: 2,
+    entries: [
+        {
+            timestamp: 1666479357903,
+            line: 'Error: Something went wrong',
+            labels: {
+                level: 'error',
+                service: 'backend'
+            }
+        },
+        {
+            timestamp: 1666479382282,
+            line: 'Info: Request processed successfully',
+            labels: {
+                level: 'info',
+                service: 'frontend'
+            }
+        }
+    ]
+};
 const MOCK_PROFILE_DATA = {
     profile: {
         stackTrace: {
@@ -122,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/cjs/test/utils.js

@@ -22,7 +22,9 @@ Object.defineProperty(exports, "getTestContextWrapper", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _reactquery = require("@tanstack/react-query");
+const _core = require("@perses-dev/core");
 const _components = require("../components");
+const _runtime = require("../runtime");
 const _testplugins = require("./test-plugins");
 function getTestContextWrapper(contextOptions) {
     // Create a new QueryClient for each test to avoid caching issues
@@ -34,15 +36,22 @@ function getTestContextWrapper(contextOptions) {
             }
         }
     });
+    const timeRange = {
+        start: new Date(Date.now() - Number(_core.DEFAULT_DASHBOARD_DURATION)),
+        end: new Date()
+    };
     return function Wrapper({ children }) {
-        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactquery.QueryClientProvider, {
-            client: queryClient,
-            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.PluginRegistry, {
-                pluginLoader: _testplugins.testPluginLoader,
-                defaultPluginKinds: contextOptions?.defaultPluginKinds ?? {
-                    TimeSeriesQuery: 'PrometheusTimeSeriesQuery'
-                },
-                children: children
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_runtime.TimeRangeProvider, {
+            timeRange: timeRange,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactquery.QueryClientProvider, {
+                client: queryClient,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.PluginRegistry, {
+                    pluginLoader: _testplugins.testPluginLoader,
+                    defaultPluginKinds: contextOptions?.defaultPluginKinds ?? {
+                        TimeSeriesQuery: 'PrometheusTimeSeriesQuery'
+                    },
+                    children: children
+                })
             })
         });
     };