@perses-dev/prometheus-plugin 0.53.1 → 0.53.3

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

@@ -139,6 +139,22 @@ function RawFilterInput({ value, labelOptions, labelValuesOptions, isLabelOption
                 value: value.operator,
                 variant: "outlined",
                 onChange: (event)=>{
+                    if (value.operator === '=' || value.operator === '!=') {
+                        // switch from single to multiple
+                        return onChange({
+                            label: value.label,
+                            labelValues: [],
+                            operator: event.target.value
+                        });
+                    }
+                    if (value.operator === '=~' || value.operator === '!~') {
+                        // switch from multiple to single, keep the first value if exists
+                        return onChange({
+                            label: value.label,
+                            labelValues: value.labelValues.slice(0, 1),
+                            operator: event.target.value
+                        });
+                    }
                     onChange({
                         label: value.label,
                         labelValues: value.labelValues,

package/lib/cjs/explore/PrometheusMetricsFinder/overview/tabs/OverviewTab.js

@@ -178,16 +178,27 @@ function LabelValuesRow({ label, valueCounters, onFilterAdd, ...props }) {
                 },
                 gap: 0.5,
                 children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
                         direction: "row",
-                        gap: 2,
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Typography, {
-                            variant: "subtitle1",
-                            children: [
-                                valueCounters.length,
-                                " values"
-                            ]
-                        })
+                        gap: 0.5,
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Typography, {
+                                variant: "subtitle1",
+                                children: [
+                                    valueCounters.length,
+                                    " values"
+                                ]
+                            }),
+                            valueCounters.length > 5 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                                variant: "text",
+                                size: "small",
+                                sx: {
+                                    padding: 0
+                                },
+                                onClick: ()=>setShowAllValues((prev)=>!prev),
+                                children: showAllValues ? '[-]' : '[+]'
+                            })
+                        ]
                     }),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
                         sx: {

package/lib/cjs/plugins/prometheus-time-series-query/PrometheusTimeSeriesQueryEditor.js

@@ -31,7 +31,7 @@ const _types = require("../types");
 const _components1 = require("../../components");
 const _queryeditormodel = require("./query-editor-model");
 function PrometheusTimeSeriesQueryEditor(props) {
-    const { onChange, value, value: { query, datasource }, queryHandlerSettings } = props;
+    const { onChange, value, value: { query, datasource }, queryHandlerSettings, isReadonly } = props;
     const datasourceSelectValue = datasource ?? _model.DEFAULT_PROM;
     const datasourceSelectLabelID = (0, _components.useId)('prom-datasource-label'); // for panels with multiple queries, this component is rendered multiple times on the same page
     const selectedDatasource = (0, _pluginsystem.useDatasourceSelectValueToSelector)(datasourceSelectValue, _model.PROM_DATASOURCE_KIND);
@@ -103,7 +103,8 @@ function PrometheusTimeSeriesQueryEditor(props) {
                     onChange: handleDatasourceChange,
                     labelId: datasourceSelectLabelID,
                     label: "Prometheus Datasource",
-                    notched: true
+                    notched: true,
+                    readOnly: isReadonly
                 })
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.PromQLEditor, {
@@ -115,7 +116,8 @@ function PrometheusTimeSeriesQueryEditor(props) {
                 value: query,
                 datasource: selectedDatasource,
                 onChange: handlePromQlEditorChanges,
-                onBlur: queryHandlerSettings?.runWithOnBlur ? handleQueryBlur : undefined
+                onBlur: queryHandlerSettings?.runWithOnBlur ? handleQueryBlur : undefined,
+                isReadOnly: isReadonly
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
                 direction: "row",
@@ -128,7 +130,15 @@ function PrometheusTimeSeriesQueryEditor(props) {
                         helperText: "Text to be displayed in the legend and the tooltip. Use {{label_name}} to interpolate label values.",
                         value: format ?? '',
                         onChange: handleLegendSpecChange,
-                        onBlur: queryHandlerSettings?.runWithOnBlur ? handleFormatBlur : undefined
+                        onBlur: queryHandlerSettings?.runWithOnBlur ? handleFormatBlur : undefined,
+                        slotProps: {
+                            inputLabel: {
+                                shrink: isReadonly ? true : undefined
+                            },
+                            input: {
+                                readOnly: isReadonly
+                            }
+                        }
                     }),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                         label: "Min Step",
@@ -139,6 +149,14 @@ function PrometheusTimeSeriesQueryEditor(props) {
                         onBlur: queryHandlerSettings?.runWithOnBlur ? handleMinStepBlur : undefined,
                         sx: {
                             width: '250px'
+                        },
+                        slotProps: {
+                            inputLabel: {
+                                shrink: isReadonly ? true : undefined
+                            },
+                            input: {
+                                readOnly: isReadonly
+                            }
                         }
                     })
                 ]

package/lib/components/PromQLEditor.d.ts

@@ -5,6 +5,7 @@ import { PrometheusDatasourceSelector } from '../model';
 export type PromQLEditorProps = {
     completeConfig: CompleteConfiguration;
     datasource: PrometheusDatasourceSelector;
+    isReadOnly?: boolean;
 } & Omit<ReactCodeMirrorProps, 'theme' | 'extensions'>;
-export declare function PromQLEditor({ completeConfig, datasource, ...rest }: PromQLEditorProps): ReactElement;
+export declare function PromQLEditor({ completeConfig, datasource, isReadOnly, ...rest }: PromQLEditorProps): ReactElement;
 //# sourceMappingURL=PromQLEditor.d.ts.map

package/lib/components/PromQLEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PromQLEditor.d.ts","sourceRoot":"","sources":["../../../src/components/PromQLEditor.tsx"],"names":[],"mappings":"AAaA,OAAmB,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AACzE,OAAO,EAAmB,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AAI1F,OAAO,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAC;AAIxD,OAAO,EAAE,4BAA4B,EAAE,MAAM,UAAU,CAAC;AASxD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,cAAc,EAAE,qBAAqB,CAAC;IACtC,UAAU,EAAE,4BAA4B,CAAC;CAC1C,GAAG,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,YAAY,CAAC,CAAC;AAEvD,wBAAgB,YAAY,CAAC,EAAE,cAAc,EAAE,UAAU,EAAE,GAAG,IAAI,EAAE,EAAE,iBAAiB,GAAG,YAAY,CAsHrG"}
+{"version":3,"file":"PromQLEditor.d.ts","sourceRoot":"","sources":["../../../src/components/PromQLEditor.tsx"],"names":[],"mappings":"AAaA,OAAmB,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AACzE,OAAO,EAAmB,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AAI1F,OAAO,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAC;AAIxD,OAAO,EAAE,4BAA4B,EAAE,MAAM,UAAU,CAAC;AASxD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,cAAc,EAAE,qBAAqB,CAAC;IACtC,UAAU,EAAE,4BAA4B,CAAC;IACzC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,GAAG,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,YAAY,CAAC,CAAC;AAEvD,wBAAgB,YAAY,CAAC,EAAE,cAAc,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,IAAI,EAAE,EAAE,iBAAiB,GAAG,YAAY,CAwHjH"}

package/lib/components/PromQLEditor.js

@@ -26,10 +26,11 @@ import TreeNode from './TreeNode';
 const treeViewStr = 'Tree View';
 const treeViewOpenStr = 'Open ' + treeViewStr;
 const treeViewCloseStr = 'Close ' + treeViewStr;
