@perses-dev/dashboards 0.7.1 → 0.8.0

package/dist/cjs/context/QueryStringProvider.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useQueryString = exports.QueryStringProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// 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.
+const react_1 = require("react");
+const plugin_system_1 = require("@perses-dev/plugin-system");
+/**
+ * Allows apps to provide their own query string implementations
+ */
+function QueryStringProvider(props) {
+    const { queryString, setQueryString, children } = props;
+    const ctx = (0, react_1.useMemo)(() => ({ queryString, setQueryString }), [queryString, setQueryString]);
+    return (0, jsx_runtime_1.jsx)(plugin_system_1.QueryStringContext.Provider, { value: ctx, children: children });
+}
+exports.QueryStringProvider = QueryStringProvider;
+function useQueryString() {
+    const ctx = (0, react_1.useContext)(plugin_system_1.QueryStringContext);
+    if (ctx === undefined) {
+        throw new Error('No QueryStringContext found. Did you forget a Provider?');
+    }
+    return ctx;
+}
+exports.useQueryString = useQueryString;

package/dist/cjs/context/TemplateVariableProvider.js

@@ -0,0 +1,216 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TemplateVariableProvider = exports.useTemplateVariableStore = exports.useTemplateVariableDefinitions = exports.useTemplateVariableActions = exports.useTemplateVariable = exports.useTemplateVariableValues = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// 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.
+const react_1 = require("react");
+const zustand_1 = require("zustand");
+const immer_1 = require("zustand/middleware/immer");
+const middleware_1 = require("zustand/middleware");
+const plugin_system_1 = require("@perses-dev/plugin-system");
+const core_1 = require("@perses-dev/core");
+const TemplateVariableStoreContext = (0, react_1.createContext)(undefined);
+function useTemplateVariableStoreCtx() {
+    const context = (0, react_1.useContext)(TemplateVariableStoreContext);
+    if (!context) {
+        throw new Error('TemplateVariableStoreContext not initialized');
+    }
+    return context;
+}
+function useTemplateVariableValues(variableNames) {
+    const store = useTemplateVariableStoreCtx();
+    const state = (0, zustand_1.useStore)(store, (s) => {
+        const names = variableNames !== null && variableNames !== void 0 ? variableNames : Object.keys(s.variableState);
+        const vars = {};
+        names.forEach((name) => {
+            const varState = s.variableState[name];
+            if (!varState) {
+                return;
+            }
+            vars[name] = varState;
+        });
+        return vars;
+    }, (left, right) => {
+        return JSON.stringify(left) === JSON.stringify(right);
+    });
+    return state;
+}
+exports.useTemplateVariableValues = useTemplateVariableValues;
+function useTemplateVariable(name) {
+    const store = useTemplateVariableStoreCtx();
+    return (0, zustand_1.useStore)(store, (s) => {
+        const variableState = s.variableState[name];
+        const definition = s.variableDefinitions.find((v) => v.name === name);
+        return {
+            state: variableState,
+            definition,
+        };
+    });
+}
+exports.useTemplateVariable = useTemplateVariable;
+function useTemplateVariableActions() {
+    const store = useTemplateVariableStoreCtx();
+    return (0, zustand_1.useStore)(store, (s) => {
+        return {
+            setVariableValue: s.setVariableValue,
+            loadTemplateVariable: s.loadTemplateVariable,
+        };
+    });
+}
+exports.useTemplateVariableActions = useTemplateVariableActions;
+function useTemplateVariableDefinitions() {
+    const store = useTemplateVariableStoreCtx();
+    return (0, zustand_1.useStore)(store, (s) => s.variableDefinitions);
+}
+exports.useTemplateVariableDefinitions = useTemplateVariableDefinitions;
+function useTemplateVariableStore() {
+    const store = useTemplateVariableStoreCtx();
+    return (0, zustand_1.useStore)(store);
+}
+exports.useTemplateVariableStore = useTemplateVariableStore;
+function PluginProvider({ children }) {
+    const values = useTemplateVariableValues();
+    return (0, jsx_runtime_1.jsx)(plugin_system_1.TemplateVariableContext.Provider, { value: { state: values }, children: children });
+}
+function createTemplateVariableSrvStore({ initialVariableDefinitions = [] }) {
+    const store = (0, zustand_1.createStore)()((0, middleware_1.devtools)((0, immer_1.immer)((set, get) => ({
+        variableState: hydrateTemplateVariableStates(initialVariableDefinitions),
+        variableDefinitions: initialVariableDefinitions,
+        // Actions
+        loadTemplateVariable: async (name) => {
+            const def = get().variableDefinitions.find((v) => v.name === name);
+            if (!def) {
+                // Can't find the variable definition
+                return;
+            }
+            set((state) => {
+                const varState = state.variableState[name];
+                if (varState) {
+                    varState.loading = true;
+                }
+            });
+            // Replace with loader
+            const { data: values } = await loadTemplateVariables();
+            if (def.options.allowAllValue) {
+                values.unshift(getAllOption());
+            }
+            set((state) => {
+                const varState = state.variableState[name];
+                if (varState) {
+                    varState.options = values;
+                    varState.loading = false;
+                }
+            });
+            return;
+        },
+        setVariableValue: (name, value) => set((state) => {
+            let val = value;
+            const varState = state.variableState[name];
+            if (!varState) {
+                return;
+            }
+            // Make sure there is only one all value
+            if (Array.isArray(val) && val.includes(core_1.DEFAULT_ALL_VALUE)) {
+                if (val.at(-1) === core_1.DEFAULT_ALL_VALUE) {
+                    val = [core_1.DEFAULT_ALL_VALUE];
+                }
+                else {
+                    val = val.filter((v) => v !== core_1.DEFAULT_ALL_VALUE);
+                }
+            }
+            varState.value = val;
+        }),
+    }))));
+    return store;
+}
+function TemplateVariableProvider({ children, initialVariableDefinitions = [], }) {
+    const store = createTemplateVariableSrvStore({ initialVariableDefinitions });
+    return ((0, jsx_runtime_1.jsx)(TemplateVariableStoreContext.Provider, { value: store, children: (0, jsx_runtime_1.jsx)(PluginProvider, { children: children }) }));
+}
+exports.TemplateVariableProvider = TemplateVariableProvider;
+/** Helpers */
+async function loadTemplateVariables() {
+    // @TODO: Replace with plugin call
+    // simluate sleep for 2 seconds
+    // random time between 1 and 3 seconds
+    const sleepTime = Math.floor(Math.random() * 10000) + 1000;
+    await new Promise((resolve) => setTimeout(resolve, sleepTime));
+    return {
+        data: [
+            'a',
+            'b',
+            'c',
+            'd',
+            'e',
+            'f',
+            'g',
+            'h',
+            'i',
+            'j',
+            'k',
+            'l',
+            'm',
+            'n',
+            'o',
+            'p',
+            'q',
+            'r',
+            's',
+            't',
+            'u',
+            'v',
+            'w',
+            'x',
+            'y',
+            'z',
+        ].map((v) => ({ label: v, value: v })),
+    };
+}
+function getAllOption() {
+    return { label: 'All', value: core_1.DEFAULT_ALL_VALUE };
+}
+function hydrateTemplateVariableState(definition) {
+    var _a, _b;
+    const v = definition;
+    const varState = {
+        value: null,
+        loading: false,
+    };
+    switch (v.kind) {
+        case 'TextVariable':
+            varState.value = v.options.value;
+            break;
+        case 'ListVariable':
+            varState.options = [];
+            if (v.options.allowAllValue) {
+                varState.options.unshift({ label: 'All', value: core_1.DEFAULT_ALL_VALUE });
+            }
+            if (varState.options.length > 0 && !varState.value) {
+                const firstOptionValue = (_b = (_a = varState.options[0]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : null;
+                if (firstOptionValue !== null) {
+                    varState.value = v.options.allowMultiple ? [firstOptionValue] : firstOptionValue;
+                }
+            }
+        default:
+            break;
+    }
+    return varState;
+}
+function hydrateTemplateVariableStates(definitions) {
+    const state = {};
+    definitions.forEach((v) => {
+        state[v.name] = hydrateTemplateVariableState(v);
+    });
+    return state;
+}

package/dist/cjs/context/TimeRangeProvider.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimeRangeProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// 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.
+const react_1 = require("react");
+const date_fns_1 = require("date-fns");
+const core_1 = require("@perses-dev/core");
+const plugin_system_1 = require("@perses-dev/plugin-system");
+/**
+ * Provider implementation that supplies the time range state at runtime.
+ */
+function TimeRangeProvider(props) {
+    const { initialTimeRange, children, onTimeRangeChange } = props;
+    const { queryString, setQueryString } = (0, plugin_system_1.useQueryString)();
+    const defaultTimeRange = (0, core_1.isRelativeTimeRange)(initialTimeRange)
+        ? (0, core_1.toAbsoluteTimeRange)(initialTimeRange)
+        : initialTimeRange;
+    const [timeRange, setActiveTimeRange] = (0, react_1.useState)(defaultTimeRange);
+    const setTimeRange = (0, react_1.useCallback)((value) => {
+        if (onTimeRangeChange !== undefined) {
+            // optional callback to override default behavior
+            onTimeRangeChange(value);
+            return;
+        }
+        if ((0, core_1.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_1.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, date_fns_1.getUnixTime)(value.start) * 1000;
+            const endUnixMs = (0, date_fns_1.getUnixTime)(value.end) * 1000;
+            queryString.set('start', startUnixMs.toString());
+            queryString.set('end', endUnixMs.toString());
+            setQueryString(queryString);
+        }
+        else {
+            setActiveTimeRange(value);
+        }
+    }, [queryString, setQueryString, onTimeRangeChange]);
+    const ctx = (0, react_1.useMemo)(() => ({ timeRange, setTimeRange }), [timeRange, setTimeRange]);
+    return (0, jsx_runtime_1.jsx)(plugin_system_1.TimeRangeContext.Provider, { value: ctx, children: children });
+}
+exports.TimeRangeProvider = TimeRangeProvider;

package/dist/cjs/context/index.js

@@ -1,5 +1,5 @@
 "use strict";
-// Copyright 2021 The Perses Authors
+// 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
@@ -26,6 +26,9 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./TemplateVariablesProvider"), exports);
-__exportStar(require("./TimeRangeStateProvider"), exports);
+__exportStar(require("./DashboardAppSlice"), exports);
+__exportStar(require("./LayoutsSlice"), exports);
+__exportStar(require("./TemplateVariableProvider"), exports);
 __exportStar(require("./DashboardProvider"), exports);
+__exportStar(require("./TimeRangeProvider"), exports);
+__exportStar(require("./QueryStringProvider"), exports);