@perses-dev/dashboards 0.6.0 → 0.7.0

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.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',
-                    }, children: [(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: dashboardResource.spec }), children] }) }) }) }));
+    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

@@ -1,4 +1,6 @@
 /// <reference types="react" />
+import 'react-grid-layout/css/styles.css';
+import 'react-resizable/css/styles.css';
 import { BoxProps } from '@mui/material';
 import { GridDefinition, GridItemDefinition } from '@perses-dev/core';
 export interface GridLayoutProps extends BoxProps {

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":";AAYA,OAAO,kCAAkC,CAAC;AAC1C,OAAO,gCAAgC,CAAC;AAIxC,OAAO,EAAO,QAAQ,EAAY,MAAM,eAAe,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAMtE,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,eAmDhD"}

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}from"react/jsx-runtime";import"react-grid-layout/css/styles.css";import"react-resizable/css/styles.css";import{useState}from"react";import{Responsive,WidthProvider}from"react-grid-layout";import{Box,Collapse}from"@mui/material";import{useEditMode}from"../../context";import{GridTitle}from"./GridTitle";const ResponsiveGridLayout=WidthProvider(Responsive);export function GridLayout(s){var i,e,o;const{definition:{spec:t},renderGridItemContent:r,...d}=s,[l,a]=useState(null===(o=null===(e=null===(i=t.display)||void 0===i?void 0:i.collapse)||void 0===e?void 0:e.open)||void 0===o||o),{isEditMode:n}=useEditMode(),p=[];return t.items.forEach(((s,i)=>{const{x:e,y:o,width:t,height:d}=s;p.push(_jsx("div",{"data-grid":{x:e,y:o,w:t,h:d},children:r(s)},i))})),_jsxs(Box,{...d,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:l,onToggleOpen:()=>a((s=>!s))}}),_jsx(Collapse,{in:l,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:p})})]})}

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"})));

package/dist/components/Panel/Panel.test.js

@@ -1 +1 @@
-import{jsx as _jsx}from"react/jsx-runtime";import{PluginRegistry}from"@perses-dev/plugin-system";import"intersection-observer";import{screen}from"@testing-library/react";import{renderWithContext,mockPluginRegistryProps}from"../../test";import{Panel}from"./Panel";const FAKE_PANEL_PLUGIN={pluginType:"Panel",kind:"FakePanel",plugin:{PanelComponent:()=>_jsx("div",{role:"figure",children:"FakePanel chart"})}};describe("Panel",(()=>{let e;beforeEach((()=>{e={definition:{display:{name:"Fake Panel",description:"This is a fake panel"},kind:"FakePanel",options:{}}}})),it("should render name and info icon",(async()=>{(()=>{const{addMockPlugin:n,pluginRegistryProps:i}=mockPluginRegistryProps();n(FAKE_PANEL_PLUGIN),renderWithContext(_jsx(PluginRegistry,{...i,children:_jsx(Panel,{...e})}))})(),await screen.findByText("Fake Panel"),screen.queryByLabelText("info-tooltip")}))}));
+import{jsx as _jsx}from"react/jsx-runtime";import{PluginRegistry}from"@perses-dev/plugin-system";import"intersection-observer";import{screen}from"@testing-library/react";import{renderWithContext,mockPluginRegistryProps}from"../../test";import testDashboard from"../../test/testDashboard";import{DashboardProvider}from"../../context";import{Panel}from"./Panel";const FAKE_PANEL_PLUGIN={pluginType:"Panel",kind:"FakePanel",plugin:{PanelComponent:()=>_jsx("div",{role:"figure",children:"FakePanel chart"})}};describe("Panel",(()=>{let e,r;beforeEach((()=>{e={definition:{display:{name:"Fake Panel",description:"This is a fake panel"},kind:"FakePanel",options:{}}},r={isEditMode:!1,dashboardSpec:testDashboard.spec}}));const i=r=>{const{addMockPlugin:i,pluginRegistryProps:n}=mockPluginRegistryProps();i(FAKE_PANEL_PLUGIN),renderWithContext(_jsx(DashboardProvider,{initialState:r,children:_jsx(PluginRegistry,{...n,children:_jsx(Panel,{...e})})}))};it("should render name and info icon",(async()=>{i(r),await screen.findByText("Fake Panel"),screen.queryByLabelText("info-tooltip")})),it("should render edit icons when in edit mode",(async()=>{r.isEditMode=!0,i(r),await screen.queryByLabelText("drag handle"),screen.queryByLabelText("edit panel"),screen.queryByLabelText("more")}))}));

