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

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

@@ -0,0 +1,150 @@
+// 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, "TemplateVariableList", {
+    enumerable: true,
+    get: ()=>TemplateVariableList
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _material = require("@mui/material");
+const _pencil = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Pencil"));
+const _pinOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/PinOutline"));
+const _pinOffOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/PinOffOutline"));
+const _components = require("@perses-dev/components");
+const _context = require("../../context");
+const _variable = require("./Variable");
+const _variableEditor = require("./VariableEditor");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interopRequireWildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function TemplateVariableList(props) {
+    const [isEditing, setIsEditing] = (0, _react.useState)(false);
+    const [isPin, setIsPin] = (0, _react.useState)(props.initialVariableIsSticky);
+    const variableDefinitions = (0, _context.useTemplateVariableDefinitions)();
+    const { isEditMode  } = (0, _context.useEditMode)();
+    const { setVariableDefinitions  } = (0, _context.useTemplateVariableActions)();
+    const scrollTrigger = (0, _material.useScrollTrigger)({
+        disableHysteresis: true
+    });
+    const isSticky = scrollTrigger && props.initialVariableIsSticky && isPin;
+    const onClose = ()=>{
+        setIsEditing(false);
+    };
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.Drawer, {
+                isOpen: isEditing,
+                onClose: onClose,
+                PaperProps: {
+                    sx: {
+                        width: '50%'
+                    }
+                },
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variableEditor.VariableEditor, {
+                    variableDefinitions: variableDefinitions,
+                    onCancel: onClose,
+                    onChange: (v)=>{
+                        setVariableDefinitions(v);
+                        setIsEditing(false);
+                    }
+                })
+            }),
+            isEditMode && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                pb: 2,
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                    onClick: ()=>setIsEditing(true),
+                    startIcon: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencil.default, {}),
+                    children: "Edit Variables"
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.AppBar, {
+                color: 'inherit',
+                position: isSticky ? 'fixed' : 'static',
+                elevation: isSticky ? 4 : 0,
+                sx: {
+                    ...props.sx
+                },
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+                    display: 'flex',
+                    justifyContent: "space-between",
+                    my: isSticky ? 2 : 0,
+                    ml: isSticky ? 2 : 0,
+                    children: [
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Stack, {
+                            direction: "row",
+                            spacing: 1,
+                            children: isEditMode && 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);
+                            })
+                        }),
+                        props.initialVariableIsSticky && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                            onClick: ()=>setIsPin(!isPin),
+                            children: isPin ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pinOutline.default, {}) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pinOffOutline.default, {})
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}

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

@@ -0,0 +1,30 @@
+// 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("./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, {
+            enumerable: true,
+            get: function() {
+                return from[k];
+            }
+        });
+    });
+    return from;
+}

package/dist/cjs/components/Variables/variable-model.js

