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

package/lib/cjs/components/promql/serialize.js

@@ -0,0 +1,88 @@
+// Copyright 2025 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.
+// Forked from https://github.com/prometheus/prometheus/blob/65f610353919b1c7b42d3776c3a95b68046a6bba/web/ui/mantine-ui/src/promql/serialize.ts
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const _core = require("@perses-dev/core");
+const _ast = require("./ast");
+const _utils = require("./utils");
+const serializeAtAndOffset = (timestamp, startOrEnd, offset)=>`${timestamp !== null ? ` @ ${(timestamp / 1000).toFixed(3)}` : startOrEnd !== null ? ` @ ${startOrEnd}()` : ''}${offset === 0 ? '' : offset > 0 ? ` offset ${(0, _core.formatDuration)((0, _core.msToPrometheusDuration)(offset))}` : ` offset -${(0, _core.formatDuration)((0, _core.msToPrometheusDuration)(-offset))}`}`;
+const serializeSelector = (node)=>{
+    const matchers = node.matchers.filter((m)=>!(m.name === '__name__' && m.type === _ast.matchType.equal && m.value === node.name)).map((m)=>`${m.name}${m.type}"${(0, _utils.escapeString)(m.value)}"`);
+    const range = node.type === _ast.nodeType.matrixSelector ? `[${(0, _core.formatDuration)((0, _core.msToPrometheusDuration)(node.range))}]` : '';
+    const atAndOffset = serializeAtAndOffset(node.timestamp, node.startOrEnd, node.offset);
+    return `${node.name}${matchers.length > 0 ? `{${matchers.join(',')}}` : ''}${range}${atAndOffset}`;
+};
+const serializeNode = (node, indent = 0, pretty = false, initialIndent = true)=>{
+    const childListSeparator = pretty ? '\n' : '';
+    const childSeparator = pretty ? '\n' : ' ';
+    const childIndent = indent + 2;
+    const ind = pretty ? ' '.repeat(indent) : '';
+    // Needed for unary operators.
+    const initialInd = initialIndent ? ind : '';
+    switch(node.type){
+        case _ast.nodeType.aggregation:
+            return `${initialInd}${node.op}${node.without ? ` without(${node.grouping.join(', ')}) ` : node.grouping.length > 0 ? ` by(${node.grouping.join(', ')}) ` : ''}(${childListSeparator}${_utils.aggregatorsWithParam.includes(node.op) && node.param !== null ? `${serializeNode(node.param, childIndent, pretty)},${childSeparator}` : ''}${serializeNode(node.expr, childIndent, pretty)}${childListSeparator}${ind})`;
+        case _ast.nodeType.subquery:
+            return `${initialInd}${serializeNode(node.expr, indent, pretty)}[${(0, _core.formatDuration)((0, _core.msToPrometheusDuration)(node.range))}:${node.step !== 0 ? (0, _core.formatDuration)((0, _core.msToPrometheusDuration)(node.step)) : ''}]${serializeAtAndOffset(node.timestamp, node.startOrEnd, node.offset)}`;
+        case _ast.nodeType.parenExpr:
+            return `${initialInd}(${childListSeparator}${serializeNode(node.expr, childIndent, pretty)}${childListSeparator}${ind})`;
+        case _ast.nodeType.call:
+            {
+                const sep = node.args.length > 0 ? childListSeparator : '';
+                return `${initialInd}${node.func.name}(${sep}${node.args.map((arg)=>serializeNode(arg, childIndent, pretty)).join(',' + childSeparator)}${sep}${node.args.length > 0 ? ind : ''})`;
+            }
+        case _ast.nodeType.matrixSelector:
+            return `${initialInd}${serializeSelector(node)}`;
+        case _ast.nodeType.vectorSelector:
+            return `${initialInd}${serializeSelector(node)}`;
+        case _ast.nodeType.numberLiteral:
+            return `${initialInd}${node.val}`;
+        case _ast.nodeType.stringLiteral:
+            return `${initialInd}"${(0, _utils.escapeString)(node.val)}"`;
+        case _ast.nodeType.unaryExpr:
+            return `${initialInd}${node.op}${serializeNode(node.expr, indent, pretty, false)}`;
+        case _ast.nodeType.binaryExpr:
+            {
+                let matching = '';
+                let grouping = '';
+                const vm = node.matching;
+                if (vm !== null && (vm.labels.length > 0 || vm.on)) {
+                    if (vm.on) {
+                        matching = ` on(${vm.labels.join(', ')})`;
+                    } else {
+                        matching = ` ignoring(${vm.labels.join(', ')})`;
+                    }
+                    if (vm.card === _ast.vectorMatchCardinality.manyToOne || vm.card === _ast.vectorMatchCardinality.oneToMany) {
+                        grouping = ` group_${vm.card === _ast.vectorMatchCardinality.manyToOne ? 'left' : 'right'}(${vm.include.join(',')})`;
+                    }
+                }
+                return `${serializeNode((0, _utils.maybeParenthesizeBinopChild)(node.op, node.lhs), childIndent, pretty)}${childSeparator}${ind}${node.op}${node.bool ? ' bool' : ''}${matching}${grouping}${childSeparator}${serializeNode((0, _utils.maybeParenthesizeBinopChild)(node.op, node.rhs), childIndent, pretty)}`;
+            }
+        case _ast.nodeType.placeholder:
+            // TODO: Should we just throw an error when trying to serialize an AST containing a placeholder node?
+            // (that would currently break editing-as-text of ASTs that contain placeholders)
+            return `${initialInd}…${node.children.length > 0 ? `(${childListSeparator}${node.children.map((child)=>serializeNode(child, childIndent, pretty)).join(',' + childSeparator)}${childListSeparator}${ind})` : ''}`;
+        default:
+            throw new Error('unsupported node type');
+    }
+};
+const _default = serializeNode;

