@perses-dev/dashboards 0.0.0-snapshot-time-range-height-80d08fc

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

@@ -0,0 +1,191 @@
+// 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, {
+    useEditMode: ()=>useEditMode,
+    useDashboardActions: ()=>useDashboardActions,
+    usePanelGroupIds: ()=>usePanelGroupIds,
+    useListPanelGroups: ()=>useListPanelGroups,
+    usePanelGroup: ()=>usePanelGroup,
+    usePanelGroupActions: ()=>usePanelGroupActions,
+    usePanelGroupEditor: ()=>usePanelGroupEditor,
+    useDeletePanelGroupDialog: ()=>useDeletePanelGroupDialog,
+    usePanel: ()=>usePanel,
+    usePanelActions: ()=>usePanelActions,
+    usePanelEditor: ()=>usePanelEditor,
+    useDeletePanelDialog: ()=>useDeletePanelDialog,
+    useDefaultTimeRange: ()=>useDefaultTimeRange
+});
+const _react = require("react");
+const _dashboardProvider = require("./DashboardProvider");
+const selectEditMode = ({ isEditMode , setEditMode  })=>({
+        isEditMode,
+        setEditMode
+    });
+function useEditMode() {
+    return (0, _dashboardProvider.useDashboardStore)(selectEditMode);
+}
+const selectDashboardActions = ({ setDashboard , openAddPanelGroup , openAddPanel  })=>({
+        setDashboard,
+        openAddPanelGroup,
+        openAddPanel
+    });
+function useDashboardActions() {
+    const { setDashboard , openAddPanelGroup , openAddPanel  } = (0, _dashboardProvider.useDashboardStore)(selectDashboardActions);
+    return {
+        setDashboard,
+        openAddPanelGroup: ()=>openAddPanelGroup(),
+        openAddPanel: ()=>openAddPanel()
+    };
+}
+const selectPanelGroupOrder = (state)=>state.panelGroupOrder;
+function usePanelGroupIds() {
+    return (0, _dashboardProvider.useDashboardStore)(selectPanelGroupOrder);
+}
+const selectPanelGroups = (state)=>state.panelGroups;
+function useListPanelGroups() {
+    const panelGroupIds = usePanelGroupIds();
+    const panelGroups = (0, _dashboardProvider.useDashboardStore)(selectPanelGroups);
+    return (0, _react.useMemo)(()=>{
+        return panelGroupIds.map((id)=>{
+            const group = panelGroups[id];
+            if (group === undefined) {
+                throw new Error(`Invalid panel group Id found ${id}`);
+            }
+            return group;
+        });
+    }, [
+        panelGroupIds,
+        panelGroups
+    ]);
+}
+function usePanelGroup(panelGroupId) {
+    const panelGroup = (0, _dashboardProvider.useDashboardStore)((0, _react.useCallback)((state)=>state.panelGroups[panelGroupId], [
+        panelGroupId
+    ]));
+    if (panelGroup === undefined) {
+        throw new Error(`Panel group with Id ${panelGroupId} was not found`);
+    }
+    return panelGroup;
+}
+const selectPanelGroupActions = ({ openEditPanelGroup , deletePanelGroup , openAddPanel , updatePanelGroupLayouts  })=>({
+        openEditPanelGroup,
+        deletePanelGroup,
+        openAddPanel,
+        updatePanelGroupLayouts
+    });
+function usePanelGroupActions(panelGroupId) {
+    const { moveUp , moveDown  } = useMovePanelGroup(panelGroupId);
+    const { openEditPanelGroup , deletePanelGroup , openAddPanel , updatePanelGroupLayouts  } = (0, _dashboardProvider.useDashboardStore)(selectPanelGroupActions);
+    return {
+        openEditPanelGroup: ()=>openEditPanelGroup(panelGroupId),
+        deletePanelGroup: ()=>deletePanelGroup(panelGroupId),
+        openAddPanel: ()=>openAddPanel(panelGroupId),
+        moveUp,
+        moveDown,
+        updatePanelGroupLayouts: (itemLayouts)=>updatePanelGroupLayouts(panelGroupId, itemLayouts)
+    };
+}
+const selectSwapPanelGroups = (state)=>state.swapPanelGroups;
+const selectPanelGroupsLength = (state)=>state.panelGroupOrder.length;
+/**
+ * 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)((0, _react.useCallback)((store)=>store.panelGroupOrder.findIndex((id)=>id === panelGroupId), [
+        panelGroupId
+    ]));
+    const panelGroupsLength = (0, _dashboardProvider.useDashboardStore)(selectPanelGroupsLength);
+    const swapPanelGroups = (0, _dashboardProvider.useDashboardStore)(selectSwapPanelGroups);
+    if (currentIndex < 0) {
+        throw new Error(`Could not find panel group with Id ${panelGroupId} in order array`);
+    }
+    const moveUp = ()=>swapPanelGroups(currentIndex, currentIndex - 1);
+    const moveDown = ()=>swapPanelGroups(currentIndex, currentIndex + 1);
+    return {
+        moveUp: currentIndex > 0 ? moveUp : undefined,
+        moveDown: currentIndex < panelGroupsLength - 1 ? moveDown : undefined
+    };
+}
+const selectPanelGroupEditor = (state)=>state.panelGroupEditor;
+function usePanelGroupEditor() {
+    return (0, _dashboardProvider.useDashboardStore)(selectPanelGroupEditor);
+}
+const selectDeletePanelGroupDialog = ({ deletePanelGroupDialog , openDeletePanelGroupDialog , closeDeletePanelGroupDialog , deletePanelGroup  })=>({
+        deletePanelGroupDialog,
+        openDeletePanelGroupDialog,
+        closeDeletePanelGroupDialog,
+        deletePanelGroup
+    });
+function useDeletePanelGroupDialog() {
+    const { deletePanelGroupDialog , openDeletePanelGroupDialog , closeDeletePanelGroupDialog , deletePanelGroup  } = (0, _dashboardProvider.useDashboardStore)(selectDeletePanelGroupDialog);
+    return {
+        deletePanelGroupDialog,
+        deletePanelGroup,
+        openDeletePanelGroupDialog,
+        closeDeletePanelGroupDialog: ()=>closeDeletePanelGroupDialog()
+    };
+}
+function usePanel(panelGroupItemId) {
+    const { panelGroupId , panelGroupItemLayoutId: panelGroupLayoutId  } = panelGroupItemId;
+    const panel = (0, _dashboardProvider.useDashboardStore)((0, _react.useCallback)((store)=>{
+        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];
+    }, [
+        panelGroupId,
+        panelGroupLayoutId
+    ]));
+    if (panel === undefined) {
+        throw new Error(`Could not find panel for Id ${panelGroupItemId}`);
+    }
+    return panel;
+}
+const selectPanelActions = ({ openEditPanel , openDeletePanelDialog  })=>({
+        openEditPanel,
+        openDeletePanelDialog
+    });
+function usePanelActions(panelGroupItemId) {
+    const { openEditPanel , openDeletePanelDialog  } = (0, _dashboardProvider.useDashboardStore)(selectPanelActions);
+    return {
+        openEditPanel: ()=>openEditPanel(panelGroupItemId),
+        openDeletePanelDialog: ()=>openDeletePanelDialog(panelGroupItemId)
+    };
+}
+const selectPanelEditor = (state)=>state.panelEditor;
+function usePanelEditor() {
+    return (0, _dashboardProvider.useDashboardStore)(selectPanelEditor);
+}
+const selectDeletePanelDialog = ({ deletePanelDialog , deletePanel , closeDeletePanelDialog  })=>({
+        deletePanelDialog,
+        deletePanel,
+        closeDeletePanelDialog
+    });
+function useDeletePanelDialog() {
+    // TODO: Refactor similar to other dialogs/editors so these are on the editor state itself
+    return (0, _dashboardProvider.useDashboardStore)(selectDeletePanelDialog);
+}
+const selectDefaultTimeRange = (state)=>state.defaultTimeRange;
+function useDefaultTimeRange() {
+    return (0, _dashboardProvider.useDashboardStore)(selectDefaultTimeRange);
+}

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/index.js

@@ -0,0 +1,29 @@
+// 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("./dashboard-provider-api"), exports);
+_exportStar(require("./DashboardProvider"), 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/context/DashboardProvider/panel-editor-slice.js

@@ -0,0 +1,205 @@
+// 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, "createPanelEditorSlice", {
+    enumerable: true,
+    get: ()=>createPanelEditorSlice
+});
+const _functions = require("../../utils/functions");
+const _common = require("./common");
+const _panelGroupSlice = require("./panel-group-slice");
+function createPanelEditorSlice() {
+    // Return the state creator function for Zustand that uses the panels provided as intitial state
+    return (set, get)=>{
+        return {
+            panelEditor: undefined,
+            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) {
+                    throw new Error(`Cannot find Panel with key '${panelKey}'`);
+                }
+                var _description;
+                const editorState = {
+                    mode: 'Edit',
+                    initialValues: {
+                        name: panelToEdit.spec.display.name,
+                        description: (_description = panelToEdit.spec.display.description) !== null && _description !== void 0 ? _description : '',
+                        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;
+                            // If the panel didn't change groups, nothing else to do
+                            if (next.groupId === panelGroupId) {
+                                return;
+                            }
+                            // Move panel to the new group
+                            const existingGroup = state.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 = state.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;
+                        });
+                    },
+                    close: ()=>{
+                        set((state)=>{
+                            state.panelEditor = undefined;
+                        });
+                    }
+                };
+                // Open the editor with the new state
+                set((state)=>{
+                    state.panelEditor = editorState;
+                });
+            },
+            openAddPanel (panelGroupId) {
+                // If a panel group isn't supplied, add to the first group or create a group if there aren't any
+                let newGroup = undefined;
+                panelGroupId !== null && panelGroupId !== void 0 ? panelGroupId : panelGroupId = get().panelGroupOrder[0];
+                if (panelGroupId === undefined) {
+                    newGroup = (0, _panelGroupSlice.createEmptyPanelGroup)();
+                    newGroup.title = 'Panel Group';
+                    panelGroupId = newGroup.id;
+                }
+                const editorState = {
+                    mode: 'Add',
+                    initialValues: {
+                        name: '',
+                        description: '',
+                        groupId: panelGroupId,
+                        kind: '',
+                        spec: {}
+                    },
+                    applyChanges: (next)=>{
+                        const panelDef = createPanelDefinitionFromEditorValues(next);
+                        const uniquePanelKeys = getUniquePanelKeys(get().panels);
+                        let panelKey = (0, _functions.removeWhiteSpacesAndSpecialCharacters)(next.name);
+                        // append count if panel key already exists
+                        if (uniquePanelKeys[panelKey]) {
+                            panelKey += `-${uniquePanelKeys[panelKey]}`;
+                        }
+                        set((state)=>{
+                            // Add a panel
+                            state.panels[panelKey] = panelDef;
+                            // Also add a panel group item referencing the panel
+                            const group = state.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;
+                        });
+                    },
+                    close: ()=>{
+                        set((state)=>{
+                            state.panelEditor = undefined;
+                        });
+                    }
+                };
+                set((state)=>{
+                    // Add the new panel group if one was created for the panel
+                    if (newGroup !== undefined) {
+                        (0, _panelGroupSlice.addPanelGroup)(state, newGroup);
+                    }
+                    // Open the editor with the new state
+                    state.panelEditor = editorState;
+                });
+            }
+        };
+    };
+}
+// Helper to create PanelDefinitions when saving
+function createPanelDefinitionFromEditorValues(editorValues) {
+    return {
+        kind: 'Panel',
+        spec: {
+            display: {
+                name: editorValues.name,
+                description: editorValues.description !== '' ? editorValues.description : undefined
+            },
+            plugin: {
+                kind: editorValues.kind,
+                spec: editorValues.spec
+            }
+        }
+    };
+}
+// 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;
+}
+// Find all the unique panel keys
+// ex: cpu, cpu-1, cpu-2 count as the same panel key since these panels have the same name
+function getUniquePanelKeys(panels) {
+    const uniquePanelKeys = {};
+    Object.keys(panels).forEach((panelKey)=>{
+        const key = panelKey.replace(/-([0-9]+)/, '');
+        const count = uniquePanelKeys[key];
+        if (count) {
+            uniquePanelKeys[key] = count + 1;
+        } else {
+            uniquePanelKeys[key] = 1;
+        }
+    });
+    return uniquePanelKeys;
+}

package/dist/cjs/context/DashboardProvider/panel-group-editor-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, "createPanelGroupEditorSlice", {
+    enumerable: true,
+    get: ()=>createPanelGroupEditorSlice
+});
+const _panelGroupSlice = require("./panel-group-slice");
+const createPanelGroupEditorSlice = (set, get)=>({
+        panelGroupEditor: undefined,
+        openAddPanelGroup: ()=>{
+            // Create the editor state
+            const editor = {
+                mode: 'Add',
+                initialValues: {
+                    title: '',
+                    isCollapsed: false
+                },
+                applyChanges (next) {
+                    const newGroup = (0, _panelGroupSlice.createEmptyPanelGroup)();
+                    newGroup.title = next.title;
+                    newGroup.isCollapsed = next.isCollapsed;
+                    set((draft)=>{
+                        (0, _panelGroupSlice.addPanelGroup)(draft, newGroup);
+                    });
+                },
+                close () {
+                    set((draft)=>{
+                        draft.panelGroupEditor = undefined;
+                    });
+                }
+            };
+            // Open the editor
+            set((draft)=>{
+                draft.panelGroupEditor = editor;
+            });
+        },
+        openEditPanelGroup: (panelGroupId)=>{
+            const existingGroup = get().panelGroups[panelGroupId];
+            if (existingGroup === undefined) {
+                throw new Error(`Panel group with Id ${panelGroupId} does not exist`);
+            }
+            var _title;
+            // Create the editor state
+            const editor = {
+                mode: 'Edit',
+                initialValues: {
+                    title: (_title = existingGroup.title) !== null && _title !== void 0 ? _title : '',
+                    isCollapsed: existingGroup.isCollapsed
+                },
+                applyChanges (next) {
+                    set((draft)=>{
+                        const group = draft.panelGroups[panelGroupId];
+                        if (group === undefined) {
+                            throw new Error(`Panel group with Id ${panelGroupId} does not exist`);
+                        }
+                        group.title = next.title;
+                        group.isCollapsed = next.isCollapsed;
+                    });
+                },
+                close () {
+                    set((draft)=>{
+                        draft.panelGroupEditor = undefined;
+                    });
+                }
+            };
+            // Open the editor
+            set((draft)=>{
+                draft.panelGroupEditor = editor;
+            });
+        }
+    });