@perses-dev/dashboards 0.5.2 → 0.7.1

package/dist/cjs/context/TimeRangeStateProvider.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimeRangeStateProvider = void 0;
+exports.useTimeRangeSetter = exports.TimeRangeSetterContext = exports.TimeRangeStateProvider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 // Copyright 2021 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
@@ -22,14 +22,28 @@ const plugin_system_1 = require("@perses-dev/plugin-system");
  */
 function TimeRangeStateProvider(props) {
     const { initialValue, children } = props;
-    // Use initialValue to populate state (TODO: Will prob need to expose "setter" API eventually)
-    const [timeRange] = (0, react_1.useState)(() => {
-        if ('pastDuration' in initialValue) {
-            return (0, core_1.toAbsoluteTimeRange)(initialValue);
+    const defaultTimeRange = (0, core_1.toAbsoluteTimeRange)(initialValue);
+    const [timeRange, setActiveTimeRange] = (0, react_1.useState)(defaultTimeRange);
+    // TODO: add support for passing relative time ranges in setTimeRange, ex: { from: 'now-1h', to: 'now' }
+    const setTimeRange = (0, react_1.useCallback)((value) => {
+        if (!(0, core_1.isRelativeValue)(value)) {
+            setActiveTimeRange(value);
         }
-        return initialValue;
-    });
-    const ctx = (0, react_1.useMemo)(() => ({ timeRange }), [timeRange]);
-    return (0, jsx_runtime_1.jsx)(plugin_system_1.TimeRangeContext.Provider, { value: ctx, children: children });
+    }, []);
+    const ctx = (0, react_1.useMemo)(() => ({ timeRange, defaultDuration: initialValue.pastDuration }), [timeRange, initialValue]);
+    const setters = (0, react_1.useMemo)(() => ({ setTimeRange }), [setTimeRange]);
+    return ((0, jsx_runtime_1.jsx)(exports.TimeRangeSetterContext.Provider, { value: setters, children: (0, jsx_runtime_1.jsx)(plugin_system_1.TimeRangeContext.Provider, { value: ctx, children: children }) }));
 }
 exports.TimeRangeStateProvider = TimeRangeStateProvider;
+exports.TimeRangeSetterContext = (0, react_1.createContext)(undefined);
+/**
+ * Gets the setters for time range selection provided by the TimeRangeStateProvider at runtime.
+ */
+function useTimeRangeSetter() {
+    const ctx = (0, react_1.useContext)(exports.TimeRangeSetterContext);
+    if (ctx === undefined) {
+        throw new Error('No TimeRangeSetterContext found. Did you forget a Provider?');
+    }
+    return ctx;
+}
+exports.useTimeRangeSetter = useTimeRangeSetter;

package/dist/cjs/context/index.js

@@ -28,3 +28,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./TemplateVariablesProvider"), exports);
 __exportStar(require("./TimeRangeStateProvider"), exports);
+__exportStar(require("./DashboardProvider"), exports);

package/dist/cjs/css/styles.js

@@ -0,0 +1,184 @@
+"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.
+// 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.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    '&.react-grid-layout': {
+        position: 'relative',
+        transition: 'height 200ms ease',
+    },
+    '&.react-grid-item': {
+        transition: 'all 200ms ease',
+        transitionProperty: 'left, top',
+    },
+    '&.react-grid-item img': {
+        pointerEvents: 'none',
+        userSelect: 'none',
+    },
+    '&.react-grid-item.cssTransforms': {
+        transitionProperty: 'transform',
+    },
+    '&.react-grid-item.resizing': {
+        zIndex: 1,
+        willChange: 'width, height',
+    },
+    '&.react-grid-item.react-draggable-dragging': {
+        transition: 'none',
+        zIndex: 3,
+        willChange: 'transform',
+    },
+    '&.react-grid-item.dropping': {
+        visibility: 'hidden',
+    },
+    '&.react-grid-item.react-grid-placeholder': {
+        background: 'red',
+        opacity: 0.2,
+        transitionDuration: '100ms',
+        zIndex: 2,
+        userSelect: 'none',
+        '-webkit-user-select': 'none',
+        '-moz-user-select': 'none',
+        '-ms-user-select': 'none',
+        '-o-user-select': 'none',
+    },
+    '&.react-grid-item > .react-resizable-handle': {
+        position: 'absolute',
+        width: '20px',
+        height: '20px',
+    },
+    '&.react-grid-item > .react-resizable-handle::after': {
+        content: '""',
+        position: 'absolute',
+        right: '3px',
+        bottom: '3px',
+        width: '5px',
+        height: '5px',
+        borderRight: '2px solid rgba(0, 0, 0, 0.4)',
+        borderBottom: '2px solid rgba(0, 0, 0, 0.4)',
+    },
+    '&.react-resizable-hide > .react-resizable-handle': {
+        display: 'none',
+    },
+    '&.react-grid-item > .react-resizable-handle.react-resizable-handle-sw': {
+        bottom: '0',
+        left: '0',
+        cursor: 'sw-resize',
+        transform: 'rotate(90deg)',
+    },
+    '&.react-grid-item > .react-resizable-handle.react-resizable-handle-se': {
+        bottom: '0',
+        right: '0',
+        cursor: 'se-resize',
+    },
+    '&.react-grid-item > .react-resizable-handle.react-resizable-handle-nw': {
+        top: '0',
+        left: '0',
+        cursor: 'nw-resize',
+        transform: 'rotate(180deg)',
+    },
+    '&.react-grid-item > .react-resizable-handle.react-resizable-handle-ne': {
+        top: '0',
+        right: '0',
+        cursor: 'ne-resize',
+        transform: 'rotate(270deg)',
+    },
+    '&.react-grid-item > .react-resizable-handle.react-resizable-handle-w, &.react-grid-item > .react-resizable-handle.react-resizable-handle-e': {
+        top: '50%',
+        marginTop: '-10px',
+        cursor: 'ew-resize',
+    },
+    '&.react-grid-item > .react-resizable-handle.react-resizable-handle-w': {
+        left: '0',
+        transform: 'rotate(135deg)',
+    },
+    '&.react-grid-item > .react-resizable-handle.react-resizable-handle-e': {
+        right: '0',
+        transform: 'rotate(315deg)',
+    },
+    '&.react-grid-item > .react-resizable-handle.react-resizable-handle-n, &.react-grid-item > .react-resizable-handle.react-resizable-handle-s': {
+        left: '50%',
+        marginLeft: '-10px',
+        cursor: 'ns-resize',
+    },
+    '&.react-grid-item > .react-resizable-handle.react-resizable-handle-n': {
+        top: '0',
+        transform: 'rotate(225deg)',
+    },
+    '&.react-grid-item > .react-resizable-handle.react-resizable-handle-s': {
+        bottom: '0',
+        transform: 'rotate(45deg)',
+    },
+    '&.react-resizable': {
+        position: 'relative',
+    },
+    '&.react-resizable-handle': {
+        position: 'absolute',
+        width: '20px',
+        height: '20px',
+        backgroundRepeat: 'no-repeat',
+        backgroundOrigin: 'content-box',
+        boxSizing: 'border-box',
+        backgroundImage: `url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+')`,
+        backgroundPosition: 'bottom right',
+        padding: '0 3px 3px 0',
+    },
+    '&.react-resizable-handle-sw': {
+        bottom: '0',
+        left: '0',
+        cursor: 'sw-resize',
+        transform: 'rotate(90deg)',
+    },
+    '&.react-resizable-handle-se': {
+        bottom: '0',
+        right: '0',
+        cursor: 'se-resize',
+    },
+    '&.react-resizable-handle-nw': {
+        top: '0',
+        left: '0',
+        cursor: 'nw-resize',
+        transform: 'rotate(180deg)',
+    },
+    '&.react-resizable-handle-ne': {
+        top: '0',
+        right: '0',
+        cursor: 'ne-resize',
+        transform: 'rotate(270deg)',
+    },
+    '&.react-resizable-handle-w, .react-resizable-handle-e': {
+        top: '50%',
+        marginTop: '-10px',
+        cursor: 'ew-resize',
+    },
+    '&.react-resizable-handle-w': {
+        left: '0',
+        transform: 'rotate(135deg)',
+    },
+    '&.react-resizable-handle-e': {
+        right: '0',
+        transform: 'rotate(315deg)',
+    },
+    '&.react-resizable-handle-n, .react-resizable-handle-s': {
+        left: '50%',
+        marginLeft: '-10px',
+        cursor: 'ns-resize',
+    },
+    '&.react-resizable-handle-n': {
+        top: '0',
+        transform: 'rotate(225deg)',
+    },
+    '&.react-resizable-handle-s': {
+        bottom: '0',
+        transform: 'rotate(45deg)',
+    },
+};

