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

package/lib/explore/PrometheusMetricsFinder/PrometheusMetricsFinder.js

@@ -0,0 +1,244 @@
+// Copyright 2024 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Checkbox, CircularProgress, FormControlLabel, IconButton, InputAdornment, Menu, MenuItem, Stack, TextField, useMediaQuery, useTheme } from '@mui/material';
+import { Fuzzy } from '@nexucis/fuzzy';
+import { useExplorerQueryParams } from '@perses-dev/explore';
+import ArrowLeftIcon from 'mdi-material-ui/ArrowLeft';
+import CogIcon from 'mdi-material-ui/Cog';
+import Magnify from 'mdi-material-ui/Magnify';
+import { useMemo, useState } from 'react';
+import { Link as RouterLink } from 'react-router-dom';
+import { DEFAULT_PROM } from '../../model';
+import { MetricList } from './display/list/MetricList';
+import { FinderFilters } from './filter/FinderFilters';
+import { MetricOverview } from './overview/MetricOverview';
+import { useLabelValues } from './utils';
+const PERSES_METRICS_FINDER_SETTINGS = 'PERSES_METRICS_FINDER_SETTINGS';
+export function SettingsMenu({ value, onChange }) {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = Boolean(anchorEl);
+    const handleClick = (event)=>{
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = ()=>{
+        setAnchorEl(null);
+    };
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(IconButton, {
+                "aria-label": "settings",
+                size: "large",
+                onClick: handleClick,
+                children: /*#__PURE__*/ _jsx(CogIcon, {})
+            }),
+            /*#__PURE__*/ _jsxs(Menu, {
+                id: "finder-settings-menu",
+                anchorEl: anchorEl,
+                open: open,
+                onClose: handleClose,
+                children: [
+                    /*#__PURE__*/ _jsx(MenuItem, {
+                        onClick: (e)=>e.preventDefault(),
+                        children: /*#__PURE__*/ _jsx(FormControlLabel, {
+                            control: /*#__PURE__*/ _jsx(Checkbox, {}),
+                            label: "Enable Metadata",
+                            checked: value.isMetadataEnabled,
+                            onClick: ()=>onChange({
+                                    ...value,
+                                    isMetadataEnabled: !value.isMetadataEnabled
+                                })
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(MenuItem, {
+                        onClick: (e)=>e.preventDefault(),
+                        children: /*#__PURE__*/ _jsx(FormControlLabel, {
+                            control: /*#__PURE__*/ _jsx(Checkbox, {}),
+                            label: "Enable Time Series Chart",
+                            checked: value.isPanelEnabled,
+                            onClick: ()=>onChange({
+                                    ...value,
+                                    isPanelEnabled: !value.isPanelEnabled
+                                })
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}
+export function MetricNameExplorer({ datasource, filters, isMetadataEnabled, onExplore, ...props }) {
+    const { data, isLoading, error } = useLabelValues('__name__', filters, datasource);
+    const [search, setSearch] = useState('');
+    const fuzzy = useMemo(()=>new Fuzzy({
+            includeMatches: true,
+            excludedChars: [
+                ' '
+            ]
+        }), []);
+    const filteredResults = useMemo(()=>{
+        if (search && data?.data) {
+            return fuzzy.filter(search, data.data).sort((a, b)=>b.score - a.score);
+        }
+        return undefined;
+    }, [
+        data,
+        fuzzy,
+        search
+    ]);
+    if (error) {
+        return /*#__PURE__*/ _jsxs(Stack, {
+            width: "100%",
+            children: [
+                "Error: ",
+                error.message
+            ]
+        });
+    }
+    if (isLoading) {
+        return /*#__PURE__*/ _jsx(Stack, {
+            width: "100%",
+            sx: {
+                alignItems: 'center',
+                justifyContent: 'center'
+            },
+            children: /*#__PURE__*/ _jsx(CircularProgress, {})
+        });
+    }
+    return /*#__PURE__*/ _jsxs(Stack, {
+        ...props,
+        children: [
+            /*#__PURE__*/ _jsx(TextField, {
+                value: search,
+                onChange: (e)=>setSearch(e.target.value),
+                placeholder: "Search metric name...",
+                InputProps: {
+                    startAdornment: /*#__PURE__*/ _jsx(InputAdornment, {
+                        position: "start",
+                        children: /*#__PURE__*/ _jsx(Magnify, {})
+                    })
+                }
+            }),
+            /*#__PURE__*/ _jsx(MetricList, {
+                metricNames: data?.data ?? [],
+                filteredResults: filteredResults,
+                datasource: datasource,
+                filters: filters,
+                isMetadataEnabled: isMetadataEnabled,
+                onExplore: onExplore
+            })
+        ]
+    });
+}
+export function PrometheusMetricsFinder({ value: { datasource = DEFAULT_PROM, filters = [], exploredMetric }, onChange, onExplore, ...props }) {
+    const settingsStored = localStorage.getItem(PERSES_METRICS_FINDER_SETTINGS);
+    const [settings, setSettings] = useState(settingsStored ? JSON.parse(settingsStored) : {
+        isMetadataEnabled: true
+    });
+    function handleSettingsUpdate(value) {
+        setSettings(value);
+        localStorage.setItem(PERSES_METRICS_FINDER_SETTINGS, JSON.stringify(value));
+    }
+    const isMobileSize = useMediaQuery(useTheme().breakpoints.down('md'));
+    // Remove duplicated filters and filters without label or labelValues
+    const filteredFilters = useMemo(()=>{
+        return filters.filter((filter)=>filter.label && filter.labelValues.length > 0);
+    }, [
+        filters
+    ]);
+    const searchParams = useExplorerQueryParams({
+        data: {
+            tab: 'finder',
+            datasource,
+            filters,
+            exploredMetric: undefined
+        }
+    });
+    function setDatasource(value) {
+        onChange({
+            datasource: value,
+            filters,
+            exploredMetric
+        });
+    }
+    function setFilters(value) {
+        onChange({
+            datasource,
+            filters: value,
+            exploredMetric
+        });
+    }
+    return /*#__PURE__*/ _jsxs(Stack, {
+        ...props,
+        gap: 1,
+        children: [
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: isMobileSize ? 'column' : 'row',
+                gap: 2,
+                justifyContent: "space-between",
+                children: [
+                    /*#__PURE__*/ _jsx(FinderFilters, {
+                        datasource: datasource ?? DEFAULT_PROM,
+                        filters: filters ?? [],
+                        filteredFilters: filteredFilters,
+                        onDatasourceChange: setDatasource,
+                        onFiltersChange: setFilters
+                    }),
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        direction: "row",
+                        gap: 1,
+                        alignItems: "center",
+                        children: [
+                            exploredMetric && /*#__PURE__*/ _jsx(Button, {
+                                variant: "contained",
+                                "aria-label": "back to metric explorer",
+                                startIcon: /*#__PURE__*/ _jsx(ArrowLeftIcon, {}),
+                                component: RouterLink,
+                                to: `?${searchParams}`,
+                                children: "Back"
+                            }),
+                            /*#__PURE__*/ _jsx(Stack, {
+                                direction: "row",
+                                sx: {
+                                    width: isMobileSize ? '100%' : 'unset'
+                                },
+                                justifyContent: isMobileSize ? 'end' : 'unset',
+                                alignItems: "center",
+                                children: /*#__PURE__*/ _jsx(SettingsMenu, {
+                                    value: settings,
+                                    onChange: handleSettingsUpdate
+                                })
+                            })
+                        ]
+                    })
+                ]
+            }),
+            exploredMetric ? /*#__PURE__*/ _jsx(MetricOverview, {
+                metricName: exploredMetric,
+                datasource: datasource ?? DEFAULT_PROM,
+                filters: filteredFilters,
+                isMetadataEnabled: settings.isMetadataEnabled,
+                isPanelEnabled: settings.isPanelEnabled,
+                onFiltersChange: setFilters,
+                onExplore: onExplore
+            }) : /*#__PURE__*/ _jsx(MetricNameExplorer, {
+                datasource: datasource ?? DEFAULT_PROM,
+                filters: filteredFilters,
+                isMetadataEnabled: settings.isMetadataEnabled,
+                onExplore: onExplore
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=PrometheusMetricsFinder.js.map

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

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

package/lib/explore/PrometheusMetricsFinder/display/MetricChip.d.ts

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

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

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

package/lib/explore/PrometheusMetricsFinder/display/MetricChip.js

@@ -0,0 +1,53 @@
+// Copyright 2024 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Chip } from '@mui/material';
+export function MetricChip({ label, ...props }) {
+    if (label === 'gauge') {
+        return /*#__PURE__*/ _jsx(Chip, {
+            label: label,
+            color: "success",
+            ...props
+        });
+    }
+    if (label === 'counter') {
+        return /*#__PURE__*/ _jsx(Chip, {
+            label: label,
+            color: "primary",
+            ...props
+        });
+    }
+    if (label === 'histogram') {
+        return /*#__PURE__*/ _jsx(Chip, {
+            label: label,
+            color: "warning",
+            ...props
+        });
+    }
+    if (label === 'summary') {
+        return /*#__PURE__*/ _jsx(Chip, {
+            label: label,
+            color: "secondary",
+            ...props
+        });
+    }
+    return /*#__PURE__*/ _jsx(Chip, {
+        label: label,
+        sx: {
+            fontStyle: label === 'unknown' ? 'italic' : 'initial'
+        },
+        ...props
+    });
+}
+
+//# sourceMappingURL=MetricChip.js.map

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

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

package/lib/explore/PrometheusMetricsFinder/display/list/MetricList.d.ts

@@ -0,0 +1,27 @@
+import { StackProps } from '@mui/material';
+import { FuzzyMatchingInterval } from '@nexucis/fuzzy';
+import { DatasourceSelector } from '@perses-dev/core';
+import { ReactElement, ReactNode } from 'react';
+import { LabelFilter } from '../../types';
+export interface MetricRowProps {
+    children?: ReactNode;
+    metricName: string;
+    datasource: DatasourceSelector;
+    filters: LabelFilter[];
+    isMetadataEnabled?: boolean;
+    onExplore?: (metricName: string) => void;
+}
+export declare function MetricRow({ children, metricName, datasource, filters, isMetadataEnabled, onExplore, }: MetricRowProps): ReactElement;
+export interface MetricListProps extends StackProps {
+    metricNames: string[];
+    filteredResults?: Array<{
+        original: string;
+        intervals?: FuzzyMatchingInterval[];
+    }>;
+    datasource: DatasourceSelector;
+    filters: LabelFilter[];
+    isMetadataEnabled?: boolean;
+    onExplore?: (metricName: string) => void;
+}
+export declare function MetricList({ metricNames, filteredResults, datasource, filters, isMetadataEnabled, onExplore, ...props }: MetricListProps): ReactElement;
+//# sourceMappingURL=MetricList.d.ts.map

package/lib/explore/PrometheusMetricsFinder/display/list/MetricList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricList.d.ts","sourceRoot":"","sources":["../../../../../../src/explore/PrometheusMetricsFinder/display/list/MetricList.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAoC,UAAU,EAAyB,MAAM,eAAe,CAAC;AACpG,OAAO,EAAS,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AAC9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAGtD,OAAO,EAAE,YAAY,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AAGzD,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAI1C,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,kBAAkB,CAAC;IAC/B,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C;AAED,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,UAAU,EACV,UAAU,EACV,OAAO,EACP,iBAAiB,EACjB,SAAS,GACV,EAAE,cAAc,GAAG,YAAY,CA4C/B;AAED,MAAM,WAAW,eAAgB,SAAQ,UAAU;IACjD,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,eAAe,CAAC,EAAE,KAAK,CAAC;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,qBAAqB,EAAE,CAAA;KAAE,CAAC,CAAC;IACnF,UAAU,EAAE,kBAAkB,CAAC;IAC/B,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C;AAED,wBAAgB,UAAU,CAAC,EACzB,WAAW,EACX,eAAe,EACf,UAAU,EACV,OAAO,EACP,iBAAiB,EACjB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,eAAe,GAAG,YAAY,CA0ChC"}

package/lib/explore/PrometheusMetricsFinder/display/list/MetricList.js

@@ -0,0 +1,158 @@
+// Copyright 2024 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Divider, Skeleton, Stack, TableCell, Typography } from '@mui/material';
+import { Fuzzy } from '@nexucis/fuzzy';
+import { useExplorerQueryParams } from '@perses-dev/explore';
+import CompassIcon from 'mdi-material-ui/Compass';
+import { useMemo } from 'react';
+import { Link as RouterLink } from 'react-router-dom';
+import { TableVirtuoso } from 'react-virtuoso';
+import { useMetricMetadata } from '../../utils';
+import { MetricChip } from '../MetricChip';
+export function MetricRow({ children, metricName, datasource, filters, isMetadataEnabled, onExplore }) {
+    const { metadata, isLoading } = useMetricMetadata(metricName, datasource, isMetadataEnabled);
+    const searchParams = useExplorerQueryParams({
+        data: {
+            tab: 'finder',
+            datasource,
+            filters,
+            exploredMetric: metricName
+        }
+    });
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(TableCell, {
+                style: {
+                    width: '300px'
+                },
+                children: /*#__PURE__*/ _jsx(Typography, {
+                    sx: {
+                        fontFamily: 'monospace'
+                    },
+                    children: children ?? metricName
+                })
+            }),
+            /*#__PURE__*/ _jsx(TableCell, {
+                style: {
+                    width: 115,
+                    textAlign: 'center'
+                },
+                children: isMetadataEnabled && isLoading ? /*#__PURE__*/ _jsx(Skeleton, {
+                    variant: "rounded",
+                    width: 75
+                }) : /*#__PURE__*/ _jsx(MetricChip, {
+                    label: metadata?.type ?? 'unknown'
+                })
+            }),
+            /*#__PURE__*/ _jsx(TableCell, {
+                style: {
+                    width: '100%'
+                },
+                children: isMetadataEnabled && isLoading ? /*#__PURE__*/ _jsx(Skeleton, {
+                    variant: "text",
+                    width: 180
+                }) : /*#__PURE__*/ _jsx(Typography, {
+                    sx: {
+                        fontStyle: metadata?.help ? 'initial' : 'italic',
+                        minWidth: '30vw'
+                    },
+                    children: metadata ? metadata.help : 'unknown'
+                })
+            }),
+            /*#__PURE__*/ _jsx(TableCell, {
+                style: {
+                    width: 140
+                },
+                children: /*#__PURE__*/ _jsx(Button, {
+                    "aria-label": `explore metric ${metricName}`,
+                    variant: "contained",
+                    startIcon: /*#__PURE__*/ _jsx(CompassIcon, {}),
+                    style: {
+                        textWrap: 'nowrap'
+                    },
+                    onClick: ()=>onExplore?.(metricName),
+                    component: RouterLink,
+                    to: `?${searchParams}`,
+                    children: "Explore"
+                })
+            })
+        ]
+    });
+}
+export function MetricList({ metricNames, filteredResults, datasource, filters, isMetadataEnabled, onExplore, ...props }) {
+    const fuzzy = new Fuzzy();
+    const fuzzyMetrics = useMemo(()=>{
+        if (filteredResults) {
+            return filteredResults;
+        }
+        return metricNames.map((metricName)=>({
+                original: metricName
+            }));
+    }, [
+        filteredResults,
+        metricNames
+    ]);
+    return /*#__PURE__*/ _jsxs(Stack, {
+        gap: 2,
+        width: "100%",
+        divider: /*#__PURE__*/ _jsx(Divider, {
+            orientation: "horizontal",
+            flexItem: true
+        }),
+        ...props,
+        children: [
+            /*#__PURE__*/ _jsx(TableVirtuoso, {
+                style: {
+                    height: '70vh',
+                    width: '100%'
+                },
+                totalCount: fuzzyMetrics.length,
+                itemContent: (index)=>/*#__PURE__*/ _jsx(MetricRow, {
+                        metricName: fuzzyMetrics[index].original,
+                        datasource: datasource,
+                        filters: filters,
+                        isMetadataEnabled: isMetadataEnabled,
+                        onExplore: onExplore,
+                        children: /*#__PURE__*/ _jsx("span", {
+                            dangerouslySetInnerHTML: {
+                                __html: fuzzy.render(fuzzyMetrics[index].original, fuzzyMetrics[index].intervals ?? [], {
+                                    pre: '<strong style="color:darkorange">',
+                                    post: '</strong>',
+                                    escapeHTML: true
+                                })
+                            }
+                        })
+                    })
+            }),
+            /*#__PURE__*/ _jsx(Stack, {
+                sx: {
+                    width: '100%'
+                },
+                textAlign: "end",
+                children: /*#__PURE__*/ _jsxs(Typography, {
+                    "data-testid": "finder-total",
+                    children: [
+                        "Total: ",
+                        /*#__PURE__*/ _jsx("strong", {
+                            children: metricNames.length
+                        }),
+                        " metrics"
+                    ]
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=MetricList.js.map

package/lib/explore/PrometheusMetricsFinder/display/list/MetricList.js.map

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

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

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

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

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