@perses-dev/explore 0.47.1 → 0.48.0-rc0

package/dist/cjs/components/ExploreManager/ExplorerManagerProvider.js

@@ -78,53 +78,39 @@ function ExplorerManagerProvider({ children, store: externalStore }) {
     // local store in case external store is not provided by prop
     const localStore = (0, _react.useState)({
         explorer: 'metrics',
-        tab: 0,
-        queries: []
+        data: {}
     });
     // use store provided by 'store' prop if available, otherwise use local store
     const [explorerState, setExplorerState] = externalStore ? externalStore : localStore;
-    const { explorer, tab, queries } = explorerState;
+    const { explorer, data } = explorerState;
     function setExplorer(newExplorer) {
         // store current explorer state
         explorerStateCache[explorer] = {
-            tab,
-            queries
+            data
         };
         setExplorerStateCache(explorerStateCache);
         var _explorerStateCache_newExplorer;
         // restore previous explorer state (if any)
         const state = (_explorerStateCache_newExplorer = explorerStateCache[newExplorer]) !== null && _explorerStateCache_newExplorer !== void 0 ? _explorerStateCache_newExplorer : {
-            tab: 0,
-            queries: []
+            data: {}
         };
         setExplorerState({
             explorer: newExplorer,
-            tab: state.tab,
-            queries: state.queries
+            data: state.data
         });
     }
-    function setTab(newTab) {
+    function setData(newData) {
         setExplorerState({
             explorer,
-            tab: newTab,
-            queries
-        });
-    }
-    function setQueries(newQueries) {
-        setExplorerState({
-            explorer,
-            tab,
-            queries: newQueries
+            data: newData
         });
     }
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(ExplorerManagerContext.Provider, {
         value: {
             explorer,
-            tab,
-            queries,
+            data,
             setExplorer,
-            setTab,
-            setQueries
+            setData
         },
         children: children
     });

package/dist/cjs/components/ExploreManager/ExplorerManagerProviderWithQueryParams.js

@@ -34,8 +34,7 @@ const exploreQueryConfig = {
         'metrics',
         'traces'
     ]), 'metrics'),