package/dist/cjs/test/testDashboard.js

@@ -0,0 +1,219 @@
+"use strict";
+// Copyright 2021 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.
+Object.defineProperty(exports, "__esModule", { value: true });
+const testDashboard = {
+    kind: 'Dashboard',
+    metadata: {
+        name: 'Node Stats',
+        project: 'perses',
+        created_at: '2021-11-09',
+        updated_at: '2021-11-09',
+        version: 0,
+    },
+    spec: {
+        datasource: { kind: 'Prometheus', global: true, name: 'Public Prometheus Demo Server' },
+        // TODO: Should duration actually be a time range?
+        duration: '24h',
+        variables: {
+            job: {
+                kind: 'PrometheusLabelValues',
+                options: {
+                    label_name: 'job',
+                    match: ['node_uname_info'],
+                },
+                display: {
+                    label: 'Job',
+                },
+                selection: {
+                    default_value: 'node',
+                },
+            },
+            instance: {
+                kind: 'PrometheusLabelValues',
+                options: {
+                    label_name: 'instance',
+                    match: ['node_uname_info{job="node"}'],
+                },
+                display: {
+                    label: 'Node',
+                },
+                selection: {
+                    default_value: ['demo.do.prometheus.io:9100'],
+                    all_value: '$__all',
+                },
+            },
+            interval: {
+                kind: 'Interval',
+                options: {
+                    values: ['1m', '5m', '10m', '1h'],
+                    auto: {
+                        step_count: 50,
+                        min_interval: '1m',
+                    },
+                },
+                display: {
+                    label: 'Interval',
+                },
+                selection: {
+                    default_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: '%' },
+                },
+            },
+            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' },
+                },
+            },
+            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' },
+                },
+            },
+            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' },
+                },
+            },
+        },
+        layouts: [
+            // Regular Title, no collapse enabled
+            {
+                kind: 'Grid',
+                spec: {
+                    display: {
+                        title: 'CPU Stats',
+                    },
+                    items: [
+                        // First Row
+                        {
+                            x: 0,
+                            y: 0,
+                            width: 12,
+                            height: 4,
+                            content: { $ref: '#/spec/panels/cpu' },
+                        },
+                    ],
+                },
+            },
+            // No title,
+            {
+                kind: 'Grid',
+                spec: {
+                    items: [
+                        {
+                            x: 8,
+                            y: 0,
+                            width: 8,
+                            height: 3,
+                            content: { $ref: '#/spec/panels/memory' },
+                        },
+                    ],
+                },
+            },
+            // Collapsed
+            {
+                kind: 'Grid',
+                spec: {
+                    display: {
+                        title: 'Disk Stats',
+                        collapse: {
+                            open: false,
+                        },
+                    },
+                    items: [
+                        {
+                            x: 0,
+                            y: 0,
+                            width: 6,
+                            height: 2,
+                            content: { $ref: '#/spec/panels/diskIO' },
+                        },
+                        {
+                            x: 18,
+                            y: 0,
+                            width: 6,
+                            height: 2,
+                            content: { $ref: '#/spec/panels/filesystemFullness' },
+                        },
+                    ],
+                },
+            },
+        ],
+    },
+};
+exports.default = testDashboard;

