@perses-dev/dashboards 0.13.0 → 0.15.0

package/dist/cjs/components/DashboardToolbar/DashboardToolbar.js

@@ -33,10 +33,14 @@ function _interopRequireDefault(obj) {
     };
 }
 const DashboardToolbar = (props)=>{
-    const { dashboardName , onEditButtonClick , onCancelButtonClick  } = props;
+    const { dashboardName , dashboardTitleComponent , initialVariableIsSticky , onEditButtonClick , onCancelButtonClick  } = props;
     const { isEditMode , setEditMode  } = (0, _context.useEditMode)();
     const { openAddPanelGroup , openAddPanel  } = (0, _context.useDashboardActions)();
     const isLaptopSize = (0, _material.useMediaQuery)((0, _material.useTheme)().breakpoints.up('sm'));
+    const dashboardTitle = dashboardTitleComponent ? dashboardTitleComponent : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+        variant: "h2",
+        children: dashboardName
+    });
     const onSave = ()=>{
         setEditMode(false);
     };
@@ -52,13 +56,7 @@ const DashboardToolbar = (props)=>{
                         padding: 2,
                         display: "flex",
                         children: [
-                            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Typography, {
-                                variant: "h2",
-                                children: [
-                                    "Edit ",
-                                    dashboardName
-                                ]
-                            }),
+                            dashboardTitle,
                             /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
                                 direction: "row",
                                 spacing: 1,
@@ -91,7 +89,9 @@ const DashboardToolbar = (props)=>{
                     children: [
                         /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
                             FallbackComponent: _components.ErrorAlert,
-                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variables.TemplateVariableList, {})
+                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variables.TemplateVariableList, {
+                                initialVariableIsSticky: initialVariableIsSticky
+                            })
                         }),
                         /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
                             direction: 'row',
@@ -126,10 +126,7 @@ const DashboardToolbar = (props)=>{
                         width: '100%'
                     },
                     children: [
-                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
-                            variant: "h2",
-                            children: dashboardName
-                        }),
+                        dashboardTitle,
                         /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
                             direction: "row",
                             spacing: 2,
@@ -155,7 +152,9 @@ const DashboardToolbar = (props)=>{
                     paddingY: 2,
                     children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
                         FallbackComponent: _components.ErrorAlert,
-                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variables.TemplateVariableList, {})
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variables.TemplateVariableList, {
+                            initialVariableIsSticky: initialVariableIsSticky
+                        })
                     })
                 })
             ]

package/dist/cjs/{css/styles.js → components/GridLayout/GridContainer.js}

