@perses-dev/dashboards 0.9.0 → 0.11.0

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

@@ -0,0 +1,171 @@
+// 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.
+import { removeWhiteSpacesAndSpecialCharacters } from '../../utils/functions';
+/**
+ * Curried function for creating the PanelEditorSlice.
+ */ export function createPanelEditorSlice(panels) {
+    // 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);
+                // 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: item.panelGroupId,
+                        kind: panelToEdit.spec.plugin.kind,
+                        spec: panelToEdit.spec.plugin.spec
+                    },
+                    applyChanges: (next)=>{
+                        const panelDefinititon = createPanelDefinitionFromEditorValues(next);
+                        set((state)=>{
+                            state.panels[panelKey] = panelDefinititon;
+                        });
+                        // Move the panel to another group if it changed
+                        if (next.groupId !== item.panelGroupId) {
+                            get().movePanelToGroup(item, next.groupId);
+                        }
+                    },
+                    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
+                if (panelGroupId === undefined) {
+                    const firstGroupId = get().panelGroupIdOrder[0];
+                    if (firstGroupId === undefined) {
+                        throw new Error('No panel groups to add a panel to');
+                    }
+                    panelGroupId = firstGroupId;
+                }
+                const editorState = {
+                    mode: 'Add',
+                    initialValues: {
+                        name: '',
+                        description: '',
+                        groupId: panelGroupId,
+                        // TODO: If we knew what plugins were available (and how to create the initial spec), we might be able to
+                        // set a smarter default here?
+                        kind: '',
+                        spec: {}
+                    },
+                    applyChanges: (next)=>{
+                        const panelDef = createPanelDefinitionFromEditorValues(next);
+                        const panelKey = removeWhiteSpacesAndSpecialCharacters(next.name);
+                        set((state)=>{
+                            state.panels[panelKey] = panelDef;
+                        });
+                        get().addPanelToGroup(panelKey, next.groupId);
+                    },
+                    close: ()=>{
+                        set((state)=>{
+                            state.panelEditor = undefined;
+                        });
+                    }
+                };
+                // Open the editor with the new state
+                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;
+                });
+            }
+        };
+    };
+}
+// 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
+            }
+        }
+    };
+}
+
+//# sourceMappingURL=panel-editor-slice.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/context/DashboardProvider/panel-editor-slice.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { PanelDefinition, UnknownSpec } from '@perses-dev/core';\nimport { StateCreator } from 'zustand';\nimport { removeWhiteSpacesAndSpecialCharacters } from '../../utils/functions';\nimport { Middleware } from './common';\nimport { PanelGroupSlice, PanelGroupItemId, PanelGroupId } from './panel-group-slice';\n\n/**\n * Slice that handles the visual editor state and actions for Panels (i.e. add, edit, delete).\n */\nexport interface PanelEditorSlice {\n  // TODO: Move panels state to its own slice so that other slices can depend on it (and modify the state)\n  panels: Record<string, PanelDefinition>;\n  previousPanels: Record<string, PanelDefinition>;\n\n  /**\n   * State for the panel editor when its open, otherwise undefined when it's closed.\n   */\n  panelEditor?: PanelEditorState;\n\n  /**\n   * Opens the editor for editing an existing panel by providing its layout coordinates.\n   */\n  openEditPanel: (item: PanelGroupItemId) => void;\n\n  /**\n   * Opens the editor for adding a new Panel to a panel group.\n   */\n  openAddPanel: (panelGroupId?: PanelGroupId) => void;\n\n  /**\n   * Delete panels\n   */\n  deletePanels: (panels: PanelGroupItemId[]) => void;\n\n  /**\n   * Reset panels to previous state\n   */\n  resetPanels: () => void;\n\n  /**\n   * Save panels\n   */\n  savePanels: () => void;\n\n  /**\n   * State for the delete panel dialog when it's open, otherwise undefined when it's closed.\n   */\n  deletePanelDialog?: DeletePanelDialog;\n\n  /**\n   * Open delete panel dialog\n   */\n  openDeletePanelDialog: (item: PanelGroupItemId) => void;\n\n  /**\n   * Close delete panel dialog\n   */\n  closeDeletePanelDialog: () => void;\n}\n\nexport interface DeletePanelDialog {\n  panelGroupItemId: PanelGroupItemId;\n  panelName: string;\n  panelGroupName: string;\n}\n\nexport interface PanelEditorState {\n  /**\n   * Whether we're adding a new panel, or editing an existing panel.\n   */\n  mode: 'Add' | 'Edit';\n\n  /**\n   * Initial values for the things that can be edited about a panel.\n   */\n  initialValues: PanelEditorValues;\n\n  /**\n   * Applies changes, but doesn't close the editor.\n   */\n  applyChanges: (next: PanelEditorValues) => void;\n\n  /**\n   * Close the editor.\n   */\n  close: () => void;\n}\n\n/**\n * Panel values that can be edited in the panel editor.\n */\nexport interface PanelEditorValues {\n  name: string;\n  description: string;\n  groupId: PanelGroupId;\n  kind: string;\n  spec: UnknownSpec;\n}\n\n/**\n * Curried function for creating the PanelEditorSlice.\n */\nexport function createPanelEditorSlice(\n  panels: PanelEditorSlice['panels']\n): StateCreator<PanelEditorSlice & PanelGroupSlice, Middleware, [], PanelEditorSlice> {\n  // Return the state creator function for Zustand that uses the panels provided as intitial state\n  return (set, get) => ({\n    previousPanels: panels,\n    panels,\n\n    panelEditor: undefined,\n\n    savePanels() {\n      set((state) => {\n        state.previousPanels = state.panels;\n      });\n    },\n\n    resetPanels() {\n      set((state) => {\n        state.panels = state.previousPanels;\n      });\n    },\n\n    openEditPanel(item) {\n      const { panels, getPanelKey } = get();\n\n      // Ask the layout store for the panel key at that location\n      const panelKey = getPanelKey(item);\n\n      // Find the panel to edit\n      const panelToEdit = panels[panelKey];\n      if (panelToEdit === undefined) {\n        throw new Error(`Cannot find Panel with key '${panelKey}'`);\n      }\n\n      const editorState: PanelEditorState = {\n        mode: 'Edit',\n        initialValues: {\n          name: panelToEdit.spec.display.name,\n          description: panelToEdit.spec.display.description ?? '',\n          groupId: item.panelGroupId,\n          kind: panelToEdit.spec.plugin.kind,\n          spec: panelToEdit.spec.plugin.spec,\n        },\n        applyChanges: (next) => {\n          const panelDefinititon = createPanelDefinitionFromEditorValues(next);\n          set((state) => {\n            state.panels[panelKey] = panelDefinititon;\n          });\n\n          // Move the panel to another group if it changed\n          if (next.groupId !== item.panelGroupId) {\n            get().movePanelToGroup(item, next.groupId);\n          }\n        },\n        close: () => {\n          set((state) => {\n            state.panelEditor = undefined;\n          });\n        },\n      };\n\n      // Open the editor with the new state\n      set((state) => {\n        state.panelEditor = editorState;\n      });\n    },\n\n    openAddPanel(panelGroupId) {\n      // If a panel group isn't supplied, add to the first group\n      if (panelGroupId === undefined) {\n        const firstGroupId = get().panelGroupIdOrder[0];\n        if (firstGroupId === undefined) {\n          throw new Error('No panel groups to add a panel to');\n        }\n        panelGroupId = firstGroupId;\n      }\n\n      const editorState: PanelEditorState = {\n        mode: 'Add',\n        initialValues: {\n          name: '',\n          description: '',\n          groupId: panelGroupId,\n          // TODO: If we knew what plugins were available (and how to create the initial spec), we might be able to\n          // set a smarter default here?\n          kind: '',\n          spec: {},\n        },\n        applyChanges: (next) => {\n          const panelDef = createPanelDefinitionFromEditorValues(next);\n          const panelKey = removeWhiteSpacesAndSpecialCharacters(next.name);\n          set((state) => {\n            state.panels[panelKey] = panelDef;\n          });\n          get().addPanelToGroup(panelKey, next.groupId);\n        },\n        close: () => {\n          set((state) => {\n            state.panelEditor = undefined;\n          });\n        },\n      };\n\n      // Open the editor with the new state\n      set((state) => {\n        state.panelEditor = editorState;\n      });\n    },\n\n    deletePanels(items: PanelGroupItemId[]) {\n      const { mapPanelToPanelGroups, deletePanelInPanelGroup, getPanelKey } = get();\n      const map = mapPanelToPanelGroups();\n      // get panel key first before deleting panel from panel group since getPanelKey relies on index\n      const panels = items.map((panel) => {\n        return { ...panel, panelKey: getPanelKey(panel) };\n      });\n      panels.forEach(({ panelKey, ...panel }) => {\n        deletePanelInPanelGroup(panel);\n        // make sure panel is only referenced in one panel group before deleting it from state.panels\n        if (map[panelKey] && map[panelKey]?.length === 1) {\n          set((state) => {\n            delete state.panels[panelKey];\n          });\n        }\n      });\n    },\n\n    openDeletePanelDialog(item: PanelGroupItemId) {\n      const { panels, getPanelKey, panelGroups } = get();\n      const panelKey = getPanelKey(item);\n      set((state) => {\n        state.deletePanelDialog = {\n          panelGroupItemId: item,\n          panelName: panels[panelKey]?.spec.display.name ?? '',\n          panelGroupName: panelGroups[item.panelGroupId]?.title ?? '',\n        };\n      });\n    },\n\n    closeDeletePanelDialog() {\n      set((state) => {\n        state.deletePanelDialog = undefined;\n      });\n    },\n  });\n}\n\n// Helper to create PanelDefinitions when saving\nfunction createPanelDefinitionFromEditorValues(editorValues: PanelEditorValues): PanelDefinition {\n  return {\n    kind: 'Panel',\n    spec: {\n      display: {\n        name: editorValues.name,\n        description: editorValues.description !== '' ? editorValues.description : undefined,\n      },\n      plugin: {\n        kind: editorValues.kind,\n        spec: editorValues.spec,\n      },\n    },\n  };\n}\n"],"names":["removeWhiteSpacesAndSpecialCharacters","createPanelEditorSlice","panels","set","get","previousPanels","panelEditor","undefined","savePanels","state","resetPanels","openEditPanel","item","getPanelKey","panelKey","panelToEdit","Error","editorState","mode","initialValues","name","spec","display","description","groupId","panelGroupId","kind","plugin","applyChanges","next","panelDefinititon","createPanelDefinitionFromEditorValues","movePanelToGroup","close","openAddPanel","firstGroupId","panelGroupIdOrder","panelDef","addPanelToGroup","deletePanels","items","mapPanelToPanelGroups","deletePanelInPanelGroup","map","panel","forEach","length","openDeletePanelDialog","panelGroups","deletePanelDialog","panelGroupItemId","panelName","panelGroupName","title","closeDeletePanelDialog","editorValues"],"mappings":"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"}

