@perses-dev/dashboards 0.53.0 → 0.54.0-beta.0

package/dist/cjs/context/VariableProvider/VariableProvider.js

@@ -56,6 +56,7 @@ const _shallow = require("zustand/shallow");
 const _immer1 = require("immer");
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _core = require("@perses-dev/core");
+const _spec = require("@perses-dev/spec");
 const _utils = require("./utils");
 const _hydrationUtils = require("./hydrationUtils");
 const _queryparams = require("./query-params");
@@ -154,7 +155,7 @@ function PluginProvider({ children, builtinVariables }) {
             const v = {
                 ...originalValues[name]
             };
-            if (v.value === _core.DEFAULT_ALL_VALUE) {
+            if (v.value === _spec.DEFAULT_ALL_VALUE) {
                 const definition = (0, _utils.findVariableDefinitionByName)(name, definitions, externalDefinitions);
                 // If the variable is a list variable and has a custom all value, then use that value instead
                 if (definition?.kind === 'ListVariable' && definition.spec.customAllValue) {
@@ -203,7 +204,7 @@ function PluginProvider({ children, builtinVariables }) {
                 kind: 'BuiltinVariable',
                 spec: {
                     name: '__range',
-                    value: ()=>(0, _core.formatDuration)((0, _core.intervalToPrometheusDuration)(absoluteTimeRange)),
+                    value: ()=>(0, _spec.formatDuration)((0, _core.intervalToPrometheusDuration)(absoluteTimeRange)),
                     source: 'Dashboard',
                     display: {
                         name: '__range',
@@ -304,11 +305,11 @@ function createVariableDefinitionStore({ initialVariableDefinitions = [], extern
                         return;
                     }
                     // Make sure there is only one all value
-                    if (Array.isArray(val) && val.includes(_core.DEFAULT_ALL_VALUE)) {
-                        if (val.at(-1) === _core.DEFAULT_ALL_VALUE) {
-                            val = _core.DEFAULT_ALL_VALUE;
+                    if (Array.isArray(val) && val.includes(_spec.DEFAULT_ALL_VALUE)) {
+                        if (val.at(-1) === _spec.DEFAULT_ALL_VALUE) {
+                            val = _spec.DEFAULT_ALL_VALUE;
                         } else {
-                            val = val.filter((v)=>v !== _core.DEFAULT_ALL_VALUE);
+                            val = val.filter((v)=>v !== _spec.DEFAULT_ALL_VALUE);
                         }
                     }
                     if (queryParams) {

package/dist/cjs/context/VariableProvider/hydrationUtils.js

@@ -20,7 +20,7 @@ Object.defineProperty(exports, "hydrateVariableDefinitionStates", {
         return hydrateVariableDefinitionStates;
     }
 });
-const _core = require("@perses-dev/core");
+const _spec = require("@perses-dev/spec");
 const _pluginsystem = require("@perses-dev/plugin-system");
 // TODO: move to VariableProvider/utils.ts
 function hydrateVariableState(variable, initialValue) {
@@ -51,8 +51,8 @@ function hydrateVariableState(variable, initialValue) {
             // to end up in a buggy state if the variables are initialized with an "all"
             // value inside an array. When hydrating variables, normalize this to minimize
             // bugs.
-            if (Array.isArray(varState.value) && varState.value.length === 1 && varState.value[0] === _core.DEFAULT_ALL_VALUE) {
-                varState.value = _core.DEFAULT_ALL_VALUE;
+            if (Array.isArray(varState.value) && varState.value.length === 1 && varState.value[0] === _spec.DEFAULT_ALL_VALUE) {
+                varState.value = _spec.DEFAULT_ALL_VALUE;
             }
             break;
         default:

package/dist/cjs/context/useDashboard.js

@@ -20,11 +20,11 @@ Object.defineProperty(exports, "useDashboard", {
         return useDashboard;
     }
 });
-const _core = require("@perses-dev/core");
+const _spec = require("@perses-dev/spec");
 const _DashboardProvider = require("./DashboardProvider");
 const _VariableProvider = require("./VariableProvider");
 function useDashboard() {
-    const { panels, panelGroups, panelGroupOrder, setDashboard: setDashboardResource, kind, metadata, display, duration, refreshInterval, datasources, ttl } = (0, _DashboardProvider.useDashboardStore)(({ panels, panelGroups, panelGroupOrder, setDashboard, kind, metadata, display, duration, refreshInterval, datasources, ttl })=>({
+    const { panels, panelGroups, panelGroupOrder, setDashboard: setDashboardResource, kind, metadata, display, duration, refreshInterval, datasources, links, ttl } = (0, _DashboardProvider.useDashboardStore)(({ panels, panelGroups, panelGroupOrder, setDashboard, kind, metadata, display, duration, refreshInterval, datasources, links, ttl })=>({
             panels,
             panelGroups,
             panelGroupOrder,
@@ -35,6 +35,7 @@ function useDashboard() {
             duration,
             refreshInterval,
             datasources,
+            links,
             ttl
         }));
     const { setVariableDefinitions } = (0, _VariableProvider.useVariableDefinitionActions)();
@@ -50,7 +51,8 @@ function useDashboard() {
             variables,
             duration,
             refreshInterval,
-            datasources
+            datasources,
+            links
         }
     } : {
         kind,
@@ -63,6 +65,7 @@ function useDashboard() {
             duration,
             refreshInterval,
             datasources,
+            links,
             ttl
         }
     };
@@ -106,7 +109,7 @@ function convertPanelGroupsToLayouts(panelGroups, panelGroupOrder) {
                         y: layout.y,
                         width: layout.w,
                         height: layout.h,
-                        content: (0, _core.createPanelRef)(panelKey)
+                        content: (0, _spec.createPanelRef)(panelKey)
                     };
                 }),
                 repeatVariable: repeatVariable

package/dist/cjs/index.js

@@ -16,7 +16,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 _export_star(require("./components"), exports);
 _export_star(require("./context"), exports);
+_export_star(require("./keyboard-shortcuts"), exports);
 _export_star(require("./views"), exports);
+_export_star(require("./model"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/dist/cjs/keyboard-shortcuts/PanelFocusProvider.js

@@ -0,0 +1,157 @@
+// Copyright 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: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get PanelFocusProvider () {
+        return PanelFocusProvider;
+    },
+    get useFocusedPanel () {
+        return useFocusedPanel;
+    },
+    get usePanelFocusHandlers () {
+        return usePanelFocusHandlers;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+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 PanelFocusContext = /*#__PURE__*/ (0, _react.createContext)(undefined);
+function usePanelFocusContext() {
+    const ctx = (0, _react.useContext)(PanelFocusContext);
+    if (ctx === undefined) {
+        throw new Error('Panel focus hooks must be used within a PanelFocusProvider');
+    }
+    return ctx;
+}
+function PanelFocusProvider({ children }) {
+    const [focusedPanelKey, setFocusedPanelKeyState] = (0, _react.useState)(null);
+    // This wrapper narrow the setter type (string-only / null-only) and provide
+    // stable references for the useMemo context value below. React guarantees
+    // setFocusedPanelKeyState is stable, but useCallback makes the stability
+    // explicit and satisfies exhaustive-deps when used in useMemo.
+    const setFocusedPanel = (0, _react.useCallback)((panelKey)=>{
+        setFocusedPanelKeyState(panelKey);
+    }, []);
+    const clearFocusedPanel = (0, _react.useCallback)(()=>{
+        setFocusedPanelKeyState(null);
+    }, []);
+    const value = (0, _react.useMemo)(()=>({
+            focusedPanelKey,
+            setFocusedPanel,
+            clearFocusedPanel
+        }), [
+        focusedPanelKey,
+        setFocusedPanel,
+        clearFocusedPanel
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(PanelFocusContext.Provider, {
+        value: value,
+        children: children
+    });
+}
+function useFocusedPanel() {
+    return usePanelFocusContext().focusedPanelKey;
+}
+const PANEL_FOCUS_DEBOUNCE_MS = 50;
+function usePanelFocusHandlers(panelKey) {
+    const { setFocusedPanel, clearFocusedPanel } = usePanelFocusContext();
+    const timerRef = (0, _react.useRef)(null);
+    const onMouseEnter = (0, _react.useCallback)((e)=>{
+        const element = e.currentTarget;
+        if (timerRef.current !== null) {
+            clearTimeout(timerRef.current);
+        }
+        timerRef.current = setTimeout(()=>{
+            setFocusedPanel(panelKey);
+            element.focus({
+                preventScroll: true
+            });
+            timerRef.current = null;
+        }, PANEL_FOCUS_DEBOUNCE_MS);
+    }, [
+        panelKey,
+        setFocusedPanel
+    ]);
+    const onMouseLeave = (0, _react.useCallback)(()=>{
+        if (timerRef.current !== null) {
+            clearTimeout(timerRef.current);
+            timerRef.current = null;
+        }
+        clearFocusedPanel();
+    }, [
+        clearFocusedPanel
+    ]);
+    (0, _react.useEffect)(()=>{
+        return ()=>{
+            if (timerRef.current !== null) {
+                clearTimeout(timerRef.current);
+            }
+        };
+    }, []);
+    return (0, _react.useMemo)(()=>({
+            onMouseEnter,
+            onMouseLeave
+        }), [
+        onMouseEnter,
+        onMouseLeave
+    ]);
+}

package/dist/cjs/keyboard-shortcuts/default-shortcuts/dashboard.js

@@ -0,0 +1,75 @@
+// Copyright 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: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get DASHBOARD_SHORTCUTS () {
+        return DASHBOARD_SHORTCUTS;
+    },
+    get REFRESH_DASHBOARD_SHORTCUT () {
+        return REFRESH_DASHBOARD_SHORTCUT;
+    },
+    get SAVE_DASHBOARD_SHORTCUT () {
+        return SAVE_DASHBOARD_SHORTCUT;
+    },
+    get TOGGLE_EDIT_MODE_SHORTCUT () {
+        return TOGGLE_EDIT_MODE_SHORTCUT;
+    }
+});
+const _events = require("../events");
+const SAVE_DASHBOARD_SHORTCUT = {
+    id: 'save-dashboard',
+    hotkey: 'Mod+S',
+    name: 'Save Dashboard',
+    description: 'Save the current dashboard',
+    category: 'dashboard',
+    scope: 'dashboard',
+    event: _events.SAVE_DASHBOARD_EVENT
+};
+const REFRESH_DASHBOARD_SHORTCUT = {
+    id: 'refresh-dashboard',
+    sequence: [
+        'D',
+        'R'
+    ],
+    name: 'Refresh Dashboard',
+    description: 'Refresh all panels',
+    category: 'dashboard',
+    scope: 'dashboard',
+    event: _events.REFRESH_DASHBOARD_EVENT
+};
+const TOGGLE_EDIT_MODE_SHORTCUT = {
+    id: 'toggle-edit-mode',
+    sequence: [
+        'D',
+        'M'
+    ],
+    name: 'Toggle Edit Mode',
+    description: 'Toggle between edit and view mode',
+    category: 'dashboard',
+    scope: 'dashboard',
+    event: _events.TOGGLE_EDIT_MODE_EVENT
+};
+const DASHBOARD_SHORTCUTS = [
+    SAVE_DASHBOARD_SHORTCUT,
+    REFRESH_DASHBOARD_SHORTCUT,
+    TOGGLE_EDIT_MODE_SHORTCUT
+];

package/dist/cjs/keyboard-shortcuts/default-shortcuts/global.js

@@ -0,0 +1,121 @@
+// Copyright 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: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get GLOBAL_SHORTCUTS () {
+        return GLOBAL_SHORTCUTS;
+    },
+    get GO_EXPLORE_SHORTCUT () {
+        return GO_EXPLORE_SHORTCUT;
+    },
+    get GO_HOME_SHORTCUT () {
+        return GO_HOME_SHORTCUT;
+    },
+    get GO_PROFILE_SHORTCUT () {
+        return GO_PROFILE_SHORTCUT;
+    },
+    get OPEN_SEARCH_SHORTCUT () {
+        return OPEN_SEARCH_SHORTCUT;
+    },
+    get SHOW_SHORTCUTS_SHORTCUT () {
+        return SHOW_SHORTCUTS_SHORTCUT;
+    },
+    get TOGGLE_THEME_SHORTCUT () {
+        return TOGGLE_THEME_SHORTCUT;
+    }
+});
+const _events = require("../events");
+const GO_HOME_SHORTCUT = {
+    id: 'go-home',
+    sequence: [
+        'G',
+        'H'
+    ],
+    name: 'Go to Home',
+    description: 'Go to the Home page',
+    category: 'global',
+    scope: 'global'
+};
+const GO_EXPLORE_SHORTCUT = {
+    id: 'go-explore',
+    sequence: [
+        'G',
+        'E'
+    ],
+    name: 'Go to Explore',
+    description: 'Go to the Explore page',
+    category: 'global',
+    scope: 'global'
+};
+const GO_PROFILE_SHORTCUT = {
+    id: 'go-profile',
+    sequence: [
+        'G',
+        'P'
+    ],
+    name: 'Go to Profile',
+    description: 'Go to the Profile page',
+    category: 'global',
+    scope: 'global'
+};
+const OPEN_SEARCH_SHORTCUT = {
+    id: 'open-search',
+    hotkey: 'Mod+K',
+    name: 'Open Search',
+    description: 'Open the search dialog',
+    category: 'global',
+    scope: 'global',
+    event: _events.OPEN_SEARCH_EVENT
+};
+const SHOW_SHORTCUTS_SHORTCUT = {
+    id: 'show-shortcuts',
+    hotkey: {
+        key: '?',
+        shift: true
+    },
+    name: 'Show Keyboard Shortcuts',
+    description: 'Show all the keyboard shortcuts',
+    category: 'global',
+    scope: 'global',
+    event: _events.SHOW_SHORTCUTS_EVENT,
+    displayOverride: '?'
+};
+const TOGGLE_THEME_SHORTCUT = {
+    id: 'toggle-theme',
+    sequence: [
+        'C',
+        'T'
+    ],
+    name: 'Change Theme',
+    description: 'Change between dark and light theme',
+    category: 'global',
+    scope: 'global',
+    event: _events.TOGGLE_THEME_EVENT
+};
+const GLOBAL_SHORTCUTS = [
+    GO_HOME_SHORTCUT,
+    GO_EXPLORE_SHORTCUT,
+    GO_PROFILE_SHORTCUT,
+    OPEN_SEARCH_SHORTCUT,
+    SHOW_SHORTCUTS_SHORTCUT,
+    TOGGLE_THEME_SHORTCUT
+];

package/dist/cjs/keyboard-shortcuts/default-shortcuts/index.js

@@ -0,0 +1,33 @@
+// Copyright 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
+});
+_export_star(require("./global"), exports);
+_export_star(require("./dashboard"), exports);
+_export_star(require("./panel"), exports);
+_export_star(require("./time-range"), 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];
+                }
+            });
+        }
+    });
+    return from;
+}

package/dist/cjs/keyboard-shortcuts/default-shortcuts/panel.js

@@ -0,0 +1,90 @@
+// Copyright 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: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get PANEL_DELETE_SHORTCUT () {
+        return PANEL_DELETE_SHORTCUT;
+    },
+    get PANEL_DUPLICATE_SHORTCUT () {
+        return PANEL_DUPLICATE_SHORTCUT;
+    },
+    get PANEL_EDIT_SHORTCUT () {
+        return PANEL_EDIT_SHORTCUT;
+    },
+    get PANEL_FULLSCREEN_SHORTCUT () {
+        return PANEL_FULLSCREEN_SHORTCUT;
+    },
+    get PANEL_SHORTCUTS () {
+        return PANEL_SHORTCUTS;
+    }
+});
+const _events = require("../events");
+const PANEL_EDIT_SHORTCUT = {
+    id: 'panel-edit',
+    hotkey: 'E',
+    name: 'Edit Panel',
+    description: 'Edit the focused panel when in edit mode',
+    category: 'focused-panel',
+    scope: 'panel',
+    event: _events.PANEL_EDIT_EVENT,
+    ignoreInputs: true
+};
+const PANEL_FULLSCREEN_SHORTCUT = {
+    id: 'panel-fullscreen',
+    hotkey: 'V',
+    name: 'Toggle Fullscreen',
+    description: 'Toggle fullscreen on the focused panel',
+    category: 'focused-panel',
+    scope: 'panel',
+    event: _events.PANEL_FULLSCREEN_EVENT,
+    ignoreInputs: true
+};
+const PANEL_DUPLICATE_SHORTCUT = {
+    id: 'panel-duplicate',
+    sequence: [
+        'P',
+        'D'
+    ],
+    name: 'Duplicate Panel',
+    description: 'Duplicate the focused panel',
+    category: 'focused-panel',
+    scope: 'panel',
+    event: _events.PANEL_DUPLICATE_EVENT
+};
+const PANEL_DELETE_SHORTCUT = {
+    id: 'panel-delete',
+    sequence: [
+        'P',
+        'R'
+    ],
+    name: 'Delete Panel',
+    description: 'Delete the focused panel',
+    category: 'focused-panel',
+    scope: 'panel',
+    event: _events.PANEL_DELETE_EVENT
+};
+const PANEL_SHORTCUTS = [
+    PANEL_EDIT_SHORTCUT,
+    PANEL_FULLSCREEN_SHORTCUT,
+    PANEL_DUPLICATE_SHORTCUT,
+    PANEL_DELETE_SHORTCUT
+];