@perses-dev/explore 0.47.0 → 0.48.0-rc.1

package/dist/components/ExploreManager/TracesExplorer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ExploreManager/TracesExplorer.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { DataQueriesProvider, MultiQueryEditor, useDataQueries } from '@perses-dev/plugin-system';\nimport { Box, Stack } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary, LoadingOverlay, NoDataOverlay } from '@perses-dev/components';\nimport { Panel } from '@perses-dev/dashboards';\nimport { QueryDefinition, isValidTraceId } from '@perses-dev/core';\nimport { PANEL_PREVIEW_HEIGHT } from './constants';\nimport { useExplorerManagerContext } from './ExplorerManagerProvider';\n\ninterface SearchResultsPanelProps {\n  queries: QueryDefinition[];\n}\n\nfunction SearchResultsPanel({ queries }: SearchResultsPanelProps) {\n  const { isFetching, isLoading, queryResults } = useDataQueries('TraceQuery');\n\n  // no query executed, show empty panel\n  if (queryResults.length === 0) {\n    return <></>;\n  }\n\n  if (isLoading || isFetching) {\n    return <LoadingOverlay />;\n  }\n\n  const queryError = queryResults.find((d) => d.error);\n  if (queryError) {\n    throw queryError.error;\n  }\n\n  const tracesFound = queryResults.some((traceData) => (traceData.data?.searchResult ?? []).length > 0);\n  if (!tracesFound) {\n    return <NoDataOverlay resource=\"traces\" />;\n  }\n\n  return (\n    <Stack sx={{ height: '100%' }} gap={2}>\n      <Box sx={{ height: '35%', flexShrink: 0 }}>\n        <Panel\n          panelOptions={{\n            hideHeader: true,\n          }}\n          definition={{\n            kind: 'Panel',\n            spec: { queries, display: { name: '' }, plugin: { kind: 'ScatterChart', spec: {} } },\n          }}\n        />\n      </Box>\n      <Panel\n        sx={{ flexGrow: 1 }}\n        panelOptions={{\n          hideHeader: true,\n        }}\n        definition={{\n          kind: 'Panel',\n          spec: { queries, display: { name: '' }, plugin: { kind: 'TraceTable', spec: {} } },\n        }}\n      />\n    </Stack>\n  );\n}\n\nfunction TracingGanttChartPanel({ queries }: { queries: QueryDefinition[] }) {\n  return (\n    <Panel\n      panelOptions={{\n        hideHeader: true,\n      }}\n      definition={{\n        kind: 'Panel',\n        spec: { queries, display: { name: '' }, plugin: { kind: 'TracingGanttChart', spec: {} } },\n      }}\n    />\n  );\n}\n\nexport function TracesExplorer() {\n  const { queries, setQueries } = useExplorerManagerContext();\n\n  // map TraceQueryDefinition to Definition<UnknownSpec>\n  const definitions = queries.length\n    ? queries.map((query) => {\n        return {\n          kind: query.spec.plugin.kind,\n          spec: query.spec.plugin.spec,\n        };\n      })\n    : [];\n\n  // Cannot cast to TempoTraceQuerySpec because 'tempo-plugin' types are not accessible in @perses-dev/explore\n  const isSingleTrace =\n    queries.length === 1 &&\n    queries[0]?.kind === 'TraceQuery' &&\n    queries[0]?.spec.plugin.kind === 'TempoTraceQuery' &&\n    isValidTraceId((queries[0]?.spec.plugin.spec as any).query ?? ''); // eslint-disable-line @typescript-eslint/no-explicit-any\n\n  return (\n    <Stack gap={2} sx={{ width: '100%' }}>\n      <MultiQueryEditor queryTypes={['TraceQuery']} onChange={setQueries} queries={queries} />\n\n      <ErrorBoundary FallbackComponent={ErrorAlert} resetKeys={[queries]}>\n        <DataQueriesProvider definitions={definitions}>\n          <Box height={PANEL_PREVIEW_HEIGHT}>\n            {isSingleTrace ? <TracingGanttChartPanel queries={queries} /> : <SearchResultsPanel queries={queries} />}\n          </Box>\n        </DataQueriesProvider>\n      </ErrorBoundary>\n    </Stack>\n  );\n}\n"],"names":["DataQueriesProvider","MultiQueryEditor","useDataQueries","Box","Stack","ErrorAlert","ErrorBoundary","LoadingOverlay","NoDataOverlay","Panel","isValidTraceId","PANEL_PREVIEW_HEIGHT","useExplorerManagerContext","SearchResultsPanel","queries","isFetching","isLoading","queryResults","length","queryError","find","d","error","tracesFound","some","traceData","data","searchResult","resource","sx","height","gap","flexShrink","panelOptions","hideHeader","definition","kind","spec","display","name","plugin","flexGrow","TracingGanttChartPanel","TracesExplorer","setQueries","definitions","map","query","isSingleTrace","width","queryTypes","onChange","FallbackComponent","resetKeys"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/ExploreManager/TracesExplorer.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { DataQueriesProvider, MultiQueryEditor, useDataQueries } from '@perses-dev/plugin-system';\nimport { Box, Stack } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary, LoadingOverlay, NoDataOverlay } from '@perses-dev/components';\nimport { Panel } from '@perses-dev/dashboards';\nimport { QueryDefinition, isValidTraceId } from '@perses-dev/core';\nimport { PANEL_PREVIEW_HEIGHT } from './constants';\nimport { useExplorerManagerContext } from './ExplorerManagerProvider';\n\ninterface TracesExplorerQueryParams {\n  queries?: QueryDefinition[];\n}\n\ninterface SearchResultsPanelProps {\n  queries: QueryDefinition[];\n}\n\nfunction SearchResultsPanel({ queries }: SearchResultsPanelProps) {\n  const { isFetching, isLoading, queryResults } = useDataQueries('TraceQuery');\n\n  // no query executed, show empty panel\n  if (queryResults.length === 0) {\n    return <></>;\n  }\n\n  if (isLoading || isFetching) {\n    return <LoadingOverlay />;\n  }\n\n  const queryError = queryResults.find((d) => d.error);\n  if (queryError) {\n    throw queryError.error;\n  }\n\n  const tracesFound = queryResults.some((traceData) => (traceData.data?.searchResult ?? []).length > 0);\n  if (!tracesFound) {\n    return <NoDataOverlay resource=\"traces\" />;\n  }\n\n  return (\n    <Stack sx={{ height: '100%' }} gap={2}>\n      <Box sx={{ height: '35%', flexShrink: 0 }}>\n        <Panel\n          panelOptions={{\n            hideHeader: true,\n          }}\n          definition={{\n            kind: 'Panel',\n            spec: { queries, display: { name: '' }, plugin: { kind: 'ScatterChart', spec: {} } },\n          }}\n        />\n      </Box>\n      <Panel\n        sx={{ flexGrow: 1 }}\n        panelOptions={{\n          hideHeader: true,\n        }}\n        definition={{\n          kind: 'Panel',\n          spec: { queries, display: { name: '' }, plugin: { kind: 'TraceTable', spec: {} } },\n        }}\n      />\n    </Stack>\n  );\n}\n\nfunction TracingGanttChartPanel({ queries }: { queries: QueryDefinition[] }) {\n  return (\n    <Panel\n      panelOptions={{\n        hideHeader: true,\n      }}\n      definition={{\n        kind: 'Panel',\n        spec: { queries, display: { name: '' }, plugin: { kind: 'TracingGanttChart', spec: {} } },\n      }}\n    />\n  );\n}\n\nexport function TracesExplorer() {\n  const {\n    data: { queries = [] },\n    setData,\n  } = useExplorerManagerContext<TracesExplorerQueryParams>();\n\n  // map TraceQueryDefinition to Definition<UnknownSpec>\n  const definitions = queries.length\n    ? queries.map((query: QueryDefinition) => {\n        return {\n          kind: query.spec.plugin.kind,\n          spec: query.spec.plugin.spec,\n        };\n      })\n    : [];\n\n  // Cannot cast to TempoTraceQuerySpec because 'tempo-plugin' types are not accessible in @perses-dev/explore\n  const isSingleTrace =\n    queries.length === 1 &&\n    queries[0]?.kind === 'TraceQuery' &&\n    queries[0]?.spec.plugin.kind === 'TempoTraceQuery' &&\n    isValidTraceId((queries[0]?.spec.plugin.spec as any).query ?? ''); // eslint-disable-line @typescript-eslint/no-explicit-any\n\n  return (\n    <Stack gap={2} sx={{ width: '100%' }}>\n      <MultiQueryEditor\n        queryTypes={['TraceQuery']}\n        onChange={(newQueries) => setData({ queries: newQueries })}\n        queries={queries}\n      />\n\n      <ErrorBoundary FallbackComponent={ErrorAlert} resetKeys={[queries]}>\n        <DataQueriesProvider definitions={definitions}>\n          <Box height={PANEL_PREVIEW_HEIGHT}>\n            {isSingleTrace ? <TracingGanttChartPanel queries={queries} /> : <SearchResultsPanel queries={queries} />}\n          </Box>\n        </DataQueriesProvider>\n      </ErrorBoundary>\n    </Stack>\n  );\n}\n"],"names":["DataQueriesProvider","MultiQueryEditor","useDataQueries","Box","Stack","ErrorAlert","ErrorBoundary","LoadingOverlay","NoDataOverlay","Panel","isValidTraceId","PANEL_PREVIEW_HEIGHT","useExplorerManagerContext","SearchResultsPanel","queries","isFetching","isLoading","queryResults","length","queryError","find","d","error","tracesFound","some","traceData","data","searchResult","resource","sx","height","gap","flexShrink","panelOptions","hideHeader","definition","kind","spec","display","name","plugin","flexGrow","TracingGanttChartPanel","TracesExplorer","setData","definitions","map","query","isSingleTrace","width","queryTypes","onChange","newQueries","FallbackComponent","resetKeys"],"mappings":"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"}

package/dist/components/ExploreManager/query-params.d.ts

@@ -0,0 +1,17 @@
+export declare const explorerQueryConfig: {
+    refresh: import("use-query-params").QueryParamConfig<import("@perses-dev/plugin-system").TimeOptionValue, import("@perses-dev/plugin-system").TimeOptionValue>;
+    start: import("use-query-params").QueryParamConfig<import("@perses-dev/plugin-system").TimeOptionValue, import("@perses-dev/plugin-system").TimeOptionValue>;
+    end: import("use-query-params").QueryParamConfig<import("@perses-dev/plugin-system").TimeOptionValue, import("@perses-dev/plugin-system").TimeOptionValue>;
+    explorer: import("use-query-params").QueryParamConfig<string | null | undefined, string | null | undefined>;
+    data: import("use-query-params").QueryParamConfig<any, any>;
+};
+interface ExplorerQueryData {
+    refresh?: Date;
+    start?: Date;
+    end?: Date;
+    explorer?: string;
+    data?: Record<string, unknown>;
+}
+export declare function useExplorerQueryParams(inputs: ExplorerQueryData): string;
+export {};
+//# sourceMappingURL=query-params.d.ts.map

package/dist/components/ExploreManager/query-params.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"query-params.d.ts","sourceRoot":"","sources":["../../../src/components/ExploreManager/query-params.ts"],"names":[],"mappings":"AAiBA,eAAO,MAAM,mBAAmB;;;;;;CAM/B,CAAC;AAEF,UAAU,iBAAiB;IACzB,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,KAAK,CAAC,EAAE,IAAI,CAAC;IACb,GAAG,CAAC,EAAE,IAAI,CAAC;IACX,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAChC;AAGD,wBAAgB,sBAAsB,CAAC,MAAM,EAAE,iBAAiB,GAAG,MAAM,CAGxE"}

