@perses-dev/dashboards 0.11.0 → 0.13.0

package/dist/cjs/context/DashboardProvider/common.js

@@ -16,3 +16,13 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+Object.defineProperty(exports, "generateId", {
+    enumerable: true,
+    get: ()=>generateId
+});
+if (globalThis.dashboardStoreId === undefined) {
+    globalThis.dashboardStoreId = 0;
+}
+function generateId() {
+    return globalThis.dashboardStoreId++;
+}

package/dist/cjs/context/DashboardProvider/dashboard-provider-api.js

@@ -35,7 +35,6 @@ _export(exports, {
     useDeletePanelDialog: ()=>useDeletePanelDialog,
     useDefaultTimeRange: ()=>useDefaultTimeRange
 });
-const _core = require("@perses-dev/core");
 const _react = require("react");
 const _dashboardProvider = require("./DashboardProvider");
 function useEditMode() {
@@ -45,19 +44,17 @@ function useEditMode() {
         }));
 }
 function useDashboardActions() {
-    const save = (0, _dashboardProvider.useDashboardStore)((store)=>store.save);
-    const reset = (0, _dashboardProvider.useDashboardStore)((store)=>store.reset);
+    const setDashboard = (0, _dashboardProvider.useDashboardStore)((store)=>store.setDashboard);
     const openAddPanelGroup = (0, _dashboardProvider.useDashboardStore)((store)=>store.openAddPanelGroup);
     const openAddPanel = (0, _dashboardProvider.useDashboardStore)((store)=>store.openAddPanel);
     return {
-        save,
-        reset,
+        setDashboard,
         openAddPanelGroup,
         openAddPanel: ()=>openAddPanel(undefined)
     };
 }
 function usePanelGroupIds() {
-    return (0, _dashboardProvider.useDashboardStore)((store)=>store.panelGroupIdOrder);
+    return (0, _dashboardProvider.useDashboardStore)((store)=>store.panelGroupOrder);
 }
 function useListPanelGroups() {
     const panelGroupIds = usePanelGroupIds();
@@ -87,20 +84,22 @@ function usePanelGroupActions(panelGroupId) {
     const openEditPanelGroup = (0, _dashboardProvider.useDashboardStore)((store)=>store.openEditPanelGroup);
     const deletePanelGroup = (0, _dashboardProvider.useDashboardStore)((store)=>store.openDeletePanelGroupDialog);
     const openAddPanel = (0, _dashboardProvider.useDashboardStore)((store)=>store.openAddPanel);
+    const updatePanelGroupLayouts = (0, _dashboardProvider.useDashboardStore)((store)=>store.updatePanelGroupLayouts);
     return {
         openEditPanelGroup: ()=>openEditPanelGroup(panelGroupId),
         deletePanelGroup: ()=>deletePanelGroup(panelGroupId),
         openAddPanel: ()=>openAddPanel(panelGroupId),
         moveUp,
-        moveDown
+        moveDown,
+        updatePanelGroupLayouts: (itemLayouts)=>updatePanelGroupLayouts(panelGroupId, itemLayouts)
     };
 }
 /**
  * Returns functions for moving a panel group up or down. A function will be undefined if the panel group can't be
  * moved in that direction.
  */ function useMovePanelGroup(panelGroupId) {
-    const currentIndex = (0, _dashboardProvider.useDashboardStore)((store)=>store.panelGroupIdOrder.findIndex((id)=>id === panelGroupId));
-    const panelGroupsLength = (0, _dashboardProvider.useDashboardStore)((store)=>store.panelGroupIdOrder.length);
+    const currentIndex = (0, _dashboardProvider.useDashboardStore)((store)=>store.panelGroupOrder.findIndex((id)=>id === panelGroupId));
+    const panelGroupsLength = (0, _dashboardProvider.useDashboardStore)((store)=>store.panelGroupOrder.length);
     const swapPanelGroups = (0, _dashboardProvider.useDashboardStore)((store)=>store.swapPanelGroups);
     if (currentIndex < 0) {
         throw new Error(`Could not find panel group with Id ${panelGroupId} in order array`);
@@ -124,12 +123,11 @@ function useDeletePanelGroupDialog() {
         }));
 }
 function usePanel(panelGroupItemId) {
-    const { panelGroupId , itemIndex  } = panelGroupItemId;
+    const { panelGroupId , panelGroupItemLayoutId: panelGroupLayoutId  } = panelGroupItemId;
     const panel = (0, _dashboardProvider.useDashboardStore)((store)=>{
-        var ref, ref1;
-        const panelRef = (ref1 = (ref = store.panelGroups[panelGroupId]) === null || ref === void 0 ? void 0 : ref.items[itemIndex]) === null || ref1 === void 0 ? void 0 : ref1.content;
-        if (panelRef === undefined) return;
-        const panelKey = (0, _core.getPanelKeyFromRef)(panelRef);
+        var ref;
+        const panelKey = (ref = store.panelGroups[panelGroupId]) === null || ref === void 0 ? void 0 : ref.itemPanelKeys[panelGroupLayoutId];
+        if (panelKey === undefined) return;
         return store.panels[panelKey];
     });
     if (panel === undefined) {
@@ -151,11 +149,11 @@ function usePanelEditor() {
 function useDeletePanelDialog() {
     const deletePanelDialog = (0, _dashboardProvider.useDashboardStore)((store)=>store.deletePanelDialog);
     // TODO: Refactor similar to other dialogs/editors so these are on the editor state itself
-    const deletePanels = (0, _dashboardProvider.useDashboardStore)((store)=>store.deletePanels);
+    const deletePanel = (0, _dashboardProvider.useDashboardStore)((store)=>store.deletePanel);
     const closeDeletePanelDialog = (0, _dashboardProvider.useDashboardStore)((store)=>store.closeDeletePanelDialog);
     return {
         deletePanelDialog,
-        deletePanels,
+        deletePanel,
         closeDeletePanelDialog
     };
 }

package/dist/cjs/context/DashboardProvider/delete-panel-group-slice.js

@@ -0,0 +1,70 @@
+// 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, "createDeletePanelGroupSlice", {
+    enumerable: true,
+    get: ()=>createDeletePanelGroupSlice
+});
+const createDeletePanelGroupSlice = (set, get)=>({
+        deletePanelGroup (panelGroupId) {
+            const { panelGroups , panelGroupOrder  } = get();
+            const group = panelGroups[panelGroupId];
+            const idIndex = panelGroupOrder.findIndex((id)=>id === panelGroupId);
+            if (group === undefined || idIndex === -1) {
+                throw new Error(`Panel group ${panelGroupId} not found`);
+            }
+            // Get the panel keys for all the panel items in the group we're going to delete
+            const panelKeys = Object.values(group.itemPanelKeys);
+            set((draft)=>{
+                // Delete the panel group which also deletes all its items
+                delete draft.panelGroups[panelGroupId];
+                draft.panelGroupOrder.splice(idIndex, 1);
+                // Get all remaining panel keys in use
+                const usedPanelKeys = getUsedPanelKeys(draft.panelGroups);
+                // For the panel keys of the items that were just deleted, see if they're still used and if not, also delete the
+                // panel definition
+                for (const panelKey of panelKeys){
+                    if (usedPanelKeys.has(panelKey)) continue;
+                    delete draft.panels[panelKey];
+                }
+            });
+        },
+        openDeletePanelGroupDialog: (panelGroupId)=>{
+            const panelGroup = get().panelGroups[panelGroupId];
+            if (panelGroup === undefined) {
+                throw new Error(`Panel group with Id ${panelGroupId} not found`);
+            }
+            set((state)=>{
+                state.deletePanelGroupDialog = {
+                    panelGroupId,
+                    panelGroupName: panelGroup.title
+                };
+            });
+        },
+        closeDeletePanelGroupDialog: ()=>set((state)=>{
+                state.deletePanelGroupDialog = undefined;
+            })
+    });
+// Helper to get the panel keys of all groups, returning a set to eliminate duplicates
+function getUsedPanelKeys(panelGroups) {
+    const usedPanelKeys = new Set();
+    for (const group of Object.values(panelGroups)){
+        for (const panelKey of Object.values(group.itemPanelKeys)){
+            usedPanelKeys.add(panelKey);
+        }
+    }
+    return usedPanelKeys;
+}

package/dist/cjs/context/DashboardProvider/delete-panel-slice.js

@@ -0,0 +1,85 @@
+// 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, "createDeletePanelSlice", {
+    enumerable: true,
+    get: ()=>createDeletePanelSlice
+});
+function createDeletePanelSlice() {
+    // Return the state creator function for Zustand that uses the panels provided as intitial state
+    return (set, get)=>({
+            deletePanel (panelGroupItemId) {
+                set((draft)=>{
+                    const { panelGroupId , panelGroupItemLayoutId: panelGroupLayoutId  } = panelGroupItemId;
+                    const existingGroup = draft.panelGroups[panelGroupId];
+                    if (existingGroup === undefined) {
+                        throw new Error(`Missing panel group ${panelGroupId}`);
+                    }
+                    const existingLayoutIdx = existingGroup.itemLayouts.findIndex((layout)=>layout.i === panelGroupLayoutId);
+                    const existingPanelKey = existingGroup.itemPanelKeys[panelGroupLayoutId];
+                    if (existingLayoutIdx === -1 || existingPanelKey === undefined) {
+                        throw new Error(`Missing panel group item ${panelGroupLayoutId}`);
+                    }
+                    // remove panel from panel group
+                    existingGroup.itemLayouts.splice(existingLayoutIdx, 1);
+                    delete existingGroup.itemPanelKeys[panelGroupLayoutId];
+                    // See if panel key is still used and if not, delete it
+                    if (isPanelKeyStillUsed(draft.panelGroups, existingPanelKey) === false) {
+                        delete draft.panels[existingPanelKey];
+                    }
+                });
+            },
+            openDeletePanelDialog (panelGroupItemId) {
+                const { panelGroupId , panelGroupItemLayoutId: panelGroupLayoutId  } = panelGroupItemId;
+                const { panels , panelGroups  } = get();
+                const panelGroup = panelGroups[panelGroupId];
+                if (panelGroup === undefined) {
+                    throw new Error(`Panel group not found ${panelGroupId}`);
+                }
+                const panelKey = panelGroup.itemPanelKeys[panelGroupLayoutId];
+                if (panelKey === undefined) {
+                    throw new Error(`Could not find Panel Group item ${panelGroupLayoutId}`);
+                }
+                const panel = panels[panelKey];
+                if (panel === undefined) {
+                    throw new Error(`Could not find panel ${panelKey}`);
+                }
+                set((state)=>{
+                    var _title;
+                    state.deletePanelDialog = {
+                        panelGroupItemId: panelGroupItemId,
+                        panelName: panel.spec.display.name,
+                        panelGroupName: (_title = panelGroup.title) !== null && _title !== void 0 ? _title : ''
+                    };
+                });
+            },
+            closeDeletePanelDialog () {
+                set((state)=>{
+                    state.deletePanelDialog = undefined;
+                });
+            }
+        });
+}
+// Helper function to determine if a panel key is still being used somewhere in Panel Groups
+function isPanelKeyStillUsed(panelGroups, panelKey) {
+    for (const group of Object.values(panelGroups)){
+        const found = Object.values(group.itemPanelKeys).find((key)=>key === panelKey);
+        if (found !== undefined) {
+            return true;
+        }
+    }
+    return false;
+}

