@perses-dev/components 0.55.0-beta.3 → 0.55.0-beta.7

package/dist/cjs/TimeRangeSelector/TimeRangeSelector.js

@@ -1,271 +0,0 @@
-// Copyright The Perses Authors
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "TimeRangeSelector", {
-    enumerable: true,
-    get: function() {
-        return TimeRangeSelector;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _material = require("@mui/material");
-const _spec = require("@perses-dev/spec");
-const _Calendar = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Calendar"));
-const _Earth = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Earth"));
-const _react = require("react");
-const _context = require("../context");
-const _timeZoneOption = require("../model/timeZoneOption");
-const _SettingsAutocomplete = require("../SettingsAutocomplete");
-const _format = require("../utils/format");
-const _DateTimeRangePicker = require("./DateTimeRangePicker");
-const _utils = require("./utils");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-function TimeRangeSelector({ value, timeOptions, onChange, height, showCustomTimeRange = true, timeZone: timeZoneProp, timeZoneOptions, onTimeZoneChange }) {
-    const { timeZone: ctxTimeZone } = (0, _context.useTimeZone)();
-    const timeZone = timeZoneProp ?? ctxTimeZone;
-    const anchorEl = (0, _react.useRef)();
-    const [showCustomDateSelector, setShowCustomDateSelector] = (0, _react.useState)(false);
-    const convertedTimeRange = (0, _react.useMemo)(()=>{
-        return (0, _spec.isRelativeTimeRange)(value) ? (0, _spec.toAbsoluteTimeRange)(value) : value;
-    }, [
-        value
-    ]);
-    const lastOption = (0, _react.useMemo)(()=>(0, _utils.buildCustomTimeOption)((0, _spec.isRelativeTimeRange)(value) ? undefined : value, timeZone), [
-        value,
-        timeZone
-    ]);
-    const [open, setOpen] = (0, _react.useState)(false);
-    const tzOptions = timeZoneOptions ?? (0, _timeZoneOption.getTimeZoneOptions)();
-    const [tzAnchorEl, setTzAnchorEl] = (0, _react.useState)(null);
-    const tzOpen = Boolean(tzAnchorEl);
-    const tzLabel = tzOptions.find((o)=>o.value === timeZone)?.display ?? timeZone;
-    const tzOffset = (0, _format.getGMTOffset)(timeZone);
-    const localOffset = (0, _format.getGMTOffset)('local');
-    const tzAutocompleteOptions = tzOptions.map((o)=>({
-            id: o.value,
-            label: o.display
-        }));
-    let tzAutocompleteValue = undefined;
-    {
-        const current = tzOptions.find((o)=>o.value === timeZone);
-        if (current) tzAutocompleteValue = {
-            id: current.value,
-            label: current.display
-        };
-    }
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Popover, {
-                anchorEl: tzAnchorEl,
-                anchorOrigin: {
-                    vertical: 'bottom',
-                    horizontal: 'right'
-                },
-                transformOrigin: {
-                    vertical: 'top',
-                    horizontal: 'right'
-                },
-                open: tzOpen,
-                onClose: ()=>setTzAnchorEl(null),
-                sx: (theme)=>({
-                        padding: theme.spacing(1)
-                    }),
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-                    sx: {
-                        p: 1,
-                        minWidth: 260
-                    },
-                    onClick: (e)=>{
-                        e.stopPropagation();
-                    },
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_SettingsAutocomplete.SettingsAutocomplete, {
-                        options: tzAutocompleteOptions,
-                        value: tzAutocompleteValue,
-                        onChange: (_e, option)=>{
-                            if (option) {
-                                const selected = tzOptions.find((o)=>o.value === option.id);
-                                if (selected) onTimeZoneChange?.(selected);
-                            }
-                            setTzAnchorEl(null);
-                        },
-                        disableClearable: true,
-                        renderInput: (params)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                                ...params,
-                                placeholder: "Search timezones",
-                                size: "small"
-                            })
-                    })
-                })
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Popover, {
-                anchorEl: anchorEl.current,
-                anchorOrigin: {
-                    vertical: 'bottom',
-                    horizontal: 'center'
-                },
-                open: showCustomDateSelector,
-                onClose: ()=>setShowCustomDateSelector(false),
-                sx: (theme)=>({
-                        padding: theme.spacing(2)
-                    }),
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DateTimeRangePicker.DateTimeRangePicker, {
-                    initialTimeRange: convertedTimeRange,
-                    onChange: (value)=>{
-                        onChange(value);
-                        setShowCustomDateSelector(false);
-                        setOpen(false);
-                    },
-                    onCancel: ()=>setShowCustomDateSelector(false),
-                    timeZone: timeZone
-                })
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-                ref: anchorEl,
-                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Select, {
-                    open: open,
-                    value: (0, _utils.formatTimeRange)(value, timeZone),
-                    onClick: ()=>setOpen(!open),
-                    IconComponent: _Calendar.default,
-                    renderValue: ()=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-                            direction: "row",
-                            alignItems: "center",
-                            spacing: 1,
-                            children: [
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-                                    children: timeOptions.find((opt)=>(0, _utils.formatTimeRange)(opt.value, timeZone) === (0, _utils.formatTimeRange)(value, timeZone))?.display ?? (0, _utils.formatTimeRange)(value, timeZone)
-                                }),
-                                tzOffset !== localOffset && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
-                                    sx: {
-                                        typography: 'caption',
-                                        color: 'text.secondary'
-                                    },
-                                    children: [
-                                        "· ",
-                                        tzOffset
-                                    ]
-                                })
-                            ]
-                        }),
-                    inputProps: {
-                        'aria-label': `Select time range. Currently set to ${value}`
-                    },
-                    sx: {
-                        '.MuiSelect-icon': {
-                            marginTop: '1px',
-                            transform: 'none'
-                        },
-                        '.MuiSelect-select.MuiSelect-outlined.MuiInputBase-input': {
-                            paddingRight: '36px'
-                        },
-                        '.MuiSelect-select': height ? {
-                            lineHeight: height,
-                            paddingY: 0
-                        } : {}
-                    },
-                    children: [
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                            disableRipple: true,
-                            onClick: (e)=>{
-                                e.preventDefault();
-                                e.stopPropagation();
-                            },
-                            sx: {
-                                cursor: 'default',
-                                '&:hover': {
-                                    backgroundColor: 'transparent'
-                                },
-                                py: 0.5,
-                                px: 1
-                            },
-                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
-                                sx: {
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    width: '100%',
-                                    justifyContent: 'space-between'
-                                },
-                                children: [
-                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
-                                        sx: {
-                                            display: 'flex',
-                                            flexDirection: 'column',
-                                            alignItems: 'flex-start'
-                                        },
-                                        children: [
-                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-                                                sx: {
-                                                    typography: 'subtitle1'
-                                                },
-                                                children: "Time Range"
-                                            }),
-                                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
-                                                sx: {
-                                                    color: 'text.secondary',
-                                                    typography: 'caption',
-                                                    mt: 0.25
-                                                },
-                                                children: [
-                                                    "Timezone: ",
-                                                    tzLabel
-                                                ]
-                                            })
-                                        ]
-                                    }),
-                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-                                        sx: {
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            pr: 1,
-                                            ml: 1.5
-                                        },
-                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
-                                            size: "small",
-                                            "aria-label": "Select timezone",
-                                            onClick: (e)=>{
-                                                e.preventDefault();
-                                                e.stopPropagation();
-                                                setTzAnchorEl(e.currentTarget);
-                                            },
-                                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Earth.default, {
-                                                fontSize: "small"
-                                            })
-                                        })
-                                    })
-                                ]
-                            })
-                        }),
-                        timeOptions.map((item, idx)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                                value: (0, _utils.formatTimeRange)(item.value, timeZone),
-                                onClick: ()=>{
-                                    onChange(item.value);
-                                },
-                                children: item.display
-                            }, idx)),
-                        showCustomTimeRange && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                            value: (0, _utils.formatTimeRange)(lastOption.value, timeZone),
-                            onClick: ()=>setShowCustomDateSelector(true),
-                            children: lastOption.display
-                        })
-                    ]
-                })
-            })
-        ]
-    });
-}