package/dist/cjs/utils/functions.js

@@ -0,0 +1,19 @@
+"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.
+// 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.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.removeWhiteSpacesAndSpecialCharacters = void 0;
+const removeWhiteSpacesAndSpecialCharacters = (str) => {
+    return str.replace(/\s+/g, '');
+};
+exports.removeWhiteSpacesAndSpecialCharacters = removeWhiteSpacesAndSpecialCharacters;

package/dist/cjs/views/DashboardApp.js

@@ -0,0 +1,46 @@
+"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.
+// 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.
+const material_1 = require("@mui/material");
+const components_1 = require("@perses-dev/components");
+const react_1 = require("react");
+const components_2 = require("../components");
+const AddPanel_1 = __importDefault(require("../components/AddPanel/AddPanel"));
+const DashboardToolbar_1 = require("../components/DashboardToolbar");
+const context_1 = require("../context");
+const DashboardApp = (props) => {
+    const { dashboardResource, sx, children, ...others } = props;
+    const [showAddPanel, setShowAddPanel] = (0, react_1.useState)(false);
+    const { dashboard } = (0, context_1.useDashboard)();
+    return ((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.jsxs)(material_1.Box, { sx: {
+                padding: (theme) => theme.spacing(1, 2),
+                flexGrow: 1,
+                overflowX: 'hidden',
+                overflowY: 'auto',
+                display: 'flex',
+                flexDirection: 'column',
+            }, children: [(0, jsx_runtime_1.jsx)(DashboardToolbar_1.DashboardToolbar, { dashboardName: dashboardResource.metadata.name, onAddPanel: () => setShowAddPanel(true) }), (0, jsx_runtime_1.jsx)(components_2.VariableList, { variables: dashboardResource.spec.variables, sx: { margin: (theme) => theme.spacing(1, 0, 2) } }), (0, jsx_runtime_1.jsx)(components_2.Dashboard, { spec: dashboard }), (0, jsx_runtime_1.jsx)(AddPanel_1.default, { isOpen: showAddPanel, onClose: () => setShowAddPanel(false) }), children] }) }));
+};
+exports.DashboardApp = DashboardApp;

