@perses-dev/dashboards 0.8.0 → 0.9.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
@@ -133,7 +209,7 @@ const testDashboard = {
                 kind: 'Grid',
                 spec: {
                     display: {
-                        title: 'CPU Stats',
+                        title: 'CPU Stats'
                     },
                     items: [
                         // First Row
@@ -142,10 +218,12 @@ const testDashboard = {
                             y: 0,
                             width: 12,
                             height: 4,
-                            content: { $ref: '#/spec/panels/cpu' },
-                        },
-                    ],
-                },
+                            content: {
+                                $ref: '#/spec/panels/cpu'
+                            }
+                        }
+                    ]
+                }
             },
             // No title,
             {
@@ -157,10 +235,12 @@ const testDashboard = {
                             y: 0,
                             width: 8,
                             height: 3,
-                            content: { $ref: '#/spec/panels/memory' },
-                        },
-                    ],
-                },
+                            content: {
+                                $ref: '#/spec/panels/memory'
+                            }
+                        }
+                    ]
+                }
             },
             // Collapsed
             {
@@ -169,8 +249,8 @@ const testDashboard = {
                     display: {
                         title: 'Disk Stats',
                         collapse: {
-                            open: false,
-                        },
+                            open: false
+                        }
                     },
                     items: [
                         {
@@ -178,19 +258,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

@@ -0,0 +1,67 @@
+// 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, "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 _context = require("../../context");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const DashboardApp = (props)=>{
+    const { dashboardResource  } = props;
+    const { dashboard  } = (0, _context.useDashboard)();
+    const { panelGroupDialog  } = (0, _context.useDashboardApp)();
+    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: [
+            /*#__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, {
+                            spec: dashboard
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.PanelDrawer, {}),
+                    panelGroupDialog && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_panelGroupDialog.default, {})
+                ]
+            })
+        ]
+    });
+};

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

@@ -0,0 +1,83 @@
+// 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, "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) {
+    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.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 /*#__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
+                            })
+                        })
+                    })
+                })
+            })
+        })
+    });
+}

package/dist/cjs/views/ViewDashboard/index.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.
+"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;
+}

package/dist/cjs/views/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;
+}