package/dist/cjs/TimeRangeSelector/index.js

@@ -1,31 +0,0 @@
-// Copyright The Perses Authors
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-_export_star(require("./TimeRangeSelector"), exports);
-_export_star(require("./DateTimeRangePicker"), exports);
-function _export_star(from, to) {
-    Object.keys(from).forEach(function(k) {
-        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
-            Object.defineProperty(to, k, {
-                enumerable: true,
-                get: function() {
-                    return from[k];
-                }
-            });
-        }
-    });
-    return from;
-}

package/dist/cjs/TimeRangeSelector/utils.js

@@ -1,72 +0,0 @@
-// Copyright The Perses Authors
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: Object.getOwnPropertyDescriptor(all, name).get
-    });
-}
-_export(exports, {
-    get DATE_TIME_FORMAT () {
-        return DATE_TIME_FORMAT;
-    },
-    get buildCustomTimeOption () {
-        return buildCustomTimeOption;
-    },
-    get formatAbsoluteRange () {
-        return formatAbsoluteRange;
-    },
-    get formatTimeRange () {
-        return formatTimeRange;
-    },
-    get validateDateRange () {
-        return validateDateRange;
-    }
-});
-const _spec = require("@perses-dev/spec");
-const _datefns = require("date-fns");
-const _utils = require("../utils");
-const DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';
-function buildCustomTimeOption(value, timeZone) {
-    return {
-        value,
-        display: formatTimeRange(value, timeZone)
-    };
-}
-function validateDateRange(startDate, endDate) {
-    // TODO: display error as helperText
-    if (!(0, _datefns.isValid)(startDate) || !(0, _datefns.isValid)(endDate)) {
-        console.error('Invalid Date');
-        return false;
-    }
-    if (!(0, _datefns.isBefore)(startDate, endDate)) {
-        console.error('End Time is before Start Time');
-        return false;
-    }
-    return true;
-}
-function formatAbsoluteRange(timeRange, dateFormat, timeZone) {
-    const formattedStart = (0, _utils.formatWithTimeZone)(timeRange.start, dateFormat, timeZone);
-    const formattedEnd = (0, _utils.formatWithTimeZone)(timeRange.end, dateFormat, timeZone);
-    return `${formattedStart} - ${formattedEnd}`;
-}
-function formatTimeRange(value, timeZone) {
-    if (!value) {
-        return 'Custom Time Range';
-    }
-    return !(0, _spec.isRelativeTimeRange)(value) ? formatAbsoluteRange(value, DATE_TIME_FORMAT, timeZone) : value.pastDuration;
-}

