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

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

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

package/lib/explore/PrometheusMetricsFinder/overview/tabs/JobTab.d.ts

@@ -0,0 +1,28 @@
+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;
+    filters: LabelFilter[];
+    datasource: DatasourceSelector;
+    isMetadataEnabled?: boolean;
+    onExplore: (metricName: string) => void;
+}
+export declare function JobList({ job, filters, datasource, isMetadataEnabled, onExplore, ...props }: JobList): ReactElement;
+export interface JobSection extends StackProps {
+    jobs: string[];
+    filters: LabelFilter[];
+    datasource: DatasourceSelector;
+    isMetadataEnabled?: boolean;
+    onExplore: (metricName: string) => void;
+}
+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): ReactElement;
+//# sourceMappingURL=JobTab.d.ts.map

package/lib/explore/PrometheusMetricsFinder/overview/tabs/JobTab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"JobTab.d.ts","sourceRoot":"","sources":["../../../../../../src/explore/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/lib/explore/PrometheusMetricsFinder/overview/tabs/JobTab.js

@@ -0,0 +1,125 @@
+// Copyright 2024 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CircularProgress, FormControl, InputLabel, MenuItem, Select, Stack, Typography } from '@mui/material';
+import { useMemo, useState } from 'react';
+import { MetricList } from '../../display/list/MetricList';
+import { useLabelValues } from '../../utils';
+export function JobList({ job, filters, datasource, isMetadataEnabled, onExplore, ...props }) {
+    const filtersWithJobWithoutName = useMemo(()=>{
+        const result = filters.filter((filter)=>filter.label !== '__name__' && filter.label !== 'job');
+        result.push({
+            label: 'job',
+            labelValues: [
+                job
+            ],
+            operator: '='
+        });
+        return result;
+    }, [
+        filters,
+        job
+    ]);
+    const { data, isLoading } = useLabelValues('__name__', filtersWithJobWithoutName, datasource);
+    if (isLoading) {
+        return /*#__PURE__*/ _jsx(Stack, {
+            width: "100%",
+            sx: {
+                alignItems: 'center',
+                justifyContent: 'center'
+            },
+            children: /*#__PURE__*/ _jsx(CircularProgress, {})
+        });
+    }
+    return /*#__PURE__*/ _jsx(MetricList, {
+        metricNames: data?.data ?? [],
+        datasource: datasource,
+        filters: filtersWithJobWithoutName,
+        isMetadataEnabled: isMetadataEnabled,
+        onExplore: onExplore,
+        ...props
+    });
+}
+export function JobSection({ jobs, filters, datasource, isMetadataEnabled, onExplore, ...props }) {
+    const [currentJob, setCurrentJob] = useState(jobs[0] ?? '');
+    if (!currentJob) {
+        return /*#__PURE__*/ _jsx(Typography, {
+            children: "Something went wrong..."
+        });
+    }
+    return /*#__PURE__*/ _jsxs(Stack, {
+        gap: 2,
+        ...props,
+        children: [
+            jobs.length > 2 && /*#__PURE__*/ _jsxs(FormControl, {
+                fullWidth: true,
+                children: [
+                    /*#__PURE__*/ _jsx(InputLabel, {
+                        id: "job-select-label",
+                        children: "Job"
+                    }),
+                    /*#__PURE__*/ _jsx(Select, {
+                        labelId: "job-select-label",
+                        id: "job-select",
+                        label: "Job",
+                        variant: "outlined",
+                        value: currentJob,
+                        onChange: (e)=>setCurrentJob(e.target.value),
+                        children: jobs.map((job)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                value: job,
+                                children: job
+                            }, job))
+                    })
+                ]
+            }),
+            currentJob && /*#__PURE__*/ _jsx(JobList, {
+                job: currentJob,
+                filters: filters,
+                datasource: datasource,
+                isMetadataEnabled: isMetadataEnabled,
+                onExplore: onExplore
+            })
+        ]
+    });
+}
+export function JobTab({ filters, datasource, isMetadataEnabled, onExplore, ...props }) {
+    const { data: jobData, isLoading: isJobLoading } = useLabelValues('job', filters, datasource);
+    if (isJobLoading) {
+        return /*#__PURE__*/ _jsx(Stack, {
+            width: "100%",
+            sx: {
+                alignItems: 'center',
+                justifyContent: 'center'
+            },
+            children: /*#__PURE__*/ _jsx(CircularProgress, {})
+        });
+    }
+    if (!jobData?.data || jobData.data.length === 0) {
+        return /*#__PURE__*/ _jsx(Stack, {
+            ...props,
+            children: /*#__PURE__*/ _jsx(Typography, {
+                children: "No jobs found"
+            })
+        });
+    }
+    return /*#__PURE__*/ _jsx(JobSection, {
+        jobs: jobData.data,
+        filters: filters,
+        datasource: datasource,
+        isMetadataEnabled: isMetadataEnabled,
+        onExplore: onExplore,
+        ...props
+    });
+}
+
+//# sourceMappingURL=JobTab.js.map

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

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

