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

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

@@ -0,0 +1,209 @@
+// Copyright 2024 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cloneElement, forwardRef, useMemo, useRef, useState } from 'react';
+import { Autocomplete, CircularProgress, IconButton, InputAdornment, TextField } from '@mui/material';
+import CheckIcon from 'mdi-material-ui/Check';
+import DeleteIcon from 'mdi-material-ui/Delete';
+import { Virtuoso } from 'react-virtuoso';
+import { useLabels, useLabelValues } from '../utils';
+// TODO: fix when a filter is deleted => refresh data
+export function LabelFilterInput({ datasource, value, filters, onChange, onDelete }) {
+    const filtersWithoutCurrent = useMemo(()=>filters.filter((filter)=>filter.label !== value.label), [
+        filters,
+        value.label
+    ]);
+    const { data: labelOptions, isLoading: isLabelOptionsLoading } = useLabels(filtersWithoutCurrent, datasource);
+    const { data: labelValuesOptions, isLoading: isLabelValuesOptionsLoading } = useLabelValues(value.label, filtersWithoutCurrent, datasource);
+    return /*#__PURE__*/ _jsx(RawFilterInput, {
+        value: value,
+        labelOptions: labelOptions?.data ?? [],
+        labelValuesOptions: labelValuesOptions?.data ?? [],
+        isLabelOptionsLoading: isLabelOptionsLoading,
+        isLabelValuesOptionsLoading: isLabelValuesOptionsLoading,
+        onChange: onChange,
+        onDelete: onDelete
+    });
+}
+// https://stackoverflow.com/questions/69060738/material-ui-autocomplete-virtualization-w-react-virtuoso
+export const ListboxComponent = /*#__PURE__*/ forwardRef(({ children, ...rest }, ref)=>{
+    const data = children;
+    const localRef = useRef('500px');
+    const [height, setHeight] = useState(0);
+    return /*#__PURE__*/ _jsx("ul", {
+        style: {
+            overflow: 'hidden',
+            padding: '0',
+            height: height ? `min(40vh, ${height}px)` : '40vh'
+        },
+        ref: (reference)=>{
+            const maxHeight = reference ? getComputedStyle(reference).maxHeight : null;
+            if (maxHeight && maxHeight !== localRef.current) {
+                localRef.current = maxHeight;
+            }
+            if (typeof ref === 'function') {
+                ref(reference);
+            }
+        },
+        ...rest,
+        children: /*#__PURE__*/ _jsx(Virtuoso, {
+            style: {
+                height: localRef.current,
+                padding: '10px 0'
+            },
+            data: data,
+            totalListHeightChanged: setHeight,
+            itemContent: (index, child)=>{
+                return /*#__PURE__*/ cloneElement(child, {
+                    index,
+                    title: child.props.children
+                });
+            }
+        })
+    });
+});
+ListboxComponent.displayName = 'ListboxComponent';
+export function RawFilterInput({ value, labelOptions, labelValuesOptions, isLabelOptionsLoading, isLabelValuesOptionsLoading, onChange, onDelete }) {
+    const [isEditingLabelName, setIsEditingLabelName] = useState(value.labelValues.length === 0);
+    const [labelName, setLabelName] = useState(value.label);
+    function handleLabelConfirmation() {
+        setIsEditingLabelName(false);
+        onChange({
+            label: labelName,
+            labelValues: value.labelValues,
+            operator: value.operator
+        });
+    }
+    function handleKeyPress(event) {
+        if (isEditingLabelName && event.key === 'Enter') {
+            handleLabelConfirmation();
+        }
+    }
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(Autocomplete, {
+                freeSolo: true,
+                disableClearable: true,
+                options: labelOptions ?? [],
+                value: value.label,
+                sx: {
+                    minWidth: 250,
+                    display: isEditingLabelName ? 'block' : 'none'
+                },
+                ListboxComponent: ListboxComponent,
+                loading: isLabelOptionsLoading,
+                renderInput: (params)=>{
+                    return /*#__PURE__*/ _jsx(TextField, {
+                        ...params,
+                        label: "Label Name",
+                        variant: "outlined",
+                        fullWidth: true,
+                        size: "medium",
+                        InputProps: {
+                            ...params.InputProps,
+                            endAdornment: /*#__PURE__*/ _jsxs(InputAdornment, {
+                                position: "end",
+                                children: [
+                                    isLabelOptionsLoading ? /*#__PURE__*/ _jsx(CircularProgress, {
+                                        color: "inherit",
+                                        size: 20
+                                    }) : null,
+                                    /*#__PURE__*/ _jsx(IconButton, {
+                                        "aria-label": "validate label name",
+                                        onClick: ()=>handleLabelConfirmation(),
+                                        edge: "end",
+                                        children: /*#__PURE__*/ _jsx(CheckIcon, {})
+                                    })
+                                ]
+                            })
+                        }
+                    });
+                },
+                onKeyDown: handleKeyPress,
+                onInputChange: (_, newValue)=>{
+                    setLabelName(newValue ?? '');
+                }
+            }),
+            /*#__PURE__*/ _jsx(Autocomplete, {
+                freeSolo: true,
+                multiple: value.operator === '=~' || value.operator === '!~',
+                limitTags: 1,
+                disableClearable: true,
+                options: labelValuesOptions ?? [],
+                value: value.labelValues,
+                ListboxComponent: ListboxComponent,
+                sx: {
+                    minWidth: 250,
+                    display: isEditingLabelName ? 'none' : 'block'
+                },
+                loading: isLabelValuesOptionsLoading,
+                renderInput: (params)=>{
+                    return /*#__PURE__*/ _jsx(TextField, {
+                        ...params,
+                        label: value.label,
+                        variant: "outlined",
+                        fullWidth: true,
+                        size: "medium",
+                        InputProps: {
+                            ...params.InputProps,
+                            startAdornment: /*#__PURE__*/ _jsxs(_Fragment, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(InputAdornment, {
+                                        position: "start",
+                                        children: value.operator
+                                    }),
+                                    params.InputProps.startAdornment
+                                ]
+                            }),
+                            endAdornment: /*#__PURE__*/ _jsxs(InputAdornment, {
+                                position: "end",
+                                children: [
+                                    isLabelValuesOptionsLoading ? /*#__PURE__*/ _jsx(CircularProgress, {
+                                        color: "inherit",
+                                        size: 20
+                                    }) : null,
+                                    /*#__PURE__*/ _jsx(IconButton, {
+                                        "aria-label": "delete label filter",
+                                        onClick: ()=>onDelete(),
+                                        edge: "end",
+                                        children: /*#__PURE__*/ _jsx(DeleteIcon, {})
+                                    })
+                                ]
+                            })
+                        }
+                    });
+                },
+                onChange: (_, newValue)=>{
+                    if (typeof newValue === 'string') {
+                        onChange({
+                            label: value.label,
+                            labelValues: [
+                                newValue
+                            ],
+                            operator: value.operator
+                        });
+                    }
+                    if (Array.isArray(newValue)) {
+                        onChange({
+                            label: value.label,
+                            labelValues: newValue,
+                            operator: value.operator
+                        });
+                    }
+                }
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=FilterInputs.js.map

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

@@ -0,0 +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 { Autocomplete, CircularProgress, IconButton, InputAdornment, TextField } from '@mui/material';\nimport CheckIcon from 'mdi-material-ui/Check';\nimport DeleteIcon from 'mdi-material-ui/Delete';\nimport { DatasourceSelector } from '@perses-dev/core';\nimport { Virtuoso } from 'react-virtuoso';\nimport { LabelFilter } 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\n// TODO: fix when a filter is deleted => refresh data\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  const [isEditingLabelName, setIsEditingLabelName] = useState(value.labelValues.length === 0);\n  const [labelName, setLabelName] = useState(value.label);\n\n  function handleLabelConfirmation(): void {\n    setIsEditingLabelName(false);\n    onChange({ label: labelName, labelValues: value.labelValues, operator: value.operator });\n  }\n\n  function handleKeyPress(event: { key: string }): void {\n    if (isEditingLabelName && event.key === 'Enter') {\n      handleLabelConfirmation();\n    }\n  }\n\n  return (\n    <>\n      <Autocomplete\n        freeSolo\n        disableClearable\n        options={labelOptions ?? []}\n        value={value.label}\n        sx={{ minWidth: 250, display: isEditingLabelName ? 'block' : 'none' }}\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              InputProps={{\n                ...params.InputProps,\n                endAdornment: (\n                  <InputAdornment position=\"end\">\n                    {isLabelOptionsLoading ? <CircularProgress color=\"inherit\" size={20} /> : null}\n                    <IconButton aria-label=\"validate label name\" onClick={() => handleLabelConfirmation()} edge=\"end\">\n                      <CheckIcon />\n                    </IconButton>\n                  </InputAdornment>\n                ),\n              }}\n            />\n          );\n        }}\n        onKeyDown={handleKeyPress}\n        onInputChange={(_: SyntheticEvent, newValue: string | null) => {\n          setLabelName(newValue ?? '');\n        }}\n      />\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: 250, display: isEditingLabelName ? 'none' : 'block' }}\n        loading={isLabelValuesOptionsLoading}\n        renderInput={(params) => {\n          return (\n            <TextField\n              {...params}\n              label={value.label}\n              variant=\"outlined\"\n              fullWidth\n              size=\"medium\"\n              InputProps={{\n                ...params.InputProps,\n                startAdornment: (\n                  <>\n                    <InputAdornment position=\"start\">{value.operator}</InputAdornment>\n                    {params.InputProps.startAdornment}\n                  </>\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        onChange={(_, newValue) => {\n          if (typeof newValue === 'string') {\n            onChange({ label: value.label, labelValues: [newValue], operator: value.operator });\n          }\n          if (Array.isArray(newValue)) {\n            onChange({ label: value.label, labelValues: newValue, operator: value.operator });\n          }\n        }}\n      />\n    </>\n  );\n}\n"],"names":["cloneElement","forwardRef","useMemo","useRef","useState","Autocomplete","CircularProgress","IconButton","InputAdornment","TextField","CheckIcon","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","isEditingLabelName","setIsEditingLabelName","labelValues","length","labelName","setLabelName","handleLabelConfirmation","operator","handleKeyPress","event","key","freeSolo","disableClearable","options","sx","minWidth","display","loading","renderInput","params","variant","fullWidth","size","InputProps","endAdornment","position","color","aria-label","onClick","edge","onKeyDown","onInputChange","_","newValue","multiple","limitTags","startAdornment","Array","isArray"],"mappings":"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"}

package/lib/explore/PrometheusMetricsFinder/filter/FinderFilters.d.ts

@@ -0,0 +1,13 @@
+import { StackProps } from '@mui/material';
+import { DatasourceSelector } from '@perses-dev/core';
+import { ReactElement } from 'react';
+import { LabelFilter } from '../types';
+export interface ExplorerFiltersProps extends StackProps {
+    datasource: DatasourceSelector;
+    filters: LabelFilter[];
+    filteredFilters: LabelFilter[];
+    onDatasourceChange: (next: DatasourceSelector) => void;
+    onFiltersChange: (next: LabelFilter[]) => void;
+}
+export declare function FinderFilters({ datasource, filters, filteredFilters, onDatasourceChange, onFiltersChange, ...props }: ExplorerFiltersProps): ReactElement;
+//# sourceMappingURL=FinderFilters.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FinderFilters.d.ts","sourceRoot":"","sources":["../../../../../src/explore/PrometheusMetricsFinder/filter/FinderFilters.tsx"],"names":[],"mappings":"AAaA,OAAO,EAA0C,UAAU,EAAE,MAAM,eAAe,CAAC;AACnF,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAGtD,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAGvC,MAAM,WAAW,oBAAqB,SAAQ,UAAU;IACtD,UAAU,EAAE,kBAAkB,CAAC;IAC/B,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,eAAe,EAAE,WAAW,EAAE,CAAC;IAC/B,kBAAkB,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACvD,eAAe,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,KAAK,IAAI,CAAC;CAChD;AAED,wBAAgB,aAAa,CAAC,EAC5B,UAAU,EACV,OAAO,EACP,eAAe,EACf,kBAAkB,EAClB,eAAe,EACf,GAAG,KAAK,EACT,EAAE,oBAAoB,GAAG,YAAY,CA6CrC"}

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

@@ -0,0 +1,84 @@
+// Copyright 2024 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, FormControl, InputLabel, Stack } from '@mui/material';
+import { DatasourceSelect } from '@perses-dev/plugin-system';
+import PlusIcon from 'mdi-material-ui/Plus';
+import { PROM_DATASOURCE_KIND } from '../../../model/prometheus-selectors';
+import { LabelFilterInput } from './FilterInputs';
+export function FinderFilters({ datasource, filters, filteredFilters, onDatasourceChange, onFiltersChange, ...props }) {
+    function handleDatasourceChange(next) {
+        onDatasourceChange(next);
+    }
+    return /*#__PURE__*/ _jsxs(Stack, {
+        ...props,
+        direction: "row",
+        alignItems: "center",
+        flexWrap: "wrap",
+        gap: 1,
+        sx: {
+            width: '100%'
+        },
+        children: [
+            /*#__PURE__*/ _jsxs(FormControl, {
+                children: [
+                    /*#__PURE__*/ _jsx(InputLabel, {
+                        children: "Prometheus Datasource"
+                    }),
+                    /*#__PURE__*/ _jsx(DatasourceSelect, {
+                        datasourcePluginKind: PROM_DATASOURCE_KIND,
+                        value: datasource,
+                        onChange: handleDatasourceChange,
+                        label: "Prometheus Datasource"
+                    })
+                ]
+            }),
+            filters.map((filter, index)=>/*#__PURE__*/ _jsx(LabelFilterInput, {
+                    datasource: datasource,
+                    filters: filteredFilters,
+                    value: filter,
+                    onChange: (next)=>{
+                        const nextFilters = [
+                            ...filters
+                        ];
+                        nextFilters[index] = next;
+                        onFiltersChange(nextFilters);
+                    },
+                    onDelete: ()=>{
+                        const nextFilters = [
+                            ...filters
+                        ];
+                        nextFilters.splice(index, 1);
+                        onFiltersChange(nextFilters);
+                    }
+                }, index)),
+            /*#__PURE__*/ _jsx(Button, {
+                startIcon: /*#__PURE__*/ _jsx(PlusIcon, {}),
+                "aria-label": "add filter",
+                onClick: ()=>{
+                    onFiltersChange([
+                        ...filters,
+                        {
+                            label: '',
+                            labelValues: [],
+                            operator: '=~'
+                        }
+                    ]);
+                },
+                children: "Add filter"
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=FinderFilters.js.map

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

@@ -0,0 +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, InputLabel, Stack, StackProps } from '@mui/material';\nimport { DatasourceSelector } from '@perses-dev/core';\nimport { DatasourceSelect } 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  function handleDatasourceChange(next: DatasourceSelector): void {\n    onDatasourceChange(next);\n  }\n\n  return (\n    <Stack {...props} direction=\"row\" alignItems=\"center\" flexWrap=\"wrap\" gap={1} sx={{ width: '100%' }}>\n      <FormControl>\n        <InputLabel>Prometheus Datasource</InputLabel>\n        <DatasourceSelect\n          datasourcePluginKind={PROM_DATASOURCE_KIND}\n          value={datasource}\n          onChange={handleDatasourceChange}\n          label=\"Prometheus Datasource\"\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","InputLabel","Stack","DatasourceSelect","PlusIcon","PROM_DATASOURCE_KIND","LabelFilterInput","FinderFilters","datasource","filters","filteredFilters","onDatasourceChange","onFiltersChange","props","handleDatasourceChange","next","direction","alignItems","flexWrap","gap","sx","width","datasourcePluginKind","value","onChange","label","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,UAAU,EAAEC,KAAK,QAAoB,gBAAgB;AAEnF,SAASC,gBAAgB,QAAQ,4BAA4B;AAC7D,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,SAASC,uBAAuBC,IAAwB;QACtDJ,mBAAmBI;IACrB;IAEA,qBACE,MAACb;QAAO,GAAGW,KAAK;QAAEG,WAAU;QAAMC,YAAW;QAASC,UAAS;QAAOC,KAAK;QAAGC,IAAI;YAAEC,OAAO;QAAO;;0BAChG,MAACrB;;kCACC,KAACC;kCAAW;;kCACZ,KAACE;wBACCmB,sBAAsBjB;wBACtBkB,OAAOf;wBACPgB,UAAUV;wBACVW,OAAM;;;;YAGThB,QAAQiB,GAAG,CAAC,CAACC,QAAQC,sBACpB,KAACtB;oBAECE,YAAYA;oBACZC,SAASC;oBACTa,OAAOI;oBACPH,UAAU,CAACT;wBACT,MAAMc,cAAc;+BAAIpB;yBAAQ;wBAChCoB,WAAW,CAACD,MAAM,GAAGb;wBACrBH,gBAAgBiB;oBAClB;oBACAC,UAAU;wBACR,MAAMD,cAAc;+BAAIpB;yBAAQ;wBAChCoB,YAAYE,MAAM,CAACH,OAAO;wBAC1BhB,gBAAgBiB;oBAClB;mBAbKD;0BAgBT,KAAC7B;gBACCiC,yBAAW,KAAC5B;gBACZ6B,cAAW;gBACXC,SAAS;oBACPtB,gBAAgB;2BAAIH;wBAAS;4BAAEgB,OAAO;4BAAIU,aAAa,EAAE;4BAAEC,UAAU;wBAAK;qBAAE;gBAC9E;0BACD;;;;AAKP"}

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

@@ -0,0 +1,2 @@
+export * from './PrometheusMetricsFinder';
+//# sourceMappingURL=index.d.ts.map

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

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

package/{dist/model/api-types.js → lib/explore/PrometheusMetricsFinder/index.js}

@@ -10,6 +10,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.
-export { };
+export * from './PrometheusMetricsFinder';
 
-//# sourceMappingURL=api-types.js.map
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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"}

package/lib/explore/PrometheusMetricsFinder/overview/MetricOverview.d.ts

@@ -0,0 +1,23 @@
+import { StackProps } from '@mui/material';
+import { ReactElement } from 'react';
+import { DatasourceSelector } from '@perses-dev/core';
+import { LabelFilter } from '../types';
+export interface OverviewPanelProps extends StackProps {
+    metricName: string;
+    datasource: DatasourceSelector;
+    filters: LabelFilter[];
+    type?: string;
+    isLoading?: boolean;
+}
+export declare function OverviewPanel({ metricName, datasource, filters, type, isLoading, ...props }: OverviewPanelProps): ReactElement;
+export interface MetricOverviewProps extends StackProps {
+    metricName: string;
+    datasource: DatasourceSelector;
+    filters: LabelFilter[];
+    isMetadataEnabled?: boolean;
+    isPanelEnabled?: boolean;
+    onExplore?: (metricName: string) => void;
+    onFiltersChange: (filters: LabelFilter[]) => void;
+}
+export declare function MetricOverview({ metricName, datasource, filters, isMetadataEnabled, isPanelEnabled, onExplore, onFiltersChange, ...props }: MetricOverviewProps): ReactElement;
+//# sourceMappingURL=MetricOverview.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MetricOverview.d.ts","sourceRoot":"","sources":["../../../../../src/explore/PrometheusMetricsFinder/overview/MetricOverview.tsx"],"names":[],"mappings":"AAaA,OAAO,EAA+C,UAAU,EAAsB,MAAM,eAAe,CAAC;AAC5G,OAAO,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAA4C,MAAM,kBAAkB,CAAC;AAKhG,OAAO,EAAqB,WAAW,EAAE,MAAM,UAAU,CAAC;AAM1D,MAAM,WAAW,kBAAmB,SAAQ,UAAU;IACpD,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,kBAAkB,CAAC;IAC/B,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,aAAa,CAAC,EAC5B,UAAU,EACV,UAAU,EACV,OAAO,EACP,IAAI,EACJ,SAAS,EACT,GAAG,KAAK,EACT,EAAE,kBAAkB,GAAG,YAAY,CAyEnC;AAED,MAAM,WAAW,mBAAoB,SAAQ,UAAU;IACrD,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,kBAAkB,CAAC;IAC/B,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,eAAe,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,KAAK,IAAI,CAAC;CACnD;AAED,wBAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,UAAU,EACV,OAAO,EACP,iBAAiB,EACjB,cAAc,EACd,SAAS,EACT,eAAe,EACf,GAAG,KAAK,EACT,EAAE,mBAAmB,GAAG,YAAY,CAyFpC"}

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

@@ -0,0 +1,214 @@
+// Copyright 2024 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx, jsxs as _jsxs } 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';
+import useResizeObserver from 'use-resize-observer';
+import { DataQueriesProvider, useSuggestedStepMs } from '@perses-dev/plugin-system';
+import HelpCircleOutlineIcon from 'mdi-material-ui/HelpCircleOutline';
+import { computeFilterExpr } from '../types';
+import { useMetricMetadata } from '../utils';
+import { OverviewTab } from './tabs/OverviewTab';
+import { JobTab } from './tabs/JobTab';
+import { SimilarTab } from './tabs/SimilarTab';
+export function OverviewPanel({ metricName, datasource, filters, type, isLoading, ...props }) {
+    const { width, ref: panelRef } = useResizeObserver();
+    const suggestedStepMs = useSuggestedStepMs(width);
+    const [rateEnabled, setRateEnabled] = useState(true);
+    const { queries, definitions } = useMemo(()=>{
+        const expr = type === 'counter' || rateEnabled && (type === undefined || type === 'summary' || type === 'histogram') ? `rate({__name__="${metricName}", ${computeFilterExpr(filters)}}[5m])` : `{__name__="${metricName}", ${computeFilterExpr(filters)}}`;
+        const queries = [
+            {
+                kind: 'TimeSeriesQuery',
+                spec: {
+                    plugin: {
+                        kind: 'PrometheusTimeSeriesQuery',
+                        spec: {
+                            datasource: datasource,
+                            query: expr
+                        }
+                    }
+                }
+            }
+        ];
+        const definitions = queries.map((query)=>{
+            return {
+                kind: query.spec.plugin.kind,
+                spec: query.spec.plugin.spec
+            };
+        });
+        return {
+            queries,
+            definitions
+        };
+    }, [
+        datasource,
+        filters,
+        metricName,
+        rateEnabled,
+        type
+    ]);
+    if (isLoading) {
+        return /*#__PURE__*/ _jsx(Stack, {
+            ...props,
+            children: /*#__PURE__*/ _jsx(Skeleton, {
+                variant: "rectangular",
+                height: "100%"
+            })
+        });
+    }
+    return /*#__PURE__*/ _jsxs(Stack, {
+        ref: panelRef,
+        alignItems: "end",
+        ...props,
+        children: [
+            (type === undefined || type === 'summary' || type === 'histogram') && /*#__PURE__*/ _jsx(FormControlLabel, {
+                control: /*#__PURE__*/ _jsx(Checkbox, {
+                    size: "small"
+                }),
+                label: "Enable rate",
+                checked: rateEnabled,
+                onChange: (_, checked)=>setRateEnabled(checked)
+            }),
+            /*#__PURE__*/ _jsx(DataQueriesProvider, {
+                definitions: definitions,
+                options: {
+                    suggestedStepMs,
+                    mode: 'range'
+                },
+                children: /*#__PURE__*/ _jsx(Panel, {
+                    panelOptions: {
+                        hideHeader: true
+                    },
+                    definition: {
+                        kind: 'Panel',
+                        spec: {
+                            queries: queries,
+                            display: {
+                                name: ''
+                            },
+                            plugin: {
+                                kind: 'TimeSeriesChart',
+                                spec: {}
+                            }
+                        }
+                    }
+                })
+            })
+        ]
+    });
+}
+export function MetricOverview({ metricName, datasource, filters, isMetadataEnabled, isPanelEnabled, onExplore, onFiltersChange, ...props }) {
+    const [tab, setTab] = useState(0);
+    const { metadata, isLoading: isMetadataLoading } = useMetricMetadata(metricName, datasource);
+    const filtersWithMetricName = useMemo(()=>{
+        const result = filters.filter((filter)=>filter.label !== '__name__');
+        result.push({
+            label: '__name__',
+            labelValues: [
+                metricName
+            ],
+            operator: '='
+        });
+        return result;
+    }, [
+        filters,
+        metricName
+    ]);
+    function handleFilterAdd(filter) {
+        onFiltersChange([
+            ...filters,
+            filter
+        ]);
+    }
+    function handleExplore(metricName, tab) {
+        onExplore?.(metricName);
+        if (tab !== undefined) {
+            setTab(tab);
+        }
+    }
+    return /*#__PURE__*/ _jsxs(Stack, {
+        sx: {
+            width: '100%'
+        },
+        ...props,
+        children: [
+            isPanelEnabled && /*#__PURE__*/ _jsx(OverviewPanel, {
+                metricName: metricName,
+                filters: filters,
+                datasource: datasource,
+                type: metadata?.type,
+                height: "250px",
+                isLoading: isMetadataEnabled && isMetadataLoading
+            }),
+            /*#__PURE__*/ _jsxs(Tabs, {
+                value: tab,
+                onChange: (_, state)=>setTab(state),
+                variant: "scrollable",
+                sx: {
+                    borderBottom: 1,
+                    borderColor: 'divider'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(Tab, {
+                        label: "Overview"
+                    }),
+                    /*#__PURE__*/ _jsx(Tab, {
+                        label: "Job related metrics",
+                        icon: /*#__PURE__*/ _jsx(Tooltip, {
+                            title: "All metrics scraped from the same job",
+                            placement: "top",
+                            children: /*#__PURE__*/ _jsx(HelpCircleOutlineIcon, {})
+                        }),
+                        iconPosition: "end"
+                    }),
+                    filters.length > 0 && /*#__PURE__*/ _jsx(Tab, {
+                        label: "Similar metrics",
+                        icon: /*#__PURE__*/ _jsx(Tooltip, {
+                            title: "All metrics matching current filters",
+                            placement: "top",
+                            children: /*#__PURE__*/ _jsx(HelpCircleOutlineIcon, {})
+                        }),
+                        iconPosition: "end"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(Stack, {
+                gap: 1,
+                children: [
+                    tab === 0 && /*#__PURE__*/ _jsx(OverviewTab, {
+                        metricName: metricName,
+                        datasource: datasource,
+                        filters: filtersWithMetricName,
+                        onFilterAdd: handleFilterAdd
+                    }),
+                    tab === 1 && /*#__PURE__*/ _jsx(JobTab, {
+                        filters: filtersWithMetricName,
+                        datasource: datasource,
+                        isMetadataEnabled: isMetadataEnabled,
+                        onExplore: (metricName)=>handleExplore(metricName, 0)
+                    }),
+                    tab === 2 && /*#__PURE__*/ _jsx(SimilarTab, {
+                        filters: filtersWithMetricName,
+                        datasource: datasource,
+                        isMetadataEnabled: isMetadataEnabled,
+                        onExplore: (metricName)=>handleExplore(metricName, 0)
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=MetricOverview.js.map