@perses-dev/dashboards 0.5.1 → 0.7.0

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/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

@@ -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":";AAgBA,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAa,SAAS,EAAuC,MAAM,eAAe,CAAC;AAI1F,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,UAAU,EAAE,eAAe,CAAC;CAC7B;AAED;;GAEG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,eAoFtC"}
+{"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{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";import useResizeObserver from"use-resize-observer";export function Panel(e){const{definition:i,...o}=e,[r,t]=useState(null),{width:n,height:s}=useResizeObserver({ref:r}),a=useMemo((()=>{if(void 0!==n&&void 0!==s)return{width:n,height:s}}),[n,s]);return _jsxs(Card,{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:t,children:_jsx(PluginBoundary,{loadingFallback:"Loading...",ErrorFallbackComponent:ErrorAlert,children:_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.d.ts

@@ -1,2 +1,2 @@
-export {};
+import 'intersection-observer';
 //# sourceMappingURL=Panel.test.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Panel.test.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.test.tsx"],"names":[],"mappings":""}
+{"version":3,"file":"Panel.test.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.test.tsx"],"names":[],"mappings":"AAeA,OAAO,uBAAuB,CAAC"}

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{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/VariableAutocomplete.d.ts

@@ -1,17 +1,21 @@
 /// <reference types="react" />
-import { TextFieldProps } from '@mui/material';
+import { AutocompleteProps as MuiAutocompleteProps, TextFieldProps } from '@mui/material';
 import { VariableDefinition } from '@perses-dev/core';
 import { VariableState } from '@perses-dev/plugin-system';
+declare type AutocompleteProps = MuiAutocompleteProps<string, boolean, true, false>;
 export interface VariableAutocompleteProps {
     definition: VariableDefinition;
     state: VariableState;
     onChange: (value: string | string[]) => void;
     onOptionsChange: (options: string[]) => void;
     TextFieldProps?: TextFieldProps;
+    className?: AutocompleteProps['className'];
+    sx?: AutocompleteProps['sx'];
 }
 /**
  * A MUI Autocomplete that displays variable options, loaded from the
  * appropriate plugin.
  */
 export declare function VariableAutocomplete(props: VariableAutocompleteProps): JSX.Element;
+export {};
 //# sourceMappingURL=VariableAutocomplete.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"VariableAutocomplete.d.ts","sourceRoot":"","sources":["../../src/components/VariableAutocomplete.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAsE,cAAc,EAAE,MAAM,eAAe,CAAC;AACnH,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAsB,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAK9E,MAAM,WAAW,yBAAyB;IACxC,UAAU,EAAE,kBAAkB,CAAC;IAC/B,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAC;IAC7C,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC7C,cAAc,CAAC,EAAE,cAAc,CAAC;CACjC;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,eAgEpE"}
+{"version":3,"file":"VariableAutocomplete.d.ts","sourceRoot":"","sources":["../../src/components/VariableAutocomplete.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAgB,iBAAiB,IAAI,oBAAoB,EAAa,cAAc,EAAE,MAAM,eAAe,CAAC;AACnH,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAsB,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAG9E,aAAK,iBAAiB,GAAG,oBAAoB,CAAC,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;AAE5E,MAAM,WAAW,yBAAyB;IACxC,UAAU,EAAE,kBAAkB,CAAC;IAC/B,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAC;IAC7C,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC7C,cAAc,CAAC,EAAE,cAAc,CAAC;IAEhC,SAAS,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAC3C,EAAE,CAAC,EAAE,iBAAiB,CAAC,IAAI,CAAC,CAAC;CAC9B;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,eAiEpE"}

package/dist/components/VariableAutocomplete.js

@@ -1 +1 @@
-import{jsx as _jsx}from"react/jsx-runtime";import{useEffect,useMemo}from"react";import{Autocomplete,TextField}from"@mui/material";import{useVariableOptions}from"@perses-dev/plugin-system";export function VariableAutocomplete(e){const{definition:o,state:r,onChange:l,onOptionsChange:t,TextFieldProps:i}=e,{value:a,options:n}=r,s="all_value"in o.selection?o.selection.all_value:void 0,u=useMemo((()=>{let e=n;return void 0===e&&(e=Array.isArray(a)?a:[a]),void 0!==s&&e[0]!==s&&(e=[s,...e]),e}),[n,a,s]),{data:p,loading:m,error:d}=useVariableOptions(o);return useEffect((()=>{m||t(p)}),[p,m]),_jsx(Autocomplete,{options:u,loading:m,value:a,multiple:Array.isArray(a),disableClearable:!0,freeSolo:!1,onChange:(e,o)=>{l(o)},renderInput:e=>{var r;return _jsx(TextField,{...e,margin:"normal",label:o.display.label,error:void 0!==d,helperText:null!==(r=null==d?void 0:d.message)&&void 0!==r?r:"",...i})},getOptionLabel:e=>e===s?"All":e,ChipProps:{color:"default",variant:"outlined"}})}
+import{jsx as _jsx}from"react/jsx-runtime";import{useEffect,useMemo}from"react";import{Autocomplete,TextField}from"@mui/material";import{useVariableOptions}from"@perses-dev/plugin-system";export function VariableAutocomplete(e){const{definition:o,state:r,onChange:l,onOptionsChange:t,TextFieldProps:i,...a}=e,{value:n,options:s}=r,u="all_value"in o.selection?o.selection.all_value:void 0,p=useMemo((()=>{let e=s;return void 0===e&&(e=Array.isArray(n)?n:[n]),void 0!==u&&e[0]!==u&&(e=[u,...e]),e}),[s,n,u]),{data:m,loading:d,error:v}=useVariableOptions(o);return useEffect((()=>{d||t(m)}),[m,d]),_jsx(Autocomplete,{options:p,loading:d,value:n,multiple:Array.isArray(n),disableClearable:!0,freeSolo:!1,onChange:(e,o)=>{l(o)},renderInput:e=>{var r;return _jsx(TextField,{...e,margin:"normal",label:o.display.label,error:void 0!==v,helperText:null!==(r=null==v?void 0:v.message)&&void 0!==r?r:"",...i})},getOptionLabel:e=>e===u?"All":e,ChipProps:{color:"default",variant:"outlined"},...a})}

package/dist/components/VariableList/VariableList.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { StackProps } from '@mui/material';
+import { DashboardSpec } from '@perses-dev/core';
+export interface VariableListProps extends StackProps {
+    variables: DashboardSpec['variables'];
+}
+/**
+ * Displays the list of variable inputs for a dashboard.
+ */
+export declare function VariableList(props: VariableListProps): JSX.Element;
+//# sourceMappingURL=VariableList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VariableList.d.ts","sourceRoot":"","sources":["../../../src/components/VariableList/VariableList.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAS,UAAU,EAAc,MAAM,eAAe,CAAC;AAE9D,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAKjD,MAAM,WAAW,iBAAkB,SAAQ,UAAU;IACnD,SAAS,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;CACvC;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,eAqCpD"}

package/dist/components/VariableList/VariableList.js

@@ -0,0 +1 @@
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{Stack,Typography}from"@mui/material";import{ErrorAlert}from"@perses-dev/components";import{PluginBoundary,useTemplateVariables}from"@perses-dev/plugin-system";import{useTemplateVariablesSetters}from"../../context";import{VariableAutocomplete}from"../VariableAutocomplete";export function VariableList(e){const{variables:r,...t}=e,{variables:a}=useTemplateVariables(),{setValue:o,setOptions:s}=useTemplateVariablesSetters();return _jsxs(Stack,{direction:{xs:"column",sm:"row"},alignItems:{sm:"center"},spacing:2,...t,children:[_jsx(Typography,{variant:"body2",sx:{fontWeight:e=>e.typography.fontWeightMedium},children:"Variables"}),Object.entries(r).map((([e,r])=>{if(!0===r.display.hide)return null;const t=a[e];if(void 0===t){const r=new Error(`Variable state for '${e}' not found`);return _jsx(ErrorAlert,{error:r},e)}return _jsx(PluginBoundary,{loadingFallback:"Loading...",ErrorFallbackComponent:ErrorAlert,children:_jsx(VariableAutocomplete,{definition:r,state:t,onChange:r=>o(e,r),onOptionsChange:r=>s(e,r),TextFieldProps:{margin:"none"},sx:{minWidth:250}})},e)}))]})}

package/dist/components/VariableList/VariableList.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=VariableList.test.d.ts.map

package/dist/components/VariableList/VariableList.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VariableList.test.d.ts","sourceRoot":"","sources":["../../../src/components/VariableList/VariableList.test.tsx"],"names":[],"mappings":""}

package/dist/components/VariableList/VariableList.test.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{screen}from"@testing-library/react";import userEvent from"@testing-library/user-event";import{PluginRegistry}from"@perses-dev/plugin-system";import{mockPluginRegistryProps,renderWithContext}from"../../test";import{TemplateVariablesProvider}from"../../context";import{VariableList}from"./VariableList";describe("VariableList",(()=>{const e={job:{display:{label:"Job"},kind:"PrometheusLabelValues",selection:{default_value:"node"},options:{label_name:"job",match:["node_uname_info"]}}},t={data:["node","all"],isLoading:!1,error:void 0},i={pluginType:"Variable",kind:"PrometheusLabelValues",plugin:{useVariableOptions:()=>t}},a=()=>{const{addMockPlugin:t,pluginRegistryProps:a}=mockPluginRegistryProps();t(i),renderWithContext(_jsx(PluginRegistry,{...a,children:_jsx(TemplateVariablesProvider,{variableDefinitions:e,children:_jsx(VariableList,{variables:e})})}))};it("should display Variables as the title",(async()=>{a();const e=await screen.findByText("Variables");expect(e).toBeInTheDocument()})),describe("VariableAutocomplete",(()=>{it("should display correct variable",(async()=>{a();const e=await screen.findByLabelText("Job");expect(e).toBeInTheDocument()})),it("should display correct default value",(async()=>{a();const e=await screen.findByDisplayValue("node");expect(e).toBeInTheDocument()})),it("should display correct options",(async()=>{a();const e=await screen.findByRole("button",{name:"Open"});userEvent.click(e);const t=await screen.findByText("all");expect(t).toBeInTheDocument();const i=screen.getByText("node");expect(i).toBeInTheDocument()}))}))}));

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

@@ -0,0 +1,2 @@
+export * from './VariableList';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/VariableList/index.ts"],"names":[],"mappings":"AAaA,cAAc,gBAAgB,CAAC"}

package/dist/components/VariableList/index.js

@@ -0,0 +1 @@
+export*from"./VariableList";

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 './VariableOptionsDrawer/VariableOptionsDrawer';
+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,+CAA+C,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"./VariableOptionsDrawer/VariableOptionsDrawer";
+export*from"./Dashboard";export*from"./GridLayout";export*from"./Panel/Panel";export*from"./TimeRangeControls";export*from"./VariableAutocomplete";export*from"./VariableList";