package/lib/explore/PrometheusMetricsFinder/overview/tabs/OverviewTab.d.ts

@@ -0,0 +1,25 @@
+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 {
+    label: string;
+    valueCounters: LabelValueCounter[];
+    onFilterAdd: (filter: LabelFilter) => void;
+    orderBy?: 'asc' | 'amount';
+}
+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): 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): ReactElement;
+//# sourceMappingURL=OverviewTab.d.ts.map

package/lib/explore/PrometheusMetricsFinder/overview/tabs/OverviewTab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverviewTab.d.ts","sourceRoot":"","sources":["../../../../../../src/explore/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,EAYL,UAAU,EAKX,MAAM,eAAe,CAAC;AAKvB,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,CA2DjC"}

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

@@ -0,0 +1,399 @@
+// Copyright 2024 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { Autocomplete, Button, Chip, CircularProgress, Divider, IconButton, MenuItem, Select, Skeleton, Stack, TextField, Typography, useMediaQuery, useTheme } from '@mui/material';
+import PlusIcon from 'mdi-material-ui/Plus';
+import CheckIcon from 'mdi-material-ui/Check';
+import CloseIcon from 'mdi-material-ui/Close';
+import { ErrorAlert } from '@perses-dev/components';
+import { ListboxComponent } from '../../filter/FilterInputs';
+import { useMetricMetadata, useSeriesStates } from '../../utils';
+import { MetricChip } from '../../display/MetricChip';
+export function LabelValuesRow({ label, valueCounters, onFilterAdd, ...props }) {
+    const [isAddingFilter, setIsAddingFilter] = useState(false);
+    const [operator, setOperator] = useState('=');
+    const [value, setValue] = useState('');
+    const [showAllValues, setShowAllValues] = useState(false);
+    const isMobileSize = useMediaQuery(useTheme().breakpoints.down('md'));
+    const displayedValueCounters = useMemo(()=>{
+        if (showAllValues) {
+            return valueCounters;
+        }
+        return valueCounters.slice(0, 5);
+    }, [
+        showAllValues,
+        valueCounters
+    ]);
+    return /*#__PURE__*/ _jsxs(Stack, {
+        sx: {
+            width: '100%'
+        },
+        direction: isMobileSize ? 'column' : 'row',
+        alignItems: "center",
+        gap: 2,
+        ...props,
+        children: [
+            /*#__PURE__*/ _jsxs(Stack, {
+                sx: {
+                    width: '100%',
+                    height: '100%'
+                },
+                justifyContent: "space-between",
+                alignContent: "center",
+                direction: isMobileSize ? 'column' : 'row',
+                children: [
+                    /*#__PURE__*/ _jsx(Typography, {
+                        sx: {
+                            fontFamily: 'monospace'
+                        },
+                        pl: isMobileSize ? 0 : 1,
+                        children: label
+                    }),
+                    /*#__PURE__*/ _jsx(Stack, {
+                        direction: "row",
+                        gap: 1,
+                        alignItems: "center",
+                        children: isAddingFilter ? /*#__PURE__*/ _jsxs(_Fragment, {
+                            children: [
+                                /*#__PURE__*/ _jsxs(Select, {
+                                    size: "small",
+                                    value: operator,
+                                    variant: "outlined",
+                                    onChange: (event)=>{
+                                        setOperator(event.target.value);
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ _jsx(MenuItem, {
+                                            value: "=",
+                                            children: "="
+                                        }),
+                                        /*#__PURE__*/ _jsx(MenuItem, {
+                                            value: "!=",
+                                            children: "!="
+                                        }),
+                                        /*#__PURE__*/ _jsx(MenuItem, {
+                                            value: "=~",
+                                            children: "=~"
+                                        }),
+                                        /*#__PURE__*/ _jsx(MenuItem, {
+                                            value: "!~",
+                                            children: "!~"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsx(Autocomplete, {
+                                    freeSolo: true,
+                                    limitTags: 1,
+                                    disableClearable: true,
+                                    options: valueCounters.map((counters)=>counters.labelValue),
+                                    value: value,
+                                    ListboxComponent: ListboxComponent,
+                                    sx: {
+                                        width: 250
+                                    },
+                                    renderInput: (params)=>{
+                                        return /*#__PURE__*/ _jsx(TextField, {
+                                            ...params,
+                                            label: "Value",
+                                            variant: "outlined",
+                                            fullWidth: true,
+                                            size: "small"
+                                        });
+                                    },
+                                    onInputChange: (_, newValue)=>{
+                                        setValue(newValue);
+                                    }
+                                }),
+                                /*#__PURE__*/ _jsx(IconButton, {
+                                    "aria-label": "confirm",
+                                    onClick: ()=>{
+                                        onFilterAdd({
+                                            label,
+                                            labelValues: [
+                                                value
+                                            ],
+                                            operator
+                                        });
+                                        setIsAddingFilter(false);
+                                    },
+                                    children: /*#__PURE__*/ _jsx(CheckIcon, {})
+                                }),
+                                /*#__PURE__*/ _jsx(IconButton, {
+                                    "aria-label": "cancel",
+                                    onClick: ()=>{
+                                        setIsAddingFilter(false);
+                                    },
+                                    children: /*#__PURE__*/ _jsx(CloseIcon, {})
+                                })
+                            ]
+                        }) : /*#__PURE__*/ _jsx(Button, {
+                            startIcon: /*#__PURE__*/ _jsx(PlusIcon, {}),
+                            "aria-label": "add filter",
+                            onClick: ()=>setIsAddingFilter(true),
+                            children: "Add filter"
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(Stack, {
+                sx: {
+                    width: '100%'
+                },
+                gap: 0.5,
+                children: [
+                    /*#__PURE__*/ _jsx(Stack, {
+                        direction: "row",
+                        gap: 2,
+                        children: /*#__PURE__*/ _jsxs(Typography, {
+                            variant: "subtitle1",
+                            children: [
+                                valueCounters.length,
+                                " values"
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Stack, {
+                        sx: {
+                            overflow: isMobileSize ? 'auto' : 'unset'
+                        },
+                        children: displayedValueCounters.map((labelValueCounter)=>/*#__PURE__*/ _jsxs(Stack, {
+                                direction: "row",
+                                gap: 2,
+                                children: [
+                                    /*#__PURE__*/ _jsx(Typography, {
+                                        sx: {
+                                            color: (theme)=>theme.palette.success.main,
+                                            fontFamily: 'monospace',
+                                            ':hover': {
+                                                backgroundColor: 'rgba(127,127,127,0.35)',
+                                                cursor: 'pointer'
+                                            },
+                                            textWrap: isMobileSize ? 'nowrap' : 'unset'
+                                        },
+                                        onClick: ()=>onFilterAdd({
+                                                label,
+                                                labelValues: [
+                                                    labelValueCounter.labelValue
+                                                ],
+                                                operator: '='
+                                            }),
+                                        children: labelValueCounter.labelValue
+                                    }),
+                                    /*#__PURE__*/ _jsxs(Typography, {
+                                        sx: {
+                                            textWrap: 'nowrap'
+                                        },
+                                        children: [
+                                            "(",
+                                            labelValueCounter.counter,
+                                            " series)"
+                                        ]
+                                    })
+                                ]
+                            }, `${label}-${labelValueCounter.labelValue}`))
+                    }),
+                    /*#__PURE__*/ _jsx(Stack, {
+                        width: "100%",
+                        textAlign: isMobileSize ? 'center' : 'unset',
+                        children: showAllValues ? /*#__PURE__*/ _jsx(Button, {
+                            variant: "text",
+                            sx: {
+                                width: 'fit-content'
+                            },
+                            onClick: ()=>setShowAllValues(false),
+                            children: "Hide full values"
+                        }) : /*#__PURE__*/ _jsx(_Fragment, {
+                            children: valueCounters.length > 5 && /*#__PURE__*/ _jsxs(Button, {
+                                variant: "text",
+                                sx: {
+                                    width: 'fit-content'
+                                },
+                                onClick: ()=>setShowAllValues(true),
+                                children: [
+                                    "Show ",
+                                    valueCounters.length - 5,
+                                    " more values"
+                                ]
+                            })
+                        })
+                    })
+                ]
+            })
+        ]
+    }, label);
+}
+export function LabelValuesTable({ labelValueCounters, isLoading, onFilterAdd, ...props }) {
+    const labels = useMemo(()=>{
+        return [
+            ...labelValueCounters.keys()
+        ].sort();
+    }, [
+        labelValueCounters
+    ]);
+    if (isLoading) {
+        return /*#__PURE__*/ _jsx(Stack, {
+            width: "100%",
+            sx: {
+                alignItems: 'center',
+                justifyContent: 'center'
+            },
+            children: /*#__PURE__*/ _jsx(CircularProgress, {})
+        });
+    }
+    return /*#__PURE__*/ _jsxs(Stack, {
+        sx: {
+            width: '100%'
+        },
+        divider: /*#__PURE__*/ _jsx(Divider, {
+            flexItem: true,
+            orientation: "horizontal"
+        }),
+        gap: 2,
+        ...props,
+        children: [
+            /*#__PURE__*/ _jsxs(Stack, {
+                gap: 2,
+                direction: "row",
+                sx: {
+                    width: '100%'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(Stack, {
+                        sx: {
+                            width: '100%'
+                        },
+                        children: /*#__PURE__*/ _jsx(Typography, {
+                            variant: "h3",
+                            children: "Label"
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Stack, {
+                        sx: {
+                            width: '100%'
+                        },
+                        children: /*#__PURE__*/ _jsx(Typography, {
+                            variant: "h3",
+                            children: "Values"
+                        })
+                    })
+                ]
+            }),
+            labels.map((label)=>/*#__PURE__*/ _jsx(LabelValuesRow, {
+                    label: label,
+                    valueCounters: labelValueCounters.get(label) ?? [],
+                    onFilterAdd: onFilterAdd
+                }, label))
+        ]
+    });
+}
+export function OverviewTab({ metricName, datasource, filters, onFilterAdd, ...props }) {
+    const { metadata, isLoading: isMetadataLoading, error: metadataError } = useMetricMetadata(metricName, datasource);
+    const { series, labelValueCounters, isLoading, error } = useSeriesStates(metricName, filters, datasource);
+    return /*#__PURE__*/ _jsxs(Stack, {
+        gap: 2,
+        ...props,
+        children: [
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                gap: 3,
+                mt: 1,
+                justifyContent: "space-between",
+                children: [
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        gap: 1,
+                        children: [
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "h1",
+                                sx: {
+                                    fontFamily: 'monospace'
+                                },
+                                children: metricName
+                            }),
+                            /*#__PURE__*/ _jsx(Typography, {
+                                children: "Description:"
+                            }),
+                            isMetadataLoading ? /*#__PURE__*/ _jsx(Skeleton, {
+                                variant: "text",
+                                width: 180
+                            }) : /*#__PURE__*/ _jsx(Typography, {
+                                style: {
+                                    fontStyle: metadata?.help ? 'initial' : 'italic'
+                                },
+                                children: metadataError ? 'Failed to fetch metadata' : metadata?.help ?? 'unknown'
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        gap: 1,
+                        justifyContent: "center",
+                        children: [
+                            isMetadataLoading ? /*#__PURE__*/ _jsx(Skeleton, {
+                                variant: "rounded",
+                                width: 75
+                            }) : metadataError ? /*#__PURE__*/ _jsx(Chip, {
+                                label: "failed to fetch",
+                                color: "error",
+                                sx: {
+                                    fontStyle: 'italic'
+                                }
+                            }) : /*#__PURE__*/ _jsx(MetricChip, {
+                                label: metadata?.type ?? 'unknown'
+                            }),
+                            /*#__PURE__*/ _jsxs(Typography, {
+                                children: [
+                                    "Result:",
+                                    ' ',
+                                    isLoading ? /*#__PURE__*/ _jsx(Skeleton, {
+                                        variant: "text",
+                                        width: 20,
+                                        sx: {
+                                            display: 'inline-block'
+                                        }
+                                    }) : error ? /*#__PURE__*/ _jsx("strong", {
+                                        children: "failed to fetch series"
+                                    }) : /*#__PURE__*/ _jsxs("strong", {
+                                        children: [
+                                            series?.length ?? 'unknown',
+                                            " series"
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            }),
+            error ? /*#__PURE__*/ _jsx(ErrorAlert, {
+                error: {
+                    name: `Failed to fetch series ${error?.status && `(${error.status})`}`,
+                    message: error?.message ?? 'Failed to fetch series'
+                }
+            }) : series?.length === 0 ? /*#__PURE__*/ _jsx(Stack, {
+                ...props,
+                children: /*#__PURE__*/ _jsx(Typography, {
+                    sx: {
+                        color: (theme)=>theme.palette.warning.main
+                    },
+                    children: "No series found with current filters."
+                })
+            }) : /*#__PURE__*/ _jsx(LabelValuesTable, {
+                labelValueCounters: labelValueCounters,
+                onFilterAdd: onFilterAdd,
+                isLoading: isLoading
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=OverviewTab.js.map