package/dist/cjs/views/ViewDashboard.js

@@ -2,38 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ViewDashboard = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-// Copyright 2021 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.
-const material_1 = require("@mui/material");
-const components_1 = require("@perses-dev/components");
 const context_1 = require("../context");
-const components_2 = require("../components");
+const DashboardApp_1 = require("./DashboardApp");
 /**
  * The View for displaying a Dashboard, along with the UI for selecting variable values.
  */
 function ViewDashboard(props) {
-    const { dashboardResource, sx, children, ...others } = props;
-    return ((0, jsx_runtime_1.jsx)(context_1.TimeRangeStateProvider, { initialValue: { pastDuration: dashboardResource.spec.duration }, children: (0, jsx_runtime_1.jsx)(context_1.TemplateVariablesProvider, { variableDefinitions: dashboardResource.spec.variables, children: (0, jsx_runtime_1.jsxs)(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.jsxs)(material_1.Box, { sx: {
-                            padding: (theme) => theme.spacing(1, 2),
-                            flexGrow: 1,
-                            overflowX: 'hidden',
-                            overflowY: 'auto',
-                        }, children: [(0, jsx_runtime_1.jsx)(components_2.Dashboard, { spec: dashboardResource.spec }), children] }), (0, jsx_runtime_1.jsx)(components_2.VariableOptionsDrawer, { variables: dashboardResource.spec.variables })] }) }) }));
+    const { dashboardResource: { spec }, children, } = props;
+    const pastDuration = spec.duration;
+    return ((0, jsx_runtime_1.jsx)(context_1.DashboardProvider, { initialState: { dashboardSpec: spec }, children: (0, jsx_runtime_1.jsx)(context_1.TimeRangeStateProvider, { initialValue: { pastDuration }, children: (0, jsx_runtime_1.jsx)(context_1.TemplateVariablesProvider, { variableDefinitions: spec.variables, children: (0, jsx_runtime_1.jsx)(DashboardApp_1.DashboardApp, { ...props, children: children }) }) }) }));
 }
 exports.ViewDashboard = ViewDashboard;

package/dist/components/AddPanel/AddPanel.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface AddPanelProps {
+    isOpen: boolean;
+    onClose: () => void;
+}
+declare const AddPanel: ({ isOpen, onClose }: AddPanelProps) => JSX.Element;
+export default AddPanel;
+//# sourceMappingURL=AddPanel.d.ts.map

