@parca/profile 0.19.73 → 0.19.75
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 +8 -0
- package/dist/MatchersInput/index.d.ts.map +1 -1
- package/dist/MatchersInput/index.js +4 -2
- package/dist/ProfileExplorer/ProfileExplorerCompare.d.ts +1 -12
- package/dist/ProfileExplorer/ProfileExplorerCompare.d.ts.map +1 -1
- package/dist/ProfileExplorer/ProfileExplorerCompare.js +52 -11
- package/dist/ProfileExplorer/ProfileExplorerSingle.d.ts +1 -7
- package/dist/ProfileExplorer/ProfileExplorerSingle.d.ts.map +1 -1
- package/dist/ProfileExplorer/ProfileExplorerSingle.js +4 -2
- package/dist/ProfileExplorer/index.d.ts +1 -4
- package/dist/ProfileExplorer/index.d.ts.map +1 -1
- package/dist/ProfileExplorer/index.js +11 -225
- package/dist/ProfileMetricsGraph/index.d.ts +1 -1
- package/dist/ProfileMetricsGraph/index.d.ts.map +1 -1
- package/dist/ProfileMetricsGraph/index.js +16 -20
- package/dist/ProfileSelector/MetricsGraphSection.d.ts +3 -3
- package/dist/ProfileSelector/MetricsGraphSection.d.ts.map +1 -1
- package/dist/ProfileSelector/MetricsGraphSection.js +10 -6
- package/dist/ProfileSelector/index.d.ts +2 -7
- package/dist/ProfileSelector/index.d.ts.map +1 -1
- package/dist/ProfileSelector/index.js +40 -46
- package/dist/ProfileSelector/useAutoQuerySelector.d.ts.map +1 -1
- package/dist/ProfileSelector/useAutoQuerySelector.js +19 -4
- package/dist/ProfileTypeSelector/index.d.ts.map +1 -1
- package/dist/ProfileTypeSelector/index.js +1 -1
- package/dist/ProfileView/components/ProfileFilters/filterPresets.d.ts.map +1 -1
- package/dist/ProfileView/components/ProfileFilters/filterPresets.js +75 -0
- package/dist/ProfileView/components/ViewSelector/index.d.ts.map +1 -1
- package/dist/ProfileView/components/ViewSelector/index.js +10 -4
- package/dist/ProfileView/hooks/useResetStateOnProfileTypeChange.d.ts.map +1 -1
- package/dist/ProfileView/hooks/useResetStateOnProfileTypeChange.js +4 -2
- package/dist/ProfileView/hooks/useVisualizationState.d.ts.map +1 -1
- package/dist/ProfileView/hooks/useVisualizationState.js +20 -13
- package/dist/Table/MoreDropdown.d.ts.map +1 -1
- package/dist/Table/MoreDropdown.js +7 -3
- package/dist/Table/TableContextMenu.d.ts.map +1 -1
- package/dist/Table/TableContextMenu.js +9 -5
- package/dist/hooks/useCompareModeMeta.d.ts +10 -0
- package/dist/hooks/useCompareModeMeta.d.ts.map +1 -0
- package/dist/hooks/useCompareModeMeta.js +113 -0
- package/dist/hooks/useQueryState.d.ts +32 -0
- package/dist/hooks/useQueryState.d.ts.map +1 -0
- package/dist/hooks/useQueryState.js +285 -0
- package/dist/hooks/useQueryState.test.d.ts +2 -0
- package/dist/hooks/useQueryState.test.d.ts.map +1 -0
- package/dist/hooks/useQueryState.test.js +910 -0
- package/dist/index.d.ts +4 -5
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +6 -3
- package/dist/styles.css +1 -1
- package/dist/useSumBy.d.ts +7 -0
- package/dist/useSumBy.d.ts.map +1 -1
- package/dist/useSumBy.js +31 -6
- package/package.json +6 -6
- package/src/MatchersInput/index.tsx +4 -2
- package/src/ProfileExplorer/ProfileExplorerCompare.tsx +64 -46
- package/src/ProfileExplorer/ProfileExplorerSingle.tsx +7 -19
- package/src/ProfileExplorer/index.tsx +11 -339
- package/src/ProfileMetricsGraph/index.tsx +16 -20
- package/src/ProfileSelector/MetricsGraphSection.tsx +14 -10
- package/src/ProfileSelector/index.tsx +65 -83
- package/src/ProfileSelector/useAutoQuerySelector.ts +23 -5
- package/src/ProfileTypeSelector/index.tsx +3 -1
- package/src/ProfileView/components/ProfileFilters/filterPresets.ts +75 -0
- package/src/ProfileView/components/ViewSelector/index.tsx +9 -4
- package/src/ProfileView/hooks/useResetStateOnProfileTypeChange.ts +4 -2
- package/src/ProfileView/hooks/useVisualizationState.ts +25 -12
- package/src/Table/MoreDropdown.tsx +7 -3
- package/src/Table/TableContextMenu.tsx +9 -5
- package/src/hooks/useCompareModeMeta.ts +131 -0
- package/src/hooks/useQueryState.test.tsx +1202 -0
- package/src/hooks/useQueryState.ts +414 -0
- package/src/index.tsx +9 -11
- package/src/useSumBy.ts +62 -7
- package/src/ProfileExplorer/index.test.ts +0 -97
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
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.19.75](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.74...@parca/profile@0.19.75) (2025-11-18)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @parca/profile
|
|
9
|
+
|
|
10
|
+
## [0.19.74](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.73...@parca/profile@0.19.74) (2025-11-13)
|
|
11
|
+
|
|
12
|
+
**Note:** Version bump only for package @parca/profile
|
|
13
|
+
|
|
6
14
|
## [0.19.73](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.72...@parca/profile@0.19.73) (2025-11-03)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @parca/profile
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MatchersInput/index.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAgB,cAAc,EAAE,kBAAkB,EAAgB,MAAM,eAAe,CAAC;AAE/F,OAAO,EAAC,KAAK,EAAC,MAAM,eAAe,CAAC;AAIpC,OAAO,EAAC,iBAAiB,EAAC,MAAM,oBAAoB,CAAC;AAKrD,UAAU,kBAAkB;IAC1B,WAAW,EAAE,kBAAkB,CAAC;IAChC,iBAAiB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,EAAE,KAAK,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC;CACf;AAED,UAAU,aAAa;IACrB,MAAM,EAAE,iBAAiB,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC9B;AAED,eAAO,MAAM,aAAa,GACxB,QAAQ,kBAAkB,EAC1B,aAAa,MAAM,EACnB,QAAQ,MAAM,EACd,MAAM,MAAM,EACZ,QAAQ,MAAM,EAAE,KACf,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MatchersInput/index.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAgB,cAAc,EAAE,kBAAkB,EAAgB,MAAM,eAAe,CAAC;AAE/F,OAAO,EAAC,KAAK,EAAC,MAAM,eAAe,CAAC;AAIpC,OAAO,EAAC,iBAAiB,EAAC,MAAM,oBAAoB,CAAC;AAKrD,UAAU,kBAAkB;IAC1B,WAAW,EAAE,kBAAkB,CAAC;IAChC,iBAAiB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,EAAE,KAAK,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC;CACf;AAED,UAAU,aAAa;IACrB,MAAM,EAAE,iBAAiB,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC9B;AAED,eAAO,MAAM,aAAa,GACxB,QAAQ,kBAAkB,EAC1B,aAAa,MAAM,EACnB,QAAQ,MAAM,EACd,MAAM,MAAM,EACZ,QAAQ,MAAM,EAAE,KACf,aAkCF,CAAC;AAEF,UAAU,cAAc;IACtB,MAAM,EAAE;QACN,QAAQ,EAAE,MAAM,EAAE,CAAC;QACnB,KAAK,CAAC,EAAE,KAAK,CAAC;KACf,CAAC;IACF,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC9B;AAED,eAAO,MAAM,cAAc,GACzB,QAAQ,kBAAkB,EAC1B,WAAW,MAAM,EACjB,aAAa,MAAM,EACnB,QAAQ,MAAM,EACd,MAAM,MAAM,KACX,cAiCF,CAAC;AAEF,eAAO,MAAM,8BAA8B,GACzC,WAAW,MAAM,EACjB,oBAAoB,iBAAiB,KACpC,MAAM,EAWR,CAAC;AA2MF,MAAM,CAAC,OAAO,UAAU,yBAAyB,CAAC,KAAK,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CAWxF"}
|
|
@@ -11,7 +11,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
11
11
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
12
12
|
// See the License for the specific language governing permissions and
|
|
13
13
|
// limitations under the License.
|
|
14
|
-
import { useMemo, useRef, useState } from 'react';
|
|
14
|
+
import { useEffect, useMemo, useRef, useState } from 'react';
|
|
15
15
|
import { useQuery } from '@tanstack/react-query';
|
|
16
16
|
import cx from 'classnames';
|
|
17
17
|
import TextareaAutosize from 'react-textarea-autosize';
|
|
@@ -43,7 +43,9 @@ export const useLabelNames = (client, profileType, start, end, match) => {
|
|
|
43
43
|
keepPreviousData: false,
|
|
44
44
|
},
|
|
45
45
|
});
|
|
46
|
-
|
|
46
|
+
useEffect(() => {
|
|
47
|
+
console.log('Label names query result:', { data, error, isLoading });
|
|
48
|
+
}, [data, error, isLoading]);
|
|
47
49
|
return {
|
|
48
50
|
result: { response: data, error: error },
|
|
49
51
|
loading: isLoading,
|
|
@@ -1,20 +1,9 @@
|
|
|
1
1
|
import { QueryServiceClient } from '@parca/client';
|
|
2
2
|
import type { NavigateFunction } from '@parca/utilities';
|
|
3
|
-
import { ProfileSelection } from '..';
|
|
4
|
-
import { QuerySelection } from '../ProfileSelector';
|
|
5
3
|
interface ProfileExplorerCompareProps {
|
|
6
4
|
queryClient: QueryServiceClient;
|
|
7
|
-
queryA: QuerySelection;
|
|
8
|
-
queryB: QuerySelection;
|
|
9
|
-
profileA: ProfileSelection | null;
|
|
10
|
-
profileB: ProfileSelection | null;
|
|
11
|
-
selectQueryA: (query: QuerySelection) => void;
|
|
12
|
-
selectQueryB: (query: QuerySelection) => void;
|
|
13
|
-
selectProfileA: (source: ProfileSelection) => void;
|
|
14
|
-
selectProfileB: (source: ProfileSelection) => void;
|
|
15
|
-
closeProfile: (card: string) => void;
|
|
16
5
|
navigateTo: NavigateFunction;
|
|
17
6
|
}
|
|
18
|
-
declare const ProfileExplorerCompare: ({ queryClient,
|
|
7
|
+
declare const ProfileExplorerCompare: ({ queryClient, navigateTo, }: ProfileExplorerCompareProps) => JSX.Element;
|
|
19
8
|
export default ProfileExplorerCompare;
|
|
20
9
|
//# sourceMappingURL=ProfileExplorerCompare.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProfileExplorerCompare.d.ts","sourceRoot":"","sources":["../../src/ProfileExplorer/ProfileExplorerCompare.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAIjD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"ProfileExplorerCompare.d.ts","sourceRoot":"","sources":["../../src/ProfileExplorer/ProfileExplorerCompare.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAIjD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,kBAAkB,CAAC;AAOvD,UAAU,2BAA2B;IACnC,WAAW,EAAE,kBAAkB,CAAC;IAChC,UAAU,EAAE,gBAAgB,CAAC;CAC9B;AAED,QAAA,MAAM,sBAAsB,GAAI,8BAG7B,2BAA2B,KAAG,GAAG,CAAC,OAmHpC,CAAC;AAEF,eAAe,sBAAsB,CAAC"}
|
|
@@ -11,21 +11,62 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
11
11
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
12
12
|
// See the License for the specific language governing permissions and
|
|
13
13
|
// limitations under the License.
|
|
14
|
-
import { useState } from 'react';
|
|
15
|
-
import {
|
|
14
|
+
import { useCallback, useEffect, useMemo, useState } from 'react';
|
|
15
|
+
import { useURLStateBatch } from '@parca/components';
|
|
16
16
|
import { Query } from '@parca/parser';
|
|
17
17
|
import { TEST_IDS, testId } from '@parca/test-utils';
|
|
18
18
|
import { ProfileDiffSource, ProfileViewWithData } from '..';
|
|
19
19
|
import ProfileSelector from '../ProfileSelector';
|
|
20
|
-
|
|
20
|
+
import { useCompareModeMeta } from '../hooks/useCompareModeMeta';
|
|
21
|
+
import { useQueryState } from '../hooks/useQueryState';
|
|
22
|
+
const ProfileExplorerCompare = ({ queryClient, navigateTo, }) => {
|
|
21
23
|
const [showMetricsGraph, setShowMetricsGraph] = useState(true);
|
|
22
|
-
const
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
const
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
24
|
+
const batchUpdates = useURLStateBatch();
|
|
25
|
+
const { closeCompareMode, isCompareMode, isCompareAbsolute } = useCompareModeMeta();
|
|
26
|
+
// Read ProfileSource states from URL for both sides
|
|
27
|
+
const { profileSource: profileSourceA, querySelection: querySelectionA } = useQueryState({
|
|
28
|
+
suffix: '_a',
|
|
29
|
+
comparing: true,
|
|
30
|
+
});
|
|
31
|
+
const { profileSource: profileSourceB, querySelection: querySelectionB, commitDraft: commitDraftB, setDraftExpression: setDraftExpressionB, setDraftTimeRange: setDraftTimeRangeB, } = useQueryState({ suffix: '_b', comparing: true });
|
|
32
|
+
// Derive enforced profile name from side A's expression
|
|
33
|
+
const enforcedProfileNameA = useMemo(() => {
|
|
34
|
+
return querySelectionA.expression !== ''
|
|
35
|
+
? Query.parse(querySelectionA.expression).profileName()
|
|
36
|
+
: '';
|
|
37
|
+
}, [querySelectionA.expression]);
|
|
38
|
+
// Initialize side B with side A's values if side B is empty
|
|
39
|
+
useEffect(() => {
|
|
40
|
+
// If not in compare mode, don't initialize
|
|
41
|
+
if (!isCompareMode) {
|
|
42
|
+
return;
|
|
43
|
+
}
|
|
44
|
+
if (querySelectionB.expression === '' && querySelectionA.expression !== '') {
|
|
45
|
+
batchUpdates(() => {
|
|
46
|
+
setDraftExpressionB(querySelectionA.expression);
|
|
47
|
+
setDraftTimeRangeB(querySelectionA.from, querySelectionA.to, querySelectionA.timeSelection);
|
|
48
|
+
// Commit to update the URL and trigger metrics graph load
|
|
49
|
+
commitDraftB();
|
|
50
|
+
});
|
|
51
|
+
}
|
|
52
|
+
}, [
|
|
53
|
+
isCompareMode,
|
|
54
|
+
querySelectionA.expression,
|
|
55
|
+
querySelectionA.from,
|
|
56
|
+
querySelectionA.to,
|
|
57
|
+
querySelectionA.timeSelection,
|
|
58
|
+
querySelectionB.expression,
|
|
59
|
+
setDraftExpressionB,
|
|
60
|
+
setDraftTimeRangeB,
|
|
61
|
+
commitDraftB,
|
|
62
|
+
batchUpdates,
|
|
63
|
+
]);
|
|
64
|
+
const closeProfileA = useCallback(() => {
|
|
65
|
+
closeCompareMode('A');
|
|
66
|
+
}, [closeCompareMode]);
|
|
67
|
+
const closeProfileB = useCallback(() => {
|
|
68
|
+
closeCompareMode('B');
|
|
69
|
+
}, [closeCompareMode]);
|
|
70
|
+
return (_jsxs("div", { ...testId(TEST_IDS.COMPARE_CONTAINER), children: [_jsxs("div", { className: "flex justify-between gap-2 relative mb-2", children: [_jsx("div", { className: "flex-column flex-1 p-2 shadow-md rounded-md", ...testId(TEST_IDS.COMPARE_SIDE_A), children: _jsx(ProfileSelector, { queryClient: queryClient, closeProfile: closeProfileA, enforcedProfileName: '', comparing: true, navigateTo: navigateTo, suffix: "_a", showMetricsGraph: showMetricsGraph, setDisplayHideMetricsGraphButton: setShowMetricsGraph }) }), _jsx("div", { className: "flex-column flex-1 p-2 shadow-md rounded-md", ...testId(TEST_IDS.COMPARE_SIDE_B), children: _jsx(ProfileSelector, { queryClient: queryClient, closeProfile: closeProfileB, enforcedProfileName: enforcedProfileNameA, comparing: true, navigateTo: navigateTo, suffix: "_b", showMetricsGraph: showMetricsGraph, setDisplayHideMetricsGraphButton: setShowMetricsGraph }) })] }), _jsx("div", { className: "grid grid-cols-1", children: profileSourceA != null && profileSourceB != null ? (_jsx("div", { ...testId(TEST_IDS.COMPARE_PROFILE_VIEW), children: _jsx(ProfileViewWithData, { queryClient: queryClient, profileSource: new ProfileDiffSource(profileSourceA, profileSourceB, isCompareAbsolute) }) })) : (_jsx("div", { children: _jsx("div", { className: "my-20 text-center", children: _jsx("p", { children: "Select a profile on both sides." }) }) })) })] }));
|
|
30
71
|
};
|
|
31
72
|
export default ProfileExplorerCompare;
|
|
@@ -1,15 +1,9 @@
|
|
|
1
1
|
import { QueryServiceClient } from '@parca/client';
|
|
2
2
|
import type { NavigateFunction } from '@parca/utilities';
|
|
3
|
-
import { ProfileSelection } from '..';
|
|
4
|
-
import { QuerySelection } from '../ProfileSelector';
|
|
5
3
|
interface ProfileExplorerSingleProps {
|
|
6
4
|
queryClient: QueryServiceClient;
|
|
7
|
-
query: QuerySelection;
|
|
8
|
-
selectQuery: (query: QuerySelection) => void;
|
|
9
|
-
selectProfile: (source: ProfileSelection) => void;
|
|
10
|
-
profile: ProfileSelection | null;
|
|
11
5
|
navigateTo: NavigateFunction;
|
|
12
6
|
}
|
|
13
|
-
declare const ProfileExplorerSingle: ({ queryClient,
|
|
7
|
+
declare const ProfileExplorerSingle: ({ queryClient, navigateTo, }: ProfileExplorerSingleProps) => JSX.Element;
|
|
14
8
|
export default ProfileExplorerSingle;
|
|
15
9
|
//# sourceMappingURL=ProfileExplorerSingle.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProfileExplorerSingle.d.ts","sourceRoot":"","sources":["../../src/ProfileExplorer/ProfileExplorerSingle.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AACjD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"ProfileExplorerSingle.d.ts","sourceRoot":"","sources":["../../src/ProfileExplorer/ProfileExplorerSingle.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AACjD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,kBAAkB,CAAC;AAMvD,UAAU,0BAA0B;IAClC,WAAW,EAAE,kBAAkB,CAAC;IAChC,UAAU,EAAE,gBAAgB,CAAC;CAC9B;AAED,QAAA,MAAM,qBAAqB,GAAI,8BAG5B,0BAA0B,KAAG,GAAG,CAAC,OAwBnC,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
|
|
@@ -14,8 +14,10 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
|
|
|
14
14
|
import { useState } from 'react';
|
|
15
15
|
import { ProfileViewWithData } from '..';
|
|
16
16
|
import ProfileSelector from '../ProfileSelector';
|
|
17
|
-
|
|
17
|
+
import { useQueryState } from '../hooks/useQueryState';
|
|
18
|
+
const ProfileExplorerSingle = ({ queryClient, navigateTo, }) => {
|
|
18
19
|
const [showMetricsGraph, setShowMetricsGraph] = useState(true);
|
|
19
|
-
|
|
20
|
+
const { profileSource } = useQueryState({ suffix: '_a' });
|
|
21
|
+
return (_jsxs(_Fragment, { children: [_jsx("div", { className: "relative", children: _jsx(ProfileSelector, { queryClient: queryClient, closeProfile: () => { }, comparing: false, enforcedProfileName: '', navigateTo: navigateTo, suffix: "_a", showMetricsGraph: showMetricsGraph, setDisplayHideMetricsGraphButton: setShowMetricsGraph }) }), profileSource != null && (_jsx(ProfileViewWithData, { queryClient: queryClient, profileSource: profileSource }))] }));
|
|
20
22
|
};
|
|
21
23
|
export default ProfileExplorerSingle;
|
|
@@ -2,11 +2,8 @@ import { QueryServiceClient } from '@parca/client';
|
|
|
2
2
|
import { type NavigateFunction } from '@parca/utilities';
|
|
3
3
|
interface ProfileExplorerProps {
|
|
4
4
|
queryClient: QueryServiceClient;
|
|
5
|
-
queryParams: any;
|
|
6
5
|
navigateTo: NavigateFunction;
|
|
7
6
|
}
|
|
8
|
-
|
|
9
|
-
export declare const filterEmptyParams: (o: Record<string, any>) => Record<string, any>;
|
|
10
|
-
declare const ProfileExplorer: ({ queryClient, queryParams, navigateTo, }: ProfileExplorerProps) => JSX.Element;
|
|
7
|
+
declare const ProfileExplorer: ({ queryClient, navigateTo }: ProfileExplorerProps) => JSX.Element;
|
|
11
8
|
export default ProfileExplorer;
|
|
12
9
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileExplorer/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileExplorer/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAGjD,OAAO,EAA4B,KAAK,gBAAgB,EAAC,MAAM,kBAAkB,CAAC;AAOlF,UAAU,oBAAoB;IAC5B,WAAW,EAAE,kBAAkB,CAAC;IAChC,UAAU,EAAE,gBAAgB,CAAC;CAC9B;AAuDD,QAAA,MAAM,eAAe,GAAI,6BAA2B,oBAAoB,KAAG,GAAG,CAAC,OAc9E,CAAC;AAEF,eAAe,eAAe,CAAC"}
|
|
@@ -11,101 +11,27 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
|
|
|
11
11
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
12
12
|
// See the License for the specific language governing permissions and
|
|
13
13
|
// limitations under the License.
|
|
14
|
-
import { useEffect, useMemo
|
|
14
|
+
import { useEffect, useMemo } from 'react';
|
|
15
15
|
import { Provider } from 'react-redux';
|
|
16
|
-
import {
|
|
17
|
-
import { Query } from '@parca/parser';
|
|
16
|
+
import { KeyDownProvider, useParcaContext } from '@parca/components';
|
|
18
17
|
import { createStore } from '@parca/store';
|
|
19
|
-
import { capitalizeOnlyFirstLetter
|
|
20
|
-
import {
|
|
21
|
-
import { useResetFlameGraphState } from '../ProfileView/hooks/useResetFlameGraphState';
|
|
22
|
-
import { useResetStateOnProfileTypeChange } from '../ProfileView/hooks/useResetStateOnProfileTypeChange';
|
|
18
|
+
import { capitalizeOnlyFirstLetter } from '@parca/utilities';
|
|
19
|
+
import { useCompareModeMeta } from '../hooks/useCompareModeMeta';
|
|
23
20
|
import { useHasProfileData } from '../useHasProfileData';
|
|
24
|
-
import { sumByToParam, useSumByFromParams } from '../useSumBy';
|
|
25
21
|
import ProfileExplorerCompare from './ProfileExplorerCompare';
|
|
26
22
|
import ProfileExplorerSingle from './ProfileExplorerSingle';
|
|
27
23
|
const ErrorContent = ({ errorMessage }) => {
|
|
28
24
|
return (_jsx("div", { className: "relative rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700", role: "alert", children: _jsx("span", { className: "block sm:inline", children: errorMessage }) }));
|
|
29
25
|
};
|
|
30
|
-
|
|
31
|
-
const x = Array.isArray(expression) ? expression.join() : expression;
|
|
32
|
-
return x;
|
|
33
|
-
};
|
|
34
|
-
/* eslint-disable @typescript-eslint/naming-convention */
|
|
35
|
-
const sanitizeDateRange = (time_selection_a, from_a, to_a) => {
|
|
36
|
-
const range = DateTimeRange.fromRangeKey(time_selection_a, from_a, to_a);
|
|
37
|
-
if (from_a == null && to_a == null) {
|
|
38
|
-
from_a = range.getFromMs();
|
|
39
|
-
to_a = range.getToMs();
|
|
40
|
-
}
|
|
41
|
-
return { time_selection_a: range.getRangeKey(), from_a, to_a };
|
|
42
|
-
};
|
|
43
|
-
/* eslint-enable @typescript-eslint/naming-convention */
|
|
44
|
-
export const filterEmptyParams = (o) => {
|
|
45
|
-
return Object.fromEntries(Object.entries(o)
|
|
46
|
-
.filter(([_, value]) => value !== '' && value !== undefined && (Array.isArray(value) ? value.length > 0 : true))
|
|
47
|
-
.map(([key, value]) => {
|
|
48
|
-
if (typeof value === 'string') {
|
|
49
|
-
return [key, value];
|
|
50
|
-
}
|
|
51
|
-
if (Array.isArray(value)) {
|
|
52
|
-
return [key, value];
|
|
53
|
-
}
|
|
54
|
-
return [key, value];
|
|
55
|
-
}));
|
|
56
|
-
};
|
|
57
|
-
const filterSuffix = (o, suffix) => Object.fromEntries(Object.entries(o)
|
|
58
|
-
.filter(([key]) => !key.endsWith(suffix))
|
|
59
|
-
.map(([key, value]) => {
|
|
60
|
-
return [key, value];
|
|
61
|
-
}));
|
|
62
|
-
const swapQueryParameters = (o) => {
|
|
63
|
-
Object.entries(o).forEach(([key, value]) => {
|
|
64
|
-
if (key.endsWith('_b')) {
|
|
65
|
-
o[key.slice(0, -2) + '_a'] = value;
|
|
66
|
-
}
|
|
67
|
-
});
|
|
68
|
-
return o;
|
|
69
|
-
};
|
|
70
|
-
const ProfileExplorerApp = ({ queryClient, queryParams, navigateTo, }) => {
|
|
26
|
+
const ProfileExplorerApp = ({ queryClient, navigateTo }) => {
|
|
71
27
|
const { loading: hasProfileDataLoading, data: hasProfileData, error: hasProfileDataError, } = useHasProfileData(queryClient);
|
|
72
28
|
const { loader, noDataPrompt, onError, authenticationErrorMessage } = useParcaContext();
|
|
29
|
+
const { isCompareMode } = useCompareModeMeta();
|
|
73
30
|
useEffect(() => {
|
|
74
31
|
if (hasProfileDataError !== undefined && hasProfileDataError !== null) {
|
|
75
32
|
onError?.(hasProfileDataError);
|
|
76
33
|
}
|
|
77
34
|
}, [hasProfileDataError, onError]);
|
|
78
|
-
/* eslint-disable @typescript-eslint/naming-convention */
|
|
79
|
-
let { from_a, to_a, merge_from_a, merge_to_a, time_selection_a, compare_a, sum_by_a, from_b, to_b, merge_from_b, merge_to_b, time_selection_b, compare_b, sum_by_b, } = queryParams;
|
|
80
|
-
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
81
|
-
const expression_a = getExpressionAsAString(queryParams.expression_a);
|
|
82
|
-
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
83
|
-
const expression_b = getExpressionAsAString(queryParams.expression_b);
|
|
84
|
-
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
85
|
-
const selection_a = getExpressionAsAString(queryParams.selection_a);
|
|
86
|
-
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
87
|
-
const selection_b = getExpressionAsAString(queryParams.selection_b);
|
|
88
|
-
/* eslint-enable @typescript-eslint/naming-convention */
|
|
89
|
-
const [profileA, setProfileA] = useState(null);
|
|
90
|
-
const [profileB, setProfileB] = useState(null);
|
|
91
|
-
const resetStateOnProfileTypeChange = useResetStateOnProfileTypeChange();
|
|
92
|
-
const resetFlameGraphState = useResetFlameGraphState();
|
|
93
|
-
const sumByA = useSumByFromParams(sum_by_a);
|
|
94
|
-
const sumByB = useSumByFromParams(sum_by_b);
|
|
95
|
-
useEffect(() => {
|
|
96
|
-
const mergeFrom = merge_from_a ?? undefined;
|
|
97
|
-
const mergeTo = merge_to_a ?? undefined;
|
|
98
|
-
const profileA = ProfileSelectionFromParams(mergeFrom, mergeTo, selection_a);
|
|
99
|
-
setProfileA(profileA);
|
|
100
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
101
|
-
}, [merge_from_a, merge_to_a, selection_a]);
|
|
102
|
-
useEffect(() => {
|
|
103
|
-
const mergeFrom = merge_from_b ?? undefined;
|
|
104
|
-
const mergeTo = merge_to_b ?? undefined;
|
|
105
|
-
const profileB = ProfileSelectionFromParams(mergeFrom, mergeTo, selection_b);
|
|
106
|
-
setProfileB(profileB);
|
|
107
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
108
|
-
}, [merge_from_b, merge_to_b, selection_b]);
|
|
109
35
|
if (hasProfileDataLoading) {
|
|
110
36
|
return _jsx(_Fragment, { children: loader });
|
|
111
37
|
}
|
|
@@ -119,156 +45,16 @@ const ProfileExplorerApp = ({ queryClient, queryParams, navigateTo, }) => {
|
|
|
119
45
|
}
|
|
120
46
|
return _jsx(ErrorContent, { errorMessage: capitalizeOnlyFirstLetter(hasProfileDataError.message) });
|
|
121
47
|
}
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
from_a = sanitizedRange.from_a;
|
|
125
|
-
to_a = sanitizedRange.to_a;
|
|
126
|
-
if ((queryParams?.expression_a ?? '') !== '')
|
|
127
|
-
queryParams.expression_a = safeDecode(expression_a);
|
|
128
|
-
if ((queryParams?.expression_b ?? '') !== '')
|
|
129
|
-
queryParams.expression_b = safeDecode(expression_b);
|
|
130
|
-
const selectProfile = (p, suffix) => {
|
|
131
|
-
return navigateTo('/', {
|
|
132
|
-
...queryParams,
|
|
133
|
-
...SuffixParams(p.HistoryParams(), suffix),
|
|
134
|
-
});
|
|
135
|
-
};
|
|
136
|
-
const selectProfileA = (p) => {
|
|
137
|
-
return selectProfile(p, '_a');
|
|
138
|
-
};
|
|
139
|
-
const selectProfileB = (p) => {
|
|
140
|
-
return selectProfile(p, '_b');
|
|
141
|
-
};
|
|
142
|
-
const queryA = {
|
|
143
|
-
expression: expression_a,
|
|
144
|
-
from: parseInt(from_a),
|
|
145
|
-
to: parseInt(to_a),
|
|
146
|
-
timeSelection: time_selection_a,
|
|
147
|
-
sumBy: sumByA,
|
|
148
|
-
};
|
|
149
|
-
// Show the SingleProfileExplorer when not comparing
|
|
150
|
-
if (compare_a !== 'true' && compare_b !== 'true') {
|
|
151
|
-
const selectQuery = (q) => {
|
|
152
|
-
const profileNameAfter = Query.parse(q.expression).profileName();
|
|
153
|
-
if (profileA != null) {
|
|
154
|
-
if (profileA.ProfileName() !== profileNameAfter) {
|
|
155
|
-
// Reset required state when the profile type changes.
|
|
156
|
-
resetStateOnProfileTypeChange();
|
|
157
|
-
}
|
|
158
|
-
else {
|
|
159
|
-
// Reset the state when a new search is performed.
|
|
160
|
-
resetFlameGraphState();
|
|
161
|
-
}
|
|
162
|
-
}
|
|
163
|
-
const mergeParams = q.mergeFrom !== undefined && q.mergeTo !== undefined
|
|
164
|
-
? {
|
|
165
|
-
merge_from_a: q.mergeFrom,
|
|
166
|
-
merge_to_a: q.mergeTo,
|
|
167
|
-
selection_a: q.expression,
|
|
168
|
-
}
|
|
169
|
-
: {};
|
|
170
|
-
return navigateTo('/',
|
|
171
|
-
// Filtering the _a suffix causes us to reset potential profile
|
|
172
|
-
// selection when running a new query.
|
|
173
|
-
filterEmptyParams({
|
|
174
|
-
...filterSuffix(queryParams, '_a'),
|
|
175
|
-
...{
|
|
176
|
-
expression_a: q.expression,
|
|
177
|
-
from_a: q.from.toString(),
|
|
178
|
-
to_a: q.to.toString(),
|
|
179
|
-
time_selection_a: q.timeSelection,
|
|
180
|
-
sum_by_a: sumByToParam(q.sumBy),
|
|
181
|
-
...mergeParams,
|
|
182
|
-
},
|
|
183
|
-
}));
|
|
184
|
-
};
|
|
185
|
-
const selectProfile = (p) => {
|
|
186
|
-
return navigateTo('/', {
|
|
187
|
-
...queryParams,
|
|
188
|
-
...SuffixParams(p.HistoryParams(), '_a'),
|
|
189
|
-
});
|
|
190
|
-
};
|
|
191
|
-
return (_jsx(ProfileExplorerSingle, { queryClient: queryClient, query: queryA, profile: profileA, selectQuery: selectQuery, selectProfile: selectProfile, navigateTo: navigateTo }));
|
|
48
|
+
if (isCompareMode) {
|
|
49
|
+
return _jsx(ProfileExplorerCompare, { queryClient: queryClient, navigateTo: navigateTo });
|
|
192
50
|
}
|
|
193
|
-
|
|
194
|
-
expression: expression_b,
|
|
195
|
-
from: parseInt(from_b),
|
|
196
|
-
to: parseInt(to_b),
|
|
197
|
-
timeSelection: time_selection_b,
|
|
198
|
-
sumBy: sumByB,
|
|
199
|
-
};
|
|
200
|
-
const selectQueryA = (q) => {
|
|
201
|
-
const mergeParams = q.mergeFrom !== undefined && q.mergeTo !== undefined
|
|
202
|
-
? {
|
|
203
|
-
merge_from_a: q.mergeFrom,
|
|
204
|
-
merge_to_a: q.mergeTo,
|
|
205
|
-
selection_a: q.expression,
|
|
206
|
-
}
|
|
207
|
-
: {};
|
|
208
|
-
return navigateTo('/',
|
|
209
|
-
// Filtering the _a suffix causes us to reset potential profile
|
|
210
|
-
// selection when running a new query.
|
|
211
|
-
filterEmptyParams({
|
|
212
|
-
...filterSuffix(queryParams, '_a'),
|
|
213
|
-
...{
|
|
214
|
-
compare_a: 'true',
|
|
215
|
-
expression_a: q.expression,
|
|
216
|
-
expression_b,
|
|
217
|
-
selection_b,
|
|
218
|
-
from_a: q.from.toString(),
|
|
219
|
-
to_a: q.to.toString(),
|
|
220
|
-
time_selection_a: q.timeSelection,
|
|
221
|
-
sum_by_a: sumByToParam(q.sumBy),
|
|
222
|
-
...mergeParams,
|
|
223
|
-
},
|
|
224
|
-
}));
|
|
225
|
-
};
|
|
226
|
-
const selectQueryB = (q) => {
|
|
227
|
-
const mergeParams = q.mergeFrom !== undefined && q.mergeTo !== undefined
|
|
228
|
-
? {
|
|
229
|
-
merge_from_b: q.mergeFrom,
|
|
230
|
-
merge_to_b: q.mergeTo,
|
|
231
|
-
selection_b: q.expression,
|
|
232
|
-
}
|
|
233
|
-
: {};
|
|
234
|
-
return navigateTo('/',
|
|
235
|
-
// Filtering the _b suffix causes us to reset potential profile
|
|
236
|
-
// selection when running a new query.
|
|
237
|
-
filterEmptyParams({
|
|
238
|
-
...filterSuffix(queryParams, '_b'),
|
|
239
|
-
...{
|
|
240
|
-
compare_b: 'true',
|
|
241
|
-
expression_b: q.expression,
|
|
242
|
-
expression_a,
|
|
243
|
-
selection_a,
|
|
244
|
-
from_b: q.from.toString(),
|
|
245
|
-
to_b: q.to.toString(),
|
|
246
|
-
time_selection_b: q.timeSelection,
|
|
247
|
-
sum_by_b: sumByToParam(q.sumBy),
|
|
248
|
-
...mergeParams,
|
|
249
|
-
},
|
|
250
|
-
}));
|
|
251
|
-
};
|
|
252
|
-
const closeProfile = (card) => {
|
|
253
|
-
let newQueryParameters = queryParams;
|
|
254
|
-
if (card === 'A') {
|
|
255
|
-
newQueryParameters = swapQueryParameters(queryParams);
|
|
256
|
-
}
|
|
257
|
-
return navigateTo('/', {
|
|
258
|
-
...filterSuffix(newQueryParameters, '_b'),
|
|
259
|
-
...{
|
|
260
|
-
compare_a: 'false',
|
|
261
|
-
compare_b: 'false',
|
|
262
|
-
},
|
|
263
|
-
});
|
|
264
|
-
};
|
|
265
|
-
return (_jsx(ProfileExplorerCompare, { queryClient: queryClient, queryA: queryA, queryB: queryB, profileA: profileA, profileB: profileB, selectQueryA: selectQueryA, selectQueryB: selectQueryB, selectProfileA: selectProfileA, selectProfileB: selectProfileB, closeProfile: closeProfile, navigateTo: navigateTo }));
|
|
51
|
+
return _jsx(ProfileExplorerSingle, { queryClient: queryClient, navigateTo: navigateTo });
|
|
266
52
|
};
|
|
267
|
-
const ProfileExplorer = ({ queryClient,
|
|
53
|
+
const ProfileExplorer = ({ queryClient, navigateTo }) => {
|
|
268
54
|
const { additionalFlamegraphColorProfiles } = useParcaContext();
|
|
269
55
|
const { store: reduxStore } = useMemo(() => {
|
|
270
56
|
return createStore(additionalFlamegraphColorProfiles);
|
|
271
57
|
}, [additionalFlamegraphColorProfiles]);
|
|
272
|
-
return (_jsx(Provider, { store: reduxStore, children: _jsx(KeyDownProvider, { children: _jsx(ProfileExplorerApp, { queryClient: queryClient,
|
|
58
|
+
return (_jsx(Provider, { store: reduxStore, children: _jsx(KeyDownProvider, { children: _jsx(ProfileExplorerApp, { queryClient: queryClient, navigateTo: navigateTo }) }) }));
|
|
273
59
|
};
|
|
274
60
|
export default ProfileExplorer;
|
|
@@ -24,6 +24,6 @@ interface ProfileMetricsGraphProps {
|
|
|
24
24
|
onPointClick: (timestamp: bigint, labels: Label[], queryExpression: string, duration: number) => void;
|
|
25
25
|
comparing?: boolean;
|
|
26
26
|
}
|
|
27
|
-
declare const ProfileMetricsGraph: ({ queryClient, queryExpression, profile, from, to, setTimeRange, addLabelMatcher, onPointClick, comparing, sumBy,
|
|
27
|
+
declare const ProfileMetricsGraph: ({ queryClient, queryExpression, profile, from, to, setTimeRange, addLabelMatcher, onPointClick, comparing, sumBy, }: ProfileMetricsGraphProps) => JSX.Element;
|
|
28
28
|
export default ProfileMetricsGraph;
|
|
29
29
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileMetricsGraph/index.tsx"],"names":[],"mappings":"AAkBA,OAAO,EACL,KAAK,EAGL,kBAAkB,EACnB,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,aAAa,EAId,MAAM,mBAAmB,CAAC;AAK3B,OAAO,EAAyB,gBAAgB,EAAC,MAAM,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileMetricsGraph/index.tsx"],"names":[],"mappings":"AAkBA,OAAO,EACL,KAAK,EAGL,kBAAkB,EACnB,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,aAAa,EAId,MAAM,mBAAmB,CAAC;AAK3B,OAAO,EAAyB,gBAAgB,EAAC,MAAM,IAAI,CAAC;AAqH5D,UAAU,6BAA6B;IACrC,OAAO,EAAE,MAAM,CAAC;CACjB;AAaD,eAAO,MAAM,wBAAwB,GAAI,aAAW,6BAA6B,KAAG,GAAG,CAAC,OAMvF,CAAC;AAEF,UAAU,wBAAwB;IAChC,WAAW,EAAE,kBAAkB,CAAC;IAChC,eAAe,EAAE,MAAM,CAAC;IACxB,OAAO,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,YAAY,EAAE,OAAO,CAAC;IACtB,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,YAAY,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7C,eAAe,EAAE,CACf,MAAM,EAAE;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,GAAG,KAAK,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC,KACvE,IAAI,CAAC;IACV,YAAY,EAAE,CACZ,SAAS,EAAE,MAAM,EACjB,MAAM,EAAE,KAAK,EAAE,EACf,eAAe,EAAE,MAAM,EACvB,QAAQ,EAAE,MAAM,KACb,IAAI,CAAC;IACV,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,QAAA,MAAM,mBAAmB,GAAI,qHAW1B,wBAAwB,KAAG,GAAG,CAAC,OA+YjC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
|
|
@@ -54,30 +54,26 @@ utilizationMetrics = false) => {
|
|
|
54
54
|
label: 'Add to query',
|
|
55
55
|
icon: 'material-symbols:add',
|
|
56
56
|
createDynamicItems: (closestPoint, _series) => {
|
|
57
|
+
const noLabelsAvailable = [
|
|
58
|
+
{
|
|
59
|
+
id: 'no-labels-available',
|
|
60
|
+
label: 'No labels available',
|
|
61
|
+
icon: 'ph:warning',
|
|
62
|
+
disabled: () => true,
|
|
63
|
+
onClick: () => { }, // No-op for disabled item
|
|
64
|
+
},
|
|
65
|
+
];
|
|
57
66
|
if (closestPoint == null || data.length === 0 || data[closestPoint.seriesIndex] == null) {
|
|
58
|
-
return
|
|
59
|
-
{
|
|
60
|
-
id: 'no-labels-available',
|
|
61
|
-
label: 'No labels available',
|
|
62
|
-
icon: 'ph:warning',
|
|
63
|
-
disabled: () => true,
|
|
64
|
-
onClick: () => { }, // No-op for disabled item
|
|
65
|
-
},
|
|
66
|
-
];
|
|
67
|
+
return noLabelsAvailable;
|
|
67
68
|
}
|
|
68
69
|
const originalSeriesData = data[closestPoint.seriesIndex];
|
|
69
70
|
if (originalSeriesData.labelset?.labels == null) {
|
|
70
|
-
return
|
|
71
|
-
{
|
|
72
|
-
id: 'no-labels-available',
|
|
73
|
-
label: 'No labels available',
|
|
74
|
-
icon: 'ph:warning',
|
|
75
|
-
disabled: () => true,
|
|
76
|
-
onClick: () => { }, // No-op for disabled item
|
|
77
|
-
},
|
|
78
|
-
];
|
|
71
|
+
return noLabelsAvailable;
|
|
79
72
|
}
|
|
80
73
|
const labels = originalSeriesData.labelset.labels.filter((label) => label.name !== '__name__');
|
|
74
|
+
if (labels.length === 0) {
|
|
75
|
+
return noLabelsAvailable;
|
|
76
|
+
}
|
|
81
77
|
return labels.map((label) => ({
|
|
82
78
|
id: `add-label-${label.name}`,
|
|
83
79
|
label: (_jsx("div", { className: "mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-300", children: `${transformUtilizationLabels(label.name, utilizationMetrics)}="${label.value}"` })),
|
|
@@ -122,8 +118,8 @@ const ErrorContent = ({ errorMessage }) => {
|
|
|
122
118
|
export const ProfileMetricsEmptyState = ({ message }) => {
|
|
123
119
|
return (_jsx("div", { className: "flex h-full w-full flex-col items-center justify-center", children: _jsx("p", { children: message }) }));
|
|
124
120
|
};
|
|
125
|
-
const ProfileMetricsGraph = ({ queryClient, queryExpression, profile, from, to, setTimeRange, addLabelMatcher, onPointClick, comparing = false, sumBy,
|
|
126
|
-
const { isLoading: metricsGraphLoading, response, error, } = useQueryRange(queryClient, queryExpression, from, to, sumBy,
|
|
121
|
+
const ProfileMetricsGraph = ({ queryClient, queryExpression, profile, from, to, setTimeRange, addLabelMatcher, onPointClick, comparing = false, sumBy, }) => {
|
|
122
|
+
const { isLoading: metricsGraphLoading, response, error, } = useQueryRange(queryClient, queryExpression, from, to, sumBy, queryExpression === '');
|
|
127
123
|
const { onError, perf, authenticationErrorMessage, isDarkMode, timezone } = useParcaContext();
|
|
128
124
|
const { width, height, margin, heightStyle } = useMetricsGraphDimensions(comparing);
|
|
129
125
|
const [showAllSeriesForResponse, setShowAllSeriesForResponse] = useState(null);
|
|
@@ -16,9 +16,9 @@ interface MetricsGraphSectionProps {
|
|
|
16
16
|
queryExpressionString: string;
|
|
17
17
|
setTimeRangeSelection: (range: DateTimeRange) => void;
|
|
18
18
|
selectQuery: (query: QuerySelection) => void;
|
|
19
|
-
|
|
19
|
+
setProfileSelection: (mergeFrom: bigint, mergeTo: bigint, query: Query) => void;
|
|
20
20
|
query: Query;
|
|
21
|
-
setNewQueryExpression: (queryExpression: string) => void;
|
|
21
|
+
setNewQueryExpression: (queryExpression: string, commit?: boolean) => void;
|
|
22
22
|
setQueryExpression: (updateTs?: boolean) => void;
|
|
23
23
|
utilizationMetrics?: Array<{
|
|
24
24
|
name: string;
|
|
@@ -28,6 +28,6 @@ interface MetricsGraphSectionProps {
|
|
|
28
28
|
utilizationMetricsLoading?: boolean;
|
|
29
29
|
onUtilizationSeriesSelect?: (seriesIndex: number) => void;
|
|
30
30
|
}
|
|
31
|
-
export declare function MetricsGraphSection({ showMetricsGraph, setDisplayHideMetricsGraphButton, heightStyle, querySelection, profileSelection, comparing, sumBy, defaultSumByLoading, queryClient, queryExpressionString, setTimeRangeSelection, selectQuery,
|
|
31
|
+
export declare function MetricsGraphSection({ showMetricsGraph, setDisplayHideMetricsGraphButton, heightStyle, querySelection, profileSelection, comparing, sumBy, defaultSumByLoading, queryClient, queryExpressionString, setTimeRangeSelection, selectQuery, setProfileSelection, query, setNewQueryExpression, utilizationMetrics, utilizationMetricsLoading, onUtilizationSeriesSelect, }: MetricsGraphSectionProps): JSX.Element;
|
|
32
32
|
export {};
|
|
33
33
|
//# sourceMappingURL=MetricsGraphSection.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MetricsGraphSection.d.ts","sourceRoot":"","sources":["../../src/ProfileSelector/MetricsGraphSection.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAQ,kBAAkB,EAAC,MAAM,eAAe,CAAC;AACxD,OAAO,EAAC,aAAa,
|
|
1
|
+
{"version":3,"file":"MetricsGraphSection.d.ts","sourceRoot":"","sources":["../../src/ProfileSelector/MetricsGraphSection.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAQ,kBAAkB,EAAC,MAAM,eAAe,CAAC;AACxD,OAAO,EAAC,aAAa,EAAmB,MAAM,mBAAmB,CAAC;AAClE,OAAO,EAAC,KAAK,EAAC,MAAM,eAAe,CAAC;AAEpC,OAAO,EAAC,gBAAgB,EAAC,MAAM,IAAI,CAAC;AAKpC,OAAO,EAAC,cAAc,EAAE,KAAK,kBAAkB,IAAI,sBAAsB,EAAC,MAAM,SAAS,CAAC;AAE1F,UAAU,wBAAwB;IAChC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gCAAgC,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3D,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,cAAc,CAAC;IAC/B,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC1C,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IACvB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,WAAW,EAAE,kBAAkB,CAAC;IAChC,qBAAqB,EAAE,MAAM,CAAC;IAC9B,qBAAqB,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACtD,WAAW,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC7C,mBAAmB,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAChF,KAAK,EAAE,KAAK,CAAC;IACb,qBAAqB,EAAE,CAAC,eAAe,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3E,kBAAkB,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,kBAAkB,CAAC,EAAE,KAAK,CAAC;QACzB,IAAI,EAAE,MAAM,CAAC;QACb,iBAAiB,EAAE,MAAM,CAAC;QAC1B,IAAI,EAAE,sBAAsB,EAAE,CAAC;KAChC,CAAC,CAAC;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,yBAAyB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3D;AAED,wBAAgB,mBAAmB,CAAC,EAClC,gBAAgB,EAChB,gCAAgC,EAChC,WAAW,EACX,cAAc,EACd,gBAAgB,EAChB,SAAS,EACT,KAAK,EACL,mBAAmB,EACnB,WAAW,EACX,qBAAqB,EACrB,qBAAqB,EACrB,WAAW,EACX,mBAAmB,EACnB,KAAK,EACL,qBAAqB,EACrB,kBAAkB,EAClB,yBAAyB,EACzB,yBAAyB,GAC1B,EAAE,wBAAwB,GAAG,GAAG,CAAC,OAAO,CA8MxC"}
|