@perses-dev/dashboards 0.8.1 → 0.10.0

package/dist/cjs/test/testDashboard.js

@@ -1,5 +1,4 @@
-"use strict";
-// Copyright 2021 The Perses Authors
+// 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
@@ -11,7 +10,14 @@
 // 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.
-Object.defineProperty(exports, "__esModule", { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: ()=>_default
+});
 const testDashboard = {
     kind: 'Dashboard',
     metadata: {
@@ -19,113 +25,183 @@ const testDashboard = {
         project: 'perses',
         created_at: '2021-11-09',
         updated_at: '2021-11-09',
-        version: 0,
+        version: 0
     },
     spec: {
-        datasource: { kind: 'Prometheus', global: true, name: 'Public Prometheus Demo Server' },
         duration: '24h',
         variables: [
             {
-                name: 'job',
                 kind: 'TextVariable',
-                options: {
-                    value: 'node',
-                },
+                spec: {
+                    name: 'job',
+                    value: 'node'
+                }
             },
             {
-                name: 'instance',
                 kind: 'TextVariable',
-                options: {
-                    value: 'demo.do.prometheus.io:9100',
-                },
+                spec: {
+                    name: 'instance',
+                    value: 'demo.do.prometheus.io:9100'
+                }
             },
             {
-                name: 'interval',
                 kind: 'TextVariable',
-                options: {
-                    value: '1m',
-                },
-            },
+                spec: {
+                    name: 'interval',
+                    value: '1m'
+                }
+            }
         ],
         panels: {
             cpu: {
-                kind: 'LineChart',
-                display: { name: 'CPU' },
-                options: {
-                    queries: [
-                        {
-                            kind: 'PrometheusGraphQuery',
-                            options: {
-                                query: 'avg without (cpu)(rate(node_cpu_seconds_total{job="node",instance="$instance",mode!="idle"}[$interval]))',
-                            },
-                        },
-                    ],
-                    unit: { kind: '%' },
-                },
+                kind: 'Panel',
+                spec: {
+                    display: {
+                        name: 'CPU'
+                    },
+                    plugin: {
+                        kind: 'TimeSeriesChart',
+                        spec: {
+                            queries: [
+                                {
+                                    kind: 'TimeSeriesQuery',
+                                    spec: {
+                                        plugin: {
+                                            kind: 'PrometheusTimeSeriesQuery',
+                                            spec: {
+                                                query: 'avg without (cpu)(rate(node_cpu_seconds_total{job="node",instance="$instance",mode!="idle"}[$interval]))'
+                                            }
+                                        }
+                                    }
+                                }
+                            ],
+                            unit: {
+                                kind: '%'
+                            }
+                        }
+                    }
+                }
             },
             memory: {
-                kind: 'LineChart',
-                display: { name: 'Memory' },
-                options: {
-                    queries: [
-                        {
-                            kind: 'PrometheusGraphQuery',
-                            options: {
-                                query: 'node_memory_MemTotal_bytes{job="node",instance="$instance"} - node_memory_MemFree_bytes{job="node",instance="$instance"} - node_memory_Buffers_bytes{job="node",instance="$instance"} - node_memory_Cached_bytes{job="node",instance="$instance"}',
-                            },
-                        },
-                        {
-                            kind: 'PrometheusGraphQuery',
-                            options: {
-                                query: 'node_memory_Buffers_bytes{job="node",instance="$instance"}',
-                            },
-                        },
-                        {
-                            kind: 'PrometheusGraphQuery',
-                            options: {
-                                query: 'node_memory_Cached_bytes{job="node",instance="$instance"}',
-                            },
-                        },
-                        {
-                            kind: 'PrometheusGraphQuery',
-                            options: {
-                                query: 'node_memory_MemFree_bytes{job="node",instance="$instance"}',
-                            },
-                        },
-                    ],
-                    unit: { kind: 'Bytes' },
-                },
+                kind: 'Panel',
+                spec: {
+                    display: {
+                        name: 'Memory'
+                    },
+                    plugin: {
+                        kind: 'TimeSeriesChart',
+                        spec: {
+                            queries: [
+                                {
+                                    kind: 'TimeSeriesQuery',
+                                    spec: {
+                                        plugin: {
+                                            kind: 'PrometheusTimeSeriesQuery',
+                                            spec: {
+                                                query: 'node_memory_MemTotal_bytes{job="node",instance="$instance"} - node_memory_MemFree_bytes{job="node",instance="$instance"} - node_memory_Buffers_bytes{job="node",instance="$instance"} - node_memory_Cached_bytes{job="node",instance="$instance"}'
+                                            }
+                                        }
+                                    }
+                                },
+                                {
+                                    kind: 'TimeSeriesQuery',
+                                    spec: {
+                                        plugin: {
+                                            kind: 'PrometheusTimeSeriesQuery',
+                                            spec: {
+                                                query: 'node_memory_Buffers_bytes{job="node",instance="$instance"}'
+                                            }
+                                        }
+                                    }
+                                },
+                                {
+                                    kind: 'TimeSeriesQuery',
+                                    spec: {
+                                        plugin: {
+                                            kind: 'PrometheusTimeSeriesQuery',
+                                            spec: {
+                                                query: 'node_memory_Cached_bytes{job="node",instance="$instance"}'
+                                            }
+                                        }
+                                    }
+                                },
+                                {
+                                    kind: 'TimeSeriesQuery',
+                                    spec: {
+                                        plugin: {
+                                            kind: 'PrometheusTimeSeriesQuery',
+                                            spec: {
+                                                query: 'node_memory_MemFree_bytes{job="node",instance="$instance"}'
+                                            }
+                                        }
+                                    }
+                                }
+                            ],
+                            unit: {
+                                kind: 'Bytes'
+                            }
+                        }
+                    }
+                }
             },
             diskIO: {
-                kind: 'LineChart',
-                display: { name: 'Disk I/O Utilization' },
-                options: {
-                    queries: [
-                        {
-                            kind: 'PrometheusGraphQuery',
-                            options: {
-                                query: 'rate(node_disk_io_time_seconds_total{job="node",instance="$instance",device!~"^(md\\\\d+$|dm-)"}[$interval])',
-                            },
-                        },
-                    ],
-                    unit: { kind: 'Percent' },
-                },
+                kind: 'Panel',
+                spec: {
+                    display: {
+                        name: 'Disk I/O Utilization'
+                    },
+                    plugin: {
+                        kind: 'TimeSeriesChart',
+                        spec: {
+                            queries: [
+                                {
+                                    kind: 'TimeSeriesQuery',
+                                    spec: {
+                                        plugin: {
+                                            kind: 'PrometheusTimeSeriesQuery',
+                                            spec: {
+                                                query: 'rate(node_disk_io_time_seconds_total{job="node",instance="$instance",device!~"^(md\\\\d+$|dm-)"}[$interval])'
+                                            }
+                                        }
+                                    }
+                                }
+                            ],
+                            unit: {
+                                kind: 'Percent'
+                            }
+                        }
+                    }
+                }
             },
             filesystemFullness: {
-                kind: 'LineChart',
-                display: { name: 'Filesystem Fullness' },
-                options: {
-                    queries: [
-                        {
-                            kind: 'PrometheusGraphQuery',
-                            options: {
-                                query: '1 - node_filesystem_free_bytes{job="node",instance="$instance",fstype!="rootfs",mountpoint!~"/(run|var).*",mountpoint!=""} / node_filesystem_size_bytes{job="node",instance="$instance"}',
-                            },
-                        },
-                    ],
-                    unit: { kind: 'Percent' },
-                },
-            },
+                kind: 'Panel',
+                spec: {
+                    display: {
+                        name: 'Filesystem Fullness'
+                    },
+                    plugin: {
+                        kind: 'TimeSeriesChart',
+                        spec: {
+                            queries: [
+                                {
+                                    kind: 'TimeSeriesQuery',
+                                    spec: {
+                                        plugin: {
+                                            kind: 'PrometheusTimeSeriesQuery',
+                                            spec: {
+                                                query: '1 - node_filesystem_free_bytes{job="node",instance="$instance",fstype!="rootfs",mountpoint!~"/(run|var).*",mountpoint!=""} / node_filesystem_size_bytes{job="node",instance="$instance"}'
+                                            }
+                                        }
+                                    }
+                                }
+                            ],
+                            unit: {
+                                kind: 'Percent'
+                            }
+                        }
+                    }
+                }
+            }
         },
         layouts: [
             // Regular Title, no collapse enabled
@@ -134,6 +210,9 @@ const testDashboard = {
                 spec: {
                     display: {
                         title: 'CPU Stats',
+                        collapse: {
+                            open: true
+                        }
                     },
                     items: [
                         // First Row
@@ -142,10 +221,21 @@ const testDashboard = {
                             y: 0,
                             width: 12,
                             height: 4,
-                            content: { $ref: '#/spec/panels/cpu' },
+                            content: {
+                                $ref: '#/spec/panels/cpu'
+                            }
                         },
-                    ],
-                },
+                        {
+                            x: 0,
+                            y: 5,
+                            width: 6,
+                            height: 2,
+                            content: {
+                                $ref: '#/spec/panels/diskIO'
+                            }
+                        }
+                    ]
+                }
             },
             // No title,
             {
@@ -157,10 +247,12 @@ const testDashboard = {
                             y: 0,
                             width: 8,
                             height: 3,
-                            content: { $ref: '#/spec/panels/memory' },
-                        },
-                    ],
-                },
+                            content: {
+                                $ref: '#/spec/panels/memory'
+                            }
+                        }
+                    ]
+                }
             },
             // Collapsed
             {
@@ -169,8 +261,8 @@ const testDashboard = {
                     display: {
                         title: 'Disk Stats',
                         collapse: {
-                            open: false,
-                        },
+                            open: false
+                        }
                     },
                     items: [
                         {
@@ -178,19 +270,23 @@ const testDashboard = {
                             y: 0,
                             width: 6,
                             height: 2,
-                            content: { $ref: '#/spec/panels/diskIO' },
+                            content: {
+                                $ref: '#/spec/panels/diskIO'
+                            }
                         },
                         {
                             x: 18,
                             y: 0,
                             width: 6,
                             height: 2,
-                            content: { $ref: '#/spec/panels/filesystemFullness' },
-                        },
-                    ],
-                },
-            },
-        ],
-    },
+                            content: {
+                                $ref: '#/spec/panels/filesystemFullness'
+                            }
+                        }
+                    ]
+                }
+            }
+        ]
+    }
 };
