@perses-dev/explore 0.47.1 → 0.48.0-rc0

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

@@ -0,0 +1,156 @@
+// 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 _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 MetricRow({ 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: metricName
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {
+                style: {
+                    minWidth: 'fit-content',
+                    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'
+                    },
+                    children: metadata ? metadata.help : 'unknown'
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {
+                style: {
+                    minWidth: 'fit-content'
+                },
+                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, datasource, filters, isMetadataEnabled, onExplore, ...props }) {
+    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%'
+                },
+                data: metricNames,
+                itemContent: (_, metricName)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(MetricRow, {
+                        metricName: metricName,
+                        datasource: datasource,
+                        filters: filters,
+                        isMetadataEnabled: isMetadataEnabled,
+                        onExplore: onExplore
+                    })
+            }),
+            /*#__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"
+                    ]
+                })
+            })
+        ]
+    });
+}

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

@@ -0,0 +1,232 @@
+// 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, {
+    LabelFilterInput: function() {
+        return LabelFilterInput;
+    },
+    ListboxComponent: function() {
+        return ListboxComponent;
+    },
+    RawFilterInput: function() {
+        return RawFilterInput;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _Check = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Check"));
+const _Delete = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Delete"));
+const _reactvirtuoso = require("react-virtuoso");
+const _utils = require("../utils");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function LabelFilterInput({ datasource, value, filters, onChange, onDelete }) {
+    const filtersWithoutCurrent = (0, _react.useMemo)(()=>filters.filter((filter)=>filter.label !== value.label), [
+        filters,
+        value.label
+    ]);
+    const { data: labelOptions, isLoading: isLabelOptionsLoading } = (0, _utils.useLabels)(filtersWithoutCurrent, datasource);
+    const { data: labelValuesOptions, isLoading: isLabelValuesOptionsLoading } = (0, _utils.useLabelValues)(value.label, filtersWithoutCurrent, datasource);
+    var _labelOptions_data, _labelValuesOptions_data;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(RawFilterInput, {
+        value: value,
+        labelOptions: (_labelOptions_data = labelOptions === null || labelOptions === void 0 ? void 0 : labelOptions.data) !== null && _labelOptions_data !== void 0 ? _labelOptions_data : [],
+        labelValuesOptions: (_labelValuesOptions_data = labelValuesOptions === null || labelValuesOptions === void 0 ? void 0 : labelValuesOptions.data) !== null && _labelValuesOptions_data !== void 0 ? _labelValuesOptions_data : [],
+        isLabelOptionsLoading: isLabelOptionsLoading,
+        isLabelValuesOptionsLoading: isLabelValuesOptionsLoading,
+        onChange: onChange,
+        onDelete: onDelete
+    });
+}
+const ListboxComponent = /*#__PURE__*/ (0, _react.forwardRef)(({ children, ...rest }, ref)=>{
+    const data = children;
+    const localRef = (0, _react.useRef)('500px');
+    const [height, setHeight] = (0, _react.useState)(0);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("ul", {
+        style: {
+            overflow: 'hidden',
+            padding: '0',
+            height: height ? `min(40vh, ${height}px)` : '40vh'
+        },
+        ref: (reference)=>{
+            const maxHeight = reference ? getComputedStyle(reference).maxHeight : null;
+            if (maxHeight && maxHeight !== localRef.current) {
+                localRef.current = maxHeight;
+            }
+            if (typeof ref === 'function') {
+                ref(reference);
+            }
+        },
+        ...rest,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactvirtuoso.Virtuoso, {
+            style: {
+                height: localRef.current,
+                padding: '10px 0'
+            },
+            data: data,
+            totalListHeightChanged: setHeight,
+            itemContent: (index, child)=>{
+                return /*#__PURE__*/ (0, _react.cloneElement)(child, {
+                    index,
+                    title: child.props.children
+                });
+            }
+        })
+    });
+});
+ListboxComponent.displayName = 'ListboxComponent';
+function RawFilterInput({ value, labelOptions, labelValuesOptions, isLabelOptionsLoading, isLabelValuesOptionsLoading, onChange, onDelete }) {
+    const [isEditingLabelName, setIsEditingLabelName] = (0, _react.useState)(value.labelValues.length === 0);
+    const [labelName, setLabelName] = (0, _react.useState)(value.label);
+    function handleLabelConfirmation() {
+        setIsEditingLabelName(false);
+        onChange({
+            label: labelName,
+            labelValues: value.labelValues,
+            operator: value.operator
+        });
+    }
+    function handleKeyPress(event) {
+        if (isEditingLabelName && event.key === 'Enter') {
+            handleLabelConfirmation();
+        }
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Autocomplete, {
+                freeSolo: true,
+                disableClearable: true,
+                options: labelOptions !== null && labelOptions !== void 0 ? labelOptions : [],
+                value: value.label,
+                sx: {
+                    minWidth: 250,
+                    display: isEditingLabelName ? 'block' : 'none'
+                },
+                ListboxComponent: ListboxComponent,
+                loading: isLabelOptionsLoading,
+                renderInput: (params)=>{
+                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                        ...params,
+                        label: "Label Name",
+                        variant: "outlined",
+                        fullWidth: true,
+                        size: "medium",
+                        InputProps: {
+                            ...params.InputProps,
+                            endAdornment: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.InputAdornment, {
+                                position: "end",
+                                children: [
+                                    isLabelOptionsLoading ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CircularProgress, {
+                                        color: "inherit",
+                                        size: 20
+                                    }) : null,
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                        "aria-label": "validate label name",
+                                        onClick: ()=>handleLabelConfirmation(),
+                                        edge: "end",
+                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Check.default, {})
+                                    })
+                                ]
+                            })
+                        }
+                    });
+                },
+                onKeyDown: handleKeyPress,
+                onInputChange: (_, newValue)=>{
+                    setLabelName(newValue !== null && newValue !== void 0 ? newValue : '');
+                }
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Autocomplete, {
+                freeSolo: true,
+                multiple: value.operator === '=~' || value.operator === '!~',
+                limitTags: 1,
+                disableClearable: true,
+                options: labelValuesOptions !== null && labelValuesOptions !== void 0 ? labelValuesOptions : [],
+                value: value.labelValues,
+                ListboxComponent: ListboxComponent,
+                sx: {
+                    minWidth: 250,
+                    display: isEditingLabelName ? 'none' : 'block'
+                },
+                loading: isLabelValuesOptionsLoading,
+                renderInput: (params)=>{
+                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                        ...params,
+                        label: value.label,
+                        variant: "outlined",
+                        fullWidth: true,
+                        size: "medium",
+                        InputProps: {
+                            ...params.InputProps,
+                            startAdornment: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.InputAdornment, {
+                                        position: "start",
+                                        children: value.operator
+                                    }),
+                                    params.InputProps.startAdornment
+                                ]
+                            }),
+                            endAdornment: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.InputAdornment, {
+                                position: "end",
+                                children: [
+                                    isLabelValuesOptionsLoading ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CircularProgress, {
+                                        color: "inherit",
+                                        size: 20
+                                    }) : null,
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                        "aria-label": "delete label filter",
+                                        onClick: ()=>onDelete(),
+                                        edge: "end",
+                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Delete.default, {})
+                                    })
+                                ]
+                            })
+                        }
+                    });
+                },
+                onChange: (_, newValue)=>{
+                    if (typeof newValue === 'string') {
+                        onChange({
+                            label: value.label,
+                            labelValues: [
+                                newValue
+                            ],
+                            operator: value.operator
+                        });
+                    }
+                    if (Array.isArray(newValue)) {
+                        onChange({
+                            label: value.label,
+                            labelValues: newValue,
+                            operator: value.operator
+                        });
+                    }
+                }
+            })
+        ]
+    });
+}

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

