@perses-dev/dashboards 0.9.0 → 0.10.0

package/dist/cjs/components/Variables/VariableList.js

@@ -21,92 +21,73 @@ Object.defineProperty(exports, "TemplateVariableList", {
 const _jsxRuntime = require("react/jsx-runtime");
 const _react = require("react");
 const _material = require("@mui/material");
+const _eye = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Eye"));
+const _pencil = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Pencil"));
 const _context = require("../../context");
 const _variable = require("./Variable");
+const _variableEditor = require("./VariableEditor");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 function TemplateVariableList() {
     const [isEditing, setIsEditing] = (0, _react.useState)(false);
     const variableDefinitions = (0, _context.useTemplateVariableDefinitions)();
     const { isEditMode  } = (0, _context.useEditMode)();
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    const [showVariablesInEditMode, setShowVariablesInEditMode] = (0, _react.useState)(true);
+    const showVariables = isEditMode ? showVariablesInEditMode : true;
+    const { setVariableDefinitions  } = (0, _context.useTemplateVariableActions)();
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+        m: 2,
         children: [
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Drawer, {
                 anchor: 'right',
                 open: isEditing,
-                onClose: ()=>setIsEditing(false),
-                children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
-                    width: 900,
-                    p: 4,
-                    children: [
-                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableContainer, {
-                            component: _material.Paper,
-                            children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Table, {
-                                sx: {
-                                    minWidth: 650
-                                },
-                                "aria-label": "simple table",
-                                children: [
-                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableHead, {
-                                        children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.TableRow, {
-                                            children: [
-                                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
-                                                    children: "Variable Name"
-                                                }),
-                                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
-                                                    align: "right",
-                                                    children: "Type"
-                                                })
-                                            ]
-                                        })
-                                    }),
-                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableBody, {
-                                        children: variableDefinitions.map((v)=>/*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.TableRow, {
-                                                sx: {
-                                                    '&:last-child td, &:last-child th': {
-                                                        border: 0
-                                                    }
-                                                },
-                                                children: [
-                                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
-                                                        component: "th",
-                                                        scope: "row",
-                                                        sx: {
-                                                            fontWeight: 'bold'
-                                                        },
-                                                        children: v.spec.name
-                                                    }),
-                                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
-                                                        align: "right",
-                                                        children: v.kind
-                                                    })
-                                                ]
-                                            }, v.spec.name))
-                                    })
-                                ]
-                            })
-                        }),
-                        /*#__PURE__*/ (0, _jsxRuntime.jsx)("pre", {
-                            children: JSON.stringify(variableDefinitions, null, 2)
-                        })
-                    ]
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variableEditor.VariableEditor, {
+                    onCancel: ()=>{
+                        setIsEditing(false);
+                    },
+                    variableDefinitions: variableDefinitions,
+                    onChange: (v)=>{
+                        setVariableDefinitions(v);
+                        setIsEditing(false);
+                    }
                 })
             }),
+            isEditMode && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+                pb: 2,
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Button, {
+                        onClick: ()=>setShowVariablesInEditMode(!showVariablesInEditMode),
+                        startIcon: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_eye.default, {}),
+                        children: [
+                            showVariablesInEditMode ? 'Hide' : 'Show',
+                            " Variables"
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                        onClick: ()=>setIsEditing(true),
+                        startIcon: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencil.default, {}),
+                        children: "Edit Variables"
+                    })
+                ]
+            }),
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
                 display: 'flex',
                 justifyContent: "space-between",
-                children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Stack, {
                     direction: 'row',
                     spacing: 2,
-                    children: [
-                        variableDefinitions.map((v)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
-                                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variable.TemplateVariable, {
-                                    name: v.spec.name
-                                }, v.spec.name)
-                            }, v.spec.name)),
-                        isEditMode && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
-                            onClick: ()=>setIsEditing(true),
-                            children: "Modify Variables"
-                        })
-                    ]
+                    children: showVariables && variableDefinitions.map((v)=>{
+                        var ref;
+                        /*#__PURE__*/ return (0, _jsxRuntime.jsx)(_material.Box, {
+                            display: ((ref = v.spec.display) === null || ref === void 0 ? void 0 : ref.hidden) ? 'none' : undefined,
+                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variable.TemplateVariable, {
+                                name: v.spec.name
+                            }, v.spec.name)
+                        }, v.spec.name);
+                    })
                 })
             })
         ]

package/dist/cjs/components/Variables/index.js

@@ -16,6 +16,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 _exportStar(require("./Variable"), exports);
 _exportStar(require("./VariableList"), exports);