package/dist/components/AddPanel/AddPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddPanel.d.ts","sourceRoot":"","sources":["../../../src/components/AddPanel/AddPanel.tsx"],"names":[],"mappings":";AA+BA,UAAU,aAAa;IACrB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,QAAA,MAAM,QAAQ,wBAAyB,aAAa,gBA6EnD,CAAC;AA0BF,eAAe,QAAQ,CAAC"}

package/dist/components/AddPanel/AddPanel.js

@@ -0,0 +1 @@
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{MenuItem,Stack,Select,TextField,InputLabel,FormControl,Grid,Box,Button,Typography}from"@mui/material";import{Drawer}from"@perses-dev/components";import{useState}from"react";import{useLayouts,usePanels}from"../../context";import{removeWhiteSpacesAndSpecialCharacters}from"../../utils/functions";const AddPanel=({isOpen:e,onClose:t})=>{const{layouts:r,addItemToLayout:n}=useLayouts(),{addPanel:a}=usePanels(),[s,o]=useState(0),[i,l]=useState(""),[d,c]=useState("");return _jsx(Drawer,{isOpen:e,onClose:t,children:_jsxs("form",{onSubmit:e=>{var o;e.preventDefault();const l=removeWhiteSpacesAndSpecialCharacters(i);a(l,{kind:"EmptyChart",display:{name:i,description:d},options:{}});let c=0;null===(o=r[s])||void 0===o||o.spec.items.forEach((e=>{e.y>c&&(c=e.y)})),n(s,{x:0,y:c+1,width:12,height:6,content:{$ref:`#/spec/panels/${l}`}}),t()},children:[_jsx(AddPanelHeader,{onClose:t}),_jsxs(Grid,{container:!0,spacing:2,children:[_jsx(Grid,{item:!0,xs:4,children:_jsxs(FormControl,{children:[_jsx(InputLabel,{id:"select-group",children:"Group"}),_jsx(Select,{required:!0,labelId:"select-group",label:"Group",value:s,onChange:e=>{o(e.target.value)},children:r.map(((e,t)=>{var r;return _jsx(MenuItem,{value:t,children:(null===(r=e.spec.display)||void 0===r?void 0:r.title)||`Group ${t+1}`},t)}))})]})}),_jsx(Grid,{item:!0,xs:8,children:_jsxs(Stack,{spacing:2,sx:{flexGrow:"1"},children:[_jsx(FormControl,{children:_jsx(TextField,{required:!0,label:"Panel Name",variant:"outlined",onChange:e=>{l(e.target.value)}})}),_jsx(FormControl,{children:_jsx(TextField,{label:"Description",variant:"outlined",onChange:e=>{c(e.target.value)}})})]})})]})]})})},AddPanelHeader=({onClose:e})=>_jsxs(Box,{sx:{display:"flex",alignItems:"center",marginBottom:e=>e.spacing(2),paddingBottom:e=>e.spacing(2),borderBottom:e=>`1px solid ${e.palette.grey[100]}`},children:[_jsx(Typography,{variant:"h5",children:"Add Panel"}),_jsxs(Stack,{direction:"row",spacing:1,sx:{marginLeft:"auto"},children:[_jsx(Button,{type:"submit",variant:"contained",children:"Add Panel"}),_jsx(Button,{variant:"outlined",onClick:e,children:"Cancel"})]})]});export default AddPanel;

package/dist/components/DashboardToolbar.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface DashboardToolbarProps {
+    dashboardName: string;
+    onAddPanel: () => void;
+}
+export declare const DashboardToolbar: (props: DashboardToolbarProps) => JSX.Element;
+//# sourceMappingURL=DashboardToolbar.d.ts.map

package/dist/components/DashboardToolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../src/components/DashboardToolbar.tsx"],"names":[],"mappings":";AAoBA,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,gBA4E5D,CAAC"}

package/dist/components/DashboardToolbar.js

