@perses-dev/prometheus-plugin 0.56.0 → 0.57.0-beta.0

package/lib/explore/PrometheusExplorer.js

@@ -16,6 +16,7 @@ import { DataQueriesProvider, MultiQueryEditor, useSuggestedStepMs } from '@pers
 import { useExplorerManagerContext } from '@perses-dev/explore';
 import useResizeObserver from 'use-resize-observer';
 import { Panel } from '@perses-dev/dashboards';
+import { useState } from 'react';
 import { DEFAULT_PROM } from '../model/prometheus-selectors';
 import { PrometheusMetricsFinder } from './PrometheusMetricsFinder';
 const PANEL_PREVIEW_HEIGHT = 700;
@@ -102,6 +103,7 @@ function MetricDataTable({ queries }) {
 }
 export function PrometheusExplorer() {
     const { data: { tab = 'table', queries = [], datasource = DEFAULT_PROM, filters = [], exploredMetric = undefined }, setData } = useExplorerManagerContext();
+    const [queryDefinitions, setQueryDefinitions] = useState(queries);
     return /*#__PURE__*/ _jsxs(Stack, {
         gap: 2,
         sx: {
@@ -143,11 +145,12 @@ export function PrometheusExplorer() {
                                 queryTypes: [
                                     'TimeSeriesQuery'
                                 ],
-                                onChange: (state)=>setData({
+                                onChange: (state)=>setQueryDefinitions(state),
+                                queries: queryDefinitions,
+                                onQueryRun: ()=>setData({
                                         tab,
-                                        queries: state
+                                        queries: queryDefinitions
                                     }),
-                                queries: queries,
                                 filteredQueryPlugins: FILTERED_QUERY_PLUGINS
                             }),
                             /*#__PURE__*/ _jsx(MetricDataTable, {
@@ -161,11 +164,12 @@ export function PrometheusExplorer() {
                                 queryTypes: [
                                     'TimeSeriesQuery'
                                 ],
-                                onChange: (state)=>setData({
+                                onChange: (state)=>setQueryDefinitions(state),
+                                queries: queryDefinitions,
+                                onQueryRun: ()=>setData({
                                         tab,
-                                        queries: state
+                                        queries: queryDefinitions
                                     }),
-                                queries: queries,
                                 filteredQueryPlugins: FILTERED_QUERY_PLUGINS
                             }),
                             /*#__PURE__*/ _jsx(TimeSeriesPanel, {

package/lib/explore/PrometheusExplorer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/explore/PrometheusExplorer.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 { QueryDefinition } from '@perses-dev/core';\nimport { Box, Stack, Tab, Tabs } from '@mui/material';\nimport { DataQueriesProvider, MultiQueryEditor, useSuggestedStepMs } from '@perses-dev/plugin-system';\nimport { useExplorerManagerContext } from '@perses-dev/explore';\nimport useResizeObserver from 'use-resize-observer';\nimport { Panel } from '@perses-dev/dashboards';\nimport { ReactElement } from 'react';\nimport { DEFAULT_PROM } from '../model/prometheus-selectors';\nimport { FinderQueryParams } from './PrometheusMetricsFinder/types';\nimport { PrometheusMetricsFinder } from './PrometheusMetricsFinder';\n\ninterface MetricsExplorerQueryParams extends FinderQueryParams {\n  tab?: string;\n  queries?: QueryDefinition[];\n}\n\nconst PANEL_PREVIEW_HEIGHT = 700;\nconst FILTERED_QUERY_PLUGINS = ['PrometheusTimeSeriesQuery'];\n\nfunction TimeSeriesPanel({ queries }: { queries: QueryDefinition[] }): ReactElement {\n  const { width, ref: boxRef } = useResizeObserver();\n  const height = PANEL_PREVIEW_HEIGHT;\n\n  const suggestedStepMs = useSuggestedStepMs(width);\n\n  // map TimeSeriesQueryDefinition to Definition<UnknownSpec>\n  const definitions = queries.length\n    ? queries.map((query) => {\n        return {\n          kind: query.spec.plugin.kind,\n          spec: query.spec.plugin.spec,\n        };\n      })\n    : [];\n\n  return (\n    <Box ref={boxRef} height={height}>\n      <DataQueriesProvider definitions={definitions} options={{ suggestedStepMs, mode: 'range' }}>\n        <Panel\n          panelOptions={{\n            hideHeader: true,\n          }}\n          definition={{\n            kind: 'Panel',\n            spec: { queries: queries, display: { name: '' }, plugin: { kind: 'TimeSeriesChart', spec: {} } },\n          }}\n        />\n      </DataQueriesProvider>\n    </Box>\n  );\n}\n\nfunction MetricDataTable({ queries }: { queries: QueryDefinition[] }): ReactElement {\n  const height = PANEL_PREVIEW_HEIGHT;\n\n  // map TimeSeriesQueryDefinition to Definition<UnknownSpec>\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 (\n    <Box height={height}>\n      <DataQueriesProvider definitions={definitions} options={{ mode: 'instant' }}>\n        <Panel\n          panelOptions={{\n            hideHeader: true,\n          }}\n          definition={{\n            kind: 'Panel',\n            spec: { queries: queries, display: { name: '' }, plugin: { kind: 'TimeSeriesTable', spec: {} } },\n          }}\n        />\n      </DataQueriesProvider>\n    </Box>\n  );\n}\n\nexport function PrometheusExplorer(): ReactElement {\n  const {\n    data: { tab = 'table', queries = [], datasource = DEFAULT_PROM, filters = [], exploredMetric = undefined },\n    setData,\n  } = useExplorerManagerContext<MetricsExplorerQueryParams>();\n\n  return (\n    <Stack gap={2} sx={{ width: '100%' }}>\n      <Tabs\n        value={tab}\n        onChange={(_, state) => setData({ tab: state, queries })}\n        variant=\"scrollable\"\n        sx={{ borderBottom: 1, borderColor: 'divider' }}\n      >\n        <Tab value=\"table\" label=\"Table\" />\n        <Tab value=\"graph\" label=\"Graph\" />\n        <Tab value=\"finder\" label=\"Finder\" />\n      </Tabs>\n      <Stack gap={1}>\n        {tab === 'table' && (\n          <Stack>\n            <MultiQueryEditor\n              queryTypes={['TimeSeriesQuery']}\n              onChange={(state) => setData({ tab, queries: state })}\n              queries={queries}\n              filteredQueryPlugins={FILTERED_QUERY_PLUGINS}\n            />\n            <MetricDataTable queries={queries} />\n          </Stack>\n        )}\n        {tab === 'graph' && (\n          <Stack>\n            <MultiQueryEditor\n              queryTypes={['TimeSeriesQuery']}\n              onChange={(state) => setData({ tab, queries: state })}\n              queries={queries}\n              filteredQueryPlugins={FILTERED_QUERY_PLUGINS}\n            />\n            <TimeSeriesPanel queries={queries} />\n          </Stack>\n        )}\n        {tab === 'finder' && (\n          <Stack>\n            <PrometheusMetricsFinder\n              onChange={(state) => setData({ tab, ...state })}\n              value={{ datasource, filters, exploredMetric }}\n            />\n          </Stack>\n        )}\n      </Stack>\n    </Stack>\n  );\n}\n"],"names":["Box","Stack","Tab","Tabs","DataQueriesProvider","MultiQueryEditor","useSuggestedStepMs","useExplorerManagerContext","useResizeObserver","Panel","DEFAULT_PROM","PrometheusMetricsFinder","PANEL_PREVIEW_HEIGHT","FILTERED_QUERY_PLUGINS","TimeSeriesPanel","queries","width","ref","boxRef","height","suggestedStepMs","definitions","length","map","query","kind","spec","plugin","options","mode","panelOptions","hideHeader","definition","display","name","MetricDataTable","PrometheusExplorer","data","tab","datasource","filters","exploredMetric","undefined","setData","gap","sx","value","onChange","_","state","variant","borderBottom","borderColor","label","queryTypes","filteredQueryPlugins"],"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,GAAG,EAAEC,KAAK,EAAEC,GAAG,EAAEC,IAAI,QAAQ,gBAAgB;AACtD,SAASC,mBAAmB,EAAEC,gBAAgB,EAAEC,kBAAkB,QAAQ,4BAA4B;AACtG,SAASC,yBAAyB,QAAQ,sBAAsB;AAChE,OAAOC,uBAAuB,sBAAsB;AACpD,SAASC,KAAK,QAAQ,yBAAyB;AAE/C,SAASC,YAAY,QAAQ,gCAAgC;AAE7D,SAASC,uBAAuB,QAAQ,4BAA4B;AAOpE,MAAMC,uBAAuB;AAC7B,MAAMC,yBAAyB;IAAC;CAA4B;AAE5D,SAASC,gBAAgB,EAAEC,OAAO,EAAkC;IAClE,MAAM,EAAEC,KAAK,EAAEC,KAAKC,MAAM,EAAE,GAAGV;IAC/B,MAAMW,SAASP;IAEf,MAAMQ,kBAAkBd,mBAAmBU;IAE3C,2DAA2D;IAC3D,MAAMK,cAAcN,QAAQO,MAAM,GAC9BP,QAAQQ,GAAG,CAAC,CAACC;QACX,OAAO;YACLC,MAAMD,MAAME,IAAI,CAACC,MAAM,CAACF,IAAI;YAC5BC,MAAMF,MAAME,IAAI,CAACC,MAAM,CAACD,IAAI;QAC9B;IACF,KACA,EAAE;IAEN,qBACE,KAAC1B;QAAIiB,KAAKC;QAAQC,QAAQA;kBACxB,cAAA,KAACf;YAAoBiB,aAAaA;YAAaO,SAAS;gBAAER;gBAAiBS,MAAM;YAAQ;sBACvF,cAAA,KAACpB;gBACCqB,cAAc;oBACZC,YAAY;gBACd;gBACAC,YAAY;oBACVP,MAAM;oBACNC,MAAM;wBAAEX,SAASA;wBAASkB,SAAS;4BAAEC,MAAM;wBAAG;wBAAGP,QAAQ;4BAAEF,MAAM;4BAAmBC,MAAM,CAAC;wBAAE;oBAAE;gBACjG;;;;AAKV;AAEA,SAASS,gBAAgB,EAAEpB,OAAO,EAAkC;IAClE,MAAMI,SAASP;IAEf,2DAA2D;IAC3D,MAAMS,cAAcN,QAAQQ,GAAG,CAAC,CAACC;QAC/B,OAAO;YACLC,MAAMD,MAAME,IAAI,CAACC,MAAM,CAACF,IAAI;YAC5BC,MAAMF,MAAME,IAAI,CAACC,MAAM,CAACD,IAAI;QAC9B;IACF;IAEA,qBACE,KAAC1B;QAAImB,QAAQA;kBACX,cAAA,KAACf;YAAoBiB,aAAaA;YAAaO,SAAS;gBAAEC,MAAM;YAAU;sBACxE,cAAA,KAACpB;gBACCqB,cAAc;oBACZC,YAAY;gBACd;gBACAC,YAAY;oBACVP,MAAM;oBACNC,MAAM;wBAAEX,SAASA;wBAASkB,SAAS;4BAAEC,MAAM;wBAAG;wBAAGP,QAAQ;4BAAEF,MAAM;4BAAmBC,MAAM,CAAC;wBAAE;oBAAE;gBACjG;;;;AAKV;AAEA,OAAO,SAASU;IACd,MAAM,EACJC,MAAM,EAAEC,MAAM,OAAO,EAAEvB,UAAU,EAAE,EAAEwB,aAAa7B,YAAY,EAAE8B,UAAU,EAAE,EAAEC,iBAAiBC,SAAS,EAAE,EAC1GC,OAAO,EACR,GAAGpC;IAEJ,qBACE,MAACN;QAAM2C,KAAK;QAAGC,IAAI;YAAE7B,OAAO;QAAO;;0BACjC,MAACb;gBACC2C,OAAOR;gBACPS,UAAU,CAACC,GAAGC,QAAUN,QAAQ;wBAAEL,KAAKW;wBAAOlC;oBAAQ;gBACtDmC,SAAQ;gBACRL,IAAI;oBAAEM,cAAc;oBAAGC,aAAa;gBAAU;;kCAE9C,KAAClD;wBAAI4C,OAAM;wBAAQO,OAAM;;kCACzB,KAACnD;wBAAI4C,OAAM;wBAAQO,OAAM;;kCACzB,KAACnD;wBAAI4C,OAAM;wBAASO,OAAM;;;;0BAE5B,MAACpD;gBAAM2C,KAAK;;oBACTN,QAAQ,yBACP,MAACrC;;0CACC,KAACI;gCACCiD,YAAY;oCAAC;iCAAkB;gCAC/BP,UAAU,CAACE,QAAUN,QAAQ;wCAAEL;wCAAKvB,SAASkC;oCAAM;gCACnDlC,SAASA;gCACTwC,sBAAsB1C;;0CAExB,KAACsB;gCAAgBpB,SAASA;;;;oBAG7BuB,QAAQ,yBACP,MAACrC;;0CACC,KAACI;gCACCiD,YAAY;oCAAC;iCAAkB;gCAC/BP,UAAU,CAACE,QAAUN,QAAQ;wCAAEL;wCAAKvB,SAASkC;oCAAM;gCACnDlC,SAASA;gCACTwC,sBAAsB1C;;0CAExB,KAACC;gCAAgBC,SAASA;;;;oBAG7BuB,QAAQ,0BACP,KAACrC;kCACC,cAAA,KAACU;4BACCoC,UAAU,CAACE,QAAUN,QAAQ;oCAAEL;oCAAK,GAAGW,KAAK;gCAAC;4BAC7CH,OAAO;gCAAEP;gCAAYC;gCAASC;4BAAe;;;;;;;AAO3D"}
+{"version":3,"sources":["../../../src/explore/PrometheusExplorer.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 { QueryDefinition } from '@perses-dev/core';\nimport { Box, Stack, Tab, Tabs } from '@mui/material';\nimport { DataQueriesProvider, MultiQueryEditor, useSuggestedStepMs } from '@perses-dev/plugin-system';\nimport { useExplorerManagerContext } from '@perses-dev/explore';\nimport useResizeObserver from 'use-resize-observer';\nimport { Panel } from '@perses-dev/dashboards';\nimport { ReactElement, useState } from 'react';\nimport { DEFAULT_PROM } from '../model/prometheus-selectors';\nimport { FinderQueryParams } from './PrometheusMetricsFinder/types';\nimport { PrometheusMetricsFinder } from './PrometheusMetricsFinder';\n\ninterface MetricsExplorerQueryParams extends FinderQueryParams {\n  tab?: string;\n  queries?: QueryDefinition[];\n}\n\nconst PANEL_PREVIEW_HEIGHT = 700;\nconst FILTERED_QUERY_PLUGINS = ['PrometheusTimeSeriesQuery'];\n\nfunction TimeSeriesPanel({ queries }: { queries: QueryDefinition[] }): ReactElement {\n  const { width, ref: boxRef } = useResizeObserver();\n  const height = PANEL_PREVIEW_HEIGHT;\n\n  const suggestedStepMs = useSuggestedStepMs(width);\n\n  // map TimeSeriesQueryDefinition to Definition<UnknownSpec>\n  const definitions = queries.length\n    ? queries.map((query) => {\n        return {\n          kind: query.spec.plugin.kind,\n          spec: query.spec.plugin.spec,\n        };\n      })\n    : [];\n\n  return (\n    <Box ref={boxRef} height={height}>\n      <DataQueriesProvider definitions={definitions} options={{ suggestedStepMs, mode: 'range' }}>\n        <Panel\n          panelOptions={{\n            hideHeader: true,\n          }}\n          definition={{\n            kind: 'Panel',\n            spec: { queries: queries, display: { name: '' }, plugin: { kind: 'TimeSeriesChart', spec: {} } },\n          }}\n        />\n      </DataQueriesProvider>\n    </Box>\n  );\n}\n\nfunction MetricDataTable({ queries }: { queries: QueryDefinition[] }): ReactElement {\n  const height = PANEL_PREVIEW_HEIGHT;\n\n  // map TimeSeriesQueryDefinition to Definition<UnknownSpec>\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 (\n    <Box height={height}>\n      <DataQueriesProvider definitions={definitions} options={{ mode: 'instant' }}>\n        <Panel\n          panelOptions={{\n            hideHeader: true,\n          }}\n          definition={{\n            kind: 'Panel',\n            spec: { queries: queries, display: { name: '' }, plugin: { kind: 'TimeSeriesTable', spec: {} } },\n          }}\n        />\n      </DataQueriesProvider>\n    </Box>\n  );\n}\n\nexport function PrometheusExplorer(): ReactElement {\n  const {\n    data: { tab = 'table', queries = [], datasource = DEFAULT_PROM, filters = [], exploredMetric = undefined },\n    setData,\n  } = useExplorerManagerContext<MetricsExplorerQueryParams>();\n\n  const [queryDefinitions, setQueryDefinitions] = useState<QueryDefinition[]>(queries);\n\n  return (\n    <Stack gap={2} sx={{ width: '100%' }}>\n      <Tabs\n        value={tab}\n        onChange={(_, state) => setData({ tab: state, queries })}\n        variant=\"scrollable\"\n        sx={{ borderBottom: 1, borderColor: 'divider' }}\n      >\n        <Tab value=\"table\" label=\"Table\" />\n        <Tab value=\"graph\" label=\"Graph\" />\n        <Tab value=\"finder\" label=\"Finder\" />\n      </Tabs>\n      <Stack gap={1}>\n        {tab === 'table' && (\n          <Stack>\n            <MultiQueryEditor\n              queryTypes={['TimeSeriesQuery']}\n              onChange={(state) => setQueryDefinitions(state)}\n              queries={queryDefinitions}\n              onQueryRun={() => setData({ tab, queries: queryDefinitions })}\n              filteredQueryPlugins={FILTERED_QUERY_PLUGINS}\n            />\n            <MetricDataTable queries={queries} />\n          </Stack>\n        )}\n        {tab === 'graph' && (\n          <Stack>\n            <MultiQueryEditor\n              queryTypes={['TimeSeriesQuery']}\n              onChange={(state) => setQueryDefinitions(state)}\n              queries={queryDefinitions}\n              onQueryRun={() => setData({ tab, queries: queryDefinitions })}\n              filteredQueryPlugins={FILTERED_QUERY_PLUGINS}\n            />\n            <TimeSeriesPanel queries={queries} />\n          </Stack>\n        )}\n        {tab === 'finder' && (\n          <Stack>\n            <PrometheusMetricsFinder\n              onChange={(state) => setData({ tab, ...state })}\n              value={{ datasource, filters, exploredMetric }}\n            />\n          </Stack>\n        )}\n      </Stack>\n    </Stack>\n  );\n}\n"],"names":["Box","Stack","Tab","Tabs","DataQueriesProvider","MultiQueryEditor","useSuggestedStepMs","useExplorerManagerContext","useResizeObserver","Panel","useState","DEFAULT_PROM","PrometheusMetricsFinder","PANEL_PREVIEW_HEIGHT","FILTERED_QUERY_PLUGINS","TimeSeriesPanel","queries","width","ref","boxRef","height","suggestedStepMs","definitions","length","map","query","kind","spec","plugin","options","mode","panelOptions","hideHeader","definition","display","name","MetricDataTable","PrometheusExplorer","data","tab","datasource","filters","exploredMetric","undefined","setData","queryDefinitions","setQueryDefinitions","gap","sx","value","onChange","_","state","variant","borderBottom","borderColor","label","queryTypes","onQueryRun","filteredQueryPlugins"],"mappings":"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"}

package/lib/explore/PrometheusMetricsFinder/PrometheusMetricsFinder.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // 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.
@@ -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, 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';

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

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

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 // 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.
@@ -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 } from "react/jsx-runtime";
 import { Chip } from '@mui/material';
 export function MetricChip({ label, ...props }) {
     if (label === 'gauge') {

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

@@ -1 +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"}
+{"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.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // 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.
@@ -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, 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';

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

@@ -1 +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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"}
+{"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.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // 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.
@@ -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 { cloneElement, forwardRef, useMemo, useRef, useState } from 'react';
 import { Autocomplete, CircularProgress, IconButton, InputAdornment, MenuItem, Select, Stack, TextField } from '@mui/material';
 import DeleteIcon from 'mdi-material-ui/Delete';

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 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport {\n  cloneElement,\n  forwardRef,\n  HTMLAttributes,\n  ReactElement,\n  SyntheticEvent,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  Autocomplete,\n  CircularProgress,\n  IconButton,\n  InputAdornment,\n  MenuItem,\n  Select,\n  SelectChangeEvent,\n  Stack,\n  TextField,\n} from '@mui/material';\nimport DeleteIcon from 'mdi-material-ui/Delete';\nimport { DatasourceSelector } from '@perses-dev/core';\nimport { Virtuoso } from 'react-virtuoso';\nimport { LabelFilter, Operator } from '../types';\nimport { useLabels, useLabelValues } from '../utils';\n\nexport interface LabelFilterInputProps {\n  datasource: DatasourceSelector;\n  value: LabelFilter;\n  filters: LabelFilter[];\n  onChange: (next: LabelFilter) => void;\n  onDelete: () => void;\n}\n\nexport function LabelFilterInput({\n  datasource,\n  value,\n  filters,\n  onChange,\n  onDelete,\n}: LabelFilterInputProps): ReactElement {\n  const filtersWithoutCurrent = useMemo(\n    () => filters.filter((filter) => filter.label !== value.label),\n    [filters, value.label]\n  );\n\n  const { data: labelOptions, isLoading: isLabelOptionsLoading } = useLabels(filtersWithoutCurrent, datasource);\n  const { data: labelValuesOptions, isLoading: isLabelValuesOptionsLoading } = useLabelValues(\n    value.label,\n    filtersWithoutCurrent,\n    datasource\n  );\n\n  return (\n    <RawFilterInput\n      value={value}\n      labelOptions={labelOptions?.data ?? []}\n      labelValuesOptions={labelValuesOptions?.data ?? []}\n      isLabelOptionsLoading={isLabelOptionsLoading}\n      isLabelValuesOptionsLoading={isLabelValuesOptionsLoading}\n      onChange={onChange}\n      onDelete={onDelete}\n    />\n  );\n}\n\n// https://stackoverflow.com/questions/69060738/material-ui-autocomplete-virtualization-w-react-virtuoso\nexport const ListboxComponent = forwardRef<HTMLUListElement, HTMLAttributes<HTMLUListElement>>(\n  ({ children, ...rest }, ref) => {\n    const data = children as ReactElement[];\n    const localRef = useRef<string>('500px');\n\n    const [height, setHeight] = useState(0);\n\n    return (\n      <ul\n        style={{ overflow: 'hidden', padding: '0', height: height ? `min(40vh, ${height}px)` : '40vh' }}\n        ref={(reference) => {\n          const maxHeight = reference ? getComputedStyle(reference).maxHeight : null;\n          if (maxHeight && maxHeight !== localRef.current) {\n            localRef.current = maxHeight;\n          }\n\n          if (typeof ref === 'function') {\n            ref(reference);\n          }\n        }}\n        {...rest}\n      >\n        <Virtuoso\n          style={{ height: localRef.current, padding: '10px 0' }}\n          data={data}\n          totalListHeightChanged={setHeight}\n          itemContent={(index, child) => {\n            return cloneElement(child, { index, title: child.props.children });\n          }}\n        />\n      </ul>\n    );\n  }\n);\nListboxComponent.displayName = 'ListboxComponent';\n\nexport interface RawFilterInputProps {\n  value: LabelFilter;\n  labelOptions?: string[];\n  labelValuesOptions?: string[];\n  isLabelOptionsLoading?: boolean;\n  isLabelValuesOptionsLoading?: boolean;\n  onChange: (next: LabelFilter) => void;\n  onDelete: () => void;\n}\n\nexport function RawFilterInput({\n  value,\n  labelOptions,\n  labelValuesOptions,\n  isLabelOptionsLoading,\n  isLabelValuesOptionsLoading,\n  onChange,\n  onDelete,\n}: RawFilterInputProps): ReactElement {\n  return (\n    <Stack gap={0} flexDirection=\"row\" alignItems=\"center\">\n      <Autocomplete\n        freeSolo\n        disableClearable\n        options={labelOptions ?? []}\n        value={value.label}\n        sx={{ minWidth: 200 }}\n        ListboxComponent={ListboxComponent}\n        loading={isLabelOptionsLoading}\n        renderInput={(params) => {\n          return (\n            <TextField\n              {...params}\n              label=\"Label Name\"\n              variant=\"outlined\"\n              fullWidth\n              size=\"medium\"\n              sx={{\n                '& .MuiOutlinedInput-root': {\n                  borderTopRightRadius: 0,\n                  borderBottomRightRadius: 0,\n                },\n              }}\n            />\n          );\n        }}\n        onInputChange={(_: SyntheticEvent, newValue: string | null) => {\n          onChange({ label: newValue ?? '', labelValues: value.labelValues, operator: value.operator });\n        }}\n      />\n      <Select\n        value={value.operator}\n        variant=\"outlined\"\n        onChange={(event: SelectChangeEvent) => {\n          if (value.operator === '=' || value.operator === '!=') {\n            // switch from single to multiple\n            return onChange({ label: value.label, labelValues: [], operator: event.target.value as Operator });\n          }\n\n          if (value.operator === '=~' || value.operator === '!~') {\n            // switch from multiple to single, keep the first value if exists\n            return onChange({\n              label: value.label,\n              labelValues: value.labelValues.slice(0, 1),\n              operator: event.target.value as Operator,\n            });\n          }\n\n          onChange({ label: value.label, labelValues: value.labelValues, operator: event.target.value as Operator });\n        }}\n        size=\"medium\"\n        sx={{ borderTopLeftRadius: 0, borderBottomLeftRadius: 0, borderTopRightRadius: 0, borderBottomRightRadius: 0 }}\n      >\n        <MenuItem value=\"=\">=</MenuItem>\n        <MenuItem value=\"!=\">!=</MenuItem>\n        <MenuItem value=\"=~\">=~</MenuItem>\n        <MenuItem value=\"!~\">!~</MenuItem>\n      </Select>\n      <Autocomplete\n        freeSolo\n        multiple={value.operator === '=~' || value.operator === '!~'}\n        limitTags={1}\n        disableClearable\n        options={labelValuesOptions ?? []}\n        value={value.labelValues}\n        ListboxComponent={ListboxComponent}\n        sx={{ minWidth: 200 }}\n        loading={isLabelValuesOptionsLoading}\n        renderInput={(params) => {\n          return (\n            <TextField\n              {...params}\n              label={value.operator === '=~' || value.operator === '!~' ? 'Label Values' : 'Label Value'}\n              variant=\"outlined\"\n              fullWidth\n              size=\"medium\"\n              sx={{\n                '& .MuiOutlinedInput-root': {\n                  borderTopLeftRadius: 0,\n                  borderBottomLeftRadius: 0,\n                },\n              }}\n              slotProps={{\n                input: {\n                  ...params.InputProps,\n                  style: {\n                    maxHeight: '53.13px', // TODO: the input height is larger when a value is selected in multiple mode. Probably a bug fixed in newer version, could not replicate on their demo\n                  },\n                  endAdornment: (\n                    <InputAdornment position=\"end\">\n                      {isLabelValuesOptionsLoading ? <CircularProgress color=\"inherit\" size={20} /> : null}\n                      <IconButton aria-label=\"delete label filter\" onClick={() => onDelete()} edge=\"end\">\n                        <DeleteIcon />\n                      </IconButton>\n                    </InputAdornment>\n                  ),\n                },\n              }}\n            />\n          );\n        }}\n        onInputChange={(_, newValue) => {\n          if (value.operator === '=' || value.operator === '!=') {\n            onChange({ label: value.label, labelValues: [newValue], operator: value.operator });\n          }\n        }}\n        onChange={(_, newValue) => {\n          if (Array.isArray(newValue)) {\n            onChange({ label: value.label, labelValues: newValue, operator: value.operator });\n          }\n        }}\n      />\n    </Stack>\n  );\n}\n"],"names":["cloneElement","forwardRef","useMemo","useRef","useState","Autocomplete","CircularProgress","IconButton","InputAdornment","MenuItem","Select","Stack","TextField","DeleteIcon","Virtuoso","useLabels","useLabelValues","LabelFilterInput","datasource","value","filters","onChange","onDelete","filtersWithoutCurrent","filter","label","data","labelOptions","isLoading","isLabelOptionsLoading","labelValuesOptions","isLabelValuesOptionsLoading","RawFilterInput","ListboxComponent","children","rest","ref","localRef","height","setHeight","ul","style","overflow","padding","reference","maxHeight","getComputedStyle","current","totalListHeightChanged","itemContent","index","child","title","props","displayName","gap","flexDirection","alignItems","freeSolo","disableClearable","options","sx","minWidth","loading","renderInput","params","variant","fullWidth","size","borderTopRightRadius","borderBottomRightRadius","onInputChange","_","newValue","labelValues","operator","event","target","slice","borderTopLeftRadius","borderBottomLeftRadius","multiple","limitTags","slotProps","input","InputProps","endAdornment","position","color","aria-label","onClick","edge","Array","isArray"],"mappings":"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"}

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // 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.
@@ -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 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"}

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // 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.
@@ -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 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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"}

package/lib/model/prometheus-client.d.ts

@@ -19,6 +19,7 @@ export interface QueryOptions {
     datasourceUrl: string;
     headers?: RequestHeaders;
     abortSignal?: AbortSignal;
+    queryParams?: Record<string, string>;
 }
 /**
  * Calls the `/-/healthy` endpoint to check if the datasource is healthy.

package/lib/model/prometheus-client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prometheus-client.d.ts","sourceRoot":"","sources":["../../../src/model/prometheus-client.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"prometheus-client.d.ts","sourceRoot":"","sources":["../../../src/model/prometheus-client.ts"],"names":[],"mappings":"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"}

package/lib/model/prometheus-client.js

@@ -11,11 +11,25 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { fetch, fetchJson } from '@perses-dev/core';
+/**
+ * Builds a query string from datasource-level query parameters.
+ * Optionally merges with existing URLSearchParams.
+ * Returns empty string if no parameters, otherwise returns query string with leading '?'.
+ */ function buildQueryString(queryParams, initialParams) {
+    const urlParams = initialParams || new URLSearchParams();
+    if (queryParams) {
+        Object.entries(queryParams).forEach(([key, value])=>{
+            urlParams.set(key, value);
+        });
+    }
+    const queryString = urlParams.toString();
+    return queryString !== '' ? `?${queryString}` : '';
+}
 /**
  * Calls the `/-/healthy` endpoint to check if the datasource is healthy.
  */ export function healthCheck(queryOptions) {
     return async ()=>{
-        const url = `${queryOptions.datasourceUrl}/-/healthy`;
+        const url = `${queryOptions.datasourceUrl}/-/healthy${buildQueryString(queryOptions.queryParams)}`;
         try {
             const resp = await fetch(url, {
                 headers: queryOptions.headers,
@@ -77,20 +91,16 @@ import { fetch, fetchJson } from '@perses-dev/core';
     return fetchWithPost(apiURI, params, queryOptions);
 }
 function fetchWithGet(apiURI, params, queryOptions) {
-    const { datasourceUrl, headers } = queryOptions;
-    let url = `${datasourceUrl}${apiURI}`;
-    const urlParams = createSearchParams(params).toString();
-    if (urlParams !== '') {
-        url += `?${urlParams}`;
-    }
+    const { datasourceUrl, headers, queryParams } = queryOptions;
+    const url = `${datasourceUrl}${apiURI}${buildQueryString(queryParams, createSearchParams(params))}`;
     return fetchJson(url, {
         method: 'GET',
         headers
     });
 }
 function fetchWithPost(apiURI, params, queryOptions) {
-    const { datasourceUrl, headers, abortSignal: signal } = queryOptions;
-    const url = `${datasourceUrl}${apiURI}`;
+    const { datasourceUrl, headers, abortSignal: signal, queryParams } = queryOptions;
+    const url = `${datasourceUrl}${apiURI}${buildQueryString(queryParams)}`;
     const init = {
         method: 'POST',
         headers: {