package/dist/cjs/TimeSeriesTooltip/SeriesInfo.js

@@ -1,98 +0,0 @@
-// Copyright The Perses Authors
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "SeriesInfo", {
-    enumerable: true,
-    get: function() {
-        return SeriesInfo;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _material = require("@mui/material");
-const _SeriesLabelsStack = require("./SeriesLabelsStack");
-const _SeriesMarker = require("./SeriesMarker");
-const _tooltipmodel = require("./tooltip-model");
-function SeriesInfo(props) {
-    const { seriesName, formattedY, markerColor, totalSeries, emphasizeText = false, wrapLabels = true } = props;
-    // metric __name__ comes before opening curly brace, ignore if not populated
-    // ex with metric name: node_load15{env="demo",job="node"}
-    // ex without metric name: {env="demo",job="node"}
-    const splitName = seriesName.split('{');
-    const seriesLabels = splitName[1] ?? seriesName;
-    // remove curly braces that wrap labels
-    const formattedSeriesLabels = seriesLabels.replace(/[{}]/g, '');
-    // determine whether to show labels on separate lines
-    const splitLabels = formattedSeriesLabels.split(',');
-    if (totalSeries === 1 && splitLabels.length > 1) {
-        const metricName = splitName[0] ? `${splitName[0]}:` : 'value:';
-        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_SeriesLabelsStack.SeriesLabelsStack, {
-            formattedY: formattedY,
-            metricName: metricName,
-            metricLabels: splitLabels,
-            markerColor: markerColor
-        });
-    }
-    // add space after commas so wrapLabels works
-    const formattedSeriesInfo = seriesName.replace(/[,]/g, ', ');
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
-        sx: {
-            display: 'table-row',
-            paddingTop: 0.5
-        },
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
-                sx: {
-                    display: 'table-cell',
-                    maxWidth: '520px'
-                },
-                children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_SeriesMarker.SeriesMarker, {
-                        markerColor: markerColor,
-                        sx: {
-                            marginTop: 0.5
-                        }
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-                        component: "span",
-                        sx: (theme)=>({
-                                display: 'inline-block',
-                                width: 'calc(100% - 20px)',
-                                minWidth: 150,
-                                maxWidth: _tooltipmodel.TOOLTIP_LABELS_MAX_WIDTH,
-                                overflow: 'hidden',
-                                color: theme.palette.common.white,
-                                fontWeight: emphasizeText ? theme.typography.fontWeightBold : theme.typography.fontWeightRegular,
-                                textOverflow: 'ellipsis',
-                                whiteSpace: wrapLabels ? 'normal' : 'nowrap'
-                            }),
-                        "aria-label": emphasizeText ? _tooltipmodel.EMPHASIZED_SERIES_DESCRIPTION : _tooltipmodel.NEARBY_SERIES_DESCRIPTION,
-                        children: formattedSeriesInfo
-                    })
-                ]
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-                sx: (theme)=>({
-                        display: 'table-cell',
-                        paddingLeft: 1.5,
-                        textAlign: 'right',
-                        verticalAlign: 'top',
-                        fontWeight: emphasizeText ? theme.typography.fontWeightBold : theme.typography.fontWeightRegular
-                    }),
-                children: formattedY
-            })
-        ]
-    });
-}