package/dist/components/TimeRangeControls.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { TimeOption } from '@perses-dev/components';
+export declare const TIME_OPTIONS: TimeOption[];
+export declare function TimeRangeControls(): JSX.Element;
+//# sourceMappingURL=TimeRangeControls.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimeRangeControls.d.ts","sourceRoot":"","sources":["../../src/components/TimeRangeControls.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAyC,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAc3F,eAAO,MAAM,YAAY,EAAE,UAAU,EAUpC,CAAC;AAIF,wBAAgB,iBAAiB,gBAsEhC"}

package/dist/components/TimeRangeControls.js

@@ -0,0 +1 @@
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useRef,useState}from"react";import{Box,FormControl,InputLabel,Popover,Stack}from"@mui/material";import{sub}from"date-fns";import{AbsoluteTimePicker,TimeRangeSelector}from"@perses-dev/components";import{parseDurationString,toAbsoluteTimeRange,isRelativeValue}from"@perses-dev/core";import{useTimeRange}from"@perses-dev/plugin-system";import{useTimeRangeSetter}from"../context/TimeRangeStateProvider";export const TIME_OPTIONS=[{value:{pastDuration:"5m"},display:"Last 5 minutes"},{value:{pastDuration:"15m"},display:"Last 15 minutes"},{value:{pastDuration:"30m"},display:"Last 30 minutes"},{value:{pastDuration:"1h"},display:"Last 1 hour"},{value:{pastDuration:"6h"},display:"Last 6 hours"},{value:{pastDuration:"12h"},display:"Last 12 hours"},{value:{pastDuration:"24h"},display:"Last 1 day"},{value:{pastDuration:"7d"},display:"Last 7 days"},{value:{pastDuration:"14d"},display:"Last 14 days"}];const FORM_CONTROL_LABEL="Time Range";export function TimeRangeControls(){const{setTimeRange:e}=useTimeRangeSetter(),{defaultDuration:t}=useTimeRange(),a=parseDurationString(t),[s,i]=useState({pastDuration:t}),[n,o]=useState({start:sub(new Date,{...a}),end:new Date}),[r,u]=useState(!1),l=useRef();return _jsxs(Stack,{direction:"row",spacing:1,children:[_jsx(Popover,{anchorEl:l.current,anchorOrigin:{vertical:"bottom",horizontal:"center"},open:r,onClose:()=>u(!1),sx:e=>({padding:e.spacing(2)}),children:_jsx(AbsoluteTimePicker,{initialTimeRange:n,onChange:t=>{e(t),isRelativeValue(t)||o({start:t.start,end:t.end}),i(t),u(!1)}})}),_jsxs(FormControl,{fullWidth:!0,children:[_jsx(InputLabel,{children:"Time Range"}),_jsx(Box,{ref:l,children:_jsx(TimeRangeSelector,{inputLabel:"Time Range",timeOptions:TIME_OPTIONS,value:s,onSelectChange:t=>{const a={pastDuration:t.target.value,end:new Date};i(a);const s=toAbsoluteTimeRange(a);e(s),o(s),u(!1)},onCustomClick:()=>{u(!0)}})})]})]})}

package/dist/components/index.d.ts

@@ -1,6 +1,7 @@
 export * from './Dashboard';
 export * from './GridLayout';
 export * from './Panel/Panel';
+export * from './TimeRangeControls';
 export * from './VariableAutocomplete';
 export * from './VariableList';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAaA,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,wBAAwB,CAAC;AACvC,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAaA,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,gBAAgB,CAAC"}

package/dist/components/index.js