@@ -0,0 +1,117 @@
+// 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 name1 in all)Object.defineProperty(target, name1, {
+        enumerable: true,
+        get: all[name1]
+    });
+}
+_export(exports, {
+    filterVariableList: ()=>filterVariableList,
+    useListVariablePluginValues: ()=>useListVariablePluginValues,
+    getVariableValuesKey: ()=>getVariableValuesKey,
+    VARIABLE_TYPES: ()=>VARIABLE_TYPES
+});
+const _pluginSystem = require("@perses-dev/plugin-system");
+const _reactQuery = require("@tanstack/react-query");
+function filterVariableList(data, capturedRegexp) {
+    const result = [];
+    const filteredSet = new Set();
+    for (const variableValue of data){
+        const matches = variableValue.value.matchAll(capturedRegexp);
+        let concat = '';
+        for (const match of matches){
+            for(let i = 1; i < match.length; i++){
+                const m = match[i];
+                if (m !== undefined) {
+                    concat = `${concat}${m}`;
+                }
+            }
+        }
+        if (concat !== '' && !filteredSet.has(concat)) {
+            // like that we are avoiding to have duplicating variable value
+            filteredSet.add(concat);
+            result.push({
+                label: variableValue.label,
+                value: concat
+            });
+        }
+    }
+    return result;
+}
+function useListVariablePluginValues(definition) {
+    const { data: variablePlugin  } = (0, _pluginSystem.usePlugin)('Variable', definition.spec.plugin.kind);
+    const datasourceStore = (0, _pluginSystem.useDatasourceStore)();
+    const allVariables = (0, _pluginSystem.useTemplateVariableValues)();
+    const { absoluteTimeRange: timeRange , refreshKey  } = (0, _pluginSystem.useTimeRange)();
+    const variablePluginCtx = {
+        timeRange,
+        datasourceStore,
+        variables: allVariables
+    };
+    const spec = definition.spec.plugin.spec;
+    const capturingRegexp = definition.spec.capturing_regexp !== undefined ? new RegExp(definition.spec.capturing_regexp, 'g') : undefined;
+    let dependsOnVariables;
+    if (variablePlugin === null || variablePlugin === void 0 ? void 0 : variablePlugin.dependsOn) {
+        const dependencies = variablePlugin.dependsOn(spec, variablePluginCtx);
+        dependsOnVariables = dependencies.variables;
+    }
+    const variables = (0, _pluginSystem.useTemplateVariableValues)(dependsOnVariables);
+    let waitToLoad = false;
+    if (dependsOnVariables) {
+        waitToLoad = dependsOnVariables.some((v)=>{
+            var ref;
+            return (ref = variables[v]) === null || ref === void 0 ? void 0 : ref.loading;
+        });
+    }
+    const variablesValueKey = getVariableValuesKey(variables);
+    return (0, _reactQuery.useQuery)([
+        name,
+        definition,
+        variablesValueKey,
+        timeRange,
+        refreshKey
+    ], async ()=>{
+        const resp = await (variablePlugin === null || variablePlugin === void 0 ? void 0 : variablePlugin.getVariableOptions(spec, {
+            datasourceStore,
+            variables,
+            timeRange
+        }));
+        if (resp === undefined) {
+            return [];
+        }
+        if (capturingRegexp === undefined) {
+            return resp.data;
+        }
+        return filterVariableList(resp.data, capturingRegexp);
+    }, {
+        enabled: !!variablePlugin || waitToLoad
+    });
+}
+function getVariableValuesKey(v) {
+    return Object.values(v).map((v)=>JSON.stringify(v.value)).join(',');
+}
+const VARIABLE_TYPES = [
+    {
+        label: 'List',
+        kind: 'ListVariable'
+    },
+    {
+        label: 'Text',
+        kind: 'TextVariable'
+    }
+];

package/dist/cjs/components/Variables/variable-model.test.js

@@ -0,0 +1,106 @@
+// 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
+});
+const _variableModel = require("./variable-model");
+describe('filterVariableList', ()=>{
+    const testSuite = [
+        {
+            title: 'basic case',
+            capturing_regexp: /([^-]*)-host-([^-]*)/g,
+            originalValues: [
+                {
+                    label: 'l1',
+                    value: 'us1-host-ahdix'
+                },
+                {
+                    label: 'l2',
+                    value: 'us1-host-diua'
+                },
+                {
+                    label: 'l3',
+                    value: 'eu1-host-adf'
+                },
+                {
+                    label: 'l4',
+                    value: 'bar'
+                }
+            ],
+            result: [
+                {
+                    label: 'l1',
+                    value: 'us1ahdix'
+                },
+                {
+                    label: 'l2',
+                    value: 'us1diua'
+                },
+                {
+                    label: 'l3',
+                    value: 'eu1adf'
+                }
+            ]
+        },
+        {
+            title: 'duplicate captured value',
+            capturing_regexp: /prometheus-(.+):\d+/g,
+            originalValues: [
+                {
+                    label: 'l1',
+                    value: 'prometheus-app:9090'
+                },
+                {
+                    label: 'l2',
+                    value: 'prometheus-app:9091'
+                },
+                {
+                    label: 'l3',
+                    value: 'prometheus-platform:9091'
+                },
+                {
+                    label: 'l4',
+                    value: 'prometheus-database:9091'
+                },
+                {
+                    label: 'l5',
+                    value: 'prometheus-perses:9091'
+                }
+            ],
+            result: [
+                {
+                    label: 'l1',
+                    value: 'app'
+                },
+                {
+                    label: 'l3',
+                    value: 'platform'
+                },
+                {
+                    label: 'l4',
+                    value: 'database'
+                },
+                {
+                    label: 'l5',
+                    value: 'perses'
+                }
+            ]
+        }
+    ];
+    testSuite.forEach(({ title , capturing_regexp , originalValues , result  })=>{
+        it(title, ()=>{
+            expect((0, _variableModel.filterVariableList)(originalValues, capturing_regexp)).toEqual(result);
+        });
+    });
+});