-exports.default = testDashboard;
+const _default = testDashboard;

package/dist/cjs/utils/functions.js

@@ -1,4 +1,3 @@
-"use strict";
 // 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.
@@ -11,9 +10,14 @@
 // 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.
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.removeWhiteSpacesAndSpecialCharacters = void 0;
-const removeWhiteSpacesAndSpecialCharacters = (str) => {
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "removeWhiteSpacesAndSpecialCharacters", {
+    enumerable: true,
+    get: ()=>removeWhiteSpacesAndSpecialCharacters
+});
+const removeWhiteSpacesAndSpecialCharacters = (str)=>{
     return str.replace(/\s+/g, '');
 };
-exports.removeWhiteSpacesAndSpecialCharacters = removeWhiteSpacesAndSpecialCharacters;

package/dist/cjs/views/ViewDashboard/DashboardApp.js

@@ -1,10 +1,3 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DashboardApp = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
 // 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.
@@ -17,24 +10,57 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // 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.
-const material_1 = require("@mui/material");
-const components_1 = require("@perses-dev/components");
-const components_2 = require("../../components");
-const PanelGroupDialog_1 = __importDefault(require("../../components/PanelGroupDialog/PanelGroupDialog"));
-const PanelDrawer_1 = __importDefault(require("../../components/PanelDrawer/PanelDrawer"));
-const DashboardToolbar_1 = require("../../components/DashboardToolbar");
-const context_1 = require("../../context");
-const DashboardApp = (props) => {
-    const { dashboardResource } = props;
-    const { dashboard } = (0, context_1.useDashboard)();
-    const { panelGroupDialog } = (0, context_1.useDashboardApp)();
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
-            padding: (theme) => theme.spacing(1, 2),
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "DashboardApp", {
+    enumerable: true,
+    get: ()=>DashboardApp
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _components = require("@perses-dev/components");
+const _components1 = require("../../components");
+const _panelGroupDialog = /*#__PURE__*/ _interopRequireDefault(require("../../components/PanelGroupDialog/PanelGroupDialog"));
+const _dashboardToolbar = require("../../components/DashboardToolbar");
+const _deletePanelGroupDialog = /*#__PURE__*/ _interopRequireDefault(require("../../components/PanelGroupDialog/DeletePanelGroupDialog"));
+const _deletePanelDialog = /*#__PURE__*/ _interopRequireDefault(require("../../components/Panel/DeletePanelDialog"));
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const DashboardApp = (props)=>{
+    const { dashboardResource  } = props;
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+        sx: {
+            padding: (theme)=>theme.spacing(1, 0),
             flexGrow: 1,
             overflowX: 'hidden',
             overflowY: 'auto',
             display: 'flex',
-            flexDirection: 'column',
-        }, children: [(0, jsx_runtime_1.jsx)(DashboardToolbar_1.DashboardToolbar, { dashboardName: dashboardResource.metadata.name }), (0, jsx_runtime_1.jsx)(components_1.ErrorBoundary, { FallbackComponent: components_1.ErrorAlert, children: (0, jsx_runtime_1.jsx)(components_2.TemplateVariableList, {}) }), (0, jsx_runtime_1.jsx)(components_1.ErrorBoundary, { FallbackComponent: components_1.ErrorAlert, children: (0, jsx_runtime_1.jsx)(components_2.Dashboard, { spec: dashboard }) }), (0, jsx_runtime_1.jsx)(PanelDrawer_1.default, {}), panelGroupDialog && (0, jsx_runtime_1.jsx)(PanelGroupDialog_1.default, {})] }));
+            flexDirection: 'column'
+        },
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dashboardToolbar.DashboardToolbar, {
+                dashboardName: dashboardResource.metadata.name
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+                sx: {
+                    padding: (theme)=>theme.spacing(2)
+                },
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
+                        FallbackComponent: _components.ErrorAlert,
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.Dashboard, {})
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.PanelDrawer, {}),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panelGroupDialog.default, {}),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_deletePanelGroupDialog.default, {}),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_deletePanelDialog.default, {})
+                ]
+            })
+        ]
+    });
 };