@@ -0,0 +1 @@
+import{jsxs as _jsxs,jsx as _jsx,Fragment as _Fragment}from"react/jsx-runtime";import{Toolbar,Typography,Stack,Button,Box}from"@mui/material";import PencilIcon from"mdi-material-ui/PencilOutline";import AddIcon from"mdi-material-ui/Plus";import{useEditMode,useLayouts}from"../context";import{TimeRangeControls}from"../components";export const DashboardToolbar=i=>{const{dashboardName:t,onAddPanel:n}=i,{isEditMode:o,setEditMode:s}=useEditMode(),{addLayout:a}=useLayouts();return _jsx(Toolbar,{disableGutters:!0,sx:{display:"block",padding:i=>i.spacing(2,0)},children:o?_jsxs(_Fragment,{children:[_jsxs(Box,{sx:{display:"flex",width:"100%"},children:[_jsxs(Typography,{variant:"h2",children:["Edit ",t]}),_jsxs(Stack,{direction:"row",spacing:1,sx:{marginLeft:"auto"},children:[_jsx(TimeRangeControls,{}),_jsx(Button,{variant:"outlined",onClick:()=>{s(!1)},children:"Cancel"}),_jsx(Button,{variant:"contained",children:"Save"})]})]}),_jsxs(Stack,{direction:"row",spacing:1,sx:{display:"flex",justifyContent:"flex-end",width:"100%",padding:i=>i.spacing(2,0)},children:[_jsx(Button,{startIcon:_jsx(AddIcon,{}),onClick:()=>{a({kind:"Grid",spec:{display:{title:"New Group",collapse:{open:!0}},items:[]}})},children:"Add Group"}),_jsx(Button,{startIcon:_jsx(AddIcon,{}),onClick:n,children:"Add Panel"})]})]}):_jsxs(Box,{sx:{display:"flex",width:"100%"},children:[_jsx(Typography,{variant:"h2",children:t}),_jsxs(Stack,{direction:"row",spacing:2,sx:{marginLeft:"auto"},children:[_jsx(TimeRangeControls,{}),_jsx(Button,{variant:"contained",startIcon:_jsx(PencilIcon,{}),onClick:()=>{s(!0)},sx:{marginLeft:"auto"},children:"Edit"})]})]})})};

package/dist/components/GridLayout/GridLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GridLayout.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridLayout.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAO,QAAQ,EAAY,MAAM,eAAe,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAKtE,MAAM,WAAW,eAAgB,SAAQ,QAAQ;IAC/C,UAAU,EAAE,cAAc,CAAC;IAC3B,qBAAqB,EAAE,CAAC,UAAU,EAAE,kBAAkB,KAAK,KAAK,CAAC,SAAS,CAAC;CAC5E;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAoEhD"}
+{"version":3,"file":"GridLayout.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridLayout.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAO,QAAQ,EAA0B,MAAM,eAAe,CAAC;AACtE,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAOtE,MAAM,WAAW,eAAgB,SAAQ,QAAQ;IAC/C,UAAU,EAAE,cAAc,CAAC;IAC3B,qBAAqB,EAAE,CAAC,UAAU,EAAE,kBAAkB,KAAK,KAAK,CAAC,SAAS,CAAC;CAC5E;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAsDhD"}

package/dist/components/GridLayout/GridLayout.js