-export function PromQLEditor({ completeConfig, datasource, ...rest }) {
+export function PromQLEditor({ completeConfig, datasource, isReadOnly, ...rest }) {
     const theme = useTheme();
     const isDarkMode = theme.palette.mode === 'dark';
     const [isTreeViewVisible, setTreeViewVisible] = useState(false);
+    const readOnly = isReadOnly ?? false;
     const promQLExtension = useMemo(()=>{
         return new PromQLExtension().activateLinter(false).setComplete(completeConfig).asExtension();
     }, [
@@ -70,6 +71,7 @@ export function PromQLEditor({ completeConfig, datasource, ...rest }) {
                     border: `1px solid ${theme.palette.divider}`
                 },
                 theme: isDarkMode ? 'dark' : 'light',
+                readOnly: readOnly,
                 basicSetup: {
                     highlightActiveLine: false,
                     highlightActiveLineGutter: false,

package/lib/components/PromQLEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PromQLEditor.tsx"],"sourcesContent":["// Copyright 2025 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 CodeMirror, { ReactCodeMirrorProps } from '@uiw/react-codemirror';\nimport { PromQLExtension, CompleteConfiguration } from '@prometheus-io/codemirror-promql';\nimport { EditorView } from '@codemirror/view';\nimport { useTheme, CircularProgress, InputLabel, Stack, IconButton, Tooltip } from '@mui/material';\nimport FileTreeIcon from 'mdi-material-ui/FileTree';\nimport { ReactElement, useMemo, useState } from 'react';\nimport { ErrorAlert } from '@perses-dev/components';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { useReplaceVariablesInString } from '@perses-dev/plugin-system';\nimport { PrometheusDatasourceSelector } from '../model';\nimport { replacePromBuiltinVariables } from '../plugins/prometheus-time-series-query/replace-prom-builtin-variables';\nimport { useParseQuery } from './query';\nimport TreeNode from './TreeNode';\n\nconst treeViewStr = 'Tree View';\nconst treeViewOpenStr = 'Open ' + treeViewStr;\nconst treeViewCloseStr = 'Close ' + treeViewStr;\n\nexport type PromQLEditorProps = {\n  completeConfig: CompleteConfiguration;\n  datasource: PrometheusDatasourceSelector;\n} & Omit<ReactCodeMirrorProps, 'theme' | 'extensions'>;\n\nexport function PromQLEditor({ completeConfig, datasource, ...rest }: PromQLEditorProps): ReactElement {\n  const theme = useTheme();\n  const isDarkMode = theme.palette.mode === 'dark';\n  const [isTreeViewVisible, setTreeViewVisible] = useState(false);\n\n  const promQLExtension = useMemo(() => {\n    return new PromQLExtension().activateLinter(false).setComplete(completeConfig).asExtension();\n  }, [completeConfig]);\n\n  let queryExpr = useReplaceVariablesInString(rest.value);\n  if (queryExpr) {\n    // TODO placeholder values for steps to be replaced with actual values\n    // Looks like providing proper values involves some refactoring: currently we'd need to rely on the timeseries query context,\n    // but these step values are actually computed independently / before the queries are getting fired, so it's useless to fire\n    // queries here, so maybe we should extract this part to independant hook(s), to be reused here?\n    queryExpr = replacePromBuiltinVariables(queryExpr, 12345, 12345);\n  }\n\n  const { data: parseQueryResponse, isLoading, error } = useParseQuery(queryExpr ?? '', datasource, isTreeViewVisible);\n\n  const handleShowTreeView = (): void => {\n    setTreeViewVisible(!isTreeViewVisible);\n  };\n\n  return (\n    <Stack position=\"relative\">\n      <InputLabel // reproduce the same kind of input label that regular MUI TextFields have\n        shrink\n        sx={{\n          position: 'absolute',\n          top: '-12px',\n          left: '10px',\n          padding: '0 4px',\n          color: theme.palette.text.primary,\n          zIndex: 1,\n        }}\n      >\n        PromQL Expression\n      </InputLabel>\n      {/* TODO: We need to wait for this to be merged, then we need to add proper e2e for some scenarios */}\n      <CodeMirror\n        data-testid=\"promql_expression_editor\"\n        {...rest}\n        style={{ border: `1px solid ${theme.palette.divider}` }}\n        theme={isDarkMode ? 'dark' : 'light'}\n        basicSetup={{\n          highlightActiveLine: false,\n          highlightActiveLineGutter: false,\n          foldGutter: false,\n        }}\n        extensions={[\n          EditorView.lineWrapping,\n          promQLExtension,\n          EditorView.theme({\n            '.cm-content': {\n              paddingTop: '8px',\n              paddingBottom: '8px',\n              paddingRight: '40px', // offset for the tree view button\n            },\n          }),\n        ]}\n        placeholder=\"Example: sum(rate(http_requests_total[5m]))\"\n      />\n      {queryExpr && (\n        <>\n          <Tooltip title={isTreeViewVisible ? treeViewCloseStr : treeViewOpenStr}>\n            <IconButton\n              aria-label={isTreeViewVisible ? treeViewCloseStr : treeViewOpenStr}\n              onClick={handleShowTreeView}\n              sx={{ position: 'absolute', right: '5px', top: '5px' }}\n              size=\"small\"\n              key=\"tree-view-button\"\n            >\n              <FileTreeIcon sx={{ fontSize: '18px' }} />\n            </IconButton>\n          </Tooltip>\n          {isTreeViewVisible && (\n            <div style={{ border: `1px solid ${theme.palette.divider}`, position: 'relative' }}>\n              <Tooltip title={treeViewCloseStr}>\n                <IconButton\n                  aria-label={treeViewCloseStr}\n                  onClick={() => setTreeViewVisible(false)}\n                  sx={{ position: 'absolute', top: '5px', right: '5px' }}\n                  size=\"small\"\n                  key=\"tree-view-close-button\"\n                >\n                  <CloseIcon sx={{ fontSize: '18px' }} />\n                </IconButton>\n              </Tooltip>\n              {error ? (\n                // Here the user is able to hide the error alert\n                <ErrorAlert\n                  error={{\n                    name: `${treeViewStr} not available`,\n                    message: error.message,\n                  }}\n                />\n              ) : (\n                <div\n                  style={{\n                    padding: `${theme.spacing(1.5)} ${theme.spacing(1.5)} 0 ${theme.spacing(1.5)}`, // let paddingBottom at 0 because nodes have margin-bottom\n                    overflowX: 'auto',\n                    backgroundColor: theme.palette.background.default,\n                  }}\n                >\n                  {isLoading ? (\n                    <CircularProgress />\n                  ) : parseQueryResponse?.data ? (\n                    <TreeNode node={parseQueryResponse.data} reverse={false} childIdx={0} datasource={datasource} />\n                  ) : null}\n                </div>\n              )}\n            </div>\n          )}\n        </>\n      )}\n    </Stack>\n  );\n}\n"],"names":["CodeMirror","PromQLExtension","EditorView","useTheme","CircularProgress","InputLabel","Stack","IconButton","Tooltip","FileTreeIcon","useMemo","useState","ErrorAlert","CloseIcon","useReplaceVariablesInString","replacePromBuiltinVariables","useParseQuery","TreeNode","treeViewStr","treeViewOpenStr","treeViewCloseStr","PromQLEditor","completeConfig","datasource","rest","theme","isDarkMode","palette","mode","isTreeViewVisible","setTreeViewVisible","promQLExtension","activateLinter","setComplete","asExtension","queryExpr","value","data","parseQueryResponse","isLoading","error","handleShowTreeView","position","shrink","sx","top","left","padding","color","text","primary","zIndex","data-testid","style","border","divider","basicSetup","highlightActiveLine","highlightActiveLineGutter","foldGutter","extensions","lineWrapping","paddingTop","paddingBottom","paddingRight","placeholder","title","aria-label","onClick","right","size","fontSize","div","name","message","spacing","overflowX","backgroundColor","background","default","node","reverse","childIdx"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/PromQLEditor.tsx"],"sourcesContent":["// Copyright 2025 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 CodeMirror, { ReactCodeMirrorProps } from '@uiw/react-codemirror';\nimport { PromQLExtension, CompleteConfiguration } from '@prometheus-io/codemirror-promql';\nimport { EditorView } from '@codemirror/view';\nimport { useTheme, CircularProgress, InputLabel, Stack, IconButton, Tooltip } from '@mui/material';\nimport FileTreeIcon from 'mdi-material-ui/FileTree';\nimport { ReactElement, useMemo, useState } from 'react';\nimport { ErrorAlert } from '@perses-dev/components';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { useReplaceVariablesInString } from '@perses-dev/plugin-system';\nimport { PrometheusDatasourceSelector } from '../model';\nimport { replacePromBuiltinVariables } from '../plugins/prometheus-time-series-query/replace-prom-builtin-variables';\nimport { useParseQuery } from './query';\nimport TreeNode from './TreeNode';\n\nconst treeViewStr = 'Tree View';\nconst treeViewOpenStr = 'Open ' + treeViewStr;\nconst treeViewCloseStr = 'Close ' + treeViewStr;\n\nexport type PromQLEditorProps = {\n  completeConfig: CompleteConfiguration;\n  datasource: PrometheusDatasourceSelector;\n  isReadOnly?: boolean;\n} & Omit<ReactCodeMirrorProps, 'theme' | 'extensions'>;\n\nexport function PromQLEditor({ completeConfig, datasource, isReadOnly, ...rest }: PromQLEditorProps): ReactElement {\n  const theme = useTheme();\n  const isDarkMode = theme.palette.mode === 'dark';\n  const [isTreeViewVisible, setTreeViewVisible] = useState(false);\n  const readOnly = isReadOnly ?? false;\n\n  const promQLExtension = useMemo(() => {\n    return new PromQLExtension().activateLinter(false).setComplete(completeConfig).asExtension();\n  }, [completeConfig]);\n\n  let queryExpr = useReplaceVariablesInString(rest.value);\n  if (queryExpr) {\n    // TODO placeholder values for steps to be replaced with actual values\n    // Looks like providing proper values involves some refactoring: currently we'd need to rely on the timeseries query context,\n    // but these step values are actually computed independently / before the queries are getting fired, so it's useless to fire\n    // queries here, so maybe we should extract this part to independant hook(s), to be reused here?\n    queryExpr = replacePromBuiltinVariables(queryExpr, 12345, 12345);\n  }\n\n  const { data: parseQueryResponse, isLoading, error } = useParseQuery(queryExpr ?? '', datasource, isTreeViewVisible);\n\n  const handleShowTreeView = (): void => {\n    setTreeViewVisible(!isTreeViewVisible);\n  };\n\n  return (\n    <Stack position=\"relative\">\n      <InputLabel // reproduce the same kind of input label that regular MUI TextFields have\n        shrink\n        sx={{\n          position: 'absolute',\n          top: '-12px',\n          left: '10px',\n          padding: '0 4px',\n          color: theme.palette.text.primary,\n          zIndex: 1,\n        }}\n      >\n        PromQL Expression\n      </InputLabel>\n      {/* TODO: We need to wait for this to be merged, then we need to add proper e2e for some scenarios */}\n      <CodeMirror\n        data-testid=\"promql_expression_editor\"\n        {...rest}\n        style={{ border: `1px solid ${theme.palette.divider}` }}\n        theme={isDarkMode ? 'dark' : 'light'}\n        readOnly={readOnly}\n        basicSetup={{\n          highlightActiveLine: false,\n          highlightActiveLineGutter: false,\n          foldGutter: false,\n        }}\n        extensions={[\n          EditorView.lineWrapping,\n          promQLExtension,\n          EditorView.theme({\n            '.cm-content': {\n              paddingTop: '8px',\n              paddingBottom: '8px',\n              paddingRight: '40px', // offset for the tree view button\n            },\n          }),\n        ]}\n        placeholder=\"Example: sum(rate(http_requests_total[5m]))\"\n      />\n      {queryExpr && (\n        <>\n          <Tooltip title={isTreeViewVisible ? treeViewCloseStr : treeViewOpenStr}>\n            <IconButton\n              aria-label={isTreeViewVisible ? treeViewCloseStr : treeViewOpenStr}\n              onClick={handleShowTreeView}\n              sx={{ position: 'absolute', right: '5px', top: '5px' }}\n              size=\"small\"\n              key=\"tree-view-button\"\n            >\n              <FileTreeIcon sx={{ fontSize: '18px' }} />\n            </IconButton>\n          </Tooltip>\n          {isTreeViewVisible && (\n            <div style={{ border: `1px solid ${theme.palette.divider}`, position: 'relative' }}>\n              <Tooltip title={treeViewCloseStr}>\n                <IconButton\n                  aria-label={treeViewCloseStr}\n                  onClick={() => setTreeViewVisible(false)}\n                  sx={{ position: 'absolute', top: '5px', right: '5px' }}\n                  size=\"small\"\n                  key=\"tree-view-close-button\"\n                >\n                  <CloseIcon sx={{ fontSize: '18px' }} />\n                </IconButton>\n              </Tooltip>\n              {error ? (\n                // Here the user is able to hide the error alert\n                <ErrorAlert\n                  error={{\n                    name: `${treeViewStr} not available`,\n                    message: error.message,\n                  }}\n                />\n              ) : (\n                <div\n                  style={{\n                    padding: `${theme.spacing(1.5)} ${theme.spacing(1.5)} 0 ${theme.spacing(1.5)}`, // let paddingBottom at 0 because nodes have margin-bottom\n                    overflowX: 'auto',\n                    backgroundColor: theme.palette.background.default,\n                  }}\n                >\n                  {isLoading ? (\n                    <CircularProgress />\n                  ) : parseQueryResponse?.data ? (\n                    <TreeNode node={parseQueryResponse.data} reverse={false} childIdx={0} datasource={datasource} />\n                  ) : null}\n                </div>\n              )}\n            </div>\n          )}\n        </>\n      )}\n    </Stack>\n  );\n}\n"],"names":["CodeMirror","PromQLExtension","EditorView","useTheme","CircularProgress","InputLabel","Stack","IconButton","Tooltip","FileTreeIcon","useMemo","useState","ErrorAlert","CloseIcon","useReplaceVariablesInString","replacePromBuiltinVariables","useParseQuery","TreeNode","treeViewStr","treeViewOpenStr","treeViewCloseStr","PromQLEditor","completeConfig","datasource","isReadOnly","rest","theme","isDarkMode","palette","mode","isTreeViewVisible","setTreeViewVisible","readOnly","promQLExtension","activateLinter","setComplete","asExtension","queryExpr","value","data","parseQueryResponse","isLoading","error","handleShowTreeView","position","shrink","sx","top","left","padding","color","text","primary","zIndex","data-testid","style","border","divider","basicSetup","highlightActiveLine","highlightActiveLineGutter","foldGutter","extensions","lineWrapping","paddingTop","paddingBottom","paddingRight","placeholder","title","aria-label","onClick","right","size","fontSize","div","name","message","spacing","overflowX","backgroundColor","background","default","node","reverse","childIdx"],"mappings":"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"}

package/lib/explore/PrometheusMetricsFinder/PrometheusMetricsFinder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PrometheusMetricsFinder.d.ts","sourceRoot":"","sources":["../../../../src/explore/PrometheusMetricsFinder/PrometheusMetricsFinder.tsx"],"names":[],"mappings":"AAaA,OAAO,EAUL,UAAU,EAIX,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAKtD,OAAO,EAAc,YAAY,EAAqB,MAAM,OAAO,CAAC;AAMpE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAKhD,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,GAAG,YAAY,CAmCjF;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,GAAG,YAAY,CAgDxC;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,CAAC,EAAE,MAAM,CAAC;KACzB,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,CAAC,EAAE,MAAM,CAAC;KACzB,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,GAAG,YAAY,CAkF7C"}
+{"version":3,"file":"PrometheusMetricsFinder.d.ts","sourceRoot":"","sources":["../../../../src/explore/PrometheusMetricsFinder/PrometheusMetricsFinder.tsx"],"names":[],"mappings":"AAaA,OAAO,EAUL,UAAU,EAIX,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAKtD,OAAO,EAAc,YAAY,EAAqB,MAAM,OAAO,CAAC;AAMpE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAKhD,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,GAAG,YAAY,CAmCjF;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,GAAG,YAAY,CAkDxC;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,CAAC,EAAE,MAAM,CAAC;KACzB,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,CAAC,EAAE,MAAM,CAAC;KACzB,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,GAAG,YAAY,CAkF7C"}

package/lib/explore/PrometheusMetricsFinder/PrometheusMetricsFinder.js

@@ -122,11 +122,13 @@ export function MetricNameExplorer({ datasource, filters, isMetadataEnabled, onE
                 value: search,
                 onChange: (e)=>setSearch(e.target.value),
                 placeholder: "Search metric name...",
-                InputProps: {
-                    startAdornment: /*#__PURE__*/ _jsx(InputAdornment, {
-                        position: "start",
-                        children: /*#__PURE__*/ _jsx(Magnify, {})
-                    })
+                slotProps: {
+                    input: {
+                        startAdornment: /*#__PURE__*/ _jsx(InputAdornment, {
+                            position: "start",
+                            children: /*#__PURE__*/ _jsx(Magnify, {})
+                        })
+                    }
                 }
             }),
             /*#__PURE__*/ _jsx(MetricList, {
@@ -152,7 +154,7 @@ export function PrometheusMetricsFinder({ value: { datasource = DEFAULT_PROM, fi
     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);
+        return filters.filter(({ label, labelValues })=>label && labelValues?.[0]);
     }, [
         filters
     ]);

package/lib/explore/PrometheusMetricsFinder/PrometheusMetricsFinder.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/explore/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  InputAdornment,\n  Menu,\n  MenuItem,\n  Stack,\n  StackProps,\n  TextField,\n  useMediaQuery,\n  useTheme,\n} from '@mui/material';\nimport { Fuzzy, FuzzyMatchingInterval } from '@nexucis/fuzzy';\nimport { DatasourceSelector } from '@perses-dev/core';\nimport { useExplorerQueryParams } from '@perses-dev/explore';\nimport ArrowLeftIcon from 'mdi-material-ui/ArrowLeft';\nimport CogIcon from 'mdi-material-ui/Cog';\nimport Magnify from 'mdi-material-ui/Magnify';\nimport { MouseEvent, ReactElement, useMemo, useState } from 'react';\nimport { Link as RouterLink } from 'react-router-dom';\nimport { DEFAULT_PROM } from '../../model';\nimport { MetricList } from './display/list/MetricList';\nimport { FinderFilters } from './filter/FinderFilters';\nimport { MetricOverview } from './overview/MetricOverview';\nimport { LabelFilter, Settings } from './types';\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): ReactElement {\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n  const open = Boolean(anchorEl);\n  const handleClick = (event: MouseEvent<HTMLButtonElement>): void => {\n    setAnchorEl(event.currentTarget);\n  };\n  const handleClose = (): void => {\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({ ...value, isMetadataEnabled: !value.isMetadataEnabled })}\n          />\n        </MenuItem>\n        <MenuItem onClick={(e) => e.preventDefault()}>\n          <FormControlLabel\n            control={<Checkbox />}\n            label=\"Enable Time Series Chart\"\n            checked={value.isPanelEnabled}\n            onClick={() => onChange({ ...value, isPanelEnabled: !value.isPanelEnabled })}\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): ReactElement {\n  const { data, isLoading, error } = useLabelValues('__name__', filters, datasource);\n  const [search, setSearch] = useState('');\n  const fuzzy = useMemo(() => new Fuzzy({ includeMatches: true, excludedChars: [' '] }), []);\n\n  const filteredResults: Array<{ original: string; intervals?: FuzzyMatchingInterval[] }> | undefined = useMemo(() => {\n    if (search && data?.data) {\n      return fuzzy.filter(search, data.data).sort((a, b) => b.score - a.score);\n    }\n    return undefined;\n  }, [data, fuzzy, search]);\n\n  if (error) {\n    return <Stack width=\"100%\">Error: {error.message}</Stack>;\n  }\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    <Stack {...props}>\n      <TextField\n        value={search}\n        onChange={(e) => setSearch(e.target.value)}\n        placeholder=\"Search metric name...\"\n        InputProps={{\n          startAdornment: (\n            <InputAdornment position=\"start\">\n              <Magnify />\n            </InputAdornment>\n          ),\n        }}\n      />\n      <MetricList\n        metricNames={data?.data ?? []}\n        filteredResults={filteredResults}\n        datasource={datasource}\n        filters={filters}\n        isMetadataEnabled={isMetadataEnabled}\n        onExplore={onExplore}\n      />\n    </Stack>\n  );\n}\n\nexport interface PrometheusMetricsFinderProps extends Omit<StackProps, 'onChange'> {\n  value: {\n    datasource: DatasourceSelector;\n    filters: LabelFilter[];\n    exploredMetric?: string;\n  };\n  onChange: ({\n    datasource,\n    filters,\n    exploredMetric,\n  }: {\n    datasource: DatasourceSelector;\n    filters: LabelFilter[];\n    exploredMetric?: string;\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): ReactElement {\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): void {\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): void {\n    onChange({ datasource: value, filters, exploredMetric });\n  }\n\n  function setFilters(value: LabelFilter[]): void {\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          isPanelEnabled={settings.isPanelEnabled}\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","InputAdornment","Menu","MenuItem","Stack","TextField","useMediaQuery","useTheme","Fuzzy","useExplorerQueryParams","ArrowLeftIcon","CogIcon","Magnify","useMemo","useState","Link","RouterLink","DEFAULT_PROM","MetricList","FinderFilters","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","isPanelEnabled","MetricNameExplorer","datasource","filters","onExplore","props","data","isLoading","error","search","setSearch","fuzzy","includeMatches","excludedChars","filteredResults","filter","sort","a","b","score","undefined","width","message","sx","alignItems","justifyContent","target","placeholder","InputProps","startAdornment","position","metricNames","PrometheusMetricsFinder","exploredMetric","settingsStored","localStorage","getItem","settings","setSettings","JSON","parse","handleSettingsUpdate","setItem","stringify","isMobileSize","breakpoints","down","filteredFilters","labelValues","length","searchParams","tab","setDatasource","setFilters","gap","direction","onDatasourceChange","onFiltersChange","variant","startIcon","component","to","metricName"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/explore/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  InputAdornment,\n  Menu,\n  MenuItem,\n  Stack,\n  StackProps,\n  TextField,\n  useMediaQuery,\n  useTheme,\n} from '@mui/material';\nimport { Fuzzy, FuzzyMatchingInterval } from '@nexucis/fuzzy';\nimport { DatasourceSelector } from '@perses-dev/core';\nimport { useExplorerQueryParams } from '@perses-dev/explore';\nimport ArrowLeftIcon from 'mdi-material-ui/ArrowLeft';\nimport CogIcon from 'mdi-material-ui/Cog';\nimport Magnify from 'mdi-material-ui/Magnify';\nimport { MouseEvent, ReactElement, useMemo, useState } from 'react';\nimport { Link as RouterLink } from 'react-router-dom';\nimport { DEFAULT_PROM } from '../../model';\nimport { MetricList } from './display/list/MetricList';\nimport { FinderFilters } from './filter/FinderFilters';\nimport { MetricOverview } from './overview/MetricOverview';\nimport { LabelFilter, Settings } from './types';\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): ReactElement {\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n  const open = Boolean(anchorEl);\n  const handleClick = (event: MouseEvent<HTMLButtonElement>): void => {\n    setAnchorEl(event.currentTarget);\n  };\n  const handleClose = (): void => {\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({ ...value, isMetadataEnabled: !value.isMetadataEnabled })}\n          />\n        </MenuItem>\n        <MenuItem onClick={(e) => e.preventDefault()}>\n          <FormControlLabel\n            control={<Checkbox />}\n            label=\"Enable Time Series Chart\"\n            checked={value.isPanelEnabled}\n            onClick={() => onChange({ ...value, isPanelEnabled: !value.isPanelEnabled })}\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): ReactElement {\n  const { data, isLoading, error } = useLabelValues('__name__', filters, datasource);\n  const [search, setSearch] = useState('');\n  const fuzzy = useMemo(() => new Fuzzy({ includeMatches: true, excludedChars: [' '] }), []);\n\n  const filteredResults: Array<{ original: string; intervals?: FuzzyMatchingInterval[] }> | undefined = useMemo(() => {\n    if (search && data?.data) {\n      return fuzzy.filter(search, data.data).sort((a, b) => b.score - a.score);\n    }\n    return undefined;\n  }, [data, fuzzy, search]);\n\n  if (error) {\n    return <Stack width=\"100%\">Error: {error.message}</Stack>;\n  }\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    <Stack {...props}>\n      <TextField\n        value={search}\n        onChange={(e) => setSearch(e.target.value)}\n        placeholder=\"Search metric name...\"\n        slotProps={{\n          input: {\n            startAdornment: (\n              <InputAdornment position=\"start\">\n                <Magnify />\n              </InputAdornment>\n            ),\n          },\n        }}\n      />\n      <MetricList\n        metricNames={data?.data ?? []}\n        filteredResults={filteredResults}\n        datasource={datasource}\n        filters={filters}\n        isMetadataEnabled={isMetadataEnabled}\n        onExplore={onExplore}\n      />\n    </Stack>\n  );\n}\n\nexport interface PrometheusMetricsFinderProps extends Omit<StackProps, 'onChange'> {\n  value: {\n    datasource: DatasourceSelector;\n    filters: LabelFilter[];\n    exploredMetric?: string;\n  };\n  onChange: ({\n    datasource,\n    filters,\n    exploredMetric,\n  }: {\n    datasource: DatasourceSelector;\n    filters: LabelFilter[];\n    exploredMetric?: string;\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): ReactElement {\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): void {\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(({ label, labelValues }) => label && labelValues?.[0]);\n  }, [filters]);\n\n  const searchParams = useExplorerQueryParams({\n    data: { tab: 'finder', datasource, filters, exploredMetric: undefined },\n  });\n\n  function setDatasource(value: DatasourceSelector): void {\n    onChange({ datasource: value, filters, exploredMetric });\n  }\n\n  function setFilters(value: LabelFilter[]): void {\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          isPanelEnabled={settings.isPanelEnabled}\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","InputAdornment","Menu","MenuItem","Stack","TextField","useMediaQuery","useTheme","Fuzzy","useExplorerQueryParams","ArrowLeftIcon","CogIcon","Magnify","useMemo","useState","Link","RouterLink","DEFAULT_PROM","MetricList","FinderFilters","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","isPanelEnabled","MetricNameExplorer","datasource","filters","onExplore","props","data","isLoading","error","search","setSearch","fuzzy","includeMatches","excludedChars","filteredResults","filter","sort","a","b","score","undefined","width","message","sx","alignItems","justifyContent","target","placeholder","slotProps","input","startAdornment","position","metricNames","PrometheusMetricsFinder","exploredMetric","settingsStored","localStorage","getItem","settings","setSettings","JSON","parse","handleSettingsUpdate","setItem","stringify","isMobileSize","breakpoints","down","filteredFilters","labelValues","searchParams","tab","setDatasource","setFilters","gap","direction","onDatasourceChange","onFiltersChange","variant","startIcon","component","to","metricName"],"mappings":"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"}

package/lib/explore/PrometheusMetricsFinder/filter/FilterInputs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilterInputs.d.ts","sourceRoot":"","sources":["../../../../../src/explore/PrometheusMetricsFinder/filter/FilterInputs.tsx"],"names":[],"mappings":"AAaA,OAAO,EAGL,cAAc,EACd,YAAY,EAKb,MAAM,OAAO,CAAC;AAaf,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAEtD,OAAO,EAAE,WAAW,EAAY,MAAM,UAAU,CAAC;AAGjD,MAAM,WAAW,qBAAqB;IACpC,UAAU,EAAE,kBAAkB,CAAC;IAC/B,KAAK,EAAE,WAAW,CAAC;IACnB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IACtC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,UAAU,EACV,KAAK,EACL,OAAO,EACP,QAAQ,EACR,QAAQ,GACT,EAAE,qBAAqB,GAAG,YAAY,CAwBtC;AAGD,eAAO,MAAM,gBAAgB,+HAiC5B,CAAC;AAGF,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,WAAW,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC9B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IACtC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,YAAY,EACZ,kBAAkB,EAClB,qBAAqB,EACrB,2BAA2B,EAC3B,QAAQ,EACR,QAAQ,GACT,EAAE,mBAAmB,GAAG,YAAY,CAsGpC"}
+{"version":3,"file":"FilterInputs.d.ts","sourceRoot":"","sources":["../../../../../src/explore/PrometheusMetricsFinder/filter/FilterInputs.tsx"],"names":[],"mappings":"AAaA,OAAO,EAGL,cAAc,EACd,YAAY,EAKb,MAAM,OAAO,CAAC;AAaf,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAEtD,OAAO,EAAE,WAAW,EAAY,MAAM,UAAU,CAAC;AAGjD,MAAM,WAAW,qBAAqB;IACpC,UAAU,EAAE,kBAAkB,CAAC;IAC/B,KAAK,EAAE,WAAW,CAAC;IACnB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IACtC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,UAAU,EACV,KAAK,EACL,OAAO,EACP,QAAQ,EACR,QAAQ,GACT,EAAE,qBAAqB,GAAG,YAAY,CAwBtC;AAGD,eAAO,MAAM,gBAAgB,+HAiC5B,CAAC;AAGF,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,WAAW,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC9B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IACtC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,YAAY,EACZ,kBAAkB,EAClB,qBAAqB,EACrB,2BAA2B,EAC3B,QAAQ,EACR,QAAQ,GACT,EAAE,mBAAmB,GAAG,YAAY,CAoHpC"}

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

@@ -114,6 +114,22 @@ export function RawFilterInput({ value, labelOptions, labelValuesOptions, isLabe
                 value: value.operator,
                 variant: "outlined",
                 onChange: (event)=>{
+                    if (value.operator === '=' || value.operator === '!=') {
+                        // switch from single to multiple
+                        return onChange({
+                            label: value.label,
+                            labelValues: [],
+                            operator: event.target.value
+                        });
+                    }
+                    if (value.operator === '=~' || value.operator === '!~') {
+                        // switch from multiple to single, keep the first value if exists
+                        return onChange({
+                            label: value.label,
+                            labelValues: value.labelValues.slice(0, 1),
+                            operator: event.target.value
+                        });
+                    }
                     onChange({
                         label: value.label,
                         labelValues: value.labelValues,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/explore/PrometheusMetricsFinder/filter/FilterInputs.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  cloneElement,\n  forwardRef,\n  HTMLAttributes,\n  ReactElement,\n  SyntheticEvent,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  Autocomplete,\n  CircularProgress,\n  IconButton,\n  InputAdornment,\n  MenuItem,\n  Select,\n  SelectChangeEvent,\n  Stack,\n  TextField,\n} from '@mui/material';\nimport DeleteIcon from 'mdi-material-ui/Delete';\nimport { DatasourceSelector } from '@perses-dev/core';\nimport { Virtuoso } from 'react-virtuoso';\nimport { LabelFilter, Operator } from '../types';\nimport { useLabels, useLabelValues } from '../utils';\n\nexport interface LabelFilterInputProps {\n  datasource: DatasourceSelector;\n  value: LabelFilter;\n  filters: LabelFilter[];\n  onChange: (next: LabelFilter) => void;\n  onDelete: () => void;\n}\n\nexport function LabelFilterInput({\n  datasource,\n  value,\n  filters,\n  onChange,\n  onDelete,\n}: LabelFilterInputProps): ReactElement {\n  const filtersWithoutCurrent = useMemo(\n    () => filters.filter((filter) => filter.label !== value.label),\n    [filters, value.label]\n  );\n\n  const { data: labelOptions, isLoading: isLabelOptionsLoading } = useLabels(filtersWithoutCurrent, datasource);\n  const { data: labelValuesOptions, isLoading: isLabelValuesOptionsLoading } = useLabelValues(\n    value.label,\n    filtersWithoutCurrent,\n    datasource\n  );\n\n  return (\n    <RawFilterInput\n      value={value}\n      labelOptions={labelOptions?.data ?? []}\n      labelValuesOptions={labelValuesOptions?.data ?? []}\n      isLabelOptionsLoading={isLabelOptionsLoading}\n      isLabelValuesOptionsLoading={isLabelValuesOptionsLoading}\n      onChange={onChange}\n      onDelete={onDelete}\n    />\n  );\n}\n\n// https://stackoverflow.com/questions/69060738/material-ui-autocomplete-virtualization-w-react-virtuoso\nexport const ListboxComponent = forwardRef<HTMLUListElement, HTMLAttributes<HTMLUListElement>>(\n  ({ children, ...rest }, ref) => {\n    const data = children as ReactElement[];\n    const localRef = useRef<string>('500px');\n\n    const [height, setHeight] = useState(0);\n\n    return (\n      <ul\n        style={{ overflow: 'hidden', padding: '0', height: height ? `min(40vh, ${height}px)` : '40vh' }}\n        ref={(reference) => {\n          const maxHeight = reference ? getComputedStyle(reference).maxHeight : null;\n          if (maxHeight && maxHeight !== localRef.current) {\n            localRef.current = maxHeight;\n          }\n\n          if (typeof ref === 'function') {\n            ref(reference);\n          }\n        }}\n        {...rest}\n      >\n        <Virtuoso\n          style={{ height: localRef.current, padding: '10px 0' }}\n          data={data}\n          totalListHeightChanged={setHeight}\n          itemContent={(index, child) => {\n            return cloneElement(child, { index, title: child.props.children });\n          }}\n        />\n      </ul>\n    );\n  }\n);\nListboxComponent.displayName = 'ListboxComponent';\n\nexport interface RawFilterInputProps {\n  value: LabelFilter;\n  labelOptions?: string[];\n  labelValuesOptions?: string[];\n  isLabelOptionsLoading?: boolean;\n  isLabelValuesOptionsLoading?: boolean;\n  onChange: (next: LabelFilter) => void;\n  onDelete: () => void;\n}\n\nexport function RawFilterInput({\n  value,\n  labelOptions,\n  labelValuesOptions,\n  isLabelOptionsLoading,\n  isLabelValuesOptionsLoading,\n  onChange,\n  onDelete,\n}: RawFilterInputProps): ReactElement {\n  return (\n    <Stack gap={0} flexDirection=\"row\" alignItems=\"center\">\n      <Autocomplete\n        freeSolo\n        disableClearable\n        options={labelOptions ?? []}\n        value={value.label}\n        sx={{ minWidth: 200 }}\n        ListboxComponent={ListboxComponent}\n        loading={isLabelOptionsLoading}\n        renderInput={(params) => {\n          return (\n            <TextField\n              {...params}\n              label=\"Label Name\"\n              variant=\"outlined\"\n              fullWidth\n              size=\"medium\"\n              sx={{\n                '& .MuiOutlinedInput-root': {\n                  borderTopRightRadius: 0,\n                  borderBottomRightRadius: 0,\n                },\n              }}\n            />\n          );\n        }}\n        onInputChange={(_: SyntheticEvent, newValue: string | null) => {\n          onChange({ label: newValue ?? '', labelValues: value.labelValues, operator: value.operator });\n        }}\n      />\n      <Select\n        value={value.operator}\n        variant=\"outlined\"\n        onChange={(event: SelectChangeEvent) => {\n          onChange({ label: value.label, labelValues: value.labelValues, operator: event.target.value as Operator });\n        }}\n        size=\"medium\"\n        sx={{ borderTopLeftRadius: 0, borderBottomLeftRadius: 0, borderTopRightRadius: 0, borderBottomRightRadius: 0 }}\n      >\n        <MenuItem value=\"=\">=</MenuItem>\n        <MenuItem value=\"!=\">!=</MenuItem>\n        <MenuItem value=\"=~\">=~</MenuItem>\n        <MenuItem value=\"!~\">!~</MenuItem>\n      </Select>\n      <Autocomplete\n        freeSolo\n        multiple={value.operator === '=~' || value.operator === '!~'}\n        limitTags={1}\n        disableClearable\n        options={labelValuesOptions ?? []}\n        value={value.labelValues}\n        ListboxComponent={ListboxComponent}\n        sx={{ minWidth: 200 }}\n        loading={isLabelValuesOptionsLoading}\n        renderInput={(params) => {\n          return (\n            <TextField\n              {...params}\n              label={value.operator === '=~' || value.operator === '!~' ? 'Label Values' : 'Label Value'}\n              variant=\"outlined\"\n              fullWidth\n              size=\"medium\"\n              sx={{\n                '& .MuiOutlinedInput-root': {\n                  borderTopLeftRadius: 0,\n                  borderBottomLeftRadius: 0,\n                },\n              }}\n              slotProps={{\n                input: {\n                  ...params.InputProps,\n                  style: {\n                    maxHeight: '53.13px', // TODO: the input height is larger when a value is selected in multiple mode. Probably a bug fixed in newer version, could not replicate on their demo\n                  },\n                  endAdornment: (\n                    <InputAdornment position=\"end\">\n                      {isLabelValuesOptionsLoading ? <CircularProgress color=\"inherit\" size={20} /> : null}\n                      <IconButton aria-label=\"delete label filter\" onClick={() => onDelete()} edge=\"end\">\n                        <DeleteIcon />\n                      </IconButton>\n                    </InputAdornment>\n                  ),\n                },\n              }}\n            />\n          );\n        }}\n        onInputChange={(_, newValue) => {\n          if (value.operator === '=' || value.operator === '!=') {\n            onChange({ label: value.label, labelValues: [newValue], operator: value.operator });\n          }\n        }}\n        onChange={(_, newValue) => {\n          if (Array.isArray(newValue)) {\n            onChange({ label: value.label, labelValues: newValue, operator: value.operator });\n          }\n        }}\n      />\n    </Stack>\n  );\n}\n"],"names":["cloneElement","forwardRef","useMemo","useRef","useState","Autocomplete","CircularProgress","IconButton","InputAdornment","MenuItem","Select","Stack","TextField","DeleteIcon","Virtuoso","useLabels","useLabelValues","LabelFilterInput","datasource","value","filters","onChange","onDelete","filtersWithoutCurrent","filter","label","data","labelOptions","isLoading","isLabelOptionsLoading","labelValuesOptions","isLabelValuesOptionsLoading","RawFilterInput","ListboxComponent","children","rest","ref","localRef","height","setHeight","ul","style","overflow","padding","reference","maxHeight","getComputedStyle","current","totalListHeightChanged","itemContent","index","child","title","props","displayName","gap","flexDirection","alignItems","freeSolo","disableClearable","options","sx","minWidth","loading","renderInput","params","variant","fullWidth","size","borderTopRightRadius","borderBottomRightRadius","onInputChange","_","newValue","labelValues","operator","event","target","borderTopLeftRadius","borderBottomLeftRadius","multiple","limitTags","slotProps","input","InputProps","endAdornment","position","color","aria-label","onClick","edge","Array","isArray"],"mappings":"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"}
+{"version":3,"sources":["../../../../../src/explore/PrometheusMetricsFinder/filter/FilterInputs.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  cloneElement,\n  forwardRef,\n  HTMLAttributes,\n  ReactElement,\n  SyntheticEvent,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  Autocomplete,\n  CircularProgress,\n  IconButton,\n  InputAdornment,\n  MenuItem,\n  Select,\n  SelectChangeEvent,\n  Stack,\n  TextField,\n} from '@mui/material';\nimport DeleteIcon from 'mdi-material-ui/Delete';\nimport { DatasourceSelector } from '@perses-dev/core';\nimport { Virtuoso } from 'react-virtuoso';\nimport { LabelFilter, Operator } from '../types';\nimport { useLabels, useLabelValues } from '../utils';\n\nexport interface LabelFilterInputProps {\n  datasource: DatasourceSelector;\n  value: LabelFilter;\n  filters: LabelFilter[];\n  onChange: (next: LabelFilter) => void;\n  onDelete: () => void;\n}\n\nexport function LabelFilterInput({\n  datasource,\n  value,\n  filters,\n  onChange,\n  onDelete,\n}: LabelFilterInputProps): ReactElement {\n  const filtersWithoutCurrent = useMemo(\n    () => filters.filter((filter) => filter.label !== value.label),\n    [filters, value.label]\n  );\n\n  const { data: labelOptions, isLoading: isLabelOptionsLoading } = useLabels(filtersWithoutCurrent, datasource);\n  const { data: labelValuesOptions, isLoading: isLabelValuesOptionsLoading } = useLabelValues(\n    value.label,\n    filtersWithoutCurrent,\n    datasource\n  );\n\n  return (\n    <RawFilterInput\n      value={value}\n      labelOptions={labelOptions?.data ?? []}\n      labelValuesOptions={labelValuesOptions?.data ?? []}\n      isLabelOptionsLoading={isLabelOptionsLoading}\n      isLabelValuesOptionsLoading={isLabelValuesOptionsLoading}\n      onChange={onChange}\n      onDelete={onDelete}\n    />\n  );\n}\n\n// https://stackoverflow.com/questions/69060738/material-ui-autocomplete-virtualization-w-react-virtuoso\nexport const ListboxComponent = forwardRef<HTMLUListElement, HTMLAttributes<HTMLUListElement>>(\n  ({ children, ...rest }, ref) => {\n    const data = children as ReactElement[];\n    const localRef = useRef<string>('500px');\n\n    const [height, setHeight] = useState(0);\n\n    return (\n      <ul\n        style={{ overflow: 'hidden', padding: '0', height: height ? `min(40vh, ${height}px)` : '40vh' }}\n        ref={(reference) => {\n          const maxHeight = reference ? getComputedStyle(reference).maxHeight : null;\n          if (maxHeight && maxHeight !== localRef.current) {\n            localRef.current = maxHeight;\n          }\n\n          if (typeof ref === 'function') {\n            ref(reference);\n          }\n        }}\n        {...rest}\n      >\n        <Virtuoso\n          style={{ height: localRef.current, padding: '10px 0' }}\n          data={data}\n          totalListHeightChanged={setHeight}\n          itemContent={(index, child) => {\n            return cloneElement(child, { index, title: child.props.children });\n          }}\n        />\n      </ul>\n    );\n  }\n);\nListboxComponent.displayName = 'ListboxComponent';\n\nexport interface RawFilterInputProps {\n  value: LabelFilter;\n  labelOptions?: string[];\n  labelValuesOptions?: string[];\n  isLabelOptionsLoading?: boolean;\n  isLabelValuesOptionsLoading?: boolean;\n  onChange: (next: LabelFilter) => void;\n  onDelete: () => void;\n}\n\nexport function RawFilterInput({\n  value,\n  labelOptions,\n  labelValuesOptions,\n  isLabelOptionsLoading,\n  isLabelValuesOptionsLoading,\n  onChange,\n  onDelete,\n}: RawFilterInputProps): ReactElement {\n  return (\n    <Stack gap={0} flexDirection=\"row\" alignItems=\"center\">\n      <Autocomplete\n        freeSolo\n        disableClearable\n        options={labelOptions ?? []}\n        value={value.label}\n        sx={{ minWidth: 200 }}\n        ListboxComponent={ListboxComponent}\n        loading={isLabelOptionsLoading}\n        renderInput={(params) => {\n          return (\n            <TextField\n              {...params}\n              label=\"Label Name\"\n              variant=\"outlined\"\n              fullWidth\n              size=\"medium\"\n              sx={{\n                '& .MuiOutlinedInput-root': {\n                  borderTopRightRadius: 0,\n                  borderBottomRightRadius: 0,\n                },\n              }}\n            />\n          );\n        }}\n        onInputChange={(_: SyntheticEvent, newValue: string | null) => {\n          onChange({ label: newValue ?? '', labelValues: value.labelValues, operator: value.operator });\n        }}\n      />\n      <Select\n        value={value.operator}\n        variant=\"outlined\"\n        onChange={(event: SelectChangeEvent) => {\n          if (value.operator === '=' || value.operator === '!=') {\n            // switch from single to multiple\n            return onChange({ label: value.label, labelValues: [], operator: event.target.value as Operator });\n          }\n\n          if (value.operator === '=~' || value.operator === '!~') {\n            // switch from multiple to single, keep the first value if exists\n            return onChange({\n              label: value.label,\n              labelValues: value.labelValues.slice(0, 1),\n              operator: event.target.value as Operator,\n            });\n          }\n\n          onChange({ label: value.label, labelValues: value.labelValues, operator: event.target.value as Operator });\n        }}\n        size=\"medium\"\n        sx={{ borderTopLeftRadius: 0, borderBottomLeftRadius: 0, borderTopRightRadius: 0, borderBottomRightRadius: 0 }}\n      >\n        <MenuItem value=\"=\">=</MenuItem>\n        <MenuItem value=\"!=\">!=</MenuItem>\n        <MenuItem value=\"=~\">=~</MenuItem>\n        <MenuItem value=\"!~\">!~</MenuItem>\n      </Select>\n      <Autocomplete\n        freeSolo\n        multiple={value.operator === '=~' || value.operator === '!~'}\n        limitTags={1}\n        disableClearable\n        options={labelValuesOptions ?? []}\n        value={value.labelValues}\n        ListboxComponent={ListboxComponent}\n        sx={{ minWidth: 200 }}\n        loading={isLabelValuesOptionsLoading}\n        renderInput={(params) => {\n          return (\n            <TextField\n              {...params}\n              label={value.operator === '=~' || value.operator === '!~' ? 'Label Values' : 'Label Value'}\n              variant=\"outlined\"\n              fullWidth\n              size=\"medium\"\n              sx={{\n                '& .MuiOutlinedInput-root': {\n                  borderTopLeftRadius: 0,\n                  borderBottomLeftRadius: 0,\n                },\n              }}\n              slotProps={{\n                input: {\n                  ...params.InputProps,\n                  style: {\n                    maxHeight: '53.13px', // TODO: the input height is larger when a value is selected in multiple mode. Probably a bug fixed in newer version, could not replicate on their demo\n                  },\n                  endAdornment: (\n                    <InputAdornment position=\"end\">\n                      {isLabelValuesOptionsLoading ? <CircularProgress color=\"inherit\" size={20} /> : null}\n                      <IconButton aria-label=\"delete label filter\" onClick={() => onDelete()} edge=\"end\">\n                        <DeleteIcon />\n                      </IconButton>\n                    </InputAdornment>\n                  ),\n                },\n              }}\n            />\n          );\n        }}\n        onInputChange={(_, newValue) => {\n          if (value.operator === '=' || value.operator === '!=') {\n            onChange({ label: value.label, labelValues: [newValue], operator: value.operator });\n          }\n        }}\n        onChange={(_, newValue) => {\n          if (Array.isArray(newValue)) {\n            onChange({ label: value.label, labelValues: newValue, operator: value.operator });\n          }\n        }}\n      />\n    </Stack>\n  );\n}\n"],"names":["cloneElement","forwardRef","useMemo","useRef","useState","Autocomplete","CircularProgress","IconButton","InputAdornment","MenuItem","Select","Stack","TextField","DeleteIcon","Virtuoso","useLabels","useLabelValues","LabelFilterInput","datasource","value","filters","onChange","onDelete","filtersWithoutCurrent","filter","label","data","labelOptions","isLoading","isLabelOptionsLoading","labelValuesOptions","isLabelValuesOptionsLoading","RawFilterInput","ListboxComponent","children","rest","ref","localRef","height","setHeight","ul","style","overflow","padding","reference","maxHeight","getComputedStyle","current","totalListHeightChanged","itemContent","index","child","title","props","displayName","gap","flexDirection","alignItems","freeSolo","disableClearable","options","sx","minWidth","loading","renderInput","params","variant","fullWidth","size","borderTopRightRadius","borderBottomRightRadius","onInputChange","_","newValue","labelValues","operator","event","target","slice","borderTopLeftRadius","borderBottomLeftRadius","multiple","limitTags","slotProps","input","InputProps","endAdornment","position","color","aria-label","onClick","edge","Array","isArray"],"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,SACEA,YAAY,EACZC,UAAU,EAIVC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACH,QAAQ;AACf,SACEC,YAAY,EACZC,gBAAgB,EAChBC,UAAU,EACVC,cAAc,EACdC,QAAQ,EACRC,MAAM,EAENC,KAAK,EACLC,SAAS,QACJ,gBAAgB;AACvB,OAAOC,gBAAgB,yBAAyB;AAEhD,SAASC,QAAQ,QAAQ,iBAAiB;AAE1C,SAASC,SAAS,EAAEC,cAAc,QAAQ,WAAW;AAUrD,OAAO,SAASC,iBAAiB,EAC/BC,UAAU,EACVC,KAAK,EACLC,OAAO,EACPC,QAAQ,EACRC,QAAQ,EACc;IACtB,MAAMC,wBAAwBrB,QAC5B,IAAMkB,QAAQI,MAAM,CAAC,CAACA,SAAWA,OAAOC,KAAK,KAAKN,MAAMM,KAAK,GAC7D;QAACL;QAASD,MAAMM,KAAK;KAAC;IAGxB,MAAM,EAAEC,MAAMC,YAAY,EAAEC,WAAWC,qBAAqB,EAAE,GAAGd,UAAUQ,uBAAuBL;IAClG,MAAM,EAAEQ,MAAMI,kBAAkB,EAAEF,WAAWG,2BAA2B,EAAE,GAAGf,eAC3EG,MAAMM,KAAK,EACXF,uBACAL;IAGF,qBACE,KAACc;QACCb,OAAOA;QACPQ,cAAcA,cAAcD,QAAQ,EAAE;QACtCI,oBAAoBA,oBAAoBJ,QAAQ,EAAE;QAClDG,uBAAuBA;QACvBE,6BAA6BA;QAC7BV,UAAUA;QACVC,UAAUA;;AAGhB;AAEA,wGAAwG;AACxG,OAAO,MAAMW,iCAAmBhC,WAC9B,CAAC,EAAEiC,QAAQ,EAAE,GAAGC,MAAM,EAAEC;IACtB,MAAMV,OAAOQ;IACb,MAAMG,WAAWlC,OAAe;IAEhC,MAAM,CAACmC,QAAQC,UAAU,GAAGnC,SAAS;IAErC,qBACE,KAACoC;QACCC,OAAO;YAAEC,UAAU;YAAUC,SAAS;YAAKL,QAAQA,SAAS,CAAC,UAAU,EAAEA,OAAO,GAAG,CAAC,GAAG;QAAO;QAC9FF,KAAK,CAACQ;YACJ,MAAMC,YAAYD,YAAYE,iBAAiBF,WAAWC,SAAS,GAAG;YACtE,IAAIA,aAAaA,cAAcR,SAASU,OAAO,EAAE;gBAC/CV,SAASU,OAAO,GAAGF;YACrB;YAEA,IAAI,OAAOT,QAAQ,YAAY;gBAC7BA,IAAIQ;YACN;QACF;QACC,GAAGT,IAAI;kBAER,cAAA,KAACrB;YACC2B,OAAO;gBAAEH,QAAQD,SAASU,OAAO;gBAAEJ,SAAS;YAAS;YACrDjB,MAAMA;YACNsB,wBAAwBT;YACxBU,aAAa,CAACC,OAAOC;gBACnB,qBAAOnD,aAAamD,OAAO;oBAAED;oBAAOE,OAAOD,MAAME,KAAK,CAACnB,QAAQ;gBAAC;YAClE;;;AAIR,GACA;AACFD,iBAAiBqB,WAAW,GAAG;AAY/B,OAAO,SAAStB,eAAe,EAC7Bb,KAAK,EACLQ,YAAY,EACZG,kBAAkB,EAClBD,qBAAqB,EACrBE,2BAA2B,EAC3BV,QAAQ,EACRC,QAAQ,EACY;IACpB,qBACE,MAACX;QAAM4C,KAAK;QAAGC,eAAc;QAAMC,YAAW;;0BAC5C,KAACpD;gBACCqD,QAAQ;gBACRC,gBAAgB;gBAChBC,SAASjC,gBAAgB,EAAE;gBAC3BR,OAAOA,MAAMM,KAAK;gBAClBoC,IAAI;oBAAEC,UAAU;gBAAI;gBACpB7B,kBAAkBA;gBAClB8B,SAASlC;gBACTmC,aAAa,CAACC;oBACZ,qBACE,KAACrD;wBACE,GAAGqD,MAAM;wBACVxC,OAAM;wBACNyC,SAAQ;wBACRC,SAAS;wBACTC,MAAK;wBACLP,IAAI;4BACF,4BAA4B;gCAC1BQ,sBAAsB;gCACtBC,yBAAyB;4BAC3B;wBACF;;gBAGN;gBACAC,eAAe,CAACC,GAAmBC;oBACjCpD,SAAS;wBAAEI,OAAOgD,YAAY;wBAAIC,aAAavD,MAAMuD,WAAW;wBAAEC,UAAUxD,MAAMwD,QAAQ;oBAAC;gBAC7F;;0BAEF,MAACjE;gBACCS,OAAOA,MAAMwD,QAAQ;gBACrBT,SAAQ;gBACR7C,UAAU,CAACuD;oBACT,IAAIzD,MAAMwD,QAAQ,KAAK,OAAOxD,MAAMwD,QAAQ,KAAK,MAAM;wBACrD,iCAAiC;wBACjC,OAAOtD,SAAS;4BAAEI,OAAON,MAAMM,KAAK;4BAAEiD,aAAa,EAAE;4BAAEC,UAAUC,MAAMC,MAAM,CAAC1D,KAAK;wBAAa;oBAClG;oBAEA,IAAIA,MAAMwD,QAAQ,KAAK,QAAQxD,MAAMwD,QAAQ,KAAK,MAAM;wBACtD,iEAAiE;wBACjE,OAAOtD,SAAS;4BACdI,OAAON,MAAMM,KAAK;4BAClBiD,aAAavD,MAAMuD,WAAW,CAACI,KAAK,CAAC,GAAG;4BACxCH,UAAUC,MAAMC,MAAM,CAAC1D,KAAK;wBAC9B;oBACF;oBAEAE,SAAS;wBAAEI,OAAON,MAAMM,KAAK;wBAAEiD,aAAavD,MAAMuD,WAAW;wBAAEC,UAAUC,MAAMC,MAAM,CAAC1D,KAAK;oBAAa;gBAC1G;gBACAiD,MAAK;gBACLP,IAAI;oBAAEkB,qBAAqB;oBAAGC,wBAAwB;oBAAGX,sBAAsB;oBAAGC,yBAAyB;gBAAE;;kCAE7G,KAAC7D;wBAASU,OAAM;kCAAI;;kCACpB,KAACV;wBAASU,OAAM;kCAAK;;kCACrB,KAACV;wBAASU,OAAM;kCAAK;;kCACrB,KAACV;wBAASU,OAAM;kCAAK;;;;0BAEvB,KAACd;gBACCqD,QAAQ;gBACRuB,UAAU9D,MAAMwD,QAAQ,KAAK,QAAQxD,MAAMwD,QAAQ,KAAK;gBACxDO,WAAW;gBACXvB,gBAAgB;gBAChBC,SAAS9B,sBAAsB,EAAE;gBACjCX,OAAOA,MAAMuD,WAAW;gBACxBzC,kBAAkBA;gBAClB4B,IAAI;oBAAEC,UAAU;gBAAI;gBACpBC,SAAShC;gBACTiC,aAAa,CAACC;oBACZ,qBACE,KAACrD;wBACE,GAAGqD,MAAM;wBACVxC,OAAON,MAAMwD,QAAQ,KAAK,QAAQxD,MAAMwD,QAAQ,KAAK,OAAO,iBAAiB;wBAC7ET,SAAQ;wBACRC,SAAS;wBACTC,MAAK;wBACLP,IAAI;4BACF,4BAA4B;gCAC1BkB,qBAAqB;gCACrBC,wBAAwB;4BAC1B;wBACF;wBACAG,WAAW;4BACTC,OAAO;gCACL,GAAGnB,OAAOoB,UAAU;gCACpB5C,OAAO;oCACLI,WAAW;gCACb;gCACAyC,4BACE,MAAC9E;oCAAe+E,UAAS;;wCACtBxD,4CAA8B,KAACzB;4CAAiBkF,OAAM;4CAAUpB,MAAM;6CAAS;sDAChF,KAAC7D;4CAAWkF,cAAW;4CAAsBC,SAAS,IAAMpE;4CAAYqE,MAAK;sDAC3E,cAAA,KAAC9E;;;;4BAIT;wBACF;;gBAGN;gBACA0D,eAAe,CAACC,GAAGC;oBACjB,IAAItD,MAAMwD,QAAQ,KAAK,OAAOxD,MAAMwD,QAAQ,KAAK,MAAM;wBACrDtD,SAAS;4BAAEI,OAAON,MAAMM,KAAK;4BAAEiD,aAAa;gCAACD;6BAAS;4BAAEE,UAAUxD,MAAMwD,QAAQ;wBAAC;oBACnF;gBACF;gBACAtD,UAAU,CAACmD,GAAGC;oBACZ,IAAImB,MAAMC,OAAO,CAACpB,WAAW;wBAC3BpD,SAAS;4BAAEI,OAAON,MAAMM,KAAK;4BAAEiD,aAAaD;4BAAUE,UAAUxD,MAAMwD,QAAQ;wBAAC;oBACjF;gBACF;;;;AAIR"}

package/lib/explore/PrometheusMetricsFinder/overview/tabs/OverviewTab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OverviewTab.d.ts","sourceRoot":"","sources":["../../../../../../src/explore/PrometheusMetricsFinder/overview/tabs/OverviewTab.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAC;AACxD,OAAO,EAYL,UAAU,EAKX,MAAM,eAAe,CAAC;AAKvB,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAY,MAAM,aAAa,CAAC;AAKvE,MAAM,WAAW,mBAAoB,SAAQ,UAAU;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,iBAAiB,EAAE,CAAC;IACnC,WAAW,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC3C,OAAO,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;CAC5B;AAED,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,GAAG,YAAY,CAkIjH;AAED,MAAM,WAAW,qBAAsB,SAAQ,UAAU;IACvD,kBAAkB,EAAE,GAAG,CAAC,MAAM,EAAE,iBAAiB,EAAE,CAAC,CAAC;IACrD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;CAC5C;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,kBAAkB,EAClB,SAAS,EACT,WAAW,EACX,GAAG,KAAK,EACT,EAAE,qBAAqB,GAAG,YAAY,CAiCtC;AAED,MAAM,WAAW,gBAAiB,SAAQ,UAAU;IAClD,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,kBAAkB,CAAC;IAC/B,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,WAAW,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;CAC5C;AAED,wBAAgB,WAAW,CAAC,EAC1B,UAAU,EACV,UAAU,EACV,OAAO,EACP,WAAW,EACX,GAAG,KAAK,EACT,EAAE,gBAAgB,GAAG,YAAY,CA2DjC"}
+{"version":3,"file":"OverviewTab.d.ts","sourceRoot":"","sources":["../../../../../../src/explore/PrometheusMetricsFinder/overview/tabs/OverviewTab.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAC;AACxD,OAAO,EAYL,UAAU,EAKX,MAAM,eAAe,CAAC;AAKvB,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAY,MAAM,aAAa,CAAC;AAKvE,MAAM,WAAW,mBAAoB,SAAQ,UAAU;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,iBAAiB,EAAE,CAAC;IACnC,WAAW,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC3C,OAAO,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;CAC5B;AAED,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,GAAG,YAAY,CAuIjH;AAED,MAAM,WAAW,qBAAsB,SAAQ,UAAU;IACvD,kBAAkB,EAAE,GAAG,CAAC,MAAM,EAAE,iBAAiB,EAAE,CAAC,CAAC;IACrD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;CAC5C;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,kBAAkB,EAClB,SAAS,EACT,WAAW,EACX,GAAG,KAAK,EACT,EAAE,qBAAqB,GAAG,YAAY,CAiCtC;AAED,MAAM,WAAW,gBAAiB,SAAQ,UAAU;IAClD,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,kBAAkB,CAAC;IAC/B,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,WAAW,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;CAC5C;AAED,wBAAgB,WAAW,CAAC,EAC1B,UAAU,EACV,UAAU,EACV,OAAO,EACP,WAAW,EACX,GAAG,KAAK,EACT,EAAE,gBAAgB,GAAG,YAAY,CA2DjC"}

package/lib/explore/PrometheusMetricsFinder/overview/tabs/OverviewTab.js

@@ -152,16 +152,27 @@ export function LabelValuesRow({ label, valueCounters, onFilterAdd, ...props })
                 },
                 gap: 0.5,
                 children: [
-                    /*#__PURE__*/ _jsx(Stack, {
+                    /*#__PURE__*/ _jsxs(Stack, {
                         direction: "row",
-                        gap: 2,
-                        children: /*#__PURE__*/ _jsxs(Typography, {
-                            variant: "subtitle1",
-                            children: [
-                                valueCounters.length,
-                                " values"
-                            ]
-                        })
+                        gap: 0.5,
+                        children: [
+                            /*#__PURE__*/ _jsxs(Typography, {
+                                variant: "subtitle1",
+                                children: [
+                                    valueCounters.length,
+                                    " values"
+                                ]
+                            }),
+                            valueCounters.length > 5 && /*#__PURE__*/ _jsx(Button, {
+                                variant: "text",
+                                size: "small",
+                                sx: {
+                                    padding: 0
+                                },
+                                onClick: ()=>setShowAllValues((prev)=>!prev),
+                                children: showAllValues ? '[-]' : '[+]'
+                            })
+                        ]
                     }),
                     /*#__PURE__*/ _jsx(Stack, {
                         sx: {

package/lib/explore/PrometheusMetricsFinder/overview/tabs/OverviewTab.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/explore/PrometheusMetricsFinder/overview/tabs/OverviewTab.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 { ReactElement, useMemo, useState } from 'react';\nimport {\n  Autocomplete,\n  Button,\n  Chip,\n  CircularProgress,\n  Divider,\n  IconButton,\n  MenuItem,\n  Select,\n  SelectChangeEvent,\n  Skeleton,\n  Stack,\n  StackProps,\n  TextField,\n  Typography,\n  useMediaQuery,\n  useTheme,\n} from '@mui/material';\nimport PlusIcon from 'mdi-material-ui/Plus';\nimport CheckIcon from 'mdi-material-ui/Check';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { ErrorAlert } from '@perses-dev/components';\nimport { LabelFilter, LabelValueCounter, Operator } from '../../types';\nimport { ListboxComponent } from '../../filter/FilterInputs';\nimport { useMetricMetadata, useSeriesStates } from '../../utils';\nimport { MetricChip } from '../../display/MetricChip';\n\nexport interface LabelValuesRowProps extends StackProps {\n  label: string;\n  valueCounters: LabelValueCounter[];\n  onFilterAdd: (filter: LabelFilter) => void;\n  orderBy?: 'asc' | 'amount';\n}\n\nexport function LabelValuesRow({ label, valueCounters, onFilterAdd, ...props }: LabelValuesRowProps): ReactElement {\n  const [isAddingFilter, setIsAddingFilter] = useState(false);\n  const [operator, setOperator] = useState<Operator>('=');\n  const [value, setValue] = useState('');\n  const [showAllValues, setShowAllValues] = useState(false);\n  const isMobileSize = useMediaQuery(useTheme().breakpoints.down('md'));\n\n  const displayedValueCounters = useMemo(() => {\n    if (showAllValues) {\n      return valueCounters;\n    }\n    return valueCounters.slice(0, 5);\n  }, [showAllValues, valueCounters]);\n\n  return (\n    <Stack\n      key={label}\n      sx={{ width: '100%' }}\n      direction={isMobileSize ? 'column' : 'row'}\n      alignItems=\"center\"\n      gap={2}\n      {...props}\n    >\n      <Stack\n        sx={{ width: '100%', height: '100%' }}\n        justifyContent=\"space-between\"\n        alignContent=\"center\"\n        direction={isMobileSize ? 'column' : 'row'}\n      >\n        <Typography sx={{ fontFamily: 'monospace' }} pl={isMobileSize ? 0 : 1}>\n          {label}\n        </Typography>\n        <Stack direction=\"row\" gap={1} alignItems=\"center\">\n          {isAddingFilter ? (\n            <>\n              <Select\n                size=\"small\"\n                value={operator}\n                variant=\"outlined\"\n                onChange={(event: SelectChangeEvent) => {\n                  setOperator(event.target.value as Operator);\n                }}\n              >\n                <MenuItem value=\"=\">=</MenuItem>\n                <MenuItem value=\"!=\">!=</MenuItem>\n                <MenuItem value=\"=~\">=~</MenuItem>\n                <MenuItem value=\"!~\">!~</MenuItem>\n              </Select>\n              <Autocomplete\n                freeSolo\n                limitTags={1}\n                disableClearable\n                options={valueCounters.map((counters) => counters.labelValue)}\n                value={value}\n                ListboxComponent={ListboxComponent}\n                sx={{ width: 250 }}\n                renderInput={(params) => {\n                  return <TextField {...params} label=\"Value\" variant=\"outlined\" fullWidth size=\"small\" />;\n                }}\n                onInputChange={(_, newValue) => {\n                  setValue(newValue);\n                }}\n              />\n              <IconButton\n                aria-label=\"confirm\"\n                onClick={() => {\n                  onFilterAdd({ label, labelValues: [value], operator });\n                  setIsAddingFilter(false);\n                }}\n              >\n                <CheckIcon />\n              </IconButton>\n              <IconButton\n                aria-label=\"cancel\"\n                onClick={() => {\n                  setIsAddingFilter(false);\n                }}\n              >\n                <CloseIcon />\n              </IconButton>\n            </>\n          ) : (\n            <Button startIcon={<PlusIcon />} aria-label=\"add filter\" onClick={() => setIsAddingFilter(true)}>\n              Add filter\n            </Button>\n          )}\n        </Stack>\n      </Stack>\n\n      <Stack sx={{ width: '100%' }} gap={0.5}>\n        <Stack direction=\"row\" gap={2}>\n          <Typography variant=\"subtitle1\">{valueCounters.length} values</Typography>\n        </Stack>\n\n        <Stack sx={{ overflow: isMobileSize ? 'auto' : 'unset' }}>\n          {displayedValueCounters.map((labelValueCounter) => (\n            <Stack key={`${label}-${labelValueCounter.labelValue}`} direction=\"row\" gap={2}>\n              <Typography\n                sx={{\n                  color: (theme) => theme.palette.success.main,\n                  fontFamily: 'monospace',\n                  ':hover': { backgroundColor: 'rgba(127,127,127,0.35)', cursor: 'pointer' },\n                  textWrap: isMobileSize ? 'nowrap' : 'unset',\n                }}\n                onClick={() => onFilterAdd({ label, labelValues: [labelValueCounter.labelValue], operator: '=' })}\n              >\n                {labelValueCounter.labelValue}\n              </Typography>\n              <Typography sx={{ textWrap: 'nowrap' }}>({labelValueCounter.counter} series)</Typography>\n            </Stack>\n          ))}\n        </Stack>\n        <Stack width=\"100%\" textAlign={isMobileSize ? 'center' : 'unset'}>\n          {showAllValues ? (\n            <Button variant=\"text\" sx={{ width: 'fit-content' }} onClick={() => setShowAllValues(false)}>\n              Hide full values\n            </Button>\n          ) : (\n            <>\n              {valueCounters.length > 5 && (\n                <Button variant=\"text\" sx={{ width: 'fit-content' }} onClick={() => setShowAllValues(true)}>\n                  Show {valueCounters.length - 5} more values\n                </Button>\n              )}\n            </>\n          )}\n        </Stack>\n      </Stack>\n    </Stack>\n  );\n}\n\nexport interface LabelValuesTableProps extends StackProps {\n  labelValueCounters: Map<string, LabelValueCounter[]>;\n  isLoading?: boolean;\n  onFilterAdd: (filter: LabelFilter) => void;\n}\n\nexport function LabelValuesTable({\n  labelValueCounters,\n  isLoading,\n  onFilterAdd,\n  ...props\n}: LabelValuesTableProps): ReactElement {\n  const labels: string[] = useMemo(() => {\n    return [...labelValueCounters.keys()].sort();\n  }, [labelValueCounters]);\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    <Stack sx={{ width: '100%' }} divider={<Divider flexItem orientation=\"horizontal\" />} gap={2} {...props}>\n      <Stack gap={2} direction=\"row\" sx={{ width: '100%' }}>\n        <Stack sx={{ width: '100%' }}>\n          <Typography variant=\"h3\">Label</Typography>\n        </Stack>\n        <Stack sx={{ width: '100%' }}>\n          <Typography variant=\"h3\">Values</Typography>\n        </Stack>\n      </Stack>\n      {labels.map((label) => (\n        <LabelValuesRow\n          key={label}\n          label={label}\n          valueCounters={labelValueCounters.get(label) ?? []}\n          onFilterAdd={onFilterAdd}\n        />\n      ))}\n    </Stack>\n  );\n}\n\nexport interface OverviewTabProps extends StackProps {\n  metricName: string;\n  datasource: DatasourceSelector;\n  filters: LabelFilter[];\n  onFilterAdd: (filter: LabelFilter) => void;\n}\n\nexport function OverviewTab({\n  metricName,\n  datasource,\n  filters,\n  onFilterAdd,\n  ...props\n}: OverviewTabProps): ReactElement {\n  const { metadata, isLoading: isMetadataLoading, error: metadataError } = useMetricMetadata(metricName, datasource);\n  const { series, labelValueCounters, isLoading, error } = useSeriesStates(metricName, filters, datasource);\n\n  return (\n    <Stack gap={2} {...props}>\n      <Stack direction=\"row\" gap={3} mt={1} justifyContent=\"space-between\">\n        <Stack gap={1}>\n          <Typography variant=\"h1\" sx={{ fontFamily: 'monospace' }}>\n            {metricName}\n          </Typography>\n          <Typography>Description:</Typography>\n          {isMetadataLoading ? (\n            <Skeleton variant=\"text\" width={180} />\n          ) : (\n            <Typography style={{ fontStyle: metadata?.help ? 'initial' : 'italic' }}>\n              {metadataError ? 'Failed to fetch metadata' : (metadata?.help ?? 'unknown')}\n            </Typography>\n          )}\n        </Stack>\n        <Stack gap={1} justifyContent=\"center\">\n          {isMetadataLoading ? (\n            <Skeleton variant=\"rounded\" width={75} />\n          ) : metadataError ? (\n            <Chip label=\"failed to fetch\" color=\"error\" sx={{ fontStyle: 'italic' }} />\n          ) : (\n            <MetricChip label={metadata?.type ?? 'unknown'} />\n          )}\n          <Typography>\n            Result:{' '}\n            {isLoading ? (\n              <Skeleton variant=\"text\" width={20} sx={{ display: 'inline-block' }} />\n            ) : error ? (\n              <strong>failed to fetch series</strong>\n            ) : (\n              <strong>{series?.length ?? 'unknown'} series</strong>\n            )}\n          </Typography>\n        </Stack>\n      </Stack>\n\n      {error ? (\n        <ErrorAlert\n          error={{\n            name: `Failed to fetch series ${error?.status && `(${error.status})`}`,\n            message: error?.message ?? 'Failed to fetch series',\n          }}\n        />\n      ) : series?.length === 0 ? (\n        <Stack {...props}>\n          <Typography sx={{ color: (theme) => theme.palette.warning.main }}>\n            No series found with current filters.\n          </Typography>\n        </Stack>\n      ) : (\n        <LabelValuesTable labelValueCounters={labelValueCounters} onFilterAdd={onFilterAdd} isLoading={isLoading} />\n      )}\n    </Stack>\n  );\n}\n"],"names":["useMemo","useState","Autocomplete","Button","Chip","CircularProgress","Divider","IconButton","MenuItem","Select","Skeleton","Stack","TextField","Typography","useMediaQuery","useTheme","PlusIcon","CheckIcon","CloseIcon","ErrorAlert","ListboxComponent","useMetricMetadata","useSeriesStates","MetricChip","LabelValuesRow","label","valueCounters","onFilterAdd","props","isAddingFilter","setIsAddingFilter","operator","setOperator","value","setValue","showAllValues","setShowAllValues","isMobileSize","breakpoints","down","displayedValueCounters","slice","sx","width","direction","alignItems","gap","height","justifyContent","alignContent","fontFamily","pl","size","variant","onChange","event","target","freeSolo","limitTags","disableClearable","options","map","counters","labelValue","renderInput","params","fullWidth","onInputChange","_","newValue","aria-label","onClick","labelValues","startIcon","length","overflow","labelValueCounter","color","theme","palette","success","main","backgroundColor","cursor","textWrap","counter","textAlign","LabelValuesTable","labelValueCounters","isLoading","labels","keys","sort","divider","flexItem","orientation","get","OverviewTab","metricName","datasource","filters","metadata","isMetadataLoading","error","metadataError","series","mt","style","fontStyle","help","type","display","strong","name","status","message","warning"],"mappings":"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"}
+{"version":3,"sources":["../../../../../../src/explore/PrometheusMetricsFinder/overview/tabs/OverviewTab.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 { ReactElement, useMemo, useState } from 'react';\nimport {\n  Autocomplete,\n  Button,\n  Chip,\n  CircularProgress,\n  Divider,\n  IconButton,\n  MenuItem,\n  Select,\n  SelectChangeEvent,\n  Skeleton,\n  Stack,\n  StackProps,\n  TextField,\n  Typography,\n  useMediaQuery,\n  useTheme,\n} from '@mui/material';\nimport PlusIcon from 'mdi-material-ui/Plus';\nimport CheckIcon from 'mdi-material-ui/Check';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { ErrorAlert } from '@perses-dev/components';\nimport { LabelFilter, LabelValueCounter, Operator } from '../../types';\nimport { ListboxComponent } from '../../filter/FilterInputs';\nimport { useMetricMetadata, useSeriesStates } from '../../utils';\nimport { MetricChip } from '../../display/MetricChip';\n\nexport interface LabelValuesRowProps extends StackProps {\n  label: string;\n  valueCounters: LabelValueCounter[];\n  onFilterAdd: (filter: LabelFilter) => void;\n  orderBy?: 'asc' | 'amount';\n}\n\nexport function LabelValuesRow({ label, valueCounters, onFilterAdd, ...props }: LabelValuesRowProps): ReactElement {\n  const [isAddingFilter, setIsAddingFilter] = useState(false);\n  const [operator, setOperator] = useState<Operator>('=');\n  const [value, setValue] = useState('');\n  const [showAllValues, setShowAllValues] = useState(false);\n  const isMobileSize = useMediaQuery(useTheme().breakpoints.down('md'));\n\n  const displayedValueCounters = useMemo(() => {\n    if (showAllValues) {\n      return valueCounters;\n    }\n    return valueCounters.slice(0, 5);\n  }, [showAllValues, valueCounters]);\n\n  return (\n    <Stack\n      key={label}\n      sx={{ width: '100%' }}\n      direction={isMobileSize ? 'column' : 'row'}\n      alignItems=\"center\"\n      gap={2}\n      {...props}\n    >\n      <Stack\n        sx={{ width: '100%', height: '100%' }}\n        justifyContent=\"space-between\"\n        alignContent=\"center\"\n        direction={isMobileSize ? 'column' : 'row'}\n      >\n        <Typography sx={{ fontFamily: 'monospace' }} pl={isMobileSize ? 0 : 1}>\n          {label}\n        </Typography>\n        <Stack direction=\"row\" gap={1} alignItems=\"center\">\n          {isAddingFilter ? (\n            <>\n              <Select\n                size=\"small\"\n                value={operator}\n                variant=\"outlined\"\n                onChange={(event: SelectChangeEvent) => {\n                  setOperator(event.target.value as Operator);\n                }}\n              >\n                <MenuItem value=\"=\">=</MenuItem>\n                <MenuItem value=\"!=\">!=</MenuItem>\n                <MenuItem value=\"=~\">=~</MenuItem>\n                <MenuItem value=\"!~\">!~</MenuItem>\n              </Select>\n              <Autocomplete\n                freeSolo\n                limitTags={1}\n                disableClearable\n                options={valueCounters.map((counters) => counters.labelValue)}\n                value={value}\n                ListboxComponent={ListboxComponent}\n                sx={{ width: 250 }}\n                renderInput={(params) => {\n                  return <TextField {...params} label=\"Value\" variant=\"outlined\" fullWidth size=\"small\" />;\n                }}\n                onInputChange={(_, newValue) => {\n                  setValue(newValue);\n                }}\n              />\n              <IconButton\n                aria-label=\"confirm\"\n                onClick={() => {\n                  onFilterAdd({ label, labelValues: [value], operator });\n                  setIsAddingFilter(false);\n                }}\n              >\n                <CheckIcon />\n              </IconButton>\n              <IconButton\n                aria-label=\"cancel\"\n                onClick={() => {\n                  setIsAddingFilter(false);\n                }}\n              >\n                <CloseIcon />\n              </IconButton>\n            </>\n          ) : (\n            <Button startIcon={<PlusIcon />} aria-label=\"add filter\" onClick={() => setIsAddingFilter(true)}>\n              Add filter\n            </Button>\n          )}\n        </Stack>\n      </Stack>\n\n      <Stack sx={{ width: '100%' }} gap={0.5}>\n        <Stack direction=\"row\" gap={0.5}>\n          <Typography variant=\"subtitle1\">{valueCounters.length} values</Typography>\n          {valueCounters.length > 5 && (\n            <Button variant=\"text\" size=\"small\" sx={{ padding: 0 }} onClick={() => setShowAllValues((prev) => !prev)}>\n              {showAllValues ? '[-]' : '[+]'}\n            </Button>\n          )}\n        </Stack>\n\n        <Stack sx={{ overflow: isMobileSize ? 'auto' : 'unset' }}>\n          {displayedValueCounters.map((labelValueCounter) => (\n            <Stack key={`${label}-${labelValueCounter.labelValue}`} direction=\"row\" gap={2}>\n              <Typography\n                sx={{\n                  color: (theme) => theme.palette.success.main,\n                  fontFamily: 'monospace',\n                  ':hover': { backgroundColor: 'rgba(127,127,127,0.35)', cursor: 'pointer' },\n                  textWrap: isMobileSize ? 'nowrap' : 'unset',\n                }}\n                onClick={() => onFilterAdd({ label, labelValues: [labelValueCounter.labelValue], operator: '=' })}\n              >\n                {labelValueCounter.labelValue}\n              </Typography>\n              <Typography sx={{ textWrap: 'nowrap' }}>({labelValueCounter.counter} series)</Typography>\n            </Stack>\n          ))}\n        </Stack>\n        <Stack width=\"100%\" textAlign={isMobileSize ? 'center' : 'unset'}>\n          {showAllValues ? (\n            <Button variant=\"text\" sx={{ width: 'fit-content' }} onClick={() => setShowAllValues(false)}>\n              Hide full values\n            </Button>\n          ) : (\n            <>\n              {valueCounters.length > 5 && (\n                <Button variant=\"text\" sx={{ width: 'fit-content' }} onClick={() => setShowAllValues(true)}>\n                  Show {valueCounters.length - 5} more values\n                </Button>\n              )}\n            </>\n          )}\n        </Stack>\n      </Stack>\n    </Stack>\n  );\n}\n\nexport interface LabelValuesTableProps extends StackProps {\n  labelValueCounters: Map<string, LabelValueCounter[]>;\n  isLoading?: boolean;\n  onFilterAdd: (filter: LabelFilter) => void;\n}\n\nexport function LabelValuesTable({\n  labelValueCounters,\n  isLoading,\n  onFilterAdd,\n  ...props\n}: LabelValuesTableProps): ReactElement {\n  const labels: string[] = useMemo(() => {\n    return [...labelValueCounters.keys()].sort();\n  }, [labelValueCounters]);\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    <Stack sx={{ width: '100%' }} divider={<Divider flexItem orientation=\"horizontal\" />} gap={2} {...props}>\n      <Stack gap={2} direction=\"row\" sx={{ width: '100%' }}>\n        <Stack sx={{ width: '100%' }}>\n          <Typography variant=\"h3\">Label</Typography>\n        </Stack>\n        <Stack sx={{ width: '100%' }}>\n          <Typography variant=\"h3\">Values</Typography>\n        </Stack>\n      </Stack>\n      {labels.map((label) => (\n        <LabelValuesRow\n          key={label}\n          label={label}\n          valueCounters={labelValueCounters.get(label) ?? []}\n          onFilterAdd={onFilterAdd}\n        />\n      ))}\n    </Stack>\n  );\n}\n\nexport interface OverviewTabProps extends StackProps {\n  metricName: string;\n  datasource: DatasourceSelector;\n  filters: LabelFilter[];\n  onFilterAdd: (filter: LabelFilter) => void;\n}\n\nexport function OverviewTab({\n  metricName,\n  datasource,\n  filters,\n  onFilterAdd,\n  ...props\n}: OverviewTabProps): ReactElement {\n  const { metadata, isLoading: isMetadataLoading, error: metadataError } = useMetricMetadata(metricName, datasource);\n  const { series, labelValueCounters, isLoading, error } = useSeriesStates(metricName, filters, datasource);\n\n  return (\n    <Stack gap={2} {...props}>\n      <Stack direction=\"row\" gap={3} mt={1} justifyContent=\"space-between\">\n        <Stack gap={1}>\n          <Typography variant=\"h1\" sx={{ fontFamily: 'monospace' }}>\n            {metricName}\n          </Typography>\n          <Typography>Description:</Typography>\n          {isMetadataLoading ? (\n            <Skeleton variant=\"text\" width={180} />\n          ) : (\n            <Typography style={{ fontStyle: metadata?.help ? 'initial' : 'italic' }}>\n              {metadataError ? 'Failed to fetch metadata' : (metadata?.help ?? 'unknown')}\n            </Typography>\n          )}\n        </Stack>\n        <Stack gap={1} justifyContent=\"center\">\n          {isMetadataLoading ? (\n            <Skeleton variant=\"rounded\" width={75} />\n          ) : metadataError ? (\n            <Chip label=\"failed to fetch\" color=\"error\" sx={{ fontStyle: 'italic' }} />\n          ) : (\n            <MetricChip label={metadata?.type ?? 'unknown'} />\n          )}\n          <Typography>\n            Result:{' '}\n            {isLoading ? (\n              <Skeleton variant=\"text\" width={20} sx={{ display: 'inline-block' }} />\n            ) : error ? (\n              <strong>failed to fetch series</strong>\n            ) : (\n              <strong>{series?.length ?? 'unknown'} series</strong>\n            )}\n          </Typography>\n        </Stack>\n      </Stack>\n\n      {error ? (\n        <ErrorAlert\n          error={{\n            name: `Failed to fetch series ${error?.status && `(${error.status})`}`,\n            message: error?.message ?? 'Failed to fetch series',\n          }}\n        />\n      ) : series?.length === 0 ? (\n        <Stack {...props}>\n          <Typography sx={{ color: (theme) => theme.palette.warning.main }}>\n            No series found with current filters.\n          </Typography>\n        </Stack>\n      ) : (\n        <LabelValuesTable labelValueCounters={labelValueCounters} onFilterAdd={onFilterAdd} isLoading={isLoading} />\n      )}\n    </Stack>\n  );\n}\n"],"names":["useMemo","useState","Autocomplete","Button","Chip","CircularProgress","Divider","IconButton","MenuItem","Select","Skeleton","Stack","TextField","Typography","useMediaQuery","useTheme","PlusIcon","CheckIcon","CloseIcon","ErrorAlert","ListboxComponent","useMetricMetadata","useSeriesStates","MetricChip","LabelValuesRow","label","valueCounters","onFilterAdd","props","isAddingFilter","setIsAddingFilter","operator","setOperator","value","setValue","showAllValues","setShowAllValues","isMobileSize","breakpoints","down","displayedValueCounters","slice","sx","width","direction","alignItems","gap","height","justifyContent","alignContent","fontFamily","pl","size","variant","onChange","event","target","freeSolo","limitTags","disableClearable","options","map","counters","labelValue","renderInput","params","fullWidth","onInputChange","_","newValue","aria-label","onClick","labelValues","startIcon","length","padding","prev","overflow","labelValueCounter","color","theme","palette","success","main","backgroundColor","cursor","textWrap","counter","textAlign","LabelValuesTable","labelValueCounters","isLoading","labels","keys","sort","divider","flexItem","orientation","get","OverviewTab","metricName","datasource","filters","metadata","isMetadataLoading","error","metadataError","series","mt","style","fontStyle","help","type","display","strong","name","status","message","warning"],"mappings":"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"}

package/lib/plugins/prometheus-time-series-query/PrometheusTimeSeriesQueryEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PrometheusTimeSeriesQueryEditor.d.ts","sourceRoot":"","sources":["../../../../src/plugins/prometheus-time-series-query/PrometheusTimeSeriesQueryEditor.tsx"],"names":[],"mappings":"AAuBA,OAAO,EAAE,YAAY,EAAe,MAAM,OAAO,CAAC;AAYlD,OAAO,EACL,oCAAoC,EAIrC,MAAM,sBAAsB,CAAC;AAE9B;;GAEG;AACH,wBAAgB,+BAA+B,CAAC,KAAK,EAAE,oCAAoC,GAAG,YAAY,CAuHzG"}
+{"version":3,"file":"PrometheusTimeSeriesQueryEditor.d.ts","sourceRoot":"","sources":["../../../../src/plugins/prometheus-time-series-query/PrometheusTimeSeriesQueryEditor.tsx"],"names":[],"mappings":"AAuBA,OAAO,EAAE,YAAY,EAAe,MAAM,OAAO,CAAC;AAYlD,OAAO,EACL,oCAAoC,EAIrC,MAAM,sBAAsB,CAAC;AAE9B;;GAEG;AACH,wBAAgB,+BAA+B,CAAC,KAAK,EAAE,oCAAoC,GAAG,YAAY,CAkIzG"}