@perses-dev/dashboards 0.21.1 → 0.23.0

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

@@ -0,0 +1,62 @@
+// Copyright 2023 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, "createDuplicatePanelSlice", {
+    enumerable: true,
+    get: ()=>createDuplicatePanelSlice
+});
+const _panelUtils = require("../../utils/panelUtils");
+const _common = require("./common");
+function createDuplicatePanelSlice() {
+    return (set)=>({
+            duplicatePanel (panelGroupItemId) {
+                set((state)=>{
+                    const panels = state.panels;
+                    // Figure out the panel key at that location
+                    const { panelGroupId , panelGroupItemLayoutId: panelGroupLayoutId  } = panelGroupItemId;
+                    const group = state.panelGroups[panelGroupId];
+                    if (group === undefined) {
+                        throw new Error(`Missing panel group ${panelGroupId}`);
+                    }
+                    const panelKey = group.itemPanelKeys[panelGroupLayoutId];
+                    if (panelKey === undefined) {
+                        throw new Error(`Could not find Panel Group item ${panelGroupItemId}`);
+                    }
+                    // Find the panel to edit
+                    const panelToDupe = panels[panelKey];
+                    if (panelToDupe === undefined) {
+                        throw new Error(`Cannot find Panel with key '${panelKey}'`);
+                    }
+                    // Find the layout for the item being duped
+                    const matchingLayout = group.itemLayouts.find((itemLayout)=>{
+                        return itemLayout.i === panelGroupLayoutId;
+                    });
+                    if (matchingLayout === undefined) {
+                        throw new Error(`Cannot find layout for Panel with key '${panelKey}'`);
+                    }
+                    const dupePanelKey = (0, _panelUtils.getValidPanelKey)(panelKey, panels);
+                    state.panels[dupePanelKey] = panelToDupe;
+                    const duplicateLayout = {
+                        i: (0, _common.generateId)().toString(),
+                        w: matchingLayout.w,
+                        h: matchingLayout.h
+                    };
+                    group.itemLayouts = (0, _panelUtils.insertPanelInLayout)(duplicateLayout, matchingLayout, group.itemLayouts);
+                    group.itemPanelKeys[duplicateLayout.i] = dupePanelKey;
+                });
+            }
+        });
+}

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 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

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 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
@@ -18,7 +18,7 @@ Object.defineProperty(exports, "createPanelEditorSlice", {
     enumerable: true,
     get: ()=>createPanelEditorSlice
 });
