@perses-dev/explore 0.50.1 → 0.51.0-beta.0

package/dist/cjs/components/PrometheusMetricsFinder/PrometheusMetricsFinder.js

@@ -1,310 +0,0 @@
-// Copyright 2024 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: all[name]
-    });
-}
-_export(exports, {
-    MetricNameExplorer: function() {
-        return MetricNameExplorer;
-    },
-    PrometheusMetricsFinder: function() {
-        return PrometheusMetricsFinder;
-    },
-    SettingsMenu: function() {
-        return SettingsMenu;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _material = require("@mui/material");
-const _prometheusplugin = require("@perses-dev/prometheus-plugin");
-const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
-const _ArrowLeft = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ArrowLeft"));
-const _Cog = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Cog"));
-const _reactrouterdom = require("react-router-dom");
-const _fuzzy = require("@nexucis/fuzzy");
-const _Magnify = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Magnify"));
-const _queryparams = require("../ExploreManager/query-params");
-const _FinderFilters = require("./filter/FinderFilters");
-const _MetricList = require("./display/list/MetricList");
-const _MetricOverview = require("./overview/MetricOverview");
-const _utils = require("./utils");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-function _getRequireWildcardCache(nodeInterop) {
-    if (typeof WeakMap !== "function") return null;
-    var cacheBabelInterop = new WeakMap();
-    var cacheNodeInterop = new WeakMap();
-    return (_getRequireWildcardCache = function(nodeInterop) {
-        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
-    })(nodeInterop);
-}
-function _interop_require_wildcard(obj, nodeInterop) {
-    if (!nodeInterop && obj && obj.__esModule) {
-        return obj;
-    }
-    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
-        return {
-            default: obj
-        };
-    }
-    var cache = _getRequireWildcardCache(nodeInterop);
-    if (cache && cache.has(obj)) {
-        return cache.get(obj);
-    }
-    var newObj = {
-        __proto__: null
-    };
-    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
-    for(var key in obj){
-        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
-            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
-            if (desc && (desc.get || desc.set)) {
-                Object.defineProperty(newObj, key, desc);
-            } else {
-                newObj[key] = obj[key];
-            }
-        }
-    }
-    newObj.default = obj;
-    if (cache) {
-        cache.set(obj, newObj);
-    }
-    return newObj;
-}
-const PERSES_METRICS_FINDER_SETTINGS = 'PERSES_METRICS_FINDER_SETTINGS';
-function SettingsMenu({ value, onChange }) {
-    const [anchorEl, setAnchorEl] = (0, _react.useState)(null);
-    const open = Boolean(anchorEl);
-    const handleClick = (event)=>{
-        setAnchorEl(event.currentTarget);
-    };
-    const handleClose = ()=>{
-        setAnchorEl(null);
-    };
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
-                "aria-label": "settings",
-                size: "large",
-                onClick: handleClick,
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Cog.default, {})
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Menu, {
-                id: "finder-settings-menu",
-                anchorEl: anchorEl,
-                open: open,
-                onClose: handleClose,
-                children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                        onClick: (e)=>e.preventDefault(),
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
-                            control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Checkbox, {}),
-                            label: "Enable Metadata",
-                            checked: value.isMetadataEnabled,
-                            onClick: ()=>onChange({
-                                    ...value,
-                                    isMetadataEnabled: !value.isMetadataEnabled
-                                })
-                        })
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                        onClick: (e)=>e.preventDefault(),
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
-                            control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Checkbox, {}),
-                            label: "Enable Time Series Chart",
-                            checked: value.isPanelEnabled,
-                            onClick: ()=>onChange({
-                                    ...value,
-                                    isPanelEnabled: !value.isPanelEnabled
-                                })
-                        })
-                    })
-                ]
-            })
-        ]
-    });
-}
-function MetricNameExplorer({ datasource, filters, isMetadataEnabled, onExplore, ...props }) {
-    const { data, isLoading, error } = (0, _utils.useLabelValues)('__name__', filters, datasource);
-    const [search, setSearch] = (0, _react.useState)('');
-    const fuzzy = (0, _react.useMemo)(()=>new _fuzzy.Fuzzy({
-            includeMatches: true,
-            excludedChars: [
-                ' '
-            ]
-        }), []);
-    const filteredResults = (0, _react.useMemo)(()=>{
-        if (search && (data === null || data === void 0 ? void 0 : data.data)) {
-            return fuzzy.filter(search, data.data).sort((a, b)=>b.score - a.score);
-        }
-        return undefined;
-    }, [
-        data,
-        fuzzy,
-        search
-    ]);
-    if (error) {
-        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-            width: "100%",
-            children: [
-                "Error: ",
-                error.message
-            ]
-        });
-    }
-    if (isLoading) {
-        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
-            width: "100%",
-            sx: {
-                alignItems: 'center',
-                justifyContent: 'center'
-            },
-            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CircularProgress, {})
-        });
-    }
-    var _data_data;
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-        ...props,
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                value: search,
-                onChange: (e)=>setSearch(e.target.value),
-                placeholder: "Search metric name...",
-                InputProps: {
-                    startAdornment: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.InputAdornment, {
-                        position: "start",
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Magnify.default, {})
-                    })
-                }
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_MetricList.MetricList, {
-                metricNames: (_data_data = data === null || data === void 0 ? void 0 : data.data) !== null && _data_data !== void 0 ? _data_data : [],
-                filteredResults: filteredResults,
-                datasource: datasource,
-                filters: filters,
-                isMetadataEnabled: isMetadataEnabled,
-                onExplore: onExplore
-            })
-        ]
-    });
-}
-function PrometheusMetricsFinder({ value: { datasource = _prometheusplugin.DEFAULT_PROM, filters = [], exploredMetric }, onChange, onExplore, ...props }) {
-    const settingsStored = localStorage.getItem(PERSES_METRICS_FINDER_SETTINGS);
-    const [settings, setSettings] = (0, _react.useState)(settingsStored ? JSON.parse(settingsStored) : {
-        isMetadataEnabled: true
-    });
-    function handleSettingsUpdate(value) {
-        setSettings(value);
-        localStorage.setItem(PERSES_METRICS_FINDER_SETTINGS, JSON.stringify(value));
-    }
-    const isMobileSize = (0, _material.useMediaQuery)((0, _material.useTheme)().breakpoints.down('md'));
-    // Remove duplicated filters and filters without label or labelValues
-    const filteredFilters = (0, _react.useMemo)(()=>{
-        return filters.filter((filter)=>filter.label && filter.labelValues.length > 0);
-    }, [
-        filters
-    ]);
-    const searchParams = (0, _queryparams.useExplorerQueryParams)({
-        data: {
-            tab: 'finder',
-            datasource,
-            filters,
-            exploredMetric: undefined
-        }
-    });
-    function setDatasource(value) {
-        onChange({
-            datasource: value,
-            filters,
-            exploredMetric
-        });
-    }
-    function setFilters(value) {
-        onChange({
-            datasource,
-            filters: value,
-            exploredMetric
-        });
-    }
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-        ...props,
-        gap: 1,
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-                direction: isMobileSize ? 'column' : 'row',
-                gap: 2,
-                justifyContent: "space-between",
-                children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_FinderFilters.FinderFilters, {
-                        datasource: datasource !== null && datasource !== void 0 ? datasource : _prometheusplugin.DEFAULT_PROM,
-                        filters: filters !== null && filters !== void 0 ? filters : [],
-                        filteredFilters: filteredFilters,
-                        onDatasourceChange: setDatasource,
-                        onFiltersChange: setFilters
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-                        direction: "row",
-                        gap: 1,
-                        alignItems: "center",
-                        children: [
-                            exploredMetric && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
-                                variant: "contained",
-                                "aria-label": "back to metric explorer",
-                                startIcon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ArrowLeft.default, {}),
-                                component: _reactrouterdom.Link,
-                                to: `?${searchParams}`,
-                                children: "Back"
-                            }),
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
-                                direction: "row",
-                                sx: {
-                                    width: isMobileSize ? '100%' : 'unset'
-                                },
-                                justifyContent: isMobileSize ? 'end' : 'unset',
-                                alignItems: "center",
-                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(SettingsMenu, {
-                                    value: settings,
-                                    onChange: handleSettingsUpdate
-                                })
-                            })
-                        ]
-                    })
-                ]
-            }),
-            exploredMetric ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_MetricOverview.MetricOverview, {
-                metricName: exploredMetric,
-                datasource: datasource !== null && datasource !== void 0 ? datasource : _prometheusplugin.DEFAULT_PROM,
-                filters: filteredFilters,
-                isMetadataEnabled: settings.isMetadataEnabled,
-                isPanelEnabled: settings.isPanelEnabled,
-                onFiltersChange: setFilters,
-                onExplore: onExplore
-            }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(MetricNameExplorer, {
-                datasource: datasource !== null && datasource !== void 0 ? datasource : _prometheusplugin.DEFAULT_PROM,
-                filters: filteredFilters,
-                isMetadataEnabled: settings.isMetadataEnabled,
-                onExplore: onExplore
-            })
-        ]
-    });
-}

