@perses-dev/dashboards 0.9.0 → 0.11.0

package/dist/cjs/context/DatasourceStoreProvider.js

@@ -24,30 +24,98 @@ const _core = require("@perses-dev/core");
 const _pluginSystem = require("@perses-dev/plugin-system");
 function DatasourceStoreProvider(props) {
     const { dashboardResource , datasourceApi , children  } = props;
-    const getDatasource = (0, _core.useEvent)(async (selector)=>{
+    const { project  } = dashboardResource.metadata;
+    const { getPlugin , listPluginMetadata  } = (0, _pluginSystem.usePluginRegistry)();
+    const findDatasource = (0, _core.useEvent)(async (selector)=>{
         // Try to find it in dashboard spec
         const { datasources  } = dashboardResource.spec;
         const dashboardDatasource = findDashboardDatasource(datasources, selector);
         if (dashboardDatasource !== undefined) {
-            return dashboardDatasource;
+            return {
+                spec: dashboardDatasource,
+                proxyUrl: undefined
+            };
         }
         // Try to find it at the project level as a Datasource resource
-        const { project  } = dashboardResource.metadata;
         const datasource = await datasourceApi.getDatasource(project, selector);
         if (datasource !== undefined) {
-            return datasource.spec;
+            return {
+                spec: datasource.resource.spec,
+                proxyUrl: datasource.proxyUrl
+            };
         }
         // Try to find it at the global level as a GlobalDatasource resource
         const globalDatasource = await datasourceApi.getGlobalDatasource(selector);
         if (globalDatasource !== undefined) {
-            return globalDatasource.spec;
+            return {
+                spec: globalDatasource.resource.spec,
+                proxyUrl: globalDatasource.proxyUrl
+            };
         }
         throw new Error(`No datasource found for kind '${selector.kind}' and name '${selector.name}'`);
     });
+    // Gets a datasource spec for a given selector
+    const getDatasource = (0, _react.useCallback)(async (selector)=>{
+        const { spec  } = await findDatasource(selector);
+        return spec;
+    }, [
+        findDatasource
+    ]);
+    // Given a Datasource selector, finds the spec for it and then uses its corresponding plugin the create a client
+    const getDatasourceClient = (0, _react.useCallback)(async function getClient(selector) {
+        const { kind  } = selector;
+        const [{ spec , proxyUrl  }, plugin] = await Promise.all([
+            findDatasource(selector),
+            getPlugin('Datasource', kind)
+        ]);
+        return plugin.createClient(spec.plugin.spec, {
+            proxyUrl
+        });
+    }, [
+        findDatasource,
+        getPlugin
+    ]);
+    const listDatasourceMetadata = (0, _core.useEvent)(async (datasourcePluginKind)=>{
+        const [pluginMetadata, datasources, globalDatasources] = await Promise.all([
+            listPluginMetadata('Datasource'),
+            datasourceApi.listDatasources(project, datasourcePluginKind),
+            datasourceApi.listGlobalDatasources(datasourcePluginKind)
+        ]);
+        // Find the metadata for the plugin type they asked for so we can use it for the name of the default datasource
+        const datasourcePluginMetadata = pluginMetadata.find((metadata)=>metadata.kind === datasourcePluginKind);
+        if (datasourcePluginMetadata === undefined) {
+            throw new Error(`Could not find a Datasource plugin with kind '${datasourcePluginKind}'`);
+        }
+        // Get helper for de-duping results properly
+        const { results , addResult  } = buildListDatasourceMetadataResults(datasourcePluginMetadata.display.name);
+        // Start with dashboard datasources that have highest precedence
+        if (dashboardResource.spec.datasources !== undefined) {
+            for(const selectorName in dashboardResource.spec.datasources){
+                const spec = dashboardResource.spec.datasources[selectorName];
+                if (spec === undefined || spec.plugin.kind !== datasourcePluginKind) continue;
+                addResult(spec, selectorName);
+            }
+        }
+        // Now look at project-level datasources
+        for (const datasource of datasources){
+            const selectorName1 = datasource.metadata.name;
+            addResult(datasource.spec, selectorName1);
+        }
+        // And finally global datasources
+        for (const globalDatasource of globalDatasources){
+            const selectorName2 = globalDatasource.metadata.name;
+            addResult(globalDatasource.spec, selectorName2);
+        }
+        return results;
+    });
     const ctxValue = (0, _react.useMemo)(()=>({
-            getDatasource
+            getDatasource,
+            getDatasourceClient,
+            listDatasourceMetadata
         }), [
-        getDatasource
+        getDatasource,
+        getDatasourceClient,
+        listDatasourceMetadata
     ]);
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.DatasourceStoreContext.Provider, {
         value: ctxValue,
@@ -66,3 +134,37 @@ function findDashboardDatasource(dashboardDatasources, selector) {
     // If only using a kind, try to find one with that kind that is the default
     return Object.values(dashboardDatasources).find((ds)=>ds.plugin.kind === selector.kind && ds.default === true);
 }
+// Helper for building a list of DatasourceMetadata results that will take care of de-duping already used selectors
+function buildListDatasourceMetadataResults(pluginDisplayName) {
+    const results = [];
+    const usedNames = new Set();
+    let defaultAdded = false;
+    const addResult = (spec, selectorName)=>{
+        var ref;
+        // If we haven't added a default yet and this is a default, add default option to the beginning of the results
+        if (spec.default && defaultAdded === false) {
+            results.unshift({
+                name: `Default ${pluginDisplayName}`,
+                selector: {
+                    kind: spec.plugin.kind
+                }
+            });
+            defaultAdded = true;
+        }
+        // If we already have a datasource with this selector name, ignore it, otherwise add to end of list
+        if (usedNames.has(selectorName)) return;
+        var ref1;
+        results.push({
+            name: (ref1 = (ref = spec.display) === null || ref === void 0 ? void 0 : ref.name) !== null && ref1 !== void 0 ? ref1 : selectorName,
+            selector: {
+                kind: spec.plugin.kind,
+                name: selectorName
+            }
+        });
+        usedNames.add(selectorName);
+    };
+    return {
+        results,
+        addResult
+    };
+}

package/dist/cjs/context/TemplateVariableProvider.js

@@ -77,7 +77,8 @@ function useTemplateVariableActions() {
         return {
             setVariableValue: s.setVariableValue,
             setVariableLoading: s.setVariableLoading,
-            setVariableOptions: s.setVariableOptions
+            setVariableOptions: s.setVariableOptions,
+            setVariableDefinitions: s.setVariableDefinitions
         };
     });
 }
@@ -122,6 +123,12 @@ function createTemplateVariableSrvStore({ initialVariableDefinitions =[]  }) {
     const store = (0, _zustand.createStore)()((0, _middleware.devtools)((0, _immer.immer)((set)=>({
             variableState: hydrateTemplateVariableStates(initialVariableDefinitions),
             variableDefinitions: initialVariableDefinitions,
+            setVariableDefinitions (definitions) {
+                set((state)=>{
+                    state.variableDefinitions = definitions;
+                    state.variableState = hydrateTemplateVariableStates(definitions);
+                });
+            },
             setVariableOptions (name, options) {
                 set((state)=>{
                     const varState = state.variableState[name];

package/dist/cjs/context/TimeRangeProvider.js

@@ -14,14 +14,18 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "TimeRangeProvider", {
-    enumerable: true,
-    get: ()=>TimeRangeProvider
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    TimeRangeProvider: ()=>TimeRangeProvider,
+    useDashboardTimeRange: ()=>useDashboardTimeRange
 });
 const _jsxRuntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
-const _dateFns = require("date-fns");
-const _core = require("@perses-dev/core");
 const _pluginSystem = require("@perses-dev/plugin-system");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
@@ -63,47 +67,12 @@ function _interopRequireWildcard(obj, nodeInterop) {
     return newObj;
 }
 function TimeRangeProvider(props) {
-    const { initialTimeRange , children , onTimeRangeChange  } = props;
-    const { queryString , setQueryString  } = (0, _pluginSystem.useQueryString)();
-    const defaultTimeRange = (0, _core.isRelativeTimeRange)(initialTimeRange) ? (0, _core.toAbsoluteTimeRange)(initialTimeRange) : initialTimeRange;
-    const [timeRange, setActiveTimeRange] = (0, _react.useState)(defaultTimeRange);
-    const setTimeRange = (0, _react.useCallback)((value)=>{
-        if (onTimeRangeChange !== undefined) {
-            // optional callback to override default behavior
-            onTimeRangeChange(value);
-            return;
-        }
-        if ((0, _core.isRelativeTimeRange)(value)) {
-            if (setQueryString) {
-                queryString.set('start', value.pastDuration);
-                // end not required for relative time but may have been set by AbsoluteTimePicker or zoom
-                queryString.delete('end');
-                setQueryString(queryString);
-            } else {
-                setActiveTimeRange((0, _core.toAbsoluteTimeRange)(value));
-            }
-            return;
-        }
-        // allows app to specify whether query params should be source of truth for active time range
-        if (setQueryString) {
-            // Absolute URL example) ?start=1663707045000&end=1663713330000
-            // currently set from ViewDashboard initial queryString, AbsoluteTimePicker, or LineChart panel onDataZoom
-            const startUnixMs = (0, _dateFns.getUnixTime)(value.start) * 1000;
-            const endUnixMs = (0, _dateFns.getUnixTime)(value.end) * 1000;
-            queryString.set('start', startUnixMs.toString());
-            queryString.set('end', endUnixMs.toString());
-            setQueryString(queryString);
-        } else {
-            setActiveTimeRange(value);
-        }
-    }, [
-        queryString,
-        setQueryString,
-        onTimeRangeChange
-    ]);
+    const { timeRange , children , setTimeRange  } = props;
+    // TODO: fix no-op, pass paramsEnabled as false in useSetTimeRangeParams as workaround
     const ctx = (0, _react.useMemo)(()=>({
             timeRange,
-            setTimeRange
+            setTimeRange: setTimeRange !== null && setTimeRange !== void 0 ? setTimeRange : ()=>{
+            /* no-op */ }
         }), [
         timeRange,
         setTimeRange
@@ -113,3 +82,10 @@ function TimeRangeProvider(props) {
         children: children
     });
 }
+function useDashboardTimeRange() {
+    const { timeRange , setTimeRange  } = (0, _pluginSystem.useTimeRangeContext)();
+    return {
+        timeRange,
+        setTimeRange
+    };
+}

package/dist/cjs/context/index.js

@@ -14,13 +14,11 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./DashboardAppSlice"), exports);
 _exportStar(require("./DashboardProvider"), exports);
 _exportStar(require("./DatasourceStoreProvider"), exports);
-_exportStar(require("./LayoutsSlice"), exports);
-_exportStar(require("./QueryStringProvider"), exports);
 _exportStar(require("./TemplateVariableProvider"), exports);
 _exportStar(require("./TimeRangeProvider"), exports);
+_exportStar(require("./useDashboardSpec"), exports);
 function _exportStar(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {

package/dist/cjs/context/useDashboardSpec.js

@@ -0,0 +1,61 @@
+// Copyright 2022 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, "useDashboardSpec", {
+    enumerable: true,
+    get: ()=>useDashboardSpec
+});
+const _dashboardProvider = require("./DashboardProvider");
+const _templateVariableProvider = require("./TemplateVariableProvider");
+function useDashboardSpec() {
+    const { panels , panelGroups , defaultTimeRange  } = (0, _dashboardProvider.useDashboardStore)(({ panels , panelGroups , defaultTimeRange  })=>({
+            panels,
+            panelGroups,
+            defaultTimeRange
+        }));
+    const variables = (0, _templateVariableProvider.useTemplateVariableDefinitions)();
+    const layouts = convertPanelGroupsToLayouts(panelGroups);
+    return {
+        panels,
+        layouts,
+        variables,
+        duration: defaultTimeRange.pastDuration
+    };
+}
+function convertPanelGroupsToLayouts(panelGroups) {
+    const layouts = [];
+    Object.values(panelGroups).forEach((group)=>{
+        const { title , isCollapsed , items  } = group;
+        let display = undefined;
+        if (title) {
+            display = {
+                title,
+                collapse: {
+                    open: !isCollapsed
+                }
+            };
+        }
+        const layout = {
+            kind: 'Grid',
+            spec: {
+                display,
+                items
+            }
+        };
+        layouts.push(layout);
+    });
+    return layouts;
+}

package/dist/cjs/index.js

@@ -16,6 +16,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 _exportStar(require("./components"), exports);
 _exportStar(require("./context"), exports);
+_exportStar(require("./utils"), exports);
 _exportStar(require("./views"), exports);
 function _exportStar(from, to) {
     Object.keys(from).forEach(function(k) {

package/dist/cjs/test/render.js

@@ -20,8 +20,13 @@ Object.defineProperty(exports, "renderWithContext", {
 });
 const _jsxRuntime = require("react/jsx-runtime");
 const _react = require("@testing-library/react");
+const _reactRouterDom = require("react-router-dom");
+const _history = require("history");
+const _useQueryParams = require("use-query-params");
+const _reactRouter6 = require("use-query-params/adapters/react-router-6");
 const _reactQuery = require("@tanstack/react-query");
-function renderWithContext(ui, options) {
+const _components = require("@perses-dev/components");
+function renderWithContext(ui, options, history) {
     // Create a new QueryClient for each test to avoid caching issues
     const queryClient = new _reactQuery.QueryClient({
         defaultOptions: {
@@ -31,8 +36,23 @@ function renderWithContext(ui, options) {
             }
         }
     });
-    return (0, _react.render)(/*#__PURE__*/ (0, _jsxRuntime.jsx)(_reactQuery.QueryClientProvider, {
-        client: queryClient,
-        children: ui
-    }), options);
+    const BaseRender = ()=>{
+        const HistoryRouter = _reactRouterDom.unstable_HistoryRouter;
+        history = history !== null && history !== void 0 ? history : (0, _history.createMemoryHistory)();
+        return /*#__PURE__*/ (0, _jsxRuntime.jsx)(HistoryRouter, {
+            history: history,
+            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_reactQuery.QueryClientProvider, {
+                client: queryClient,
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_useQueryParams.QueryParamProvider, {
+                    adapter: _reactRouter6.ReactRouter6Adapter,
+                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ChartsThemeProvider, {
+                        themeName: "perses",
+                        chartsTheme: _components.testChartsTheme,
+                        children: ui
+                    })
+                })
+            })
+        });
+    };
+    return (0, _react.render)(/*#__PURE__*/ (0, _jsxRuntime.jsx)(BaseRender, {}), options);
 }

package/dist/cjs/test/setup-tests.js

@@ -10,11 +10,14 @@
 // 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.
-// Add testing library assertions
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+const _reactIntersectionObserver = require("react-intersection-observer");
 require("@testing-library/jest-dom/extend-expect");
 // Always mock e-charts during tests since we don't have a proper canvas in jsdom
 jest.mock('echarts/core');
+// Tell react-intersection-observer that everything should be considered in-view for tests (see package documentation
+// for other options)
+(0, _reactIntersectionObserver.defaultFallbackInView)(true);

package/dist/cjs/test/testDashboard.js

@@ -28,7 +28,7 @@ const testDashboard = {
         version: 0
     },
     spec: {
-        duration: '24h',
+        duration: '5m',
         variables: [
             {
                 kind: 'TextVariable',
@@ -144,6 +144,7 @@ const testDashboard = {
                     }
                 }
             },
+            // This panel is referenced in more than one layout below
             diskIO: {
                 kind: 'Panel',
                 spec: {
@@ -209,7 +210,10 @@ const testDashboard = {
                 kind: 'Grid',
                 spec: {
                     display: {
-                        title: 'CPU Stats'
+                        title: 'CPU Stats',
+                        collapse: {
+                            open: true
+                        }
                     },
                     items: [
                         // First Row
@@ -221,6 +225,15 @@ const testDashboard = {
                             content: {
                                 $ref: '#/spec/panels/cpu'
                             }
+                        },
+                        {
+                            x: 0,
+                            y: 5,
+                            width: 6,
+                            height: 2,
+                            content: {
+                                $ref: '#/spec/panels/diskIO'
+                            }
                         }
                     ]
                 }
@@ -230,6 +243,15 @@ const testDashboard = {
                 kind: 'Grid',
                 spec: {
                     items: [
+                        {
+                            x: 0,
+                            y: 0,
+                            width: 6,
+                            height: 2,
+                            content: {
+                                $ref: '#/spec/panels/diskIO'
+                            }
+                        },
                         {
                             x: 8,
                             y: 0,
@@ -253,15 +275,6 @@ const testDashboard = {
                         }
                     },
                     items: [
-                        {
-                            x: 0,
-                            y: 0,
-                            width: 6,
-                            height: 2,
-                            content: {
-                                $ref: '#/spec/panels/diskIO'
-                            }
-                        },
                         {
                             x: 18,
                             y: 0,

package/dist/cjs/utils/index.js

@@ -0,0 +1,28 @@
+// Copyright 2022 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
+});
+_exportStar(require("./time-range-params"), exports);
+function _exportStar(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/utils/time-range-params.js

@@ -0,0 +1,145 @@
+// Copyright 2022 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, {
+    encodeTimeRangeValue: ()=>encodeTimeRangeValue,
+    decodeTimeRangeValue: ()=>decodeTimeRangeValue,
+    TimeRangeParam: ()=>TimeRangeParam,
+    timeRangeQueryConfig: ()=>timeRangeQueryConfig,
+    useInitialTimeRange: ()=>useInitialTimeRange,
+    useSetTimeRangeParams: ()=>useSetTimeRangeParams
+});
+const _react = require("react");
+const _useQueryParams = require("use-query-params");
+const _dateFns = require("date-fns");
+const _core = require("@perses-dev/core");
+/* Interprets an encoded string and returns either the string or null/undefined if not available */ function getEncodedValue(input, allowEmptyString) {
+    if (input == null) {
+        return input;
+    }
+    // '' or []
+    if (input.length === 0 && (!allowEmptyString || allowEmptyString && input !== '')) {
+        return null;
+    }
+    const str = input instanceof Array ? input[0] : input;
+    if (str == null) {
+        return str;
+    }
+    if (!allowEmptyString && str === '') {
+        return null;
+    }
+    return str;
+}
+function encodeTimeRangeValue(timeOptionValue) {
+    if (!timeOptionValue) {
+        return timeOptionValue;
+    }
+    if (typeof timeOptionValue === 'string') {
+        if ((0, _core.isDurationString)(timeOptionValue)) {
+            return timeOptionValue;
+        }
+    }
+    return ((0, _dateFns.getUnixTime)(timeOptionValue) * 1000).toString();
+}
+function decodeTimeRangeValue(input) {
+    const paramString = getEncodedValue(input);
+    if (paramString == null) return paramString;
+    return (0, _core.isDurationString)(paramString) ? paramString : new Date(Number(paramString));
+}
+const TimeRangeParam = {
+    encode: encodeTimeRangeValue,
+    decode: decodeTimeRangeValue,
+    equals: (valueA, valueB)=>{
+        if (valueA === valueB) return true;
+        if (valueA == null || valueB == null) return valueA === valueB;
+        return valueA.valueOf() === valueB.valueOf();
+    }
+};
+const timeRangeQueryConfig = {
+    start: TimeRangeParam,
+    end: TimeRangeParam
+};
+function useInitialTimeRange(dashboardDuration) {
+    const [query] = (0, _useQueryParams.useQueryParams)(timeRangeQueryConfig);
+    const { start , end  } = query;
+    return (0, _react.useMemo)(()=>{
+        let initialTimeRange = {
+            pastDuration: dashboardDuration
+        };
+        if (!start) {
+            return initialTimeRange;
+        }
+        const startStr = start.toString();
+        if ((0, _core.isDurationString)(startStr)) {
+            initialTimeRange = {
+                pastDuration: startStr
+            };
+        } else if ((0, _dateFns.isDate)(start) && (0, _dateFns.isDate)(end)) {
+            initialTimeRange = {
+                start: start,
+                end: end
+            };
+        }
+        return initialTimeRange;
+    }, [
+        start,
+        end,
+        dashboardDuration
+    ]);
+}
+function useSetTimeRangeParams(initialTimeRange, paramsEnabled = true) {
+    const [query, setQuery] = (0, _useQueryParams.useQueryParams)(timeRangeQueryConfig);
+    // fallback when app does not want query string as source of truth
+    const [timeRangeState, setTimeRangeState] = (0, _react.useState)(initialTimeRange);
+    const { start  } = query;
+    // set start param on page load if empty
+    if (paramsEnabled && !start) {
+        if ((0, _core.isRelativeTimeRange)(initialTimeRange)) {
+            setQuery({
+                start: initialTimeRange.pastDuration,
+                end: undefined
+            });
+        }
+    }
+    const setTimeRange = (0, _react.useCallback)((value)=>{
+        if ((0, _core.isRelativeTimeRange)(value)) {
+            setQuery({
+                start: value.pastDuration,
+                end: undefined
+            });
+        } else {
+            setQuery(value);
+        }
+    }, [
+        setQuery
+    ]);
+    if (!paramsEnabled) {
+        return {
+            timeRange: timeRangeState,
+            setTimeRange: setTimeRangeState
+        };
+    }
+    return {
+        timeRange: initialTimeRange,
+        setTimeRange: setTimeRange
+    };
+}