@perses-dev/prometheus-plugin 0.53.2 → 0.53.4

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":"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"}

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,CA4HzG"}
+{"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"}

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

@@ -123,7 +123,14 @@ import { useQueryState, useFormatState, useMinStepState } from './query-editor-m
                         value: format ?? '',
                         onChange: handleLegendSpecChange,
                         onBlur: queryHandlerSettings?.runWithOnBlur ? handleFormatBlur : undefined,
-                        disabled: isReadonly
+                        slotProps: {
+                            inputLabel: {
+                                shrink: isReadonly ? true : undefined
+                            },
+                            input: {
+                                readOnly: isReadonly
+                            }
+                        }
                     }),
                     /*#__PURE__*/ _jsx(TextField, {
                         label: "Min Step",
@@ -135,7 +142,14 @@ import { useQueryState, useFormatState, useMinStepState } from './query-editor-m
                         sx: {
                             width: '250px'
                         },
-                        disabled: isReadonly
+                        slotProps: {
+                            inputLabel: {
+                                shrink: isReadonly ? true : undefined
+                            },
+                            input: {
+                                readOnly: isReadonly
+                            }
+                        }
                     })
                 ]
             })

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/plugins/prometheus-time-series-query/PrometheusTimeSeriesQueryEditor.tsx"],"sourcesContent":["// Copyright 2023 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 { produce } from 'immer';\nimport {\n  DatasourceSelect,\n  DatasourceSelectProps,\n  useDatasource,\n  useDatasourceClient,\n  useDatasourceSelectValueToSelector,\n} from '@perses-dev/plugin-system';\nimport { useId } from '@perses-dev/components';\nimport { FormControl, Stack, TextField } from '@mui/material';\nimport { ReactElement, useCallback } from 'react';\nimport {\n  DEFAULT_PROM,\n  DurationString,\n  isDefaultPromSelector,\n  isPrometheusDatasourceSelector,\n  PROM_DATASOURCE_KIND,\n  PrometheusClient,\n  PrometheusDatasourceSelector,\n} from '../../model';\nimport { DEFAULT_SCRAPE_INTERVAL, PrometheusDatasourceSpec } from '../types';\nimport { PromQLEditor } from '../../components';\nimport {\n  PrometheusTimeSeriesQueryEditorProps,\n  useQueryState,\n  useFormatState,\n  useMinStepState,\n} from './query-editor-model';\n\n/**\n * The options editor component for editing a PrometheusTimeSeriesQuery's spec.\n */\nexport function PrometheusTimeSeriesQueryEditor(props: PrometheusTimeSeriesQueryEditorProps): ReactElement {\n  const {\n    onChange,\n    value,\n    value: { query, datasource },\n    queryHandlerSettings,\n    isReadonly,\n  } = props;\n\n  const datasourceSelectValue = datasource ?? DEFAULT_PROM;\n\n  const datasourceSelectLabelID = useId('prom-datasource-label'); // for panels with multiple queries, this component is rendered multiple times on the same page\n\n  const selectedDatasource = useDatasourceSelectValueToSelector(\n    datasourceSelectValue,\n    PROM_DATASOURCE_KIND\n  ) as PrometheusDatasourceSelector;\n\n  const { data: client } = useDatasourceClient<PrometheusClient>(selectedDatasource);\n  const promURL = client?.options.datasourceUrl;\n  const { data: datasourceResource } = useDatasource(selectedDatasource);\n\n  const { handleQueryChange, handleQueryBlur } = useQueryState(props);\n  const { format, handleFormatChange, handleFormatBlur } = useFormatState(props);\n  const { minStep, handleMinStepChange, handleMinStepBlur } = useMinStepState(props);\n  const minStepPlaceholder =\n    minStep ??\n    (datasourceResource && (datasourceResource?.plugin.spec as PrometheusDatasourceSpec).scrapeInterval) ??\n    DEFAULT_SCRAPE_INTERVAL;\n\n  const handleDatasourceChange: DatasourceSelectProps['onChange'] = (next) => {\n    if (isPrometheusDatasourceSelector(next)) {\n      /* Good to know: The usage of onchange here causes an immediate spec update which eventually updates the panel\n         This was probably intentional to allow for quick switching between datasources.\n         Could have been triggered only with Run Query button as well.\n      */\n      onChange(\n        produce(value, (draft) => {\n          // If they're using the default, just omit the datasource prop (i.e. set to undefined)\n          const nextDatasource = isDefaultPromSelector(next) ? undefined : next;\n          draft.datasource = nextDatasource;\n        })\n      );\n      if (queryHandlerSettings?.setWatchOtherSpecs)\n        queryHandlerSettings.setWatchOtherSpecs({ ...value, datasource: next });\n      return;\n    }\n\n    throw new Error('Got unexpected non-Prometheus datasource selector');\n  };\n\n  const handlePromQlEditorChanges = useCallback(\n    (e: string) => {\n      handleQueryChange(e);\n      if (queryHandlerSettings?.watchQueryChanges) {\n        queryHandlerSettings?.watchQueryChanges(e);\n      }\n    },\n    [queryHandlerSettings, handleQueryChange]\n  );\n\n  const handleLegendSpecChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n      handleFormatChange(e.target.value);\n      if (queryHandlerSettings?.setWatchOtherSpecs)\n        queryHandlerSettings.setWatchOtherSpecs({ ...value, seriesNameFormat: e.target.value });\n    },\n    [queryHandlerSettings, handleFormatChange, value]\n  );\n\n  const handleMinStepSpecChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n      handleMinStepChange(e.target.value ? (e.target.value as DurationString) : undefined);\n      if (queryHandlerSettings?.setWatchOtherSpecs)\n        queryHandlerSettings.setWatchOtherSpecs({ ...value, minStep: e.target.value });\n    },\n    [queryHandlerSettings, handleMinStepChange, value]\n  );\n\n  return (\n    <Stack spacing={2}>\n      <FormControl margin=\"dense\" fullWidth={false}>\n        <DatasourceSelect\n          datasourcePluginKind={PROM_DATASOURCE_KIND}\n          value={datasourceSelectValue}\n          onChange={handleDatasourceChange}\n          labelId={datasourceSelectLabelID}\n          label=\"Prometheus Datasource\"\n          notched\n          readOnly={isReadonly}\n        />\n      </FormControl>\n      <PromQLEditor\n        completeConfig={{ remote: { url: promURL } }}\n        value={query} // here we are passing `value.query` and not `query` from useQueryState in order to get updates only on onBlur events\n        datasource={selectedDatasource}\n        onChange={handlePromQlEditorChanges}\n        onBlur={queryHandlerSettings?.runWithOnBlur ? handleQueryBlur : undefined}\n        isReadOnly={isReadonly}\n      />\n      <Stack direction=\"row\" spacing={2}>\n        <TextField\n          fullWidth\n          label=\"Legend\"\n          placeholder=\"Example: '{{instance}}' will generate series names like 'webserver-123', 'webserver-456'...\"\n          helperText=\"Text to be displayed in the legend and the tooltip. Use {{label_name}} to interpolate label values.\"\n          value={format ?? ''}\n          onChange={handleLegendSpecChange}\n          onBlur={queryHandlerSettings?.runWithOnBlur ? handleFormatBlur : undefined}\n          disabled={isReadonly}\n        />\n        <TextField\n          label=\"Min Step\"\n          placeholder={minStepPlaceholder}\n          helperText=\"Lower bound for the step. If not provided, the scrape interval of the datasource is used.\"\n          value={minStep ?? ''}\n          onChange={handleMinStepSpecChange}\n          onBlur={queryHandlerSettings?.runWithOnBlur ? handleMinStepBlur : undefined}\n          sx={{ width: '250px' }}\n          disabled={isReadonly}\n        />\n      </Stack>\n    </Stack>\n  );\n}\n"],"names":["produce","DatasourceSelect","useDatasource","useDatasourceClient","useDatasourceSelectValueToSelector","useId","FormControl","Stack","TextField","useCallback","DEFAULT_PROM","isDefaultPromSelector","isPrometheusDatasourceSelector","PROM_DATASOURCE_KIND","DEFAULT_SCRAPE_INTERVAL","PromQLEditor","useQueryState","useFormatState","useMinStepState","PrometheusTimeSeriesQueryEditor","props","onChange","value","query","datasource","queryHandlerSettings","isReadonly","datasourceSelectValue","datasourceSelectLabelID","selectedDatasource","data","client","promURL","options","datasourceUrl","datasourceResource","handleQueryChange","handleQueryBlur","format","handleFormatChange","handleFormatBlur","minStep","handleMinStepChange","handleMinStepBlur","minStepPlaceholder","plugin","spec","scrapeInterval","handleDatasourceChange","next","draft","nextDatasource","undefined","setWatchOtherSpecs","Error","handlePromQlEditorChanges","e","watchQueryChanges","handleLegendSpecChange","target","seriesNameFormat","handleMinStepSpecChange","spacing","margin","fullWidth","datasourcePluginKind","labelId","label","notched","readOnly","completeConfig","remote","url","onBlur","runWithOnBlur","isReadOnly","direction","placeholder","helperText","disabled","sx","width"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/plugins/prometheus-time-series-query/PrometheusTimeSeriesQueryEditor.tsx"],"sourcesContent":["// Copyright 2023 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 { produce } from 'immer';\nimport {\n  DatasourceSelect,\n  DatasourceSelectProps,\n  useDatasource,\n  useDatasourceClient,\n  useDatasourceSelectValueToSelector,\n} from '@perses-dev/plugin-system';\nimport { useId } from '@perses-dev/components';\nimport { FormControl, Stack, TextField } from '@mui/material';\nimport { ReactElement, useCallback } from 'react';\nimport {\n  DEFAULT_PROM,\n  DurationString,\n  isDefaultPromSelector,\n  isPrometheusDatasourceSelector,\n  PROM_DATASOURCE_KIND,\n  PrometheusClient,\n  PrometheusDatasourceSelector,\n} from '../../model';\nimport { DEFAULT_SCRAPE_INTERVAL, PrometheusDatasourceSpec } from '../types';\nimport { PromQLEditor } from '../../components';\nimport {\n  PrometheusTimeSeriesQueryEditorProps,\n  useQueryState,\n  useFormatState,\n  useMinStepState,\n} from './query-editor-model';\n\n/**\n * The options editor component for editing a PrometheusTimeSeriesQuery's spec.\n */\nexport function PrometheusTimeSeriesQueryEditor(props: PrometheusTimeSeriesQueryEditorProps): ReactElement {\n  const {\n    onChange,\n    value,\n    value: { query, datasource },\n    queryHandlerSettings,\n    isReadonly,\n  } = props;\n\n  const datasourceSelectValue = datasource ?? DEFAULT_PROM;\n\n  const datasourceSelectLabelID = useId('prom-datasource-label'); // for panels with multiple queries, this component is rendered multiple times on the same page\n\n  const selectedDatasource = useDatasourceSelectValueToSelector(\n    datasourceSelectValue,\n    PROM_DATASOURCE_KIND\n  ) as PrometheusDatasourceSelector;\n\n  const { data: client } = useDatasourceClient<PrometheusClient>(selectedDatasource);\n  const promURL = client?.options.datasourceUrl;\n  const { data: datasourceResource } = useDatasource(selectedDatasource);\n\n  const { handleQueryChange, handleQueryBlur } = useQueryState(props);\n  const { format, handleFormatChange, handleFormatBlur } = useFormatState(props);\n  const { minStep, handleMinStepChange, handleMinStepBlur } = useMinStepState(props);\n  const minStepPlaceholder =\n    minStep ??\n    (datasourceResource && (datasourceResource?.plugin.spec as PrometheusDatasourceSpec).scrapeInterval) ??\n    DEFAULT_SCRAPE_INTERVAL;\n\n  const handleDatasourceChange: DatasourceSelectProps['onChange'] = (next) => {\n    if (isPrometheusDatasourceSelector(next)) {\n      /* Good to know: The usage of onchange here causes an immediate spec update which eventually updates the panel\n         This was probably intentional to allow for quick switching between datasources.\n         Could have been triggered only with Run Query button as well.\n      */\n      onChange(\n        produce(value, (draft) => {\n          // If they're using the default, just omit the datasource prop (i.e. set to undefined)\n          const nextDatasource = isDefaultPromSelector(next) ? undefined : next;\n          draft.datasource = nextDatasource;\n        })\n      );\n      if (queryHandlerSettings?.setWatchOtherSpecs)\n        queryHandlerSettings.setWatchOtherSpecs({ ...value, datasource: next });\n      return;\n    }\n\n    throw new Error('Got unexpected non-Prometheus datasource selector');\n  };\n\n  const handlePromQlEditorChanges = useCallback(\n    (e: string) => {\n      handleQueryChange(e);\n      if (queryHandlerSettings?.watchQueryChanges) {\n        queryHandlerSettings?.watchQueryChanges(e);\n      }\n    },\n    [queryHandlerSettings, handleQueryChange]\n  );\n\n  const handleLegendSpecChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n      handleFormatChange(e.target.value);\n      if (queryHandlerSettings?.setWatchOtherSpecs)\n        queryHandlerSettings.setWatchOtherSpecs({ ...value, seriesNameFormat: e.target.value });\n    },\n    [queryHandlerSettings, handleFormatChange, value]\n  );\n\n  const handleMinStepSpecChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n      handleMinStepChange(e.target.value ? (e.target.value as DurationString) : undefined);\n      if (queryHandlerSettings?.setWatchOtherSpecs)\n        queryHandlerSettings.setWatchOtherSpecs({ ...value, minStep: e.target.value });\n    },\n    [queryHandlerSettings, handleMinStepChange, value]\n  );\n\n  return (\n    <Stack spacing={2}>\n      <FormControl margin=\"dense\" fullWidth={false}>\n        <DatasourceSelect\n          datasourcePluginKind={PROM_DATASOURCE_KIND}\n          value={datasourceSelectValue}\n          onChange={handleDatasourceChange}\n          labelId={datasourceSelectLabelID}\n          label=\"Prometheus Datasource\"\n          notched\n          readOnly={isReadonly}\n        />\n      </FormControl>\n      <PromQLEditor\n        completeConfig={{ remote: { url: promURL } }}\n        value={query} // here we are passing `value.query` and not `query` from useQueryState in order to get updates only on onBlur events\n        datasource={selectedDatasource}\n        onChange={handlePromQlEditorChanges}\n        onBlur={queryHandlerSettings?.runWithOnBlur ? handleQueryBlur : undefined}\n        isReadOnly={isReadonly}\n      />\n      <Stack direction=\"row\" spacing={2}>\n        <TextField\n          fullWidth\n          label=\"Legend\"\n          placeholder=\"Example: '{{instance}}' will generate series names like 'webserver-123', 'webserver-456'...\"\n          helperText=\"Text to be displayed in the legend and the tooltip. Use {{label_name}} to interpolate label values.\"\n          value={format ?? ''}\n          onChange={handleLegendSpecChange}\n          onBlur={queryHandlerSettings?.runWithOnBlur ? handleFormatBlur : undefined}\n          slotProps={{\n            inputLabel: { shrink: isReadonly ? true : undefined },\n            input: { readOnly: isReadonly },\n          }}\n        />\n        <TextField\n          label=\"Min Step\"\n          placeholder={minStepPlaceholder}\n          helperText=\"Lower bound for the step. If not provided, the scrape interval of the datasource is used.\"\n          value={minStep ?? ''}\n          onChange={handleMinStepSpecChange}\n          onBlur={queryHandlerSettings?.runWithOnBlur ? handleMinStepBlur : undefined}\n          sx={{ width: '250px' }}\n          slotProps={{\n            inputLabel: { shrink: isReadonly ? true : undefined },\n            input: { readOnly: isReadonly },\n          }}\n        />\n      </Stack>\n    </Stack>\n  );\n}\n"],"names":["produce","DatasourceSelect","useDatasource","useDatasourceClient","useDatasourceSelectValueToSelector","useId","FormControl","Stack","TextField","useCallback","DEFAULT_PROM","isDefaultPromSelector","isPrometheusDatasourceSelector","PROM_DATASOURCE_KIND","DEFAULT_SCRAPE_INTERVAL","PromQLEditor","useQueryState","useFormatState","useMinStepState","PrometheusTimeSeriesQueryEditor","props","onChange","value","query","datasource","queryHandlerSettings","isReadonly","datasourceSelectValue","datasourceSelectLabelID","selectedDatasource","data","client","promURL","options","datasourceUrl","datasourceResource","handleQueryChange","handleQueryBlur","format","handleFormatChange","handleFormatBlur","minStep","handleMinStepChange","handleMinStepBlur","minStepPlaceholder","plugin","spec","scrapeInterval","handleDatasourceChange","next","draft","nextDatasource","undefined","setWatchOtherSpecs","Error","handlePromQlEditorChanges","e","watchQueryChanges","handleLegendSpecChange","target","seriesNameFormat","handleMinStepSpecChange","spacing","margin","fullWidth","datasourcePluginKind","labelId","label","notched","readOnly","completeConfig","remote","url","onBlur","runWithOnBlur","isReadOnly","direction","placeholder","helperText","slotProps","inputLabel","shrink","input","sx","width"],"mappings":"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"}