@perses-dev/explore 0.45.0 → 0.46.0-rc0
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/ExploreManager/ExploreManager.js +86 -0
- package/dist/cjs/components/ExploreManager/ExplorerManagerProvider.js +163 -0
- package/dist/cjs/components/ExploreManager/ExplorerManagerProviderWithQueryParams.js +64 -0
- package/dist/cjs/components/ExploreManager/MetricsExplorer.js +158 -0
- package/dist/cjs/components/ExploreManager/TracesExplorer.js +103 -0
- package/dist/cjs/components/ExploreManager/constants.js +32 -0
- package/dist/cjs/components/ExploreManager/index.js +30 -0
- package/dist/cjs/views/ViewExplore/ViewExploreApp.js +6 -9
- package/dist/components/ExploreManager/ExploreManager.d.ts +6 -0
- package/dist/components/ExploreManager/ExploreManager.d.ts.map +1 -0
- package/dist/components/ExploreManager/ExploreManager.js +78 -0
- package/dist/components/ExploreManager/ExploreManager.js.map +1 -0
- package/dist/components/ExploreManager/ExplorerManagerProvider.d.ts +26 -0
- package/dist/components/ExploreManager/ExplorerManagerProvider.d.ts.map +1 -0
- package/dist/components/ExploreManager/ExplorerManagerProvider.js +106 -0
- package/dist/components/ExploreManager/ExplorerManagerProvider.js.map +1 -0
- package/dist/components/ExploreManager/ExplorerManagerProviderWithQueryParams.d.ts +7 -0
- package/dist/components/ExploreManager/ExplorerManagerProviderWithQueryParams.d.ts.map +1 -0
- package/dist/components/ExploreManager/ExplorerManagerProviderWithQueryParams.js +51 -0
- package/dist/components/ExploreManager/ExplorerManagerProviderWithQueryParams.js.map +1 -0
- package/dist/components/ExploreManager/MetricsExplorer.d.ts +2 -0
- package/dist/components/ExploreManager/MetricsExplorer.d.ts.map +1 -0
- package/dist/components/ExploreManager/MetricsExplorer.js +145 -0
- package/dist/components/ExploreManager/MetricsExplorer.js.map +1 -0
- package/dist/components/ExploreManager/TracesExplorer.d.ts +2 -0
- package/dist/components/ExploreManager/TracesExplorer.d.ts.map +1 -0
- package/dist/components/ExploreManager/TracesExplorer.js +90 -0
- package/dist/components/ExploreManager/TracesExplorer.js.map +1 -0
- package/dist/components/ExploreManager/constants.d.ts +3 -0
- package/dist/components/ExploreManager/constants.d.ts.map +1 -0
- package/dist/components/ExploreManager/constants.js +16 -0
- package/dist/components/ExploreManager/constants.js.map +1 -0
- package/dist/components/ExploreManager/index.d.ts +2 -0
- package/dist/components/ExploreManager/index.d.ts.map +1 -0
- package/dist/components/ExploreManager/index.js +15 -0
- package/dist/components/ExploreManager/index.js.map +1 -0
- 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 +6 -4
- package/dist/views/ViewExplore/ViewExploreApp.js.map +1 -1
- package/package.json +8 -8
- package/dist/cjs/components/TimeSeriesExplorer/TimeSeriesExplorer.js +0 -169
- package/dist/components/TimeSeriesExplorer/TimeSeriesExplorer.d.ts +0 -11
- package/dist/components/TimeSeriesExplorer/TimeSeriesExplorer.d.ts.map +0 -1
- package/dist/components/TimeSeriesExplorer/TimeSeriesExplorer.js +0 -112
- package/dist/components/TimeSeriesExplorer/TimeSeriesExplorer.js.map +0 -1
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
// Copyright 2024 The Perses Authors
|
|
2
|
+
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
3
|
+
// you may not use this file except in compliance with the License.
|
|
4
|
+
// You may obtain a copy of the License at
|
|
5
|
+
//
|
|
6
|
+
// http://www.apache.org/licenses/LICENSE-2.0
|
|
7
|
+
//
|
|
8
|
+
// Unless required by applicable law or agreed to in writing, software
|
|
9
|
+
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
10
|
+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
11
|
+
// See the License for the specific language governing permissions and
|
|
12
|
+
// limitations under the License.
|
|
13
|
+
"use strict";
|
|
14
|
+
Object.defineProperty(exports, "__esModule", {
|
|
15
|
+
value: true
|
|
16
|
+
});
|
|
17
|
+
Object.defineProperty(exports, "ExploreManager", {
|
|
18
|
+
enumerable: true,
|
|
19
|
+
get: function() {
|
|
20
|
+
return ExploreManager;
|
|
21
|
+
}
|
|
22
|
+
});
|
|
23
|
+
const _jsxruntime = require("react/jsx-runtime");
|
|
24
|
+
const _material = require("@mui/material");
|
|
25
|
+
const _ExploreToolbar = require("../ExploreToolbar");
|
|
26
|
+
const _TracesExplorer = require("./TracesExplorer");
|
|
27
|
+
const _MetricsExplorer = require("./MetricsExplorer");
|
|
28
|
+
const _ExplorerManagerProvider = require("./ExplorerManagerProvider");
|
|
29
|
+
function ExploreManager(props) {
|
|
30
|
+
const { exploreTitleComponent } = props;
|
|
31
|
+
const { explorer, setExplorer } = (0, _ExplorerManagerProvider.useExplorerManagerContext)();
|
|
32
|
+
const smallScreen = (0, _material.useMediaQuery)('(max-width: 768px)');
|
|
33
|
+
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
|
|
34
|
+
sx: {
|
|
35
|
+
width: '100%'
|
|
36
|
+
},
|
|
37
|
+
px: 2,
|
|
38
|
+
pb: 2,
|
|
39
|
+
pt: 1.5,
|
|
40
|
+
gap: 3,
|
|
41
|
+
children: [
|
|
42
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_ExploreToolbar.ExploreToolbar, {
|
|
43
|
+
exploreTitleComponent: exploreTitleComponent
|
|
44
|
+
}),
|
|
45
|
+
/*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
|
|
46
|
+
direction: smallScreen ? 'column' : 'row',
|
|
47
|
+
gap: 2,
|
|
48
|
+
sx: {
|
|
49
|
+
width: '100%'
|
|
50
|
+
},
|
|
51
|
+
children: [
|
|
52
|
+
/*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Tabs, {
|
|
53
|
+
orientation: smallScreen ? 'horizontal' : 'vertical',
|
|
54
|
+
value: explorer,
|
|
55
|
+
onChange: (_, state)=>setExplorer(state),
|
|
56
|
+
variant: smallScreen ? 'fullWidth' : 'scrollable',
|
|
57
|
+
sx: {
|
|
58
|
+
borderRight: smallScreen ? 0 : 1,
|
|
59
|
+
borderBottom: smallScreen ? 1 : 0,
|
|
60
|
+
borderColor: 'divider',
|
|
61
|
+
minWidth: '100px'
|
|
62
|
+
},
|
|
63
|
+
children: [
|
|
64
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tab, {
|
|
65
|
+
label: "Metrics"
|
|
66
|
+
}),
|
|
67
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tab, {
|
|
68
|
+
label: "Traces"
|
|
69
|
+
})
|
|
70
|
+
]
|
|
71
|
+
}),
|
|
72
|
+
/*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Card, {
|
|
73
|
+
sx: {
|
|
74
|
+
padding: '10px',
|
|
75
|
+
width: '100%'
|
|
76
|
+
},
|
|
77
|
+
children: [
|
|
78
|
+
explorer === 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_MetricsExplorer.MetricsExplorer, {}),
|
|
79
|
+
explorer === 1 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_TracesExplorer.TracesExplorer, {})
|
|
80
|
+
]
|
|
81
|
+
})
|
|
82
|
+
]
|
|
83
|
+
})
|
|
84
|
+
]
|
|
85
|
+
});
|
|
86
|
+
}
|
|
@@ -0,0 +1,163 @@
|
|
|
1
|
+
// Copyright 2024 The Perses Authors
|
|
2
|
+
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
3
|
+
// you may not use this file except in compliance with the License.
|
|
4
|
+
// You may obtain a copy of the License at
|
|
5
|
+
//
|
|
6
|
+
// http://www.apache.org/licenses/LICENSE-2.0
|
|
7
|
+
//
|
|
8
|
+
// Unless required by applicable law or agreed to in writing, software
|
|
9
|
+
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
10
|
+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
11
|
+
// See the License for the specific language governing permissions and
|
|
12
|
+
// limitations under the License.
|
|
13
|
+
"use strict";
|
|
14
|
+
Object.defineProperty(exports, "__esModule", {
|
|
15
|
+
value: true
|
|
16
|
+
});
|
|
17
|
+
function _export(target, all) {
|
|
18
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
19
|
+
enumerable: true,
|
|
20
|
+
get: all[name]
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
_export(exports, {
|
|
24
|
+
ExplorerManagerProvider: function() {
|
|
25
|
+
return ExplorerManagerProvider;
|
|
26
|
+
},
|
|
27
|
+
useExplorerManagerContext: function() {
|
|
28
|
+
return useExplorerManagerContext;
|
|
29
|
+
}
|
|
30
|
+
});
|
|
31
|
+
const _jsxruntime = require("react/jsx-runtime");
|
|
32
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
|
|
33
|
+
function _getRequireWildcardCache(nodeInterop) {
|
|
34
|
+
if (typeof WeakMap !== "function") return null;
|
|
35
|
+
var cacheBabelInterop = new WeakMap();
|
|
36
|
+
var cacheNodeInterop = new WeakMap();
|
|
37
|
+
return (_getRequireWildcardCache = function(nodeInterop) {
|
|
38
|
+
return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
|
|
39
|
+
})(nodeInterop);
|
|
40
|
+
}
|
|
41
|
+
function _interop_require_wildcard(obj, nodeInterop) {
|
|
42
|
+
if (!nodeInterop && obj && obj.__esModule) {
|
|
43
|
+
return obj;
|
|
44
|
+
}
|
|
45
|
+
if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
|
|
46
|
+
return {
|
|
47
|
+
default: obj
|
|
48
|
+
};
|
|
49
|
+
}
|
|
50
|
+
var cache = _getRequireWildcardCache(nodeInterop);
|
|
51
|
+
if (cache && cache.has(obj)) {
|
|
52
|
+
return cache.get(obj);
|
|
53
|
+
}
|
|
54
|
+
var newObj = {
|
|
55
|
+
__proto__: null
|
|
56
|
+
};
|
|
57
|
+
var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
|
|
58
|
+
for(var key in obj){
|
|
59
|
+
if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
|
|
60
|
+
var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
|
|
61
|
+
if (desc && (desc.get || desc.set)) {
|
|
62
|
+
Object.defineProperty(newObj, key, desc);
|
|
63
|
+
} else {
|
|
64
|
+
newObj[key] = obj[key];
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
newObj.default = obj;
|
|
69
|
+
if (cache) {
|
|
70
|
+
cache.set(obj, newObj);
|
|
71
|
+
}
|
|
72
|
+
return newObj;
|
|
73
|
+
}
|
|
74
|
+
const ExplorerManagerContext = /*#__PURE__*/ (0, _react.createContext)(undefined);
|
|
75
|
+
function initExplorerStates(initialState) {
|
|
76
|
+
const result = [];
|
|
77
|
+
if ((initialState === null || initialState === void 0 ? void 0 : initialState.explorer) !== undefined) {
|
|
78
|
+
var _initialState_tab, _initialState_queries;
|
|
79
|
+
result[initialState.explorer] = {
|
|
80
|
+
tab: (_initialState_tab = initialState.tab) !== null && _initialState_tab !== void 0 ? _initialState_tab : 0,
|
|
81
|
+
queries: (_initialState_queries = initialState.queries) !== null && _initialState_queries !== void 0 ? _initialState_queries : []
|
|
82
|
+
};
|
|
83
|
+
}
|
|
84
|
+
return result;
|
|
85
|
+
}
|
|
86
|
+
function ExplorerManagerProvider({ children, initialState }) {
|
|
87
|
+
const [explorerStates, setExplorerStates] = (0, _react.useState)(initExplorerStates(initialState));
|
|
88
|
+
var _initialState_explorer;
|
|
89
|
+
const [explorer, setInternalExplorer] = (0, _react.useState)((_initialState_explorer = initialState === null || initialState === void 0 ? void 0 : initialState.explorer) !== null && _initialState_explorer !== void 0 ? _initialState_explorer : 0);
|
|
90
|
+
const tab = (0, _react.useMemo)(()=>{
|
|
91
|
+
var _explorerStates_explorer;
|
|
92
|
+
var _explorerStates_explorer_tab;
|
|
93
|
+
return (_explorerStates_explorer_tab = (_explorerStates_explorer = explorerStates[explorer]) === null || _explorerStates_explorer === void 0 ? void 0 : _explorerStates_explorer.tab) !== null && _explorerStates_explorer_tab !== void 0 ? _explorerStates_explorer_tab : 0;
|
|
94
|
+
}, [
|
|
95
|
+
explorer,
|
|
96
|
+
explorerStates
|
|
97
|
+
]);
|
|
98
|
+
const queries = (0, _react.useMemo)(()=>{
|
|
99
|
+
var _explorerStates_explorer;
|
|
100
|
+
var _explorerStates_explorer_queries;
|
|
101
|
+
return (_explorerStates_explorer_queries = (_explorerStates_explorer = explorerStates[explorer]) === null || _explorerStates_explorer === void 0 ? void 0 : _explorerStates_explorer.queries) !== null && _explorerStates_explorer_queries !== void 0 ? _explorerStates_explorer_queries : [];
|
|
102
|
+
}, [
|
|
103
|
+
explorer,
|
|
104
|
+
explorerStates
|
|
105
|
+
]);
|
|
106
|
+
function setExplorer(explorer) {
|
|
107
|
+
setInternalExplorer(explorer);
|
|
108
|
+
if (initialState === null || initialState === void 0 ? void 0 : initialState.setExplorer) {
|
|
109
|
+
var _explorerStates_explorer, _explorerStates_explorer1;
|
|
110
|
+
initialState.setExplorer(explorer);
|
|
111
|
+
initialState.setTab((_explorerStates_explorer = explorerStates[explorer]) === null || _explorerStates_explorer === void 0 ? void 0 : _explorerStates_explorer.tab);
|
|
112
|
+
initialState.setQueries((_explorerStates_explorer1 = explorerStates[explorer]) === null || _explorerStates_explorer1 === void 0 ? void 0 : _explorerStates_explorer1.queries);
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
function setTab(tab) {
|
|
116
|
+
var _state_explorer;
|
|
117
|
+
const state = [
|
|
118
|
+
...explorerStates
|
|
119
|
+
];
|
|
120
|
+
var _state_explorer_queries;
|
|
121
|
+
state[explorer] = {
|
|
122
|
+
tab,
|
|
123
|
+
queries: (_state_explorer_queries = (_state_explorer = state[explorer]) === null || _state_explorer === void 0 ? void 0 : _state_explorer.queries) !== null && _state_explorer_queries !== void 0 ? _state_explorer_queries : []
|
|
124
|
+
};
|
|
125
|
+
setExplorerStates(state);
|
|
126
|
+
if (initialState === null || initialState === void 0 ? void 0 : initialState.setTab) {
|
|
127
|
+
initialState.setTab(tab);
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
function setQueries(queries) {
|
|
131
|
+
var _state_explorer;
|
|
132
|
+
const state = [
|
|
133
|
+
...explorerStates
|
|
134
|
+
];
|
|
135
|
+
var _state_explorer_tab;
|
|
136
|
+
state[explorer] = {
|
|
137
|
+
tab: (_state_explorer_tab = (_state_explorer = state[explorer]) === null || _state_explorer === void 0 ? void 0 : _state_explorer.tab) !== null && _state_explorer_tab !== void 0 ? _state_explorer_tab : 0,
|
|
138
|
+
queries: queries
|
|
139
|
+
};
|
|
140
|
+
setExplorerStates(state);
|
|
141
|
+
if (initialState === null || initialState === void 0 ? void 0 : initialState.setQueries) {
|
|
142
|
+
initialState === null || initialState === void 0 ? void 0 : initialState.setQueries(queries);
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
return /*#__PURE__*/ (0, _jsxruntime.jsx)(ExplorerManagerContext.Provider, {
|
|
146
|
+
value: {
|
|
147
|
+
explorer,
|
|
148
|
+
tab,
|
|
149
|
+
queries,
|
|
150
|
+
setExplorer,
|
|
151
|
+
setTab,
|
|
152
|
+
setQueries
|
|
153
|
+
},
|
|
154
|
+
children: children
|
|
155
|
+
});
|
|
156
|
+
}
|
|
157
|
+
function useExplorerManagerContext() {
|
|
158
|
+
const ctx = (0, _react.useContext)(ExplorerManagerContext);
|
|
159
|
+
if (ctx === undefined) {
|
|
160
|
+
throw new Error('No ExplorerManagerContext found. Did you forget a Provider?');
|
|
161
|
+
}
|
|
162
|
+
return ctx;
|
|
163
|
+
}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
// Copyright 2024 The Perses Authors
|
|
2
|
+
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
3
|
+
// you may not use this file except in compliance with the License.
|
|
4
|
+
// You may obtain a copy of the License at
|
|
5
|
+
//
|
|
6
|
+
// http://www.apache.org/licenses/LICENSE-2.0
|
|
7
|
+
//
|
|
8
|
+
// Unless required by applicable law or agreed to in writing, software
|
|
9
|
+
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
10
|
+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
11
|
+
// See the License for the specific language governing permissions and
|
|
12
|
+
// limitations under the License.
|
|
13
|
+
"use strict";
|
|
14
|
+
Object.defineProperty(exports, "__esModule", {
|
|
15
|
+
value: true
|
|
16
|
+
});
|
|
17
|
+
Object.defineProperty(exports, "ExplorerManagerProviderWithQueryParams", {
|
|
18
|
+
enumerable: true,
|
|
19
|
+
get: function() {
|
|
20
|
+
return ExplorerManagerProviderWithQueryParams;
|
|
21
|
+
}
|
|
22
|
+
});
|
|
23
|
+
const _jsxruntime = require("react/jsx-runtime");
|
|
24
|
+
const _react = /*#__PURE__*/ _interop_require_default(require("react"));
|
|
25
|
+
const _usequeryparams = require("use-query-params");
|
|
26
|
+
const _ExplorerManagerProvider = require("./ExplorerManagerProvider");
|
|
27
|
+
function _interop_require_default(obj) {
|
|
28
|
+
return obj && obj.__esModule ? obj : {
|
|
29
|
+
default: obj
|
|
30
|
+
};
|
|
31
|
+
}
|
|
32
|
+
const exploreQueryConfig = {
|
|
33
|
+
explorer: _usequeryparams.NumberParam,
|
|
34
|
+
tab: _usequeryparams.NumberParam,
|
|
35
|
+
queries: _usequeryparams.JsonParam
|
|
36
|
+
};
|
|
37
|
+
function ExplorerManagerProviderWithQueryParams({ children }) {
|
|
38
|
+
const [queryParams, setQueryParams] = (0, _usequeryparams.useQueryParams)(exploreQueryConfig, {
|
|
39
|
+
updateType: 'replaceIn'
|
|
40
|
+
});
|
|
41
|
+
var _queryParams_explorer, _queryParams_tab;
|
|
42
|
+
const initialState = {
|
|
43
|
+
explorer: (_queryParams_explorer = queryParams.explorer) !== null && _queryParams_explorer !== void 0 ? _queryParams_explorer : undefined,
|
|
44
|
+
tab: (_queryParams_tab = queryParams.tab) !== null && _queryParams_tab !== void 0 ? _queryParams_tab : undefined,
|
|
45
|
+
queries: queryParams.queries ? queryParams.queries : undefined,
|
|
46
|
+
setExplorer: (explorer)=>{
|
|
47
|
+
setQueryParams({
|
|
48
|
+
explorer,
|
|
49
|
+
queries: undefined,
|
|
50
|
+
tab: undefined
|
|
51
|
+
});
|
|
52
|
+
},
|
|
53
|
+
setTab: (tab)=>setQueryParams({
|
|
54
|
+
tab
|
|
55
|
+
}),
|
|
56
|
+
setQueries: (queries)=>setQueryParams({
|
|
57
|
+
queries
|
|
58
|
+
})
|
|
59
|
+
};
|
|
60
|
+
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_ExplorerManagerProvider.ExplorerManagerProvider, {
|
|
61
|
+
initialState: initialState,
|
|
62
|
+
children: children
|
|
63
|
+
});
|
|
64
|
+
}
|
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
// Copyright 2024 The Perses Authors
|
|
2
|
+
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
3
|
+
// you may not use this file except in compliance with the License.
|
|
4
|
+
// You may obtain a copy of the License at
|
|
5
|
+
//
|
|
6
|
+
// http://www.apache.org/licenses/LICENSE-2.0
|
|
7
|
+
//
|
|
8
|
+
// Unless required by applicable law or agreed to in writing, software
|
|
9
|
+
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
10
|
+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
11
|
+
// See the License for the specific language governing permissions and
|
|
12
|
+
// limitations under the License.
|
|
13
|
+
"use strict";
|
|
14
|
+
Object.defineProperty(exports, "__esModule", {
|
|
15
|
+
value: true
|
|
16
|
+
});
|
|
17
|
+
Object.defineProperty(exports, "MetricsExplorer", {
|
|
18
|
+
enumerable: true,
|
|
19
|
+
get: function() {
|
|
20
|
+
return MetricsExplorer;
|
|
21
|
+
}
|
|
22
|
+
});
|
|
23
|
+
const _jsxruntime = require("react/jsx-runtime");
|
|
24
|
+
const _material = require("@mui/material");
|
|
25
|
+
const _pluginsystem = require("@perses-dev/plugin-system");
|
|
26
|
+
const _useresizeobserver = /*#__PURE__*/ _interop_require_default(require("use-resize-observer"));
|
|
27
|
+
const _dashboards = require("@perses-dev/dashboards");
|
|
28
|
+
const _constants = require("./constants");
|
|
29
|
+
const _ExplorerManagerProvider = require("./ExplorerManagerProvider");
|
|
30
|
+
function _interop_require_default(obj) {
|
|
31
|
+
return obj && obj.__esModule ? obj : {
|
|
32
|
+
default: obj
|
|
33
|
+
};
|
|
34
|
+
}
|
|
35
|
+
function TimeSeriesPanel({ queries }) {
|
|
36
|
+
const { width, ref: boxRef } = (0, _useresizeobserver.default)();
|
|
37
|
+
const height = _constants.PANEL_PREVIEW_HEIGHT;
|
|
38
|
+
const suggestedStepMs = (0, _pluginsystem.useSuggestedStepMs)(width);
|
|
39
|
+
// map TimeSeriesQueryDefinition to Definition<UnknownSpec>
|
|
40
|
+
const definitions = queries.length ? queries.map((query)=>{
|
|
41
|
+
return {
|
|
42
|
+
kind: query.spec.plugin.kind,
|
|
43
|
+
spec: query.spec.plugin.spec
|
|
44
|
+
};
|
|
45
|
+
}) : [];
|
|
46
|
+
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
|
|
47
|
+
ref: boxRef,
|
|
48
|
+
height: height,
|
|
49
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DataQueriesProvider, {
|
|
50
|
+
definitions: definitions,
|
|
51
|
+
options: {
|
|
52
|
+
suggestedStepMs,
|
|
53
|
+
mode: 'range'
|
|
54
|
+
},
|
|
55
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_dashboards.Panel, {
|
|
56
|
+
panelOptions: {
|
|
57
|
+
hideHeader: true
|
|
58
|
+
},
|
|
59
|
+
definition: {
|
|
60
|
+
kind: 'Panel',
|
|
61
|
+
spec: {
|
|
62
|
+
queries: queries,
|
|
63
|
+
display: {
|
|
64
|
+
name: ''
|
|
65
|
+
},
|
|
66
|
+
plugin: {
|
|
67
|
+
kind: 'TimeSeriesChart',
|
|
68
|
+
spec: {}
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
})
|
|
73
|
+
})
|
|
74
|
+
});
|
|
75
|
+
}
|
|
76
|
+
function MetricDataTable({ queries }) {
|
|
77
|
+
const height = _constants.PANEL_PREVIEW_HEIGHT;
|
|
78
|
+
// map TimeSeriesQueryDefinition to Definition<UnknownSpec>
|
|
79
|
+
const definitions = (queries !== null && queries !== void 0 ? queries : []).map((query)=>{
|
|
80
|
+
return {
|
|
81
|
+
kind: query.spec.plugin.kind,
|
|
82
|
+
spec: query.spec.plugin.spec
|
|
83
|
+
};
|
|
84
|
+
});
|
|
85
|
+
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
|
|
86
|
+
height: height,
|
|
87
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DataQueriesProvider, {
|
|
88
|
+
definitions: definitions,
|
|
89
|
+
options: {
|
|
90
|
+
mode: 'instant'
|
|
91
|
+
},
|
|
92
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_dashboards.Panel, {
|
|
93
|
+
panelOptions: {
|
|
94
|
+
hideHeader: true
|
|
95
|
+
},
|
|
96
|
+
definition: {
|
|
97
|
+
kind: 'Panel',
|
|
98
|
+
spec: {
|
|
99
|
+
queries: queries,
|
|
100
|
+
display: {
|
|
101
|
+
name: ''
|
|
102
|
+
},
|
|
103
|
+
plugin: {
|
|
104
|
+
kind: 'TimeSeriesTable',
|
|
105
|
+
spec: {}
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
})
|
|
110
|
+
})
|
|
111
|
+
});
|
|
112
|
+
}
|
|
113
|
+
function MetricsExplorer() {
|
|
114
|
+
const { tab, queries, setTab, setQueries } = (0, _ExplorerManagerProvider.useExplorerManagerContext)();
|
|
115
|
+
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
|
|
116
|
+
gap: 2,
|
|
117
|
+
sx: {
|
|
118
|
+
width: '100%'
|
|
119
|
+
},
|
|
120
|
+
children: [
|
|
121
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.MultiQueryEditor, {
|
|
122
|
+
queryTypes: [
|
|
123
|
+
'TimeSeriesQuery'
|
|
124
|
+
],
|
|
125
|
+
onChange: setQueries,
|
|
126
|
+
queries: queries
|
|
127
|
+
}),
|
|
128
|
+
/*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Tabs, {
|
|
129
|
+
value: tab,
|
|
130
|
+
onChange: (_, state)=>setTab(state),
|
|
131
|
+
variant: "scrollable",
|
|
132
|
+
sx: {
|
|
133
|
+
borderBottom: 1,
|
|
134
|
+
borderColor: 'divider'
|
|
135
|
+
},
|
|
136
|
+
children: [
|
|
137
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tab, {
|
|
138
|
+
label: "Table"
|
|
139
|
+
}),
|
|
140
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tab, {
|
|
141
|
+
label: "Graph"
|
|
142
|
+
})
|
|
143
|
+
]
|
|
144
|
+
}),
|
|
145
|
+
/*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
|
|
146
|
+
gap: 1,
|
|
147
|
+
children: [
|
|
148
|
+
tab === 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(MetricDataTable, {
|
|
149
|
+
queries: queries
|
|
150
|
+
}),
|
|
151
|
+
tab === 1 && /*#__PURE__*/ (0, _jsxruntime.jsx)(TimeSeriesPanel, {
|
|
152
|
+
queries: queries
|
|
153
|
+
})
|
|
154
|
+
]
|
|
155
|
+
})
|
|
156
|
+
]
|
|
157
|
+
});
|
|
158
|
+
}
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
// Copyright 2024 The Perses Authors
|
|
2
|
+
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
3
|
+
// you may not use this file except in compliance with the License.
|
|
4
|
+
// You may obtain a copy of the License at
|
|
5
|
+
//
|
|
6
|
+
// http://www.apache.org/licenses/LICENSE-2.0
|
|
7
|
+
//
|
|
8
|
+
// Unless required by applicable law or agreed to in writing, software
|
|
9
|
+
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
10
|
+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
11
|
+
// See the License for the specific language governing permissions and
|
|
12
|
+
// limitations under the License.
|
|
13
|
+
"use strict";
|
|
14
|
+
Object.defineProperty(exports, "__esModule", {
|
|
15
|
+
value: true
|
|
16
|
+
});
|
|
17
|
+
Object.defineProperty(exports, "TracesExplorer", {
|
|
18
|
+
enumerable: true,
|
|
19
|
+
get: function() {
|
|
20
|
+
return TracesExplorer;
|
|
21
|
+
}
|
|
22
|
+
});
|
|
23
|
+
const _jsxruntime = require("react/jsx-runtime");
|
|
24
|
+
const _pluginsystem = require("@perses-dev/plugin-system");
|
|
25
|
+
const _material = require("@mui/material");
|
|
26
|
+
const _panelsplugin = require("@perses-dev/panels-plugin");
|
|
27
|
+
const _components = require("@perses-dev/components");
|
|
28
|
+
const _useresizeobserver = /*#__PURE__*/ _interop_require_default(require("use-resize-observer"));
|
|
29
|
+
const _constants = require("./constants");
|
|
30
|
+
const _ExplorerManagerProvider = require("./ExplorerManagerProvider");
|
|
31
|
+
function _interop_require_default(obj) {
|
|
32
|
+
return obj && obj.__esModule ? obj : {
|
|
33
|
+
default: obj
|
|
34
|
+
};
|
|
35
|
+
}
|
|
36
|
+
function TracePanel({ queries }) {
|
|
37
|
+
const { width, ref: boxRef } = (0, _useresizeobserver.default)();
|
|
38
|
+
const height = _constants.PANEL_PREVIEW_HEIGHT;
|
|
39
|
+
const suggestedStepMs = (0, _pluginsystem.useSuggestedStepMs)(width);
|
|
40
|
+
// map TraceQueryDefinition to Definition<UnknownSpec>
|
|
41
|
+
const definitions = queries.length ? queries.map((query)=>{
|
|
42
|
+
return {
|
|
43
|
+
kind: query.spec.plugin.kind,
|
|
44
|
+
spec: query.spec.plugin.spec
|
|
45
|
+
};
|
|
46
|
+
}) : [];
|
|
47
|
+
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
|
|
48
|
+
ref: boxRef,
|
|
49
|
+
height: height,
|
|
50
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DataQueriesProvider, {
|
|
51
|
+
definitions: definitions,
|
|
52
|
+
options: {
|
|
53
|
+
suggestedStepMs
|
|
54
|
+
},
|
|
55
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_panelsplugin.ScatterChart.PanelComponent, {
|
|
56
|
+
contentDimensions: {
|
|
57
|
+
width: width !== null && width !== void 0 ? width : _constants.PANEL_PREVIEW_DEFAULT_WIDTH,
|
|
58
|
+
height
|
|
59
|
+
},
|
|
60
|
+
spec: {}
|
|
61
|
+
})
|
|
62
|
+
})
|
|
63
|
+
});
|
|
64
|
+
}
|
|
65
|
+
function TracesExplorer() {
|
|
66
|
+
const { tab, queries, setTab, setQueries } = (0, _ExplorerManagerProvider.useExplorerManagerContext)();
|
|
67
|
+
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
|
|
68
|
+
gap: 2,
|
|
69
|
+
sx: {
|
|
70
|
+
width: '100%'
|
|
71
|
+
},
|
|
72
|
+
children: [
|
|
73
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.MultiQueryEditor, {
|
|
74
|
+
queryTypes: [
|
|
75
|
+
'TraceQuery'
|
|
76
|
+
],
|
|
77
|
+
onChange: setQueries,
|
|
78
|
+
queries: queries
|
|
79
|
+
}),
|
|
80
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tabs, {
|
|
81
|
+
value: tab,
|
|
82
|
+
onChange: (_, state)=>setTab(state),
|
|
83
|
+
variant: "scrollable",
|
|
84
|
+
sx: {
|
|
85
|
+
borderRight: 1,
|
|
86
|
+
borderColor: 'divider'
|
|
87
|
+
},
|
|
88
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tab, {
|
|
89
|
+
label: "Graph"
|
|
90
|
+
})
|
|
91
|
+
}),
|
|
92
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
|
|
93
|
+
gap: 1,
|
|
94
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
|
|
95
|
+
FallbackComponent: _components.ErrorAlert,
|
|
96
|
+
children: tab === 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(TracePanel, {
|
|
97
|
+
queries: queries
|
|
98
|
+
})
|
|
99
|
+
})
|
|
100
|
+
})
|
|
101
|
+
]
|
|
102
|
+
});
|
|
103
|
+
}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
// Copyright 2024 The Perses Authors
|
|
2
|
+
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
3
|
+
// you may not use this file except in compliance with the License.
|
|
4
|
+
// You may obtain a copy of the License at
|
|
5
|
+
//
|
|
6
|
+
// http://www.apache.org/licenses/LICENSE-2.0
|
|
7
|
+
//
|
|
8
|
+
// Unless required by applicable law or agreed to in writing, software
|
|
9
|
+
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
10
|
+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
11
|
+
// See the License for the specific language governing permissions and
|
|
12
|
+
// limitations under the License.
|
|
13
|
+
"use strict";
|
|
14
|
+
Object.defineProperty(exports, "__esModule", {
|
|
15
|
+
value: true
|
|
16
|
+
});
|
|
17
|
+
function _export(target, all) {
|
|
18
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
19
|
+
enumerable: true,
|
|
20
|
+
get: all[name]
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
_export(exports, {
|
|
24
|
+
PANEL_PREVIEW_DEFAULT_WIDTH: function() {
|
|
25
|
+
return PANEL_PREVIEW_DEFAULT_WIDTH;
|
|
26
|
+
},
|
|
27
|
+
PANEL_PREVIEW_HEIGHT: function() {
|
|
28
|
+
return PANEL_PREVIEW_HEIGHT;
|
|
29
|
+
}
|
|
30
|
+
});
|
|
31
|
+
const PANEL_PREVIEW_HEIGHT = 300;
|
|
32
|
+
const PANEL_PREVIEW_DEFAULT_WIDTH = 840;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
// Copyright 2024 The Perses Authors
|
|
2
|
+
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
3
|
+
// you may not use this file except in compliance with the License.
|
|
4
|
+
// You may obtain a copy of the License at
|
|
5
|
+
//
|
|
6
|
+
// http://www.apache.org/licenses/LICENSE-2.0
|
|
7
|
+
//
|
|
8
|
+
// Unless required by applicable law or agreed to in writing, software
|
|
9
|
+
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
10
|
+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
11
|
+
// See the License for the specific language governing permissions and
|
|
12
|
+
// limitations under the License.
|
|
13
|
+
"use strict";
|
|
14
|
+
Object.defineProperty(exports, "__esModule", {
|
|
15
|
+
value: true
|
|
16
|
+
});
|
|
17
|
+
_export_star(require("./ExploreManager"), exports);
|
|
18
|
+
function _export_star(from, to) {
|
|
19
|
+
Object.keys(from).forEach(function(k) {
|
|
20
|
+
if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
|
|
21
|
+
Object.defineProperty(to, k, {
|
|
22
|
+
enumerable: true,
|
|
23
|
+
get: function() {
|
|
24
|
+
return from[k];
|
|
25
|
+
}
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
});
|
|
29
|
+
return from;
|
|
30
|
+
}
|
|
@@ -23,13 +23,8 @@ 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
|
|
27
|
-
const
|
|
28
|
-
function _interop_require_default(obj) {
|
|
29
|
-
return obj && obj.__esModule ? obj : {
|
|
30
|
-
default: obj
|
|
31
|
-
};
|
|
32
|
-
}
|
|
26
|
+
const _ExploreManager = require("../../components/ExploreManager");
|
|
27
|
+
const _ExplorerManagerProviderWithQueryParams = require("../../components/ExploreManager/ExplorerManagerProviderWithQueryParams");
|
|
33
28
|
function ViewExploreApp(props) {
|
|
34
29
|
const { exploreTitleComponent } = props;
|
|
35
30
|
const chartsTheme = (0, _components.useChartsTheme)();
|
|
@@ -44,8 +39,10 @@ function ViewExploreApp(props) {
|
|
|
44
39
|
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ChartsProvider, {
|
|
45
40
|
chartsTheme: chartsTheme,
|
|
46
41
|
enablePinning: false,
|
|
47
|
-
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(
|
|
48
|
-
|
|
42
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ExplorerManagerProviderWithQueryParams.ExplorerManagerProviderWithQueryParams, {
|
|
43
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ExploreManager.ExploreManager, {
|
|
44
|
+
exploreTitleComponent: exploreTitleComponent
|
|
45
|
+
})
|
|
49
46
|
})
|
|
50
47
|
})
|
|
51
48
|
});
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
export interface ExploreManagerProps {
|
|
3
|
+
exploreTitleComponent?: ReactNode;
|
|
4
|
+
}
|
|
5
|
+
export declare function ExploreManager(props: ExploreManagerProps): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
//# sourceMappingURL=ExploreManager.d.ts.map
|
|
@@ -0,0 +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;AAMlC,MAAM,WAAW,mBAAmB;IAClC,qBAAqB,CAAC,EAAE,SAAS,CAAC;CACnC;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,2CAgCxD"}
|