package/dist/context/DashboardProvider/panel-group-editor-slice.d.ts

@@ -0,0 +1,40 @@
+import { StateCreator } from 'zustand';
+import { Middleware } from './common';
+import { PanelGroupSlice, PanelGroupId } from './panel-group-slice';
+export interface PanelGroupEditor {
+    mode: 'Add' | 'Edit';
+    initialValues: PanelGroupEditorValues;
+    applyChanges: (next: PanelGroupEditorValues) => void;
+    close: () => void;
+}
+export interface PanelGroupEditorValues {
+    title: string;
+    isCollapsed: boolean;
+}
+export interface DeletePanelGroupDialog {
+    panelGroupId: PanelGroupId;
+    panelGroupName?: string;
+}
+/**
+ * Slice that handles the visual editor state and actions for Panel Groups (i.e. add, edit, delete).
+ */
+export interface PanelGroupEditorSlice {
+    /**
+     * State that's present when the panel group editor is open.
+     */
+    panelGroupEditor?: PanelGroupEditor;
+    /**
+     * Opens the panel group editor to add a new panel group.
+     */
+    openAddPanelGroup: () => void;
+    /**
+     * Opens the panel group editor to edit an existing panel group.
+     */
+    openEditPanelGroup: (panelGroupId: PanelGroupId) => void;
+    deletePanelGroupDialog?: DeletePanelGroupDialog;
+    openDeletePanelGroupDialog: (panelGroupId: PanelGroupId) => void;
+    closeDeletePanelGroupDialog: () => void;
+}
+export declare const createPanelGroupEditorSlice: StateCreator<PanelGroupEditorSlice & PanelGroupSlice, Middleware, [
+], PanelGroupEditorSlice>;
+//# sourceMappingURL=panel-group-editor-slice.d.ts.map

