@perses-dev/plugin-system 0.41.0 → 0.42.0

package/dist/cjs/context/query-params.js

@@ -0,0 +1,49 @@
+// 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
+});
+Object.defineProperty(exports, "useSetProjectParams", {
+    enumerable: true,
+    get: function() {
+        return useSetProjectParams;
+    }
+});
+const _react = require("react");
+const _usequeryparams = require("use-query-params");
+function useSetProjectParams(enabledURLParams = true) {
+    const [query, setQuery] = (0, _usequeryparams.useQueryParams)({
+        project: ''
+    }, {
+        updateType: 'replaceIn'
+    });
+    const [projectState, setProjectState] = (0, _react.useState)('none');
+    const setProject = (0, _react.useCallback)((project)=>{
+        return setQuery({
+            project
+        });
+    }, [
+        setQuery
+    ]);
+    if (enabledURLParams) {
+        return {
+            project: query.project || 'none',
+            setProject
+        };
+    }
+    return {
+        project: projectState,
+        setProject: setProjectState
+    };
+}

package/dist/cjs/index.js

@@ -21,6 +21,7 @@ _export_star(require("./runtime"), exports);
 _export_star(require("./test-utils"), exports);
 _export_star(require("./utils"), exports);
 _export_star(require("./validation"), exports);