-    tab: (0, _usequeryparams.withDefault)(_usequeryparams.NumberParam, 0),
-    queries: (0, _usequeryparams.withDefault)(_usequeryparams.JsonParam, [])
+    data: (0, _usequeryparams.withDefault)(_usequeryparams.JsonParam, {})
 };
 function ExplorerManagerProviderWithQueryParams({ children }) {
     const [queryParams, setQueryParams] = (0, _usequeryparams.useQueryParams)(exploreQueryConfig);

package/dist/cjs/components/ExploreManager/MetricsExplorer.js

@@ -25,6 +25,8 @@ const _material = require("@mui/material");
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _useresizeobserver = /*#__PURE__*/ _interop_require_default(require("use-resize-observer"));
 const _dashboards = require("@perses-dev/dashboards");
+const _prometheusplugin = require("@perses-dev/prometheus-plugin");
+const _PrometheusMetricsFinder = require("../PrometheusMetricsFinder");
 const _constants = require("./constants");
 const _ExplorerManagerProvider = require("./ExplorerManagerProvider");
 function _interop_require_default(obj) {
@@ -76,7 +78,7 @@ function TimeSeriesPanel({ queries }) {
 function MetricDataTable({ queries }) {
     const height = _constants.PANEL_PREVIEW_HEIGHT;
     // map TimeSeriesQueryDefinition to Definition<UnknownSpec>
-    const definitions = (queries !== null && queries !== void 0 ? queries : []).map((query)=>{
+    const definitions = queries.map((query)=>{
         return {
             kind: query.spec.plugin.kind,
             spec: query.spec.plugin.spec
@@ -111,23 +113,19 @@ function MetricDataTable({ queries }) {
     });
 }
 function MetricsExplorer() {
-    const { tab, queries, setTab, setQueries } = (0, _ExplorerManagerProvider.useExplorerManagerContext)();
+    const { data: { tab = 'table', queries = [], datasource = _prometheusplugin.DEFAULT_PROM, filters = [], exploredMetric = undefined }, setData } = (0, _ExplorerManagerProvider.useExplorerManagerContext)();
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
         gap: 2,
         sx: {
             width: '100%'
         },
         children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.MultiQueryEditor, {
-                queryTypes: [
-                    'TimeSeriesQuery'
-                ],
-                onChange: setQueries,
-                queries: queries
-            }),
             /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Tabs, {
                 value: tab,
-                onChange: (_, state)=>setTab(state),
+                onChange: (_, state)=>setData({
+                        tab: state,
+                        queries
+                    }),
                 variant: "scrollable",
                 sx: {
                     borderBottom: 1,
@@ -135,21 +133,68 @@ function MetricsExplorer() {
                 },
                 children: [
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tab, {
+                        value: "table",
                         label: "Table"
                     }),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tab, {
+                        value: "graph",
                         label: "Graph"
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tab, {
+                        value: "finder",
+                        label: "Finder"
                     })
                 ]
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
                 gap: 1,
                 children: [
-                    tab === 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(MetricDataTable, {
-                        queries: queries
+                    tab === 'table' && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.MultiQueryEditor, {
+                                queryTypes: [
+                                    'TimeSeriesQuery'
+                                ],
+                                onChange: (state)=>setData({
+                                        tab,
+                                        queries: state
+                                    }),
+                                queries: queries
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(MetricDataTable, {
+                                queries: queries
+                            })
+                        ]
+                    }),
+                    tab === 'graph' && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.MultiQueryEditor, {
+                                queryTypes: [
+                                    'TimeSeriesQuery'
+                                ],
+                                onChange: (state)=>setData({
+                                        tab,
+                                        queries: state
+                                    }),
+                                queries: queries
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(TimeSeriesPanel, {
+                                queries: queries
+                            })
+                        ]
                     }),
-                    tab === 1 && /*#__PURE__*/ (0, _jsxruntime.jsx)(TimeSeriesPanel, {
-                        queries: queries
+                    tab === 'finder' && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PrometheusMetricsFinder.PrometheusMetricsFinder, {
+                            onChange: (state)=>setData({
+                                    tab,
+                                    ...state
+                                }),
+                            value: {
+                                datasource,
+                                filters,
+                                exploredMetric
+                            }
+                        })
                     })
                 ]
             })

package/dist/cjs/components/ExploreManager/TracesExplorer.js

@@ -127,7 +127,7 @@ function TracingGanttChartPanel({ queries }) {
 }
 function TracesExplorer() {
     var _queries_, _queries_1, _queries_2;
-    const { queries, setQueries } = (0, _ExplorerManagerProvider.useExplorerManagerContext)();
+    const { data: { queries = [] }, setData } = (0, _ExplorerManagerProvider.useExplorerManagerContext)();
     // map TraceQueryDefinition to Definition<UnknownSpec>
     const definitions = queries.length ? queries.map((query)=>{
         return {
@@ -148,7 +148,9 @@ function TracesExplorer() {
                 queryTypes: [
                     'TraceQuery'
                 ],
-                onChange: setQueries,
+                onChange: (newQueries)=>setData({
+                        queries: newQueries
+                    }),
                 queries: queries
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {

package/dist/cjs/components/ExploreManager/query-params.js

@@ -0,0 +1,49 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    explorerQueryConfig: function() {
+        return explorerQueryConfig;
+    },
+    useExplorerQueryParams: function() {
+        return useExplorerQueryParams;
+    }
+});
+const _usequeryparams = require("use-query-params");
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _qs = require("qs");
+const explorerQueryConfig = {
+    refresh: _pluginsystem.TimeRangeParam,
+    start: _pluginsystem.TimeRangeParam,
+    end: _pluginsystem.TimeRangeParam,
+    explorer: _usequeryparams.StringParam,
+    data: _usequeryparams.JsonParam
+};
+function useExplorerQueryParams(inputs) {
+    const [query] = (0, _usequeryparams.useQueryParams)(explorerQueryConfig, {
+        updateType: 'replaceIn'
+    });
+    return (0, _qs.stringify)((0, _usequeryparams.encodeQueryParams)(explorerQueryConfig, {
+        ...query,
+        ...inputs
+    }));
+}

package/dist/cjs/components/PrometheusMetricsFinder/PrometheusMetricsFinder.js

@@ -0,0 +1,209 @@
+// Copyright 2024 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    MetricNameExplorer: function() {
+        return MetricNameExplorer;
+    },
+    PrometheusMetricsFinder: function() {
+        return PrometheusMetricsFinder;
+    },
+    SettingsMenu: function() {
+        return SettingsMenu;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _prometheusplugin = require("@perses-dev/prometheus-plugin");
+const _react = require("react");
+const _ArrowLeft = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ArrowLeft"));
+const _Cog = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Cog"));
+const _reactrouterdom = require("react-router-dom");
+const _queryparams = require("../ExploreManager/query-params");
+const _FinderFilters = require("./filter/FinderFilters");
+const _MetricList = require("./display/list/MetricList");
+const _MetricOverview = require("./overview/MetricOverview");
+const _utils = require("./utils");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const PERSES_METRICS_FINDER_SETTINGS = 'PERSES_METRICS_FINDER_SETTINGS';
+function SettingsMenu({ value, onChange }) {
+    const [anchorEl, setAnchorEl] = (0, _react.useState)(null);
+    const open = Boolean(anchorEl);
+    const handleClick = (event)=>{
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = ()=>{
+        setAnchorEl(null);
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                "aria-label": "settings",
+                size: "large",
+                onClick: handleClick,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Cog.default, {})
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Menu, {
+                id: "finder-settings-menu",
+                anchorEl: anchorEl,
+                open: open,
+                onClose: handleClose,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                    onClick: (e)=>e.preventDefault(),
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
+                        control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Checkbox, {}),
+                        label: "Enable Metadata",
+                        checked: value.isMetadataEnabled,
+                        onClick: ()=>onChange({
+                                isMetadataEnabled: !value.isMetadataEnabled
+                            })
+                    })
+                })
+            })
+        ]
+    });
+}
+function MetricNameExplorer({ datasource, filters, isMetadataEnabled, onExplore, ...props }) {
+    const { data, isLoading } = (0, _utils.useLabelValues)('__name__', filters, datasource);
+    if (isLoading) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+            width: "100%",
+            sx: {
+                alignItems: 'center',
+                justifyContent: 'center'
+            },
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CircularProgress, {})
+        });
+    }
+    var _data_data;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_MetricList.MetricList, {
+        metricNames: (_data_data = data === null || data === void 0 ? void 0 : data.data) !== null && _data_data !== void 0 ? _data_data : [],
+        datasource: datasource,
+        filters: filters,
+        isMetadataEnabled: isMetadataEnabled,
+        onExplore: onExplore,
+        ...props
+    });
+}
+function PrometheusMetricsFinder({ value: { datasource = _prometheusplugin.DEFAULT_PROM, filters = [], exploredMetric }, onChange, onExplore, ...props }) {
+    const settingsStored = localStorage.getItem(PERSES_METRICS_FINDER_SETTINGS);
+    const [settings, setSettings] = (0, _react.useState)(settingsStored ? JSON.parse(settingsStored) : {
+        isMetadataEnabled: true
+    });
+    function handleSettingsUpdate(value) {
+        setSettings(value);
+        localStorage.setItem(PERSES_METRICS_FINDER_SETTINGS, JSON.stringify(value));
+    }
+    const isMobileSize = (0, _material.useMediaQuery)((0, _material.useTheme)().breakpoints.down('md'));
+    // Remove duplicated filters and filters without label or labelValues
+    const filteredFilters = (0, _react.useMemo)(()=>{
+        return filters.filter((filter)=>filter.label && filter.labelValues.length > 0);
+    }, [
+        filters
+    ]);
+    const searchParams = (0, _queryparams.useExplorerQueryParams)({
+        data: {
+            tab: 'finder',
+            datasource,
+            filters,
+            exploredMetric: undefined
+        }
+    });
+    function setDatasource(value) {
+        onChange({
+            datasource: value,
+            filters,
+            exploredMetric
+        });
+    }
+    function setFilters(value) {
+        onChange({
+            datasource,
+            filters: value,
+            exploredMetric
+        });
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+        ...props,
+        gap: 1,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                direction: isMobileSize ? 'column' : 'row',
+                gap: 2,
+                justifyContent: "space-between",
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_FinderFilters.FinderFilters, {
+                        datasource: datasource !== null && datasource !== void 0 ? datasource : _prometheusplugin.DEFAULT_PROM,
+                        filters: filters !== null && filters !== void 0 ? filters : [],
+                        filteredFilters: filteredFilters,
+                        onDatasourceChange: setDatasource,
+                        onFiltersChange: setFilters
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                        direction: "row",
+                        gap: 1,
+                        alignItems: "center",
+                        children: [
+                            exploredMetric && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                                variant: "contained",
+                                "aria-label": "back to metric explorer",
+                                startIcon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ArrowLeft.default, {}),
+                                component: _reactrouterdom.Link,
+                                to: `?${searchParams}`,
+                                children: "Back"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+                                direction: "row",
+                                sx: {
+                                    width: isMobileSize ? '100%' : 'unset'
+                                },
+                                justifyContent: isMobileSize ? 'end' : 'unset',
+                                alignItems: "center",
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(SettingsMenu, {
+                                    value: settings,
+                                    onChange: handleSettingsUpdate
+                                })
+                            })
+                        ]
+                    })
+                ]
+            }),
+            exploredMetric ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_MetricOverview.MetricOverview, {
+                metricName: exploredMetric,
+                datasource: datasource !== null && datasource !== void 0 ? datasource : _prometheusplugin.DEFAULT_PROM,
+                filters: filteredFilters,
+                isMetadataEnabled: settings.isMetadataEnabled,
+                onFiltersChange: setFilters,
+                onExplore: onExplore
+            }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(MetricNameExplorer, {
+                datasource: datasource !== null && datasource !== void 0 ? datasource : _prometheusplugin.DEFAULT_PROM,
+                filters: filteredFilters,
+                isMetadataEnabled: settings.isMetadataEnabled,
+                onExplore: onExplore
+            })
+        ]
+    });
+}

package/dist/cjs/components/PrometheusMetricsFinder/display/MetricChip.js

@@ -0,0 +1,61 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "MetricChip", {
+    enumerable: true,
+    get: function() {
+        return MetricChip;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+function MetricChip({ label, ...props }) {
+    if (label === 'gauge') {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Chip, {
+            label: label,
+            color: "success",
+            ...props
+        });
+    }
+    if (label === 'counter') {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Chip, {
+            label: label,
+            color: "primary",
+            ...props
+        });
+    }
+    if (label === 'histogram') {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Chip, {
+            label: label,
+            color: "warning",
+            ...props
+        });
+    }
+    if (label === 'summary') {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Chip, {
+            label: label,
+            color: "secondary",
+            ...props
+        });
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Chip, {
+        label: label,
+        sx: {
+            fontStyle: label === 'unknown' ? 'italic' : 'initial'
+        },
+        ...props
+    });
+}