package/dist/cjs/TimeSeriesTooltip/SeriesLabelsStack.js

@@ -1,107 +0,0 @@
-// Copyright The Perses Authors
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "SeriesLabelsStack", {
-    enumerable: true,
-    get: function() {
-        return SeriesLabelsStack;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _material = require("@mui/material");
-const _SeriesMarker = require("./SeriesMarker");
-function SeriesLabelsStack(props) {
-    const { formattedY, markerColor, metricName, metricLabels } = props;
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-        spacing: 0.5,
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
-                sx: (theme)=>({
-                        display: 'flex',
-                        height: '16px',
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        justifyContent: 'left',
-                        color: theme.palette.common.white,
-                        fontSize: '11px'
-                    }),
-                children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_SeriesMarker.SeriesMarker, {
-                        markerColor: markerColor,
-                        sx: {
-                            marginTop: 0.25
-                        }
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
-                        component: "span",
-                        children: [
-                            metricName,
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-                                component: "span",
-                                sx: (theme)=>({
-                                        color: theme.palette.common.white,
-                                        fontWeight: 700,
-                                        paddingLeft: '2px'
-                                    }),
-                                children: formattedY
-                            })
-                        ]
-                    })
-                ]
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {
-                sx: (theme)=>({
-                        borderColor: theme.palette.grey['500']
-                    })
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-                sx: (theme)=>({
-                        color: theme.palette.common.white
-                    }),
-                children: metricLabels.map((label)=>{
-                    // show labels on separate lines when many labels and only one focused series
-                    if (label) {
-                        const [name, value] = label.split('=');
-                        const formattedName = value !== undefined ? `${name}: ` : name;
-                        const formattedValue = value !== undefined ? value.replace(/(^"|"$)/g, '') : value;
-                        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
-                            sx: {
-                                display: 'flex',
-                                gap: '4px'
-                            },
-                            children: [
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                                    sx: {
-                                        fontSize: '11px'
-                                    },
-                                    children: formattedName
-                                }),
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                                    sx: (theme)=>({
-                                            color: theme.palette.common.white,
-                                            fontWeight: 700,
-                                            fontSize: '11px'
-                                        }),
-                                    children: formattedValue
-                                })
-                            ]
-                        }, label);
-                    }
-                })
-            })
-        ]
-    });
-}

package/dist/cjs/TimeSeriesTooltip/SeriesMarker.js

@@ -1,41 +0,0 @@
-// Copyright The Perses Authors
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "SeriesMarker", {
-    enumerable: true,
-    get: function() {
-        return SeriesMarker;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _material = require("@mui/material");
-const _utils = require("../utils");
-function SeriesMarker(props) {
-    const { markerColor, sx } = props;
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-        sx: (0, _utils.combineSx)({
-            display: 'inline-block',
-            width: '11px',
-            height: '11px',
-            borderRadius: '2px',
-            marginRight: 1,
-            verticalAlign: 'top'
-        }, sx),
-        style: {
-            backgroundColor: markerColor
-        }
-    });
-}