@@ -1 +1 @@
-export*from"./Dashboard";export*from"./GridLayout";export*from"./Panel/Panel";export*from"./VariableAutocomplete";export*from"./VariableList";
+export*from"./Dashboard";export*from"./GridLayout";export*from"./Panel/Panel";export*from"./TimeRangeControls";export*from"./VariableAutocomplete";export*from"./VariableList";

package/dist/context/DashboardProvider.d.ts

@@ -0,0 +1,45 @@
+/// <reference types="react" />
+import { DashboardSpec, GridItemDefinition, LayoutDefinition, PanelDefinition } from '@perses-dev/core';
+interface DashboardState {
+    dashboard: DashboardSpec;
+    isEditMode: boolean;
+    layouts: LayoutDefinition[];
+    panels: Record<string, PanelDefinition>;
+}
+interface DashboardActions {
+    setEditMode: (isEditMode: boolean) => void;
+    setLayouts: (layouts: LayoutDefinition[]) => void;
+    addLayout: (layout: LayoutDefinition) => void;
+    addItemToLayout: (index: number, item: GridItemDefinition) => void;
+    setPanels: (panels: Record<string, PanelDefinition>) => void;
+    addPanel: (name: string, panel: PanelDefinition) => void;
+}
+export declare type DashboardStoreState = DashboardState & DashboardActions;
+export interface DashboardStoreProps {
+    dashboardSpec: DashboardSpec;
+    isEditMode?: boolean;
+}
+export interface DashboardProviderProps {
+    initialState: DashboardStoreProps;
+    children?: React.ReactNode;
+}
+export declare function usePanels(): {
+    panels: Record<string, PanelDefinition<import("@perses-dev/core").JsonObject>>;
+    addPanel: (name: string, panel: PanelDefinition<import("@perses-dev/core").JsonObject>) => void;
+};
+export declare function useLayouts(): {
+    layouts: import("@perses-dev/core").GridDefinition[];
+    setLayouts: (layouts: import("@perses-dev/core").GridDefinition[]) => void;
+    addLayout: (layout: import("@perses-dev/core").GridDefinition) => void;
+    addItemToLayout: (index: number, item: GridItemDefinition) => void;
+};
+export declare function useEditMode(): {
+    isEditMode: boolean;
+    setEditMode: (isEditMode: boolean) => void;
+};
+export declare function useDashboard(): {
+    dashboard: DashboardSpec;
+};
+export declare function DashboardProvider(props: DashboardProviderProps): JSX.Element;
+export {};
+//# sourceMappingURL=DashboardProvider.d.ts.map

package/dist/context/DashboardProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardProvider.d.ts","sourceRoot":"","sources":["../../src/context/DashboardProvider.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAExG,UAAU,cAAc;IACtB,SAAS,EAAE,aAAa,CAAC;IACzB,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;CACzC;AAED,UAAU,gBAAgB;IACxB,WAAW,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,UAAU,EAAE,CAAC,OAAO,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAClD,SAAS,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC9C,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACnE,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,KAAK,IAAI,CAAC;IAC7D,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;CAC1D;AAED,oBAAY,mBAAmB,GAAG,cAAc,GAAG,gBAAgB,CAAC;AAEpE,MAAM,WAAW,mBAAmB;IAClC,aAAa,EAAE,aAAa,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AACD,MAAM,WAAW,sBAAsB;IACrC,YAAY,EAAE,mBAAmB,CAAC;IAClC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAID,wBAAgB,SAAS;;;EAGxB;AAED,wBAAgB,UAAU;;;;;EAUzB;AAED,wBAAgB,WAAW;;;EAG1B;AAED,wBAAgB,YAAY;;EAU3B;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eA4C9D"}