-const _functions = require("../../utils/functions");
+const _panelUtils = require("../../utils/panelUtils");
 const _common = require("./common");
 const _panelGroupSlice = require("./panel-group-slice");
 function createPanelEditorSlice() {
@@ -80,7 +80,7 @@ function createPanelEditorSlice() {
                             newGroup.itemLayouts.push({
                                 i: existingLayout.i,
                                 x: 0,
-                                y: getYForNewRow(newGroup),
+                                y: (0, _panelUtils.getYForNewRow)(newGroup),
                                 w: existingLayout.w,
                                 h: existingLayout.h
                             });
@@ -99,6 +99,7 @@ function createPanelEditorSlice() {
                 });
             },
             openAddPanel (panelGroupId) {
+                var ref, ref1;
                 // 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];
@@ -107,23 +108,19 @@ function createPanelEditorSlice() {
                     newGroup.title = 'Panel Group';
                     panelGroupId = newGroup.id;
                 }
+                var ref2, ref3;
                 const editorState = {
                     mode: 'Add',
                     initialValues: {
                         name: '',
                         description: '',
                         groupId: panelGroupId,
-                        kind: '',
-                        spec: {}
+                        kind: (ref2 = (ref = get().initialValues) === null || ref === void 0 ? void 0 : ref.kind) !== null && ref2 !== void 0 ? ref2 : '',
+                        spec: (ref3 = (ref1 = get().initialValues) === null || ref1 === void 0 ? void 0 : ref1.spec) !== null && ref3 !== void 0 ? ref3 : {}
                     },
                     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]}`;
-                        }
+                        const panelKey = (0, _panelUtils.getValidPanelKey)(next.name, get().panels);
                         set((state)=>{
                             // Add a panel
                             state.panels[panelKey] = panelDef;
@@ -135,7 +132,7 @@ function createPanelEditorSlice() {
                             const layout = {
                                 i: (0, _common.generateId)().toString(),
                                 x: 0,
-                                y: getYForNewRow(group),
+                                y: (0, _panelUtils.getYForNewRow)(group),
                                 w: 12,
                                 h: 6
                             };
@@ -177,29 +174,3 @@ function createPanelDefinitionFromEditorValues(editorValues) {
         }
     };
 }
-// Given a PanelGroup, will find the Y coordinate for adding a new row to the grid, taking into account the items present
-function getYForNewRow(group) {
-    let newRowY = 0;
-    for (const layout of group.itemLayouts){
-        const itemMaxY = layout.y + layout.h;
-        if (itemMaxY > newRowY) {
-            newRowY = itemMaxY;
-        }
-    }
-    return newRowY;
-}
-// 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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 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

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 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

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 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

package/dist/cjs/context/DatasourceStoreProvider.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 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

package/dist/cjs/context/TemplateVariableProvider/TemplateVariableProvider.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 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
@@ -187,25 +187,25 @@ function TemplateVariableProvider({ children , initialVariableDefinitions =[]  }
         })
     });
 }
-/** Helpers */ function hydrateTemplateVariableState(definition, initialValue) {
-    const v = definition;
-    var ref;
+/** Helpers */ function hydrateTemplateVariableState(variable, initialValue) {
     const varState = {
-        value: (ref = initialValue !== null && initialValue !== void 0 ? initialValue : v.spec.default_value) !== null && ref !== void 0 ? ref : null,
+        value: null,
         loading: false
     };
-    switch(v.kind){
+    switch(variable.kind){
         case 'TextVariable':
-            varState.value = initialValue !== null && initialValue !== void 0 ? initialValue : v.spec.value;
+            varState.value = initialValue !== null && initialValue !== void 0 ? initialValue : variable.spec.value;
             break;
         case 'ListVariable':
             varState.options = [];
+            var ref;
+            varState.value = (ref = initialValue !== null && initialValue !== void 0 ? initialValue : variable.spec.default_value) !== null && ref !== void 0 ? ref : null;
             if (varState.options.length > 0 && !varState.value) {
                 var ref1;
                 var ref2;
                 const firstOptionValue = (ref2 = (ref1 = varState.options[0]) === null || ref1 === void 0 ? void 0 : ref1.value) !== null && ref2 !== void 0 ? ref2 : null;
                 if (firstOptionValue !== null) {
-                    varState.value = v.spec.allow_multiple ? [
+                    varState.value = variable.spec.allow_multiple ? [
                         firstOptionValue
                     ] : firstOptionValue;
                 }

package/dist/cjs/context/TemplateVariableProvider/index.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 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

package/dist/cjs/context/TemplateVariableProvider/query-params.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 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

package/dist/cjs/context/TemplateVariableProvider/query-params.test.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 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

package/dist/cjs/context/index.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 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

package/dist/cjs/context/useDashboard.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 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
@@ -22,13 +22,14 @@ const _core = require("@perses-dev/core");
 const _dashboardProvider = require("./DashboardProvider");
 const _templateVariableProvider = require("./TemplateVariableProvider");
 function useDashboard() {
-    const { panels , panelGroups , panelGroupOrder , defaultTimeRange , metadata , setDashboard: setDashboardResource ,  } = (0, _dashboardProvider.useDashboardStore)(({ panels , panelGroups , panelGroupOrder , defaultTimeRange , setDashboard , metadata  })=>({
+    const { panels , panelGroups , panelGroupOrder , defaultTimeRange , setDashboard: setDashboardResource , metadata , display ,  } = (0, _dashboardProvider.useDashboardStore)(({ panels , panelGroups , panelGroupOrder , defaultTimeRange , setDashboard , metadata , display  })=>({
             panels,
             panelGroups,
             panelGroupOrder,
             defaultTimeRange,
             setDashboard,
-            metadata
+            metadata,
+            display
         }));
     const { setVariableDefinitions  } = (0, _templateVariableProvider.useTemplateVariableActions)();
     const variables = (0, _templateVariableProvider.useTemplateVariableDefinitions)();
@@ -37,6 +38,7 @@ function useDashboard() {
         kind: 'Dashboard',
         metadata,
         spec: {
+            display,
             panels,
             layouts,
             variables,

package/dist/cjs/index.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 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

package/dist/cjs/test/dashboard-provider.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 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

package/dist/cjs/test/index.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 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

package/dist/cjs/test/plugin-registry.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 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

package/dist/cjs/test/render.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 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

package/dist/cjs/test/setup-tests.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 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

package/dist/cjs/test/testDashboard.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 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

package/dist/cjs/utils/index.js

@@ -0,0 +1,28 @@
+// Copyright 2023 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("./panelUtils"), 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/utils/panelUtils.js

@@ -0,0 +1,168 @@
+// Copyright 2023 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, {
+    getYForNewRow: ()=>getYForNewRow,
+    insertPanelInLayout: ()=>insertPanelInLayout,
+    getValidPanelKey: ()=>getValidPanelKey
+});
+const _constants = require("../constants");
+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;
+}
+function getPanelBounds({ x , y , w , h  }) {
+    return {
+        x1: x,
+        x2: x + w,
+        y1: y,
+        y2: y + h
+    };
+}
+function insertPanelInLayout(newLayout, referenceLayout, itemLayouts) {
+    const MAX_LAYOUT_WIDTH = _constants.GRID_LAYOUT_COLS[_constants.GRID_LAYOUT_SMALL_BREAKPOINT];
+    const referenceBounds = getPanelBounds(referenceLayout);
+    // Organize layouts based on vertical relation to the item being inserted
+    // after.
+    const aboveInsertRow = [];
+    const insertRow = [];
+    const belowInsertRow = [];
+    itemLayouts.forEach((itemLayout)=>{
+        const itemBounds = getPanelBounds(itemLayout);
+        if (itemBounds.y2 <= referenceBounds.y1) {
+            aboveInsertRow.push(itemLayout);
+        } else if (itemBounds.y1 >= referenceBounds.y2) {
+            belowInsertRow.push(itemLayout);
+        } else {
+            insertRow.push(itemLayout);
+        }
+    });
+    // Cannot safely assume that the order of item layouts array is strictly
+    // left to right. Sorting the row by horizontal position to more easily find
+    // gaps.
+    insertRow.sort((a, b)=>a.x - b.x);
+    const insertAfterIndex = insertRow.findIndex((item)=>item.i === referenceLayout.i);
+    if (insertAfterIndex === insertRow.length - 1) {
+        // Insert to the right when space is available and the reference is the last
+        // item in the row.
+        if (referenceBounds.x2 + newLayout.w <= MAX_LAYOUT_WIDTH) {
+            return [
+                ...aboveInsertRow,
+                ...insertRow,
+                {
+                    ...newLayout,
+                    x: referenceBounds.x2,
+                    y: referenceBounds.y1
+                },
+                ...belowInsertRow
+            ];
+        }
+    } else if (insertAfterIndex >= 0) {
+        const nextItem = insertRow[insertAfterIndex + 1];
+        if (nextItem && getPanelBounds(nextItem).x1 - referenceBounds.x2 >= newLayout.w) {
+            // Insert to the right when space is available between the reference and
+            // the next item in the row.
+            insertRow.splice(insertAfterIndex + 1, 0, {
+                ...newLayout,
+                x: referenceBounds.x2,
+                y: referenceBounds.y1
+            });
+            return [
+                ...aboveInsertRow,
+                ...insertRow,
+                ...belowInsertRow
+            ];
+        }
+    }
+    // Insert the new item below the original and shift the items below the
+    // row where the reference is located.
+    return [
+        ...aboveInsertRow,
+        ...insertRow,
+        {
+            x: referenceBounds.x1,
+            y: referenceBounds.y2,
+            ...newLayout
+        },
+        ...belowInsertRow.map((itemLayout)=>{
+            // Note: the grid will not necessarily display all of these items shifted
+            // all the way down because of vertical compacting, but shifing their
+            // y position ensures the new item gets vertical precedence over items
+            // below it in that compacting.
+            return {
+                ...itemLayout,
+                y: itemLayout.y + newLayout.h
+            };
+        })
+    ];
+}
+function getValidPanelKey(panelKey, panels) {
+    const uniquePanelKeys = getUniquePanelKeys(panels);
+    let normalizedPanelKey = getPanelKeyParts(removeWhiteSpaces(panelKey)).name;
+    const matchingKey = uniquePanelKeys[normalizedPanelKey];
+    if (typeof matchingKey === 'number') {
+        normalizedPanelKey += `-${matchingKey + 1}`;
+    }
+    return normalizedPanelKey;
+}
+const removeWhiteSpaces = (str)=>{
+    return str.replace(/\s+/g, '');
+};
+/**
+ * Breaks the specified panel key into the name and the optional `-number` used
+ * for deduping panels with the same name.
+ */ function getPanelKeyParts(panelKey) {
+    const parts = panelKey.match(/(.+)-([0-9]+)/);
+    if (parts && parts[1] && parts[2]) {
+        return {
+            name: parts[1],
+            number: parseInt(parts[2], 10)
+        };
+    }
+    return {
+        name: panelKey
+    };
+}
+// Find all the unique panel keys and the largest number used for each.
+// 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 { name , number  } = getPanelKeyParts(panelKey);
+        if (uniquePanelKeys[name] === undefined) {
+            uniquePanelKeys[name] = 0;
+        }
+        const currentValue = uniquePanelKeys[name];
+        if (typeof currentValue === 'number' && number) {
+            // Check for the maximum value because we cannot rely on a sequential
+            // set of numbers when panels are modified.
+            uniquePanelKeys[name] = Math.max(currentValue, number);
+        }
+    });
+    return uniquePanelKeys;
+}