package/dist/context/DashboardProvider/panel-group-editor-slice.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel-group-editor-slice.d.ts","sourceRoot":"","sources":["../../../src/context/DashboardProvider/panel-group-editor-slice.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,eAAe,EAAwB,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAE1F,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,KAAK,GAAG,MAAM,CAAC;IACrB,aAAa,EAAE,sBAAsB,CAAC;IACtC,YAAY,EAAE,CAAC,IAAI,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACrD,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,sBAAsB;IACrC,YAAY,EAAE,YAAY,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IAEpC;;OAEG;IACH,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAE9B;;OAEG;IACH,kBAAkB,EAAE,CAAC,YAAY,EAAE,YAAY,KAAK,IAAI,CAAC;IAEzD,sBAAsB,CAAC,EAAE,sBAAsB,CAAC;IAChD,0BAA0B,EAAE,CAAC,YAAY,EAAE,YAAY,KAAK,IAAI,CAAC;IACjE,2BAA2B,EAAE,MAAM,IAAI,CAAC;CACzC;AAED,eAAO,MAAM,2BAA2B,EAAE,YAAY,CACpD,qBAAqB,GAAG,eAAe,EACvC,UAAU,EACV;CAAE,EACF,qBAAqB,CAqFrB,CAAC"}

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

