@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.
Files changed (46) hide show
  1. package/dist/cjs/components/ExploreManager/ExploreManager.js +86 -0
  2. package/dist/cjs/components/ExploreManager/ExplorerManagerProvider.js +163 -0
  3. package/dist/cjs/components/ExploreManager/ExplorerManagerProviderWithQueryParams.js +64 -0
  4. package/dist/cjs/components/ExploreManager/MetricsExplorer.js +158 -0
  5. package/dist/cjs/components/ExploreManager/TracesExplorer.js +103 -0
  6. package/dist/cjs/components/ExploreManager/constants.js +32 -0
  7. package/dist/cjs/components/ExploreManager/index.js +30 -0
  8. package/dist/cjs/views/ViewExplore/ViewExploreApp.js +6 -9
  9. package/dist/components/ExploreManager/ExploreManager.d.ts +6 -0
  10. package/dist/components/ExploreManager/ExploreManager.d.ts.map +1 -0
  11. package/dist/components/ExploreManager/ExploreManager.js +78 -0
  12. package/dist/components/ExploreManager/ExploreManager.js.map +1 -0
  13. package/dist/components/ExploreManager/ExplorerManagerProvider.d.ts +26 -0
  14. package/dist/components/ExploreManager/ExplorerManagerProvider.d.ts.map +1 -0
  15. package/dist/components/ExploreManager/ExplorerManagerProvider.js +106 -0
  16. package/dist/components/ExploreManager/ExplorerManagerProvider.js.map +1 -0
  17. package/dist/components/ExploreManager/ExplorerManagerProviderWithQueryParams.d.ts +7 -0
  18. package/dist/components/ExploreManager/ExplorerManagerProviderWithQueryParams.d.ts.map +1 -0
  19. package/dist/components/ExploreManager/ExplorerManagerProviderWithQueryParams.js +51 -0
  20. package/dist/components/ExploreManager/ExplorerManagerProviderWithQueryParams.js.map +1 -0
  21. package/dist/components/ExploreManager/MetricsExplorer.d.ts +2 -0
  22. package/dist/components/ExploreManager/MetricsExplorer.d.ts.map +1 -0
  23. package/dist/components/ExploreManager/MetricsExplorer.js +145 -0
  24. package/dist/components/ExploreManager/MetricsExplorer.js.map +1 -0
  25. package/dist/components/ExploreManager/TracesExplorer.d.ts +2 -0
  26. package/dist/components/ExploreManager/TracesExplorer.d.ts.map +1 -0
  27. package/dist/components/ExploreManager/TracesExplorer.js +90 -0
  28. package/dist/components/ExploreManager/TracesExplorer.js.map +1 -0
  29. package/dist/components/ExploreManager/constants.d.ts +3 -0
  30. package/dist/components/ExploreManager/constants.d.ts.map +1 -0
  31. package/dist/components/ExploreManager/constants.js +16 -0
  32. package/dist/components/ExploreManager/constants.js.map +1 -0
  33. package/dist/components/ExploreManager/index.d.ts +2 -0
  34. package/dist/components/ExploreManager/index.d.ts.map +1 -0
  35. package/dist/components/ExploreManager/index.js +15 -0
  36. package/dist/components/ExploreManager/index.js.map +1 -0
  37. package/dist/views/ViewExplore/ViewExploreApp.d.ts +2 -2
  38. package/dist/views/ViewExplore/ViewExploreApp.d.ts.map +1 -1
  39. package/dist/views/ViewExplore/ViewExploreApp.js +6 -4
  40. package/dist/views/ViewExplore/ViewExploreApp.js.map +1 -1
  41. package/package.json +8 -8
  42. package/dist/cjs/components/TimeSeriesExplorer/TimeSeriesExplorer.js +0 -169
  43. package/dist/components/TimeSeriesExplorer/TimeSeriesExplorer.d.ts +0 -11
  44. package/dist/components/TimeSeriesExplorer/TimeSeriesExplorer.d.ts.map +0 -1
  45. package/dist/components/TimeSeriesExplorer/TimeSeriesExplorer.js +0 -112
  46. 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 _react = /*#__PURE__*/ _interop_require_default(require("react"));
27
- const _TimeSeriesExplorer = require("../../components/TimeSeriesExplorer/TimeSeriesExplorer");
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)(_TimeSeriesExplorer.TimeSeriesExplorer, {
48
- exploreTitleComponent: exploreTitleComponent
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"}