package/{dist → lib}/cjs/components/promql/utils.js

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// Copyright 2025 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
@@ -22,6 +22,9 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    aggregatorsWithParam: function() {
+        return aggregatorsWithParam;
+    },
     escapeString: function() {
         return escapeString;
     },
@@ -104,6 +107,14 @@ const getNodeChildren = (node)=>{
             throw new Error('unsupported node type');
     }
 };
+const aggregatorsWithParam = [
+    'topk',
+    'bottomk',
+    'quantile',
+    'count_values',
+    'limitk',
+    'limit_ratio'
+];
 const escapeString = (str)=>{
     return str.replace(/([\\"])/g, '\\$1');
 };

package/{dist/cjs/components/parse.js → lib/cjs/components/query.js}

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// Copyright 2025 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
@@ -14,9 +14,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "useParseQuery", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useInstantQuery: function() {
+        return useInstantQuery;
+    },
+    useParseQuery: function() {
         return useParseQuery;
     }
 });
@@ -40,3 +48,28 @@ function useParseQuery(content, datasource, enabled) {
         }
     });
 }
+function useInstantQuery(content, datasource, enabled) {
+    const { data: client } = (0, _pluginsystem.useDatasourceClient)(datasource);
+    return (0, _reactquery.useQuery)({
+        enabled: !!client && enabled,
+        // TODO: for some reason the caching is not working: identical nodes still fire their requests after each change made to the promQL
+        queryKey: [
+            'instantQuery',
+            content,
+            'datasource',
+            datasource.kind
+        ],
+        queryFn: async ()=>{
+            const params = {
+                query: content
+            };
+            const startTime = performance.now();
+            const response = await client.instantQuery(params);
+            const responseTime = performance.now() - startTime;
+            return {
+                ...response,
+                responseTime
+            };
+        }
+    });
+}

package/lib/cjs/env.d.js

@@ -0,0 +1,14 @@
+// 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.
+/// <reference types="@rsbuild/core/types" />
+"use strict";

package/lib/cjs/explore/PrometheusExplorer.js