package/dist/context/DashboardProvider.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import create from"zustand";import createZustandContext from"zustand/context";import produce from"immer";const{Provider,useStore}=createZustandContext();export function usePanels(){const{panels:t,addPanel:e}=useStore((({panels:t,addPanel:e})=>({panels:t,addPanel:e})));return{panels:t,addPanel:e}}export function useLayouts(){const{layouts:t,setLayouts:e,addLayout:o,addItemToLayout:a}=useStore((({layouts:t,setLayouts:e,addLayout:o,addItemToLayout:a})=>({layouts:t,setLayouts:e,addLayout:o,addItemToLayout:a})));return{layouts:t,setLayouts:e,addLayout:o,addItemToLayout:a}}export function useEditMode(){const{isEditMode:t,setEditMode:e}=useStore((({isEditMode:t,setEditMode:e})=>({isEditMode:t,setEditMode:e})));return{isEditMode:t,setEditMode:e}}export function useDashboard(){return{dashboard:useStore((t=>produce(t.dashboard,(e=>{e.panels=t.panels,e.layouts=t.layouts}))))}}export function DashboardProvider(t){const{children:e,initialState:{dashboardSpec:o,isEditMode:a}}=t,{layouts:d,panels:s}=o;return _jsx(Provider,{createStore:()=>create((t=>({layouts:d,panels:s,dashboard:o,isEditMode:!!a,setEditMode:e=>t({isEditMode:e}),setLayouts:e=>t({layouts:e}),addLayout:e=>t(produce((t=>{t.layouts.push(e)}))),addItemToLayout:(e,o)=>t(produce((t=>{t.layouts[e].spec.items.push(o)}))),setPanels:e=>t({panels:e}),addPanel:(e,o)=>{t(produce((t=>{t.panels[e]=o}),{}))}}))),children:e})}

package/dist/context/TimeRangeStateProvider.d.ts

@@ -1,11 +1,22 @@
 /// <reference types="react" />
-import { AbsoluteTimeRange, RelativeTimeRange } from '@perses-dev/core';
+import { TimeRangeValue, RelativeTimeRange } from '@perses-dev/core';
 export interface TimeRangeProviderProps {
-    initialValue: AbsoluteTimeRange | RelativeTimeRange;
+    initialValue: RelativeTimeRange;
     children?: React.ReactNode;
 }
 /**
  * Provider implementation that supplies the TimeRangeState at runtime.
  */
 export declare function TimeRangeStateProvider(props: TimeRangeProviderProps): JSX.Element;
+/**
+ * Setters for manipulating time range state.
+ */
+export interface TimeRangeSetter {
+    setTimeRange: (value: TimeRangeValue) => void;
+}
+export declare const TimeRangeSetterContext: import("react").Context<TimeRangeSetter | undefined>;
+/**
+ * Gets the setters for time range selection provided by the TimeRangeStateProvider at runtime.
+ */
+export declare function useTimeRangeSetter(): TimeRangeSetter;
 //# sourceMappingURL=TimeRangeStateProvider.d.ts.map

package/dist/context/TimeRangeStateProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeRangeStateProvider.d.ts","sourceRoot":"","sources":["../../src/context/TimeRangeStateProvider.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAuB,MAAM,kBAAkB,CAAC;AAG7F,MAAM,WAAW,sBAAsB;IACrC,YAAY,EAAE,iBAAiB,GAAG,iBAAiB,CAAC;IACpD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,sBAAsB,eAcnE"}
+{"version":3,"file":"TimeRangeStateProvider.d.ts","sourceRoot":"","sources":["../../src/context/TimeRangeStateProvider.tsx"],"names":[],"mappings":";AAcA,OAAO,EACL,cAAc,EAEd,iBAAiB,EAGlB,MAAM,kBAAkB,CAAC;AAG1B,MAAM,WAAW,sBAAsB;IACrC,YAAY,EAAE,iBAAiB,CAAC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,sBAAsB,eAqBnE;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,YAAY,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;CAC/C;AAED,eAAO,MAAM,sBAAsB,sDAAwD,CAAC;AAE5F;;GAEG;AACH,wBAAgB,kBAAkB,oBAMjC"}

package/dist/context/TimeRangeStateProvider.js