+_export_star(require("./context"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/dist/cjs/model/index.js

@@ -21,6 +21,7 @@ _export_star(require("./plugins"), exports);
 _export_star(require("./plugin-base"), exports);
 _export_star(require("./plugin-loading"), exports);
 _export_star(require("./time-series-queries"), exports);
+_export_star(require("./trace-queries"), exports);
 _export_star(require("./variables"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {

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

@@ -0,0 +1,16 @@
+// 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
+});

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

@@ -37,6 +37,7 @@ _export(exports, {
 const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _timeseriesqueries = require("../time-series-queries");
+const _tracequeries = require("../trace-queries");
 const _model = require("./model");
 const DataQueriesContext = /*#__PURE__*/ (0, _react.createContext)(undefined);
 function useDataQueriesContext() {
@@ -49,11 +50,14 @@ function useDataQueriesContext() {
 function useDataQueries(queryType) {
     const ctx = useDataQueriesContext();
     // Filter the query results based on the specified query type
-    const filteredQueryResults = ctx.queryResults.filter((queryResult)=>queryResult.definition.kind === queryType);
+    const filteredQueryResults = ctx.queryResults.filter((queryResult)=>{
+        var _queryResult_definition;
+        return (queryResult === null || queryResult === void 0 ? void 0 : (_queryResult_definition = queryResult.definition) === null || _queryResult_definition === void 0 ? void 0 : _queryResult_definition.kind) === queryType;
+    });
     // Filter the errors based on the specified query type
     const filteredErrors = ctx.errors.filter((errors, index)=>{
-        var _ctx_queryResults_index;
-        return ((_ctx_queryResults_index = ctx.queryResults[index]) === null || _ctx_queryResults_index === void 0 ? void 0 : _ctx_queryResults_index.definition.kind) === queryType;
+        var _ctx_queryResults_index, _ctx_queryResults_index_definition;
+        return ((_ctx_queryResults_index = ctx.queryResults[index]) === null || _ctx_queryResults_index === void 0 ? void 0 : (_ctx_queryResults_index_definition = _ctx_queryResults_index.definition) === null || _ctx_queryResults_index_definition === void 0 ? void 0 : _ctx_queryResults_index_definition.kind) === queryType;
     });
     // Create a new context object with the filtered results and errors
     const filteredCtx = {
@@ -67,6 +71,7 @@ function useDataQueries(queryType) {
 }
 function DataQueriesProvider(props) {
     const { definitions , options , children , queryOptions  } = props;
+    // Returns a query kind, for example "TimeSeriesQuery" = getQueryType("PrometheusTimeSeriesQuery")
     const getQueryType = (0, _model.useQueryType)();
     const queryDefinitions = definitions.map((definition)=>{
         const type = getQueryType(definition.kind);
@@ -80,14 +85,19 @@ function DataQueriesProvider(props) {
     // Filter definitions for time series query and other future query plugins
     const timeSeriesQueries = queryDefinitions.filter((definition)=>definition.kind === 'TimeSeriesQuery');
     const timeSeriesResults = (0, _timeseriesqueries.useTimeSeriesQueries)(timeSeriesQueries, options, queryOptions);
+    const traceQueries = queryDefinitions.filter((definition)=>definition.kind === 'TraceQuery');
+    const traceResults = (0, _tracequeries.useTraceQueries)(traceQueries);
     const refetchAll = (0, _react.useCallback)(()=>{
         timeSeriesResults.forEach((result)=>result.refetch());
+        traceResults.forEach((result)=>result.refetch());
     }, [
-        timeSeriesResults
+        timeSeriesResults,
+        traceResults
     ]);
     const ctx = (0, _react.useMemo)(()=>{
         const mergedQueryResults = [
-            ...(0, _model.transformQueryResults)(timeSeriesResults, timeSeriesQueries)
+            ...(0, _model.transformQueryResults)(timeSeriesResults, timeSeriesQueries),
+            ...(0, _model.transformQueryResults)(traceResults, traceQueries)
         ];
         return {
             queryResults: mergedQueryResults,
@@ -99,6 +109,8 @@ function DataQueriesProvider(props) {
     }, [
         timeSeriesQueries,
         timeSeriesResults,
+        traceQueries,
+        traceResults,
         refetchAll
     ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(DataQueriesContext.Provider, {

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

@@ -43,23 +43,42 @@ function transformQueryResults(results, definitions) {
     });
 }
 function useQueryType() {
-    const { data: timeSeriesQueryPlugins , isLoading  } = (0, _pluginregistry.useListPluginMetadata)('TimeSeriesQuery');
+    const { data: timeSeriesQueryPlugins , isLoading: isTimeSeriesQueryLoading  } = (0, _pluginregistry.useListPluginMetadata)('TimeSeriesQuery');
+    const { data: traceQueryPlugins , isLoading: isTraceQueryPluginLoading  } = (0, _pluginregistry.useListPluginMetadata)('TraceQuery');
+    // For example, `map: {"TimeSeriesQuery":["PrometheusTimeSeriesQuery"],"TraceQuery":["TempoTraceQuery"]}`
     const queryTypeMap = (0, _react.useMemo)(()=>{
         const map = {
-            TimeSeriesQuery: []
+            TimeSeriesQuery: [],
+            TraceQuery: []
         };
         if (timeSeriesQueryPlugins) {
             timeSeriesQueryPlugins.forEach((plugin)=>{
-                var _map_TimeSeriesQuery;
-                (_map_TimeSeriesQuery = map['TimeSeriesQuery']) === null || _map_TimeSeriesQuery === void 0 ? void 0 : _map_TimeSeriesQuery.push(plugin.kind);
+                var _map_plugin_pluginType;
+                (_map_plugin_pluginType = map[plugin.pluginType]) === null || _map_plugin_pluginType === void 0 ? void 0 : _map_plugin_pluginType.push(plugin.kind);
+            });
+        }
+        if (traceQueryPlugins) {
+            traceQueryPlugins.forEach((plugin)=>{
+                var _map_plugin_pluginType;
+                (_map_plugin_pluginType = map[plugin.pluginType]) === null || _map_plugin_pluginType === void 0 ? void 0 : _map_plugin_pluginType.push(plugin.kind);
             });
         }
         return map;
     }, [
-        timeSeriesQueryPlugins
+        timeSeriesQueryPlugins,
+        traceQueryPlugins
     ]);
     const getQueryType = (0, _react.useCallback)((pluginKind)=>{
-        if (isLoading) {
+        const isLoading = (pluginKind)=>{
+            switch(pluginKind){
+                case 'PrometheusTimeSeriesQuery':
+                    return isTimeSeriesQueryLoading;
+                case 'TempoTraceQuery':
+                    return isTraceQueryPluginLoading;
+            }
+            throw new Error(`Unable to determine the query type: ${pluginKind}`);
+        };
+        if (isLoading(pluginKind)) {
             return undefined;
         }
         for(const queryType in queryTypeMap){
@@ -71,7 +90,8 @@ function useQueryType() {
         throw new Error(`Unable to determine the query type: ${pluginKind}`);
     }, [
         queryTypeMap,
-        isLoading
+        isTimeSeriesQueryLoading,
+        isTraceQueryPluginLoading
     ]);
     return getQueryType;
 }

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

@@ -37,7 +37,7 @@ _export(exports, {
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _core = require("@perses-dev/core");
-const _queryparams = require("./query-params");
+const _refreshinterval = require("./refresh-interval");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -89,34 +89,43 @@ function useTimeRange() {
     return useTimeRangeContext();
 }
 function TimeRangeProvider(props) {
-    const { initialTimeRange , initialRefreshInterval , enabledURLParams , children  } = props;
-    const { timeRange , setTimeRange  } = (0, _queryparams.useSetTimeRangeParams)(initialTimeRange, enabledURLParams);
-    const { refreshInterval , setRefreshInterval , refreshIntervalInMs  } = (0, _queryparams.useSetRefreshIntervalParams)(initialRefreshInterval, enabledURLParams);
-    const [refreshKey, setRefreshKey] = (0, _react.useState)(0);
+    const { timeRange , refreshInterval , children , setTimeRange , setRefreshInterval  } = props;
+    const [localTimeRange, setLocalTimeRange] = (0, _react.useState)(timeRange);
+    const [localRefreshInterval, setLocalefreshInterval] = (0, _react.useState)(refreshInterval);
+    const [refreshCounter, setRefreshCounter] = (0, _react.useState)(0);
+    (0, _react.useEffect)(()=>{
+        setLocalTimeRange(timeRange);
+    }, [
+        timeRange
+    ]);
+    (0, _react.useEffect)(()=>{
+        setLocalefreshInterval(refreshInterval);
+    }, [
+        refreshInterval
+    ]);
     const refresh = (0, _react.useCallback)(()=>{
-        setRefreshKey(refreshKey + 1);
+        setRefreshCounter((counter)=>counter + 1);
     }, [
-        refreshKey
+        setRefreshCounter
     ]);
     const ctx = (0, _react.useMemo)(()=>{
-        const absoluteTimeRange = (0, _core.isRelativeTimeRange)(timeRange) ? (0, _core.toAbsoluteTimeRange)(timeRange) : timeRange;
+        const absoluteTimeRange = (0, _core.isRelativeTimeRange)(localTimeRange) ? (0, _core.toAbsoluteTimeRange)(localTimeRange) : localTimeRange;
         return {
-            timeRange,
-            setTimeRange,
+            timeRange: localTimeRange,
+            setTimeRange: setTimeRange !== null && setTimeRange !== void 0 ? setTimeRange : setLocalTimeRange,
             absoluteTimeRange,
             refresh,
-            refreshKey: `${absoluteTimeRange.start}:${absoluteTimeRange.end}:${refreshInterval}:${refreshKey}`,
-            refreshInterval,
-            refreshIntervalInMs,
-            setRefreshInterval
+            refreshKey: `${absoluteTimeRange.start}:${absoluteTimeRange.end}:${localRefreshInterval}:${refreshCounter}`,
+            refreshInterval: localRefreshInterval,
+            refreshIntervalInMs: (0, _refreshinterval.getRefreshIntervalInMs)(localRefreshInterval),
+            setRefreshInterval: setRefreshInterval !== null && setRefreshInterval !== void 0 ? setRefreshInterval : setLocalefreshInterval
         };
     }, [
-        timeRange,
+        localTimeRange,
         setTimeRange,
         refresh,
-        refreshKey,
-        refreshInterval,
-        refreshIntervalInMs,
+        refreshCounter,
+        localRefreshInterval,
         setRefreshInterval
     ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(TimeRangeContext.Provider, {

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

@@ -0,0 +1,43 @@
+// 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
+});
+Object.defineProperty(exports, "TimeRangeProviderWithQueryParams", {
+    enumerable: true,
+    get: function() {
+        return TimeRangeProviderWithQueryParams;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _TimeRangeProvider = require("./TimeRangeProvider");
+const _queryparams = require("./query-params");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function TimeRangeProviderWithQueryParams(props) {
+    const { initialTimeRange , initialRefreshInterval , children  } = props;
+    const { timeRange , setTimeRange  } = (0, _queryparams.useTimeRangeParams)(initialTimeRange);
+    const { refreshInterval , setRefreshInterval  } = (0, _queryparams.useSetRefreshIntervalParams)(initialRefreshInterval);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TimeRangeProvider.TimeRangeProvider, {
+        timeRange: timeRange,
+        refreshInterval: refreshInterval,
+        setTimeRange: setTimeRange,
+        setRefreshInterval: setRefreshInterval,
+        children: children
+    });
+}

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

@@ -15,6 +15,7 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 _export_star(require("./TimeRangeProvider"), exports);
+_export_star(require("./TimeRangeProviderWithQueryParams"), exports);
 _export_star(require("./query-params"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {

package/dist/cjs/runtime/TimeRangeProvider/query-params.js

@@ -39,8 +39,8 @@ _export(exports, {
     useInitialTimeRange: function() {
         return useInitialTimeRange;
     },
-    useSetTimeRangeParams: function() {
-        return useSetTimeRangeParams;
+    useTimeRangeParams: function() {
+        return useTimeRangeParams;
     },
     useInitialRefreshInterval: function() {
         return useInitialRefreshInterval;
@@ -132,19 +132,16 @@ function useInitialTimeRange(dashboardDuration) {
         dashboardDuration
     ]);
 }
-function useSetTimeRangeParams(initialTimeRange, enabledURLParams = true) {
+function useTimeRangeParams(initialTimeRange) {
     const [query, setQuery] = (0, _usequeryparams.useQueryParams)(timeRangeQueryConfig, {
         updateType: 'replaceIn'
     });
     // determine whether initial param had previously been populated to fix back btn
     const [paramsLoaded, setParamsLoaded] = (0, _react.useState)(false);
-    // optional fallback when app does not want query string as source of truth
-    // this occurs when enabledURLParams is set to false on TimeRangeProvider
-    const [timeRangeState, setTimeRangeState] = (0, _react.useState)(initialTimeRange);
     const { start  } = query;
     (0, _react.useEffect)(()=>{
         // when dashboard loaded with no params, default to dashboard duration
-        if (enabledURLParams && !paramsLoaded && !start) {
+        if (!paramsLoaded && !start) {
             if ((0, _core.isRelativeTimeRange)(initialTimeRange)) {
                 setQuery({
                     start: initialTimeRange.pastDuration,
@@ -155,7 +152,6 @@ function useSetTimeRangeParams(initialTimeRange, enabledURLParams = true) {
         }
     }, [
         initialTimeRange,
-        enabledURLParams,
         paramsLoaded,
         start,
         setQuery
@@ -172,12 +168,6 @@ function useSetTimeRangeParams(initialTimeRange, enabledURLParams = true) {
     }, [
         setQuery
     ]);
-    if (!enabledURLParams) {
-        return {
-            timeRange: timeRangeState,
-            setTimeRange: setTimeRangeState
-        };
-    }
     return {
         timeRange: initialTimeRange,
         setTimeRange: setTimeRange
@@ -203,29 +193,16 @@ function useInitialRefreshInterval(dashboardDuration) {
         refresh
     ]);
 }
-function getRefreshIntervalInMs(refreshInterval) {
-    let refreshIntervalInMs = 0;
-    if (refreshInterval) {
-        const refreshIntervalDuration = (0, _core.parseDurationString)(refreshInterval);
-        if (refreshIntervalDuration && refreshIntervalDuration.seconds) {
-            refreshIntervalInMs = (refreshIntervalDuration === null || refreshIntervalDuration === void 0 ? void 0 : refreshIntervalDuration.seconds) * 1000;
-        }
-    }
-    return refreshIntervalInMs;
-}
-function useSetRefreshIntervalParams(initialRefreshInterval, enabledURLParams = true) {
+function useSetRefreshIntervalParams(initialRefreshInterval) {
     const [query, setQuery] = (0, _usequeryparams.useQueryParams)(refreshIntervalQueryConfig, {
         updateType: 'replaceIn'
     });
     // determine whether initial param had previously been populated to fix back btn
     const [paramsLoaded, setParamsLoaded] = (0, _react.useState)(false);
-    // optional fallback when app does not want query string as source of truth
-    // this occurs when enabledURLParams is set to false on TimeRangeProvider
-    const [refreshIntervalState, setRefreshIntervalState] = (0, _react.useState)(initialRefreshInterval);
     const { refresh  } = query;
     (0, _react.useEffect)(()=>{
         // when dashboard loaded with no params, default to dashboard refresh interval
-        if (enabledURLParams && !paramsLoaded && !refresh) {
+        if (!paramsLoaded && !refresh) {
             setQuery({
                 refresh: initialRefreshInterval
             });
@@ -233,7 +210,6 @@ function useSetRefreshIntervalParams(initialRefreshInterval, enabledURLParams =
         }
     }, [
         initialRefreshInterval,
-        enabledURLParams,
         paramsLoaded,
         refresh,
         setQuery
@@ -243,16 +219,8 @@ function useSetRefreshIntervalParams(initialRefreshInterval, enabledURLParams =
         }), [
         setQuery
     ]);
-    if (!enabledURLParams) {
-        return {
-            refreshInterval: refreshIntervalState,
-            setRefreshInterval: setRefreshIntervalState,
-            refreshIntervalInMs: getRefreshIntervalInMs(refreshIntervalState)
-        };
-    }
     return {
         refreshInterval: initialRefreshInterval,
-        setRefreshInterval: setRefreshInterval,
-        refreshIntervalInMs: getRefreshIntervalInMs(initialRefreshInterval)
+        setRefreshInterval: setRefreshInterval
     };
 }

package/dist/cjs/runtime/TimeRangeProvider/refresh-interval.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
+});
+Object.defineProperty(exports, "getRefreshIntervalInMs", {
+    enumerable: true,
+    get: function() {
+        return getRefreshIntervalInMs;
+    }
+});
+const _core = require("@perses-dev/core");
+const _datefns = require("date-fns");
+function getRefreshIntervalInMs(refreshInterval) {
+    if (refreshInterval !== undefined && refreshInterval !== null) {
+        return (0, _datefns.milliseconds)((0, _core.parseDurationString)(refreshInterval));
+    }
+    return 0;
+}

package/dist/cjs/runtime/datasources.js

@@ -47,11 +47,12 @@ function useDatasourceStore() {
     }
     return ctx;
 }
-function useListDatasourceSelectItems(datasourcePluginKind) {
+function useListDatasourceSelectItems(datasourcePluginKind, project) {
     const { listDatasourceSelectItems  } = useDatasourceStore();
     return (0, _reactquery.useQuery)([
         'listDatasourceSelectItems',
-        datasourcePluginKind
+        datasourcePluginKind,
+        project
     ], ()=>listDatasourceSelectItems(datasourcePluginKind));
 }
 function useDatasourceClient(selector) {

package/dist/cjs/runtime/index.js

@@ -20,6 +20,7 @@ _export_star(require("./plugin-registry"), exports);
 _export_star(require("./template-variables"), exports);
 _export_star(require("./TimeRangeProvider"), exports);
 _export_star(require("./time-series-queries"), exports);
+_export_star(require("./trace-queries"), exports);
 _export_star(require("./DataQueriesProvider"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {

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

@@ -0,0 +1,59 @@
+// 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
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    TRACE_QUERY_KEY: function() {
+        return TRACE_QUERY_KEY;
+    },
+    useTraceQueries: function() {
+        return useTraceQueries;
+    }
+});
+const _reactquery = require("@tanstack/react-query");
+const _datasources = require("./datasources");
+const _pluginregistry = require("./plugin-registry");
+const TRACE_QUERY_KEY = 'TraceQuery';
+function useTraceQueries(definitions) {
+    const { getPlugin  } = (0, _pluginregistry.usePluginRegistry)();
+    const datasourceStore = (0, _datasources.useDatasourceStore)();
+    const ctx = {
+        datasourceStore
+    };
+    return (0, _reactquery.useQueries)({
+        queries: definitions.map((definition)=>{
+            var _definition_spec, _definition_spec_plugin;
+            const queryKey = [
+                definition,
+                datasourceStore
+            ];
+            const traceQueryKind = definition === null || definition === void 0 ? void 0 : (_definition_spec = definition.spec) === null || _definition_spec === void 0 ? void 0 : (_definition_spec_plugin = _definition_spec.plugin) === null || _definition_spec_plugin === void 0 ? void 0 : _definition_spec_plugin.kind;
+            return {
+                queryKey: queryKey,
+                queryFn: async ()=>{
+                    const plugin = await getPlugin(TRACE_QUERY_KEY, traceQueryKind);
+                    const data = await plugin.getTraceData(definition.spec.plugin.spec, ctx);
+                    return data;
+                }
+            };
+        })
+    });
+}

package/dist/cjs/stories/shared-utils/decorators/WithPluginRegistry.js

@@ -90,7 +90,8 @@ const WithPluginRegistry = (Story)=>{
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.PluginRegistry, {
         pluginLoader: bundledPluginLoader,
         defaultPluginKinds: {
-            TimeSeriesQuery: 'PrometheusTimeSeriesQuery'
+            TimeSeriesQuery: 'PrometheusTimeSeriesQuery',
+            TraceQuery: 'TempoTraceQuery'
         },
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(Story, {})
     });

package/dist/cjs/stories/shared-utils/decorators/WithPluginSystemDatasourceStore.js

@@ -76,6 +76,18 @@ const WithPluginSystemDatasourceStore = (Story, context)=>{
                 ]);
             }
             throw new Error(`WithDatasourceStore is not configured to support kind: ${datasourcePluginKind}`);
+        },
+        getSavedDatasources: ()=>{
+            return {};
+        },
+        setSavedDatasources: (datasources)=>{
+            return datasources;
+        },
+        getLocalDatasources: ()=>{
+            return {};
+        },
+        setLocalDatasources: (datasources)=>{
+            return datasources;
         }
     };
     const parameter = isWithDatastoreStoreParameter(initParameter) ? initParameter : {

package/dist/cjs/stories/shared-utils/decorators/WithTimeRange.js

@@ -31,8 +31,8 @@ const WithTimeRange = (Story, context)=>{
     const parameter = isWithTimeRangeParameter(initParameter) ? initParameter : undefined;
     const props = parameter === null || parameter === void 0 ? void 0 : parameter.props;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.TimeRangeProvider, {
-        initialRefreshInterval: "0s",
-        initialTimeRange: {
+        refreshInterval: "0s",
+        timeRange: {
             pastDuration: '1h'
         },
         ...props,

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

@@ -14,10 +14,18 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "MOCK_TIME_SERIES_DATA", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    MOCK_TIME_SERIES_DATA: function() {
         return MOCK_TIME_SERIES_DATA;
+    },
+    MOCK_TRACE_DATA: function() {
+        return MOCK_TRACE_DATA;
     }
 });
 const MOCK_TIME_SERIES_DATA = {
@@ -55,3 +63,18 @@ const MOCK_TIME_SERIES_DATA = {
         }
     ]
 };
+const MOCK_TRACE_DATA = {
+    traces: [
+        {
+            durationMs: 1120,
+            errorCount: 0,
+            spanCount: 10,
+            startTimeUnixMs: 1699916103945861,
+            traceId: '95ba9202315c29c801b5aa41452aa775',
+            name: 'rootServiceName="shop-backend", rootTraceName="shop-backend"'
+        }
+    ],
+    metadata: {
+        executedQueryString: '{ duration > 1000ms }'
+    }
+};