@@ -0,0 +1,203 @@
+// 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, "PrometheusExplorer", {
+    enumerable: true,
+    get: function() {
+        return PrometheusExplorer;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _explore = require("@perses-dev/explore");
+const _useresizeobserver = /*#__PURE__*/ _interop_require_default(require("use-resize-observer"));
+const _dashboards = require("@perses-dev/dashboards");
+const _prometheusselectors = require("../model/prometheus-selectors");
+const _PrometheusMetricsFinder = require("./PrometheusMetricsFinder");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const PANEL_PREVIEW_HEIGHT = 700;
+function TimeSeriesPanel({ queries }) {
+    const { width, ref: boxRef } = (0, _useresizeobserver.default)();
+    const height = PANEL_PREVIEW_HEIGHT;
+    const suggestedStepMs = (0, _pluginsystem.useSuggestedStepMs)(width);
+    // map TimeSeriesQueryDefinition to Definition<UnknownSpec>
+    const definitions = queries.length ? queries.map((query)=>{
+        return {
+            kind: query.spec.plugin.kind,
+            spec: query.spec.plugin.spec
+        };
+    }) : [];
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+        ref: boxRef,
+        height: height,
+        children: /*#__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 MetricDataTable({ queries }) {
+    const height = PANEL_PREVIEW_HEIGHT;
+    // map TimeSeriesQueryDefinition to Definition<UnknownSpec>
+    const definitions = queries.map((query)=>{
+        return {
+            kind: query.spec.plugin.kind,
+            spec: query.spec.plugin.spec
+        };
+    });
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+        height: height,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DataQueriesProvider, {
+            definitions: definitions,
+            options: {
+                mode: 'instant'
+            },
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_dashboards.Panel, {
+                panelOptions: {
+                    hideHeader: true
+                },
+                definition: {
+                    kind: 'Panel',
+                    spec: {
+                        queries: queries,
+                        display: {
+                            name: ''
+                        },
+                        plugin: {
+                            kind: 'TimeSeriesTable',
+                            spec: {}
+                        }
+                    }
+                }
+            })
+        })
+    });
+}
+function PrometheusExplorer() {
+    const { data: { tab = 'table', queries = [], datasource = _prometheusselectors.DEFAULT_PROM, filters = [], exploredMetric = undefined }, setData } = (0, _explore.useExplorerManagerContext)();
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+        gap: 2,
+        sx: {
+            width: '100%'
+        },
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Tabs, {
+                value: tab,
+                onChange: (_, state)=>setData({
+                        tab: state,
+                        queries
+                    }),
+                variant: "scrollable",
+                sx: {
+                    borderBottom: 1,
+                    borderColor: 'divider'
+                },
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tab, {
+                        value: "table",
+                        label: "Table"
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tab, {
+                        value: "graph",
+                        label: "Graph"
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tab, {
+                        value: "finder",
+                        label: "Finder"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                gap: 1,
+                children: [
+                    tab === 'table' && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.MultiQueryEditor, {
+                                queryTypes: [
+                                    'TimeSeriesQuery'
+                                ],
+                                onChange: (state)=>setData({
+                                        tab,
+                                        queries: state
+                                    }),
+                                queries: queries
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(MetricDataTable, {
+                                queries: queries
+                            })
+                        ]
+                    }),
+                    tab === 'graph' && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.MultiQueryEditor, {
+                                queryTypes: [
+                                    'TimeSeriesQuery'
+                                ],
+                                onChange: (state)=>setData({
+                                        tab,
+                                        queries: state
+                                    }),
+                                queries: queries
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(TimeSeriesPanel, {
+                                queries: queries
+                            })
+                        ]
+                    }),
+                    tab === 'finder' && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PrometheusMetricsFinder.PrometheusMetricsFinder, {
+                            onChange: (state)=>setData({
+                                    tab,
+                                    ...state
+                                }),
+                            value: {
+                                datasource,
+                                filters,
+                                exploredMetric
+                            }
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}

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

@@ -0,0 +1,268 @@
+// 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 _fuzzy = require("@nexucis/fuzzy");
+const _explore = require("@perses-dev/explore");
+const _ArrowLeft = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ArrowLeft"));
+const _Cog = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Cog"));
+const _Magnify = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Magnify"));
+const _react = require("react");
+const _reactrouterdom = require("react-router-dom");
+const _model = require("../../model");
+const _MetricList = require("./display/list/MetricList");
+const _FinderFilters = require("./filter/FinderFilters");
+const _MetricOverview = require("./overview/MetricOverview");
+const _utils = require("./utils");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+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?.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, {})
+        });
+    }
+    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 ?? [],
+                filteredResults: filteredResults,
+                datasource: datasource,
+                filters: filters,
+                isMetadataEnabled: isMetadataEnabled,
+                onExplore: onExplore
+            })
+        ]
+    });
+}
+function PrometheusMetricsFinder({ value: { datasource = _model.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, _explore.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 ?? _model.DEFAULT_PROM,
+                        filters: 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 ?? _model.DEFAULT_PROM,
+                filters: filteredFilters,
+                isMetadataEnabled: settings.isMetadataEnabled,
+                isPanelEnabled: settings.isPanelEnabled,
+                onFiltersChange: setFilters,
+                onExplore: onExplore
+            }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(MetricNameExplorer, {
+                datasource: datasource ?? _model.DEFAULT_PROM,
+                filters: filteredFilters,
+                isMetadataEnabled: settings.isMetadataEnabled,
+                onExplore: onExplore
+            })
+        ]
+    });
+}