@perses-dev/prometheus-plugin 0.56.0 → 0.57.0-rc.1

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          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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"}
+{"version":3,"sources":["../../../../../src/explore/PrometheusMetricsFinder/filter/FilterInputs.tsx"],"sourcesContent":["// Copyright 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/filter/FinderFilters.js

@@ -1,4 +1,5 @@
-// Copyright 2024 The Perses Authors
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -10,7 +11,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, FormControl, Stack } from '@mui/material';
 import { DatasourceSelect, datasourceSelectValueToSelector, useListDatasourceSelectItems } from '@perses-dev/plugin-system';
 import PlusIcon from 'mdi-material-ui/Plus';

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/explore/PrometheusMetricsFinder/filter/FinderFilters.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 { Button, FormControl, Stack, StackProps } from '@mui/material';\nimport { DatasourceSelector } from '@perses-dev/core';\nimport {\n  DatasourceSelect,\n  DatasourceSelectValue,\n  datasourceSelectValueToSelector,\n  useListDatasourceSelectItems,\n} from '@perses-dev/plugin-system';\nimport PlusIcon from 'mdi-material-ui/Plus';\nimport { ReactElement } from 'react';\nimport { PROM_DATASOURCE_KIND } from '../../../model/prometheus-selectors';\nimport { LabelFilter } from '../types';\nimport { LabelFilterInput } from './FilterInputs';\n\nexport interface ExplorerFiltersProps extends StackProps {\n  datasource: DatasourceSelector;\n  filters: LabelFilter[];\n  filteredFilters: LabelFilter[];\n  onDatasourceChange: (next: DatasourceSelector) => void;\n  onFiltersChange: (next: LabelFilter[]) => void;\n}\n\nexport function FinderFilters({\n  datasource,\n  filters,\n  filteredFilters,\n  onDatasourceChange,\n  onFiltersChange,\n  ...props\n}: ExplorerFiltersProps): ReactElement {\n  const { data } = useListDatasourceSelectItems(PROM_DATASOURCE_KIND);\n  function handleDatasourceChange(next: DatasourceSelectValue): void {\n    const datasourceSelector = datasourceSelectValueToSelector(next, {}, data) ?? { kind: PROM_DATASOURCE_KIND };\n    onDatasourceChange(datasourceSelector);\n  }\n\n  return (\n    <Stack {...props} direction=\"row\" alignItems=\"center\" flexWrap=\"wrap\" gap={1} sx={{ width: '100%' }}>\n      <FormControl sx={{ width: 500 }}>\n        <DatasourceSelect\n          size=\"medium\"\n          datasourcePluginKind={PROM_DATASOURCE_KIND}\n          value={datasource}\n          onChange={handleDatasourceChange}\n          label=\"Prometheus Datasource\"\n          fullWidth={true}\n        />\n      </FormControl>\n      {filters.map((filter, index) => (\n        <LabelFilterInput\n          key={index}\n          datasource={datasource}\n          filters={filteredFilters}\n          value={filter}\n          onChange={(next) => {\n            const nextFilters = [...filters];\n            nextFilters[index] = next;\n            onFiltersChange(nextFilters);\n          }}\n          onDelete={() => {\n            const nextFilters = [...filters];\n            nextFilters.splice(index, 1);\n            onFiltersChange(nextFilters);\n          }}\n        />\n      ))}\n      <Button\n        startIcon={<PlusIcon />}\n        aria-label=\"add filter\"\n        onClick={() => {\n          onFiltersChange([...filters, { label: '', labelValues: [''], operator: '=' }]);\n        }}\n      >\n        Add filter\n      </Button>\n    </Stack>\n  );\n}\n"],"names":["Button","FormControl","Stack","DatasourceSelect","datasourceSelectValueToSelector","useListDatasourceSelectItems","PlusIcon","PROM_DATASOURCE_KIND","LabelFilterInput","FinderFilters","datasource","filters","filteredFilters","onDatasourceChange","onFiltersChange","props","data","handleDatasourceChange","next","datasourceSelector","kind","direction","alignItems","flexWrap","gap","sx","width","size","datasourcePluginKind","value","onChange","label","fullWidth","map","filter","index","nextFilters","onDelete","splice","startIcon","aria-label","onClick","labelValues","operator"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,MAAM,EAAEC,WAAW,EAAEC,KAAK,QAAoB,gBAAgB;AAEvE,SACEC,gBAAgB,EAEhBC,+BAA+B,EAC/BC,4BAA4B,QACvB,4BAA4B;AACnC,OAAOC,cAAc,uBAAuB;AAE5C,SAASC,oBAAoB,QAAQ,sCAAsC;AAE3E,SAASC,gBAAgB,QAAQ,iBAAiB;AAUlD,OAAO,SAASC,cAAc,EAC5BC,UAAU,EACVC,OAAO,EACPC,eAAe,EACfC,kBAAkB,EAClBC,eAAe,EACf,GAAGC,OACkB;IACrB,MAAM,EAAEC,IAAI,EAAE,GAAGX,6BAA6BE;IAC9C,SAASU,uBAAuBC,IAA2B;QACzD,MAAMC,qBAAqBf,gCAAgCc,MAAM,CAAC,GAAGF,SAAS;YAAEI,MAAMb;QAAqB;QAC3GM,mBAAmBM;IACrB;IAEA,qBACE,MAACjB;QAAO,GAAGa,KAAK;QAAEM,WAAU;QAAMC,YAAW;QAASC,UAAS;QAAOC,KAAK;QAAGC,IAAI;YAAEC,OAAO;QAAO;;0BAChG,KAACzB;gBAAYwB,IAAI;oBAAEC,OAAO;gBAAI;0BAC5B,cAAA,KAACvB;oBACCwB,MAAK;oBACLC,sBAAsBrB;oBACtBsB,OAAOnB;oBACPoB,UAAUb;oBACVc,OAAM;oBACNC,WAAW;;;YAGdrB,QAAQsB,GAAG,CAAC,CAACC,QAAQC,sBACpB,KAAC3B;oBAECE,YAAYA;oBACZC,SAASC;oBACTiB,OAAOK;oBACPJ,UAAU,CAACZ;wBACT,MAAMkB,cAAc;+BAAIzB;yBAAQ;wBAChCyB,WAAW,CAACD,MAAM,GAAGjB;wBACrBJ,gBAAgBsB;oBAClB;oBACAC,UAAU;wBACR,MAAMD,cAAc;+BAAIzB;yBAAQ;wBAChCyB,YAAYE,MAAM,CAACH,OAAO;wBAC1BrB,gBAAgBsB;oBAClB;mBAbKD;0BAgBT,KAACnC;gBACCuC,yBAAW,KAACjC;gBACZkC,cAAW;gBACXC,SAAS;oBACP3B,gBAAgB;2BAAIH;wBAAS;4BAAEoB,OAAO;4BAAIW,aAAa;gCAAC;6BAAG;4BAAEC,UAAU;wBAAI;qBAAE;gBAC/E;0BACD;;;;AAKP"}
+{"version":3,"sources":["../../../../../src/explore/PrometheusMetricsFinder/filter/FinderFilters.tsx"],"sourcesContent":["// Copyright 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 { Button, FormControl, Stack, StackProps } from '@mui/material';\nimport { DatasourceSelector } from '@perses-dev/core';\nimport {\n  DatasourceSelect,\n  DatasourceSelectValue,\n  datasourceSelectValueToSelector,\n  useListDatasourceSelectItems,\n} from '@perses-dev/plugin-system';\nimport PlusIcon from 'mdi-material-ui/Plus';\nimport { ReactElement } from 'react';\nimport { PROM_DATASOURCE_KIND } from '../../../model/prometheus-selectors';\nimport { LabelFilter } from '../types';\nimport { LabelFilterInput } from './FilterInputs';\n\nexport interface ExplorerFiltersProps extends StackProps {\n  datasource: DatasourceSelector;\n  filters: LabelFilter[];\n  filteredFilters: LabelFilter[];\n  onDatasourceChange: (next: DatasourceSelector) => void;\n  onFiltersChange: (next: LabelFilter[]) => void;\n}\n\nexport function FinderFilters({\n  datasource,\n  filters,\n  filteredFilters,\n  onDatasourceChange,\n  onFiltersChange,\n  ...props\n}: ExplorerFiltersProps): ReactElement {\n  const { data } = useListDatasourceSelectItems(PROM_DATASOURCE_KIND);\n  function handleDatasourceChange(next: DatasourceSelectValue): void {\n    const datasourceSelector = datasourceSelectValueToSelector(next, {}, data) ?? { kind: PROM_DATASOURCE_KIND };\n    onDatasourceChange(datasourceSelector);\n  }\n\n  return (\n    <Stack {...props} direction=\"row\" alignItems=\"center\" flexWrap=\"wrap\" gap={1} sx={{ width: '100%' }}>\n      <FormControl sx={{ width: 500 }}>\n        <DatasourceSelect\n          size=\"medium\"\n          datasourcePluginKind={PROM_DATASOURCE_KIND}\n          value={datasource}\n          onChange={handleDatasourceChange}\n          label=\"Prometheus Datasource\"\n          fullWidth={true}\n        />\n      </FormControl>\n      {filters.map((filter, index) => (\n        <LabelFilterInput\n          key={index}\n          datasource={datasource}\n          filters={filteredFilters}\n          value={filter}\n          onChange={(next) => {\n            const nextFilters = [...filters];\n            nextFilters[index] = next;\n            onFiltersChange(nextFilters);\n          }}\n          onDelete={() => {\n            const nextFilters = [...filters];\n            nextFilters.splice(index, 1);\n            onFiltersChange(nextFilters);\n          }}\n        />\n      ))}\n      <Button\n        startIcon={<PlusIcon />}\n        aria-label=\"add filter\"\n        onClick={() => {\n          onFiltersChange([...filters, { label: '', labelValues: [''], operator: '=' }]);\n        }}\n      >\n        Add filter\n      </Button>\n    </Stack>\n  );\n}\n"],"names":["Button","FormControl","Stack","DatasourceSelect","datasourceSelectValueToSelector","useListDatasourceSelectItems","PlusIcon","PROM_DATASOURCE_KIND","LabelFilterInput","FinderFilters","datasource","filters","filteredFilters","onDatasourceChange","onFiltersChange","props","data","handleDatasourceChange","next","datasourceSelector","kind","direction","alignItems","flexWrap","gap","sx","width","size","datasourcePluginKind","value","onChange","label","fullWidth","map","filter","index","nextFilters","onDelete","splice","startIcon","aria-label","onClick","labelValues","operator"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,MAAM,EAAEC,WAAW,EAAEC,KAAK,QAAoB,gBAAgB;AAEvE,SACEC,gBAAgB,EAEhBC,+BAA+B,EAC/BC,4BAA4B,QACvB,4BAA4B;AACnC,OAAOC,cAAc,uBAAuB;AAE5C,SAASC,oBAAoB,QAAQ,sCAAsC;AAE3E,SAASC,gBAAgB,QAAQ,iBAAiB;AAUlD,OAAO,SAASC,cAAc,EAC5BC,UAAU,EACVC,OAAO,EACPC,eAAe,EACfC,kBAAkB,EAClBC,eAAe,EACf,GAAGC,OACkB;IACrB,MAAM,EAAEC,IAAI,EAAE,GAAGX,6BAA6BE;IAC9C,SAASU,uBAAuBC,IAA2B;QACzD,MAAMC,qBAAqBf,gCAAgCc,MAAM,CAAC,GAAGF,SAAS;YAAEI,MAAMb;QAAqB;QAC3GM,mBAAmBM;IACrB;IAEA,qBACE,MAACjB;QAAO,GAAGa,KAAK;QAAEM,WAAU;QAAMC,YAAW;QAASC,UAAS;QAAOC,KAAK;QAAGC,IAAI;YAAEC,OAAO;QAAO;;0BAChG,KAACzB;gBAAYwB,IAAI;oBAAEC,OAAO;gBAAI;0BAC5B,cAAA,KAACvB;oBACCwB,MAAK;oBACLC,sBAAsBrB;oBACtBsB,OAAOnB;oBACPoB,UAAUb;oBACVc,OAAM;oBACNC,WAAW;;;YAGdrB,QAAQsB,GAAG,CAAC,CAACC,QAAQC,sBACpB,KAAC3B;oBAECE,YAAYA;oBACZC,SAASC;oBACTiB,OAAOK;oBACPJ,UAAU,CAACZ;wBACT,MAAMkB,cAAc;+BAAIzB;yBAAQ;wBAChCyB,WAAW,CAACD,MAAM,GAAGjB;wBACrBJ,gBAAgBsB;oBAClB;oBACAC,UAAU;wBACR,MAAMD,cAAc;+BAAIzB;yBAAQ;wBAChCyB,YAAYE,MAAM,CAACH,OAAO;wBAC1BrB,gBAAgBsB;oBAClB;mBAbKD;0BAgBT,KAACnC;gBACCuC,yBAAW,KAACjC;gBACZkC,cAAW;gBACXC,SAAS;oBACP3B,gBAAgB;2BAAIH;wBAAS;4BAAEoB,OAAO;4BAAIW,aAAa;gCAAC;6BAAG;4BAAEC,UAAU;wBAAI;qBAAE;gBAC/E;0BACD;;;;AAKP"}

package/lib/explore/PrometheusMetricsFinder/index.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/explore/PrometheusMetricsFinder/index.ts"],"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\nexport * from './PrometheusMetricsFinder';\n"],"names":[],"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,cAAc,4BAA4B"}
+{"version":3,"sources":["../../../../src/explore/PrometheusMetricsFinder/index.ts"],"sourcesContent":["// Copyright 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\nexport * from './PrometheusMetricsFinder';\n"],"names":[],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,4BAA4B"}

package/lib/explore/PrometheusMetricsFinder/overview/MetricOverview.js

@@ -1,4 +1,5 @@
-// Copyright 2024 The Perses Authors
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -10,7 +11,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Checkbox, FormControlLabel, Skeleton, Stack, Tab, Tabs, Tooltip } from '@mui/material';
 import { useMemo, useState } from 'react';
 import { Panel } from '@perses-dev/dashboards';

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/explore/PrometheusMetricsFinder/overview/MetricOverview.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 { Checkbox, FormControlLabel, Skeleton, Stack, StackProps, Tab, Tabs, Tooltip } from '@mui/material';\nimport { ReactElement, useMemo, useState } from 'react';\nimport { DatasourceSelector, Definition, QueryDefinition, UnknownSpec } from '@perses-dev/core';\nimport { Panel } from '@perses-dev/dashboards';\nimport useResizeObserver from 'use-resize-observer';\nimport { DataQueriesProvider, useSuggestedStepMs } from '@perses-dev/plugin-system';\nimport HelpCircleOutlineIcon from 'mdi-material-ui/HelpCircleOutline';\nimport { computeFilterExpr, LabelFilter } from '../types';\nimport { useMetricMetadata } from '../utils';\nimport { OverviewTab } from './tabs/OverviewTab';\nimport { JobTab } from './tabs/JobTab';\nimport { SimilarTab } from './tabs/SimilarTab';\n\nexport interface OverviewPanelProps extends StackProps {\n  metricName: string;\n  datasource: DatasourceSelector;\n  filters: LabelFilter[];\n  type?: string;\n  isLoading?: boolean;\n}\n\nexport function OverviewPanel({\n  metricName,\n  datasource,\n  filters,\n  type,\n  isLoading,\n  ...props\n}: OverviewPanelProps): ReactElement {\n  const { width, ref: panelRef } = useResizeObserver();\n  const suggestedStepMs = useSuggestedStepMs(width);\n\n  const [rateEnabled, setRateEnabled] = useState(true);\n\n  const { queries, definitions }: { queries: QueryDefinition[]; definitions: Array<Definition<UnknownSpec>> } =\n    useMemo(() => {\n      const expr =\n        type === 'counter' || (rateEnabled && (type === undefined || type === 'summary' || type === 'histogram'))\n          ? `rate({__name__=\"${metricName}\", ${computeFilterExpr(filters)}}[5m])`\n          : `{__name__=\"${metricName}\", ${computeFilterExpr(filters)}}`;\n\n      const queries = [\n        {\n          kind: 'TimeSeriesQuery',\n          spec: {\n            plugin: {\n              kind: 'PrometheusTimeSeriesQuery',\n              spec: {\n                datasource: datasource,\n                query: expr,\n              },\n            },\n          },\n        },\n      ];\n\n      const definitions = queries.map((query) => {\n        return {\n          kind: query.spec.plugin.kind,\n          spec: query.spec.plugin.spec,\n        };\n      });\n\n      return { queries, definitions };\n    }, [datasource, filters, metricName, rateEnabled, type]);\n\n  if (isLoading) {\n    return (\n      <Stack {...props}>\n        <Skeleton variant=\"rectangular\" height=\"100%\" />\n      </Stack>\n    );\n  }\n\n  return (\n    <Stack ref={panelRef} alignItems=\"end\" {...props}>\n      {(type === undefined || type === 'summary' || type === 'histogram') && (\n        <FormControlLabel\n          control={<Checkbox size=\"small\" />}\n          label=\"Enable rate\"\n          checked={rateEnabled}\n          onChange={(_, checked) => setRateEnabled(checked)}\n        />\n      )}\n      <DataQueriesProvider definitions={definitions} options={{ suggestedStepMs, mode: 'range' }}>\n        <Panel\n          panelOptions={{\n            hideHeader: true,\n          }}\n          definition={{\n            kind: 'Panel',\n            spec: {\n              queries: queries,\n              display: { name: '' },\n              plugin: { kind: 'TimeSeriesChart', spec: {} },\n            },\n          }}\n        />\n      </DataQueriesProvider>\n    </Stack>\n  );\n}\n\nexport interface MetricOverviewProps extends StackProps {\n  metricName: string;\n  datasource: DatasourceSelector;\n  filters: LabelFilter[];\n  isMetadataEnabled?: boolean;\n  isPanelEnabled?: boolean;\n  onExplore?: (metricName: string) => void;\n  onFiltersChange: (filters: LabelFilter[]) => void;\n}\n\nexport function MetricOverview({\n  metricName,\n  datasource,\n  filters,\n  isMetadataEnabled,\n  isPanelEnabled,\n  onExplore,\n  onFiltersChange,\n  ...props\n}: MetricOverviewProps): ReactElement {\n  const [tab, setTab] = useState(0);\n  const { metadata, isLoading: isMetadataLoading } = useMetricMetadata(metricName, datasource);\n\n  const filtersWithMetricName: LabelFilter[] = useMemo(() => {\n    const result = filters.filter((filter) => filter.label !== '__name__');\n    result.push({ label: '__name__', labelValues: [metricName], operator: '=' });\n    return result;\n  }, [filters, metricName]);\n\n  function handleFilterAdd(filter: LabelFilter): void {\n    onFiltersChange([...filters, filter]);\n  }\n\n  function handleExplore(metricName: string, tab?: number): void {\n    onExplore?.(metricName);\n    if (tab !== undefined) {\n      setTab(tab);\n    }\n  }\n\n  return (\n    <Stack sx={{ width: '100%' }} {...props}>\n      {isPanelEnabled && (\n        <OverviewPanel\n          metricName={metricName}\n          filters={filters}\n          datasource={datasource}\n          type={metadata?.type}\n          height=\"250px\"\n          isLoading={isMetadataEnabled && isMetadataLoading}\n        />\n      )}\n      <Tabs\n        value={tab}\n        onChange={(_, state) => setTab(state)}\n        variant=\"scrollable\"\n        sx={{ borderBottom: 1, borderColor: 'divider' }}\n      >\n        <Tab label=\"Overview\" />\n        <Tab\n          label=\"Job related metrics\"\n          icon={\n            <Tooltip title=\"All metrics scraped from the same job\" placement=\"top\">\n              <HelpCircleOutlineIcon />\n            </Tooltip>\n          }\n          iconPosition=\"end\"\n        />\n        {filters.length > 0 && (\n          <Tab\n            label=\"Similar metrics\"\n            icon={\n              <Tooltip title=\"All metrics matching current filters\" placement=\"top\">\n                <HelpCircleOutlineIcon />\n              </Tooltip>\n            }\n            iconPosition=\"end\"\n          />\n        )}\n      </Tabs>\n      <Stack gap={1}>\n        {tab === 0 && (\n          <OverviewTab\n            metricName={metricName}\n            datasource={datasource}\n            filters={filtersWithMetricName}\n            onFilterAdd={handleFilterAdd}\n          />\n        )}\n        {tab === 1 && (\n          <JobTab\n            filters={filtersWithMetricName}\n            datasource={datasource}\n            isMetadataEnabled={isMetadataEnabled}\n            onExplore={(metricName) => handleExplore(metricName, 0)}\n          />\n        )}\n        {tab === 2 && (\n          <SimilarTab\n            filters={filtersWithMetricName}\n            datasource={datasource}\n            isMetadataEnabled={isMetadataEnabled}\n            onExplore={(metricName) => handleExplore(metricName, 0)}\n          />\n        )}\n      </Stack>\n    </Stack>\n  );\n}\n"],"names":["Checkbox","FormControlLabel","Skeleton","Stack","Tab","Tabs","Tooltip","useMemo","useState","Panel","useResizeObserver","DataQueriesProvider","useSuggestedStepMs","HelpCircleOutlineIcon","computeFilterExpr","useMetricMetadata","OverviewTab","JobTab","SimilarTab","OverviewPanel","metricName","datasource","filters","type","isLoading","props","width","ref","panelRef","suggestedStepMs","rateEnabled","setRateEnabled","queries","definitions","expr","undefined","kind","spec","plugin","query","map","variant","height","alignItems","control","size","label","checked","onChange","_","options","mode","panelOptions","hideHeader","definition","display","name","MetricOverview","isMetadataEnabled","isPanelEnabled","onExplore","onFiltersChange","tab","setTab","metadata","isMetadataLoading","filtersWithMetricName","result","filter","push","labelValues","operator","handleFilterAdd","handleExplore","sx","value","state","borderBottom","borderColor","icon","title","placement","iconPosition","length","gap","onFilterAdd"],"mappings":"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"}
+{"version":3,"sources":["../../../../../src/explore/PrometheusMetricsFinder/overview/MetricOverview.tsx"],"sourcesContent":["// Copyright 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 { Checkbox, FormControlLabel, Skeleton, Stack, StackProps, Tab, Tabs, Tooltip } from '@mui/material';\nimport { ReactElement, useMemo, useState } from 'react';\nimport { DatasourceSelector, Definition, QueryDefinition, UnknownSpec } from '@perses-dev/core';\nimport { Panel } from '@perses-dev/dashboards';\nimport useResizeObserver from 'use-resize-observer';\nimport { DataQueriesProvider, useSuggestedStepMs } from '@perses-dev/plugin-system';\nimport HelpCircleOutlineIcon from 'mdi-material-ui/HelpCircleOutline';\nimport { computeFilterExpr, LabelFilter } from '../types';\nimport { useMetricMetadata } from '../utils';\nimport { OverviewTab } from './tabs/OverviewTab';\nimport { JobTab } from './tabs/JobTab';\nimport { SimilarTab } from './tabs/SimilarTab';\n\nexport interface OverviewPanelProps extends StackProps {\n  metricName: string;\n  datasource: DatasourceSelector;\n  filters: LabelFilter[];\n  type?: string;\n  isLoading?: boolean;\n}\n\nexport function OverviewPanel({\n  metricName,\n  datasource,\n  filters,\n  type,\n  isLoading,\n  ...props\n}: OverviewPanelProps): ReactElement {\n  const { width, ref: panelRef } = useResizeObserver();\n  const suggestedStepMs = useSuggestedStepMs(width);\n\n  const [rateEnabled, setRateEnabled] = useState(true);\n\n  const { queries, definitions }: { queries: QueryDefinition[]; definitions: Array<Definition<UnknownSpec>> } =\n    useMemo(() => {\n      const expr =\n        type === 'counter' || (rateEnabled && (type === undefined || type === 'summary' || type === 'histogram'))\n          ? `rate({__name__=\"${metricName}\", ${computeFilterExpr(filters)}}[5m])`\n          : `{__name__=\"${metricName}\", ${computeFilterExpr(filters)}}`;\n\n      const queries = [\n        {\n          kind: 'TimeSeriesQuery',\n          spec: {\n            plugin: {\n              kind: 'PrometheusTimeSeriesQuery',\n              spec: {\n                datasource: datasource,\n                query: expr,\n              },\n            },\n          },\n        },\n      ];\n\n      const definitions = queries.map((query) => {\n        return {\n          kind: query.spec.plugin.kind,\n          spec: query.spec.plugin.spec,\n        };\n      });\n\n      return { queries, definitions };\n    }, [datasource, filters, metricName, rateEnabled, type]);\n\n  if (isLoading) {\n    return (\n      <Stack {...props}>\n        <Skeleton variant=\"rectangular\" height=\"100%\" />\n      </Stack>\n    );\n  }\n\n  return (\n    <Stack ref={panelRef} alignItems=\"end\" {...props}>\n      {(type === undefined || type === 'summary' || type === 'histogram') && (\n        <FormControlLabel\n          control={<Checkbox size=\"small\" />}\n          label=\"Enable rate\"\n          checked={rateEnabled}\n          onChange={(_, checked) => setRateEnabled(checked)}\n        />\n      )}\n      <DataQueriesProvider definitions={definitions} options={{ suggestedStepMs, mode: 'range' }}>\n        <Panel\n          panelOptions={{\n            hideHeader: true,\n          }}\n          definition={{\n            kind: 'Panel',\n            spec: {\n              queries: queries,\n              display: { name: '' },\n              plugin: { kind: 'TimeSeriesChart', spec: {} },\n            },\n          }}\n        />\n      </DataQueriesProvider>\n    </Stack>\n  );\n}\n\nexport interface MetricOverviewProps extends StackProps {\n  metricName: string;\n  datasource: DatasourceSelector;\n  filters: LabelFilter[];\n  isMetadataEnabled?: boolean;\n  isPanelEnabled?: boolean;\n  onExplore?: (metricName: string) => void;\n  onFiltersChange: (filters: LabelFilter[]) => void;\n}\n\nexport function MetricOverview({\n  metricName,\n  datasource,\n  filters,\n  isMetadataEnabled,\n  isPanelEnabled,\n  onExplore,\n  onFiltersChange,\n  ...props\n}: MetricOverviewProps): ReactElement {\n  const [tab, setTab] = useState(0);\n  const { metadata, isLoading: isMetadataLoading } = useMetricMetadata(metricName, datasource);\n\n  const filtersWithMetricName: LabelFilter[] = useMemo(() => {\n    const result = filters.filter((filter) => filter.label !== '__name__');\n    result.push({ label: '__name__', labelValues: [metricName], operator: '=' });\n    return result;\n  }, [filters, metricName]);\n\n  function handleFilterAdd(filter: LabelFilter): void {\n    onFiltersChange([...filters, filter]);\n  }\n\n  function handleExplore(metricName: string, tab?: number): void {\n    onExplore?.(metricName);\n    if (tab !== undefined) {\n      setTab(tab);\n    }\n  }\n\n  return (\n    <Stack sx={{ width: '100%' }} {...props}>\n      {isPanelEnabled && (\n        <OverviewPanel\n          metricName={metricName}\n          filters={filters}\n          datasource={datasource}\n          type={metadata?.type}\n          height=\"250px\"\n          isLoading={isMetadataEnabled && isMetadataLoading}\n        />\n      )}\n      <Tabs\n        value={tab}\n        onChange={(_, state) => setTab(state)}\n        variant=\"scrollable\"\n        sx={{ borderBottom: 1, borderColor: 'divider' }}\n      >\n        <Tab label=\"Overview\" />\n        <Tab\n          label=\"Job related metrics\"\n          icon={\n            <Tooltip title=\"All metrics scraped from the same job\" placement=\"top\">\n              <HelpCircleOutlineIcon />\n            </Tooltip>\n          }\n          iconPosition=\"end\"\n        />\n        {filters.length > 0 && (\n          <Tab\n            label=\"Similar metrics\"\n            icon={\n              <Tooltip title=\"All metrics matching current filters\" placement=\"top\">\n                <HelpCircleOutlineIcon />\n              </Tooltip>\n            }\n            iconPosition=\"end\"\n          />\n        )}\n      </Tabs>\n      <Stack gap={1}>\n        {tab === 0 && (\n          <OverviewTab\n            metricName={metricName}\n            datasource={datasource}\n            filters={filtersWithMetricName}\n            onFilterAdd={handleFilterAdd}\n          />\n        )}\n        {tab === 1 && (\n          <JobTab\n            filters={filtersWithMetricName}\n            datasource={datasource}\n            isMetadataEnabled={isMetadataEnabled}\n            onExplore={(metricName) => handleExplore(metricName, 0)}\n          />\n        )}\n        {tab === 2 && (\n          <SimilarTab\n            filters={filtersWithMetricName}\n            datasource={datasource}\n            isMetadataEnabled={isMetadataEnabled}\n            onExplore={(metricName) => handleExplore(metricName, 0)}\n          />\n        )}\n      </Stack>\n    </Stack>\n  );\n}\n"],"names":["Checkbox","FormControlLabel","Skeleton","Stack","Tab","Tabs","Tooltip","useMemo","useState","Panel","useResizeObserver","DataQueriesProvider","useSuggestedStepMs","HelpCircleOutlineIcon","computeFilterExpr","useMetricMetadata","OverviewTab","JobTab","SimilarTab","OverviewPanel","metricName","datasource","filters","type","isLoading","props","width","ref","panelRef","suggestedStepMs","rateEnabled","setRateEnabled","queries","definitions","expr","undefined","kind","spec","plugin","query","map","variant","height","alignItems","control","size","label","checked","onChange","_","options","mode","panelOptions","hideHeader","definition","display","name","MetricOverview","isMetadataEnabled","isPanelEnabled","onExplore","onFiltersChange","tab","setTab","metadata","isMetadataLoading","filtersWithMetricName","result","filter","push","labelValues","operator","handleFilterAdd","handleExplore","sx","value","state","borderBottom","borderColor","icon","title","placement","iconPosition","length","gap","onFilterAdd"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,QAAQ,EAAEC,gBAAgB,EAAEC,QAAQ,EAAEC,KAAK,EAAcC,GAAG,EAAEC,IAAI,EAAEC,OAAO,QAAQ,gBAAgB;AAC5G,SAAuBC,OAAO,EAAEC,QAAQ,QAAQ,QAAQ;AAExD,SAASC,KAAK,QAAQ,yBAAyB;AAC/C,OAAOC,uBAAuB,sBAAsB;AACpD,SAASC,mBAAmB,EAAEC,kBAAkB,QAAQ,4BAA4B;AACpF,OAAOC,2BAA2B,oCAAoC;AACtE,SAASC,iBAAiB,QAAqB,WAAW;AAC1D,SAASC,iBAAiB,QAAQ,WAAW;AAC7C,SAASC,WAAW,QAAQ,qBAAqB;AACjD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,UAAU,QAAQ,oBAAoB;AAU/C,OAAO,SAASC,cAAc,EAC5BC,UAAU,EACVC,UAAU,EACVC,OAAO,EACPC,IAAI,EACJC,SAAS,EACT,GAAGC,OACgB;IACnB,MAAM,EAAEC,KAAK,EAAEC,KAAKC,QAAQ,EAAE,GAAGlB;IACjC,MAAMmB,kBAAkBjB,mBAAmBc;IAE3C,MAAM,CAACI,aAAaC,eAAe,GAAGvB,SAAS;IAE/C,MAAM,EAAEwB,OAAO,EAAEC,WAAW,EAAE,GAC5B1B,QAAQ;QACN,MAAM2B,OACJX,SAAS,aAAcO,eAAgBP,CAAAA,SAASY,aAAaZ,SAAS,aAAaA,SAAS,WAAU,IAClG,CAAC,gBAAgB,EAAEH,WAAW,GAAG,EAAEN,kBAAkBQ,SAAS,MAAM,CAAC,GACrE,CAAC,WAAW,EAAEF,WAAW,GAAG,EAAEN,kBAAkBQ,SAAS,CAAC,CAAC;QAEjE,MAAMU,UAAU;YACd;gBACEI,MAAM;gBACNC,MAAM;oBACJC,QAAQ;wBACNF,MAAM;wBACNC,MAAM;4BACJhB,YAAYA;4BACZkB,OAAOL;wBACT;oBACF;gBACF;YACF;SACD;QAED,MAAMD,cAAcD,QAAQQ,GAAG,CAAC,CAACD;YAC/B,OAAO;gBACLH,MAAMG,MAAMF,IAAI,CAACC,MAAM,CAACF,IAAI;gBAC5BC,MAAME,MAAMF,IAAI,CAACC,MAAM,CAACD,IAAI;YAC9B;QACF;QAEA,OAAO;YAAEL;YAASC;QAAY;IAChC,GAAG;QAACZ;QAAYC;QAASF;QAAYU;QAAaP;KAAK;IAEzD,IAAIC,WAAW;QACb,qBACE,KAACrB;YAAO,GAAGsB,KAAK;sBACd,cAAA,KAACvB;gBAASuC,SAAQ;gBAAcC,QAAO;;;IAG7C;IAEA,qBACE,MAACvC;QAAMwB,KAAKC;QAAUe,YAAW;QAAO,GAAGlB,KAAK;;YAC5CF,CAAAA,SAASY,aAAaZ,SAAS,aAAaA,SAAS,WAAU,mBAC/D,KAACtB;gBACC2C,uBAAS,KAAC5C;oBAAS6C,MAAK;;gBACxBC,OAAM;gBACNC,SAASjB;gBACTkB,UAAU,CAACC,GAAGF,UAAYhB,eAAegB;;0BAG7C,KAACpC;gBAAoBsB,aAAaA;gBAAaiB,SAAS;oBAAErB;oBAAiBsB,MAAM;gBAAQ;0BACvF,cAAA,KAAC1C;oBACC2C,cAAc;wBACZC,YAAY;oBACd;oBACAC,YAAY;wBACVlB,MAAM;wBACNC,MAAM;4BACJL,SAASA;4BACTuB,SAAS;gCAAEC,MAAM;4BAAG;4BACpBlB,QAAQ;gCAAEF,MAAM;gCAAmBC,MAAM,CAAC;4BAAE;wBAC9C;oBACF;;;;;AAKV;AAYA,OAAO,SAASoB,eAAe,EAC7BrC,UAAU,EACVC,UAAU,EACVC,OAAO,EACPoC,iBAAiB,EACjBC,cAAc,EACdC,SAAS,EACTC,eAAe,EACf,GAAGpC,OACiB;IACpB,MAAM,CAACqC,KAAKC,OAAO,GAAGvD,SAAS;IAC/B,MAAM,EAAEwD,QAAQ,EAAExC,WAAWyC,iBAAiB,EAAE,GAAGlD,kBAAkBK,YAAYC;IAEjF,MAAM6C,wBAAuC3D,QAAQ;QACnD,MAAM4D,SAAS7C,QAAQ8C,MAAM,CAAC,CAACA,SAAWA,OAAOtB,KAAK,KAAK;QAC3DqB,OAAOE,IAAI,CAAC;YAAEvB,OAAO;YAAYwB,aAAa;gBAAClD;aAAW;YAAEmD,UAAU;QAAI;QAC1E,OAAOJ;IACT,GAAG;QAAC7C;QAASF;KAAW;IAExB,SAASoD,gBAAgBJ,MAAmB;QAC1CP,gBAAgB;eAAIvC;YAAS8C;SAAO;IACtC;IAEA,SAASK,cAAcrD,UAAkB,EAAE0C,GAAY;QACrDF,YAAYxC;QACZ,IAAI0C,QAAQ3B,WAAW;YACrB4B,OAAOD;QACT;IACF;IAEA,qBACE,MAAC3D;QAAMuE,IAAI;YAAEhD,OAAO;QAAO;QAAI,GAAGD,KAAK;;YACpCkC,gCACC,KAACxC;gBACCC,YAAYA;gBACZE,SAASA;gBACTD,YAAYA;gBACZE,MAAMyC,UAAUzC;gBAChBmB,QAAO;gBACPlB,WAAWkC,qBAAqBO;;0BAGpC,MAAC5D;gBACCsE,OAAOb;gBACPd,UAAU,CAACC,GAAG2B,QAAUb,OAAOa;gBAC/BnC,SAAQ;gBACRiC,IAAI;oBAAEG,cAAc;oBAAGC,aAAa;gBAAU;;kCAE9C,KAAC1E;wBAAI0C,OAAM;;kCACX,KAAC1C;wBACC0C,OAAM;wBACNiC,oBACE,KAACzE;4BAAQ0E,OAAM;4BAAwCC,WAAU;sCAC/D,cAAA,KAACpE;;wBAGLqE,cAAa;;oBAEd5D,QAAQ6D,MAAM,GAAG,mBAChB,KAAC/E;wBACC0C,OAAM;wBACNiC,oBACE,KAACzE;4BAAQ0E,OAAM;4BAAuCC,WAAU;sCAC9D,cAAA,KAACpE;;wBAGLqE,cAAa;;;;0BAInB,MAAC/E;gBAAMiF,KAAK;;oBACTtB,QAAQ,mBACP,KAAC9C;wBACCI,YAAYA;wBACZC,YAAYA;wBACZC,SAAS4C;wBACTmB,aAAab;;oBAGhBV,QAAQ,mBACP,KAAC7C;wBACCK,SAAS4C;wBACT7C,YAAYA;wBACZqC,mBAAmBA;wBACnBE,WAAW,CAACxC,aAAeqD,cAAcrD,YAAY;;oBAGxD0C,QAAQ,mBACP,KAAC5C;wBACCI,SAAS4C;wBACT7C,YAAYA;wBACZqC,mBAAmBA;wBACnBE,WAAW,CAACxC,aAAeqD,cAAcrD,YAAY;;;;;;AAMjE"}

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

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/explore/PrometheusMetricsFinder/overview/tabs/JobTab.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 {\n  CircularProgress,\n  FormControl,\n  InputLabel,\n  MenuItem,\n  Select,\n  Stack,\n  StackProps,\n  Typography,\n} from '@mui/material';\nimport { ReactElement, useMemo, useState } from 'react';\nimport { MetricList } from '../../display/list/MetricList';\nimport { LabelFilter } from '../../types';\nimport { useLabelValues } from '../../utils';\n\nexport interface JobList extends StackProps {\n  job: string;\n  filters: LabelFilter[];\n  datasource: DatasourceSelector;\n  isMetadataEnabled?: boolean;\n  onExplore: (metricName: string) => void;\n}\n\nexport function JobList({ job, filters, datasource, isMetadataEnabled, onExplore, ...props }: JobList): ReactElement {\n  const filtersWithJobWithoutName: LabelFilter[] = useMemo(() => {\n    const result = filters.filter((filter) => filter.label !== '__name__' && filter.label !== 'job');\n    result.push({ label: 'job', labelValues: [job], operator: '=' });\n    return result;\n  }, [filters, job]);\n\n  const { data, isLoading } = useLabelValues('__name__', filtersWithJobWithoutName, datasource);\n\n  if (isLoading) {\n    return (\n      <Stack width=\"100%\" sx={{ alignItems: 'center', justifyContent: 'center' }}>\n        <CircularProgress />\n      </Stack>\n    );\n  }\n\n  return (\n    <MetricList\n      metricNames={data?.data ?? []}\n      datasource={datasource}\n      filters={filtersWithJobWithoutName}\n      isMetadataEnabled={isMetadataEnabled}\n      onExplore={onExplore}\n      {...props}\n    />\n  );\n}\n\nexport interface JobSection extends StackProps {\n  jobs: string[];\n  filters: LabelFilter[];\n  datasource: DatasourceSelector;\n  isMetadataEnabled?: boolean;\n  onExplore: (metricName: string) => void;\n}\n\nexport function JobSection({\n  jobs,\n  filters,\n  datasource,\n  isMetadataEnabled,\n  onExplore,\n  ...props\n}: JobSection): ReactElement {\n  const [currentJob, setCurrentJob] = useState<string>(jobs[0] ?? '');\n\n  if (!currentJob) {\n    return <Typography>Something went wrong...</Typography>;\n  }\n\n  return (\n    <Stack gap={2} {...props}>\n      {jobs.length > 2 && (\n        <FormControl fullWidth>\n          <InputLabel id=\"job-select-label\">Job</InputLabel>\n          <Select\n            labelId=\"job-select-label\"\n            id=\"job-select\"\n            label=\"Job\"\n            variant=\"outlined\"\n            value={currentJob}\n            onChange={(e) => setCurrentJob(e.target.value)}\n          >\n            {jobs.map((job) => (\n              <MenuItem key={job} value={job}>\n                {job}\n              </MenuItem>\n            ))}\n          </Select>\n        </FormControl>\n      )}\n      {currentJob && (\n        <JobList\n          job={currentJob}\n          filters={filters}\n          datasource={datasource}\n          isMetadataEnabled={isMetadataEnabled}\n          onExplore={onExplore}\n        />\n      )}\n    </Stack>\n  );\n}\n\nexport interface JobTabProps extends StackProps {\n  filters: LabelFilter[];\n  datasource: DatasourceSelector;\n  isMetadataEnabled?: boolean;\n  onExplore: (metricName: string) => void;\n}\n\nexport function JobTab({ filters, datasource, isMetadataEnabled, onExplore, ...props }: JobTabProps): ReactElement {\n  const { data: jobData, isLoading: isJobLoading } = useLabelValues('job', filters, datasource);\n\n  if (isJobLoading) {\n    return (\n      <Stack width=\"100%\" sx={{ alignItems: 'center', justifyContent: 'center' }}>\n        <CircularProgress />\n      </Stack>\n    );\n  }\n\n  if (!jobData?.data || jobData.data.length === 0) {\n    return (\n      <Stack {...props}>\n        <Typography>No jobs found</Typography>\n      </Stack>\n    );\n  }\n\n  return (\n    <JobSection\n      jobs={jobData.data}\n      filters={filters}\n      datasource={datasource}\n      isMetadataEnabled={isMetadataEnabled}\n      onExplore={onExplore}\n      {...props}\n    />\n  );\n}\n"],"names":["CircularProgress","FormControl","InputLabel","MenuItem","Select","Stack","Typography","useMemo","useState","MetricList","useLabelValues","JobList","job","filters","datasource","isMetadataEnabled","onExplore","props","filtersWithJobWithoutName","result","filter","label","push","labelValues","operator","data","isLoading","width","sx","alignItems","justifyContent","metricNames","JobSection","jobs","currentJob","setCurrentJob","gap","length","fullWidth","id","labelId","variant","value","onChange","e","target","map","JobTab","jobData","isJobLoading"],"mappings":"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"}
+{"version":3,"sources":["../../../../../../src/explore/PrometheusMetricsFinder/overview/tabs/JobTab.tsx"],"sourcesContent":["// Copyright 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 {\n  CircularProgress,\n  FormControl,\n  InputLabel,\n  MenuItem,\n  Select,\n  Stack,\n  StackProps,\n  Typography,\n} from '@mui/material';\nimport { ReactElement, useMemo, useState } from 'react';\nimport { MetricList } from '../../display/list/MetricList';\nimport { LabelFilter } from '../../types';\nimport { useLabelValues } from '../../utils';\n\nexport interface JobList extends StackProps {\n  job: string;\n  filters: LabelFilter[];\n  datasource: DatasourceSelector;\n  isMetadataEnabled?: boolean;\n  onExplore: (metricName: string) => void;\n}\n\nexport function JobList({ job, filters, datasource, isMetadataEnabled, onExplore, ...props }: JobList): ReactElement {\n  const filtersWithJobWithoutName: LabelFilter[] = useMemo(() => {\n    const result = filters.filter((filter) => filter.label !== '__name__' && filter.label !== 'job');\n    result.push({ label: 'job', labelValues: [job], operator: '=' });\n    return result;\n  }, [filters, job]);\n\n  const { data, isLoading } = useLabelValues('__name__', filtersWithJobWithoutName, datasource);\n\n  if (isLoading) {\n    return (\n      <Stack width=\"100%\" sx={{ alignItems: 'center', justifyContent: 'center' }}>\n        <CircularProgress />\n      </Stack>\n    );\n  }\n\n  return (\n    <MetricList\n      metricNames={data?.data ?? []}\n      datasource={datasource}\n      filters={filtersWithJobWithoutName}\n      isMetadataEnabled={isMetadataEnabled}\n      onExplore={onExplore}\n      {...props}\n    />\n  );\n}\n\nexport interface JobSection extends StackProps {\n  jobs: string[];\n  filters: LabelFilter[];\n  datasource: DatasourceSelector;\n  isMetadataEnabled?: boolean;\n  onExplore: (metricName: string) => void;\n}\n\nexport function JobSection({\n  jobs,\n  filters,\n  datasource,\n  isMetadataEnabled,\n  onExplore,\n  ...props\n}: JobSection): ReactElement {\n  const [currentJob, setCurrentJob] = useState<string>(jobs[0] ?? '');\n\n  if (!currentJob) {\n    return <Typography>Something went wrong...</Typography>;\n  }\n\n  return (\n    <Stack gap={2} {...props}>\n      {jobs.length > 2 && (\n        <FormControl fullWidth>\n          <InputLabel id=\"job-select-label\">Job</InputLabel>\n          <Select\n            labelId=\"job-select-label\"\n            id=\"job-select\"\n            label=\"Job\"\n            variant=\"outlined\"\n            value={currentJob}\n            onChange={(e) => setCurrentJob(e.target.value)}\n          >\n            {jobs.map((job) => (\n              <MenuItem key={job} value={job}>\n                {job}\n              </MenuItem>\n            ))}\n          </Select>\n        </FormControl>\n      )}\n      {currentJob && (\n        <JobList\n          job={currentJob}\n          filters={filters}\n          datasource={datasource}\n          isMetadataEnabled={isMetadataEnabled}\n          onExplore={onExplore}\n        />\n      )}\n    </Stack>\n  );\n}\n\nexport interface JobTabProps extends StackProps {\n  filters: LabelFilter[];\n  datasource: DatasourceSelector;\n  isMetadataEnabled?: boolean;\n  onExplore: (metricName: string) => void;\n}\n\nexport function JobTab({ filters, datasource, isMetadataEnabled, onExplore, ...props }: JobTabProps): ReactElement {\n  const { data: jobData, isLoading: isJobLoading } = useLabelValues('job', filters, datasource);\n\n  if (isJobLoading) {\n    return (\n      <Stack width=\"100%\" sx={{ alignItems: 'center', justifyContent: 'center' }}>\n        <CircularProgress />\n      </Stack>\n    );\n  }\n\n  if (!jobData?.data || jobData.data.length === 0) {\n    return (\n      <Stack {...props}>\n        <Typography>No jobs found</Typography>\n      </Stack>\n    );\n  }\n\n  return (\n    <JobSection\n      jobs={jobData.data}\n      filters={filters}\n      datasource={datasource}\n      isMetadataEnabled={isMetadataEnabled}\n      onExplore={onExplore}\n      {...props}\n    />\n  );\n}\n"],"names":["CircularProgress","FormControl","InputLabel","MenuItem","Select","Stack","Typography","useMemo","useState","MetricList","useLabelValues","JobList","job","filters","datasource","isMetadataEnabled","onExplore","props","filtersWithJobWithoutName","result","filter","label","push","labelValues","operator","data","isLoading","width","sx","alignItems","justifyContent","metricNames","JobSection","jobs","currentJob","setCurrentJob","gap","length","fullWidth","id","labelId","variant","value","onChange","e","target","map","JobTab","jobData","isJobLoading"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

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={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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"}
+{"version":3,"sources":["../../../../../../src/explore/PrometheusMetricsFinder/overview/tabs/OverviewTab.tsx"],"sourcesContent":["// Copyright 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/explore/PrometheusMetricsFinder/overview/tabs/SimilarTab.js

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/explore/PrometheusMetricsFinder/overview/tabs/SimilarTab.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 { CircularProgress, Stack, StackProps } from '@mui/material';\nimport { ReactElement, useMemo } from 'react';\nimport { MetricList } from '../../display/list/MetricList';\nimport { LabelFilter } from '../../types';\nimport { useLabelValues } from '../../utils';\n\nexport interface SimilarTabProps extends StackProps {\n  filters: LabelFilter[];\n  datasource: DatasourceSelector;\n  isMetadataEnabled?: boolean;\n  onExplore: (metricName: string) => void;\n}\n\nexport function SimilarTab({\n  filters,\n  datasource,\n  isMetadataEnabled,\n  onExplore,\n  ...props\n}: SimilarTabProps): ReactElement {\n  const filtersWithoutName: LabelFilter[] = useMemo(() => {\n    return filters.filter((filter) => filter.label !== '__name__');\n  }, [filters]);\n  const { data, isLoading } = useLabelValues('__name__', filtersWithoutName, datasource);\n\n  if (isLoading) {\n    return (\n      <Stack width=\"100%\" sx={{ alignItems: 'center', justifyContent: 'center' }}>\n        <CircularProgress />\n      </Stack>\n    );\n  }\n\n  return (\n    <MetricList\n      metricNames={data?.data ?? []}\n      datasource={datasource}\n      filters={filtersWithoutName}\n      isMetadataEnabled={isMetadataEnabled}\n      onExplore={onExplore}\n      {...props}\n    />\n  );\n}\n"],"names":["CircularProgress","Stack","useMemo","MetricList","useLabelValues","SimilarTab","filters","datasource","isMetadataEnabled","onExplore","props","filtersWithoutName","filter","label","data","isLoading","width","sx","alignItems","justifyContent","metricNames"],"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;;AAGjC,SAASA,gBAAgB,EAAEC,KAAK,QAAoB,gBAAgB;AACpE,SAAuBC,OAAO,QAAQ,QAAQ;AAC9C,SAASC,UAAU,QAAQ,gCAAgC;AAE3D,SAASC,cAAc,QAAQ,cAAc;AAS7C,OAAO,SAASC,WAAW,EACzBC,OAAO,EACPC,UAAU,EACVC,iBAAiB,EACjBC,SAAS,EACT,GAAGC,OACa;IAChB,MAAMC,qBAAoCT,QAAQ;QAChD,OAAOI,QAAQM,MAAM,CAAC,CAACA,SAAWA,OAAOC,KAAK,KAAK;IACrD,GAAG;QAACP;KAAQ;IACZ,MAAM,EAAEQ,IAAI,EAAEC,SAAS,EAAE,GAAGX,eAAe,YAAYO,oBAAoBJ;IAE3E,IAAIQ,WAAW;QACb,qBACE,KAACd;YAAMe,OAAM;YAAOC,IAAI;gBAAEC,YAAY;gBAAUC,gBAAgB;YAAS;sBACvE,cAAA,KAACnB;;IAGP;IAEA,qBACE,KAACG;QACCiB,aAAaN,MAAMA,QAAQ,EAAE;QAC7BP,YAAYA;QACZD,SAASK;QACTH,mBAAmBA;QACnBC,WAAWA;QACV,GAAGC,KAAK;;AAGf"}
+{"version":3,"sources":["../../../../../../src/explore/PrometheusMetricsFinder/overview/tabs/SimilarTab.tsx"],"sourcesContent":["// Copyright 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 { CircularProgress, Stack, StackProps } from '@mui/material';\nimport { ReactElement, useMemo } from 'react';\nimport { MetricList } from '../../display/list/MetricList';\nimport { LabelFilter } from '../../types';\nimport { useLabelValues } from '../../utils';\n\nexport interface SimilarTabProps extends StackProps {\n  filters: LabelFilter[];\n  datasource: DatasourceSelector;\n  isMetadataEnabled?: boolean;\n  onExplore: (metricName: string) => void;\n}\n\nexport function SimilarTab({\n  filters,\n  datasource,\n  isMetadataEnabled,\n  onExplore,\n  ...props\n}: SimilarTabProps): ReactElement {\n  const filtersWithoutName: LabelFilter[] = useMemo(() => {\n    return filters.filter((filter) => filter.label !== '__name__');\n  }, [filters]);\n  const { data, isLoading } = useLabelValues('__name__', filtersWithoutName, datasource);\n\n  if (isLoading) {\n    return (\n      <Stack width=\"100%\" sx={{ alignItems: 'center', justifyContent: 'center' }}>\n        <CircularProgress />\n      </Stack>\n    );\n  }\n\n  return (\n    <MetricList\n      metricNames={data?.data ?? []}\n      datasource={datasource}\n      filters={filtersWithoutName}\n      isMetadataEnabled={isMetadataEnabled}\n      onExplore={onExplore}\n      {...props}\n    />\n  );\n}\n"],"names":["CircularProgress","Stack","useMemo","MetricList","useLabelValues","SimilarTab","filters","datasource","isMetadataEnabled","onExplore","props","filtersWithoutName","filter","label","data","isLoading","width","sx","alignItems","justifyContent","metricNames"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAGjC,SAASA,gBAAgB,EAAEC,KAAK,QAAoB,gBAAgB;AACpE,SAAuBC,OAAO,QAAQ,QAAQ;AAC9C,SAASC,UAAU,QAAQ,gCAAgC;AAE3D,SAASC,cAAc,QAAQ,cAAc;AAS7C,OAAO,SAASC,WAAW,EACzBC,OAAO,EACPC,UAAU,EACVC,iBAAiB,EACjBC,SAAS,EACT,GAAGC,OACa;IAChB,MAAMC,qBAAoCT,QAAQ;QAChD,OAAOI,QAAQM,MAAM,CAAC,CAACA,SAAWA,OAAOC,KAAK,KAAK;IACrD,GAAG;QAACP;KAAQ;IACZ,MAAM,EAAEQ,IAAI,EAAEC,SAAS,EAAE,GAAGX,eAAe,YAAYO,oBAAoBJ;IAE3E,IAAIQ,WAAW;QACb,qBACE,KAACd;YAAMe,OAAM;YAAOC,IAAI;gBAAEC,YAAY;gBAAUC,gBAAgB;YAAS;sBACvE,cAAA,KAACnB;;IAGP;IAEA,qBACE,KAACG;QACCiB,aAAaN,MAAMA,QAAQ,EAAE;QAC7BP,YAAYA;QACZD,SAASK;QACTH,mBAAmBA;QACnBC,WAAWA;QACV,GAAGC,KAAK;;AAGf"}

package/lib/explore/PrometheusMetricsFinder/types.js

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/explore/PrometheusMetricsFinder/types.ts"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { DatasourceSelector } from '@perses-dev/core';\n\nexport type Operator = '=' | '!=' | '=~' | '!~';\n\nexport interface Settings {\n  isMetadataEnabled: boolean;\n  isPanelEnabled: boolean;\n}\n\nexport interface FinderQueryParams {\n  datasource?: DatasourceSelector;\n  filters?: LabelFilter[];\n  exploredMetric?: string;\n}\n\nexport interface LabelFilter {\n  label: string;\n  labelValues: string[];\n  operator: Operator;\n}\n\nexport function computeFilterExpr(filters: LabelFilter[]): string {\n  return `${filters.map((filter) => `${filter.label}${filter.operator}\"${filter.labelValues.join('|')}\"`).join(',')}`;\n}\n\nexport interface LabelValueCounter {\n  labelValue: string;\n  counter: number;\n}\n"],"names":["computeFilterExpr","filters","map","filter","label","operator","labelValues","join"],"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;AAuBjC,OAAO,SAASA,kBAAkBC,OAAsB;IACtD,OAAO,GAAGA,QAAQC,GAAG,CAAC,CAACC,SAAW,GAAGA,OAAOC,KAAK,GAAGD,OAAOE,QAAQ,CAAC,CAAC,EAAEF,OAAOG,WAAW,CAACC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAEA,IAAI,CAAC,MAAM;AACrH"}
+{"version":3,"sources":["../../../../src/explore/PrometheusMetricsFinder/types.ts"],"sourcesContent":["// Copyright 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';\n\nexport type Operator = '=' | '!=' | '=~' | '!~';\n\nexport interface Settings {\n  isMetadataEnabled: boolean;\n  isPanelEnabled: boolean;\n}\n\nexport interface FinderQueryParams {\n  datasource?: DatasourceSelector;\n  filters?: LabelFilter[];\n  exploredMetric?: string;\n}\n\nexport interface LabelFilter {\n  label: string;\n  labelValues: string[];\n  operator: Operator;\n}\n\nexport function computeFilterExpr(filters: LabelFilter[]): string {\n  return `${filters.map((filter) => `${filter.label}${filter.operator}\"${filter.labelValues.join('|')}\"`).join(',')}`;\n}\n\nexport interface LabelValueCounter {\n  labelValue: string;\n  counter: number;\n}\n"],"names":["computeFilterExpr","filters","map","filter","label","operator","labelValues","join"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAuBjC,OAAO,SAASA,kBAAkBC,OAAsB;IACtD,OAAO,GAAGA,QAAQC,GAAG,CAAC,CAACC,SAAW,GAAGA,OAAOC,KAAK,GAAGD,OAAOE,QAAQ,CAAC,CAAC,EAAEF,OAAOG,WAAW,CAACC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAEA,IAAI,CAAC,MAAM;AACrH"}

package/lib/explore/PrometheusMetricsFinder/utils.js

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/explore/PrometheusMetricsFinder/utils.ts"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { DatasourceSelector, StatusError } from '@perses-dev/core';\nimport { useDatasourceClient, useTimeRange } from '@perses-dev/plugin-system';\nimport { useQuery, UseQueryResult } from '@tanstack/react-query';\nimport { useMemo } from 'react';\nimport {\n  LabelNamesRequestParameters,\n  LabelValuesRequestParameters,\n  LabelValuesResponse,\n  Metric,\n  MetricMetadata,\n  MetricMetadataRequestParameters,\n  MetricMetadataResponse,\n  PrometheusClient,\n  SeriesRequestParameters,\n  SeriesResponse,\n} from '../../model';\nimport { computeFilterExpr, LabelFilter, LabelValueCounter } from './types';\n\n// Retrieve metric metadata from the Prometheus API\nexport function useMetricMetadata(\n  metricName: string,\n  datasource: DatasourceSelector,\n  enabled?: boolean\n): {\n  isLoading: false | true;\n  metadata: MetricMetadata | undefined;\n  error: StatusError | null;\n} {\n  const { data: client } = useDatasourceClient<PrometheusClient>(datasource);\n\n  // histograms and summaries timeseries desc are not always added to prefixed timeseries\n  const name = metricName.replace(/(_count|_sum|_bucket)$/, '');\n\n  const { data, isLoading, error } = useQuery<MetricMetadataResponse, StatusError>({\n    enabled: !!client && enabled,\n    queryKey: ['metricMetadata', name], // Not indexed on datasource, assuming a metric metadata should be similar across datasources\n    queryFn: async () => {\n      const params: MetricMetadataRequestParameters = { metric: name };\n\n      return await client!.metricMetadata(params);\n    },\n  });\n\n  // Find the first result with help text\n  const metadata: MetricMetadata | undefined = useMemo(() => {\n    for (const metric of data?.data?.[name] ?? []) {\n      if (metric.help.length > 0) {\n        return metric;\n      }\n    }\n    return undefined;\n  }, [data, name]);\n\n  return { metadata, isLoading, error };\n}\n\nexport function useLabels(\n  filters: LabelFilter[],\n  datasource: DatasourceSelector\n): UseQueryResult<LabelValuesResponse, StatusError> {\n  const {\n    absoluteTimeRange: { start, end },\n  } = useTimeRange();\n  const { data: client } = useDatasourceClient<PrometheusClient>(datasource);\n\n  return useQuery<LabelValuesResponse, StatusError>({\n    enabled: !!client,\n    queryKey: ['labels', 'datasource', datasource.name, 'start', start, 'end', end, 'filters', ...filters],\n    queryFn: async () => {\n      const params: LabelNamesRequestParameters = {\n        start: start.valueOf() / 1000,\n        end: end.valueOf() / 1000,\n      };\n      if (filters.length) {\n        params['match[]'] = [`{${computeFilterExpr(filters)}}`];\n      }\n\n      return await client!.labelNames(params);\n    },\n  });\n}\n\n// Retrieve label values from the Prometheus API for a given label name and filters\nexport function useLabelValues(\n  labelName: string,\n  filters: LabelFilter[],\n  datasource: DatasourceSelector\n): UseQueryResult<LabelValuesResponse, StatusError> {\n  const {\n    absoluteTimeRange: { start, end },\n  } = useTimeRange();\n  const { data: client } = useDatasourceClient<PrometheusClient>(datasource);\n\n  return useQuery<LabelValuesResponse, StatusError>({\n    enabled: !!client,\n    queryKey: ['labelValues', labelName, 'datasource', datasource.name, 'start', start, 'end', 'filters', ...filters],\n    queryFn: async () => {\n      const params: LabelValuesRequestParameters = {\n        labelName: labelName,\n        start: start.valueOf() / 1000,\n        end: end.valueOf() / 1000,\n      };\n      if (filters.length) {\n        params['match[]'] = [`{${computeFilterExpr(filters)}}`];\n      }\n\n      return await client!.labelValues(params);\n    },\n  });\n}\n\n// Retrieve series from the Prometheus API for a given metric name and filters\n// Also computes the number of times a label value appears for the given metric name and filters\nexport function useSeriesStates(\n  metricName: string,\n  filters: LabelFilter[],\n  datasource: DatasourceSelector\n): {\n  series: Metric[] | undefined;\n  labelValueCounters: Map<string, Array<{ labelValue: string; counter: number }>>;\n  isLoading: boolean;\n  isError: boolean;\n  error: StatusError | null;\n} {\n  const {\n    absoluteTimeRange: { start, end },\n  } = useTimeRange();\n  const { data: client } = useDatasourceClient<PrometheusClient>(datasource);\n\n  const {\n    data: seriesData,\n    isLoading,\n    isError,\n    error,\n  } = useQuery<SeriesResponse, StatusError>({\n    enabled: !!client,\n    queryKey: ['series', metricName, 'datasource', datasource, 'start', start, 'end', 'filters', ...filters],\n    queryFn: async () => {\n      const params: SeriesRequestParameters = {\n        'match[]': [`{${computeFilterExpr(filters)}}`],\n        start: start.valueOf() / 1000,\n        end: end.valueOf() / 1000,\n      };\n\n      return await client!.series(params);\n    },\n  });\n\n  const labelValueCounters: Map<string, Array<{ labelValue: string; counter: number }>> = useMemo(() => {\n    const result = new Map<string, LabelValueCounter[]>();\n    if (seriesData?.data === undefined) {\n      return result;\n    }\n\n    for (const series of seriesData.data) {\n      for (const [label, value] of Object.entries(series)) {\n        const labelCounters = result.get(label);\n        if (labelCounters === undefined) {\n          result.set(label, [{ labelValue: value, counter: 1 }]);\n          continue;\n        }\n\n        const labelValueCounter = labelCounters.find((counter) => counter.labelValue === value);\n        if (labelValueCounter === undefined) {\n          labelCounters.push({ labelValue: value, counter: 1 });\n        } else {\n          labelValueCounter.counter += 1;\n        }\n      }\n    }\n\n    return result;\n  }, [seriesData]);\n\n  return { series: seriesData?.data, labelValueCounters, isLoading, isError, error };\n}\n"],"names":["useDatasourceClient","useTimeRange","useQuery","useMemo","computeFilterExpr","useMetricMetadata","metricName","datasource","enabled","data","client","name","replace","isLoading","error","queryKey","queryFn","params","metric","metricMetadata","metadata","help","length","undefined","useLabels","filters","absoluteTimeRange","start","end","valueOf","labelNames","useLabelValues","labelName","labelValues","useSeriesStates","seriesData","isError","series","labelValueCounters","result","Map","label","value","Object","entries","labelCounters","get","set","labelValue","counter","labelValueCounter","find","push"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/explore/PrometheusMetricsFinder/utils.ts"],"sourcesContent":["// Copyright 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, StatusError } from '@perses-dev/core';\nimport { useDatasourceClient, useTimeRange } from '@perses-dev/plugin-system';\nimport { useQuery, UseQueryResult } from '@tanstack/react-query';\nimport { useMemo } from 'react';\nimport {\n  LabelNamesRequestParameters,\n  LabelValuesRequestParameters,\n  LabelValuesResponse,\n  Metric,\n  MetricMetadata,\n  MetricMetadataRequestParameters,\n  MetricMetadataResponse,\n  PrometheusClient,\n  SeriesRequestParameters,\n  SeriesResponse,\n} from '../../model';\nimport { computeFilterExpr, LabelFilter, LabelValueCounter } from './types';\n\n// Retrieve metric metadata from the Prometheus API\nexport function useMetricMetadata(\n  metricName: string,\n  datasource: DatasourceSelector,\n  enabled?: boolean\n): {\n  isLoading: false | true;\n  metadata: MetricMetadata | undefined;\n  error: StatusError | null;\n} {\n  const { data: client } = useDatasourceClient<PrometheusClient>(datasource);\n\n  // histograms and summaries timeseries desc are not always added to prefixed timeseries\n  const name = metricName.replace(/(_count|_sum|_bucket)$/, '');\n\n  const { data, isLoading, error } = useQuery<MetricMetadataResponse, StatusError>({\n    enabled: !!client && enabled,\n    queryKey: ['metricMetadata', name], // Not indexed on datasource, assuming a metric metadata should be similar across datasources\n    queryFn: async () => {\n      const params: MetricMetadataRequestParameters = { metric: name };\n\n      return await client!.metricMetadata(params);\n    },\n  });\n\n  // Find the first result with help text\n  const metadata: MetricMetadata | undefined = useMemo(() => {\n    for (const metric of data?.data?.[name] ?? []) {\n      if (metric.help.length > 0) {\n        return metric;\n      }\n    }\n    return undefined;\n  }, [data, name]);\n\n  return { metadata, isLoading, error };\n}\n\nexport function useLabels(\n  filters: LabelFilter[],\n  datasource: DatasourceSelector\n): UseQueryResult<LabelValuesResponse, StatusError> {\n  const {\n    absoluteTimeRange: { start, end },\n  } = useTimeRange();\n  const { data: client } = useDatasourceClient<PrometheusClient>(datasource);\n\n  return useQuery<LabelValuesResponse, StatusError>({\n    enabled: !!client,\n    queryKey: ['labels', 'datasource', datasource.name, 'start', start, 'end', end, 'filters', ...filters],\n    queryFn: async () => {\n      const params: LabelNamesRequestParameters = {\n        start: start.valueOf() / 1000,\n        end: end.valueOf() / 1000,\n      };\n      if (filters.length) {\n        params['match[]'] = [`{${computeFilterExpr(filters)}}`];\n      }\n\n      return await client!.labelNames(params);\n    },\n  });\n}\n\n// Retrieve label values from the Prometheus API for a given label name and filters\nexport function useLabelValues(\n  labelName: string,\n  filters: LabelFilter[],\n  datasource: DatasourceSelector\n): UseQueryResult<LabelValuesResponse, StatusError> {\n  const {\n    absoluteTimeRange: { start, end },\n  } = useTimeRange();\n  const { data: client } = useDatasourceClient<PrometheusClient>(datasource);\n\n  return useQuery<LabelValuesResponse, StatusError>({\n    enabled: !!client,\n    queryKey: ['labelValues', labelName, 'datasource', datasource.name, 'start', start, 'end', 'filters', ...filters],\n    queryFn: async () => {\n      const params: LabelValuesRequestParameters = {\n        labelName: labelName,\n        start: start.valueOf() / 1000,\n        end: end.valueOf() / 1000,\n      };\n      if (filters.length) {\n        params['match[]'] = [`{${computeFilterExpr(filters)}}`];\n      }\n\n      return await client!.labelValues(params);\n    },\n  });\n}\n\n// Retrieve series from the Prometheus API for a given metric name and filters\n// Also computes the number of times a label value appears for the given metric name and filters\nexport function useSeriesStates(\n  metricName: string,\n  filters: LabelFilter[],\n  datasource: DatasourceSelector\n): {\n  series: Metric[] | undefined;\n  labelValueCounters: Map<string, Array<{ labelValue: string; counter: number }>>;\n  isLoading: boolean;\n  isError: boolean;\n  error: StatusError | null;\n} {\n  const {\n    absoluteTimeRange: { start, end },\n  } = useTimeRange();\n  const { data: client } = useDatasourceClient<PrometheusClient>(datasource);\n\n  const {\n    data: seriesData,\n    isLoading,\n    isError,\n    error,\n  } = useQuery<SeriesResponse, StatusError>({\n    enabled: !!client,\n    queryKey: ['series', metricName, 'datasource', datasource, 'start', start, 'end', 'filters', ...filters],\n    queryFn: async () => {\n      const params: SeriesRequestParameters = {\n        'match[]': [`{${computeFilterExpr(filters)}}`],\n        start: start.valueOf() / 1000,\n        end: end.valueOf() / 1000,\n      };\n\n      return await client!.series(params);\n    },\n  });\n\n  const labelValueCounters: Map<string, Array<{ labelValue: string; counter: number }>> = useMemo(() => {\n    const result = new Map<string, LabelValueCounter[]>();\n    if (seriesData?.data === undefined) {\n      return result;\n    }\n\n    for (const series of seriesData.data) {\n      for (const [label, value] of Object.entries(series)) {\n        const labelCounters = result.get(label);\n        if (labelCounters === undefined) {\n          result.set(label, [{ labelValue: value, counter: 1 }]);\n          continue;\n        }\n\n        const labelValueCounter = labelCounters.find((counter) => counter.labelValue === value);\n        if (labelValueCounter === undefined) {\n          labelCounters.push({ labelValue: value, counter: 1 });\n        } else {\n          labelValueCounter.counter += 1;\n        }\n      }\n    }\n\n    return result;\n  }, [seriesData]);\n\n  return { series: seriesData?.data, labelValueCounters, isLoading, isError, error };\n}\n"],"names":["useDatasourceClient","useTimeRange","useQuery","useMemo","computeFilterExpr","useMetricMetadata","metricName","datasource","enabled","data","client","name","replace","isLoading","error","queryKey","queryFn","params","metric","metricMetadata","metadata","help","length","undefined","useLabels","filters","absoluteTimeRange","start","end","valueOf","labelNames","useLabelValues","labelName","labelValues","useSeriesStates","seriesData","isError","series","labelValueCounters","result","Map","label","value","Object","entries","labelCounters","get","set","labelValue","counter","labelValueCounter","find","push"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/explore/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/explore/index.ts"],"names":[],"mappings":"AAaA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC"}

package/lib/explore/index.js

@@ -1,3 +1,15 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the \"License\");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an \"AS IS\" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
 export * from './PrometheusMetricsFinder';
 export * from './PrometheusExplorer';
 

package/lib/explore/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/explore/index.ts"],"sourcesContent":["export * from './PrometheusMetricsFinder';\nexport * from './PrometheusExplorer';\n"],"names":[],"mappings":"AAAA,cAAc,4BAA4B;AAC1C,cAAc,uBAAuB"}
+{"version":3,"sources":["../../../src/explore/index.ts"],"sourcesContent":["// Copyright 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\nexport * from './PrometheusMetricsFinder';\nexport * from './PrometheusExplorer';\n"],"names":[],"mappings":"AAAA,+BAA+B;AAC/B,oEAAoE;AACpE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,sEAAsE;AACtE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,4BAA4B;AAC1C,cAAc,uBAAuB"}

package/lib/getPluginModule.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getPluginModule.d.ts","sourceRoot":"","sources":["../../src/getPluginModule.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAoB,MAAM,2BAA2B,CAAC;AAGnF;;GAEG;AACH,wBAAgB,eAAe,IAAI,oBAAoB,CAUtD"}
+{"version":3,"file":"getPluginModule.d.ts","sourceRoot":"","sources":["../../src/getPluginModule.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,oBAAoB,EAAoB,MAAM,2BAA2B,CAAC;AAGnF;;GAEG;AACH,wBAAgB,eAAe,IAAI,oBAAoB,CAUtD"}

package/lib/getPluginModule.js

@@ -1,3 +1,15 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the \"License\");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an \"AS IS\" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
 import packageJson from '../package.json';
 /**
  * Returns the plugin module information from package.json

package/lib/getPluginModule.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/getPluginModule.ts"],"sourcesContent":["import { PluginModuleResource, PluginModuleSpec } from '@perses-dev/plugin-system';\nimport packageJson from '../package.json';\n\n/**\n * Returns the plugin module information from package.json\n */\nexport function getPluginModule(): PluginModuleResource {\n  const { name, version, perses } = packageJson;\n  return {\n    kind: 'PluginModule',\n    metadata: {\n      name,\n      version,\n    },\n    spec: perses as PluginModuleSpec,\n  };\n}\n"],"names":["packageJson","getPluginModule","name","version","perses","kind","metadata","spec"],"mappings":"AACA,OAAOA,iBAAiB,kBAAkB;AAE1C;;CAEC,GACD,OAAO,SAASC;IACd,MAAM,EAAEC,IAAI,EAAEC,OAAO,EAAEC,MAAM,EAAE,GAAGJ;IAClC,OAAO;QACLK,MAAM;QACNC,UAAU;YACRJ;YACAC;QACF;QACAI,MAAMH;IACR;AACF"}
+{"version":3,"sources":["../../src/getPluginModule.ts"],"sourcesContent":["// Copyright 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 { PluginModuleResource, PluginModuleSpec } from '@perses-dev/plugin-system';\nimport packageJson from '../package.json';\n\n/**\n * Returns the plugin module information from package.json\n */\nexport function getPluginModule(): PluginModuleResource {\n  const { name, version, perses } = packageJson;\n  return {\n    kind: 'PluginModule',\n    metadata: {\n      name,\n      version,\n    },\n    spec: perses as PluginModuleSpec,\n  };\n}\n"],"names":["packageJson","getPluginModule","name","version","perses","kind","metadata","spec"],"mappings":"AAAA,+BAA+B;AAC/B,oEAAoE;AACpE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,sEAAsE;AACtE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAGjC,OAAOA,iBAAiB,kBAAkB;AAE1C;;CAEC,GACD,OAAO,SAASC;IACd,MAAM,EAAEC,IAAI,EAAEC,OAAO,EAAEC,MAAM,EAAE,GAAGJ;IAClC,OAAO;QACLK,MAAM;QACNC,UAAU;YACRJ;YACAC;QACF;QACAI,MAAMH;IACR;AACF"}

package/lib/index-federation.js

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/lib/index-federation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index-federation.ts"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport('./bootstrap');\n"],"names":[],"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,MAAM,CAAC"}
+{"version":3,"sources":["../../src/index-federation.ts"],"sourcesContent":["// Copyright 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('./bootstrap');\n"],"names":[],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,MAAM,CAAC"}

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAaA,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC"}