@parca/profile 0.15.11 → 0.15.19
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/CHANGELOG.md +38 -51
- package/package.json +5 -5
- package/src/IcicleGraph.tsx +2 -1
- package/src/ProfileView.tsx +28 -33
- package/src/ProfileViewWithData.tsx +20 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,15 +3,15 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
-
## [0.15.
|
|
6
|
+
## [0.15.19](https://github.com/parca-dev/parca/compare/ui-v0.15.18...ui-v0.15.19) (2022-09-08)
|
|
7
7
|
|
|
8
|
-
**Note:** Version bump only for package @parca/profile
|
|
9
8
|
|
|
10
9
|
|
|
10
|
+
## [0.15.17](https://github.com/parca-dev/parca/compare/ui-v0.15.10...ui-v0.15.17) (2022-09-07)
|
|
11
11
|
|
|
12
12
|
|
|
13
13
|
|
|
14
|
-
## [0.15.
|
|
14
|
+
## [0.15.10](https://github.com/parca-dev/parca/compare/ui-v0.15.8...ui-v0.15.10) (2022-08-30)
|
|
15
15
|
|
|
16
16
|
**Note:** Version bump only for package @parca/profile
|
|
17
17
|
|
|
@@ -19,11 +19,11 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
|
|
19
19
|
|
|
20
20
|
|
|
21
21
|
|
|
22
|
-
## [0.15.
|
|
22
|
+
## [0.15.18](https://github.com/parca-dev/parca/compare/ui-v0.15.17...ui-v0.15.18) (2022-09-08)
|
|
23
23
|
|
|
24
24
|
|
|
25
25
|
|
|
26
|
-
## 0.15.
|
|
26
|
+
## [0.15.10](https://github.com/parca-dev/parca/compare/ui-v0.15.8...ui-v0.15.10) (2022-08-30)
|
|
27
27
|
|
|
28
28
|
**Note:** Version bump only for package @parca/profile
|
|
29
29
|
|
|
@@ -31,117 +31,104 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
|
|
31
31
|
|
|
32
32
|
|
|
33
33
|
|
|
34
|
-
## [0.15.
|
|
34
|
+
## [0.15.17](https://github.com/parca-dev/parca/compare/ui-v0.15.16...ui-v0.15.17) (2022-09-07)
|
|
35
35
|
|
|
36
|
-
**Note:** Version bump only for package @parca/profile
|
|
37
36
|
|
|
38
37
|
|
|
38
|
+
## [0.15.11](https://github.com/parca-dev/parca/compare/ui-v0.15.10...ui-v0.15.11) (2022-09-01)
|
|
39
39
|
|
|
40
40
|
|
|
41
41
|
|
|
42
|
-
|
|
42
|
+
## [0.15.10](https://github.com/parca-dev/parca/compare/ui-v0.15.2...ui-v0.15.10) (2022-08-30)
|
|
43
43
|
|
|
44
44
|
|
|
45
45
|
|
|
46
|
-
## [0.
|
|
46
|
+
## [0.15.2](https://github.com/parca-dev/parca/compare/ui-v0.15.1...ui-v0.15.2) (2022-08-25)
|
|
47
47
|
|
|
48
48
|
|
|
49
49
|
|
|
50
|
-
##
|
|
50
|
+
## 0.15.1 (2022-08-25)
|
|
51
51
|
|
|
52
|
+
**Note:** Version bump only for package @parca/profile
|
|
52
53
|
|
|
53
|
-
### Features
|
|
54
54
|
|
|
55
|
-
* implement callgraph report api ([83c81c6](https://github.com/parca-dev/parca/commit/83c81c67a140b4b723094ee0d6c2308b112b800c))
|
|
56
|
-
* tooltip for callgraph ([c1d0195](https://github.com/parca-dev/parca/commit/c1d0195e45a5aa065a89c936861646f1455336ff))
|
|
57
55
|
|
|
58
56
|
|
|
59
57
|
|
|
60
|
-
## [0.
|
|
58
|
+
## [0.15.11](https://github.com/parca-dev/parca/compare/ui-v0.15.10...ui-v0.15.11) (2022-09-01)
|
|
61
59
|
|
|
60
|
+
**Note:** Version bump only for package @parca/profile
|
|
62
61
|
|
|
62
|
+
## [0.15.9](https://github.com/parca-dev/parca/compare/ui-v0.15.8...ui-v0.15.9) (2022-08-30)
|
|
63
63
|
|
|
64
|
-
|
|
64
|
+
**Note:** Version bump only for package @parca/profile
|
|
65
65
|
|
|
66
|
+
## [0.15.3](https://github.com/parca-dev/parca/compare/ui-v0.15.2...ui-v0.15.3) (2022-08-25)
|
|
66
67
|
|
|
68
|
+
## 0.15.1 (2022-08-25)
|
|
67
69
|
|
|
68
|
-
|
|
70
|
+
**Note:** Version bump only for package @parca/profile
|
|
69
71
|
|
|
72
|
+
## [0.15.2](https://github.com/parca-dev/parca/compare/ui-v0.15.1...ui-v0.15.2) (2022-08-25)
|
|
70
73
|
|
|
71
|
-
|
|
74
|
+
**Note:** Version bump only for package @parca/profile
|
|
75
|
+
|
|
76
|
+
# [0.15.0](https://github.com/parca-dev/parca/compare/ui-v0.14.37...ui-v0.15.0) (2022-08-24)
|
|
72
77
|
|
|
73
|
-
|
|
74
|
-
* connect callgraph component to actual data ([b7dd5d8](https://github.com/parca-dev/parca/commit/b7dd5d8b0851d11010f66a3a5ca03d50902636a1))
|
|
78
|
+
## [0.14.32](https://github.com/parca-dev/parca/compare/ui-v0.14.30...ui-v0.14.32) (2022-08-18)
|
|
75
79
|
|
|
80
|
+
## [0.14.30](https://github.com/parca-dev/parca/compare/ui-v0.14.24...ui-v0.14.30) (2022-08-17)
|
|
76
81
|
|
|
82
|
+
### Features
|
|
77
83
|
|
|
78
|
-
|
|
84
|
+
- implement callgraph report api ([83c81c6](https://github.com/parca-dev/parca/commit/83c81c67a140b4b723094ee0d6c2308b112b800c))
|
|
85
|
+
- tooltip for callgraph ([c1d0195](https://github.com/parca-dev/parca/commit/c1d0195e45a5aa065a89c936861646f1455336ff))
|
|
79
86
|
|
|
87
|
+
## [0.14.16](https://github.com/parca-dev/parca/compare/ui-v0.14.11...ui-v0.14.16) (2022-08-03)
|
|
80
88
|
|
|
89
|
+
## [0.14.3-alpha.0](https://github.com/parca-dev/parca/compare/ui-v0.14.1...ui-v0.14.3-alpha.0) (2022-07-26)
|
|
81
90
|
|
|
82
|
-
## [0.13.
|
|
91
|
+
## [0.13.14](https://github.com/parca-dev/parca/compare/ui-v0.13.12...ui-v0.13.14) (2022-06-29)
|
|
83
92
|
|
|
93
|
+
### Features
|
|
84
94
|
|
|
95
|
+
- add tooltip to callgraph ([b261a48](https://github.com/parca-dev/parca/commit/b261a48a92739d5fb957957da929495cb206417e))
|
|
96
|
+
- connect callgraph component to actual data ([b7dd5d8](https://github.com/parca-dev/parca/commit/b7dd5d8b0851d11010f66a3a5ca03d50902636a1))
|
|
85
97
|
|
|
98
|
+
## [0.13.10](https://github.com/parca-dev/parca/compare/ui-v0.13.2...ui-v0.13.10) (2022-06-22)
|
|
86
99
|
|
|
100
|
+
## [0.13.2](https://github.com/parca-dev/parca/compare/ui-v0.13.1...ui-v0.13.2) (2022-05-31)
|
|
87
101
|
|
|
88
102
|
## [0.14.37](https://github.com/parca-dev/parca/compare/ui-v0.14.36...ui-v0.14.37) (2022-08-24)
|
|
89
103
|
|
|
90
104
|
**Note:** Version bump only for package @parca/profile
|
|
91
105
|
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
106
|
## [0.14.36](https://github.com/parca-dev/parca/compare/ui-v0.14.35...ui-v0.14.36) (2022-08-24)
|
|
97
107
|
|
|
98
|
-
|
|
99
108
|
### Bug Fixes
|
|
100
109
|
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
110
|
+
- **ui:** enforce @typescript-eslint/explicit-function-return-type ([22a18fd](https://github.com/parca-dev/parca/commit/22a18fd3f7befef5cc175131d8c997c3967a5713))
|
|
104
111
|
|
|
105
112
|
## 0.14.32 (2022-08-18)
|
|
106
113
|
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
114
|
## [0.14.31](https://github.com/parca-dev/parca/compare/ui-v0.14.30...ui-v0.14.31) (2022-08-18)
|
|
112
115
|
|
|
113
|
-
|
|
114
116
|
### Bug Fixes
|
|
115
117
|
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
118
|
+
- **ui:** address all problems reported by ESLint ([7f9c921](https://github.com/parca-dev/parca/commit/7f9c9217af49f2661a4363b9b17a9a06f1c7539b))
|
|
121
119
|
|
|
122
120
|
## [0.14.30](https://github.com/parca-dev/parca/compare/ui-v0.14.29...ui-v0.14.30) (2022-08-17)
|
|
123
121
|
|
|
124
|
-
|
|
125
122
|
### Bug Fixes
|
|
126
123
|
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
124
|
+
- **ui:** run eslint --fix ([#1542](https://github.com/parca-dev/parca/issues/1542)) ([e522131](https://github.com/parca-dev/parca/commit/e5221318fc1140d661c45d2d04b096bfebba4af4))
|
|
132
125
|
|
|
133
126
|
## [0.14.29](https://github.com/parca-dev/parca/compare/ui-v0.14.28...ui-v0.14.29) (2022-08-15)
|
|
134
127
|
|
|
135
|
-
|
|
136
|
-
|
|
137
128
|
## 0.14.21 (2022-08-10)
|
|
138
129
|
|
|
139
130
|
**Note:** Version bump only for package @parca/profile
|
|
140
131
|
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
132
|
## [0.14.16](https://github.com/parca-dev/parca/compare/ui-v0.14.15...ui-v0.14.16) (2022-08-03)
|
|
146
133
|
|
|
147
134
|
**Note:** Version bump only for package @parca/profile
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@parca/profile",
|
|
3
|
-
"version": "0.15.
|
|
3
|
+
"version": "0.15.19",
|
|
4
4
|
"description": "Profile viewing libraries",
|
|
5
5
|
"dependencies": {
|
|
6
6
|
"@iconify/react": "^3.2.2",
|
|
7
7
|
"@parca/client": "^0.15.11",
|
|
8
|
-
"@parca/dynamicsize": "^0.15.
|
|
9
|
-
"@parca/functions": "^0.15.
|
|
10
|
-
"@parca/parser": "^0.15.
|
|
8
|
+
"@parca/dynamicsize": "^0.15.17",
|
|
9
|
+
"@parca/functions": "^0.15.17",
|
|
10
|
+
"@parca/parser": "^0.15.17",
|
|
11
11
|
"d3-scale": "^4.0.2",
|
|
12
12
|
"d3-selection": "3.0.0",
|
|
13
13
|
"react-copy-to-clipboard": "^5.1.0"
|
|
@@ -23,5 +23,5 @@
|
|
|
23
23
|
"access": "public",
|
|
24
24
|
"registry": "https://registry.npmjs.org/"
|
|
25
25
|
},
|
|
26
|
-
"gitHead": "
|
|
26
|
+
"gitHead": "bd028ff3e017cfeda0b743b2426f8d30f92b72f9"
|
|
27
27
|
}
|
package/src/IcicleGraph.tsx
CHANGED
|
@@ -22,6 +22,7 @@ import {getLastItem, diffColor, isSearchMatch} from '@parca/functions';
|
|
|
22
22
|
import {useAppSelector, selectDarkMode, selectSearchNodeString} from '@parca/store';
|
|
23
23
|
|
|
24
24
|
import {hexifyAddress} from './utils';
|
|
25
|
+
import {HoveringNode} from '@parca/components/src/GraphTooltip';
|
|
25
26
|
|
|
26
27
|
interface IcicleGraphProps {
|
|
27
28
|
graph: Flamegraph;
|
|
@@ -336,7 +337,7 @@ export default function IcicleGraph({
|
|
|
336
337
|
total={total}
|
|
337
338
|
x={pos[0]}
|
|
338
339
|
y={pos[1]}
|
|
339
|
-
hoveringNode={hoveringNode}
|
|
340
|
+
hoveringNode={hoveringNode as HoveringNode}
|
|
340
341
|
contextElement={svg.current}
|
|
341
342
|
/>
|
|
342
343
|
<svg
|
package/src/ProfileView.tsx
CHANGED
|
@@ -11,7 +11,6 @@
|
|
|
11
11
|
// See the License for the specific language governing permissions and
|
|
12
12
|
// limitations under the License.
|
|
13
13
|
|
|
14
|
-
/* eslint-disable */
|
|
15
14
|
import React, {useEffect, useMemo, useState} from 'react';
|
|
16
15
|
|
|
17
16
|
import {parseParams} from '@parca/functions';
|
|
@@ -21,7 +20,6 @@ import {
|
|
|
21
20
|
Button,
|
|
22
21
|
Card,
|
|
23
22
|
SearchNodes,
|
|
24
|
-
useGrpcMetadata,
|
|
25
23
|
useParcaTheme,
|
|
26
24
|
Callgraph as CallgraphComponent,
|
|
27
25
|
} from '@parca/components';
|
|
@@ -32,7 +30,6 @@ import ProfileIcicleGraph from './ProfileIcicleGraph';
|
|
|
32
30
|
import {ProfileSource} from './ProfileSource';
|
|
33
31
|
import TopTable from './TopTable';
|
|
34
32
|
import useDelayedLoader from './useDelayedLoader';
|
|
35
|
-
import {downloadPprof} from './utils';
|
|
36
33
|
|
|
37
34
|
import './ProfileView.styles.css';
|
|
38
35
|
|
|
@@ -56,7 +53,7 @@ interface CallgraphData {
|
|
|
56
53
|
error?: any;
|
|
57
54
|
}
|
|
58
55
|
|
|
59
|
-
type VisualizationType = 'icicle' | 'table' | 'callgraph' | 'both';
|
|
56
|
+
export type VisualizationType = 'icicle' | 'table' | 'callgraph' | 'both';
|
|
60
57
|
|
|
61
58
|
interface ProfileVisState {
|
|
62
59
|
currentView: VisualizationType;
|
|
@@ -73,6 +70,7 @@ interface ProfileViewProps {
|
|
|
73
70
|
queryClient?: QueryServiceClient;
|
|
74
71
|
navigateTo?: NavigateFunction;
|
|
75
72
|
compare?: boolean;
|
|
73
|
+
onDownloadPProf: () => void;
|
|
76
74
|
}
|
|
77
75
|
|
|
78
76
|
function arrayEquals<T>(a: T[], b: T[]): boolean {
|
|
@@ -84,11 +82,18 @@ function arrayEquals<T>(a: T[], b: T[]): boolean {
|
|
|
84
82
|
);
|
|
85
83
|
}
|
|
86
84
|
export const useProfileVisState = (): ProfileVisState => {
|
|
87
|
-
const
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
85
|
+
const [currentView, setCurrentView] = useState<VisualizationType>(() => {
|
|
86
|
+
if (typeof window === 'undefined') {
|
|
87
|
+
return 'icicle';
|
|
88
|
+
}
|
|
89
|
+
const router = parseParams(window.location.search);
|
|
90
|
+
const currentViewFromURL = router.currentProfileView as string;
|
|
91
|
+
|
|
92
|
+
if (currentViewFromURL != null) {
|
|
93
|
+
return currentViewFromURL as VisualizationType;
|
|
94
|
+
}
|
|
95
|
+
return 'icicle';
|
|
96
|
+
});
|
|
92
97
|
|
|
93
98
|
return {currentView, setCurrentView};
|
|
94
99
|
};
|
|
@@ -102,6 +107,7 @@ export const ProfileView = ({
|
|
|
102
107
|
queryClient,
|
|
103
108
|
navigateTo,
|
|
104
109
|
profileVisState,
|
|
110
|
+
onDownloadPProf,
|
|
105
111
|
}: ProfileViewProps): JSX.Element => {
|
|
106
112
|
const {ref, dimensions} = useContainerDimensions();
|
|
107
113
|
const [curPath, setCurPath] = useState<string[]>([]);
|
|
@@ -109,7 +115,6 @@ export const ProfileView = ({
|
|
|
109
115
|
|
|
110
116
|
const [callgraphEnabled] = useUIFeatureFlag('callgraph');
|
|
111
117
|
|
|
112
|
-
const metadata = useGrpcMetadata();
|
|
113
118
|
const {loader} = useParcaTheme();
|
|
114
119
|
|
|
115
120
|
useEffect(() => {
|
|
@@ -122,7 +127,7 @@ export const ProfileView = ({
|
|
|
122
127
|
return Boolean(flamegraphData?.loading);
|
|
123
128
|
}
|
|
124
129
|
if (currentView === 'callgraph') {
|
|
125
|
-
return
|
|
130
|
+
return Boolean(callgraphData?.loading);
|
|
126
131
|
}
|
|
127
132
|
if (currentView === 'table') {
|
|
128
133
|
return Boolean(topTableData?.loading);
|
|
@@ -148,23 +153,6 @@ export const ProfileView = ({
|
|
|
148
153
|
);
|
|
149
154
|
}
|
|
150
155
|
|
|
151
|
-
const downloadPProf = async (e: React.MouseEvent<HTMLElement>): Promise<void> => {
|
|
152
|
-
e.preventDefault();
|
|
153
|
-
if (profileSource == null || queryClient == null) {
|
|
154
|
-
return;
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
try {
|
|
158
|
-
const blob = await downloadPprof(profileSource.QueryRequest(), queryClient, metadata);
|
|
159
|
-
const link = document.createElement('a');
|
|
160
|
-
link.href = window.URL.createObjectURL(blob);
|
|
161
|
-
link.download = 'profile.pb.gz';
|
|
162
|
-
link.click();
|
|
163
|
-
} catch (error) {
|
|
164
|
-
console.error('Error while querying', error);
|
|
165
|
-
}
|
|
166
|
-
};
|
|
167
|
-
|
|
168
156
|
const resetIcicleGraph = (): void => setCurPath([]);
|
|
169
157
|
|
|
170
158
|
const setNewCurPath = (path: string[]): void => {
|
|
@@ -177,11 +165,12 @@ export const ProfileView = ({
|
|
|
177
165
|
if (view == null) {
|
|
178
166
|
return;
|
|
179
167
|
}
|
|
180
|
-
if (navigateTo === undefined) return;
|
|
181
|
-
|
|
182
168
|
setCurrentView(view);
|
|
183
|
-
const router = parseParams(window.location.search);
|
|
184
169
|
|
|
170
|
+
if (navigateTo === undefined) {
|
|
171
|
+
return;
|
|
172
|
+
}
|
|
173
|
+
const router = parseParams(window.location.search);
|
|
185
174
|
navigateTo('/', {...router, ...{currentProfileView: view}});
|
|
186
175
|
};
|
|
187
176
|
|
|
@@ -200,7 +189,13 @@ export const ProfileView = ({
|
|
|
200
189
|
/>
|
|
201
190
|
) : null}
|
|
202
191
|
|
|
203
|
-
<Button
|
|
192
|
+
<Button
|
|
193
|
+
color="neutral"
|
|
194
|
+
onClick={e => {
|
|
195
|
+
e.preventDefault();
|
|
196
|
+
onDownloadPProf();
|
|
197
|
+
}}
|
|
198
|
+
>
|
|
204
199
|
Download pprof
|
|
205
200
|
</Button>
|
|
206
201
|
</div>
|
|
@@ -272,7 +267,7 @@ export const ProfileView = ({
|
|
|
272
267
|
|
|
273
268
|
{currentView === 'callgraph' && callgraphData?.data != null && (
|
|
274
269
|
<div className="w-full">
|
|
275
|
-
{dimensions?.width && (
|
|
270
|
+
{dimensions?.width !== undefined && (
|
|
276
271
|
<CallgraphComponent
|
|
277
272
|
graph={callgraphData.data}
|
|
278
273
|
sampleUnit={sampleUnit}
|
|
@@ -16,6 +16,8 @@ import {QueryServiceClient, QueryRequest_ReportType} from '@parca/client';
|
|
|
16
16
|
import {useQuery} from './useQuery';
|
|
17
17
|
import {ProfileView, useProfileVisState} from './ProfileView';
|
|
18
18
|
import {ProfileSource} from './ProfileSource';
|
|
19
|
+
import {downloadPprof} from './utils';
|
|
20
|
+
import {useGrpcMetadata} from '@parca/components';
|
|
19
21
|
|
|
20
22
|
type NavigateFunction = (path: string, queryParams: any) => void;
|
|
21
23
|
|
|
@@ -32,6 +34,7 @@ export const ProfileViewWithData = ({
|
|
|
32
34
|
navigateTo,
|
|
33
35
|
}: ProfileViewWithDataProps): JSX.Element => {
|
|
34
36
|
const profileVisState = useProfileVisState();
|
|
37
|
+
const metadata = useGrpcMetadata();
|
|
35
38
|
const {currentView} = profileVisState;
|
|
36
39
|
const {
|
|
37
40
|
isLoading: flamegraphLoading,
|
|
@@ -59,6 +62,22 @@ export const ProfileViewWithData = ({
|
|
|
59
62
|
|
|
60
63
|
const sampleUnit = profileSource.ProfileType().sampleUnit;
|
|
61
64
|
|
|
65
|
+
const downloadPProfClick = async (): Promise<void> => {
|
|
66
|
+
if (profileSource == null || queryClient == null) {
|
|
67
|
+
return;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
try {
|
|
71
|
+
const blob = await downloadPprof(profileSource.QueryRequest(), queryClient, metadata);
|
|
72
|
+
const link = document.createElement('a');
|
|
73
|
+
link.href = window.URL.createObjectURL(blob);
|
|
74
|
+
link.download = 'profile.pb.gz';
|
|
75
|
+
link.click();
|
|
76
|
+
} catch (error) {
|
|
77
|
+
console.error('Error while querying', error);
|
|
78
|
+
}
|
|
79
|
+
};
|
|
80
|
+
|
|
62
81
|
return (
|
|
63
82
|
<ProfileView
|
|
64
83
|
flamegraphData={{
|
|
@@ -88,6 +107,7 @@ export const ProfileViewWithData = ({
|
|
|
88
107
|
profileSource={profileSource}
|
|
89
108
|
queryClient={queryClient}
|
|
90
109
|
navigateTo={navigateTo}
|
|
110
|
+
onDownloadPProf={() => void downloadPProfClick()}
|
|
91
111
|
/>
|
|
92
112
|
);
|
|
93
113
|
};
|