-exports.DashboardApp = DashboardApp;

package/dist/cjs/views/ViewDashboard/ViewDashboard.js

@@ -1,7 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ViewDashboard = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
 // 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.
@@ -14,39 +10,74 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // 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.
-const react_1 = require("react");
-const material_1 = require("@mui/material");
-const core_1 = require("@perses-dev/core");
-const plugin_system_1 = require("@perses-dev/plugin-system");
-const components_1 = require("@perses-dev/components");
-const context_1 = require("../../context");
-const DashboardApp_1 = require("./DashboardApp");
-/**
- * The View for displaying a Dashboard, along with the UI for selecting variable values.
- */
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ViewDashboard", {
+    enumerable: true,
+    get: ()=>ViewDashboard
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _core = require("@perses-dev/core");
+const _pluginSystem = require("@perses-dev/plugin-system");
+const _components = require("@perses-dev/components");
+const _context = require("../../context");
+const _dashboardApp = require("./DashboardApp");
 function ViewDashboard(props) {
-    var _a;
-    const { dashboardResource, sx, ...others } = props;
-    const { spec } = dashboardResource;
-    const { queryString, setQueryString } = (0, plugin_system_1.useQueryString)();
-    const dashboardDuration = (_a = spec.duration) !== null && _a !== void 0 ? _a : '1h';
-    const defaultTimeRange = (0, core_1.getDefaultTimeRange)(dashboardDuration, queryString);
+    const { dashboardResource , datasourceApi , sx , ...others } = props;
+    const { spec  } = dashboardResource;
+    const { queryString , setQueryString  } = (0, _pluginSystem.useQueryString)();
+    var _duration;
+    const dashboardDuration = (_duration = spec.duration) !== null && _duration !== void 0 ? _duration : '1h';
+    const defaultTimeRange = (0, _core.getDefaultTimeRange)(dashboardDuration, queryString);
     // TODO: add reusable sync query string or no-op util
-    (0, react_1.useEffect)(() => {
-        const currentParams = Object.fromEntries([...queryString]);
+    (0, _react.useEffect)(()=>{
+        const currentParams = Object.fromEntries([
+            ...queryString
+        ]);
         // if app does not provide query string implementation, setTimeRange is used instead
         if (!currentParams.start && setQueryString) {
             // default to duration in dashboard definition if start param is not already set
             queryString.set('start', dashboardDuration);
             setQueryString(queryString);
         }
-    }, [dashboardDuration, queryString, setQueryString]);
-    return ((0, jsx_runtime_1.jsx)(context_1.DashboardProvider, { initialState: { dashboardSpec: spec }, children: (0, jsx_runtime_1.jsx)(context_1.TimeRangeProvider, { initialTimeRange: defaultTimeRange, children: (0, jsx_runtime_1.jsx)(context_1.TemplateVariableProvider, { initialVariableDefinitions: spec.variables, children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: (0, components_1.combineSx)({
-                        display: 'flex',
-                        width: '100%',
-                        height: '100%',
-                        position: 'relative',
-                        overflow: 'hidden',
-                    }, sx), ...others, children: (0, jsx_runtime_1.jsx)(components_1.ErrorBoundary, { FallbackComponent: components_1.ErrorAlert, children: (0, jsx_runtime_1.jsx)(DashboardApp_1.DashboardApp, { dashboardResource: dashboardResource }) }) }) }) }) }));
+    }, [
+        dashboardDuration,
+        queryString,
+        setQueryString
+    ]);
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.DatasourceStoreProvider, {
+        dashboardResource: dashboardResource,
+        datasourceApi: datasourceApi,
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.DashboardProvider, {
+            initialState: {
+                dashboardSpec: spec
+            },
+            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.TimeRangeProvider, {
+                initialTimeRange: defaultTimeRange,
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.TemplateVariableProvider, {
+                    initialVariableDefinitions: spec.variables,
+                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                        sx: (0, _components.combineSx)({
+                            display: 'flex',
+                            width: '100%',
+                            height: '100%',
+                            position: 'relative',
+                            overflow: 'hidden'
+                        }, sx),
+                        ...others,
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
+                            FallbackComponent: _components.ErrorAlert,
+                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dashboardApp.DashboardApp, {
+                                dashboardResource: dashboardResource
+                            })
+                        })
+                    })
+                })
+            })
+        })
+    });
 }
-exports.ViewDashboard = ViewDashboard;

package/dist/cjs/views/ViewDashboard/index.js

@@ -1,4 +1,3 @@
-"use strict";
 // 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.
@@ -11,19 +10,19 @@
 // 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.
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./ViewDashboard"), exports);
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_exportStar(require("./ViewDashboard"), 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;
+}