@@ -0,0 +1,96 @@
+// 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.
+export const createPanelGroupEditorSlice = (set, get)=>({
+        panelGroupEditor: undefined,
+        openAddPanelGroup: ()=>{
+            // Create the editor state
+            const editor = {
+                mode: 'Add',
+                initialValues: {
+                    title: '',
+                    isCollapsed: false
+                },
+                applyChanges (next) {
+                    const newGroup = {
+                        id: get().createPanelGroupId(),
+                        items: [],
+                        ...next
+                    };
+                    set((draft)=>{
+                        draft.panelGroups[newGroup.id] = newGroup;
+                        draft.panelGroupIdOrder.unshift(newGroup.id);
+                    });
+                },
+                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;
+            });
+        },
+        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;
+            })
+    });
+
+//# sourceMappingURL=panel-group-editor-slice.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/context/DashboardProvider/panel-group-editor-slice.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { StateCreator } from 'zustand';\nimport { Middleware } from './common';\nimport { PanelGroupSlice, PanelGroupDefinition, PanelGroupId } from './panel-group-slice';\n\nexport interface PanelGroupEditor {\n  mode: 'Add' | 'Edit';\n  initialValues: PanelGroupEditorValues;\n  applyChanges: (next: PanelGroupEditorValues) => void;\n  close: () => void;\n}\n\nexport interface PanelGroupEditorValues {\n  title: string;\n  isCollapsed: boolean;\n}\n\nexport interface DeletePanelGroupDialog {\n  panelGroupId: PanelGroupId;\n  panelGroupName?: string;\n}\n\n/**\n * Slice that handles the visual editor state and actions for Panel Groups (i.e. add, edit, delete).\n */\nexport interface PanelGroupEditorSlice {\n  /**\n   * State that's present when the panel group editor is open.\n   */\n  panelGroupEditor?: PanelGroupEditor;\n\n  /**\n   * Opens the panel group editor to add a new panel group.\n   */\n  openAddPanelGroup: () => void;\n\n  /**\n   * Opens the panel group editor to edit an existing panel group.\n   */\n  openEditPanelGroup: (panelGroupId: PanelGroupId) => void;\n\n  deletePanelGroupDialog?: DeletePanelGroupDialog;\n  openDeletePanelGroupDialog: (panelGroupId: PanelGroupId) => void;\n  closeDeletePanelGroupDialog: () => void;\n}\n\nexport const createPanelGroupEditorSlice: StateCreator<\n  PanelGroupEditorSlice & PanelGroupSlice,\n  Middleware,\n  [],\n  PanelGroupEditorSlice\n> = (set, get) => ({\n  panelGroupEditor: undefined,\n\n  openAddPanelGroup: () => {\n    // Create the editor state\n    const editor: PanelGroupEditor = {\n      mode: 'Add',\n      initialValues: {\n        title: '',\n        isCollapsed: false,\n      },\n      applyChanges(next) {\n        const newGroup: PanelGroupDefinition = {\n          id: get().createPanelGroupId(),\n          items: [],\n          ...next,\n        };\n        set((draft) => {\n          draft.panelGroups[newGroup.id] = newGroup;\n          draft.panelGroupIdOrder.unshift(newGroup.id);\n        });\n      },\n      close() {\n        set((draft) => {\n          draft.panelGroupEditor = undefined;\n        });\n      },\n    };\n\n    // Open the editor\n    set((draft) => {\n      draft.panelGroupEditor = editor;\n    });\n  },\n\n  openEditPanelGroup: (panelGroupId) => {\n    const existingGroup = get().panelGroups[panelGroupId];\n    if (existingGroup === undefined) {\n      throw new Error(`Panel group with Id ${panelGroupId} does not exist`);\n    }\n\n    // Create the editor state\n    const editor: PanelGroupEditor = {\n      mode: 'Edit',\n      initialValues: {\n        title: existingGroup.title ?? '',\n        isCollapsed: existingGroup.isCollapsed,\n      },\n      applyChanges(next) {\n        set((draft) => {\n          const group = draft.panelGroups[panelGroupId];\n          if (group === undefined) {\n            throw new Error(`Panel group with Id ${panelGroupId} does not exist`);\n          }\n          group.title = next.title;\n          group.isCollapsed = next.isCollapsed;\n        });\n      },\n      close() {\n        set((draft) => {\n          draft.panelGroupEditor = undefined;\n        });\n      },\n    };\n\n    // Open the editor\n    set((draft) => {\n      draft.panelGroupEditor = editor;\n    });\n  },\n\n  openDeletePanelGroupDialog: (panelGroupId) => {\n    const panelGroup = get().panelGroups[panelGroupId];\n    if (panelGroup === undefined) {\n      throw new Error(`Panel group with Id ${panelGroupId} not found`);\n    }\n    set((state) => {\n      state.deletePanelGroupDialog = { panelGroupId, panelGroupName: panelGroup.title };\n    });\n  },\n  closeDeletePanelGroupDialog: () =>\n    set((state) => {\n      state.deletePanelGroupDialog = undefined;\n    }),\n});\n"],"names":["createPanelGroupEditorSlice","set","get","panelGroupEditor","undefined","openAddPanelGroup","editor","mode","initialValues","title","isCollapsed","applyChanges","next","newGroup","id","createPanelGroupId","items","draft","panelGroups","panelGroupIdOrder","unshift","close","openEditPanelGroup","panelGroupId","existingGroup","Error","group","openDeletePanelGroupDialog","panelGroup","state","deletePanelGroupDialog","panelGroupName","closeDeletePanelGroupDialog"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AA+CjC,OAAO,MAAMA,2BAA2B,GAKpC,CAACC,GAAG,EAAEC,GAAG,GAAM,CAAA;QACjBC,gBAAgB,EAAEC,SAAS;QAE3BC,iBAAiB,EAAE,IAAM;YACvB,0BAA0B;YAC1B,MAAMC,MAAM,GAAqB;gBAC/BC,IAAI,EAAE,KAAK;gBACXC,aAAa,EAAE;oBACbC,KAAK,EAAE,EAAE;oBACTC,WAAW,EAAE,KAAK;iBACnB;gBACDC,YAAY,EAACC,IAAI,EAAE;oBACjB,MAAMC,QAAQ,GAAyB;wBACrCC,EAAE,EAAEZ,GAAG,EAAE,CAACa,kBAAkB,EAAE;wBAC9BC,KAAK,EAAE,EAAE;wBACT,GAAGJ,IAAI;qBACR,AAAC;oBACFX,GAAG,CAAC,CAACgB,KAAK,GAAK;wBACbA,KAAK,CAACC,WAAW,CAACL,QAAQ,CAACC,EAAE,CAAC,GAAGD,QAAQ,CAAC;wBAC1CI,KAAK,CAACE,iBAAiB,CAACC,OAAO,CAACP,QAAQ,CAACC,EAAE,CAAC,CAAC;oBAC/C,CAAC,CAAC,CAAC;gBACL,CAAC;gBACDO,KAAK,IAAG;oBACNpB,GAAG,CAAC,CAACgB,KAAK,GAAK;wBACbA,KAAK,CAACd,gBAAgB,GAAGC,SAAS,CAAC;oBACrC,CAAC,CAAC,CAAC;gBACL,CAAC;aACF,AAAC;YAEF,kBAAkB;YAClBH,GAAG,CAAC,CAACgB,KAAK,GAAK;gBACbA,KAAK,CAACd,gBAAgB,GAAGG,MAAM,CAAC;YAClC,CAAC,CAAC,CAAC;QACL,CAAC;QAEDgB,kBAAkB,EAAE,CAACC,YAAY,GAAK;YACpC,MAAMC,aAAa,GAAGtB,GAAG,EAAE,CAACgB,WAAW,CAACK,YAAY,CAAC,AAAC;YACtD,IAAIC,aAAa,KAAKpB,SAAS,EAAE;gBAC/B,MAAM,IAAIqB,KAAK,CAAC,CAAC,oBAAoB,EAAEF,YAAY,CAAC,eAAe,CAAC,CAAC,CAAC;YACxE,CAAC;gBAMUC,MAAmB;YAJ9B,0BAA0B;YAC1B,MAAMlB,MAAM,GAAqB;gBAC/BC,IAAI,EAAE,MAAM;gBACZC,aAAa,EAAE;oBACbC,KAAK,EAAEe,CAAAA,MAAmB,GAAnBA,aAAa,CAACf,KAAK,cAAnBe,MAAmB,cAAnBA,MAAmB,GAAI,EAAE;oBAChCd,WAAW,EAAEc,aAAa,CAACd,WAAW;iBACvC;gBACDC,YAAY,EAACC,IAAI,EAAE;oBACjBX,GAAG,CAAC,CAACgB,KAAK,GAAK;wBACb,MAAMS,KAAK,GAAGT,KAAK,CAACC,WAAW,CAACK,YAAY,CAAC,AAAC;wBAC9C,IAAIG,KAAK,KAAKtB,SAAS,EAAE;4BACvB,MAAM,IAAIqB,KAAK,CAAC,CAAC,oBAAoB,EAAEF,YAAY,CAAC,eAAe,CAAC,CAAC,CAAC;wBACxE,CAAC;wBACDG,KAAK,CAACjB,KAAK,GAAGG,IAAI,CAACH,KAAK,CAAC;wBACzBiB,KAAK,CAAChB,WAAW,GAAGE,IAAI,CAACF,WAAW,CAAC;oBACvC,CAAC,CAAC,CAAC;gBACL,CAAC;gBACDW,KAAK,IAAG;oBACNpB,GAAG,CAAC,CAACgB,KAAK,GAAK;wBACbA,KAAK,CAACd,gBAAgB,GAAGC,SAAS,CAAC;oBACrC,CAAC,CAAC,CAAC;gBACL,CAAC;aACF,AAAC;YAEF,kBAAkB;YAClBH,GAAG,CAAC,CAACgB,KAAK,GAAK;gBACbA,KAAK,CAACd,gBAAgB,GAAGG,MAAM,CAAC;YAClC,CAAC,CAAC,CAAC;QACL,CAAC;QAEDqB,0BAA0B,EAAE,CAACJ,YAAY,GAAK;YAC5C,MAAMK,UAAU,GAAG1B,GAAG,EAAE,CAACgB,WAAW,CAACK,YAAY,CAAC,AAAC;YACnD,IAAIK,UAAU,KAAKxB,SAAS,EAAE;gBAC5B,MAAM,IAAIqB,KAAK,CAAC,CAAC,oBAAoB,EAAEF,YAAY,CAAC,UAAU,CAAC,CAAC,CAAC;YACnE,CAAC;YACDtB,GAAG,CAAC,CAAC4B,KAAK,GAAK;gBACbA,KAAK,CAACC,sBAAsB,GAAG;oBAAEP,YAAY;oBAAEQ,cAAc,EAAEH,UAAU,CAACnB,KAAK;iBAAE,CAAC;YACpF,CAAC,CAAC,CAAC;QACL,CAAC;QACDuB,2BAA2B,EAAE,IAC3B/B,GAAG,CAAC,CAAC4B,KAAK,GAAK;gBACbA,KAAK,CAACC,sBAAsB,GAAG1B,SAAS,CAAC;YAC3C,CAAC,CAAC;KACL,CAAA,AAAC,CAAC"}