package/dist/cjs/components/index.js

@@ -0,0 +1,39 @@
+// 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"), exports);
+_exportStar(require("./DashboardToolbar"), exports);
+_exportStar(require("./DeletePanelDialog"), exports);
+_exportStar(require("./DeletePanelGroupDialog"), exports);
+_exportStar(require("./DownloadButton"), exports);
+_exportStar(require("./GridLayout"), exports);
+_exportStar(require("./Panel"), exports);
+_exportStar(require("./PanelDrawer"), exports);
+_exportStar(require("./PanelGroupDialog"), exports);
+_exportStar(require("./TimeRangeControls"), exports);
+_exportStar(require("./UnsavedChangesConfirmationDialog"), exports);
+_exportStar(require("./Variables"), 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/DashboardProvider.js

@@ -0,0 +1,95 @@
+// 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 _panelGroupEditorSlice = require("./panel-group-editor-slice");
+const _panelGroupSlice = require("./panel-group-slice");
+const _panelEditorSlice = require("./panel-editor-slice");
+const _panelSlice = require("./panel-slice");
+const _deletePanelGroupSlice = require("./delete-panel-group-slice");
+const _deletePanelSlice = require("./delete-panel-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 createDashboardStore = (0, _react.useCallback)(initStore, [
+        props
+    ]);
+    const [store] = (0, _react.useState)(createDashboardStore(props)); // prevent calling createDashboardStore every time it rerenders
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(DashboardContext.Provider, {
+        value: store,
+        children: props.children
+    });
+}
+function initStore(props) {
+    const { initialState: { dashboardResource , isEditMode  } ,  } = props;
+    const { spec: { layouts , panels , duration  } , metadata ,  } = dashboardResource;
+    const store = (0, _zustand.createStore)()((0, _immer.immer)((0, _middleware.devtools)((...args)=>{
+        const [set] = args;
+        return {
+            ...(0, _panelGroupSlice.createPanelGroupSlice)(layouts)(...args),
+            ...(0, _panelSlice.createPanelSlice)(panels)(...args),
+            ...(0, _panelGroupEditorSlice.createPanelGroupEditorSlice)(...args),
+            ...(0, _deletePanelGroupSlice.createDeletePanelGroupSlice)(...args),
+            ...(0, _panelEditorSlice.createPanelEditorSlice)()(...args),
+            ...(0, _deletePanelSlice.createDeletePanelSlice)()(...args),
+            metadata,
+            defaultTimeRange: {
+                pastDuration: duration
+            },
+            isEditMode: !!isEditMode,
+            setEditMode: (isEditMode)=>set({
+                    isEditMode
+                }),
+            setDashboard: ({ metadata , spec: { panels , layouts  }  })=>{
+                set((state)=>{
+                    state.metadata = metadata;
+                    const { panelGroups , panelGroupOrder  } = (0, _panelGroupSlice.convertLayoutsToPanelGroups)(layouts);
+                    state.panels = panels;
+                    state.panelGroups = panelGroups;
+                    state.panelGroupOrder = panelGroupOrder;
+                });
+            }
+        };
+    })));
+    return store;
+}

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

@@ -0,0 +1,28 @@
+// 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
+});
+Object.defineProperty(exports, "generateId", {
+    enumerable: true,
+    get: ()=>generateId
+});
+function generateId() {
+    if (globalThis.dashboardStoreId === undefined) {
+        globalThis.dashboardStoreId = 0;
+    }
+    return globalThis.dashboardStoreId++;
+}