@@ -14,40 +14,68 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "styles", {
+Object.defineProperty(exports, "GridContainer", {
     enumerable: true,
-    get: ()=>styles
+    get: ()=>GridContainer
 });
-const styles = (theme)=>{
-    return {
-        '&.react-grid-layout': {
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+function GridContainer(props) {
+    const [isFirstRender, setIsFirstRender] = (0, _react.useState)(true);
+    (0, _react.useEffect)(()=>{
+        if (isFirstRender) {
+            setIsFirstRender(false);
+        }
+    }, [
+        isFirstRender
+    ]);
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(ReactGridLayoutContainer, {
+        sx: {
+            // This adds spcing between grids (rows) in the overall dashboard
+            '& + &': {
+                marginTop: (theme)=>theme.spacing(1)
+            },
+            // This disables the animation of grid items when a grid is first rendered
+            // (see https://github.com/react-grid-layout/react-grid-layout/issues/103)
+            '& .react-grid-item.cssTransforms': {
+                transitionProperty: isFirstRender ? 'none' : 'transform'
+            }
+        },
+        children: props.children
+    });
+}
+/**
+ * These are the classes needed by react-grid-layout from their CSS stylesheet.
+ */ const ReactGridLayoutContainer = (0, _material.styled)('section')(({ theme  })=>({
+        '& .react-grid-layout': {
             position: 'relative',
             transition: 'height 200ms ease'
         },
-        '&.react-grid-item': {
+        '& .react-grid-item': {
             transition: 'all 200ms ease',
             transitionProperty: 'left, top'
         },
-        '&.react-grid-item img': {
+        '& .react-grid-item img': {
             pointerEvents: 'none',
             userSelect: 'none'
         },
-        '&.react-grid-item.cssTransforms': {
+        '& .react-grid-item.cssTransforms': {
             transitionProperty: 'transform'
         },
-        '&.react-grid-item.resizing': {
+        '& .react-grid-item.resizing': {
             zIndex: 1,
             willChange: 'width, height'
         },
-        '&.react-grid-item.react-draggable-dragging': {
+        '& .react-grid-item.react-draggable-dragging': {
             transition: 'none',
             zIndex: 3,
             willChange: 'transform'
         },
-        '&.react-grid-item.dropping': {
+        '& .react-grid-item.dropping': {
             visibility: 'hidden'
         },
-        '&.react-grid-item.react-grid-placeholder': {
+        '& .react-grid-item.react-grid-placeholder': {
             background: theme.palette.primary.main,
             opacity: 0.2,
             transitionDuration: '100ms',
@@ -58,12 +86,12 @@ const styles = (theme)=>{
             msUserSelect: 'none',
             OUserSelect: 'none'
         },
-        '&.react-grid-item > .react-resizable-handle': {
+        '& .react-grid-item > .react-resizable-handle': {
             position: 'absolute',
             width: '20px',
             height: '20px'
         },
-        '&.react-grid-item > .react-resizable-handle::after': {
+        '& .react-grid-item > .react-resizable-handle::after': {
             content: '""',
             position: 'absolute',
             right: '3px',
@@ -73,62 +101,62 @@ const styles = (theme)=>{
             borderRight: '2px solid rgba(0, 0, 0, 0.4)',
             borderBottom: '2px solid rgba(0, 0, 0, 0.4)'
         },
-        '&.react-resizable-hide > .react-resizable-handle': {
+        '& .react-resizable-hide > .react-resizable-handle': {
             display: 'none'
         },
-        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-sw': {
+        '& .react-grid-item > .react-resizable-handle.react-resizable-handle-sw': {
             bottom: '0',
             left: '0',
             cursor: 'sw-resize',
             transform: 'rotate(90deg)'
         },
-        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-se': {
+        '& .react-grid-item > .react-resizable-handle.react-resizable-handle-se': {
             bottom: '0',
             right: '0',
             cursor: 'se-resize'
         },
-        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-nw': {
+        '& .react-grid-item > .react-resizable-handle.react-resizable-handle-nw': {
             top: '0',
             left: '0',
             cursor: 'nw-resize',
             transform: 'rotate(180deg)'
         },
-        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-ne': {
+        '& .react-grid-item > .react-resizable-handle.react-resizable-handle-ne': {
             top: '0',
             right: '0',
             cursor: 'ne-resize',
             transform: 'rotate(270deg)'
         },
-        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-w, &.react-grid-item > .react-resizable-handle.react-resizable-handle-e': {
+        '& .react-grid-item > .react-resizable-handle.react-resizable-handle-w, &.react-grid-item > .react-resizable-handle.react-resizable-handle-e': {
             top: '50%',
             marginTop: '-10px',
             cursor: 'ew-resize'
         },
-        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-w': {
+        '& .react-grid-item > .react-resizable-handle.react-resizable-handle-w': {
             left: '0',
             transform: 'rotate(135deg)'
         },
-        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-e': {
+        '& .react-grid-item > .react-resizable-handle.react-resizable-handle-e': {
             right: '0',
             transform: 'rotate(315deg)'
         },
-        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-n, &.react-grid-item > .react-resizable-handle.react-resizable-handle-s': {
+        '& .react-grid-item > .react-resizable-handle.react-resizable-handle-n, &.react-grid-item > .react-resizable-handle.react-resizable-handle-s': {
             left: '50%',
             marginLeft: '-10px',
             cursor: 'ns-resize'
         },
-        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-n': {
+        '& .react-grid-item > .react-resizable-handle.react-resizable-handle-n': {
             top: '0',
             transform: 'rotate(225deg)'
         },
-        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-s': {
+        '& .react-grid-item > .react-resizable-handle.react-resizable-handle-s': {
             bottom: '0',
             transform: 'rotate(45deg)'
         },
-        '&.react-resizable': {
+        '& .react-resizable': {
             position: 'relative'
         },
-        '&.react-resizable-handle': {
+        '& .react-resizable-handle': {
             position: 'absolute',
             width: '20px',
             height: '20px',
@@ -139,54 +167,53 @@ const styles = (theme)=>{
             backgroundPosition: 'bottom right',
             padding: '0 3px 3px 0'
         },
-        '&.react-resizable-handle-sw': {
+        '& .react-resizable-handle-sw': {
             bottom: '0',
             left: '0',
             cursor: 'sw-resize',
             transform: 'rotate(90deg)'
         },
-        '&.react-resizable-handle-se': {
+        '& .react-resizable-handle-se': {
             bottom: '0',
             right: '0',
             cursor: 'se-resize'
         },
-        '&.react-resizable-handle-nw': {
+        '& .react-resizable-handle-nw': {
             top: '0',
             left: '0',
             cursor: 'nw-resize',
             transform: 'rotate(180deg)'
         },
-        '&.react-resizable-handle-ne': {
+        '& .react-resizable-handle-ne': {
             top: '0',
             right: '0',
             cursor: 'ne-resize',
             transform: 'rotate(270deg)'
         },
-        '&.react-resizable-handle-w, .react-resizable-handle-e': {
+        '& .react-resizable-handle-w, .react-resizable-handle-e': {
             top: '50%',
             marginTop: '-10px',
             cursor: 'ew-resize'
         },
-        '&.react-resizable-handle-w': {
+        '& .react-resizable-handle-w': {
             left: '0',
             transform: 'rotate(135deg)'
         },
-        '&.react-resizable-handle-e': {
+        '& .react-resizable-handle-e': {
             right: '0',
             transform: 'rotate(315deg)'
         },
-        '&.react-resizable-handle-n, .react-resizable-handle-s': {
+        '& .react-resizable-handle-n, .react-resizable-handle-s': {
             left: '50%',
             marginLeft: '-10px',
             cursor: 'ns-resize'
         },
-        '&.react-resizable-handle-n': {
+        '& .react-resizable-handle-n': {
             top: '0',
             transform: 'rotate(225deg)'
         },
-        '&.react-resizable-handle-s': {
+        '& .react-resizable-handle-s': {
             bottom: '0',
             transform: 'rotate(45deg)'
         }
-    };
-};
+    }));

package/dist/cjs/components/GridLayout/GridLayout.js

@@ -23,83 +23,70 @@ const _react = require("react");
 const _reactGridLayout = require("react-grid-layout");
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
-const _styles = require("../../css/styles");
 const _context = require("../../context");
 const _gridTitle = require("./GridTitle");
 const _gridItemContent = require("./GridItemContent");
+const _gridContainer = require("./GridContainer");
 const ResponsiveGridLayout = (0, _reactGridLayout.WidthProvider)(_reactGridLayout.Responsive);
 function GridLayout(props) {
-    const { panelGroupId , ...others } = props;
+    const { panelGroupId /*...others */  } = props;
     const theme = (0, _material.useTheme)();
     const groupDefinition = (0, _context.usePanelGroup)(panelGroupId);
     const { updatePanelGroupLayouts  } = (0, _context.usePanelGroupActions)(panelGroupId);
     var ref;
     const [isOpen, setIsOpen] = (0, _react.useState)((ref = !groupDefinition.isCollapsed) !== null && ref !== void 0 ? ref : true);
     const { isEditMode  } = (0, _context.useEditMode)();
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_gridContainer.GridContainer, {
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.GlobalStyles, {
-                styles: _styles.styles
+            groupDefinition.title !== undefined && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_gridTitle.GridTitle, {
+                panelGroupId: panelGroupId,
+                title: groupDefinition.title,
+                collapse: groupDefinition.isCollapsed === undefined ? undefined : {
+                    isOpen,
+                    onToggleOpen: ()=>setIsOpen((current)=>!current)
+                }
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
-                ...others,
-                component: "section",
-                sx: {
-                    '& + &': {
-                        marginTop: (theme)=>theme.spacing(1)
-                    }
-                },
-                children: [
-                    groupDefinition.title !== undefined && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_gridTitle.GridTitle, {
-                        panelGroupId: panelGroupId,
-                        title: groupDefinition.title,
-                        collapse: groupDefinition.isCollapsed === undefined ? undefined : {
-                            isOpen,
-                            onToggleOpen: ()=>setIsOpen((current)=>!current)
-                        }
-                    }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Collapse, {
-                        in: isOpen,
-                        unmountOnExit: true,
-                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(ResponsiveGridLayout, {
-                            className: "layout",
-                            breakpoints: {
-                                sm: theme.breakpoints.values.sm,
-                                xxs: 0
-                            },
-                            cols: {
-                                sm: 24,
-                                xxs: 2
-                            },
-                            rowHeight: 30,
-                            draggableHandle: '.drag-handle',
-                            resizeHandles: [
-                                'se'
-                            ],
-                            isDraggable: isEditMode,
-                            isResizable: isEditMode,
-                            containerPadding: [
-                                0,
-                                10
-                            ],
-                            layouts: {
-                                sm: groupDefinition.itemLayouts
-                            },
-                            onLayoutChange: updatePanelGroupLayouts,
-                            children: groupDefinition.itemLayouts.map(({ i  })=>/*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
-                                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
-                                        FallbackComponent: _components.ErrorAlert,
-                                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_gridItemContent.GridItemContent, {
-                                            panelGroupItemId: {
-                                                panelGroupId,
-                                                panelGroupItemLayoutId: i
-                                            }
-                                        })
-                                    })
-                                }, i))
-                        })
-                    })
-                ]
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Collapse, {
+                in: isOpen,
+                unmountOnExit: true,
+                appear: false,
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(ResponsiveGridLayout, {
+                    className: "layout",
+                    breakpoints: {
+                        sm: theme.breakpoints.values.sm,
+                        xxs: 0
+                    },
+                    cols: {
+                        sm: 24,
+                        xxs: 2
+                    },
+                    rowHeight: 30,
+                    draggableHandle: '.drag-handle',
+                    resizeHandles: [
+                        'se'
+                    ],
+                    isDraggable: isEditMode,
+                    isResizable: isEditMode,
+                    containerPadding: [
+                        0,
+                        10
+                    ],
+                    layouts: {
+                        sm: groupDefinition.itemLayouts
+                    },
+                    onLayoutChange: updatePanelGroupLayouts,
+                    children: groupDefinition.itemLayouts.map(({ i  })=>/*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
+                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
+                                FallbackComponent: _components.ErrorAlert,
+                                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_gridItemContent.GridItemContent, {
+                                    panelGroupItemId: {
+                                        panelGroupId,
+                                        panelGroupItemLayoutId: i
+                                    }
+                                })
+                            })
+                        }, i))
+                })
             })
         ]
     });

package/dist/cjs/components/GridLayout/GridTitle.js

@@ -37,7 +37,8 @@ function _interopRequireDefault(obj) {
 function GridTitle(props) {
     const { panelGroupId , title , collapse  } = props;
     const [isHovered, setIsHovered] = (0, _react.useState)(false);
-    const { openAddPanel , openEditPanelGroup , deletePanelGroup , moveUp , moveDown  } = (0, _context.usePanelGroupActions)(panelGroupId);
+    const { openAddPanel , openEditPanelGroup , moveUp , moveDown  } = (0, _context.usePanelGroupActions)(panelGroupId);
+    const { openDeletePanelGroupDialog  } = (0, _context.useDeletePanelGroupDialog)();
     const { isEditMode  } = (0, _context.useEditMode)();
     const text = /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
         variant: "h2",
@@ -81,7 +82,7 @@ function GridTitle(props) {
                         }),
                         /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
                             "aria-label": "delete group",
-                            onClick: deletePanelGroup,
+                            onClick: ()=>openDeletePanelGroupDialog(panelGroupId),
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_deleteOutline.default, {})
                         }),
                         /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {

package/dist/cjs/components/Panel/PanelHeader.js

@@ -95,17 +95,17 @@ function PanelHeader({ id , title , description , editHandlers , isHovered , sx
         title: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
             id: titleElementId,
             variant: "subtitle1",
-            sx: {
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis'
-            },
             children: title
         }),
         action: action,
         sx: (0, _components.combineSx)((theme)=>({
                 padding: theme.spacing(1),
-                borderBottom: `solid 1px ${theme.palette.divider}`
+                borderBottom: `solid 1px ${theme.palette.divider}`,
+                '.MuiCardHeader-content': {
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis'
+                }
             }), sx),
         ...rest
     });

package/dist/cjs/components/PanelDrawer/PanelDrawer.js

@@ -56,8 +56,7 @@ const PanelDrawer = ()=>{
                     sx: {
                         display: 'flex',
                         alignItems: 'center',
-                        marginBottom: (theme)=>theme.spacing(2),
-                        paddingBottom: (theme)=>theme.spacing(2),
+                        padding: (theme)=>theme.spacing(1, 2),
                         borderBottom: (theme)=>`1px solid ${theme.palette.grey[100]}`
                     },
                     children: [

package/dist/cjs/components/PanelDrawer/PanelEditorForm.js

@@ -73,16 +73,18 @@ function PanelEditorForm(props) {
     };
     var _title, ref1;
     return(// Grid maxHeight allows user to scroll inside Drawer to see all content
-    /*#__PURE__*/ (0, _jsxRuntime.jsx)("form", {
+    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+        component: "form",
         id: panelEditorFormId,
         onSubmit: handleSubmit,
+        sx: {
+            flex: 1,
+            overflowY: 'scroll',
+            padding: (theme)=>theme.spacing(2)
+        },
         children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Grid, {
             container: true,
             spacing: 2,
-            sx: {
-                overflowY: 'scroll',
-                maxHeight: '90vh'
-            },
             children: [
                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
                     item: true,

package/dist/cjs/components/TimeRangeControls/TimeRangeControls.js

@@ -25,8 +25,6 @@ _export(exports, {
     TimeRangeControls: ()=>TimeRangeControls
 });
 const _jsxRuntime = require("react/jsx-runtime");
-const _react = require("react");
-const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
 const _core = require("@perses-dev/core");
 const _context = require("../../context");
@@ -88,58 +86,21 @@ const TIME_OPTIONS = [
 ];
 function TimeRangeControls() {
     const { timeRange , setTimeRange  } = (0, _context.useDashboardTimeRange)();
-    const [showCustomDateSelector, setShowCustomDateSelector] = (0, _react.useState)(false);
-    const anchorEl = (0, _react.useRef)();
-    const convertedTimeRange = (0, _react.useMemo)(()=>{
-        return (0, _core.isRelativeTimeRange)(timeRange) ? (0, _core.toAbsoluteTimeRange)(timeRange) : timeRange;
-    }, [
-        timeRange
-    ]);
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
-        direction: "row",
-        spacing: 1,
-        children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Popover, {
-                anchorEl: anchorEl.current,
-                anchorOrigin: {
-                    vertical: 'bottom',
-                    horizontal: 'center'
+    const defaultTimeRange = (0, _context.useDefaultTimeRange)();
+    // add time shortcut if one does not match duration from dashboard JSON
+    if (!TIME_OPTIONS.some((option)=>option.value.pastDuration === defaultTimeRange.pastDuration)) {
+        if ((0, _core.isDurationString)(defaultTimeRange.pastDuration)) {
+            TIME_OPTIONS.push({
+                value: {
+                    pastDuration: defaultTimeRange.pastDuration
                 },
-                open: showCustomDateSelector,
-                onClose: ()=>setShowCustomDateSelector(false),
-                sx: (theme)=>({
-                        padding: theme.spacing(2)
-                    }),
-                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.AbsoluteTimePicker, {
-                    initialTimeRange: convertedTimeRange,
-                    onChange: (timeRange)=>{
-                        setTimeRange(timeRange);
-                        setShowCustomDateSelector(false);
-                    }
-                })
-            }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.FormControl, {
-                fullWidth: true,
-                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
-                    ref: anchorEl,
-                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.TimeRangeSelector, {
-                        timeOptions: TIME_OPTIONS,
-                        value: timeRange,
-                        onSelectChange: (event)=>{
-                            const duration = event.target.value;
-                            const relativeTimeInput = {
-                                pastDuration: duration,
-                                end: new Date()
-                            };
-                            setTimeRange(relativeTimeInput);
-                            setShowCustomDateSelector(false);
-                        },
-                        onCustomClick: ()=>{
-                            setShowCustomDateSelector(true);
-                        }
-                    })
-                })
-            })
-        ]
+                display: `Last ${defaultTimeRange.pastDuration}`
+            });
+        }
+    }
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.DateTimeRangePicker, {
+        timeOptions: TIME_OPTIONS,
+        value: timeRange,
+        onChange: setTimeRange
     });
 }