package/dist/cjs/context/DashboardProvider/panel-editor-slice.js

@@ -19,27 +19,21 @@ Object.defineProperty(exports, "createPanelEditorSlice", {
     get: ()=>createPanelEditorSlice
 });
 const _functions = require("../../utils/functions");
-function createPanelEditorSlice(panels) {
+const _common = require("./common");
+function createPanelEditorSlice() {
     // Return the state creator function for Zustand that uses the panels provided as intitial state
     return (set, get)=>{
         return {
-            previousPanels: panels,
-            panels,
             panelEditor: undefined,
-            savePanels () {
-                set((state)=>{
-                    state.previousPanels = state.panels;
-                });
-            },
-            resetPanels () {
-                set((state)=>{
-                    state.panels = state.previousPanels;
-                });
-            },
-            openEditPanel (item) {
-                const { panels , getPanelKey  } = get();
-                // Ask the layout store for the panel key at that location
-                const panelKey = getPanelKey(item);
+            openEditPanel (panelGroupItemId) {
+                var ref;
+                const { panels , panelGroups  } = get();
+                // Figure out the panel key at that location
+                const { panelGroupId , panelGroupItemLayoutId: panelGroupLayoutId  } = panelGroupItemId;
+                const panelKey = (ref = panelGroups[panelGroupId]) === null || ref === void 0 ? void 0 : ref.itemPanelKeys[panelGroupLayoutId];
+                if (panelKey === undefined) {
+                    throw new Error(`Could not find Panel Group item ${panelGroupItemId}`);
+                }
                 // Find the panel to edit
                 const panelToEdit = panels[panelKey];
                 if (panelToEdit === undefined) {
@@ -51,19 +45,46 @@ function createPanelEditorSlice(panels) {
                     initialValues: {
                         name: panelToEdit.spec.display.name,
                         description: (_description = panelToEdit.spec.display.description) !== null && _description !== void 0 ? _description : '',
-                        groupId: item.panelGroupId,
+                        groupId: panelGroupItemId.panelGroupId,
                         kind: panelToEdit.spec.plugin.kind,
                         spec: panelToEdit.spec.plugin.spec
                     },
                     applyChanges: (next)=>{
                         const panelDefinititon = createPanelDefinitionFromEditorValues(next);
-                        set((state)=>{
-                            state.panels[panelKey] = panelDefinititon;
+                        set((draft)=>{
+                            draft.panels[panelKey] = panelDefinititon;
+                            // If the panel didn't change groups, nothing else to do
+                            if (next.groupId === panelGroupId) {
+                                return;
+                            }
+                            // Move panel to the new group
+                            const existingGroup = draft.panelGroups[panelGroupId];
+                            if (existingGroup === undefined) {
+                                throw new Error(`Missing panel group ${panelGroupId}`);
+                            }
+                            const existingLayoutIdx = existingGroup.itemLayouts.findIndex((layout)=>layout.i === panelGroupLayoutId);
+                            const existingLayout = existingGroup.itemLayouts[existingLayoutIdx];
+                            const existingPanelKey = existingGroup.itemPanelKeys[panelGroupLayoutId];
+                            if (existingLayoutIdx === -1 || existingLayout === undefined || existingPanelKey === undefined) {
+                                throw new Error(`Missing panel group item ${panelGroupLayoutId}`);
+                            }
+                            // Remove item from the old group
+                            existingGroup.itemLayouts.splice(existingLayoutIdx, 1);
+                            delete existingGroup.itemPanelKeys[panelGroupLayoutId];
+                            // Add item to the end of the new group
+                            const newGroup = draft.panelGroups[next.groupId];
+                            if (newGroup === undefined) {
+                                throw new Error(`Could not find new group ${next.groupId}`);
+                            }
+                            newGroup.itemLayouts.push({
+                                i: existingLayout.i,
+                                x: 0,
+                                y: getYForNewRow(newGroup),
+                                w: existingLayout.w,
+                                h: existingLayout.h
+                            });
+                            newGroup.itemPanelKeys[existingLayout.i] = existingPanelKey;
                         });
-                        // Move the panel to another group if it changed
-                        if (next.groupId !== item.panelGroupId) {
-                            get().movePanelToGroup(item, next.groupId);
-                        }
                     },
                     close: ()=>{
                         set((state)=>{
@@ -79,7 +100,7 @@ function createPanelEditorSlice(panels) {
             openAddPanel (panelGroupId) {
                 // If a panel group isn't supplied, add to the first group
                 if (panelGroupId === undefined) {
-                    const firstGroupId = get().panelGroupIdOrder[0];
+                    const firstGroupId = get().panelGroupOrder[0];
                     if (firstGroupId === undefined) {
                         throw new Error('No panel groups to add a panel to');
                     }
@@ -99,10 +120,24 @@ function createPanelEditorSlice(panels) {
                     applyChanges: (next)=>{
                         const panelDef = createPanelDefinitionFromEditorValues(next);
                         const panelKey = (0, _functions.removeWhiteSpacesAndSpecialCharacters)(next.name);
-                        set((state)=>{
-                            state.panels[panelKey] = panelDef;
+                        set((draft)=>{
+                            // Add a panel
+                            draft.panels[panelKey] = panelDef;
+                            // Also add a panel group item referencing the panel
+                            const group = draft.panelGroups[next.groupId];
+                            if (group === undefined) {
+                                throw new Error(`Missing panel group ${next.groupId}`);
+                            }
+                            const layout = {
+                                i: (0, _common.generateId)().toString(),
+                                x: 0,
+                                y: getYForNewRow(group),
+                                w: 12,
+                                h: 6
+                            };
+                            group.itemLayouts.push(layout);
+                            group.itemPanelKeys[layout.i] = panelKey;
                         });
-                        get().addPanelToGroup(panelKey, next.groupId);
                     },
                     close: ()=>{
                         set((state)=>{
@@ -114,45 +149,6 @@ function createPanelEditorSlice(panels) {
                 set((state)=>{
                     state.panelEditor = editorState;
                 });
-            },
-            deletePanels (items) {
-                const { mapPanelToPanelGroups , deletePanelInPanelGroup , getPanelKey  } = get();
-                const map = mapPanelToPanelGroups();
-                // get panel key first before deleting panel from panel group since getPanelKey relies on index
-                const panels = items.map((panel)=>{
-                    return {
-                        ...panel,
-                        panelKey: getPanelKey(panel)
-                    };
-                });
-                panels.forEach(({ panelKey , ...panel })=>{
-                    var ref;
-                    deletePanelInPanelGroup(panel);
-                    // make sure panel is only referenced in one panel group before deleting it from state.panels
-                    if (map[panelKey] && ((ref = map[panelKey]) === null || ref === void 0 ? void 0 : ref.length) === 1) {
-                        set((state)=>{
-                            delete state.panels[panelKey];
-                        });
-                    }
-                });
-            },
-            openDeletePanelDialog (item) {
-                const { panels , getPanelKey , panelGroups  } = get();
-                const panelKey = getPanelKey(item);
-                set((state)=>{
-                    var ref, ref1;
-                    var _name, ref2;
-                    state.deletePanelDialog = {
-                        panelGroupItemId: item,
-                        panelName: (_name = (ref = panels[panelKey]) === null || ref === void 0 ? void 0 : ref.spec.display.name) !== null && _name !== void 0 ? _name : '',
-                        panelGroupName: (ref2 = (ref1 = panelGroups[item.panelGroupId]) === null || ref1 === void 0 ? void 0 : ref1.title) !== null && ref2 !== void 0 ? ref2 : ''
-                    };
-                });
-            },
-            closeDeletePanelDialog () {
-                set((state)=>{
-                    state.deletePanelDialog = undefined;
-                });
             }
         };
     };
@@ -173,3 +169,14 @@ function createPanelDefinitionFromEditorValues(editorValues) {
         }
     };
 }
+// Given a PanelGroup, will find the Y coordinate for adding a new row to the grid, taking into account the items present
+function getYForNewRow(group) {
+    let newRowY = 0;
+    for (const layout of group.itemLayouts){
+        const itemMaxY = layout.y + layout.h;
+        if (itemMaxY > newRowY) {
+            newRowY = itemMaxY;
+        }
+    }
+    return newRowY;
+}

package/dist/cjs/context/DashboardProvider/panel-group-editor-slice.js

@@ -18,6 +18,7 @@ Object.defineProperty(exports, "createPanelGroupEditorSlice", {
     enumerable: true,
     get: ()=>createPanelGroupEditorSlice
 });
+const _common = require("./common");
 const createPanelGroupEditorSlice = (set, get)=>({
         panelGroupEditor: undefined,
         openAddPanelGroup: ()=>{
@@ -30,13 +31,14 @@ const createPanelGroupEditorSlice = (set, get)=>({
                 },
                 applyChanges (next) {
                     const newGroup = {
-                        id: get().createPanelGroupId(),
-                        items: [],
+                        id: (0, _common.generateId)(),
+                        itemLayouts: [],
+                        itemPanelKeys: {},
                         ...next
                     };
                     set((draft)=>{
                         draft.panelGroups[newGroup.id] = newGroup;
-                        draft.panelGroupIdOrder.unshift(newGroup.id);
+                        draft.panelGroupOrder.unshift(newGroup.id);
                     });
                 },
                 close () {
@@ -83,20 +85,5 @@ const createPanelGroupEditorSlice = (set, get)=>({
             set((draft)=>{
                 draft.panelGroupEditor = editor;
             });
-        },
-        openDeletePanelGroupDialog: (panelGroupId)=>{
-            const panelGroup = get().panelGroups[panelGroupId];
-            if (panelGroup === undefined) {
-                throw new Error(`Panel group with Id ${panelGroupId} not found`);
-            }
-            set((state)=>{
-                state.deletePanelGroupDialog = {
-                    panelGroupId,
-                    panelGroupName: panelGroup.title
-                };
-            });
-        },
-        closeDeletePanelGroupDialog: ()=>set((state)=>{
-                state.deletePanelGroupDialog = undefined;
-            })
+        }
     });