package/dist/context/DashboardProvider/panel-group-slice.d.ts

@@ -0,0 +1,80 @@
+import { GridItemDefinition, LayoutDefinition } from '@perses-dev/core';
+import { StateCreator } from 'zustand';
+import { Middleware } from './common';
+import { PanelEditorSlice } from './panel-editor-slice';
+/**
+ * Slice with the state of Panel Groups, as well as any actions that modify only Panel Group state.
+ */
+export interface PanelGroupSlice {
+    /**
+     * Panel groups indexed by their ID.
+     */
+    panelGroups: Record<PanelGroupId, PanelGroupDefinition>;
+    /**
+     * An array of panel group IDs, representing their order in the dashboard.
+     */
+    panelGroupIdOrder: PanelGroupId[];
+    /**
+     * previous state
+     */
+    previousPanelGroupStates: {
+        panelGroups: PanelGroupSlice['panelGroups'];
+        panelGroupIdOrder: PanelGroupSlice['panelGroupIdOrder'];
+    };
+    createPanelGroupId: () => PanelGroupId;
+    /**
+     * Given a LayoutItem location, returns the panel's unique key at that location.
+     */
+    getPanelKey: (layoutItem: PanelGroupItemId) => string;
+    /**
+     * Add a panel with the specified key to an existing group.
+     */
+    addPanelToGroup: (panelKey: string, panelGroupId: PanelGroupId) => void;
+    /**
+     * Move an existing Panel to a new panel group.
+     */
+    movePanelToGroup: (layoutItem: PanelGroupItemId, newPanelGroupId: PanelGroupId) => void;
+    /**
+     * Rearrange the order of panel groups by swapping the positions
+     */
+    swapPanelGroups: (xIndex: number, yIndex: number) => void;
+    /**
+     * Delete panel group and all the panels within the group
+     */
+    deletePanelGroup: (panelGroupId: PanelGroupId) => void;
+    /**
+     * Delete panel in panel group
+     */
+    deletePanelInPanelGroup: (layoutItem: PanelGroupItemId) => void;
+    /**
+     * Map panel to panel groups
+     */
+    mapPanelToPanelGroups: () => Record<string, PanelGroupId[]>;
+    /**
+     * save
+     */
+    savePanelGroups: () => void;
+    /**
+     * reset to previous panel group states
+     */
+    resetPanelGroups: () => void;
+}
+export declare type PanelGroupId = number;
+export interface PanelGroupDefinition {
+    id: PanelGroupId;
+    items: GridItemDefinition[];
+    isCollapsed: boolean;
+    title?: string;
+}
+/**
+ * Uniquely identifies an item in a PanelGroup.
+ */
+export interface PanelGroupItemId {
+    panelGroupId: PanelGroupId;
+    itemIndex: number;
+}
+/**
+ * Curried function for creating a PanelGroupSlice.
+ */
+export declare function createPanelGroupSlice(layouts: LayoutDefinition[]): StateCreator<PanelGroupSlice & PanelEditorSlice, Middleware, [], PanelGroupSlice>;
+//# sourceMappingURL=panel-group-slice.d.ts.map