@@ -1 +1 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useState}from"react";import{Box,Collapse}from"@mui/material";import{GridTitle}from"./GridTitle";const COLUMNS=24;export function GridLayout(i){var s,o,e;const{definition:{spec:t},renderGridItemContent:n,...l}=i,[r,a]=useState(null===(e=null===(o=null===(s=t.display)||void 0===s?void 0:s.collapse)||void 0===o?void 0:o.open)||void 0===e||e),p=[];let d=1;return t.items.forEach(((i,s)=>{const o=24/i.width,e=Math.floor(i.height*o);p.push(_jsx(Box,{sx:{gridColumn:{xs:"1 / span 24",sm:`${i.x+1} / span ${i.width}`},gridRow:{xs:`${d} / span ${e}`,sm:`${i.y+1} / span ${i.height}`}},children:n(i)},s)),d+=e})),_jsxs(Box,{...l,component:"section",sx:{"& + &":{marginTop:i=>i.spacing(1)}},children:[void 0!==t.display&&_jsx(GridTitle,{title:t.display.title,collapse:void 0===t.display.collapse?void 0:{isOpen:r,onToggleOpen:()=>a((i=>!i))}}),_jsx(Collapse,{in:r,unmountOnExit:!0,children:_jsx(Box,{sx:{display:"grid",gridTemplateColumns:"repeat(24, 1fr)",gridAutoRows:{xs:24,sm:36},columnGap:i=>i.spacing(1),rowGap:i=>i.spacing(1)},children:p})})]})}
+import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";import{useState}from"react";import{Responsive,WidthProvider}from"react-grid-layout";import{Box,Collapse,GlobalStyles}from"@mui/material";import styles from"../../css/styles";import{useEditMode}from"../../context";import{GridTitle}from"./GridTitle";const ResponsiveGridLayout=WidthProvider(Responsive);export function GridLayout(s){var e,i,o;const{definition:{spec:t},renderGridItemContent:l,...r}=s,[d,a]=useState(null===(o=null===(i=null===(e=t.display)||void 0===e?void 0:e.collapse)||void 0===i?void 0:i.open)||void 0===o||o),{isEditMode:n}=useEditMode(),m=[];return t.items.forEach(((s,e)=>{const{x:i,y:o,width:t,height:r}=s;m.push(_jsx("div",{"data-grid":{x:i,y:o,w:t,h:r},children:l(s)},e))})),_jsxs(_Fragment,{children:[_jsx(GlobalStyles,{styles}),_jsxs(Box,{...r,component:"section",sx:{"& + &":{marginTop:s=>s.spacing(1)}},children:[void 0!==t.display&&_jsx(GridTitle,{title:t.display.title,collapse:void 0===t.display.collapse?void 0:{isOpen:d,onToggleOpen:()=>a((s=>!s))}}),_jsx(Collapse,{in:d,unmountOnExit:!0,children:_jsx(ResponsiveGridLayout,{className:"layout",breakpoints:{lg:1200,md:996,sm:768,xs:480,xxs:0},cols:{lg:24,md:24,sm:24,xs:24,xxs:2},rowHeight:30,draggableHandle:".drag-handle",resizeHandles:["se"],isDraggable:n,isResizable:n,children:m})})]})]})}

package/dist/components/Panel/Panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.tsx"],"names":[],"mappings":";AAkBA,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAa,SAAS,EAAuC,MAAM,eAAe,CAAC;AAG1F,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,UAAU,EAAE,eAAe,CAAC;CAC7B;AAED;;GAEG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,eA2FtC"}
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.tsx"],"names":[],"mappings":";AAkBA,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAGL,SAAS,EAOV,MAAM,eAAe,CAAC;AAOvB,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,UAAU,EAAE,eAAe,CAAC;CAC7B;AAED;;GAEG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,eAoHtC"}

package/dist/components/Panel/Panel.js

