@perses-dev/explore 0.49.0 → 0.50.0-rc.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/PrometheusMetricsFinder/PrometheusMetricsFinder.js +111 -19
- package/dist/cjs/components/PrometheusMetricsFinder/display/list/MetricList.js +75 -8
- package/dist/cjs/components/PrometheusMetricsFinder/overview/MetricOverview.js +3 -3
- package/dist/cjs/components/PrometheusMetricsFinder/overview/tabs/OverviewTab.js +1 -1
- package/dist/cjs/views/ViewExplore/ViewExploreApp.js +2 -2
- package/dist/components/ExploreManager/ExploreManager.d.ts +2 -2
- package/dist/components/ExploreManager/ExploreManager.d.ts.map +1 -1
- package/dist/components/ExploreManager/ExploreManager.js.map +1 -1
- package/dist/components/ExploreManager/ExplorerManagerProvider.d.ts +2 -2
- package/dist/components/ExploreManager/ExplorerManagerProvider.d.ts.map +1 -1
- package/dist/components/ExploreManager/ExplorerManagerProvider.js.map +1 -1
- package/dist/components/ExploreManager/ExplorerManagerProviderWithQueryParams.d.ts +2 -2
- package/dist/components/ExploreManager/ExplorerManagerProviderWithQueryParams.d.ts.map +1 -1
- package/dist/components/ExploreManager/ExplorerManagerProviderWithQueryParams.js.map +1 -1
- package/dist/components/ExploreManager/MetricsExplorer.d.ts +2 -1
- package/dist/components/ExploreManager/MetricsExplorer.d.ts.map +1 -1
- package/dist/components/ExploreManager/MetricsExplorer.js.map +1 -1
- package/dist/components/ExploreManager/TracesExplorer.d.ts +2 -1
- package/dist/components/ExploreManager/TracesExplorer.d.ts.map +1 -1
- package/dist/components/ExploreManager/TracesExplorer.js.map +1 -1
- package/dist/components/ExploreToolbar/ExploreToolbar.d.ts +2 -2
- package/dist/components/ExploreToolbar/ExploreToolbar.d.ts.map +1 -1
- package/dist/components/ExploreToolbar/ExploreToolbar.js.map +1 -1
- package/dist/components/PrometheusMetricsFinder/PrometheusMetricsFinder.d.ts +6 -5
- package/dist/components/PrometheusMetricsFinder/PrometheusMetricsFinder.d.ts.map +1 -1
- package/dist/components/PrometheusMetricsFinder/PrometheusMetricsFinder.js +71 -20
- package/dist/components/PrometheusMetricsFinder/PrometheusMetricsFinder.js.map +1 -1
- package/dist/components/PrometheusMetricsFinder/display/MetricChip.d.ts +2 -1
- package/dist/components/PrometheusMetricsFinder/display/MetricChip.d.ts.map +1 -1
- package/dist/components/PrometheusMetricsFinder/display/MetricChip.js.map +1 -1
- package/dist/components/PrometheusMetricsFinder/display/list/MetricList.d.ts +9 -2
- package/dist/components/PrometheusMetricsFinder/display/list/MetricList.d.ts.map +1 -1
- package/dist/components/PrometheusMetricsFinder/display/list/MetricList.js +34 -8
- package/dist/components/PrometheusMetricsFinder/display/list/MetricList.js.map +1 -1
- package/dist/components/PrometheusMetricsFinder/filter/FilterInputs.d.ts +3 -3
- package/dist/components/PrometheusMetricsFinder/filter/FilterInputs.d.ts.map +1 -1
- package/dist/components/PrometheusMetricsFinder/filter/FilterInputs.js.map +1 -1
- package/dist/components/PrometheusMetricsFinder/filter/FinderFilters.d.ts +2 -1
- package/dist/components/PrometheusMetricsFinder/filter/FinderFilters.d.ts.map +1 -1
- package/dist/components/PrometheusMetricsFinder/filter/FinderFilters.js.map +1 -1
- package/dist/components/PrometheusMetricsFinder/overview/MetricOverview.d.ts +4 -2
- package/dist/components/PrometheusMetricsFinder/overview/MetricOverview.d.ts.map +1 -1
- package/dist/components/PrometheusMetricsFinder/overview/MetricOverview.js +3 -3
- package/dist/components/PrometheusMetricsFinder/overview/MetricOverview.js.map +1 -1
- package/dist/components/PrometheusMetricsFinder/overview/tabs/JobTab.d.ts +4 -3
- package/dist/components/PrometheusMetricsFinder/overview/tabs/JobTab.d.ts.map +1 -1
- package/dist/components/PrometheusMetricsFinder/overview/tabs/JobTab.js.map +1 -1
- package/dist/components/PrometheusMetricsFinder/overview/tabs/OverviewTab.d.ts +4 -3
- package/dist/components/PrometheusMetricsFinder/overview/tabs/OverviewTab.d.ts.map +1 -1
- package/dist/components/PrometheusMetricsFinder/overview/tabs/OverviewTab.js +1 -1
- package/dist/components/PrometheusMetricsFinder/overview/tabs/OverviewTab.js.map +1 -1
- package/dist/components/PrometheusMetricsFinder/overview/tabs/SimilarTab.d.ts +2 -1
- package/dist/components/PrometheusMetricsFinder/overview/tabs/SimilarTab.d.ts.map +1 -1
- package/dist/components/PrometheusMetricsFinder/overview/tabs/SimilarTab.js.map +1 -1
- package/dist/components/PrometheusMetricsFinder/types.d.ts +1 -0
- package/dist/components/PrometheusMetricsFinder/types.d.ts.map +1 -1
- package/dist/components/PrometheusMetricsFinder/types.js.map +1 -1
- package/dist/components/PrometheusMetricsFinder/utils.d.ts +4 -3
- package/dist/components/PrometheusMetricsFinder/utils.d.ts.map +1 -1
- package/dist/components/PrometheusMetricsFinder/utils.js.map +1 -1
- package/dist/views/ViewExplore/ViewExplore.d.ts +2 -2
- package/dist/views/ViewExplore/ViewExplore.d.ts.map +1 -1
- package/dist/views/ViewExplore/ViewExplore.js.map +1 -1
- package/dist/views/ViewExplore/ViewExploreApp.d.ts +2 -2
- package/dist/views/ViewExplore/ViewExploreApp.d.ts.map +1 -1
- package/dist/views/ViewExplore/ViewExploreApp.js +1 -1
- package/dist/views/ViewExplore/ViewExploreApp.js.map +1 -1
- package/package.json +13 -12
|
@@ -34,10 +34,12 @@ _export(exports, {
|
|
|
34
34
|
const _jsxruntime = require("react/jsx-runtime");
|
|
35
35
|
const _material = require("@mui/material");
|
|
36
36
|
const _prometheusplugin = require("@perses-dev/prometheus-plugin");
|
|
37
|
-
const _react = require("react");
|
|
37
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
|
|
38
38
|
const _ArrowLeft = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ArrowLeft"));
|
|
39
39
|
const _Cog = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Cog"));
|
|
40
40
|
const _reactrouterdom = require("react-router-dom");
|
|
41
|
+
const _fuzzy = require("@nexucis/fuzzy");
|
|
42
|
+
const _Magnify = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Magnify"));
|
|
41
43
|
const _queryparams = require("../ExploreManager/query-params");
|
|
42
44
|
const _FinderFilters = require("./filter/FinderFilters");
|
|
43
45
|
const _MetricList = require("./display/list/MetricList");
|
|
@@ -48,6 +50,47 @@ function _interop_require_default(obj) {
|
|
|
48
50
|
default: obj
|
|
49
51
|
};
|
|
50
52
|
}
|
|
53
|
+
function _getRequireWildcardCache(nodeInterop) {
|
|
54
|
+
if (typeof WeakMap !== "function") return null;
|
|
55
|
+
var cacheBabelInterop = new WeakMap();
|
|
56
|
+
var cacheNodeInterop = new WeakMap();
|
|
57
|
+
return (_getRequireWildcardCache = function(nodeInterop) {
|
|
58
|
+
return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
|
|
59
|
+
})(nodeInterop);
|
|
60
|
+
}
|
|
61
|
+
function _interop_require_wildcard(obj, nodeInterop) {
|
|
62
|
+
if (!nodeInterop && obj && obj.__esModule) {
|
|
63
|
+
return obj;
|
|
64
|
+
}
|
|
65
|
+
if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
|
|
66
|
+
return {
|
|
67
|
+
default: obj
|
|
68
|
+
};
|
|
69
|
+
}
|
|
70
|
+
var cache = _getRequireWildcardCache(nodeInterop);
|
|
71
|
+
if (cache && cache.has(obj)) {
|
|
72
|
+
return cache.get(obj);
|
|
73
|
+
}
|
|
74
|
+
var newObj = {
|
|
75
|
+
__proto__: null
|
|
76
|
+
};
|
|
77
|
+
var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
|
|
78
|
+
for(var key in obj){
|
|
79
|
+
if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
|
|
80
|
+
var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
|
|
81
|
+
if (desc && (desc.get || desc.set)) {
|
|
82
|
+
Object.defineProperty(newObj, key, desc);
|
|
83
|
+
} else {
|
|
84
|
+
newObj[key] = obj[key];
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
newObj.default = obj;
|
|
89
|
+
if (cache) {
|
|
90
|
+
cache.set(obj, newObj);
|
|
91
|
+
}
|
|
92
|
+
return newObj;
|
|
93
|
+
}
|
|
51
94
|
const PERSES_METRICS_FINDER_SETTINGS = 'PERSES_METRICS_FINDER_SETTINGS';
|
|
52
95
|
function SettingsMenu({ value, onChange }) {
|
|
53
96
|
const [anchorEl, setAnchorEl] = (0, _react.useState)(null);
|
|
@@ -66,28 +109,60 @@ function SettingsMenu({ value, onChange }) {
|
|
|
66
109
|
onClick: handleClick,
|
|
67
110
|
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Cog.default, {})
|
|
68
111
|
}),
|
|
69
|
-
/*#__PURE__*/ (0, _jsxruntime.
|
|
112
|
+
/*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Menu, {
|
|
70
113
|
id: "finder-settings-menu",
|
|
71
114
|
anchorEl: anchorEl,
|
|
72
115
|
open: open,
|
|
73
116
|
onClose: handleClose,
|
|
74
|
-
children:
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
117
|
+
children: [
|
|
118
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
|
|
119
|
+
onClick: (e)=>e.preventDefault(),
|
|
120
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
|
|
121
|
+
control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Checkbox, {}),
|
|
122
|
+
label: "Enable Metadata",
|
|
123
|
+
checked: value.isMetadataEnabled,
|
|
124
|
+
onClick: ()=>onChange({
|
|
125
|
+
...value,
|
|
126
|
+
isMetadataEnabled: !value.isMetadataEnabled
|
|
127
|
+
})
|
|
128
|
+
})
|
|
129
|
+
}),
|
|
130
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
|
|
131
|
+
onClick: (e)=>e.preventDefault(),
|
|
132
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
|
|
133
|
+
control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Checkbox, {}),
|
|
134
|
+
label: "Enable Time Series Chart",
|
|
135
|
+
checked: value.isPanelEnabled,
|
|
136
|
+
onClick: ()=>onChange({
|
|
137
|
+
...value,
|
|
138
|
+
isPanelEnabled: !value.isPanelEnabled
|
|
139
|
+
})
|
|
140
|
+
})
|
|
83
141
|
})
|
|
84
|
-
|
|
142
|
+
]
|
|
85
143
|
})
|
|
86
144
|
]
|
|
87
145
|
});
|
|
88
146
|
}
|
|
89
147
|
function MetricNameExplorer({ datasource, filters, isMetadataEnabled, onExplore, ...props }) {
|
|
90
148
|
const { data, isLoading } = (0, _utils.useLabelValues)('__name__', filters, datasource);
|
|
149
|
+
const [search, setSearch] = (0, _react.useState)('');
|
|
150
|
+
const fuzzy = (0, _react.useMemo)(()=>new _fuzzy.Fuzzy({
|
|
151
|
+
includeMatches: true,
|
|
152
|
+
excludedChars: [
|
|
153
|
+
' '
|
|
154
|
+
]
|
|
155
|
+
}), []);
|
|
156
|
+
const filteredResults = (0, _react.useMemo)(()=>{
|
|
157
|
+
if (search && (data === null || data === void 0 ? void 0 : data.data)) {
|
|
158
|
+
return fuzzy.filter(search, data.data).sort((a, b)=>b.score - a.score);
|
|
159
|
+
}
|
|
160
|
+
return undefined;
|
|
161
|
+
}, [
|
|
162
|
+
data,
|
|
163
|
+
fuzzy,
|
|
164
|
+
search
|
|
165
|
+
]);
|
|
91
166
|
if (isLoading) {
|
|
92
167
|
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
|
|
93
168
|
width: "100%",
|
|
@@ -99,13 +174,29 @@ function MetricNameExplorer({ datasource, filters, isMetadataEnabled, onExplore,
|
|
|
99
174
|
});
|
|
100
175
|
}
|
|
101
176
|
var _data_data;
|
|
102
|
-
return /*#__PURE__*/ (0, _jsxruntime.
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
177
|
+
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
|
|
178
|
+
...props,
|
|
179
|
+
children: [
|
|
180
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
|
|
181
|
+
value: search,
|
|
182
|
+
onChange: (e)=>setSearch(e.target.value),
|
|
183
|
+
placeholder: "Search metric name...",
|
|
184
|
+
InputProps: {
|
|
185
|
+
startAdornment: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.InputAdornment, {
|
|
186
|
+
position: "start",
|
|
187
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Magnify.default, {})
|
|
188
|
+
})
|
|
189
|
+
}
|
|
190
|
+
}),
|
|
191
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_MetricList.MetricList, {
|
|
192
|
+
metricNames: (_data_data = data === null || data === void 0 ? void 0 : data.data) !== null && _data_data !== void 0 ? _data_data : [],
|
|
193
|
+
filteredResults: filteredResults,
|
|
194
|
+
datasource: datasource,
|
|
195
|
+
filters: filters,
|
|
196
|
+
isMetadataEnabled: isMetadataEnabled,
|
|
197
|
+
onExplore: onExplore
|
|
198
|
+
})
|
|
199
|
+
]
|
|
109
200
|
});
|
|
110
201
|
}
|
|
111
202
|
function PrometheusMetricsFinder({ value: { datasource = _prometheusplugin.DEFAULT_PROM, filters = [], exploredMetric }, onChange, onExplore, ...props }) {
|
|
@@ -196,6 +287,7 @@ function PrometheusMetricsFinder({ value: { datasource = _prometheusplugin.DEFAU
|
|
|
196
287
|
datasource: datasource !== null && datasource !== void 0 ? datasource : _prometheusplugin.DEFAULT_PROM,
|
|
197
288
|
filters: filteredFilters,
|
|
198
289
|
isMetadataEnabled: settings.isMetadataEnabled,
|
|
290
|
+
isPanelEnabled: settings.isPanelEnabled,
|
|
199
291
|
onFiltersChange: setFilters,
|
|
200
292
|
onExplore: onExplore
|
|
201
293
|
}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(MetricNameExplorer, {
|
|
@@ -33,6 +33,8 @@ const _material = require("@mui/material");
|
|
|
33
33
|
const _reactvirtuoso = require("react-virtuoso");
|
|
34
34
|
const _reactrouterdom = require("react-router-dom");
|
|
35
35
|
const _Compass = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Compass"));
|
|
36
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
|
|
37
|
+
const _fuzzy = require("@nexucis/fuzzy");
|
|
36
38
|
const _utils = require("../../utils");
|
|
37
39
|
const _queryparams = require("../../../ExploreManager/query-params");
|
|
38
40
|
const _MetricChip = require("../MetricChip");
|
|
@@ -41,7 +43,48 @@ function _interop_require_default(obj) {
|
|
|
41
43
|
default: obj
|
|
42
44
|
};
|
|
43
45
|
}
|
|
44
|
-
function
|
|
46
|
+
function _getRequireWildcardCache(nodeInterop) {
|
|
47
|
+
if (typeof WeakMap !== "function") return null;
|
|
48
|
+
var cacheBabelInterop = new WeakMap();
|
|
49
|
+
var cacheNodeInterop = new WeakMap();
|
|
50
|
+
return (_getRequireWildcardCache = function(nodeInterop) {
|
|
51
|
+
return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
|
|
52
|
+
})(nodeInterop);
|
|
53
|
+
}
|
|
54
|
+
function _interop_require_wildcard(obj, nodeInterop) {
|
|
55
|
+
if (!nodeInterop && obj && obj.__esModule) {
|
|
56
|
+
return obj;
|
|
57
|
+
}
|
|
58
|
+
if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
|
|
59
|
+
return {
|
|
60
|
+
default: obj
|
|
61
|
+
};
|
|
62
|
+
}
|
|
63
|
+
var cache = _getRequireWildcardCache(nodeInterop);
|
|
64
|
+
if (cache && cache.has(obj)) {
|
|
65
|
+
return cache.get(obj);
|
|
66
|
+
}
|
|
67
|
+
var newObj = {
|
|
68
|
+
__proto__: null
|
|
69
|
+
};
|
|
70
|
+
var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
|
|
71
|
+
for(var key in obj){
|
|
72
|
+
if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
|
|
73
|
+
var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
|
|
74
|
+
if (desc && (desc.get || desc.set)) {
|
|
75
|
+
Object.defineProperty(newObj, key, desc);
|
|
76
|
+
} else {
|
|
77
|
+
newObj[key] = obj[key];
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
newObj.default = obj;
|
|
82
|
+
if (cache) {
|
|
83
|
+
cache.set(obj, newObj);
|
|
84
|
+
}
|
|
85
|
+
return newObj;
|
|
86
|
+
}
|
|
87
|
+
function MetricRow({ children, metricName, datasource, filters, isMetadataEnabled, onExplore }) {
|
|
45
88
|
const { metadata, isLoading } = (0, _utils.useMetricMetadata)(metricName, datasource, isMetadataEnabled);
|
|
46
89
|
const searchParams = (0, _queryparams.useExplorerQueryParams)({
|
|
47
90
|
data: {
|
|
@@ -62,7 +105,7 @@ function MetricRow({ metricName, datasource, filters, isMetadataEnabled, onExplo
|
|
|
62
105
|
sx: {
|
|
63
106
|
fontFamily: 'monospace'
|
|
64
107
|
},
|
|
65
|
-
children: metricName
|
|
108
|
+
children: children !== null && children !== void 0 ? children : metricName
|
|
66
109
|
})
|
|
67
110
|
}),
|
|
68
111
|
/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {
|
|
@@ -112,7 +155,19 @@ function MetricRow({ metricName, datasource, filters, isMetadataEnabled, onExplo
|
|
|
112
155
|
]
|
|
113
156
|
});
|
|
114
157
|
}
|
|
115
|
-
function MetricList({ metricNames, datasource, filters, isMetadataEnabled, onExplore, ...props }) {
|
|
158
|
+
function MetricList({ metricNames, filteredResults, datasource, filters, isMetadataEnabled, onExplore, ...props }) {
|
|
159
|
+
const fuzzy = new _fuzzy.Fuzzy();
|
|
160
|
+
const fuzzyMetrics = (0, _react.useMemo)(()=>{
|
|
161
|
+
if (filteredResults) {
|
|
162
|
+
return filteredResults;
|
|
163
|
+
}
|
|
164
|
+
return metricNames.map((metricName)=>({
|
|
165
|
+
original: metricName
|
|
166
|
+
}));
|
|
167
|
+
}, [
|
|
168
|
+
filteredResults,
|
|
169
|
+
metricNames
|
|
170
|
+
]);
|
|
116
171
|
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
|
|
117
172
|
gap: 2,
|
|
118
173
|
width: "100%",
|
|
@@ -127,14 +182,26 @@ function MetricList({ metricNames, datasource, filters, isMetadataEnabled, onExp
|
|
|
127
182
|
height: '70vh',
|
|
128
183
|
width: '100%'
|
|
129
184
|
},
|
|
130
|
-
|
|
131
|
-
itemContent: (
|
|
132
|
-
|
|
185
|
+
totalCount: fuzzyMetrics.length,
|
|
186
|
+
itemContent: (index)=>{
|
|
187
|
+
var _fuzzyMetrics_index_intervals;
|
|
188
|
+
return /*#__PURE__*/ (0, _jsxruntime.jsx)(MetricRow, {
|
|
189
|
+
metricName: fuzzyMetrics[index].original,
|
|
133
190
|
datasource: datasource,
|
|
134
191
|
filters: filters,
|
|
135
192
|
isMetadataEnabled: isMetadataEnabled,
|
|
136
|
-
onExplore: onExplore
|
|
137
|
-
|
|
193
|
+
onExplore: onExplore,
|
|
194
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
|
|
195
|
+
dangerouslySetInnerHTML: {
|
|
196
|
+
__html: fuzzy.render(fuzzyMetrics[index].original, (_fuzzyMetrics_index_intervals = fuzzyMetrics[index].intervals) !== null && _fuzzyMetrics_index_intervals !== void 0 ? _fuzzyMetrics_index_intervals : [], {
|
|
197
|
+
pre: '<strong style="color:darkorange">',
|
|
198
|
+
post: '</strong>',
|
|
199
|
+
escapeHTML: true
|
|
200
|
+
})
|
|
201
|
+
}
|
|
202
|
+
})
|
|
203
|
+
});
|
|
204
|
+
}
|
|
138
205
|
}),
|
|
139
206
|
/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
|
|
140
207
|
sx: {
|
|
@@ -132,7 +132,7 @@ function OverviewPanel({ metricName, datasource, filters, type, isLoading, ...pr
|
|
|
132
132
|
]
|
|
133
133
|
});
|
|
134
134
|
}
|
|
135
|
-
function MetricOverview({ metricName, datasource, filters, isMetadataEnabled, onExplore, onFiltersChange, ...props }) {
|
|
135
|
+
function MetricOverview({ metricName, datasource, filters, isMetadataEnabled, isPanelEnabled, onExplore, onFiltersChange, ...props }) {
|
|
136
136
|
const [tab, setTab] = (0, _react.useState)(0);
|
|
137
137
|
const { metadata, isLoading: isMetadataLoading } = (0, _utils.useMetricMetadata)(metricName, datasource);
|
|
138
138
|
const filtersWithMetricName = (0, _react.useMemo)(()=>{
|
|
@@ -167,7 +167,7 @@ function MetricOverview({ metricName, datasource, filters, isMetadataEnabled, on
|
|
|
167
167
|
},
|
|
168
168
|
...props,
|
|
169
169
|
children: [
|
|
170
|
-
/*#__PURE__*/ (0, _jsxruntime.jsx)(OverviewPanel, {
|
|
170
|
+
isPanelEnabled && /*#__PURE__*/ (0, _jsxruntime.jsx)(OverviewPanel, {
|
|
171
171
|
metricName: metricName,
|
|
172
172
|
filters: filters,
|
|
173
173
|
datasource: datasource,
|
|
@@ -196,7 +196,7 @@ function MetricOverview({ metricName, datasource, filters, isMetadataEnabled, on
|
|
|
196
196
|
}),
|
|
197
197
|
iconPosition: "end"
|
|
198
198
|
}),
|
|
199
|
-
/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tab, {
|
|
199
|
+
filters.length > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tab, {
|
|
200
200
|
label: "Similar metrics",
|
|
201
201
|
icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tooltip, {
|
|
202
202
|
title: "All metrics matching current filters",
|
|
@@ -198,6 +198,7 @@ function LabelValuesRow({ label, valueCounters, onFilterAdd, ...props }) {
|
|
|
198
198
|
children: [
|
|
199
199
|
/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
|
|
200
200
|
sx: {
|
|
201
|
+
color: (theme)=>theme.palette.success.main,
|
|
201
202
|
fontFamily: 'monospace',
|
|
202
203
|
':hover': {
|
|
203
204
|
backgroundColor: 'rgba(127,127,127,0.35)',
|
|
@@ -205,7 +206,6 @@ function LabelValuesRow({ label, valueCounters, onFilterAdd, ...props }) {
|
|
|
205
206
|
},
|
|
206
207
|
textWrap: isMobileSize ? 'nowrap' : 'unset'
|
|
207
208
|
},
|
|
208
|
-
color: (theme)=>theme.palette.success.main,
|
|
209
209
|
onClick: ()=>onFilterAdd({
|
|
210
210
|
label,
|
|
211
211
|
labelValues: [
|
|
@@ -23,7 +23,7 @@ Object.defineProperty(exports, "ViewExploreApp", {
|
|
|
23
23
|
const _jsxruntime = require("react/jsx-runtime");
|
|
24
24
|
const _material = require("@mui/material");
|
|
25
25
|
const _components = require("@perses-dev/components");
|
|
26
|
-
const
|
|
26
|
+
const _components1 = require("../../components");
|
|
27
27
|
const _ExplorerManagerProviderWithQueryParams = require("../../components/ExploreManager/ExplorerManagerProviderWithQueryParams");
|
|
28
28
|
function ViewExploreApp(props) {
|
|
29
29
|
const { exploreTitleComponent } = props;
|
|
@@ -40,7 +40,7 @@ function ViewExploreApp(props) {
|
|
|
40
40
|
chartsTheme: chartsTheme,
|
|
41
41
|
enablePinning: false,
|
|
42
42
|
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ExplorerManagerProviderWithQueryParams.ExplorerManagerProviderWithQueryParams, {
|
|
43
|
-
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(
|
|
43
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.ExploreManager, {
|
|
44
44
|
exploreTitleComponent: exploreTitleComponent
|
|
45
45
|
})
|
|
46
46
|
})
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
1
|
+
import { ReactElement, ReactNode } from 'react';
|
|
2
2
|
export interface ExploreManagerProps {
|
|
3
3
|
exploreTitleComponent?: ReactNode;
|
|
4
4
|
}
|
|
5
|
-
export declare function ExploreManager(props: ExploreManagerProps):
|
|
5
|
+
export declare function ExploreManager(props: ExploreManagerProps): ReactElement;
|
|
6
6
|
//# sourceMappingURL=ExploreManager.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExploreManager.d.ts","sourceRoot":"","sources":["../../../src/components/ExploreManager/ExploreManager.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ExploreManager.d.ts","sourceRoot":"","sources":["../../../src/components/ExploreManager/ExploreManager.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMhD,MAAM,WAAW,mBAAmB;IAClC,qBAAqB,CAAC,EAAE,SAAS,CAAC;CACnC;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,YAAY,CAgCvE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ExploreManager/ExploreManager.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 { Card, Stack, Tab, Tabs, useMediaQuery } from '@mui/material';\nimport { ReactNode } from 'react';\nimport { ExploreToolbar } from '../ExploreToolbar';\nimport { TracesExplorer } from './TracesExplorer';\nimport { MetricsExplorer } from './MetricsExplorer';\nimport { useExplorerManagerContext } from './ExplorerManagerProvider';\n\nexport interface ExploreManagerProps {\n exploreTitleComponent?: ReactNode;\n}\n\nexport function ExploreManager(props: ExploreManagerProps) {\n const { exploreTitleComponent } = props;\n const { explorer, setExplorer } = useExplorerManagerContext();\n\n const smallScreen = useMediaQuery('(max-width: 768px)');\n return (\n <Stack sx={{ width: '100%' }} px={2} pb={2} pt={1.5} gap={3}>\n <ExploreToolbar exploreTitleComponent={exploreTitleComponent} />\n\n <Stack direction={smallScreen ? 'column' : 'row'} gap={2} sx={{ width: '100%' }}>\n <Tabs\n orientation={smallScreen ? 'horizontal' : 'vertical'}\n value={explorer}\n onChange={(_, state) => setExplorer(state)}\n variant={smallScreen ? 'fullWidth' : 'scrollable'}\n sx={{\n borderRight: smallScreen ? 0 : 1,\n borderBottom: smallScreen ? 1 : 0,\n borderColor: 'divider',\n minWidth: '100px',\n }}\n >\n <Tab value=\"metrics\" label=\"Metrics\" />\n <Tab value=\"traces\" label=\"Traces\" />\n </Tabs>\n <Card sx={{ padding: '10px', width: '100%' }}>\n {explorer === 'metrics' && <MetricsExplorer />}\n {explorer === 'traces' && <TracesExplorer />}\n </Card>\n </Stack>\n </Stack>\n );\n}\n"],"names":["Card","Stack","Tab","Tabs","useMediaQuery","ExploreToolbar","TracesExplorer","MetricsExplorer","useExplorerManagerContext","ExploreManager","props","exploreTitleComponent","explorer","setExplorer","smallScreen","sx","width","px","pb","pt","gap","direction","orientation","value","onChange","_","state","variant","borderRight","borderBottom","borderColor","minWidth","label","padding"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,IAAI,EAAEC,KAAK,EAAEC,GAAG,EAAEC,IAAI,EAAEC,aAAa,QAAQ,gBAAgB;AAEtE,SAASC,cAAc,QAAQ,oBAAoB;AACnD,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,eAAe,QAAQ,oBAAoB;AACpD,SAASC,yBAAyB,QAAQ,4BAA4B;AAMtE,OAAO,SAASC,eAAeC,KAA0B;IACvD,MAAM,EAAEC,qBAAqB,EAAE,GAAGD;IAClC,MAAM,EAAEE,QAAQ,EAAEC,WAAW,EAAE,GAAGL;IAElC,MAAMM,cAAcV,cAAc;IAClC,qBACE,MAACH;QAAMc,IAAI;YAAEC,OAAO;QAAO;QAAGC,IAAI;QAAGC,IAAI;QAAGC,IAAI;QAAKC,KAAK;;0BACxD,KAACf;gBAAeM,uBAAuBA;;0BAEvC,MAACV;gBAAMoB,WAAWP,cAAc,WAAW;gBAAOM,KAAK;gBAAGL,IAAI;oBAAEC,OAAO;gBAAO;;kCAC5E,MAACb;wBACCmB,aAAaR,cAAc,eAAe;wBAC1CS,OAAOX;wBACPY,UAAU,CAACC,GAAGC,QAAUb,YAAYa;wBACpCC,SAASb,cAAc,cAAc;wBACrCC,IAAI;4BACFa,aAAad,cAAc,IAAI;4BAC/Be,cAAcf,cAAc,IAAI;4BAChCgB,aAAa;4BACbC,UAAU;wBACZ;;0CAEA,KAAC7B;gCAAIqB,OAAM;gCAAUS,OAAM;;0CAC3B,KAAC9B;gCAAIqB,OAAM;gCAASS,OAAM;;;;kCAE5B,MAAChC;wBAAKe,IAAI;4BAAEkB,SAAS;4BAAQjB,OAAO;wBAAO;;4BACxCJ,aAAa,2BAAa,KAACL;4BAC3BK,aAAa,0BAAY,KAACN;;;;;;;AAKrC"}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ExploreManager/ExploreManager.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 { Card, Stack, Tab, Tabs, useMediaQuery } from '@mui/material';\nimport { ReactElement, ReactNode } from 'react';\nimport { ExploreToolbar } from '../ExploreToolbar';\nimport { TracesExplorer } from './TracesExplorer';\nimport { MetricsExplorer } from './MetricsExplorer';\nimport { useExplorerManagerContext } from './ExplorerManagerProvider';\n\nexport interface ExploreManagerProps {\n exploreTitleComponent?: ReactNode;\n}\n\nexport function ExploreManager(props: ExploreManagerProps): ReactElement {\n const { exploreTitleComponent } = props;\n const { explorer, setExplorer } = useExplorerManagerContext();\n\n const smallScreen = useMediaQuery('(max-width: 768px)');\n return (\n <Stack sx={{ width: '100%' }} px={2} pb={2} pt={1.5} gap={3}>\n <ExploreToolbar exploreTitleComponent={exploreTitleComponent} />\n\n <Stack direction={smallScreen ? 'column' : 'row'} gap={2} sx={{ width: '100%' }}>\n <Tabs\n orientation={smallScreen ? 'horizontal' : 'vertical'}\n value={explorer}\n onChange={(_, state) => setExplorer(state)}\n variant={smallScreen ? 'fullWidth' : 'scrollable'}\n sx={{\n borderRight: smallScreen ? 0 : 1,\n borderBottom: smallScreen ? 1 : 0,\n borderColor: 'divider',\n minWidth: '100px',\n }}\n >\n <Tab value=\"metrics\" label=\"Metrics\" />\n <Tab value=\"traces\" label=\"Traces\" />\n </Tabs>\n <Card sx={{ padding: '10px', width: '100%' }}>\n {explorer === 'metrics' && <MetricsExplorer />}\n {explorer === 'traces' && <TracesExplorer />}\n </Card>\n </Stack>\n </Stack>\n );\n}\n"],"names":["Card","Stack","Tab","Tabs","useMediaQuery","ExploreToolbar","TracesExplorer","MetricsExplorer","useExplorerManagerContext","ExploreManager","props","exploreTitleComponent","explorer","setExplorer","smallScreen","sx","width","px","pb","pt","gap","direction","orientation","value","onChange","_","state","variant","borderRight","borderBottom","borderColor","minWidth","label","padding"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,IAAI,EAAEC,KAAK,EAAEC,GAAG,EAAEC,IAAI,EAAEC,aAAa,QAAQ,gBAAgB;AAEtE,SAASC,cAAc,QAAQ,oBAAoB;AACnD,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,eAAe,QAAQ,oBAAoB;AACpD,SAASC,yBAAyB,QAAQ,4BAA4B;AAMtE,OAAO,SAASC,eAAeC,KAA0B;IACvD,MAAM,EAAEC,qBAAqB,EAAE,GAAGD;IAClC,MAAM,EAAEE,QAAQ,EAAEC,WAAW,EAAE,GAAGL;IAElC,MAAMM,cAAcV,cAAc;IAClC,qBACE,MAACH;QAAMc,IAAI;YAAEC,OAAO;QAAO;QAAGC,IAAI;QAAGC,IAAI;QAAGC,IAAI;QAAKC,KAAK;;0BACxD,KAACf;gBAAeM,uBAAuBA;;0BAEvC,MAACV;gBAAMoB,WAAWP,cAAc,WAAW;gBAAOM,KAAK;gBAAGL,IAAI;oBAAEC,OAAO;gBAAO;;kCAC5E,MAACb;wBACCmB,aAAaR,cAAc,eAAe;wBAC1CS,OAAOX;wBACPY,UAAU,CAACC,GAAGC,QAAUb,YAAYa;wBACpCC,SAASb,cAAc,cAAc;wBACrCC,IAAI;4BACFa,aAAad,cAAc,IAAI;4BAC/Be,cAAcf,cAAc,IAAI;4BAChCgB,aAAa;4BACbC,UAAU;wBACZ;;0CAEA,KAAC7B;gCAAIqB,OAAM;gCAAUS,OAAM;;0CAC3B,KAAC9B;gCAAIqB,OAAM;gCAASS,OAAM;;;;kCAE5B,MAAChC;wBAAKe,IAAI;4BAAEkB,SAAS;4BAAQjB,OAAO;wBAAO;;4BACxCJ,aAAa,2BAAa,KAACL;4BAC3BK,aAAa,0BAAY,KAACN;;;;;;;AAKrC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
1
|
+
import { ReactElement, ReactNode } from 'react';
|
|
2
2
|
interface ExplorerState<T> {
|
|
3
3
|
explorer: string;
|
|
4
4
|
data: T;
|
|
@@ -14,7 +14,7 @@ interface ExplorerManagerProviderProps {
|
|
|
14
14
|
children: ReactNode;
|
|
15
15
|
store?: [ExplorerState<unknown>, (state: ExplorerState<unknown>) => void];
|
|
16
16
|
}
|
|
17
|
-
export declare function ExplorerManagerProvider({ children, store: externalStore }: ExplorerManagerProviderProps):
|
|
17
|
+
export declare function ExplorerManagerProvider({ children, store: externalStore, }: ExplorerManagerProviderProps): ReactElement;
|
|
18
18
|
export declare function useExplorerManagerContext<T>(): ExplorerManagerContextType<T>;
|
|
19
19
|
export {};
|
|
20
20
|
//# sourceMappingURL=ExplorerManagerProvider.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExplorerManagerProvider.d.ts","sourceRoot":"","sources":["../../../src/components/ExploreManager/ExplorerManagerProvider.tsx"],"names":[],"mappings":"AAaA,OAAc,EAAiB,SAAS,EAAwB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ExplorerManagerProvider.d.ts","sourceRoot":"","sources":["../../../src/components/ExploreManager/ExplorerManagerProvider.tsx"],"names":[],"mappings":"AAaA,OAAc,EAAiB,YAAY,EAAE,SAAS,EAAwB,MAAM,OAAO,CAAC;AAE5F,UAAU,aAAa,CAAC,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,CAAC,CAAC;CAGT;AAED,UAAU,0BAA0B,CAAC,CAAC;IACpC,0DAA0D;IAC1D,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,CAAC,CAAC;IACR,WAAW,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,OAAO,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;CAC5B;AAID,UAAU,4BAA4B;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC,CAAC;CAC3E;AAED,wBAAgB,uBAAuB,CAAC,EACtC,QAAQ,EACR,KAAK,EAAE,aAAa,GACrB,EAAE,4BAA4B,GAAG,YAAY,CA8B7C;AAED,wBAAgB,yBAAyB,CAAC,CAAC,KAAK,0BAA0B,CAAC,CAAC,CAAC,CAM5E"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ExploreManager/ExplorerManagerProvider.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 React, { createContext, ReactNode, useContext, useState } from 'react';\n\ninterface ExplorerState<T> {\n explorer: string;\n data: T;\n // tab: number;\n // queries: QueryDefinition[];\n}\n\ninterface ExplorerManagerContextType<T> {\n /** observability signal, for example metrics or traces */\n explorer: string;\n data: T;\n setExplorer: (explorer: string) => void;\n setData: (data: T) => void;\n}\n\nconst ExplorerManagerContext = createContext<ExplorerManagerContextType<unknown> | undefined>(undefined);\n\ninterface ExplorerManagerProviderProps {\n children: ReactNode;\n store?: [ExplorerState<unknown>, (state: ExplorerState<unknown>) => void];\n}\n\nexport function ExplorerManagerProvider({
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ExploreManager/ExplorerManagerProvider.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 React, { createContext, ReactElement, ReactNode, useContext, useState } from 'react';\n\ninterface ExplorerState<T> {\n explorer: string;\n data: T;\n // tab: number;\n // queries: QueryDefinition[];\n}\n\ninterface ExplorerManagerContextType<T> {\n /** observability signal, for example metrics or traces */\n explorer: string;\n data: T;\n setExplorer: (explorer: string) => void;\n setData: (data: T) => void;\n}\n\nconst ExplorerManagerContext = createContext<ExplorerManagerContextType<unknown> | undefined>(undefined);\n\ninterface ExplorerManagerProviderProps {\n children: ReactNode;\n store?: [ExplorerState<unknown>, (state: ExplorerState<unknown>) => void];\n}\n\nexport function ExplorerManagerProvider({\n children,\n store: externalStore,\n}: ExplorerManagerProviderProps): ReactElement {\n // cache the state of currently not rendered explore UIs\n const [explorerStateCache, setExplorerStateCache] = useState<\n Record<string, Omit<ExplorerState<unknown>, 'explorer'>>\n >({});\n // local store in case external store is not provided by prop\n const localStore = useState<ExplorerState<unknown>>({ explorer: 'metrics', data: {} });\n // use store provided by 'store' prop if available, otherwise use local store\n const [explorerState, setExplorerState] = externalStore ? externalStore : localStore;\n const { explorer, data } = explorerState;\n\n function setExplorer(newExplorer: string): void {\n // store current explorer state\n explorerStateCache[explorer] = { data };\n setExplorerStateCache(explorerStateCache);\n\n // restore previous explorer state (if any)\n const state = explorerStateCache[newExplorer] ?? { data: {} };\n setExplorerState({ explorer: newExplorer, data: state.data });\n }\n\n function setData(newData: unknown): void {\n setExplorerState({ explorer, data: newData });\n }\n\n return (\n <ExplorerManagerContext.Provider value={{ explorer, data, setExplorer, setData }}>\n {children}\n </ExplorerManagerContext.Provider>\n );\n}\n\nexport function useExplorerManagerContext<T>(): ExplorerManagerContextType<T> {\n const ctx = useContext(ExplorerManagerContext);\n if (ctx === undefined) {\n throw new Error('No ExplorerManagerContext found. Did you forget a Provider?');\n }\n return ctx as ExplorerManagerContextType<T>;\n}\n"],"names":["React","createContext","useContext","useState","ExplorerManagerContext","undefined","ExplorerManagerProvider","children","store","externalStore","explorerStateCache","setExplorerStateCache","localStore","explorer","data","explorerState","setExplorerState","setExplorer","newExplorer","state","setData","newData","Provider","value","useExplorerManagerContext","ctx","Error"],"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,OAAOA,SAASC,aAAa,EAA2BC,UAAU,EAAEC,QAAQ,QAAQ,QAAQ;AAiB5F,MAAMC,uCAAyBH,cAA+DI;AAO9F,OAAO,SAASC,wBAAwB,EACtCC,QAAQ,EACRC,OAAOC,aAAa,EACS;IAC7B,wDAAwD;IACxD,MAAM,CAACC,oBAAoBC,sBAAsB,GAAGR,SAElD,CAAC;IACH,6DAA6D;IAC7D,MAAMS,aAAaT,SAAiC;QAAEU,UAAU;QAAWC,MAAM,CAAC;IAAE;IACpF,6EAA6E;IAC7E,MAAM,CAACC,eAAeC,iBAAiB,GAAGP,gBAAgBA,gBAAgBG;IAC1E,MAAM,EAAEC,QAAQ,EAAEC,IAAI,EAAE,GAAGC;IAE3B,SAASE,YAAYC,WAAmB;QACtC,+BAA+B;QAC/BR,kBAAkB,CAACG,SAAS,GAAG;YAAEC;QAAK;QACtCH,sBAAsBD;YAGRA;QADd,2CAA2C;QAC3C,MAAMS,QAAQT,CAAAA,kCAAAA,kBAAkB,CAACQ,YAAY,cAA/BR,6CAAAA,kCAAmC;YAAEI,MAAM,CAAC;QAAE;QAC5DE,iBAAiB;YAAEH,UAAUK;YAAaJ,MAAMK,MAAML,IAAI;QAAC;IAC7D;IAEA,SAASM,QAAQC,OAAgB;QAC/BL,iBAAiB;YAAEH;YAAUC,MAAMO;QAAQ;IAC7C;IAEA,qBACE,KAACjB,uBAAuBkB,QAAQ;QAACC,OAAO;YAAEV;YAAUC;YAAMG;YAAaG;QAAQ;kBAC5Eb;;AAGP;AAEA,OAAO,SAASiB;IACd,MAAMC,MAAMvB,WAAWE;IACvB,IAAIqB,QAAQpB,WAAW;QACrB,MAAM,IAAIqB,MAAM;IAClB;IACA,OAAOD;AACT"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
1
|
+
import { ReactElement, ReactNode } from 'react';
|
|
2
2
|
interface ExplorerManagerProviderWithQueryParamsProps {
|
|
3
3
|
children: ReactNode;
|
|
4
4
|
}
|
|
5
|
-
export declare function ExplorerManagerProviderWithQueryParams({ children }: ExplorerManagerProviderWithQueryParamsProps):
|
|
5
|
+
export declare function ExplorerManagerProviderWithQueryParams({ children, }: ExplorerManagerProviderWithQueryParamsProps): ReactElement;
|
|
6
6
|
export {};
|
|
7
7
|
//# sourceMappingURL=ExplorerManagerProviderWithQueryParams.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExplorerManagerProviderWithQueryParams.d.ts","sourceRoot":"","sources":["../../../src/components/ExploreManager/ExplorerManagerProviderWithQueryParams.tsx"],"names":[],"mappings":"AAaA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ExplorerManagerProviderWithQueryParams.d.ts","sourceRoot":"","sources":["../../../src/components/ExploreManager/ExplorerManagerProviderWithQueryParams.tsx"],"names":[],"mappings":"AAaA,OAAc,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAUvD,UAAU,2CAA2C;IACnD,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,sCAAsC,CAAC,EACrD,QAAQ,GACT,EAAE,2CAA2C,GAAG,YAAY,CAI5D"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ExploreManager/ExplorerManagerProviderWithQueryParams.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 React, { ReactNode } from 'react';\n\nimport { createEnumParam, JsonParam, useQueryParams, withDefault } from 'use-query-params';\nimport { ExplorerManagerProvider } from './ExplorerManagerProvider';\n\nconst exploreQueryConfig = {\n explorer: withDefault(createEnumParam(['metrics', 'traces']), 'metrics'),\n data: withDefault(JsonParam, {}),\n};\n\ninterface ExplorerManagerProviderWithQueryParamsProps {\n children: ReactNode;\n}\n\nexport function ExplorerManagerProviderWithQueryParams({
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ExploreManager/ExplorerManagerProviderWithQueryParams.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 React, { ReactElement, ReactNode } from 'react';\n\nimport { createEnumParam, JsonParam, useQueryParams, withDefault } from 'use-query-params';\nimport { ExplorerManagerProvider } from './ExplorerManagerProvider';\n\nconst exploreQueryConfig = {\n explorer: withDefault(createEnumParam(['metrics', 'traces']), 'metrics'),\n data: withDefault(JsonParam, {}),\n};\n\ninterface ExplorerManagerProviderWithQueryParamsProps {\n children: ReactNode;\n}\n\nexport function ExplorerManagerProviderWithQueryParams({\n children,\n}: ExplorerManagerProviderWithQueryParamsProps): ReactElement {\n const [queryParams, setQueryParams] = useQueryParams(exploreQueryConfig);\n\n return <ExplorerManagerProvider store={[queryParams, setQueryParams]}>{children}</ExplorerManagerProvider>;\n}\n"],"names":["React","createEnumParam","JsonParam","useQueryParams","withDefault","ExplorerManagerProvider","exploreQueryConfig","explorer","data","ExplorerManagerProviderWithQueryParams","children","queryParams","setQueryParams","store"],"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,OAAOA,WAAwC,QAAQ;AAEvD,SAASC,eAAe,EAAEC,SAAS,EAAEC,cAAc,EAAEC,WAAW,QAAQ,mBAAmB;AAC3F,SAASC,uBAAuB,QAAQ,4BAA4B;AAEpE,MAAMC,qBAAqB;IACzBC,UAAUH,YAAYH,gBAAgB;QAAC;QAAW;KAAS,GAAG;IAC9DO,MAAMJ,YAAYF,WAAW,CAAC;AAChC;AAMA,OAAO,SAASO,uCAAuC,EACrDC,QAAQ,EACoC;IAC5C,MAAM,CAACC,aAAaC,eAAe,GAAGT,eAAeG;IAErD,qBAAO,KAACD;QAAwBQ,OAAO;YAACF;YAAaC;SAAe;kBAAGF;;AACzE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MetricsExplorer.d.ts","sourceRoot":"","sources":["../../../src/components/ExploreManager/MetricsExplorer.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"MetricsExplorer.d.ts","sourceRoot":"","sources":["../../../src/components/ExploreManager/MetricsExplorer.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAwErC,wBAAgB,eAAe,IAAI,YAAY,CAkD9C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ExploreManager/MetricsExplorer.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { QueryDefinition } from '@perses-dev/core';\nimport { Box, Stack, Tab, Tabs } from '@mui/material';\nimport { DataQueriesProvider, MultiQueryEditor, useSuggestedStepMs } from '@perses-dev/plugin-system';\nimport useResizeObserver from 'use-resize-observer';\nimport { Panel } from '@perses-dev/dashboards';\nimport { DEFAULT_PROM } from '@perses-dev/prometheus-plugin';\nimport { PrometheusMetricsFinder } from '../PrometheusMetricsFinder';\nimport { FinderQueryParams } from '../PrometheusMetricsFinder/types';\nimport { PANEL_PREVIEW_HEIGHT } from './constants';\nimport { useExplorerManagerContext } from './ExplorerManagerProvider';\n\ninterface MetricsExplorerQueryParams extends FinderQueryParams {\n tab?: string;\n queries?: QueryDefinition[];\n}\n\nfunction TimeSeriesPanel({ queries }: { queries: QueryDefinition[] }) {\n const { width, ref: boxRef } = useResizeObserver();\n const height = PANEL_PREVIEW_HEIGHT;\n\n const suggestedStepMs = useSuggestedStepMs(width);\n\n // map TimeSeriesQueryDefinition to Definition<UnknownSpec>\n const definitions = queries.length\n ? queries.map((query) => {\n return {\n kind: query.spec.plugin.kind,\n spec: query.spec.plugin.spec,\n };\n })\n : [];\n\n return (\n <Box ref={boxRef} height={height}>\n <DataQueriesProvider definitions={definitions} options={{ suggestedStepMs, mode: 'range' }}>\n <Panel\n panelOptions={{\n hideHeader: true,\n }}\n definition={{\n kind: 'Panel',\n spec: { queries: queries, display: { name: '' }, plugin: { kind: 'TimeSeriesChart', spec: {} } },\n }}\n />\n </DataQueriesProvider>\n </Box>\n );\n}\n\nfunction MetricDataTable({ queries }: { queries: QueryDefinition[] }) {\n const height = PANEL_PREVIEW_HEIGHT;\n\n // map TimeSeriesQueryDefinition to Definition<UnknownSpec>\n const definitions = queries.map((query) => {\n return {\n kind: query.spec.plugin.kind,\n spec: query.spec.plugin.spec,\n };\n });\n\n return (\n <Box height={height}>\n <DataQueriesProvider definitions={definitions} options={{ mode: 'instant' }}>\n <Panel\n panelOptions={{\n hideHeader: true,\n }}\n definition={{\n kind: 'Panel',\n spec: { queries: queries, display: { name: '' }, plugin: { kind: 'TimeSeriesTable', spec: {} } },\n }}\n />\n </DataQueriesProvider>\n </Box>\n );\n}\n\nexport function MetricsExplorer() {\n const {\n data: { tab = 'table', queries = [], datasource = DEFAULT_PROM, filters = [], exploredMetric = undefined },\n setData,\n } = useExplorerManagerContext<MetricsExplorerQueryParams>();\n\n return (\n <Stack gap={2} sx={{ width: '100%' }}>\n <Tabs\n value={tab}\n onChange={(_, state) => setData({ tab: state, queries })}\n variant=\"scrollable\"\n sx={{ borderBottom: 1, borderColor: 'divider' }}\n >\n <Tab value=\"table\" label=\"Table\" />\n <Tab value=\"graph\" label=\"Graph\" />\n <Tab value=\"finder\" label=\"Finder\" />\n </Tabs>\n <Stack gap={1}>\n {tab === 'table' && (\n <Stack>\n <MultiQueryEditor\n queryTypes={['TimeSeriesQuery']}\n onChange={(state) => setData({ tab, queries: state })}\n queries={queries}\n />\n <MetricDataTable queries={queries} />\n </Stack>\n )}\n {tab === 'graph' && (\n <Stack>\n <MultiQueryEditor\n queryTypes={['TimeSeriesQuery']}\n onChange={(state) => setData({ tab, queries: state })}\n queries={queries}\n />\n <TimeSeriesPanel queries={queries} />\n </Stack>\n )}\n {tab === 'finder' && (\n <Stack>\n <PrometheusMetricsFinder\n onChange={(state) => setData({ tab, ...state })}\n value={{ datasource, filters, exploredMetric }}\n />\n </Stack>\n )}\n </Stack>\n </Stack>\n );\n}\n"],"names":["Box","Stack","Tab","Tabs","DataQueriesProvider","MultiQueryEditor","useSuggestedStepMs","useResizeObserver","Panel","DEFAULT_PROM","PrometheusMetricsFinder","PANEL_PREVIEW_HEIGHT","useExplorerManagerContext","TimeSeriesPanel","queries","width","ref","boxRef","height","suggestedStepMs","definitions","length","map","query","kind","spec","plugin","options","mode","panelOptions","hideHeader","definition","display","name","MetricDataTable","MetricsExplorer","data","tab","datasource","filters","exploredMetric","undefined","setData","gap","sx","value","onChange","_","state","variant","borderBottom","borderColor","label","queryTypes"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAGjC,SAASA,GAAG,EAAEC,KAAK,EAAEC,GAAG,EAAEC,IAAI,QAAQ,gBAAgB;AACtD,SAASC,mBAAmB,EAAEC,gBAAgB,EAAEC,kBAAkB,QAAQ,4BAA4B;AACtG,OAAOC,uBAAuB,sBAAsB;AACpD,SAASC,KAAK,QAAQ,yBAAyB;AAC/C,SAASC,YAAY,QAAQ,gCAAgC;
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ExploreManager/MetricsExplorer.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { QueryDefinition } from '@perses-dev/core';\nimport { Box, Stack, Tab, Tabs } from '@mui/material';\nimport { DataQueriesProvider, MultiQueryEditor, useSuggestedStepMs } from '@perses-dev/plugin-system';\nimport useResizeObserver from 'use-resize-observer';\nimport { Panel } from '@perses-dev/dashboards';\nimport { DEFAULT_PROM } from '@perses-dev/prometheus-plugin';\nimport { ReactElement } from 'react';\nimport { PrometheusMetricsFinder } from '../PrometheusMetricsFinder';\nimport { FinderQueryParams } from '../PrometheusMetricsFinder/types';\nimport { PANEL_PREVIEW_HEIGHT } from './constants';\nimport { useExplorerManagerContext } from './ExplorerManagerProvider';\n\ninterface MetricsExplorerQueryParams extends FinderQueryParams {\n tab?: string;\n queries?: QueryDefinition[];\n}\n\nfunction TimeSeriesPanel({ queries }: { queries: QueryDefinition[] }): ReactElement {\n const { width, ref: boxRef } = useResizeObserver();\n const height = PANEL_PREVIEW_HEIGHT;\n\n const suggestedStepMs = useSuggestedStepMs(width);\n\n // map TimeSeriesQueryDefinition to Definition<UnknownSpec>\n const definitions = queries.length\n ? queries.map((query) => {\n return {\n kind: query.spec.plugin.kind,\n spec: query.spec.plugin.spec,\n };\n })\n : [];\n\n return (\n <Box ref={boxRef} height={height}>\n <DataQueriesProvider definitions={definitions} options={{ suggestedStepMs, mode: 'range' }}>\n <Panel\n panelOptions={{\n hideHeader: true,\n }}\n definition={{\n kind: 'Panel',\n spec: { queries: queries, display: { name: '' }, plugin: { kind: 'TimeSeriesChart', spec: {} } },\n }}\n />\n </DataQueriesProvider>\n </Box>\n );\n}\n\nfunction MetricDataTable({ queries }: { queries: QueryDefinition[] }): ReactElement {\n const height = PANEL_PREVIEW_HEIGHT;\n\n // map TimeSeriesQueryDefinition to Definition<UnknownSpec>\n const definitions = queries.map((query) => {\n return {\n kind: query.spec.plugin.kind,\n spec: query.spec.plugin.spec,\n };\n });\n\n return (\n <Box height={height}>\n <DataQueriesProvider definitions={definitions} options={{ mode: 'instant' }}>\n <Panel\n panelOptions={{\n hideHeader: true,\n }}\n definition={{\n kind: 'Panel',\n spec: { queries: queries, display: { name: '' }, plugin: { kind: 'TimeSeriesTable', spec: {} } },\n }}\n />\n </DataQueriesProvider>\n </Box>\n );\n}\n\nexport function MetricsExplorer(): ReactElement {\n const {\n data: { tab = 'table', queries = [], datasource = DEFAULT_PROM, filters = [], exploredMetric = undefined },\n setData,\n } = useExplorerManagerContext<MetricsExplorerQueryParams>();\n\n return (\n <Stack gap={2} sx={{ width: '100%' }}>\n <Tabs\n value={tab}\n onChange={(_, state) => setData({ tab: state, queries })}\n variant=\"scrollable\"\n sx={{ borderBottom: 1, borderColor: 'divider' }}\n >\n <Tab value=\"table\" label=\"Table\" />\n <Tab value=\"graph\" label=\"Graph\" />\n <Tab value=\"finder\" label=\"Finder\" />\n </Tabs>\n <Stack gap={1}>\n {tab === 'table' && (\n <Stack>\n <MultiQueryEditor\n queryTypes={['TimeSeriesQuery']}\n onChange={(state) => setData({ tab, queries: state })}\n queries={queries}\n />\n <MetricDataTable queries={queries} />\n </Stack>\n )}\n {tab === 'graph' && (\n <Stack>\n <MultiQueryEditor\n queryTypes={['TimeSeriesQuery']}\n onChange={(state) => setData({ tab, queries: state })}\n queries={queries}\n />\n <TimeSeriesPanel queries={queries} />\n </Stack>\n )}\n {tab === 'finder' && (\n <Stack>\n <PrometheusMetricsFinder\n onChange={(state) => setData({ tab, ...state })}\n value={{ datasource, filters, exploredMetric }}\n />\n </Stack>\n )}\n </Stack>\n </Stack>\n );\n}\n"],"names":["Box","Stack","Tab","Tabs","DataQueriesProvider","MultiQueryEditor","useSuggestedStepMs","useResizeObserver","Panel","DEFAULT_PROM","PrometheusMetricsFinder","PANEL_PREVIEW_HEIGHT","useExplorerManagerContext","TimeSeriesPanel","queries","width","ref","boxRef","height","suggestedStepMs","definitions","length","map","query","kind","spec","plugin","options","mode","panelOptions","hideHeader","definition","display","name","MetricDataTable","MetricsExplorer","data","tab","datasource","filters","exploredMetric","undefined","setData","gap","sx","value","onChange","_","state","variant","borderBottom","borderColor","label","queryTypes"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TracesExplorer.d.ts","sourceRoot":"","sources":["../../../src/components/ExploreManager/TracesExplorer.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TracesExplorer.d.ts","sourceRoot":"","sources":["../../../src/components/ExploreManager/TracesExplorer.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AA2ErC,wBAAgB,cAAc,IAAI,YAAY,CAwC7C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ExploreManager/TracesExplorer.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 { DataQueriesProvider, MultiQueryEditor, useDataQueries } from '@perses-dev/plugin-system';\nimport { Box, Stack } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary, LoadingOverlay, NoDataOverlay } from '@perses-dev/components';\nimport { Panel } from '@perses-dev/dashboards';\nimport { QueryDefinition, isValidTraceId } from '@perses-dev/core';\nimport { PANEL_PREVIEW_HEIGHT } from './constants';\nimport { useExplorerManagerContext } from './ExplorerManagerProvider';\n\ninterface TracesExplorerQueryParams {\n queries?: QueryDefinition[];\n}\n\ninterface SearchResultsPanelProps {\n queries: QueryDefinition[];\n}\n\nfunction SearchResultsPanel({ queries }: SearchResultsPanelProps) {\n const { isFetching, isLoading, queryResults } = useDataQueries('TraceQuery');\n\n // no query executed, show empty panel\n if (queryResults.length === 0) {\n return <></>;\n }\n\n if (isLoading || isFetching) {\n return <LoadingOverlay />;\n }\n\n const queryError = queryResults.find((d) => d.error);\n if (queryError) {\n throw queryError.error;\n }\n\n const tracesFound = queryResults.some((traceData) => (traceData.data?.searchResult ?? []).length > 0);\n if (!tracesFound) {\n return <NoDataOverlay resource=\"traces\" />;\n }\n\n return (\n <Stack sx={{ height: '100%' }} gap={2}>\n <Box sx={{ height: '35%', flexShrink: 0 }}>\n <Panel\n panelOptions={{\n hideHeader: true,\n }}\n definition={{\n kind: 'Panel',\n spec: { queries, display: { name: '' }, plugin: { kind: 'ScatterChart', spec: {} } },\n }}\n />\n </Box>\n <Panel\n sx={{ flexGrow: 1 }}\n panelOptions={{\n hideHeader: true,\n }}\n definition={{\n kind: 'Panel',\n spec: { queries, display: { name: '' }, plugin: { kind: 'TraceTable', spec: {} } },\n }}\n />\n </Stack>\n );\n}\n\nfunction TracingGanttChartPanel({ queries }: { queries: QueryDefinition[] }) {\n return (\n <Panel\n panelOptions={{\n hideHeader: true,\n }}\n definition={{\n kind: 'Panel',\n spec: { queries, display: { name: '' }, plugin: { kind: 'TracingGanttChart', spec: {} } },\n }}\n />\n );\n}\n\nexport function TracesExplorer() {\n const {\n data: { queries = [] },\n setData,\n } = useExplorerManagerContext<TracesExplorerQueryParams>();\n\n // map TraceQueryDefinition to Definition<UnknownSpec>\n const definitions = queries.length\n ? queries.map((query: QueryDefinition) => {\n return {\n kind: query.spec.plugin.kind,\n spec: query.spec.plugin.spec,\n };\n })\n : [];\n\n // Cannot cast to TempoTraceQuerySpec because 'tempo-plugin' types are not accessible in @perses-dev/explore\n const isSingleTrace =\n queries.length === 1 &&\n queries[0]?.kind === 'TraceQuery' &&\n queries[0]?.spec.plugin.kind === 'TempoTraceQuery' &&\n isValidTraceId((queries[0]?.spec.plugin.spec as any).query ?? ''); // eslint-disable-line @typescript-eslint/no-explicit-any\n\n return (\n <Stack gap={2} sx={{ width: '100%' }}>\n <MultiQueryEditor\n queryTypes={['TraceQuery']}\n onChange={(newQueries) => setData({ queries: newQueries })}\n queries={queries}\n />\n\n <ErrorBoundary FallbackComponent={ErrorAlert} resetKeys={[queries]}>\n <DataQueriesProvider definitions={definitions}>\n <Box height={PANEL_PREVIEW_HEIGHT}>\n {isSingleTrace ? <TracingGanttChartPanel queries={queries} /> : <SearchResultsPanel queries={queries} />}\n </Box>\n </DataQueriesProvider>\n </ErrorBoundary>\n </Stack>\n );\n}\n"],"names":["DataQueriesProvider","MultiQueryEditor","useDataQueries","Box","Stack","ErrorAlert","ErrorBoundary","LoadingOverlay","NoDataOverlay","Panel","isValidTraceId","PANEL_PREVIEW_HEIGHT","useExplorerManagerContext","SearchResultsPanel","queries","isFetching","isLoading","queryResults","length","queryError","find","d","error","tracesFound","some","traceData","data","searchResult","resource","sx","height","gap","flexShrink","panelOptions","hideHeader","definition","kind","spec","display","name","plugin","flexGrow","TracingGanttChartPanel","TracesExplorer","setData","definitions","map","query","isSingleTrace","width","queryTypes","onChange","newQueries","FallbackComponent","resetKeys"],"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,mBAAmB,EAAEC,gBAAgB,EAAEC,cAAc,QAAQ,4BAA4B;AAClG,SAASC,GAAG,EAAEC,KAAK,QAAQ,gBAAgB;AAC3C,SAASC,UAAU,EAAEC,aAAa,EAAEC,cAAc,EAAEC,aAAa,QAAQ,yBAAyB;AAClG,SAASC,KAAK,QAAQ,yBAAyB;AAC/C,SAA0BC,cAAc,QAAQ,mBAAmB;
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ExploreManager/TracesExplorer.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 { DataQueriesProvider, MultiQueryEditor, useDataQueries } from '@perses-dev/plugin-system';\nimport { Box, Stack } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary, LoadingOverlay, NoDataOverlay } from '@perses-dev/components';\nimport { Panel } from '@perses-dev/dashboards';\nimport { QueryDefinition, isValidTraceId } from '@perses-dev/core';\nimport { ReactElement } from 'react';\nimport { PANEL_PREVIEW_HEIGHT } from './constants';\nimport { useExplorerManagerContext } from './ExplorerManagerProvider';\n\ninterface TracesExplorerQueryParams {\n queries?: QueryDefinition[];\n}\n\ninterface SearchResultsPanelProps {\n queries: QueryDefinition[];\n}\n\nfunction SearchResultsPanel({ queries }: SearchResultsPanelProps): ReactElement {\n const { isFetching, isLoading, queryResults } = useDataQueries('TraceQuery');\n\n // no query executed, show empty panel\n if (queryResults.length === 0) {\n return <></>;\n }\n\n if (isLoading || isFetching) {\n return <LoadingOverlay />;\n }\n\n const queryError = queryResults.find((d) => d.error);\n if (queryError) {\n throw queryError.error;\n }\n\n const tracesFound = queryResults.some((traceData) => (traceData.data?.searchResult ?? []).length > 0);\n if (!tracesFound) {\n return <NoDataOverlay resource=\"traces\" />;\n }\n\n return (\n <Stack sx={{ height: '100%' }} gap={2}>\n <Box sx={{ height: '35%', flexShrink: 0 }}>\n <Panel\n panelOptions={{\n hideHeader: true,\n }}\n definition={{\n kind: 'Panel',\n spec: { queries, display: { name: '' }, plugin: { kind: 'ScatterChart', spec: {} } },\n }}\n />\n </Box>\n <Panel\n sx={{ flexGrow: 1 }}\n panelOptions={{\n hideHeader: true,\n }}\n definition={{\n kind: 'Panel',\n spec: { queries, display: { name: '' }, plugin: { kind: 'TraceTable', spec: {} } },\n }}\n />\n </Stack>\n );\n}\n\nfunction TracingGanttChartPanel({ queries }: { queries: QueryDefinition[] }): ReactElement {\n return (\n <Panel\n panelOptions={{\n hideHeader: true,\n }}\n definition={{\n kind: 'Panel',\n spec: { queries, display: { name: '' }, plugin: { kind: 'TracingGanttChart', spec: {} } },\n }}\n />\n );\n}\n\nexport function TracesExplorer(): ReactElement {\n const {\n data: { queries = [] },\n setData,\n } = useExplorerManagerContext<TracesExplorerQueryParams>();\n\n // map TraceQueryDefinition to Definition<UnknownSpec>\n const definitions = queries.length\n ? queries.map((query: QueryDefinition) => {\n return {\n kind: query.spec.plugin.kind,\n spec: query.spec.plugin.spec,\n };\n })\n : [];\n\n // Cannot cast to TempoTraceQuerySpec because 'tempo-plugin' types are not accessible in @perses-dev/explore\n const isSingleTrace =\n queries.length === 1 &&\n queries[0]?.kind === 'TraceQuery' &&\n queries[0]?.spec.plugin.kind === 'TempoTraceQuery' &&\n isValidTraceId((queries[0]?.spec.plugin.spec as any).query ?? ''); // eslint-disable-line @typescript-eslint/no-explicit-any\n\n return (\n <Stack gap={2} sx={{ width: '100%' }}>\n <MultiQueryEditor\n queryTypes={['TraceQuery']}\n onChange={(newQueries) => setData({ queries: newQueries })}\n queries={queries}\n />\n\n <ErrorBoundary FallbackComponent={ErrorAlert} resetKeys={[queries]}>\n <DataQueriesProvider definitions={definitions}>\n <Box height={PANEL_PREVIEW_HEIGHT}>\n {isSingleTrace ? <TracingGanttChartPanel queries={queries} /> : <SearchResultsPanel queries={queries} />}\n </Box>\n </DataQueriesProvider>\n </ErrorBoundary>\n </Stack>\n );\n}\n"],"names":["DataQueriesProvider","MultiQueryEditor","useDataQueries","Box","Stack","ErrorAlert","ErrorBoundary","LoadingOverlay","NoDataOverlay","Panel","isValidTraceId","PANEL_PREVIEW_HEIGHT","useExplorerManagerContext","SearchResultsPanel","queries","isFetching","isLoading","queryResults","length","queryError","find","d","error","tracesFound","some","traceData","data","searchResult","resource","sx","height","gap","flexShrink","panelOptions","hideHeader","definition","kind","spec","display","name","plugin","flexGrow","TracingGanttChartPanel","TracesExplorer","setData","definitions","map","query","isSingleTrace","width","queryTypes","onChange","newQueries","FallbackComponent","resetKeys"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { ReactElement } from 'react';
|
|
2
2
|
export interface ExploreToolbarProps {
|
|
3
3
|
exploreTitleComponent?: React.ReactNode;
|
|
4
4
|
}
|
|
5
|
-
export declare const ExploreToolbar: (props: ExploreToolbarProps) =>
|
|
5
|
+
export declare const ExploreToolbar: (props: ExploreToolbarProps) => ReactElement;
|
|
6
6
|
//# sourceMappingURL=ExploreToolbar.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExploreToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/ExploreToolbar/ExploreToolbar.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ExploreToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/ExploreToolbar/ExploreToolbar.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,WAAW,mBAAmB;IAClC,qBAAqB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzC;AAED,eAAO,MAAM,cAAc,UAAW,mBAAmB,KAAG,YAuB3D,CAAC"}
|