@@ -0,0 +1,139 @@
+// 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, "FinderFilters", {
+    enumerable: true,
+    get: function() {
+        return FinderFilters;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _prometheusplugin = require("@perses-dev/prometheus-plugin");
+const _Plus = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Plus"));
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _FilterInputs = require("./FilterInputs");
+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 FinderFilters({ datasource, filters, filteredFilters, onDatasourceChange, onFiltersChange, ...props }) {
+    function handleDatasourceChange(next) {
+        onDatasourceChange(next);
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+        ...props,
+        direction: "row",
+        alignItems: "center",
+        flexWrap: "wrap",
+        gap: 1,
+        sx: {
+            width: '100%'
+        },
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.FormControl, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.InputLabel, {
+                        children: "Prometheus Datasource"
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DatasourceSelect, {
+                        datasourcePluginKind: _prometheusplugin.PROM_DATASOURCE_KIND,
+                        value: datasource,
+                        onChange: handleDatasourceChange,
+                        label: "Prometheus Datasource"
+                    })
+                ]
+            }),
+            filters.map((filter, index)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_FilterInputs.LabelFilterInput, {
+                    datasource: datasource,
+                    filters: filteredFilters,
+                    value: filter,
+                    onChange: (next)=>{
+                        const nextFilters = [
+                            ...filters
+                        ];
+                        nextFilters[index] = next;
+                        onFiltersChange(nextFilters);
+                    },
+                    onDelete: ()=>{
+                        const nextFilters = [
+                            ...filters
+                        ];
+                        nextFilters.splice(index, 1);
+                        onFiltersChange(nextFilters);
+                    }
+                }, index)),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                startIcon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Plus.default, {}),
+                "aria-label": "add filter",
+                onClick: ()=>{
+                    onFiltersChange([
+                        ...filters,
+                        {
+                            label: '',
+                            labelValues: [],
+                            operator: '=~'
+                        }
+                    ]);
+                },
+                children: "Add filter"
+            })
+        ]
+    });
+}

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

@@ -0,0 +1,30 @@
+// Copyright 2023 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("./PrometheusMetricsFinder"), 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;
+}