@@ -1 +1 @@
-import{jsx as _jsx}from"react/jsx-runtime";import{useState,useMemo}from"react";import{toAbsoluteTimeRange}from"@perses-dev/core";import{TimeRangeContext}from"@perses-dev/plugin-system";export function TimeRangeStateProvider(e){const{initialValue:t,children:r}=e,[o]=useState((()=>"pastDuration"in t?toAbsoluteTimeRange(t):t)),i=useMemo((()=>({timeRange:o})),[o]);return _jsx(TimeRangeContext.Provider,{value:i,children:r})}
+import{jsx as _jsx}from"react/jsx-runtime";import{useState,useMemo,createContext,useContext,useCallback}from"react";import{toAbsoluteTimeRange,isRelativeValue}from"@perses-dev/core";import{TimeRangeContext}from"@perses-dev/plugin-system";export function TimeRangeStateProvider(e){const{initialValue:t,children:o}=e,r=toAbsoluteTimeRange(t),[n,i]=useState(r),a=useCallback((e=>{isRelativeValue(e)||i(e)}),[]),s=useMemo((()=>({timeRange:n,defaultDuration:t.pastDuration})),[n,t]),u=useMemo((()=>({setTimeRange:a})),[a]);return _jsx(TimeRangeSetterContext.Provider,{value:u,children:_jsx(TimeRangeContext.Provider,{value:s,children:o})})}export const TimeRangeSetterContext=createContext(void 0);export function useTimeRangeSetter(){const e=useContext(TimeRangeSetterContext);if(void 0===e)throw new Error("No TimeRangeSetterContext found. Did you forget a Provider?");return e}

package/dist/context/index.d.ts

@@ -1,3 +1,4 @@
 export * from './TemplateVariablesProvider';
 export * from './TimeRangeStateProvider';
+export * from './DashboardProvider';
 //# sourceMappingURL=index.d.ts.map

package/dist/context/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/context/index.ts"],"names":[],"mappings":"AAaA,cAAc,6BAA6B,CAAC;AAC5C,cAAc,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/context/index.ts"],"names":[],"mappings":"AAaA,cAAc,6BAA6B,CAAC;AAC5C,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC"}

package/dist/context/index.js

@@ -1 +1 @@
-export*from"./TemplateVariablesProvider";export*from"./TimeRangeStateProvider";
+export*from"./TemplateVariablesProvider";export*from"./TimeRangeStateProvider";export*from"./DashboardProvider";

package/dist/test/testDashboard.d.ts

@@ -0,0 +1,4 @@
+import { DashboardResource } from '@perses-dev/core';
+declare const testDashboard: DashboardResource;
+export default testDashboard;
+//# sourceMappingURL=testDashboard.d.ts.map

package/dist/test/testDashboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"testDashboard.d.ts","sourceRoot":"","sources":["../../src/test/testDashboard.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAErD,QAAA,MAAM,aAAa,EAAE,iBA+MpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/test/testDashboard.js

@@ -0,0 +1 @@
+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:!0,name:"Public Prometheus Demo Server"},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:[{kind:"Grid",spec:{display:{title:"CPU Stats"},items:[{x:0,y:0,width:12,height:4,content:{$ref:"#/spec/panels/cpu"}}]}},{kind:"Grid",spec:{items:[{x:8,y:0,width:8,height:3,content:{$ref:"#/spec/panels/memory"}}]}},{kind:"Grid",spec:{display:{title:"Disk Stats",collapse:{open:!1}},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"}}]}}]}};export default testDashboard;

package/dist/utils/functions.d.ts

@@ -0,0 +1,2 @@
+export declare const removeWhiteSpacesAndSpecialCharacters: (str: string) => string;
+//# sourceMappingURL=functions.d.ts.map

package/dist/utils/functions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"functions.d.ts","sourceRoot":"","sources":["../../src/utils/functions.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,qCAAqC,QAAS,MAAM,WAEhE,CAAC"}

package/dist/utils/functions.js

@@ -0,0 +1 @@
+export const removeWhiteSpacesAndSpecialCharacters=e=>e.replace(/\s+/g,"");

package/dist/views/DashboardApp.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ViewDashboardProps } from './ViewDashboard';
+export declare const DashboardApp: (props: ViewDashboardProps) => JSX.Element;
+//# sourceMappingURL=DashboardApp.d.ts.map

package/dist/views/DashboardApp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardApp.d.ts","sourceRoot":"","sources":["../../src/views/DashboardApp.tsx"],"names":[],"mappings":";AAoBA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAErD,eAAO,MAAM,YAAY,UAAW,kBAAkB,gBAqCrD,CAAC"}