+_exportStar(require("./VariableEditorForm"), exports);
 function _exportStar(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {

package/dist/cjs/context/DashboardProvider/DashboardProvider.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
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    DashboardContext: ()=>DashboardContext,
+    useDashboardStore: ()=>useDashboardStore,
+    DashboardProvider: ()=>DashboardProvider
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _zustand = require("zustand");
+const _middleware = require("zustand/middleware");
+const _immer = require("zustand/middleware/immer");
+const _shallow = /*#__PURE__*/ _interopRequireDefault(require("zustand/shallow"));
+const _react = require("react");
+const _panelGroupSlice = require("./panel-group-slice");
+const _layoutSlice = require("./layout-slice");
+const _panelEditingSlice = require("./panel-editing-slice");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const DashboardContext = /*#__PURE__*/ (0, _react.createContext)(undefined);
+function useDashboardStore(selector) {
+    const store = (0, _react.useContext)(DashboardContext);
+    if (store === undefined) {
+        throw new Error('No DashboardContext found. Did you forget a Provider?');
+    }
+    return (0, _zustand.useStore)(store, selector, _shallow.default);
+}
+function DashboardProvider(props) {
+    const { children , initialState: { dashboardSpec , isEditMode  } ,  } = props;
+    const { layouts , panels  } = dashboardSpec;
+    const dashboardStore = (0, _zustand.createStore)()((0, _immer.immer)((0, _middleware.devtools)((...args)=>{
+        const [set] = args;
+        return {
+            ...(0, _panelGroupSlice.createPanelGroupSlice)(...args),
+            ...(0, _layoutSlice.createLayoutSlice)(layouts)(...args),
+            ...(0, _panelEditingSlice.createPanelEditorSlice)(panels)(...args),
+            defaultTimeRange: dashboardSpec.duration,
+            isEditMode: !!isEditMode,
+            setEditMode: (isEditMode)=>set({
+                    isEditMode
+                })
+        };
+    })));
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(DashboardContext.Provider, {
+        value: dashboardStore,
+        children: children
+    });
+}

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

@@ -0,0 +1,18 @@
+// 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.
+/**
+ * The middleware applied to the DashboardStore (can be used as generic argument in StateCreator).
+ */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

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

@@ -0,0 +1,71 @@
+// 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,
+    useLayouts: ()=>useLayouts,
+    usePanelGroupDialog: ()=>usePanelGroupDialog,
+    usePanels: ()=>usePanels,
+    useDefaultTimeRange: ()=>useDefaultTimeRange
+});
+const _dashboardProvider = require("./DashboardProvider");
+function useEditMode() {
+    return (0, _dashboardProvider.useDashboardStore)(({ isEditMode , setEditMode  })=>({
+            isEditMode,
+            setEditMode
+        }));
+}
+function useLayouts() {
+    return (0, _dashboardProvider.useDashboardStore)(({ layouts , addPanelToGroup , movePanelToGroup , updatePanelGroup , swapPanelGroups , deletePanelGroup  })=>({
+            layouts,
+            addPanelToGroup,
+            movePanelToGroup,
+            updatePanelGroup,
+            swapPanelGroups,
+            deletePanelGroup
+        }));
+}
+function usePanelGroupDialog() {
+    return (0, _dashboardProvider.useDashboardStore)(({ panelGroupDialog , openPanelGroupDialog , closePanelGroupDialog , deletePanelGroupDialog , openDeletePanelGroupDialog , closeDeletePanelGroupDialog ,  })=>({
+            panelGroupDialog,
+            openPanelGroupDialog,
+            closePanelGroupDialog,
+            deletePanelGroupDialog,
+            openDeletePanelGroupDialog,
+            closeDeletePanelGroupDialog
+        }));
+}
+function usePanels() {
+    return (0, _dashboardProvider.useDashboardStore)(({ panels , panelEditor , addPanel , editPanel , deletePanelDialog , deletePanels , openDeletePanelDialog , closeDeletePanelDialog ,  })=>({
+            panels,
+            panelEditor,
+            addPanel,
+            editPanel,
+            deletePanels,
+            deletePanelDialog,
+            openDeletePanelDialog,
+            closeDeletePanelDialog
+        }));
+}
+function useDefaultTimeRange() {
+    return (0, _dashboardProvider.useDashboardStore)((state)=>state.defaultTimeRange);
+}

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/layout-slice.js