package/dist/cjs/components/PrometheusMetricsFinder/display/MetricChip.js

@@ -1,61 +0,0 @@
-// Copyright 2024 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, "MetricChip", {
-    enumerable: true,
-    get: function() {
-        return MetricChip;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _material = require("@mui/material");
-function MetricChip({ label, ...props }) {
-    if (label === 'gauge') {
-        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Chip, {
-            label: label,
-            color: "success",
-            ...props
-        });
-    }
-    if (label === 'counter') {
-        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Chip, {
-            label: label,
-            color: "primary",
-            ...props
-        });
-    }
-    if (label === 'histogram') {
-        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Chip, {
-            label: label,
-            color: "warning",
-            ...props
-        });
-    }
-    if (label === 'summary') {
-        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Chip, {
-            label: label,
-            color: "secondary",
-            ...props
-        });
-    }
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Chip, {
-        label: label,
-        sx: {
-            fontStyle: label === 'unknown' ? 'italic' : 'initial'
-        },
-        ...props
-    });
-}

package/dist/cjs/components/PrometheusMetricsFinder/display/list/MetricList.js

@@ -1,224 +0,0 @@
-// Copyright 2024 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: all[name]
-    });
-}
-_export(exports, {
-    MetricList: function() {
-        return MetricList;
-    },
-    MetricRow: function() {
-        return MetricRow;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _material = require("@mui/material");
-const _reactvirtuoso = require("react-virtuoso");
-const _reactrouterdom = require("react-router-dom");
-const _Compass = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Compass"));
-const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
-const _fuzzy = require("@nexucis/fuzzy");
-const _utils = require("../../utils");
-const _queryparams = require("../../../ExploreManager/query-params");
-const _MetricChip = require("../MetricChip");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-function _getRequireWildcardCache(nodeInterop) {
-    if (typeof WeakMap !== "function") return null;
-    var cacheBabelInterop = new WeakMap();
-    var cacheNodeInterop = new WeakMap();
-    return (_getRequireWildcardCache = function(nodeInterop) {
-        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
-    })(nodeInterop);
-}
-function _interop_require_wildcard(obj, nodeInterop) {
-    if (!nodeInterop && obj && obj.__esModule) {
-        return obj;
-    }
-    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
-        return {
-            default: obj
-        };
-    }
-    var cache = _getRequireWildcardCache(nodeInterop);
-    if (cache && cache.has(obj)) {
-        return cache.get(obj);
-    }
-    var newObj = {
-        __proto__: null
-    };
-    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
-    for(var key in obj){
-        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
-            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
-            if (desc && (desc.get || desc.set)) {
-                Object.defineProperty(newObj, key, desc);
-            } else {
-                newObj[key] = obj[key];
-            }
-        }
-    }
-    newObj.default = obj;
-    if (cache) {
-        cache.set(obj, newObj);
-    }
-    return newObj;
-}
-function MetricRow({ children, metricName, datasource, filters, isMetadataEnabled, onExplore }) {
-    const { metadata, isLoading } = (0, _utils.useMetricMetadata)(metricName, datasource, isMetadataEnabled);
-    const searchParams = (0, _queryparams.useExplorerQueryParams)({
-        data: {
-            tab: 'finder',
-            datasource,
-            filters,
-            exploredMetric: metricName
-        }
-    });
-    var _metadata_type;
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {
-                style: {
-                    width: '300px'
-                },
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                    sx: {
-                        fontFamily: 'monospace'
-                    },
-                    children: children !== null && children !== void 0 ? children : metricName
-                })
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {
-                style: {
-                    width: 115,
-                    textAlign: 'center'
-                },
-                children: isMetadataEnabled && isLoading ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Skeleton, {
-                    variant: "rounded",
-                    width: 75
-                }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_MetricChip.MetricChip, {
-                    label: (_metadata_type = metadata === null || metadata === void 0 ? void 0 : metadata.type) !== null && _metadata_type !== void 0 ? _metadata_type : 'unknown'
-                })
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {
-                style: {
-                    width: '100%'
-                },
-                children: isMetadataEnabled && isLoading ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Skeleton, {
-                    variant: "text",
-                    width: 180
-                }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                    sx: {
-                        fontStyle: (metadata === null || metadata === void 0 ? void 0 : metadata.help) ? 'initial' : 'italic',
-                        minWidth: '30vw'
-                    },
-                    children: metadata ? metadata.help : 'unknown'
-                })
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {
-                style: {
-                    width: 140
-                },
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
-                    "aria-label": `explore metric ${metricName}`,
-                    variant: "contained",
-                    startIcon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Compass.default, {}),
-                    style: {
-                        textWrap: 'nowrap'
-                    },
-                    onClick: ()=>onExplore === null || onExplore === void 0 ? void 0 : onExplore(metricName),
-                    component: _reactrouterdom.Link,
-                    to: `?${searchParams}`,
-                    children: "Explore"
-                })
-            })
-        ]
-    });
-}
-function MetricList({ metricNames, filteredResults, datasource, filters, isMetadataEnabled, onExplore, ...props }) {
-    const fuzzy = new _fuzzy.Fuzzy();
-    const fuzzyMetrics = (0, _react.useMemo)(()=>{
-        if (filteredResults) {
-            return filteredResults;
-        }
-        return metricNames.map((metricName)=>({
-                original: metricName
-            }));
-    }, [
-        filteredResults,
-        metricNames
-    ]);
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-        gap: 2,
-        width: "100%",
-        divider: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {
-            orientation: "horizontal",
-            flexItem: true
-        }),
-        ...props,
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactvirtuoso.TableVirtuoso, {
-                style: {
-                    height: '70vh',
-                    width: '100%'
-                },
-                totalCount: fuzzyMetrics.length,
-                itemContent: (index)=>{
-                    var _fuzzyMetrics_index_intervals;
-                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(MetricRow, {
-                        metricName: fuzzyMetrics[index].original,
-                        datasource: datasource,
-                        filters: filters,
-                        isMetadataEnabled: isMetadataEnabled,
-                        onExplore: onExplore,
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-                            dangerouslySetInnerHTML: {
-                                __html: fuzzy.render(fuzzyMetrics[index].original, (_fuzzyMetrics_index_intervals = fuzzyMetrics[index].intervals) !== null && _fuzzyMetrics_index_intervals !== void 0 ? _fuzzyMetrics_index_intervals : [], {
-                                    pre: '<strong style="color:darkorange">',
-                                    post: '</strong>',
-                                    escapeHTML: true
-                                })
-                            }
-                        })
-                    });
-                }
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
-                sx: {
-                    width: '100%'
-                },
-                textAlign: "end",
-                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Typography, {
-                    "data-testid": "finder-total",
-                    children: [
-                        "Total: ",
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)("strong", {
-                            children: metricNames.length
-                        }),
-                        " metrics"
-                    ]
-                })
-            })
-        ]
-    });
-}