@perses-dev/explore 0.50.3 → 0.51.0-beta.1

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

@@ -1,232 +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, {
-    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

@@ -1,139 +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, "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

@@ -1,30 +0,0 @@
-// 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;
-}

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

@@ -1,244 +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, {
-    MetricOverview: function() {
-        return MetricOverview;
-    },
-    OverviewPanel: function() {
-        return OverviewPanel;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _material = require("@mui/material");
-const _react = require("react");
-const _dashboards = require("@perses-dev/dashboards");
-const _useresizeobserver = /*#__PURE__*/ _interop_require_default(require("use-resize-observer"));
-const _pluginsystem = require("@perses-dev/plugin-system");
-const _HelpCircleOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/HelpCircleOutline"));
-const _types = require("../types");
-const _utils = require("../utils");
-const _OverviewTab = require("./tabs/OverviewTab");
-const _JobTab = require("./tabs/JobTab");
-const _SimilarTab = require("./tabs/SimilarTab");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-function OverviewPanel({ metricName, datasource, filters, type, isLoading, ...props }) {
-    const { width, ref: panelRef } = (0, _useresizeobserver.default)();
-    const suggestedStepMs = (0, _pluginsystem.useSuggestedStepMs)(width);
-    const [rateEnabled, setRateEnabled] = (0, _react.useState)(true);
-    const { queries, definitions } = (0, _react.useMemo)(()=>{
-        const expr = type === 'counter' || rateEnabled && (type === undefined || type === 'summary' || type === 'histogram') ? `rate({__name__="${metricName}", ${(0, _types.computeFilterExpr)(filters)}}[5m])` : `{__name__="${metricName}", ${(0, _types.computeFilterExpr)(filters)}}`;
-        const queries = [
-            {
-                kind: 'TimeSeriesQuery',
-                spec: {
-                    plugin: {
-                        kind: 'PrometheusTimeSeriesQuery',
-                        spec: {
-                            datasource: datasource,
-                            query: expr
-                        }
-                    }
-                }
-            }
-        ];
-        const definitions = queries.map((query)=>{
-            return {
-                kind: query.spec.plugin.kind,
-                spec: query.spec.plugin.spec
-            };
-        });
-        return {
-            queries,
-            definitions
-        };
-    }, [
-        datasource,
-        filters,
-        metricName,
-        rateEnabled,
-        type
-    ]);
-    if (isLoading) {
-        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
-            ...props,
-            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Skeleton, {
-                variant: "rectangular",
-                height: "100%"
-            })
-        });
-    }
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-        ref: panelRef,
-        alignItems: "end",
-        ...props,
-        children: [
-            (type === undefined || type === 'summary' || type === 'histogram') && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
-                control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Checkbox, {
-                    size: "small"
-                }),
-                label: "Enable rate",
-                checked: rateEnabled,
-                onChange: (_, checked)=>setRateEnabled(checked)
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DataQueriesProvider, {
-                definitions: definitions,
-                options: {
-                    suggestedStepMs,
-                    mode: 'range'
-                },
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_dashboards.Panel, {
-                    panelOptions: {
-                        hideHeader: true
-                    },
-                    definition: {
-                        kind: 'Panel',
-                        spec: {
-                            queries: queries,
-                            display: {
-                                name: ''
-                            },
-                            plugin: {
-                                kind: 'TimeSeriesChart',
-                                spec: {}
-                            }
-                        }
-                    }
-                })
-            })
-        ]
-    });
-}
-function MetricOverview({ metricName, datasource, filters, isMetadataEnabled, isPanelEnabled, onExplore, onFiltersChange, ...props }) {
-    const [tab, setTab] = (0, _react.useState)(0);
-    const { metadata, isLoading: isMetadataLoading, error } = (0, _utils.useMetricMetadata)(metricName, datasource);
-    const filtersWithMetricName = (0, _react.useMemo)(()=>{
-        const result = filters.filter((filter)=>filter.label !== '__name__');
-        result.push({
-            label: '__name__',
-            labelValues: [
-                metricName
-            ],
-            operator: '='
-        });
-        return result;
-    }, [
-        filters,
-        metricName
-    ]);
-    function handleFilterAdd(filter) {
-        onFiltersChange([
-            ...filters,
-            filter
-        ]);
-    }
-    function handleExplore(metricName, tab) {
-        onExplore === null || onExplore === void 0 ? void 0 : onExplore(metricName);
-        if (tab !== undefined) {
-            setTab(tab);
-        }
-    }
-    if (error) {
-        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-            ...props,
-            children: [
-                "Error: ",
-                error.message
-            ]
-        });
-    }
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-        sx: {
-            width: '100%'
-        },
-        ...props,
-        children: [
-            isPanelEnabled && /*#__PURE__*/ (0, _jsxruntime.jsx)(OverviewPanel, {
-                metricName: metricName,
-                filters: filters,
-                datasource: datasource,
-                type: metadata === null || metadata === void 0 ? void 0 : metadata.type,
-                height: "250px",
-                isLoading: isMetadataEnabled && isMetadataLoading
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Tabs, {
-                value: tab,
-                onChange: (_, state)=>setTab(state),
-                variant: "scrollable",
-                sx: {
-                    borderBottom: 1,
-                    borderColor: 'divider'
-                },
-                children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tab, {
-                        label: "Overview"
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tab, {
-                        label: "Job related metrics",
-                        icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tooltip, {
-                            title: "All metrics scraped from the same job",
-                            placement: "top",
-                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_HelpCircleOutline.default, {})
-                        }),
-                        iconPosition: "end"
-                    }),
-                    filters.length > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tab, {
-                        label: "Similar metrics",
-                        icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tooltip, {
-                            title: "All metrics matching current filters",
-                            placement: "top",
-                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_HelpCircleOutline.default, {})
-                        }),
-                        iconPosition: "end"
-                    })
-                ]
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-                gap: 1,
-                children: [
-                    tab === 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_OverviewTab.OverviewTab, {
-                        metricName: metricName,
-                        datasource: datasource,
-                        filters: filtersWithMetricName,
-                        onFilterAdd: handleFilterAdd
-                    }),
-                    tab === 1 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_JobTab.JobTab, {
-                        filters: filtersWithMetricName,
-                        datasource: datasource,
-                        isMetadataEnabled: isMetadataEnabled,
-                        onExplore: (metricName)=>handleExplore(metricName, 0)
-                    }),
-                    tab === 2 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_SimilarTab.SimilarTab, {
-                        filters: filtersWithMetricName,
-                        datasource: datasource,
-                        isMetadataEnabled: isMetadataEnabled,
-                        onExplore: (metricName)=>handleExplore(metricName, 0)
-                    })
-                ]
-            })
-        ]
-    });
-}