@@ -1 +1 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useState,useMemo}from"react";import useResizeObserver from"use-resize-observer";import{useInView}from"react-intersection-observer";import{PluginBoundary,PanelComponent}from"@perses-dev/plugin-system";import{ErrorAlert,InfoTooltip,TooltipPlacement}from"@perses-dev/components";import{Box,Card,CardHeader,CardContent,Typography}from"@mui/material";import InformationOutlineIcon from"mdi-material-ui/InformationOutline";export function Panel(e){const{definition:i,...o}=e,[r,n]=useState(null),{width:t,height:s}=useResizeObserver({ref:r}),a=useMemo((()=>{if(void 0!==t&&void 0!==s)return{width:t,height:s}}),[t,s]),{ref:l,inView:d}=useInView({threshold:.3,initialInView:!1,triggerOnce:!0});return _jsxs(Card,{ref:l,sx:{...o.sx,width:"100%",height:"100%",display:"flex",flexFlow:"column nowrap"},variant:"outlined",...o,children:[_jsx(CardHeader,{title:_jsxs(Box,{sx:{display:"flex",alignItems:"center"},children:[_jsx(Typography,{component:"h2",variant:"body2",fontWeight:e=>e.typography.fontWeightMedium,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",children:i.display.name}),i.display.description&&_jsx(InfoTooltip,{id:"info-tooltip",description:i.display.description,placement:TooltipPlacement.Right,children:_jsx(InformationOutlineIcon,{"aria-describedby":"info-tooltip","aria-hidden":!1,sx:{fontSize:"1rem",position:"relative",left:"4px",cursor:"pointer"}})})]}),sx:{display:"block",padding:e=>e.spacing(1,1.5),borderBottom:e=>`solid 1px ${e.palette.divider}`}}),_jsx(CardContent,{sx:{position:"relative",overflow:"hidden",flexGrow:1,padding:e=>e.spacing(1.5),":last-child":{padding:e=>e.spacing(1.5)}},ref:n,children:_jsx(PluginBoundary,{loadingFallback:"Loading...",ErrorFallbackComponent:ErrorAlert,children:!0===d&&_jsx(PanelComponent,{definition:i,contentDimensions:a})})})]})}
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useState,useMemo}from"react";import useResizeObserver from"use-resize-observer";import{useInView}from"react-intersection-observer";import{PluginBoundary,PanelComponent}from"@perses-dev/plugin-system";import{ErrorAlert,InfoTooltip,TooltipPlacement}from"@perses-dev/components";import{Box,Card,CardHeader,CardContent,Typography,IconButton as MuiIconButton,Stack,styled}from"@mui/material";import InformationOutlineIcon from"mdi-material-ui/InformationOutline";import PencilIcon from"mdi-material-ui/Pencil";import MenuIcon from"mdi-material-ui/DotsVertical";import DragIcon from"mdi-material-ui/Drag";import{useEditMode}from"../../context";export function Panel(e){const{definition:i,...o}=e,[n,r]=useState(null),{width:t,height:a}=useResizeObserver({ref:n}),s=useMemo((()=>{if(void 0!==t&&void 0!==a)return{width:t,height:a}}),[t,a]),{ref:l,inView:d}=useInView({threshold:.3,initialInView:!1,triggerOnce:!0}),{isEditMode:c}=useEditMode();return _jsxs(Card,{ref:l,sx:{...o.sx,width:"100%",height:"100%",display:"flex",flexFlow:"column nowrap"},variant:"outlined",...o,children:[_jsx(CardHeader,{title:_jsxs(Box,{sx:{display:"flex",alignItems:"center",minHeight:"24px"},children:[_jsx(Typography,{component:"h2",variant:"body2",fontWeight:e=>e.typography.fontWeightMedium,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",children:i.display.name}),_jsxs(Box,{sx:{display:"flex",alignItems:"center",marginLeft:"auto"},children:[!c&&i.display.description&&_jsx(InfoTooltip,{id:"info-tooltip",description:i.display.description,placement:TooltipPlacement.Bottom,children:_jsx(InformationOutlineIcon,{"aria-describedby":"info-tooltip","aria-hidden":!1,fontSize:"small",sx:{cursor:"pointer"}})}),c&&_jsxs(Stack,{direction:"row",alignItems:"center",spacing:.5,children:[_jsx(IconButton,{"aria-label":"drag handle",size:"small",children:_jsx(DragIcon,{className:"drag-handle",sx:{cursor:"grab"}})}),_jsx(IconButton,{"aria-label":"edit panel",size:"small",children:_jsx(PencilIcon,{})}),_jsx(IconButton,{"aria-label":"more",size:"small",children:_jsx(MenuIcon,{})})]})]})]}),sx:{display:"block",padding:e=>e.spacing(1,1.5),borderBottom:e=>`solid 1px ${e.palette.divider}`}}),_jsx(CardContent,{sx:{position:"relative",overflow:"hidden",flexGrow:1,padding:e=>e.spacing(1.5),":last-child":{padding:e=>e.spacing(1.5)}},ref:r,children:_jsx(PluginBoundary,{loadingFallback:"Loading...",ErrorFallbackComponent:ErrorAlert,children:!0===d&&_jsx(PanelComponent,{definition:i,contentDimensions:s})})})]})}const IconButton=styled(MuiIconButton)((({theme:e})=>({borderRadius:e.shape.borderRadius,padding:"4px"})));