@perses-dev/prometheus-plugin 0.50.3 → 0.51.0-beta.2

package/lib/cjs/explore/PrometheusMetricsFinder/display/MetricChip.js

@@ -0,0 +1,61 @@
+// 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/lib/cjs/explore/PrometheusMetricsFinder/display/list/MetricList.js

@@ -0,0 +1,179 @@
+// 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 _fuzzy = require("@nexucis/fuzzy");
+const _explore = require("@perses-dev/explore");
+const _Compass = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Compass"));
+const _react = require("react");
+const _reactrouterdom = require("react-router-dom");
+const _reactvirtuoso = require("react-virtuoso");
+const _utils = require("../../utils");
+const _MetricChip = require("../MetricChip");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function MetricRow({ children, metricName, datasource, filters, isMetadataEnabled, onExplore }) {
+    const { metadata, isLoading } = (0, _utils.useMetricMetadata)(metricName, datasource, isMetadataEnabled);
+    const searchParams = (0, _explore.useExplorerQueryParams)({
+        data: {
+            tab: 'finder',
+            datasource,
+            filters,
+            exploredMetric: metricName
+        }
+    });
+    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 ?? 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 ?? '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?.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?.(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)=>/*#__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 ?? [], {
+                                    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"
+                    ]
+                })
+            })
+        ]
+    });
+}

package/lib/cjs/explore/PrometheusMetricsFinder/filter/FilterInputs.js

@@ -0,0 +1,231 @@
+// 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);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(RawFilterInput, {
+        value: value,
+        labelOptions: labelOptions?.data ?? [],
+        labelValuesOptions: 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 ?? [],
+                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 ?? '');
+                }
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Autocomplete, {
+                freeSolo: true,
+                multiple: value.operator === '=~' || value.operator === '!~',
+                limitTags: 1,
+                disableClearable: true,
+                options: 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/lib/cjs/explore/PrometheusMetricsFinder/filter/FinderFilters.js

@@ -0,0 +1,97 @@
+// 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 _Plus = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Plus"));
+const _prometheusselectors = require("../../../model/prometheus-selectors");
+const _FilterInputs = require("./FilterInputs");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+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: _prometheusselectors.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/plugins/prometheus-time-series-query → lib/cjs/explore/PrometheusMetricsFinder}/index.js

@@ -14,7 +14,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_export_star(require("./PrometheusTimeSeriesQuery"), exports);
+_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)) {