package/dist/context/DashboardProvider/panel-group-slice.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel-group-slice.d.ts","sourceRoot":"","sources":["../../../src/context/DashboardProvider/panel-group-slice.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAsC,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAC5G,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAExD;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC,YAAY,EAAE,oBAAoB,CAAC,CAAC;IAExD;;OAEG;IACH,iBAAiB,EAAE,YAAY,EAAE,CAAC;IAElC;;OAEG;IACH,wBAAwB,EAAE;QACxB,WAAW,EAAE,eAAe,CAAC,aAAa,CAAC,CAAC;QAC5C,iBAAiB,EAAE,eAAe,CAAC,mBAAmB,CAAC,CAAC;KACzD,CAAC;IAGF,kBAAkB,EAAE,MAAM,YAAY,CAAC;IAEvC;;OAEG;IACH,WAAW,EAAE,CAAC,UAAU,EAAE,gBAAgB,KAAK,MAAM,CAAC;IAEtD;;OAEG;IACH,eAAe,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,YAAY,KAAK,IAAI,CAAC;IAExE;;OAEG;IACH,gBAAgB,EAAE,CAAC,UAAU,EAAE,gBAAgB,EAAE,eAAe,EAAE,YAAY,KAAK,IAAI,CAAC;IAExF;;OAEG;IACH,eAAe,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAE1D;;OAEG;IACH,gBAAgB,EAAE,CAAC,YAAY,EAAE,YAAY,KAAK,IAAI,CAAC;IAEvD;;OAEG;IACH,uBAAuB,EAAE,CAAC,UAAU,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAEhE;;OAEG;IACH,qBAAqB,EAAE,MAAM,MAAM,CAAC,MAAM,EAAE,YAAY,EAAE,CAAC,CAAC;IAE5D;;OAEG;IACH,eAAe,EAAE,MAAM,IAAI,CAAC;IAE5B;;OAEG;IACH,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED,oBAAY,YAAY,GAAG,MAAM,CAAC;AAElC,MAAM,WAAW,oBAAoB;IACnC,EAAE,EAAE,YAAY,CAAC;IACjB,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B,WAAW,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,YAAY,EAAE,YAAY,CAAC;IAC3B,SAAS,EAAE,MAAM,CAAC;CACnB;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CACnC,OAAO,EAAE,gBAAgB,EAAE,GAC1B,YAAY,CAAC,eAAe,GAAG,gBAAgB,EAAE,UAAU,EAAE,EAAE,EAAE,eAAe,CAAC,CAkKnF"}

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