@@ -0,0 +1,200 @@
+// 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, "createLayoutSlice", {
+    enumerable: true,
+    get: ()=>createLayoutSlice
+});
+const _core = require("@perses-dev/core");
+function createLayoutSlice(layouts) {
+    // Return the state creator function for Zustand that uses the layouts provided as initial state
+    let id = -1;
+    function createPanelGroupId() {
+        id++;
+        return id;
+    }
+    var ref;
+    return (set, get)=>{
+        return {
+            layouts: layouts.map((layout)=>{
+                var ref1, ref2, ref3;
+                return {
+                    ...layout,
+                    id: createPanelGroupId(),
+                    title: (ref1 = layout.spec.display) === null || ref1 === void 0 ? void 0 : ref1.title,
+                    isCollapsed: (ref = !((ref2 = layout.spec.display) === null || ref2 === void 0 ? void 0 : (ref3 = ref2.collapse) === null || ref3 === void 0 ? void 0 : ref3.open)) !== null && ref !== void 0 ? ref : false,
+                    items: layout.spec.items
+                };
+            }),
+            getPanelKey ({ groupIndex , itemIndex  }) {
+                const { layouts  } = get();
+                const group = findGroup(layouts, groupIndex);
+                const item = findItem(group, itemIndex);
+                return (0, _core.getPanelKeyFromRef)(item.content);
+            },
+            addPanelToGroup (panelKey, groupIndex) {
+                const { layouts  } = get();
+                const group = findGroup(layouts, groupIndex);
+                const gridItem = {
+                    x: 0,
+                    y: getYForNewRow(group),
+                    width: 12,
+                    height: 6,
+                    content: (0, _core.createPanelRef)(panelKey)
+                };
+                set((state)=>{
+                    var ref;
+                    (ref = state.layouts[groupIndex]) === null || ref === void 0 ? void 0 : ref.items.push(gridItem);
+                });
+            },
+            movePanelToGroup ({ groupIndex , itemIndex  }, newGroupIndex) {
+                const { layouts  } = get();
+                // Find the existing item to make sure it exists
+                const group = findGroup(layouts, groupIndex);
+                const item = findItem(group, itemIndex);
+                // Find the new group and figure out where a new row should go
+                const newGroup = findGroup(layouts, newGroupIndex);
+                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.layouts[groupIndex]) === null || ref === void 0 ? void 0 : ref.items.splice(itemIndex, 1);
+                    (ref1 = state.layouts[newGroupIndex]) === null || ref1 === void 0 ? void 0 : ref1.items.push({
+                        x: 0,
+                        y: newGroupY,
+                        width: item.width,
+                        height: item.height,
+                        content: item.content
+                    });
+                });
+            },
+            // TODO: Maybe combine this into some kind of groupEditor state
+            updatePanelGroup (next, groupIndex) {
+                set((state)=>{
+                    if (groupIndex === undefined) {
+                        state.layouts.unshift({
+                            ...next,
+                            id: createPanelGroupId()
+                        });
+                    } else {
+                        const layout = state.layouts[groupIndex];
+                        if (layout === undefined) {
+                            throw new Error(`No layout at index ${groupIndex}`);
+                        }
+                        state.layouts[groupIndex] = {
+                            ...next,
+                            id: layout.id
+                        };
+                    }
+                });
+            },
+            swapPanelGroups (x, y) {
+                set((state)=>{
+                    if (x < 0 || x >= state.layouts.length || y < 0 || y >= state.layouts.length) {
+                        throw new Error('index out of bound');
+                    }
+                    const xPanelGroup = state.layouts[x];
+                    const yPanelGroup = state.layouts[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.layouts[x], state.layouts[y]] = [
+                        yPanelGroup,
+                        xPanelGroup
+                    ];
+                });
+            },
+            deletePanelInPanelGroup ({ groupIndex , itemIndex  }) {
+                set((state)=>{
+                    const group = state.layouts[groupIndex];
+                    if (group === undefined) {
+                        throw new Error(`No panel group found: ${groupIndex}`);
+                    }
+                    // remove panel from panel group
+                    group.items.splice(itemIndex, 1);
+                });
+            },
+            deletePanelGroup (groupIndex) {
+                const { layouts , deletePanels  } = get();
+                const group = layouts[groupIndex];
+                if (group === undefined) {
+                    throw new Error(`No panel group found: ${groupIndex}`);
+                }
+                // remove panels from group first
+                const panelsToBeDeleted = [];
+                for(let i = 0; i < group.items.length; i++){
+                    panelsToBeDeleted.push({
+                        groupIndex,
+                        itemIndex: i
+                    });
+                }
+                deletePanels(panelsToBeDeleted);
+                // remove group from state.layouts
+                set((state)=>{
+                    state.layouts.splice(groupIndex, 1);
+                });
+            },
+            // Return an object that maps each panel to the groups it belongs
+            mapPanelToPanelGroups () {
+                const map = {}; // { panel key: [group ids] }
+                get().layouts.forEach((group)=>{
+                    // for each panel in a group, add the group id to map[panelKey]
+                    group.items.forEach((panel)=>{
+                        const panelKey = (0, _core.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(layouts, groupIndex) {
+    const group = layouts[groupIndex];
+    if (group === undefined) {
+        throw new Error(`No layout at index ${groupIndex}`);
+    }
+    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;
+}