package/dist/components/ExploreManager/query-params.js

@@ -0,0 +1,34 @@
+// 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.
+import { encodeQueryParams, JsonParam, StringParam, useQueryParams } from 'use-query-params';
+import { TimeRangeParam } from '@perses-dev/plugin-system';
+import { stringify } from 'qs';
+export const explorerQueryConfig = {
+    refresh: TimeRangeParam,
+    start: TimeRangeParam,
+    end: TimeRangeParam,
+    explorer: StringParam,
+    data: JsonParam
+};
+// Provide a query string for the explorer page using the given inputs, but also including any existing query params
+export function useExplorerQueryParams(inputs) {
+    const [query] = useQueryParams(explorerQueryConfig, {
+        updateType: 'replaceIn'
+    });
+    return stringify(encodeQueryParams(explorerQueryConfig, {
+        ...query,
+        ...inputs
+    }));
+}
+
+//# sourceMappingURL=query-params.js.map

package/dist/components/ExploreManager/query-params.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ExploreManager/query-params.ts"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { encodeQueryParams, JsonParam, StringParam, useQueryParams } from 'use-query-params';\nimport { TimeRangeParam } from '@perses-dev/plugin-system';\nimport { stringify } from 'qs';\n\nexport const explorerQueryConfig = {\n  refresh: TimeRangeParam,\n  start: TimeRangeParam,\n  end: TimeRangeParam,\n  explorer: StringParam,\n  data: JsonParam,\n};\n\ninterface ExplorerQueryData {\n  refresh?: Date;\n  start?: Date;\n  end?: Date;\n  explorer?: string;\n  data?: Record<string, unknown>;\n}\n\n// Provide a query string for the explorer page using the given inputs, but also including any existing query params\nexport function useExplorerQueryParams(inputs: ExplorerQueryData): string {\n  const [query] = useQueryParams(explorerQueryConfig, { updateType: 'replaceIn' });\n  return stringify(encodeQueryParams(explorerQueryConfig, { ...query, ...inputs }));\n}\n"],"names":["encodeQueryParams","JsonParam","StringParam","useQueryParams","TimeRangeParam","stringify","explorerQueryConfig","refresh","start","end","explorer","data","useExplorerQueryParams","inputs","query","updateType"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,iBAAiB,EAAEC,SAAS,EAAEC,WAAW,EAAEC,cAAc,QAAQ,mBAAmB;AAC7F,SAASC,cAAc,QAAQ,4BAA4B;AAC3D,SAASC,SAAS,QAAQ,KAAK;AAE/B,OAAO,MAAMC,sBAAsB;IACjCC,SAASH;IACTI,OAAOJ;IACPK,KAAKL;IACLM,UAAUR;IACVS,MAAMV;AACR,EAAE;AAUF,oHAAoH;AACpH,OAAO,SAASW,uBAAuBC,MAAyB;IAC9D,MAAM,CAACC,MAAM,GAAGX,eAAeG,qBAAqB;QAAES,YAAY;IAAY;IAC9E,OAAOV,UAAUL,kBAAkBM,qBAAqB;QAAE,GAAGQ,KAAK;QAAE,GAAGD,MAAM;IAAC;AAChF"}

package/dist/components/PrometheusMetricsFinder/PrometheusMetricsFinder.d.ts

@@ -0,0 +1,30 @@
+import { StackProps } from '@mui/material';
+import { DatasourceSelector } from '@perses-dev/core';
+import { LabelFilter, Settings } from './types';
+export interface SettingsMenuProps {
+    value: Settings;
+    onChange: (value: Settings) => void;
+}
+export declare function SettingsMenu({ value, onChange }: SettingsMenuProps): import("react/jsx-runtime").JSX.Element;
+export interface MetricNameExplorerProps extends StackProps {
+    datasource: DatasourceSelector;
+    filters: LabelFilter[];
+    isMetadataEnabled?: boolean;
+    onExplore?: (metricName: string) => void;
+}
+export declare function MetricNameExplorer({ datasource, filters, isMetadataEnabled, onExplore, ...props }: MetricNameExplorerProps): import("react/jsx-runtime").JSX.Element;
+export interface PrometheusMetricsFinderProps extends Omit<StackProps, 'onChange'> {
+    value: {
+        datasource: DatasourceSelector;
+        filters: LabelFilter[];
+        exploredMetric: string | undefined;
+    };
+    onChange: ({ datasource, filters, exploredMetric, }: {
+        datasource: DatasourceSelector;
+        filters: LabelFilter[];
+        exploredMetric: string | undefined;
+    }) => void;
+    onExplore?: (metricName: string) => void;
+}
+export declare function PrometheusMetricsFinder({ value: { datasource, filters, exploredMetric }, onChange, onExplore, ...props }: PrometheusMetricsFinderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PrometheusMetricsFinder.d.ts.map

package/dist/components/PrometheusMetricsFinder/PrometheusMetricsFinder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrometheusMetricsFinder.d.ts","sourceRoot":"","sources":["../../../src/components/PrometheusMetricsFinder/PrometheusMetricsFinder.tsx"],"names":[],"mappings":"AAaA,OAAO,EASL,UAAU,EAGX,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAOtD,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAQhD,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,QAAQ,CAAC;IAChB,QAAQ,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC;CACrC;AAED,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,iBAAiB,2CA2BlE;AAED,MAAM,WAAW,uBAAwB,SAAQ,UAAU;IACzD,UAAU,EAAE,kBAAkB,CAAC;IAC/B,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C;AAED,wBAAgB,kBAAkB,CAAC,EACjC,UAAU,EACV,OAAO,EACP,iBAAiB,EACjB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,uBAAuB,2CAqBzB;AAED,MAAM,WAAW,4BAA6B,SAAQ,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC;IAChF,KAAK,EAAE;QACL,UAAU,EAAE,kBAAkB,CAAC;QAC/B,OAAO,EAAE,WAAW,EAAE,CAAC;QACvB,cAAc,EAAE,MAAM,GAAG,SAAS,CAAC;KACpC,CAAC;IACF,QAAQ,EAAE,CAAC,EACT,UAAU,EACV,OAAO,EACP,cAAc,GACf,EAAE;QACD,UAAU,EAAE,kBAAkB,CAAC;QAC/B,OAAO,EAAE,WAAW,EAAE,CAAC;QACvB,cAAc,EAAE,MAAM,GAAG,SAAS,CAAC;KACpC,KAAK,IAAI,CAAC;IACX,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C;AAED,wBAAgB,uBAAuB,CAAC,EACtC,KAAK,EAAE,EAAE,UAAyB,EAAE,OAAY,EAAE,cAAc,EAAE,EAClE,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,4BAA4B,2CAiF9B"}

package/dist/components/PrometheusMetricsFinder/PrometheusMetricsFinder.js

@@ -0,0 +1,185 @@
+// 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.
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Checkbox, CircularProgress, FormControlLabel, IconButton, Menu, MenuItem, Stack, useMediaQuery, useTheme } from '@mui/material';
+import { DEFAULT_PROM } from '@perses-dev/prometheus-plugin';
+import { useMemo, useState } from 'react';
+import ArrowLeftIcon from 'mdi-material-ui/ArrowLeft';
+import CogIcon from 'mdi-material-ui/Cog';
+import { Link as RouterLink } from 'react-router-dom';
+import { useExplorerQueryParams } from '../ExploreManager/query-params';
+import { FinderFilters } from './filter/FinderFilters';
+import { MetricList } from './display/list/MetricList';
+import { MetricOverview } from './overview/MetricOverview';
+import { useLabelValues } from './utils';
+const PERSES_METRICS_FINDER_SETTINGS = 'PERSES_METRICS_FINDER_SETTINGS';
+export function SettingsMenu({ value, onChange }) {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = Boolean(anchorEl);
+    const handleClick = (event)=>{
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = ()=>{
+        setAnchorEl(null);
+    };
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(IconButton, {
+                "aria-label": "settings",
+                size: "large",
+                onClick: handleClick,
+                children: /*#__PURE__*/ _jsx(CogIcon, {})
+            }),
+            /*#__PURE__*/ _jsx(Menu, {
+                id: "finder-settings-menu",
+                anchorEl: anchorEl,
+                open: open,
+                onClose: handleClose,
+                children: /*#__PURE__*/ _jsx(MenuItem, {
+                    onClick: (e)=>e.preventDefault(),
+                    children: /*#__PURE__*/ _jsx(FormControlLabel, {
+                        control: /*#__PURE__*/ _jsx(Checkbox, {}),
+                        label: "Enable Metadata",
+                        checked: value.isMetadataEnabled,
+                        onClick: ()=>onChange({
+                                isMetadataEnabled: !value.isMetadataEnabled
+                            })
+                    })
+                })
+            })
+        ]
+    });
+}
+export function MetricNameExplorer({ datasource, filters, isMetadataEnabled, onExplore, ...props }) {
+    const { data, isLoading } = useLabelValues('__name__', filters, datasource);
+    if (isLoading) {
+        return /*#__PURE__*/ _jsx(Stack, {
+            width: "100%",
+            sx: {
+                alignItems: 'center',
+                justifyContent: 'center'
+            },
+            children: /*#__PURE__*/ _jsx(CircularProgress, {})
+        });
+    }
+    var _data_data;
+    return /*#__PURE__*/ _jsx(MetricList, {
+        metricNames: (_data_data = data === null || data === void 0 ? void 0 : data.data) !== null && _data_data !== void 0 ? _data_data : [],
+        datasource: datasource,
+        filters: filters,
+        isMetadataEnabled: isMetadataEnabled,
+        onExplore: onExplore,
+        ...props
+    });
+}
+export function PrometheusMetricsFinder({ value: { datasource = DEFAULT_PROM, filters = [], exploredMetric }, onChange, onExplore, ...props }) {
+    const settingsStored = localStorage.getItem(PERSES_METRICS_FINDER_SETTINGS);
+    const [settings, setSettings] = useState(settingsStored ? JSON.parse(settingsStored) : {
+        isMetadataEnabled: true
+    });
+    function handleSettingsUpdate(value) {
+        setSettings(value);
+        localStorage.setItem(PERSES_METRICS_FINDER_SETTINGS, JSON.stringify(value));
+    }
+    const isMobileSize = useMediaQuery(useTheme().breakpoints.down('md'));
+    // Remove duplicated filters and filters without label or labelValues
+    const filteredFilters = useMemo(()=>{
+        return filters.filter((filter)=>filter.label && filter.labelValues.length > 0);
+    }, [
+        filters
+    ]);
+    const searchParams = 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__*/ _jsxs(Stack, {
+        ...props,
+        gap: 1,
+        children: [
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: isMobileSize ? 'column' : 'row',
+                gap: 2,
+                justifyContent: "space-between",
+                children: [
+                    /*#__PURE__*/ _jsx(FinderFilters, {
+                        datasource: datasource !== null && datasource !== void 0 ? datasource : DEFAULT_PROM,
+                        filters: filters !== null && filters !== void 0 ? filters : [],
+                        filteredFilters: filteredFilters,
+                        onDatasourceChange: setDatasource,
+                        onFiltersChange: setFilters
+                    }),
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        direction: "row",
+                        gap: 1,
+                        alignItems: "center",
+                        children: [
+                            exploredMetric && /*#__PURE__*/ _jsx(Button, {
+                                variant: "contained",
+                                "aria-label": "back to metric explorer",
+                                startIcon: /*#__PURE__*/ _jsx(ArrowLeftIcon, {}),
+                                component: RouterLink,
+                                to: `?${searchParams}`,
+                                children: "Back"
+                            }),
+                            /*#__PURE__*/ _jsx(Stack, {
+                                direction: "row",
+                                sx: {
+                                    width: isMobileSize ? '100%' : 'unset'
+                                },
+                                justifyContent: isMobileSize ? 'end' : 'unset',
+                                alignItems: "center",
+                                children: /*#__PURE__*/ _jsx(SettingsMenu, {
+                                    value: settings,
+                                    onChange: handleSettingsUpdate
+                                })
+                            })
+                        ]
+                    })
+                ]
+            }),
+            exploredMetric ? /*#__PURE__*/ _jsx(MetricOverview, {
+                metricName: exploredMetric,
+                datasource: datasource !== null && datasource !== void 0 ? datasource : DEFAULT_PROM,
+                filters: filteredFilters,
+                isMetadataEnabled: settings.isMetadataEnabled,
+                onFiltersChange: setFilters,
+                onExplore: onExplore
+            }) : /*#__PURE__*/ _jsx(MetricNameExplorer, {
+                datasource: datasource !== null && datasource !== void 0 ? datasource : DEFAULT_PROM,
+                filters: filteredFilters,
+                isMetadataEnabled: settings.isMetadataEnabled,
+                onExplore: onExplore
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=PrometheusMetricsFinder.js.map

package/dist/components/PrometheusMetricsFinder/PrometheusMetricsFinder.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/PrometheusMetricsFinder/PrometheusMetricsFinder.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport {\n  Button,\n  Checkbox,\n  CircularProgress,\n  FormControlLabel,\n  IconButton,\n  Menu,\n  MenuItem,\n  Stack,\n  StackProps,\n  useMediaQuery,\n  useTheme,\n} from '@mui/material';\nimport { DatasourceSelector } from '@perses-dev/core';\nimport { DEFAULT_PROM } from '@perses-dev/prometheus-plugin';\nimport { MouseEvent, useMemo, useState } from 'react';\nimport ArrowLeftIcon from 'mdi-material-ui/ArrowLeft';\nimport CogIcon from 'mdi-material-ui/Cog';\nimport { Link as RouterLink } from 'react-router-dom';\nimport { useExplorerQueryParams } from '../ExploreManager/query-params';\nimport { LabelFilter, Settings } from './types';\nimport { FinderFilters } from './filter/FinderFilters';\nimport { MetricList } from './display/list/MetricList';\nimport { MetricOverview } from './overview/MetricOverview';\nimport { useLabelValues } from './utils';\n\nconst PERSES_METRICS_FINDER_SETTINGS = 'PERSES_METRICS_FINDER_SETTINGS';\n\nexport interface SettingsMenuProps {\n  value: Settings;\n  onChange: (value: Settings) => void;\n}\n\nexport function SettingsMenu({ value, onChange }: SettingsMenuProps) {\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n  const open = Boolean(anchorEl);\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    setAnchorEl(event.currentTarget);\n  };\n  const handleClose = () => {\n    setAnchorEl(null);\n  };\n\n  return (\n    <>\n      <IconButton aria-label=\"settings\" size=\"large\" onClick={handleClick}>\n        <CogIcon />\n      </IconButton>\n      <Menu id=\"finder-settings-menu\" anchorEl={anchorEl} open={open} onClose={handleClose}>\n        <MenuItem onClick={(e) => e.preventDefault()}>\n          <FormControlLabel\n            control={<Checkbox />}\n            label=\"Enable Metadata\"\n            checked={value.isMetadataEnabled}\n            onClick={() => onChange({ isMetadataEnabled: !value.isMetadataEnabled })}\n          />\n        </MenuItem>\n      </Menu>\n    </>\n  );\n}\n\nexport interface MetricNameExplorerProps extends StackProps {\n  datasource: DatasourceSelector;\n  filters: LabelFilter[];\n  isMetadataEnabled?: boolean;\n  onExplore?: (metricName: string) => void;\n}\n\nexport function MetricNameExplorer({\n  datasource,\n  filters,\n  isMetadataEnabled,\n  onExplore,\n  ...props\n}: MetricNameExplorerProps) {\n  const { data, isLoading } = useLabelValues('__name__', filters, datasource);\n\n  if (isLoading) {\n    return (\n      <Stack width=\"100%\" sx={{ alignItems: 'center', justifyContent: 'center' }}>\n        <CircularProgress />\n      </Stack>\n    );\n  }\n\n  return (\n    <MetricList\n      metricNames={data?.data ?? []}\n      datasource={datasource}\n      filters={filters}\n      isMetadataEnabled={isMetadataEnabled}\n      onExplore={onExplore}\n      {...props}\n    />\n  );\n}\n\nexport interface PrometheusMetricsFinderProps extends Omit<StackProps, 'onChange'> {\n  value: {\n    datasource: DatasourceSelector;\n    filters: LabelFilter[];\n    exploredMetric: string | undefined;\n  };\n  onChange: ({\n    datasource,\n    filters,\n    exploredMetric,\n  }: {\n    datasource: DatasourceSelector;\n    filters: LabelFilter[];\n    exploredMetric: string | undefined;\n  }) => void;\n  onExplore?: (metricName: string) => void;\n}\n\nexport function PrometheusMetricsFinder({\n  value: { datasource = DEFAULT_PROM, filters = [], exploredMetric },\n  onChange,\n  onExplore,\n  ...props\n}: PrometheusMetricsFinderProps) {\n  const settingsStored = localStorage.getItem(PERSES_METRICS_FINDER_SETTINGS);\n  const [settings, setSettings] = useState<Settings>(\n    settingsStored ? JSON.parse(settingsStored) : { isMetadataEnabled: true }\n  );\n\n  function handleSettingsUpdate(value: Settings) {\n    setSettings(value);\n    localStorage.setItem(PERSES_METRICS_FINDER_SETTINGS, JSON.stringify(value));\n  }\n\n  const isMobileSize = useMediaQuery(useTheme().breakpoints.down('md'));\n\n  // Remove duplicated filters and filters without label or labelValues\n  const filteredFilters: LabelFilter[] = useMemo(() => {\n    return filters.filter((filter) => filter.label && filter.labelValues.length > 0);\n  }, [filters]);\n\n  const searchParams = useExplorerQueryParams({\n    data: { tab: 'finder', datasource, filters, exploredMetric: undefined },\n  });\n\n  function setDatasource(value: DatasourceSelector) {\n    onChange({ datasource: value, filters, exploredMetric });\n  }\n\n  function setFilters(value: LabelFilter[]) {\n    onChange({ datasource, filters: value, exploredMetric });\n  }\n\n  return (\n    <Stack {...props} gap={1}>\n      <Stack direction={isMobileSize ? 'column' : 'row'} gap={2} justifyContent=\"space-between\">\n        <FinderFilters\n          datasource={datasource ?? DEFAULT_PROM}\n          filters={filters ?? []}\n          filteredFilters={filteredFilters}\n          onDatasourceChange={setDatasource}\n          onFiltersChange={setFilters}\n        />\n        <Stack direction=\"row\" gap={1} alignItems=\"center\">\n          {exploredMetric && (\n            <Button\n              variant=\"contained\"\n              aria-label=\"back to metric explorer\"\n              startIcon={<ArrowLeftIcon />}\n              component={RouterLink}\n              to={`?${searchParams}`}\n            >\n              Back\n            </Button>\n          )}\n          <Stack\n            direction=\"row\"\n            sx={{ width: isMobileSize ? '100%' : 'unset' }}\n            justifyContent={isMobileSize ? 'end' : 'unset'}\n            alignItems=\"center\"\n          >\n            <SettingsMenu value={settings} onChange={handleSettingsUpdate} />\n          </Stack>\n        </Stack>\n      </Stack>\n      {exploredMetric ? (\n        <MetricOverview\n          metricName={exploredMetric}\n          datasource={datasource ?? DEFAULT_PROM}\n          filters={filteredFilters}\n          isMetadataEnabled={settings.isMetadataEnabled}\n          onFiltersChange={setFilters}\n          onExplore={onExplore}\n        />\n      ) : (\n        <MetricNameExplorer\n          datasource={datasource ?? DEFAULT_PROM}\n          filters={filteredFilters}\n          isMetadataEnabled={settings.isMetadataEnabled}\n          onExplore={onExplore}\n        />\n      )}\n    </Stack>\n  );\n}\n"],"names":["Button","Checkbox","CircularProgress","FormControlLabel","IconButton","Menu","MenuItem","Stack","useMediaQuery","useTheme","DEFAULT_PROM","useMemo","useState","ArrowLeftIcon","CogIcon","Link","RouterLink","useExplorerQueryParams","FinderFilters","MetricList","MetricOverview","useLabelValues","PERSES_METRICS_FINDER_SETTINGS","SettingsMenu","value","onChange","anchorEl","setAnchorEl","open","Boolean","handleClick","event","currentTarget","handleClose","aria-label","size","onClick","id","onClose","e","preventDefault","control","label","checked","isMetadataEnabled","MetricNameExplorer","datasource","filters","onExplore","props","data","isLoading","width","sx","alignItems","justifyContent","metricNames","PrometheusMetricsFinder","exploredMetric","settingsStored","localStorage","getItem","settings","setSettings","JSON","parse","handleSettingsUpdate","setItem","stringify","isMobileSize","breakpoints","down","filteredFilters","filter","labelValues","length","searchParams","tab","undefined","setDatasource","setFilters","gap","direction","onDatasourceChange","onFiltersChange","variant","startIcon","component","to","metricName"],"mappings":"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"}

package/dist/components/PrometheusMetricsFinder/display/MetricChip.d.ts

@@ -0,0 +1,3 @@
+import { ChipProps } from '@mui/material';
+export declare function MetricChip({ label, ...props }: ChipProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MetricChip.d.ts.map

package/dist/components/PrometheusMetricsFinder/display/MetricChip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricChip.d.ts","sourceRoot":"","sources":["../../../../src/components/PrometheusMetricsFinder/display/MetricChip.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAQ,SAAS,EAAE,MAAM,eAAe,CAAC;AAEhD,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,2CAexD"}

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

@@ -0,0 +1,53 @@
+// 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.
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Chip } from '@mui/material';
+export function MetricChip({ label, ...props }) {
+    if (label === 'gauge') {
+        return /*#__PURE__*/ _jsx(Chip, {
+            label: label,
+            color: "success",
+            ...props
+        });
+    }
+    if (label === 'counter') {
+        return /*#__PURE__*/ _jsx(Chip, {
+            label: label,
+            color: "primary",
+            ...props
+        });
+    }
+    if (label === 'histogram') {
+        return /*#__PURE__*/ _jsx(Chip, {
+            label: label,
+            color: "warning",
+            ...props
+        });
+    }
+    if (label === 'summary') {
+        return /*#__PURE__*/ _jsx(Chip, {
+            label: label,
+            color: "secondary",
+            ...props
+        });
+    }
+    return /*#__PURE__*/ _jsx(Chip, {
+        label: label,
+        sx: {
+            fontStyle: label === 'unknown' ? 'italic' : 'initial'
+        },
+        ...props
+    });
+}
+
+//# sourceMappingURL=MetricChip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/PrometheusMetricsFinder/display/MetricChip.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Chip, ChipProps } from '@mui/material';\n\nexport function MetricChip({ label, ...props }: ChipProps) {\n  if (label === 'gauge') {\n    return <Chip label={label} color=\"success\" {...props} />;\n  }\n  if (label === 'counter') {\n    return <Chip label={label} color=\"primary\" {...props} />;\n  }\n  if (label === 'histogram') {\n    return <Chip label={label} color=\"warning\" {...props} />;\n  }\n  if (label === 'summary') {\n    return <Chip label={label} color=\"secondary\" {...props} />;\n  }\n\n  return <Chip label={label} sx={{ fontStyle: label === 'unknown' ? 'italic' : 'initial' }} {...props} />;\n}\n"],"names":["Chip","MetricChip","label","props","color","sx","fontStyle"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,IAAI,QAAmB,gBAAgB;AAEhD,OAAO,SAASC,WAAW,EAAEC,KAAK,EAAE,GAAGC,OAAkB;IACvD,IAAID,UAAU,SAAS;QACrB,qBAAO,KAACF;YAAKE,OAAOA;YAAOE,OAAM;YAAW,GAAGD,KAAK;;IACtD;IACA,IAAID,UAAU,WAAW;QACvB,qBAAO,KAACF;YAAKE,OAAOA;YAAOE,OAAM;YAAW,GAAGD,KAAK;;IACtD;IACA,IAAID,UAAU,aAAa;QACzB,qBAAO,KAACF;YAAKE,OAAOA;YAAOE,OAAM;YAAW,GAAGD,KAAK;;IACtD;IACA,IAAID,UAAU,WAAW;QACvB,qBAAO,KAACF;YAAKE,OAAOA;YAAOE,OAAM;YAAa,GAAGD,KAAK;;IACxD;IAEA,qBAAO,KAACH;QAAKE,OAAOA;QAAOG,IAAI;YAAEC,WAAWJ,UAAU,YAAY,WAAW;QAAU;QAAI,GAAGC,KAAK;;AACrG"}

package/dist/components/PrometheusMetricsFinder/display/list/MetricList.d.ts

@@ -0,0 +1,20 @@
+import { DatasourceSelector } from '@perses-dev/core';
+import { StackProps } from '@mui/material';
+import { LabelFilter } from '../../types';
+export interface MetricRowProps {
+    metricName: string;
+    datasource: DatasourceSelector;
+    filters: LabelFilter[];
+    isMetadataEnabled?: boolean;
+    onExplore?: (metricName: string) => void;
+}
+export declare function MetricRow({ metricName, datasource, filters, isMetadataEnabled, onExplore }: MetricRowProps): import("react/jsx-runtime").JSX.Element;
+export interface MetricListProps extends StackProps {
+    metricNames: string[];
+    datasource: DatasourceSelector;
+    filters: LabelFilter[];
+    isMetadataEnabled?: boolean;
+    onExplore?: (metricName: string) => void;
+}
+export declare function MetricList({ metricNames, datasource, filters, isMetadataEnabled, onExplore, ...props }: MetricListProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MetricList.d.ts.map

package/dist/components/PrometheusMetricsFinder/display/list/MetricList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricList.d.ts","sourceRoot":"","sources":["../../../../../src/components/PrometheusMetricsFinder/display/list/MetricList.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAoC,UAAU,EAAyB,MAAM,eAAe,CAAC;AAIpG,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAK1C,MAAM,WAAW,cAAc;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,kBAAkB,CAAC;IAC/B,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C;AAED,wBAAgB,SAAS,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,EAAE,cAAc,2CA4C1G;AAED,MAAM,WAAW,eAAgB,SAAQ,UAAU;IACjD,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,UAAU,EAAE,kBAAkB,CAAC;IAC/B,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C;AAED,wBAAgB,UAAU,CAAC,EACzB,WAAW,EACX,UAAU,EACV,OAAO,EACP,iBAAiB,EACjB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,eAAe,2CAuBjB"}

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

@@ -0,0 +1,136 @@
+// 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.
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Divider, Skeleton, Stack, TableCell, Typography } from '@mui/material';
+import { TableVirtuoso } from 'react-virtuoso';
+import { Link as RouterLink } from 'react-router-dom';
+import CompassIcon from 'mdi-material-ui/Compass';
+import { useMetricMetadata } from '../../utils';
+import { useExplorerQueryParams } from '../../../ExploreManager/query-params';
+import { MetricChip } from '../MetricChip';
+export function MetricRow({ metricName, datasource, filters, isMetadataEnabled, onExplore }) {
+    const { metadata, isLoading } = useMetricMetadata(metricName, datasource, isMetadataEnabled);
+    const searchParams = useExplorerQueryParams({
+        data: {
+            tab: 'finder',
+            datasource,
+            filters,
+            exploredMetric: metricName
+        }
+    });
+    var _metadata_type;
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(TableCell, {
+                style: {
+                    width: '300px'
+                },
+                children: /*#__PURE__*/ _jsx(Typography, {
+                    sx: {
+                        fontFamily: 'monospace'
+                    },
+                    children: metricName
+                })
+            }),
+            /*#__PURE__*/ _jsx(TableCell, {
+                style: {
+                    width: 115,
+                    textAlign: 'center'
+                },
+                children: isMetadataEnabled && isLoading ? /*#__PURE__*/ _jsx(Skeleton, {
+                    variant: "rounded",
+                    width: 75
+                }) : /*#__PURE__*/ _jsx(MetricChip, {
+                    label: (_metadata_type = metadata === null || metadata === void 0 ? void 0 : metadata.type) !== null && _metadata_type !== void 0 ? _metadata_type : 'unknown'
+                })
+            }),
+            /*#__PURE__*/ _jsx(TableCell, {
+                style: {
+                    width: '100%'
+                },
+                children: isMetadataEnabled && isLoading ? /*#__PURE__*/ _jsx(Skeleton, {
+                    variant: "text",
+                    width: 180
+                }) : /*#__PURE__*/ _jsx(Typography, {
+                    sx: {
+                        fontStyle: (metadata === null || metadata === void 0 ? void 0 : metadata.help) ? 'initial' : 'italic',
+                        minWidth: '30vw'
+                    },
+                    children: metadata ? metadata.help : 'unknown'
+                })
+            }),
+            /*#__PURE__*/ _jsx(TableCell, {
+                style: {
+                    width: 140
+                },
+                children: /*#__PURE__*/ _jsx(Button, {
+                    "aria-label": `explore metric ${metricName}`,
+                    variant: "contained",
+                    startIcon: /*#__PURE__*/ _jsx(CompassIcon, {}),
+                    style: {
+                        textWrap: 'nowrap'
+                    },
+                    onClick: ()=>onExplore === null || onExplore === void 0 ? void 0 : onExplore(metricName),
+                    component: RouterLink,
+                    to: `?${searchParams}`,
+                    children: "Explore"
+                })
+            })
+        ]
+    });
+}
+export function MetricList({ metricNames, datasource, filters, isMetadataEnabled, onExplore, ...props }) {
+    return /*#__PURE__*/ _jsxs(Stack, {
+        gap: 2,
+        width: "100%",
+        divider: /*#__PURE__*/ _jsx(Divider, {
+            orientation: "horizontal",
+            flexItem: true
+        }),
+        ...props,
+        children: [
+            /*#__PURE__*/ _jsx(TableVirtuoso, {
+                style: {
+                    height: '70vh',
+                    width: '100%'
+                },
+                data: metricNames,
+                itemContent: (_, metricName)=>/*#__PURE__*/ _jsx(MetricRow, {
+                        metricName: metricName,
+                        datasource: datasource,
+                        filters: filters,
+                        isMetadataEnabled: isMetadataEnabled,
+                        onExplore: onExplore
+                    })
+            }),
+            /*#__PURE__*/ _jsx(Stack, {
+                sx: {
+                    width: '100%'
+                },
+                textAlign: "end",
+                children: /*#__PURE__*/ _jsxs(Typography, {
+                    "data-testid": "finder-total",
+                    children: [
+                        "Total: ",
+                        /*#__PURE__*/ _jsx("strong", {
+                            children: metricNames.length
+                        }),
+                        " metrics"
+                    ]
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=MetricList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/PrometheusMetricsFinder/display/list/MetricList.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { DatasourceSelector } from '@perses-dev/core';\nimport { Button, Divider, Skeleton, Stack, StackProps, TableCell, Typography } from '@mui/material';\nimport { TableVirtuoso } from 'react-virtuoso';\nimport { Link as RouterLink } from 'react-router-dom';\nimport CompassIcon from 'mdi-material-ui/Compass';\nimport { LabelFilter } from '../../types';\nimport { useMetricMetadata } from '../../utils';\nimport { useExplorerQueryParams } from '../../../ExploreManager/query-params';\nimport { MetricChip } from '../MetricChip';\n\nexport interface MetricRowProps {\n  metricName: string;\n  datasource: DatasourceSelector;\n  filters: LabelFilter[];\n  isMetadataEnabled?: boolean;\n  onExplore?: (metricName: string) => void;\n}\n\nexport function MetricRow({ metricName, datasource, filters, isMetadataEnabled, onExplore }: MetricRowProps) {\n  const { metadata, isLoading } = useMetricMetadata(metricName, datasource, isMetadataEnabled);\n\n  const searchParams = useExplorerQueryParams({\n    data: { tab: 'finder', datasource, filters, exploredMetric: metricName },\n  });\n\n  return (\n    <>\n      <TableCell style={{ width: '300px' }}>\n        <Typography sx={{ fontFamily: 'monospace' }}>{metricName}</Typography>\n      </TableCell>\n\n      <TableCell style={{ width: 115, textAlign: 'center' }}>\n        {isMetadataEnabled && isLoading ? (\n          <Skeleton variant=\"rounded\" width={75} />\n        ) : (\n          <MetricChip label={metadata?.type ?? 'unknown'} />\n        )}\n      </TableCell>\n      <TableCell style={{ width: '100%' }}>\n        {isMetadataEnabled && isLoading ? (\n          <Skeleton variant=\"text\" width={180} />\n        ) : (\n          <Typography sx={{ fontStyle: metadata?.help ? 'initial' : 'italic', minWidth: '30vw' }}>\n            {metadata ? metadata.help : 'unknown'}\n          </Typography>\n        )}\n      </TableCell>\n      <TableCell style={{ width: 140 }}>\n        <Button\n          aria-label={`explore metric ${metricName}`}\n          variant=\"contained\"\n          startIcon={<CompassIcon />}\n          style={{ textWrap: 'nowrap' }}\n          onClick={() => onExplore?.(metricName)}\n          component={RouterLink}\n          to={`?${searchParams}`}\n        >\n          Explore\n        </Button>\n      </TableCell>\n    </>\n  );\n}\n\nexport interface MetricListProps extends StackProps {\n  metricNames: string[];\n  datasource: DatasourceSelector;\n  filters: LabelFilter[];\n  isMetadataEnabled?: boolean;\n  onExplore?: (metricName: string) => void;\n}\n\nexport function MetricList({\n  metricNames,\n  datasource,\n  filters,\n  isMetadataEnabled,\n  onExplore,\n  ...props\n}: MetricListProps) {\n  return (\n    <Stack gap={2} width=\"100%\" divider={<Divider orientation=\"horizontal\" flexItem />} {...props}>\n      <TableVirtuoso\n        style={{ height: '70vh', width: '100%' }}\n        data={metricNames}\n        itemContent={(_, metricName) => (\n          <MetricRow\n            metricName={metricName}\n            datasource={datasource}\n            filters={filters}\n            isMetadataEnabled={isMetadataEnabled}\n            onExplore={onExplore}\n          />\n        )}\n      />\n      <Stack sx={{ width: '100%' }} textAlign=\"end\">\n        <Typography data-testid=\"finder-total\">\n          Total: <strong>{metricNames.length}</strong> metrics\n        </Typography>\n      </Stack>\n    </Stack>\n  );\n}\n"],"names":["Button","Divider","Skeleton","Stack","TableCell","Typography","TableVirtuoso","Link","RouterLink","CompassIcon","useMetricMetadata","useExplorerQueryParams","MetricChip","MetricRow","metricName","datasource","filters","isMetadataEnabled","onExplore","metadata","isLoading","searchParams","data","tab","exploredMetric","style","width","sx","fontFamily","textAlign","variant","label","type","fontStyle","help","minWidth","aria-label","startIcon","textWrap","onClick","component","to","MetricList","metricNames","props","gap","divider","orientation","flexItem","height","itemContent","_","data-testid","strong","length"],"mappings":"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"}

package/dist/components/PrometheusMetricsFinder/filter/FilterInputs.d.ts

@@ -0,0 +1,23 @@
+import { HTMLAttributes } from 'react';
+import { DatasourceSelector } from '@perses-dev/core';
+import { LabelFilter } from '../types';
+export interface LabelFilterInputProps {
+    datasource: DatasourceSelector;
+    value: LabelFilter;
+    filters: LabelFilter[];
+    onChange: (next: LabelFilter) => void;
+    onDelete: () => void;
+}
+export declare function LabelFilterInput({ datasource, value, filters, onChange, onDelete }: LabelFilterInputProps): import("react/jsx-runtime").JSX.Element;
+export declare const ListboxComponent: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & import("react").RefAttributes<HTMLUListElement>>;
+export interface RawFilterInputProps {
+    value: LabelFilter;
+    labelOptions?: string[];
+    labelValuesOptions?: string[];
+    isLabelOptionsLoading?: boolean;
+    isLabelValuesOptionsLoading?: boolean;
+    onChange: (next: LabelFilter) => void;
+    onDelete: () => void;
+}
+export declare function RawFilterInput({ value, labelOptions, labelValuesOptions, isLabelOptionsLoading, isLabelValuesOptionsLoading, onChange, onDelete, }: RawFilterInputProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FilterInputs.d.ts.map