@@ -0,0 +1,204 @@
+// 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.
+import { createPanelRef, getPanelKeyFromRef } from '@perses-dev/core';
+/**
+ * Curried function for creating a PanelGroupSlice.
+ */ export function createPanelGroupSlice(layouts) {
+    // Helper function for generating unique IDs for a PanelGroup
+    let id = -1;
+    function createPanelGroupId() {
+        id++;
+        return id;
+    }
+    // Convert the initial layouts from the JSON to panel groups and keep track of the order
+    const panelGroups = {};
+    const panelGroupIdOrder = [];
+    for (const layout of layouts){
+        var ref, ref1, ref2;
+        const id1 = createPanelGroupId();
+        panelGroups[id1] = {
+            id: id1,
+            items: layout.spec.items,
+            isCollapsed: ((ref = layout.spec.display) === null || ref === void 0 ? void 0 : (ref1 = ref.collapse) === null || ref1 === void 0 ? void 0 : ref1.open) === false,
+            title: (ref2 = layout.spec.display) === null || ref2 === void 0 ? void 0 : ref2.title
+        };
+        panelGroupIdOrder.push(id1);
+    }
+    // Return the state creator function for Zustand
+    return (set, get)=>{
+        return {
+            panelGroups,
+            panelGroupIdOrder,
+            previousPanelGroupStates: {
+                panelGroups,
+                panelGroupIdOrder
+            },
+            // TODO: Reorder init logic so this isn't exposed
+            createPanelGroupId,
+            savePanelGroups () {
+                set((state)=>{
+                    state.previousPanelGroupStates = {
+                        panelGroups: state.panelGroups,
+                        panelGroupIdOrder: state.panelGroupIdOrder
+                    };
+                });
+            },
+            resetPanelGroups () {
+                set((state)=>{
+                    state.panelGroups = state.previousPanelGroupStates.panelGroups;
+                    state.panelGroupIdOrder = state.previousPanelGroupStates.panelGroupIdOrder;
+                });
+            },
+            getPanelKey ({ panelGroupId , itemIndex  }) {
+                const { panelGroups  } = get();
+                const group = findGroup(panelGroups, panelGroupId);
+                const item = findItem(group, itemIndex);
+                return getPanelKeyFromRef(item.content);
+            },
+            addPanelToGroup (panelKey, panelGroupId) {
+                const { panelGroups  } = get();
+                const group = findGroup(panelGroups, panelGroupId);
+                const gridItem = {
+                    x: 0,
+                    y: getYForNewRow(group),
+                    width: 12,
+                    height: 6,
+                    content: createPanelRef(panelKey)
+                };
+                set((state)=>{
+                    var ref;
+                    (ref = state.panelGroups[panelGroupId]) === null || ref === void 0 ? void 0 : ref.items.push(gridItem);
+                });
+            },
+            movePanelToGroup ({ panelGroupId , itemIndex  }, newPanelGroupId) {
+                const { panelGroups  } = get();
+                // Find the existing item to make sure it exists
+                const group = findGroup(panelGroups, panelGroupId);
+                const item = findItem(group, itemIndex);
+                // Find the new group and figure out where a new row should go
+                const newGroup = findGroup(panelGroups, newPanelGroupId);
+                const newGroupY = getYForNewRow(newGroup);
+                set((state)=>{
+                    var // Remove the item from its current group
+                    ref, // Add a new item to the new group
+                    ref1;
+                    (ref = state.panelGroups[panelGroupId]) === null || ref === void 0 ? void 0 : ref.items.splice(itemIndex, 1);
+                    (ref1 = state.panelGroups[newPanelGroupId]) === null || ref1 === void 0 ? void 0 : ref1.items.push({
+                        x: 0,
+                        y: newGroupY,
+                        width: item.width,
+                        height: item.height,
+                        content: item.content
+                    });
+                });
+            },
+            swapPanelGroups (x, y) {
+                set((state)=>{
+                    if (x < 0 || x >= state.panelGroupIdOrder.length || y < 0 || y >= state.panelGroupIdOrder.length) {
+                        throw new Error('index out of bound');
+                    }
+                    const xPanelGroup = state.panelGroupIdOrder[x];
+                    const yPanelGroup = state.panelGroupIdOrder[y];
+                    if (xPanelGroup === undefined || yPanelGroup === undefined) {
+                        throw new Error('panel group is undefined');
+                    }
+                    // assign yPanelGroup to layouts[x] and assign xGroup to layouts[y], swapping two panel groups
+                    [state.panelGroupIdOrder[x], state.panelGroupIdOrder[y]] = [
+                        yPanelGroup,
+                        xPanelGroup
+                    ];
+                });
+            },
+            deletePanelInPanelGroup ({ panelGroupId , itemIndex  }) {
+                set((state)=>{
+                    const group = state.panelGroups[panelGroupId];
+                    if (group === undefined) {
+                        throw new Error(`No panel group found: ${panelGroupId}`);
+                    }
+                    // remove panel from panel group
+                    group.items.splice(itemIndex, 1);
+                });
+            },
+            deletePanelGroup (panelGroupId) {
+                const { panelGroups , panelGroupIdOrder: panelGroupOrder , deletePanels  } = get();
+                const group = findGroup(panelGroups, panelGroupId);
+                const orderIdx = panelGroupOrder.findIndex((id)=>id === panelGroupId);
+                if (orderIdx === -1) {
+                    throw new Error(`Could not find panel group Id ${panelGroupId} in order array`);
+                }
+                // remove panels from group first
+                const panelsToBeDeleted = [];
+                for(let i = 0; i < group.items.length; i++){
+                    panelsToBeDeleted.push({
+                        panelGroupId,
+                        itemIndex: i
+                    });
+                }
+                deletePanels(panelsToBeDeleted);
+                // remove group from both panelGroups and panelGroupOrder
+                set((state)=>{
+                    state.panelGroupIdOrder.splice(orderIdx, 1);
+                    delete state.panelGroups[panelGroupId];
+                });
+            },
+            // Return an object that maps each panel to the groups it belongs
+            mapPanelToPanelGroups () {
+                const map = {}; // { panel key: [group ids] }
+                Object.values(get().panelGroups).forEach((group)=>{
+                    // for each panel in a group, add the group id to map[panelKey]
+                    group.items.forEach((panel)=>{
+                        const panelKey = getPanelKeyFromRef(panel.content);
+                        if (map[panelKey]) {
+                            var ref;
+                            (ref = map[panelKey]) === null || ref === void 0 ? void 0 : ref.push(group.id);
+                        } else {
+                            map[panelKey] = [
+                                group.id
+                            ];
+                        }
+                    });
+                });
+                return map;
+            }
+        };
+    };
+}
+// Helper to find a group and throw if not found
+function findGroup(panelGroups, groupId) {
+    const group = panelGroups[groupId];
+    if (group === undefined) {
+        throw new Error(`No panel group found for Id ${groupId}`);
+    }
+    return group;
+}
+// Helper to get an item in a group and throw if not found
+function findItem(group, itemIndex) {
+    const item = group.items[itemIndex];
+    if (item === undefined) {
+        throw new Error(`No grid item found at position ${itemIndex}`);
+    }
+    return item;
+}
+// Given a Grid, 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 item of group.items){
+        const itemMaxY = item.y + item.height;
+        if (itemMaxY > newRowY) {
+            newRowY = itemMaxY;
+        }
+    }
+    return newRowY;
+}
+
+//# sourceMappingURL=panel-group-slice.js.map