@perses-dev/explore 0.49.0 → 0.50.0-rc.1

package/dist/components/PrometheusMetricsFinder/filter/FinderFilters.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PrometheusMetricsFinder/filter/FinderFilters.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Button, FormControl, InputLabel, Stack, StackProps } from '@mui/material';\nimport { DatasourceSelector } from '@perses-dev/core';\nimport { DatasourceSelect } from '@perses-dev/plugin-system';\nimport { PROM_DATASOURCE_KIND } from '@perses-dev/prometheus-plugin';\nimport PlusIcon from 'mdi-material-ui/Plus';\nimport * as React from 'react';\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) {\n  function handleDatasourceChange(next: DatasourceSelector) {\n    onDatasourceChange(next);\n  }\n\n  return (\n    <Stack {...props} direction=\"row\" alignItems=\"center\" flexWrap=\"wrap\" gap={1} sx={{ width: '100%' }}>\n      <FormControl>\n        <InputLabel>Prometheus Datasource</InputLabel>\n        <DatasourceSelect\n          datasourcePluginKind={PROM_DATASOURCE_KIND}\n          value={datasource}\n          onChange={handleDatasourceChange}\n          label=\"Prometheus Datasource\"\n        />\n      </FormControl>\n      {filters.map((filter, index) => (\n        <LabelFilterInput\n          key={index}\n          datasource={datasource}\n          filters={filteredFilters}\n          value={filter}\n          onChange={(next) => {\n            const nextFilters = [...filters];\n            nextFilters[index] = next;\n            onFiltersChange(nextFilters);\n          }}\n          onDelete={() => {\n            const nextFilters = [...filters];\n            nextFilters.splice(index, 1);\n            onFiltersChange(nextFilters);\n          }}\n        />\n      ))}\n      <Button\n        startIcon={<PlusIcon />}\n        aria-label=\"add filter\"\n        onClick={() => {\n          onFiltersChange([...filters, { label: '', labelValues: [], operator: '=~' }]);\n        }}\n      >\n        Add filter\n      </Button>\n    </Stack>\n  );\n}\n"],"names":["Button","FormControl","InputLabel","Stack","DatasourceSelect","PROM_DATASOURCE_KIND","PlusIcon","React","LabelFilterInput","FinderFilters","datasource","filters","filteredFilters","onDatasourceChange","onFiltersChange","props","handleDatasourceChange","next","direction","alignItems","flexWrap","gap","sx","width","datasourcePluginKind","value","onChange","label","map","filter","index","nextFilters","onDelete","splice","startIcon","aria-label","onClick","labelValues","operator"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,MAAM,EAAEC,WAAW,EAAEC,UAAU,EAAEC,KAAK,QAAoB,gBAAgB;AAEnF,SAASC,gBAAgB,QAAQ,4BAA4B;AAC7D,SAASC,oBAAoB,QAAQ,gCAAgC;AACrE,OAAOC,cAAc,uBAAuB;AAC5C,YAAYC,WAAW,QAAQ;AAE/B,SAASC,gBAAgB,QAAQ,iBAAiB;AAUlD,OAAO,SAASC,cAAc,EAC5BC,UAAU,EACVC,OAAO,EACPC,eAAe,EACfC,kBAAkB,EAClBC,eAAe,EACf,GAAGC,OACkB;IACrB,SAASC,uBAAuBC,IAAwB;QACtDJ,mBAAmBI;IACrB;IAEA,qBACE,MAACd;QAAO,GAAGY,KAAK;QAAEG,WAAU;QAAMC,YAAW;QAASC,UAAS;QAAOC,KAAK;QAAGC,IAAI;YAAEC,OAAO;QAAO;;0BAChG,MAACtB;;kCACC,KAACC;kCAAW;;kCACZ,KAACE;wBACCoB,sBAAsBnB;wBACtBoB,OAAOf;wBACPgB,UAAUV;wBACVW,OAAM;;;;YAGThB,QAAQiB,GAAG,CAAC,CAACC,QAAQC,sBACpB,KAACtB;oBAECE,YAAYA;oBACZC,SAASC;oBACTa,OAAOI;oBACPH,UAAU,CAACT;wBACT,MAAMc,cAAc;+BAAIpB;yBAAQ;wBAChCoB,WAAW,CAACD,MAAM,GAAGb;wBACrBH,gBAAgBiB;oBAClB;oBACAC,UAAU;wBACR,MAAMD,cAAc;+BAAIpB;yBAAQ;wBAChCoB,YAAYE,MAAM,CAACH,OAAO;wBAC1BhB,gBAAgBiB;oBAClB;mBAbKD;0BAgBT,KAAC9B;gBACCkC,yBAAW,KAAC5B;gBACZ6B,cAAW;gBACXC,SAAS;oBACPtB,gBAAgB;2BAAIH;wBAAS;4BAAEgB,OAAO;4BAAIU,aAAa,EAAE;4BAAEC,UAAU;wBAAK;qBAAE;gBAC9E;0BACD;;;;AAKP"}
+{"version":3,"sources":["../../../../src/components/PrometheusMetricsFinder/filter/FinderFilters.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Button, FormControl, InputLabel, Stack, StackProps } from '@mui/material';\nimport { DatasourceSelector } from '@perses-dev/core';\nimport { DatasourceSelect } from '@perses-dev/plugin-system';\nimport { PROM_DATASOURCE_KIND } from '@perses-dev/prometheus-plugin';\nimport PlusIcon from 'mdi-material-ui/Plus';\nimport * as React from 'react';\nimport { ReactElement } from 'react';\nimport { LabelFilter } from '../types';\nimport { LabelFilterInput } from './FilterInputs';\n\nexport interface ExplorerFiltersProps extends StackProps {\n  datasource: DatasourceSelector;\n  filters: LabelFilter[];\n  filteredFilters: LabelFilter[];\n  onDatasourceChange: (next: DatasourceSelector) => void;\n  onFiltersChange: (next: LabelFilter[]) => void;\n}\n\nexport function FinderFilters({\n  datasource,\n  filters,\n  filteredFilters,\n  onDatasourceChange,\n  onFiltersChange,\n  ...props\n}: ExplorerFiltersProps): ReactElement {\n  function handleDatasourceChange(next: DatasourceSelector): void {\n    onDatasourceChange(next);\n  }\n\n  return (\n    <Stack {...props} direction=\"row\" alignItems=\"center\" flexWrap=\"wrap\" gap={1} sx={{ width: '100%' }}>\n      <FormControl>\n        <InputLabel>Prometheus Datasource</InputLabel>\n        <DatasourceSelect\n          datasourcePluginKind={PROM_DATASOURCE_KIND}\n          value={datasource}\n          onChange={handleDatasourceChange}\n          label=\"Prometheus Datasource\"\n        />\n      </FormControl>\n      {filters.map((filter, index) => (\n        <LabelFilterInput\n          key={index}\n          datasource={datasource}\n          filters={filteredFilters}\n          value={filter}\n          onChange={(next) => {\n            const nextFilters = [...filters];\n            nextFilters[index] = next;\n            onFiltersChange(nextFilters);\n          }}\n          onDelete={() => {\n            const nextFilters = [...filters];\n            nextFilters.splice(index, 1);\n            onFiltersChange(nextFilters);\n          }}\n        />\n      ))}\n      <Button\n        startIcon={<PlusIcon />}\n        aria-label=\"add filter\"\n        onClick={() => {\n          onFiltersChange([...filters, { label: '', labelValues: [], operator: '=~' }]);\n        }}\n      >\n        Add filter\n      </Button>\n    </Stack>\n  );\n}\n"],"names":["Button","FormControl","InputLabel","Stack","DatasourceSelect","PROM_DATASOURCE_KIND","PlusIcon","React","LabelFilterInput","FinderFilters","datasource","filters","filteredFilters","onDatasourceChange","onFiltersChange","props","handleDatasourceChange","next","direction","alignItems","flexWrap","gap","sx","width","datasourcePluginKind","value","onChange","label","map","filter","index","nextFilters","onDelete","splice","startIcon","aria-label","onClick","labelValues","operator"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,MAAM,EAAEC,WAAW,EAAEC,UAAU,EAAEC,KAAK,QAAoB,gBAAgB;AAEnF,SAASC,gBAAgB,QAAQ,4BAA4B;AAC7D,SAASC,oBAAoB,QAAQ,gCAAgC;AACrE,OAAOC,cAAc,uBAAuB;AAC5C,YAAYC,WAAW,QAAQ;AAG/B,SAASC,gBAAgB,QAAQ,iBAAiB;AAUlD,OAAO,SAASC,cAAc,EAC5BC,UAAU,EACVC,OAAO,EACPC,eAAe,EACfC,kBAAkB,EAClBC,eAAe,EACf,GAAGC,OACkB;IACrB,SAASC,uBAAuBC,IAAwB;QACtDJ,mBAAmBI;IACrB;IAEA,qBACE,MAACd;QAAO,GAAGY,KAAK;QAAEG,WAAU;QAAMC,YAAW;QAASC,UAAS;QAAOC,KAAK;QAAGC,IAAI;YAAEC,OAAO;QAAO;;0BAChG,MAACtB;;kCACC,KAACC;kCAAW;;kCACZ,KAACE;wBACCoB,sBAAsBnB;wBACtBoB,OAAOf;wBACPgB,UAAUV;wBACVW,OAAM;;;;YAGThB,QAAQiB,GAAG,CAAC,CAACC,QAAQC,sBACpB,KAACtB;oBAECE,YAAYA;oBACZC,SAASC;oBACTa,OAAOI;oBACPH,UAAU,CAACT;wBACT,MAAMc,cAAc;+BAAIpB;yBAAQ;wBAChCoB,WAAW,CAACD,MAAM,GAAGb;wBACrBH,gBAAgBiB;oBAClB;oBACAC,UAAU;wBACR,MAAMD,cAAc;+BAAIpB;yBAAQ;wBAChCoB,YAAYE,MAAM,CAACH,OAAO;wBAC1BhB,gBAAgBiB;oBAClB;mBAbKD;0BAgBT,KAAC9B;gBACCkC,yBAAW,KAAC5B;gBACZ6B,cAAW;gBACXC,SAAS;oBACPtB,gBAAgB;2BAAIH;wBAAS;4BAAEgB,OAAO;4BAAIU,aAAa,EAAE;4BAAEC,UAAU;wBAAK;qBAAE;gBAC9E;0BACD;;;;AAKP"}

package/dist/components/PrometheusMetricsFinder/overview/MetricOverview.d.ts

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

package/dist/components/PrometheusMetricsFinder/overview/MetricOverview.d.ts.map

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

package/dist/components/PrometheusMetricsFinder/overview/MetricOverview.js

@@ -109,7 +109,7 @@ export function OverviewPanel({ metricName, datasource, filters, type, isLoading
         ]
     });
 }
-export function MetricOverview({ metricName, datasource, filters, isMetadataEnabled, onExplore, onFiltersChange, ...props }) {
+export function MetricOverview({ metricName, datasource, filters, isMetadataEnabled, isPanelEnabled, onExplore, onFiltersChange, ...props }) {
     const [tab, setTab] = useState(0);
     const { metadata, isLoading: isMetadataLoading } = useMetricMetadata(metricName, datasource);
     const filtersWithMetricName = useMemo(()=>{
@@ -144,7 +144,7 @@ export function MetricOverview({ metricName, datasource, filters, isMetadataEnab
         },
         ...props,
         children: [
-            /*#__PURE__*/ _jsx(OverviewPanel, {
+            isPanelEnabled && /*#__PURE__*/ _jsx(OverviewPanel, {
                 metricName: metricName,
                 filters: filters,
                 datasource: datasource,
@@ -173,7 +173,7 @@ export function MetricOverview({ metricName, datasource, filters, isMetadataEnab
                         }),
                         iconPosition: "end"
                     }),
-                    /*#__PURE__*/ _jsx(Tab, {
+                    filters.length > 0 && /*#__PURE__*/ _jsx(Tab, {
                         label: "Similar metrics",
                         icon: /*#__PURE__*/ _jsx(Tooltip, {
                             title: "All metrics matching current filters",

package/dist/components/PrometheusMetricsFinder/overview/MetricOverview.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/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 { 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({ metricName, datasource, filters, type, isLoading, ...props }: OverviewPanelProps) {\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  onExplore?: (metricName: string) => void;\n  onFiltersChange: (filters: LabelFilter[]) => void;\n}\n\nexport function MetricOverview({\n  metricName,\n  datasource,\n  filters,\n  isMetadataEnabled,\n  onExplore,\n  onFiltersChange,\n  ...props\n}: MetricOverviewProps) {\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) {\n    onFiltersChange([...filters, filter]);\n  }\n\n  function handleExplore(metricName: string, tab?: number) {\n    onExplore?.(metricName);\n    if (tab !== undefined) {\n      setTab(tab);\n    }\n  }\n\n  return (\n    <Stack sx={{ width: '100%' }} {...props}>\n      <OverviewPanel\n        metricName={metricName}\n        filters={filters}\n        datasource={datasource}\n        type={metadata?.type}\n        height=\"250px\"\n        isLoading={isMetadataEnabled && isMetadataLoading}\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        <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      </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","onExplore","onFiltersChange","tab","setTab","metadata","isMetadataLoading","filtersWithMetricName","result","filter","push","labelValues","operator","handleFilterAdd","handleExplore","sx","value","state","borderBottom","borderColor","icon","title","placement","iconPosition","gap","onFilterAdd"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/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/dist/components/PrometheusMetricsFinder/overview/tabs/JobTab.d.ts

@@ -1,5 +1,6 @@
 import { DatasourceSelector } from '@perses-dev/core';
 import { StackProps } from '@mui/material';
+import { ReactElement } from 'react';
 import { LabelFilter } from '../../types';
 export interface JobList extends StackProps {
     job: string;
@@ -8,7 +9,7 @@ export interface JobList extends StackProps {
     isMetadataEnabled?: boolean;
     onExplore: (metricName: string) => void;
 }
-export declare function JobList({ job, filters, datasource, isMetadataEnabled, onExplore, ...props }: JobList): import("react/jsx-runtime").JSX.Element;
+export declare function JobList({ job, filters, datasource, isMetadataEnabled, onExplore, ...props }: JobList): ReactElement;
 export interface JobSection extends StackProps {
     jobs: string[];
     filters: LabelFilter[];
@@ -16,12 +17,12 @@ export interface JobSection extends StackProps {
     isMetadataEnabled?: boolean;
     onExplore: (metricName: string) => void;
 }
-export declare function JobSection({ jobs, filters, datasource, isMetadataEnabled, onExplore, ...props }: JobSection): import("react/jsx-runtime").JSX.Element;
+export declare function JobSection({ jobs, filters, datasource, isMetadataEnabled, onExplore, ...props }: JobSection): ReactElement;
 export interface JobTabProps extends StackProps {
     filters: LabelFilter[];
     datasource: DatasourceSelector;
     isMetadataEnabled?: boolean;
     onExplore: (metricName: string) => void;
 }
-export declare function JobTab({ filters, datasource, isMetadataEnabled, onExplore, ...props }: JobTabProps): import("react/jsx-runtime").JSX.Element;
+export declare function JobTab({ filters, datasource, isMetadataEnabled, onExplore, ...props }: JobTabProps): ReactElement;
 //# sourceMappingURL=JobTab.d.ts.map

package/dist/components/PrometheusMetricsFinder/overview/tabs/JobTab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"JobTab.d.ts","sourceRoot":"","sources":["../../../../../src/components/PrometheusMetricsFinder/overview/tabs/JobTab.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAOL,UAAU,EAEX,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG1C,MAAM,WAAW,OAAQ,SAAQ,UAAU;IACzC,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,UAAU,EAAE,kBAAkB,CAAC;IAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,wBAAgB,OAAO,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,OAAO,2CA2BpG;AAED,MAAM,WAAW,UAAW,SAAQ,UAAU;IAC5C,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,UAAU,EAAE,kBAAkB,CAAC;IAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,2CAuC3G;AAED,MAAM,WAAW,WAAY,SAAQ,UAAU;IAC7C,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,UAAU,EAAE,kBAAkB,CAAC;IAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,wBAAgB,MAAM,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,2CA6BlG"}
+{"version":3,"file":"JobTab.d.ts","sourceRoot":"","sources":["../../../../../src/components/PrometheusMetricsFinder/overview/tabs/JobTab.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAOL,UAAU,EAEX,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAC;AAExD,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG1C,MAAM,WAAW,OAAQ,SAAQ,UAAU;IACzC,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,UAAU,EAAE,kBAAkB,CAAC;IAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,wBAAgB,OAAO,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,OAAO,GAAG,YAAY,CA2BnH;AAED,MAAM,WAAW,UAAW,SAAQ,UAAU;IAC5C,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,UAAU,EAAE,kBAAkB,CAAC;IAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,OAAO,EACP,UAAU,EACV,iBAAiB,EACjB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,UAAU,GAAG,YAAY,CAuC3B;AAED,MAAM,WAAW,WAAY,SAAQ,UAAU;IAC7C,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,UAAU,EAAE,kBAAkB,CAAC;IAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,wBAAgB,MAAM,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,GAAG,YAAY,CA6BjH"}

package/dist/components/PrometheusMetricsFinder/overview/tabs/JobTab.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/PrometheusMetricsFinder/overview/tabs/JobTab.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { DatasourceSelector } from '@perses-dev/core';\nimport {\n  CircularProgress,\n  FormControl,\n  InputLabel,\n  MenuItem,\n  Select,\n  Stack,\n  StackProps,\n  Typography,\n} from '@mui/material';\nimport { useMemo, useState } from 'react';\nimport { MetricList } from '../../display/list/MetricList';\nimport { LabelFilter } from '../../types';\nimport { useLabelValues } from '../../utils';\n\nexport interface JobList extends StackProps {\n  job: string;\n  filters: LabelFilter[];\n  datasource: DatasourceSelector;\n  isMetadataEnabled?: boolean;\n  onExplore: (metricName: string) => void;\n}\n\nexport function JobList({ job, filters, datasource, isMetadataEnabled, onExplore, ...props }: JobList) {\n  const filtersWithJobWithoutName: LabelFilter[] = useMemo(() => {\n    const result = filters.filter((filter) => filter.label !== '__name__' && filter.label !== 'job');\n    result.push({ label: 'job', labelValues: [job], operator: '=' });\n    return result;\n  }, [filters, job]);\n\n  const { data, isLoading } = useLabelValues('__name__', filtersWithJobWithoutName, datasource);\n\n  if (isLoading) {\n    return (\n      <Stack width=\"100%\" sx={{ alignItems: 'center', justifyContent: 'center' }}>\n        <CircularProgress />\n      </Stack>\n    );\n  }\n\n  return (\n    <MetricList\n      metricNames={data?.data ?? []}\n      datasource={datasource}\n      filters={filtersWithJobWithoutName}\n      isMetadataEnabled={isMetadataEnabled}\n      onExplore={onExplore}\n      {...props}\n    />\n  );\n}\n\nexport interface JobSection extends StackProps {\n  jobs: string[];\n  filters: LabelFilter[];\n  datasource: DatasourceSelector;\n  isMetadataEnabled?: boolean;\n  onExplore: (metricName: string) => void;\n}\n\nexport function JobSection({ jobs, filters, datasource, isMetadataEnabled, onExplore, ...props }: JobSection) {\n  const [currentJob, setCurrentJob] = useState<string>(jobs[0] ?? '');\n\n  if (!currentJob) {\n    return <Typography>Something went wrong...</Typography>;\n  }\n\n  return (\n    <Stack gap={2} {...props}>\n      {jobs.length > 2 && (\n        <FormControl fullWidth>\n          <InputLabel id=\"job-select-label\">Job</InputLabel>\n          <Select\n            labelId=\"job-select-label\"\n            id=\"job-select\"\n            label=\"Job\"\n            variant=\"outlined\"\n            value={currentJob}\n            onChange={(e) => setCurrentJob(e.target.value)}\n          >\n            {jobs.map((job) => (\n              <MenuItem key={job} value={job}>\n                {job}\n              </MenuItem>\n            ))}\n          </Select>\n        </FormControl>\n      )}\n      {currentJob && (\n        <JobList\n          job={currentJob}\n          filters={filters}\n          datasource={datasource}\n          isMetadataEnabled={isMetadataEnabled}\n          onExplore={onExplore}\n        />\n      )}\n    </Stack>\n  );\n}\n\nexport interface JobTabProps extends StackProps {\n  filters: LabelFilter[];\n  datasource: DatasourceSelector;\n  isMetadataEnabled?: boolean;\n  onExplore: (metricName: string) => void;\n}\n\nexport function JobTab({ filters, datasource, isMetadataEnabled, onExplore, ...props }: JobTabProps) {\n  const { data: jobData, isLoading: isJobLoading } = useLabelValues('job', filters, datasource);\n\n  if (isJobLoading) {\n    return (\n      <Stack width=\"100%\" sx={{ alignItems: 'center', justifyContent: 'center' }}>\n        <CircularProgress />\n      </Stack>\n    );\n  }\n\n  if (!jobData?.data || jobData.data.length === 0) {\n    return (\n      <Stack {...props}>\n        <Typography>No jobs found</Typography>\n      </Stack>\n    );\n  }\n\n  return (\n    <JobSection\n      jobs={jobData.data}\n      filters={filters}\n      datasource={datasource}\n      isMetadataEnabled={isMetadataEnabled}\n      onExplore={onExplore}\n      {...props}\n    />\n  );\n}\n"],"names":["CircularProgress","FormControl","InputLabel","MenuItem","Select","Stack","Typography","useMemo","useState","MetricList","useLabelValues","JobList","job","filters","datasource","isMetadataEnabled","onExplore","props","filtersWithJobWithoutName","result","filter","label","push","labelValues","operator","data","isLoading","width","sx","alignItems","justifyContent","metricNames","JobSection","jobs","currentJob","setCurrentJob","gap","length","fullWidth","id","labelId","variant","value","onChange","e","target","map","JobTab","jobData","isJobLoading"],"mappings":"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"}
+{"version":3,"sources":["../../../../../src/components/PrometheusMetricsFinder/overview/tabs/JobTab.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { DatasourceSelector } from '@perses-dev/core';\nimport {\n  CircularProgress,\n  FormControl,\n  InputLabel,\n  MenuItem,\n  Select,\n  Stack,\n  StackProps,\n  Typography,\n} from '@mui/material';\nimport { ReactElement, useMemo, useState } from 'react';\nimport { MetricList } from '../../display/list/MetricList';\nimport { LabelFilter } from '../../types';\nimport { useLabelValues } from '../../utils';\n\nexport interface JobList extends StackProps {\n  job: string;\n  filters: LabelFilter[];\n  datasource: DatasourceSelector;\n  isMetadataEnabled?: boolean;\n  onExplore: (metricName: string) => void;\n}\n\nexport function JobList({ job, filters, datasource, isMetadataEnabled, onExplore, ...props }: JobList): ReactElement {\n  const filtersWithJobWithoutName: LabelFilter[] = useMemo(() => {\n    const result = filters.filter((filter) => filter.label !== '__name__' && filter.label !== 'job');\n    result.push({ label: 'job', labelValues: [job], operator: '=' });\n    return result;\n  }, [filters, job]);\n\n  const { data, isLoading } = useLabelValues('__name__', filtersWithJobWithoutName, datasource);\n\n  if (isLoading) {\n    return (\n      <Stack width=\"100%\" sx={{ alignItems: 'center', justifyContent: 'center' }}>\n        <CircularProgress />\n      </Stack>\n    );\n  }\n\n  return (\n    <MetricList\n      metricNames={data?.data ?? []}\n      datasource={datasource}\n      filters={filtersWithJobWithoutName}\n      isMetadataEnabled={isMetadataEnabled}\n      onExplore={onExplore}\n      {...props}\n    />\n  );\n}\n\nexport interface JobSection extends StackProps {\n  jobs: string[];\n  filters: LabelFilter[];\n  datasource: DatasourceSelector;\n  isMetadataEnabled?: boolean;\n  onExplore: (metricName: string) => void;\n}\n\nexport function JobSection({\n  jobs,\n  filters,\n  datasource,\n  isMetadataEnabled,\n  onExplore,\n  ...props\n}: JobSection): ReactElement {\n  const [currentJob, setCurrentJob] = useState<string>(jobs[0] ?? '');\n\n  if (!currentJob) {\n    return <Typography>Something went wrong...</Typography>;\n  }\n\n  return (\n    <Stack gap={2} {...props}>\n      {jobs.length > 2 && (\n        <FormControl fullWidth>\n          <InputLabel id=\"job-select-label\">Job</InputLabel>\n          <Select\n            labelId=\"job-select-label\"\n            id=\"job-select\"\n            label=\"Job\"\n            variant=\"outlined\"\n            value={currentJob}\n            onChange={(e) => setCurrentJob(e.target.value)}\n          >\n            {jobs.map((job) => (\n              <MenuItem key={job} value={job}>\n                {job}\n              </MenuItem>\n            ))}\n          </Select>\n        </FormControl>\n      )}\n      {currentJob && (\n        <JobList\n          job={currentJob}\n          filters={filters}\n          datasource={datasource}\n          isMetadataEnabled={isMetadataEnabled}\n          onExplore={onExplore}\n        />\n      )}\n    </Stack>\n  );\n}\n\nexport interface JobTabProps extends StackProps {\n  filters: LabelFilter[];\n  datasource: DatasourceSelector;\n  isMetadataEnabled?: boolean;\n  onExplore: (metricName: string) => void;\n}\n\nexport function JobTab({ filters, datasource, isMetadataEnabled, onExplore, ...props }: JobTabProps): ReactElement {\n  const { data: jobData, isLoading: isJobLoading } = useLabelValues('job', filters, datasource);\n\n  if (isJobLoading) {\n    return (\n      <Stack width=\"100%\" sx={{ alignItems: 'center', justifyContent: 'center' }}>\n        <CircularProgress />\n      </Stack>\n    );\n  }\n\n  if (!jobData?.data || jobData.data.length === 0) {\n    return (\n      <Stack {...props}>\n        <Typography>No jobs found</Typography>\n      </Stack>\n    );\n  }\n\n  return (\n    <JobSection\n      jobs={jobData.data}\n      filters={filters}\n      datasource={datasource}\n      isMetadataEnabled={isMetadataEnabled}\n      onExplore={onExplore}\n      {...props}\n    />\n  );\n}\n"],"names":["CircularProgress","FormControl","InputLabel","MenuItem","Select","Stack","Typography","useMemo","useState","MetricList","useLabelValues","JobList","job","filters","datasource","isMetadataEnabled","onExplore","props","filtersWithJobWithoutName","result","filter","label","push","labelValues","operator","data","isLoading","width","sx","alignItems","justifyContent","metricNames","JobSection","jobs","currentJob","setCurrentJob","gap","length","fullWidth","id","labelId","variant","value","onChange","e","target","map","JobTab","jobData","isJobLoading"],"mappings":"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"}

package/dist/components/PrometheusMetricsFinder/overview/tabs/OverviewTab.d.ts

@@ -1,4 +1,5 @@
 import { DatasourceSelector } from '@perses-dev/core';
+import { ReactElement } from 'react';
 import { StackProps } from '@mui/material';
 import { LabelFilter, LabelValueCounter } from '../../types';
 export interface LabelValuesRowProps extends StackProps {
@@ -7,18 +8,18 @@ export interface LabelValuesRowProps extends StackProps {
     onFilterAdd: (filter: LabelFilter) => void;
     orderBy?: 'asc' | 'amount';
 }
-export declare function LabelValuesRow({ label, valueCounters, onFilterAdd, ...props }: LabelValuesRowProps): import("react/jsx-runtime").JSX.Element;
+export declare function LabelValuesRow({ label, valueCounters, onFilterAdd, ...props }: LabelValuesRowProps): ReactElement;
 export interface LabelValuesTableProps extends StackProps {
     labelValueCounters: Map<string, LabelValueCounter[]>;
     isLoading?: boolean;
     onFilterAdd: (filter: LabelFilter) => void;
 }
-export declare function LabelValuesTable({ labelValueCounters, isLoading, onFilterAdd, ...props }: LabelValuesTableProps): import("react/jsx-runtime").JSX.Element;
+export declare function LabelValuesTable({ labelValueCounters, isLoading, onFilterAdd, ...props }: LabelValuesTableProps): ReactElement;
 export interface OverviewTabProps extends StackProps {
     metricName: string;
     datasource: DatasourceSelector;
     filters: LabelFilter[];
     onFilterAdd: (filter: LabelFilter) => void;
 }
-export declare function OverviewTab({ metricName, datasource, filters, onFilterAdd, ...props }: OverviewTabProps): import("react/jsx-runtime").JSX.Element;
+export declare function OverviewTab({ metricName, datasource, filters, onFilterAdd, ...props }: OverviewTabProps): ReactElement;
 //# sourceMappingURL=OverviewTab.d.ts.map

package/dist/components/PrometheusMetricsFinder/overview/tabs/OverviewTab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OverviewTab.d.ts","sourceRoot":"","sources":["../../../../../src/components/PrometheusMetricsFinder/overview/tabs/OverviewTab.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAEtD,OAAO,EAWL,UAAU,EAKX,MAAM,eAAe,CAAC;AAIvB,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAY,MAAM,aAAa,CAAC;AAKvE,MAAM,WAAW,mBAAoB,SAAQ,UAAU;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,iBAAiB,EAAE,CAAC;IACnC,WAAW,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC3C,OAAO,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;CAC5B;AAED,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAkIlG;AAED,MAAM,WAAW,qBAAsB,SAAQ,UAAU;IACvD,kBAAkB,EAAE,GAAG,CAAC,MAAM,EAAE,iBAAiB,EAAE,CAAC,CAAC;IACrD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;CAC5C;AAED,wBAAgB,gBAAgB,CAAC,EAAE,kBAAkB,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,2CAiC/G;AAED,MAAM,WAAW,gBAAiB,SAAQ,UAAU;IAClD,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,kBAAkB,CAAC;IAC/B,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,WAAW,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;CAC5C;AAED,wBAAgB,WAAW,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CA4CvG"}
+{"version":3,"file":"OverviewTab.d.ts","sourceRoot":"","sources":["../../../../../src/components/PrometheusMetricsFinder/overview/tabs/OverviewTab.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAC;AACxD,OAAO,EAWL,UAAU,EAKX,MAAM,eAAe,CAAC;AAIvB,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAY,MAAM,aAAa,CAAC;AAKvE,MAAM,WAAW,mBAAoB,SAAQ,UAAU;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,iBAAiB,EAAE,CAAC;IACnC,WAAW,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC3C,OAAO,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;CAC5B;AAED,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,GAAG,YAAY,CAkIjH;AAED,MAAM,WAAW,qBAAsB,SAAQ,UAAU;IACvD,kBAAkB,EAAE,GAAG,CAAC,MAAM,EAAE,iBAAiB,EAAE,CAAC,CAAC;IACrD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;CAC5C;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,kBAAkB,EAClB,SAAS,EACT,WAAW,EACX,GAAG,KAAK,EACT,EAAE,qBAAqB,GAAG,YAAY,CAiCtC;AAED,MAAM,WAAW,gBAAiB,SAAQ,UAAU;IAClD,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,kBAAkB,CAAC;IAC/B,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,WAAW,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;CAC5C;AAED,wBAAgB,WAAW,CAAC,EAC1B,UAAU,EACV,UAAU,EACV,OAAO,EACP,WAAW,EACX,GAAG,KAAK,EACT,EAAE,gBAAgB,GAAG,YAAY,CA4CjC"}

package/dist/components/PrometheusMetricsFinder/overview/tabs/OverviewTab.js

@@ -172,6 +172,7 @@ export function LabelValuesRow({ label, valueCounters, onFilterAdd, ...props })
                                 children: [
                                     /*#__PURE__*/ _jsx(Typography, {
                                         sx: {
+                                            color: (theme)=>theme.palette.success.main,
                                             fontFamily: 'monospace',
                                             ':hover': {
                                                 backgroundColor: 'rgba(127,127,127,0.35)',
@@ -179,7 +180,6 @@ export function LabelValuesRow({ label, valueCounters, onFilterAdd, ...props })
                                             },
                                             textWrap: isMobileSize ? 'nowrap' : 'unset'
                                         },
-                                        color: (theme)=>theme.palette.success.main,
                                         onClick: ()=>onFilterAdd({
                                                 label,
                                                 labelValues: [

package/dist/components/PrometheusMetricsFinder/overview/tabs/OverviewTab.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/PrometheusMetricsFinder/overview/tabs/OverviewTab.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { DatasourceSelector } from '@perses-dev/core';\nimport { useMemo, useState } from 'react';\nimport {\n  Autocomplete,\n  Button,\n  CircularProgress,\n  Divider,\n  IconButton,\n  MenuItem,\n  Select,\n  SelectChangeEvent,\n  Skeleton,\n  Stack,\n  StackProps,\n  TextField,\n  Typography,\n  useMediaQuery,\n  useTheme,\n} from '@mui/material';\nimport PlusIcon from 'mdi-material-ui/Plus';\nimport CheckIcon from 'mdi-material-ui/Check';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { LabelFilter, LabelValueCounter, Operator } from '../../types';\nimport { ListboxComponent } from '../../filter/FilterInputs';\nimport { useMetricMetadata, useSeriesStates } from '../../utils';\nimport { MetricChip } from '../../display/MetricChip';\n\nexport interface LabelValuesRowProps extends StackProps {\n  label: string;\n  valueCounters: LabelValueCounter[];\n  onFilterAdd: (filter: LabelFilter) => void;\n  orderBy?: 'asc' | 'amount';\n}\n\nexport function LabelValuesRow({ label, valueCounters, onFilterAdd, ...props }: LabelValuesRowProps) {\n  const [isAddingFilter, setIsAddingFilter] = useState(false);\n  const [operator, setOperator] = useState<Operator>('=');\n  const [value, setValue] = useState('');\n  const [showAllValues, setShowAllValues] = useState(false);\n  const isMobileSize = useMediaQuery(useTheme().breakpoints.down('md'));\n\n  const displayedValueCounters = useMemo(() => {\n    if (showAllValues) {\n      return valueCounters;\n    }\n    return valueCounters.slice(0, 5);\n  }, [showAllValues, valueCounters]);\n\n  return (\n    <Stack\n      key={label}\n      sx={{ width: '100%' }}\n      direction={isMobileSize ? 'column' : 'row'}\n      alignItems=\"center\"\n      gap={2}\n      {...props}\n    >\n      <Stack\n        sx={{ width: '100%', height: '100%' }}\n        justifyContent=\"space-between\"\n        alignContent=\"center\"\n        direction={isMobileSize ? 'column' : 'row'}\n      >\n        <Typography sx={{ fontFamily: 'monospace' }} pl={isMobileSize ? 0 : 1}>\n          {label}\n        </Typography>\n        <Stack direction=\"row\" gap={1} alignItems=\"center\">\n          {isAddingFilter ? (\n            <>\n              <Select\n                size=\"small\"\n                value={operator}\n                variant=\"outlined\"\n                onChange={(event: SelectChangeEvent) => {\n                  setOperator(event.target.value as Operator);\n                }}\n              >\n                <MenuItem value=\"=\">=</MenuItem>\n                <MenuItem value=\"!=\">!=</MenuItem>\n                <MenuItem value=\"=~\">=~</MenuItem>\n                <MenuItem value=\"!~\">!~</MenuItem>\n              </Select>\n              <Autocomplete\n                freeSolo\n                limitTags={1}\n                disableClearable\n                options={valueCounters.map((counters) => counters.labelValue)}\n                value={value}\n                ListboxComponent={ListboxComponent}\n                sx={{ width: 250 }}\n                renderInput={(params) => {\n                  return <TextField {...params} label=\"Value\" variant=\"outlined\" fullWidth size=\"small\" />;\n                }}\n                onInputChange={(_, newValue) => {\n                  setValue(newValue);\n                }}\n              />\n              <IconButton\n                aria-label=\"confirm\"\n                onClick={() => {\n                  onFilterAdd({ label, labelValues: [value], operator });\n                  setIsAddingFilter(false);\n                }}\n              >\n                <CheckIcon />\n              </IconButton>\n              <IconButton\n                aria-label=\"cancel\"\n                onClick={() => {\n                  setIsAddingFilter(false);\n                }}\n              >\n                <CloseIcon />\n              </IconButton>\n            </>\n          ) : (\n            <Button startIcon={<PlusIcon />} aria-label=\"add filter\" onClick={() => setIsAddingFilter(true)}>\n              Add filter\n            </Button>\n          )}\n        </Stack>\n      </Stack>\n\n      <Stack sx={{ width: '100%' }} gap={0.5}>\n        <Stack direction=\"row\" gap={2}>\n          <Typography variant=\"subtitle1\">{valueCounters.length} values</Typography>\n        </Stack>\n\n        <Stack sx={{ overflow: isMobileSize ? 'auto' : 'unset' }}>\n          {displayedValueCounters.map((labelValueCounter) => (\n            <Stack key={`${label}-${labelValueCounter.labelValue}`} direction=\"row\" gap={2}>\n              <Typography\n                sx={{\n                  fontFamily: 'monospace',\n                  ':hover': { backgroundColor: 'rgba(127,127,127,0.35)', cursor: 'pointer' },\n                  textWrap: isMobileSize ? 'nowrap' : 'unset',\n                }}\n                color={(theme) => theme.palette.success.main}\n                onClick={() => onFilterAdd({ label, labelValues: [labelValueCounter.labelValue], operator: '=' })}\n              >\n                {labelValueCounter.labelValue}\n              </Typography>\n              <Typography sx={{ textWrap: 'nowrap' }}>({labelValueCounter.counter} series)</Typography>\n            </Stack>\n          ))}\n        </Stack>\n        <Stack width=\"100%\" textAlign={isMobileSize ? 'center' : 'unset'}>\n          {showAllValues ? (\n            <Button variant=\"text\" sx={{ width: 'fit-content' }} onClick={() => setShowAllValues(false)}>\n              Hide full values\n            </Button>\n          ) : (\n            <>\n              {valueCounters.length > 5 && (\n                <Button variant=\"text\" sx={{ width: 'fit-content' }} onClick={() => setShowAllValues(true)}>\n                  Show {valueCounters.length - 5} more values\n                </Button>\n              )}\n            </>\n          )}\n        </Stack>\n      </Stack>\n    </Stack>\n  );\n}\n\nexport interface LabelValuesTableProps extends StackProps {\n  labelValueCounters: Map<string, LabelValueCounter[]>;\n  isLoading?: boolean;\n  onFilterAdd: (filter: LabelFilter) => void;\n}\n\nexport function LabelValuesTable({ labelValueCounters, isLoading, onFilterAdd, ...props }: LabelValuesTableProps) {\n  const labels: string[] = useMemo(() => {\n    return [...labelValueCounters.keys()].sort();\n  }, [labelValueCounters]);\n\n  if (isLoading) {\n    return (\n      <Stack width=\"100%\" sx={{ alignItems: 'center', justifyContent: 'center' }}>\n        <CircularProgress />\n      </Stack>\n    );\n  }\n\n  return (\n    <Stack sx={{ width: '100%' }} divider={<Divider flexItem orientation=\"horizontal\" />} gap={2} {...props}>\n      <Stack gap={2} direction=\"row\" sx={{ width: '100%' }}>\n        <Stack sx={{ width: '100%' }}>\n          <Typography variant=\"h3\">Label</Typography>\n        </Stack>\n        <Stack sx={{ width: '100%' }}>\n          <Typography variant=\"h3\">Values</Typography>\n        </Stack>\n      </Stack>\n      {labels.map((label) => (\n        <LabelValuesRow\n          key={label}\n          label={label}\n          valueCounters={labelValueCounters.get(label) ?? []}\n          onFilterAdd={onFilterAdd}\n        />\n      ))}\n    </Stack>\n  );\n}\n\nexport interface OverviewTabProps extends StackProps {\n  metricName: string;\n  datasource: DatasourceSelector;\n  filters: LabelFilter[];\n  onFilterAdd: (filter: LabelFilter) => void;\n}\n\nexport function OverviewTab({ metricName, datasource, filters, onFilterAdd, ...props }: OverviewTabProps) {\n  const { metadata, isLoading: isMetadataLoading } = useMetricMetadata(metricName, datasource);\n  const { series, labelValueCounters, isLoading } = useSeriesStates(metricName, filters, datasource);\n\n  return (\n    <Stack gap={2} {...props}>\n      <Stack direction=\"row\" gap={3} mt={1} justifyContent=\"space-between\">\n        <Stack gap={1}>\n          <Typography variant=\"h1\" sx={{ fontFamily: 'monospace' }}>\n            {metricName}\n          </Typography>\n          <Typography>Description:</Typography>\n          {isMetadataLoading ? (\n            <Skeleton variant=\"text\" width={180} />\n          ) : (\n            <Typography style={{ fontStyle: metadata?.help ? 'initial' : 'italic' }}>\n              {metadata ? metadata.help : 'unknown'}\n            </Typography>\n          )}\n        </Stack>\n        <Stack gap={1} justifyContent=\"center\">\n          {isLoading ? <Skeleton variant=\"rounded\" width={75} /> : <MetricChip label={metadata?.type ?? 'unknown'} />}\n          <Typography>\n            Result:{' '}\n            {isLoading ? (\n              <Skeleton variant=\"text\" width={20} sx={{ display: 'inline-block' }} />\n            ) : (\n              <strong>{series?.length ?? 0} series</strong>\n            )}\n          </Typography>\n        </Stack>\n      </Stack>\n\n      {series?.length === 0 ? (\n        <Stack {...props}>\n          <Typography sx={{ color: (theme) => theme.palette.warning.main }}>\n            No series found with current filters.\n          </Typography>\n        </Stack>\n      ) : (\n        <LabelValuesTable labelValueCounters={labelValueCounters} onFilterAdd={onFilterAdd} isLoading={isLoading} />\n      )}\n    </Stack>\n  );\n}\n"],"names":["useMemo","useState","Autocomplete","Button","CircularProgress","Divider","IconButton","MenuItem","Select","Skeleton","Stack","TextField","Typography","useMediaQuery","useTheme","PlusIcon","CheckIcon","CloseIcon","ListboxComponent","useMetricMetadata","useSeriesStates","MetricChip","LabelValuesRow","label","valueCounters","onFilterAdd","props","isAddingFilter","setIsAddingFilter","operator","setOperator","value","setValue","showAllValues","setShowAllValues","isMobileSize","breakpoints","down","displayedValueCounters","slice","sx","width","direction","alignItems","gap","height","justifyContent","alignContent","fontFamily","pl","size","variant","onChange","event","target","freeSolo","limitTags","disableClearable","options","map","counters","labelValue","renderInput","params","fullWidth","onInputChange","_","newValue","aria-label","onClick","labelValues","startIcon","length","overflow","labelValueCounter","backgroundColor","cursor","textWrap","color","theme","palette","success","main","counter","textAlign","LabelValuesTable","labelValueCounters","isLoading","labels","keys","sort","divider","flexItem","orientation","get","OverviewTab","metricName","datasource","filters","metadata","isMetadataLoading","series","mt","style","fontStyle","help","type","display","strong","warning"],"mappings":"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"}
+{"version":3,"sources":["../../../../../src/components/PrometheusMetricsFinder/overview/tabs/OverviewTab.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { DatasourceSelector } from '@perses-dev/core';\nimport { ReactElement, useMemo, useState } from 'react';\nimport {\n  Autocomplete,\n  Button,\n  CircularProgress,\n  Divider,\n  IconButton,\n  MenuItem,\n  Select,\n  SelectChangeEvent,\n  Skeleton,\n  Stack,\n  StackProps,\n  TextField,\n  Typography,\n  useMediaQuery,\n  useTheme,\n} from '@mui/material';\nimport PlusIcon from 'mdi-material-ui/Plus';\nimport CheckIcon from 'mdi-material-ui/Check';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { LabelFilter, LabelValueCounter, Operator } from '../../types';\nimport { ListboxComponent } from '../../filter/FilterInputs';\nimport { useMetricMetadata, useSeriesStates } from '../../utils';\nimport { MetricChip } from '../../display/MetricChip';\n\nexport interface LabelValuesRowProps extends StackProps {\n  label: string;\n  valueCounters: LabelValueCounter[];\n  onFilterAdd: (filter: LabelFilter) => void;\n  orderBy?: 'asc' | 'amount';\n}\n\nexport function LabelValuesRow({ label, valueCounters, onFilterAdd, ...props }: LabelValuesRowProps): ReactElement {\n  const [isAddingFilter, setIsAddingFilter] = useState(false);\n  const [operator, setOperator] = useState<Operator>('=');\n  const [value, setValue] = useState('');\n  const [showAllValues, setShowAllValues] = useState(false);\n  const isMobileSize = useMediaQuery(useTheme().breakpoints.down('md'));\n\n  const displayedValueCounters = useMemo(() => {\n    if (showAllValues) {\n      return valueCounters;\n    }\n    return valueCounters.slice(0, 5);\n  }, [showAllValues, valueCounters]);\n\n  return (\n    <Stack\n      key={label}\n      sx={{ width: '100%' }}\n      direction={isMobileSize ? 'column' : 'row'}\n      alignItems=\"center\"\n      gap={2}\n      {...props}\n    >\n      <Stack\n        sx={{ width: '100%', height: '100%' }}\n        justifyContent=\"space-between\"\n        alignContent=\"center\"\n        direction={isMobileSize ? 'column' : 'row'}\n      >\n        <Typography sx={{ fontFamily: 'monospace' }} pl={isMobileSize ? 0 : 1}>\n          {label}\n        </Typography>\n        <Stack direction=\"row\" gap={1} alignItems=\"center\">\n          {isAddingFilter ? (\n            <>\n              <Select\n                size=\"small\"\n                value={operator}\n                variant=\"outlined\"\n                onChange={(event: SelectChangeEvent) => {\n                  setOperator(event.target.value as Operator);\n                }}\n              >\n                <MenuItem value=\"=\">=</MenuItem>\n                <MenuItem value=\"!=\">!=</MenuItem>\n                <MenuItem value=\"=~\">=~</MenuItem>\n                <MenuItem value=\"!~\">!~</MenuItem>\n              </Select>\n              <Autocomplete\n                freeSolo\n                limitTags={1}\n                disableClearable\n                options={valueCounters.map((counters) => counters.labelValue)}\n                value={value}\n                ListboxComponent={ListboxComponent}\n                sx={{ width: 250 }}\n                renderInput={(params) => {\n                  return <TextField {...params} label=\"Value\" variant=\"outlined\" fullWidth size=\"small\" />;\n                }}\n                onInputChange={(_, newValue) => {\n                  setValue(newValue);\n                }}\n              />\n              <IconButton\n                aria-label=\"confirm\"\n                onClick={() => {\n                  onFilterAdd({ label, labelValues: [value], operator });\n                  setIsAddingFilter(false);\n                }}\n              >\n                <CheckIcon />\n              </IconButton>\n              <IconButton\n                aria-label=\"cancel\"\n                onClick={() => {\n                  setIsAddingFilter(false);\n                }}\n              >\n                <CloseIcon />\n              </IconButton>\n            </>\n          ) : (\n            <Button startIcon={<PlusIcon />} aria-label=\"add filter\" onClick={() => setIsAddingFilter(true)}>\n              Add filter\n            </Button>\n          )}\n        </Stack>\n      </Stack>\n\n      <Stack sx={{ width: '100%' }} gap={0.5}>\n        <Stack direction=\"row\" gap={2}>\n          <Typography variant=\"subtitle1\">{valueCounters.length} values</Typography>\n        </Stack>\n\n        <Stack sx={{ overflow: isMobileSize ? 'auto' : 'unset' }}>\n          {displayedValueCounters.map((labelValueCounter) => (\n            <Stack key={`${label}-${labelValueCounter.labelValue}`} direction=\"row\" gap={2}>\n              <Typography\n                sx={{\n                  color: (theme) => theme.palette.success.main,\n                  fontFamily: 'monospace',\n                  ':hover': { backgroundColor: 'rgba(127,127,127,0.35)', cursor: 'pointer' },\n                  textWrap: isMobileSize ? 'nowrap' : 'unset',\n                }}\n                onClick={() => onFilterAdd({ label, labelValues: [labelValueCounter.labelValue], operator: '=' })}\n              >\n                {labelValueCounter.labelValue}\n              </Typography>\n              <Typography sx={{ textWrap: 'nowrap' }}>({labelValueCounter.counter} series)</Typography>\n            </Stack>\n          ))}\n        </Stack>\n        <Stack width=\"100%\" textAlign={isMobileSize ? 'center' : 'unset'}>\n          {showAllValues ? (\n            <Button variant=\"text\" sx={{ width: 'fit-content' }} onClick={() => setShowAllValues(false)}>\n              Hide full values\n            </Button>\n          ) : (\n            <>\n              {valueCounters.length > 5 && (\n                <Button variant=\"text\" sx={{ width: 'fit-content' }} onClick={() => setShowAllValues(true)}>\n                  Show {valueCounters.length - 5} more values\n                </Button>\n              )}\n            </>\n          )}\n        </Stack>\n      </Stack>\n    </Stack>\n  );\n}\n\nexport interface LabelValuesTableProps extends StackProps {\n  labelValueCounters: Map<string, LabelValueCounter[]>;\n  isLoading?: boolean;\n  onFilterAdd: (filter: LabelFilter) => void;\n}\n\nexport function LabelValuesTable({\n  labelValueCounters,\n  isLoading,\n  onFilterAdd,\n  ...props\n}: LabelValuesTableProps): ReactElement {\n  const labels: string[] = useMemo(() => {\n    return [...labelValueCounters.keys()].sort();\n  }, [labelValueCounters]);\n\n  if (isLoading) {\n    return (\n      <Stack width=\"100%\" sx={{ alignItems: 'center', justifyContent: 'center' }}>\n        <CircularProgress />\n      </Stack>\n    );\n  }\n\n  return (\n    <Stack sx={{ width: '100%' }} divider={<Divider flexItem orientation=\"horizontal\" />} gap={2} {...props}>\n      <Stack gap={2} direction=\"row\" sx={{ width: '100%' }}>\n        <Stack sx={{ width: '100%' }}>\n          <Typography variant=\"h3\">Label</Typography>\n        </Stack>\n        <Stack sx={{ width: '100%' }}>\n          <Typography variant=\"h3\">Values</Typography>\n        </Stack>\n      </Stack>\n      {labels.map((label) => (\n        <LabelValuesRow\n          key={label}\n          label={label}\n          valueCounters={labelValueCounters.get(label) ?? []}\n          onFilterAdd={onFilterAdd}\n        />\n      ))}\n    </Stack>\n  );\n}\n\nexport interface OverviewTabProps extends StackProps {\n  metricName: string;\n  datasource: DatasourceSelector;\n  filters: LabelFilter[];\n  onFilterAdd: (filter: LabelFilter) => void;\n}\n\nexport function OverviewTab({\n  metricName,\n  datasource,\n  filters,\n  onFilterAdd,\n  ...props\n}: OverviewTabProps): ReactElement {\n  const { metadata, isLoading: isMetadataLoading } = useMetricMetadata(metricName, datasource);\n  const { series, labelValueCounters, isLoading } = useSeriesStates(metricName, filters, datasource);\n\n  return (\n    <Stack gap={2} {...props}>\n      <Stack direction=\"row\" gap={3} mt={1} justifyContent=\"space-between\">\n        <Stack gap={1}>\n          <Typography variant=\"h1\" sx={{ fontFamily: 'monospace' }}>\n            {metricName}\n          </Typography>\n          <Typography>Description:</Typography>\n          {isMetadataLoading ? (\n            <Skeleton variant=\"text\" width={180} />\n          ) : (\n            <Typography style={{ fontStyle: metadata?.help ? 'initial' : 'italic' }}>\n              {metadata ? metadata.help : 'unknown'}\n            </Typography>\n          )}\n        </Stack>\n        <Stack gap={1} justifyContent=\"center\">\n          {isLoading ? <Skeleton variant=\"rounded\" width={75} /> : <MetricChip label={metadata?.type ?? 'unknown'} />}\n          <Typography>\n            Result:{' '}\n            {isLoading ? (\n              <Skeleton variant=\"text\" width={20} sx={{ display: 'inline-block' }} />\n            ) : (\n              <strong>{series?.length ?? 0} series</strong>\n            )}\n          </Typography>\n        </Stack>\n      </Stack>\n\n      {series?.length === 0 ? (\n        <Stack {...props}>\n          <Typography sx={{ color: (theme) => theme.palette.warning.main }}>\n            No series found with current filters.\n          </Typography>\n        </Stack>\n      ) : (\n        <LabelValuesTable labelValueCounters={labelValueCounters} onFilterAdd={onFilterAdd} isLoading={isLoading} />\n      )}\n    </Stack>\n  );\n}\n"],"names":["useMemo","useState","Autocomplete","Button","CircularProgress","Divider","IconButton","MenuItem","Select","Skeleton","Stack","TextField","Typography","useMediaQuery","useTheme","PlusIcon","CheckIcon","CloseIcon","ListboxComponent","useMetricMetadata","useSeriesStates","MetricChip","LabelValuesRow","label","valueCounters","onFilterAdd","props","isAddingFilter","setIsAddingFilter","operator","setOperator","value","setValue","showAllValues","setShowAllValues","isMobileSize","breakpoints","down","displayedValueCounters","slice","sx","width","direction","alignItems","gap","height","justifyContent","alignContent","fontFamily","pl","size","variant","onChange","event","target","freeSolo","limitTags","disableClearable","options","map","counters","labelValue","renderInput","params","fullWidth","onInputChange","_","newValue","aria-label","onClick","labelValues","startIcon","length","overflow","labelValueCounter","color","theme","palette","success","main","backgroundColor","cursor","textWrap","counter","textAlign","LabelValuesTable","labelValueCounters","isLoading","labels","keys","sort","divider","flexItem","orientation","get","OverviewTab","metricName","datasource","filters","metadata","isMetadataLoading","series","mt","style","fontStyle","help","type","display","strong","warning"],"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,SAAuBA,OAAO,EAAEC,QAAQ,QAAQ,QAAQ;AACxD,SACEC,YAAY,EACZC,MAAM,EACNC,gBAAgB,EAChBC,OAAO,EACPC,UAAU,EACVC,QAAQ,EACRC,MAAM,EAENC,QAAQ,EACRC,KAAK,EAELC,SAAS,EACTC,UAAU,EACVC,aAAa,EACbC,QAAQ,QACH,gBAAgB;AACvB,OAAOC,cAAc,uBAAuB;AAC5C,OAAOC,eAAe,wBAAwB;AAC9C,OAAOC,eAAe,wBAAwB;AAE9C,SAASC,gBAAgB,QAAQ,4BAA4B;AAC7D,SAASC,iBAAiB,EAAEC,eAAe,QAAQ,cAAc;AACjE,SAASC,UAAU,QAAQ,2BAA2B;AAStD,OAAO,SAASC,eAAe,EAAEC,KAAK,EAAEC,aAAa,EAAEC,WAAW,EAAE,GAAGC,OAA4B;IACjG,MAAM,CAACC,gBAAgBC,kBAAkB,GAAG3B,SAAS;IACrD,MAAM,CAAC4B,UAAUC,YAAY,GAAG7B,SAAmB;IACnD,MAAM,CAAC8B,OAAOC,SAAS,GAAG/B,SAAS;IACnC,MAAM,CAACgC,eAAeC,iBAAiB,GAAGjC,SAAS;IACnD,MAAMkC,eAAetB,cAAcC,WAAWsB,WAAW,CAACC,IAAI,CAAC;IAE/D,MAAMC,yBAAyBtC,QAAQ;QACrC,IAAIiC,eAAe;YACjB,OAAOT;QACT;QACA,OAAOA,cAAce,KAAK,CAAC,GAAG;IAChC,GAAG;QAACN;QAAeT;KAAc;IAEjC,qBACE,MAACd;QAEC8B,IAAI;YAAEC,OAAO;QAAO;QACpBC,WAAWP,eAAe,WAAW;QACrCQ,YAAW;QACXC,KAAK;QACJ,GAAGlB,KAAK;;0BAET,MAAChB;gBACC8B,IAAI;oBAAEC,OAAO;oBAAQI,QAAQ;gBAAO;gBACpCC,gBAAe;gBACfC,cAAa;gBACbL,WAAWP,eAAe,WAAW;;kCAErC,KAACvB;wBAAW4B,IAAI;4BAAEQ,YAAY;wBAAY;wBAAGC,IAAId,eAAe,IAAI;kCACjEZ;;kCAEH,KAACb;wBAAMgC,WAAU;wBAAME,KAAK;wBAAGD,YAAW;kCACvChB,+BACC;;8CACE,MAACnB;oCACC0C,MAAK;oCACLnB,OAAOF;oCACPsB,SAAQ;oCACRC,UAAU,CAACC;wCACTvB,YAAYuB,MAAMC,MAAM,CAACvB,KAAK;oCAChC;;sDAEA,KAACxB;4CAASwB,OAAM;sDAAI;;sDACpB,KAACxB;4CAASwB,OAAM;sDAAK;;sDACrB,KAACxB;4CAASwB,OAAM;sDAAK;;sDACrB,KAACxB;4CAASwB,OAAM;sDAAK;;;;8CAEvB,KAAC7B;oCACCqD,QAAQ;oCACRC,WAAW;oCACXC,gBAAgB;oCAChBC,SAASlC,cAAcmC,GAAG,CAAC,CAACC,WAAaA,SAASC,UAAU;oCAC5D9B,OAAOA;oCACPb,kBAAkBA;oCAClBsB,IAAI;wCAAEC,OAAO;oCAAI;oCACjBqB,aAAa,CAACC;wCACZ,qBAAO,KAACpD;4CAAW,GAAGoD,MAAM;4CAAExC,OAAM;4CAAQ4B,SAAQ;4CAAWa,SAAS;4CAACd,MAAK;;oCAChF;oCACAe,eAAe,CAACC,GAAGC;wCACjBnC,SAASmC;oCACX;;8CAEF,KAAC7D;oCACC8D,cAAW;oCACXC,SAAS;wCACP5C,YAAY;4CAAEF;4CAAO+C,aAAa;gDAACvC;6CAAM;4CAAEF;wCAAS;wCACpDD,kBAAkB;oCACpB;8CAEA,cAAA,KAACZ;;8CAEH,KAACV;oCACC8D,cAAW;oCACXC,SAAS;wCACPzC,kBAAkB;oCACpB;8CAEA,cAAA,KAACX;;;2CAIL,KAACd;4BAAOoE,yBAAW,KAACxD;4BAAaqD,cAAW;4BAAaC,SAAS,IAAMzC,kBAAkB;sCAAO;;;;;0BAOvG,MAAClB;gBAAM8B,IAAI;oBAAEC,OAAO;gBAAO;gBAAGG,KAAK;;kCACjC,KAAClC;wBAAMgC,WAAU;wBAAME,KAAK;kCAC1B,cAAA,MAAChC;4BAAWuC,SAAQ;;gCAAa3B,cAAcgD,MAAM;gCAAC;;;;kCAGxD,KAAC9D;wBAAM8B,IAAI;4BAAEiC,UAAUtC,eAAe,SAAS;wBAAQ;kCACpDG,uBAAuBqB,GAAG,CAAC,CAACe,kCAC3B,MAAChE;gCAAuDgC,WAAU;gCAAME,KAAK;;kDAC3E,KAAChC;wCACC4B,IAAI;4CACFmC,OAAO,CAACC,QAAUA,MAAMC,OAAO,CAACC,OAAO,CAACC,IAAI;4CAC5C/B,YAAY;4CACZ,UAAU;gDAAEgC,iBAAiB;gDAA0BC,QAAQ;4CAAU;4CACzEC,UAAU/C,eAAe,WAAW;wCACtC;wCACAkC,SAAS,IAAM5C,YAAY;gDAAEF;gDAAO+C,aAAa;oDAACI,kBAAkBb,UAAU;iDAAC;gDAAEhC,UAAU;4CAAI;kDAE9F6C,kBAAkBb,UAAU;;kDAE/B,MAACjD;wCAAW4B,IAAI;4CAAE0C,UAAU;wCAAS;;4CAAG;4CAAER,kBAAkBS,OAAO;4CAAC;;;;+BAZ1D,CAAC,EAAE5D,MAAM,CAAC,EAAEmD,kBAAkBb,UAAU,CAAC,CAAC;;kCAgB1D,KAACnD;wBAAM+B,OAAM;wBAAO2C,WAAWjD,eAAe,WAAW;kCACtDF,8BACC,KAAC9B;4BAAOgD,SAAQ;4BAAOX,IAAI;gCAAEC,OAAO;4BAAc;4BAAG4B,SAAS,IAAMnC,iBAAiB;sCAAQ;2CAI7F;sCACGV,cAAcgD,MAAM,GAAG,mBACtB,MAACrE;gCAAOgD,SAAQ;gCAAOX,IAAI;oCAAEC,OAAO;gCAAc;gCAAG4B,SAAS,IAAMnC,iBAAiB;;oCAAO;oCACpFV,cAAcgD,MAAM,GAAG;oCAAE;;;;;;;;OAzGtCjD;AAkHX;AAQA,OAAO,SAAS8D,iBAAiB,EAC/BC,kBAAkB,EAClBC,SAAS,EACT9D,WAAW,EACX,GAAGC,OACmB;IACtB,MAAM8D,SAAmBxF,QAAQ;QAC/B,OAAO;eAAIsF,mBAAmBG,IAAI;SAAG,CAACC,IAAI;IAC5C,GAAG;QAACJ;KAAmB;IAEvB,IAAIC,WAAW;QACb,qBACE,KAAC7E;YAAM+B,OAAM;YAAOD,IAAI;gBAAEG,YAAY;gBAAUG,gBAAgB;YAAS;sBACvE,cAAA,KAAC1C;;IAGP;IAEA,qBACE,MAACM;QAAM8B,IAAI;YAAEC,OAAO;QAAO;QAAGkD,uBAAS,KAACtF;YAAQuF,QAAQ;YAACC,aAAY;;QAAiBjD,KAAK;QAAI,GAAGlB,KAAK;;0BACrG,MAAChB;gBAAMkC,KAAK;gBAAGF,WAAU;gBAAMF,IAAI;oBAAEC,OAAO;gBAAO;;kCACjD,KAAC/B;wBAAM8B,IAAI;4BAAEC,OAAO;wBAAO;kCACzB,cAAA,KAAC7B;4BAAWuC,SAAQ;sCAAK;;;kCAE3B,KAACzC;wBAAM8B,IAAI;4BAAEC,OAAO;wBAAO;kCACzB,cAAA,KAAC7B;4BAAWuC,SAAQ;sCAAK;;;;;YAG5BqC,OAAO7B,GAAG,CAAC,CAACpC;oBAIM+D;qCAHjB,KAAChE;oBAECC,OAAOA;oBACPC,eAAe8D,CAAAA,0BAAAA,mBAAmBQ,GAAG,CAACvE,oBAAvB+D,qCAAAA,0BAAiC,EAAE;oBAClD7D,aAAaA;mBAHRF;;;;AAQf;AASA,OAAO,SAASwE,YAAY,EAC1BC,UAAU,EACVC,UAAU,EACVC,OAAO,EACPzE,WAAW,EACX,GAAGC,OACc;IACjB,MAAM,EAAEyE,QAAQ,EAAEZ,WAAWa,iBAAiB,EAAE,GAAGjF,kBAAkB6E,YAAYC;IACjF,MAAM,EAAEI,MAAM,EAAEf,kBAAkB,EAAEC,SAAS,EAAE,GAAGnE,gBAAgB4E,YAAYE,SAASD;QAmBHE,gBAM/DE;IAvBrB,qBACE,MAAC3F;QAAMkC,KAAK;QAAI,GAAGlB,KAAK;;0BACtB,MAAChB;gBAAMgC,WAAU;gBAAME,KAAK;gBAAG0D,IAAI;gBAAGxD,gBAAe;;kCACnD,MAACpC;wBAAMkC,KAAK;;0CACV,KAAChC;gCAAWuC,SAAQ;gCAAKX,IAAI;oCAAEQ,YAAY;gCAAY;0CACpDgD;;0CAEH,KAACpF;0CAAW;;4BACXwF,kCACC,KAAC3F;gCAAS0C,SAAQ;gCAAOV,OAAO;+CAEhC,KAAC7B;gCAAW2F,OAAO;oCAAEC,WAAWL,CAAAA,qBAAAA,+BAAAA,SAAUM,IAAI,IAAG,YAAY;gCAAS;0CACnEN,WAAWA,SAASM,IAAI,GAAG;;;;kCAIlC,MAAC/F;wBAAMkC,KAAK;wBAAGE,gBAAe;;4BAC3ByC,0BAAY,KAAC9E;gCAAS0C,SAAQ;gCAAUV,OAAO;+CAAS,KAACpB;gCAAWE,OAAO4E,CAAAA,iBAAAA,qBAAAA,+BAAAA,SAAUO,IAAI,cAAdP,4BAAAA,iBAAkB;;0CAC9F,MAACvF;;oCAAW;oCACF;oCACP2E,0BACC,KAAC9E;wCAAS0C,SAAQ;wCAAOV,OAAO;wCAAID,IAAI;4CAAEmE,SAAS;wCAAe;uDAElE,MAACC;;4CAAQP,CAAAA,iBAAAA,mBAAAA,6BAAAA,OAAQ7B,MAAM,cAAd6B,4BAAAA,iBAAkB;4CAAE;;;;;;;;;YAMpCA,CAAAA,mBAAAA,6BAAAA,OAAQ7B,MAAM,MAAK,kBAClB,KAAC9D;gBAAO,GAAGgB,KAAK;0BACd,cAAA,KAACd;oBAAW4B,IAAI;wBAAEmC,OAAO,CAACC,QAAUA,MAAMC,OAAO,CAACgC,OAAO,CAAC9B,IAAI;oBAAC;8BAAG;;+BAKpE,KAACM;gBAAiBC,oBAAoBA;gBAAoB7D,aAAaA;gBAAa8D,WAAWA;;;;AAIvG"}

package/dist/components/PrometheusMetricsFinder/overview/tabs/SimilarTab.d.ts

@@ -1,5 +1,6 @@
 import { DatasourceSelector } from '@perses-dev/core';
 import { StackProps } from '@mui/material';
+import { ReactElement } from 'react';
 import { LabelFilter } from '../../types';
 export interface SimilarTabProps extends StackProps {
     filters: LabelFilter[];
@@ -7,5 +8,5 @@ export interface SimilarTabProps extends StackProps {
     isMetadataEnabled?: boolean;
     onExplore: (metricName: string) => void;
 }
-export declare function SimilarTab({ filters, datasource, isMetadataEnabled, onExplore, ...props }: SimilarTabProps): import("react/jsx-runtime").JSX.Element;
+export declare function SimilarTab({ filters, datasource, isMetadataEnabled, onExplore, ...props }: SimilarTabProps): ReactElement;
 //# sourceMappingURL=SimilarTab.d.ts.map

package/dist/components/PrometheusMetricsFinder/overview/tabs/SimilarTab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SimilarTab.d.ts","sourceRoot":"","sources":["../../../../../src/components/PrometheusMetricsFinder/overview/tabs/SimilarTab.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAA2B,UAAU,EAAE,MAAM,eAAe,CAAC;AAGpE,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG1C,MAAM,WAAW,eAAgB,SAAQ,UAAU;IACjD,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,UAAU,EAAE,kBAAkB,CAAC;IAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,wBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,2CAwB1G"}
+{"version":3,"file":"SimilarTab.d.ts","sourceRoot":"","sources":["../../../../../src/components/PrometheusMetricsFinder/overview/tabs/SimilarTab.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAA2B,UAAU,EAAE,MAAM,eAAe,CAAC;AACpE,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAE9C,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG1C,MAAM,WAAW,eAAgB,SAAQ,UAAU;IACjD,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,UAAU,EAAE,kBAAkB,CAAC;IAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,UAAU,EACV,iBAAiB,EACjB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,eAAe,GAAG,YAAY,CAwBhC"}

package/dist/components/PrometheusMetricsFinder/overview/tabs/SimilarTab.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/PrometheusMetricsFinder/overview/tabs/SimilarTab.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { DatasourceSelector } from '@perses-dev/core';\nimport { CircularProgress, Stack, StackProps } from '@mui/material';\nimport { useMemo } from 'react';\nimport { MetricList } from '../../display/list/MetricList';\nimport { LabelFilter } from '../../types';\nimport { useLabelValues } from '../../utils';\n\nexport interface SimilarTabProps extends StackProps {\n  filters: LabelFilter[];\n  datasource: DatasourceSelector;\n  isMetadataEnabled?: boolean;\n  onExplore: (metricName: string) => void;\n}\n\nexport function SimilarTab({ filters, datasource, isMetadataEnabled, onExplore, ...props }: SimilarTabProps) {\n  const filtersWithoutName: LabelFilter[] = useMemo(() => {\n    return filters.filter((filter) => filter.label !== '__name__');\n  }, [filters]);\n  const { data, isLoading } = useLabelValues('__name__', filtersWithoutName, datasource);\n\n  if (isLoading) {\n    return (\n      <Stack width=\"100%\" sx={{ alignItems: 'center', justifyContent: 'center' }}>\n        <CircularProgress />\n      </Stack>\n    );\n  }\n\n  return (\n    <MetricList\n      metricNames={data?.data ?? []}\n      datasource={datasource}\n      filters={filtersWithoutName}\n      isMetadataEnabled={isMetadataEnabled}\n      onExplore={onExplore}\n      {...props}\n    />\n  );\n}\n"],"names":["CircularProgress","Stack","useMemo","MetricList","useLabelValues","SimilarTab","filters","datasource","isMetadataEnabled","onExplore","props","filtersWithoutName","filter","label","data","isLoading","width","sx","alignItems","justifyContent","metricNames"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAGjC,SAASA,gBAAgB,EAAEC,KAAK,QAAoB,gBAAgB;AACpE,SAASC,OAAO,QAAQ,QAAQ;AAChC,SAASC,UAAU,QAAQ,gCAAgC;AAE3D,SAASC,cAAc,QAAQ,cAAc;AAS7C,OAAO,SAASC,WAAW,EAAEC,OAAO,EAAEC,UAAU,EAAEC,iBAAiB,EAAEC,SAAS,EAAE,GAAGC,OAAwB;IACzG,MAAMC,qBAAoCT,QAAQ;QAChD,OAAOI,QAAQM,MAAM,CAAC,CAACA,SAAWA,OAAOC,KAAK,KAAK;IACrD,GAAG;QAACP;KAAQ;IACZ,MAAM,EAAEQ,IAAI,EAAEC,SAAS,EAAE,GAAGX,eAAe,YAAYO,oBAAoBJ;IAE3E,IAAIQ,WAAW;QACb,qBACE,KAACd;YAAMe,OAAM;YAAOC,IAAI;gBAAEC,YAAY;gBAAUC,gBAAgB;YAAS;sBACvE,cAAA,KAACnB;;IAGP;QAIiBc;IAFjB,qBACE,KAACX;QACCiB,aAAaN,CAAAA,aAAAA,iBAAAA,2BAAAA,KAAMA,IAAI,cAAVA,wBAAAA,aAAc,EAAE;QAC7BP,YAAYA;QACZD,SAASK;QACTH,mBAAmBA;QACnBC,WAAWA;QACV,GAAGC,KAAK;;AAGf"}
+{"version":3,"sources":["../../../../../src/components/PrometheusMetricsFinder/overview/tabs/SimilarTab.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { DatasourceSelector } from '@perses-dev/core';\nimport { CircularProgress, Stack, StackProps } from '@mui/material';\nimport { ReactElement, useMemo } from 'react';\nimport { MetricList } from '../../display/list/MetricList';\nimport { LabelFilter } from '../../types';\nimport { useLabelValues } from '../../utils';\n\nexport interface SimilarTabProps extends StackProps {\n  filters: LabelFilter[];\n  datasource: DatasourceSelector;\n  isMetadataEnabled?: boolean;\n  onExplore: (metricName: string) => void;\n}\n\nexport function SimilarTab({\n  filters,\n  datasource,\n  isMetadataEnabled,\n  onExplore,\n  ...props\n}: SimilarTabProps): ReactElement {\n  const filtersWithoutName: LabelFilter[] = useMemo(() => {\n    return filters.filter((filter) => filter.label !== '__name__');\n  }, [filters]);\n  const { data, isLoading } = useLabelValues('__name__', filtersWithoutName, datasource);\n\n  if (isLoading) {\n    return (\n      <Stack width=\"100%\" sx={{ alignItems: 'center', justifyContent: 'center' }}>\n        <CircularProgress />\n      </Stack>\n    );\n  }\n\n  return (\n    <MetricList\n      metricNames={data?.data ?? []}\n      datasource={datasource}\n      filters={filtersWithoutName}\n      isMetadataEnabled={isMetadataEnabled}\n      onExplore={onExplore}\n      {...props}\n    />\n  );\n}\n"],"names":["CircularProgress","Stack","useMemo","MetricList","useLabelValues","SimilarTab","filters","datasource","isMetadataEnabled","onExplore","props","filtersWithoutName","filter","label","data","isLoading","width","sx","alignItems","justifyContent","metricNames"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAGjC,SAASA,gBAAgB,EAAEC,KAAK,QAAoB,gBAAgB;AACpE,SAAuBC,OAAO,QAAQ,QAAQ;AAC9C,SAASC,UAAU,QAAQ,gCAAgC;AAE3D,SAASC,cAAc,QAAQ,cAAc;AAS7C,OAAO,SAASC,WAAW,EACzBC,OAAO,EACPC,UAAU,EACVC,iBAAiB,EACjBC,SAAS,EACT,GAAGC,OACa;IAChB,MAAMC,qBAAoCT,QAAQ;QAChD,OAAOI,QAAQM,MAAM,CAAC,CAACA,SAAWA,OAAOC,KAAK,KAAK;IACrD,GAAG;QAACP;KAAQ;IACZ,MAAM,EAAEQ,IAAI,EAAEC,SAAS,EAAE,GAAGX,eAAe,YAAYO,oBAAoBJ;IAE3E,IAAIQ,WAAW;QACb,qBACE,KAACd;YAAMe,OAAM;YAAOC,IAAI;gBAAEC,YAAY;gBAAUC,gBAAgB;YAAS;sBACvE,cAAA,KAACnB;;IAGP;QAIiBc;IAFjB,qBACE,KAACX;QACCiB,aAAaN,CAAAA,aAAAA,iBAAAA,2BAAAA,KAAMA,IAAI,cAAVA,wBAAAA,aAAc,EAAE;QAC7BP,YAAYA;QACZD,SAASK;QACTH,mBAAmBA;QACnBC,WAAWA;QACV,GAAGC,KAAK;;AAGf"}

package/dist/components/PrometheusMetricsFinder/types.d.ts

@@ -2,6 +2,7 @@ import { DatasourceSelector } from '@perses-dev/core';
 export type Operator = '=' | '!=' | '=~' | '!~';
 export interface Settings {
     isMetadataEnabled: boolean;
+    isPanelEnabled: boolean;
 }
 export interface FinderQueryParams {
     datasource?: DatasourceSelector;

package/dist/components/PrometheusMetricsFinder/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/PrometheusMetricsFinder/types.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAEtD,MAAM,MAAM,QAAQ,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEhD,MAAM,WAAW,QAAQ;IACvB,iBAAiB,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,WAAW,iBAAiB;IAChC,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,QAAQ,EAAE,QAAQ,CAAC;CACpB;AAED,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,WAAW,EAAE,GAAG,MAAM,CAEhE;AAED,MAAM,WAAW,iBAAiB;IAChC,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;CACjB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/PrometheusMetricsFinder/types.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAEtD,MAAM,MAAM,QAAQ,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEhD,MAAM,WAAW,QAAQ;IACvB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,cAAc,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,iBAAiB;IAChC,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,QAAQ,EAAE,QAAQ,CAAC;CACpB;AAED,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,WAAW,EAAE,GAAG,MAAM,CAEhE;AAED,MAAM,WAAW,iBAAiB;IAChC,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;CACjB"}

package/dist/components/PrometheusMetricsFinder/types.js.map

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

package/dist/components/PrometheusMetricsFinder/utils.d.ts

@@ -1,12 +1,13 @@
 import { DatasourceSelector } from '@perses-dev/core';
 import { LabelValuesResponse, Metric, MetricMetadata } from '@perses-dev/prometheus-plugin';
+import { UseQueryResult } from '@tanstack/react-query';
 import { LabelFilter } from './types';
 export declare function useMetricMetadata(metricName: string, datasource: DatasourceSelector, enabled?: boolean): {
+    isLoading: false | true;
     metadata: MetricMetadata | undefined;
-    isLoading: boolean;
 };
-export declare function useLabels(filters: LabelFilter[], datasource: DatasourceSelector): import("@tanstack/react-query").UseQueryResult<LabelValuesResponse, unknown>;
-export declare function useLabelValues(labelName: string, filters: LabelFilter[], datasource: DatasourceSelector): import("@tanstack/react-query").UseQueryResult<LabelValuesResponse, unknown>;
+export declare function useLabels(filters: LabelFilter[], datasource: DatasourceSelector): UseQueryResult<LabelValuesResponse>;
+export declare function useLabelValues(labelName: string, filters: LabelFilter[], datasource: DatasourceSelector): UseQueryResult<LabelValuesResponse>;
 export declare function useSeriesStates(metricName: string, filters: LabelFilter[], datasource: DatasourceSelector): {
     series: Metric[] | undefined;
     labelValueCounters: Map<string, Array<{

package/dist/components/PrometheusMetricsFinder/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/PrometheusMetricsFinder/utils.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAEtD,OAAO,EAGL,mBAAmB,EACnB,MAAM,EACN,cAAc,EAMf,MAAM,+BAA+B,CAAC;AAGvC,OAAO,EAAqB,WAAW,EAAqB,MAAM,SAAS,CAAC;AAG5E,wBAAgB,iBAAiB,CAAC,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,kBAAkB,EAAE,OAAO,CAAC,EAAE,OAAO;;;EA2BtG;AAED,wBAAgB,SAAS,CAAC,OAAO,EAAE,WAAW,EAAE,EAAE,UAAU,EAAE,kBAAkB,gFAqB/E;AAGD,wBAAgB,cAAc,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,EAAE,UAAU,EAAE,kBAAkB,gFAsBvG;AAID,wBAAgB,eAAe,CAC7B,UAAU,EAAE,MAAM,EAClB,OAAO,EAAE,WAAW,EAAE,EACtB,UAAU,EAAE,kBAAkB,GAC7B;IACD,MAAM,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IAC7B,kBAAkB,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC;QAAE,UAAU,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;IAChF,SAAS,EAAE,OAAO,CAAC;CACpB,CA+CA"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/PrometheusMetricsFinder/utils.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAEtD,OAAO,EAGL,mBAAmB,EACnB,MAAM,EACN,cAAc,EAMf,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAY,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEjE,OAAO,EAAqB,WAAW,EAAqB,MAAM,SAAS,CAAC;AAG5E,wBAAgB,iBAAiB,CAC/B,UAAU,EAAE,MAAM,EAClB,UAAU,EAAE,kBAAkB,EAC9B,OAAO,CAAC,EAAE,OAAO,GAChB;IACD,SAAS,EAAE,KAAK,GAAG,IAAI,CAAC;IACxB,QAAQ,EAAE,cAAc,GAAG,SAAS,CAAC;CACtC,CA2BA;AAED,wBAAgB,SAAS,CAAC,OAAO,EAAE,WAAW,EAAE,EAAE,UAAU,EAAE,kBAAkB,GAAG,cAAc,CAAC,mBAAmB,CAAC,CAqBrH;AAGD,wBAAgB,cAAc,CAC5B,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,WAAW,EAAE,EACtB,UAAU,EAAE,kBAAkB,GAC7B,cAAc,CAAC,mBAAmB,CAAC,CAsBrC;AAID,wBAAgB,eAAe,CAC7B,UAAU,EAAE,MAAM,EAClB,OAAO,EAAE,WAAW,EAAE,EACtB,UAAU,EAAE,kBAAkB,GAC7B;IACD,MAAM,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IAC7B,kBAAkB,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC;QAAE,UAAU,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;IAChF,SAAS,EAAE,OAAO,CAAC;CACpB,CA+CA"}

package/dist/components/PrometheusMetricsFinder/utils.js.map

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

package/dist/views/ViewExplore/ViewExplore.d.ts

@@ -1,10 +1,10 @@
 import { BoxProps } from '@mui/material';
 import { DatasourceStoreProviderProps, VariableProviderProps } from '@perses-dev/dashboards';
-import React from 'react';
+import React, { ReactElement } from 'react';
 export interface ViewExploreProps extends Omit<BoxProps, 'children'> {
     datasourceApi: DatasourceStoreProviderProps['datasourceApi'];
     externalVariableDefinitions?: VariableProviderProps['externalVariableDefinitions'];
     exploreTitleComponent?: React.ReactNode;
 }
-export declare function ViewExplore(props: ViewExploreProps): import("react/jsx-runtime").JSX.Element;
+export declare function ViewExplore(props: ViewExploreProps): ReactElement;
 //# sourceMappingURL=ViewExplore.d.ts.map

package/dist/views/ViewExplore/ViewExplore.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ViewExplore.d.ts","sourceRoot":"","sources":["../../../src/views/ViewExplore/ViewExplore.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAO,QAAQ,EAAE,MAAM,eAAe,CAAC;AAQ9C,OAAO,EACL,4BAA4B,EAC5B,qBAAqB,EAGtB,MAAM,wBAAwB,CAAC;AAChC,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC;IAClE,aAAa,EAAE,4BAA4B,CAAC,eAAe,CAAC,CAAC;IAC7D,2BAA2B,CAAC,EAAE,qBAAqB,CAAC,6BAA6B,CAAC,CAAC;IACnF,qBAAqB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzC;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAkClD"}
+{"version":3,"file":"ViewExplore.d.ts","sourceRoot":"","sources":["../../../src/views/ViewExplore/ViewExplore.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAO,QAAQ,EAAE,MAAM,eAAe,CAAC;AAQ9C,OAAO,EACL,4BAA4B,EAC5B,qBAAqB,EAGtB,MAAM,wBAAwB,CAAC;AAChC,OAAO,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG5C,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC;IAClE,aAAa,EAAE,4BAA4B,CAAC,eAAe,CAAC,CAAC;IAC7D,2BAA2B,CAAC,EAAE,qBAAqB,CAAC,6BAA6B,CAAC,CAAC;IACnF,qBAAqB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzC;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,CAkCjE"}