@parca/profile 0.18.1 → 0.18.2
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 +4 -0
- package/dist/MetricsGraph/UtilizationMetrics/index.d.ts +1 -5
- package/dist/MetricsGraph/UtilizationMetrics/index.d.ts.map +1 -1
- package/dist/MetricsGraph/UtilizationMetrics/index.js +5 -25
- package/dist/MetricsGraph/index.d.ts +1 -0
- package/dist/MetricsGraph/index.d.ts.map +1 -1
- package/dist/ProfileSelector/MetricsGraphSection.d.ts.map +1 -1
- package/dist/ProfileSelector/MetricsGraphSection.js +1 -1
- package/dist/ProfileSelector/index.d.ts +1 -0
- package/dist/ProfileSelector/index.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/MetricsGraph/UtilizationMetrics/index.tsx +2 -30
- package/src/MetricsGraph/index.tsx +1 -0
- package/src/ProfileSelector/MetricsGraphSection.tsx +0 -1
- package/src/ProfileSelector/index.tsx +1 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,10 @@
|
|
|
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.18.2](https://github.com/parca-dev/parca/compare/@parca/profile@0.18.1...@parca/profile@0.18.2) (2025-06-17)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @parca/profile
|
|
9
|
+
|
|
6
10
|
## [0.18.1](https://github.com/parca-dev/parca/compare/@parca/profile@0.18.0...@parca/profile@0.18.1) (2025-06-17)
|
|
7
11
|
|
|
8
12
|
**Note:** Version bump only for package @parca/profile
|
|
@@ -14,10 +14,6 @@ interface CommonProps {
|
|
|
14
14
|
humanReadableName: string;
|
|
15
15
|
from: number;
|
|
16
16
|
to: number;
|
|
17
|
-
selectedSeries?: Array<{
|
|
18
|
-
key: string;
|
|
19
|
-
value: string;
|
|
20
|
-
}>;
|
|
21
17
|
onSelectedSeriesChange?: (series: Array<{
|
|
22
18
|
key: string;
|
|
23
19
|
value: string;
|
|
@@ -35,6 +31,6 @@ type Props = CommonProps & {
|
|
|
35
31
|
setTimeRange: (range: DateTimeRange) => void;
|
|
36
32
|
utilizationMetricsLoading?: boolean;
|
|
37
33
|
};
|
|
38
|
-
declare const UtilizationMetrics: ({ data, addLabelMatcher, setTimeRange, utilizationMetricsLoading, name, humanReadableName, from, to,
|
|
34
|
+
declare const UtilizationMetrics: ({ data, addLabelMatcher, setTimeRange, utilizationMetricsLoading, name, humanReadableName, from, to, onSelectedSeriesChange, }: Props) => JSX.Element;
|
|
39
35
|
export default UtilizationMetrics;
|
|
40
36
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraph/UtilizationMetrics/index.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAC,aAAa,EAAqD,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraph/UtilizationMetrics/index.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAC,aAAa,EAAqD,MAAM,mBAAmB,CAAC;AAIpG,OAAO,EAAC,KAAK,kBAAkB,IAAI,YAAY,EAAC,MAAM,uBAAuB,CAAC;AAO9E,UAAU,WAAW;IACnB,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,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,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7C,IAAI,EAAE,MAAM,CAAC;IACb,iBAAiB,EAAE,MAAM,CAAC;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,sBAAsB,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC,KAAK,IAAI,CAAC;CAChF;AAQD,KAAK,KAAK,GAAG,WAAW,GAAG;IACzB,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,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,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7C,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC,CAAC;AAmcF,QAAA,MAAM,kBAAkB,mIAUrB,KAAK,KAAG,GAAG,CAAC,OAiCd,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
|
|
@@ -30,6 +30,7 @@ function transformToSeries(data) {
|
|
|
30
30
|
const metric = s.labelset.labels.sort((a, b) => a.name.localeCompare(b.name));
|
|
31
31
|
agg.push({
|
|
32
32
|
metric,
|
|
33
|
+
isSelected: s.isSelected ?? false,
|
|
33
34
|
values: s.samples.reduce(function (agg, d) {
|
|
34
35
|
if (d.timestamp !== undefined && d.value !== undefined) {
|
|
35
36
|
agg.push([d.timestamp, d.value]);
|
|
@@ -59,7 +60,7 @@ const getYAxisUnit = (name) => {
|
|
|
59
60
|
return 'percent';
|
|
60
61
|
}
|
|
61
62
|
};
|
|
62
|
-
const RawUtilizationMetrics = ({ data, addLabelMatcher, setTimeRange, width, height, margin, name, humanReadableName, from, to,
|
|
63
|
+
const RawUtilizationMetrics = ({ data, addLabelMatcher, setTimeRange, width, height, margin, name, humanReadableName, from, to, onSelectedSeriesChange, }) => {
|
|
63
64
|
const { timezone } = useParcaContext();
|
|
64
65
|
const graph = useRef(null);
|
|
65
66
|
const [dragging, setDragging] = useState(false);
|
|
@@ -69,16 +70,6 @@ const RawUtilizationMetrics = ({ data, addLabelMatcher, setTimeRange, width, hei
|
|
|
69
70
|
const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);
|
|
70
71
|
const idForContextMenu = useId();
|
|
71
72
|
const [_, setSelectedTimeframe] = useURLState('gpu_selected_timeframe');
|
|
72
|
-
const parsedSelectedSeries = useMemo(() => {
|
|
73
|
-
if (selectedSeries == null || selectedSeries.length === 0) {
|
|
74
|
-
return [];
|
|
75
|
-
}
|
|
76
|
-
return selectedSeries.map(s => ({
|
|
77
|
-
key: s.key,
|
|
78
|
-
value: s.value,
|
|
79
|
-
matcherType: '=',
|
|
80
|
-
}));
|
|
81
|
-
}, [selectedSeries]);
|
|
82
73
|
const lineStroke = '1px';
|
|
83
74
|
const lineStrokeHover = '2px';
|
|
84
75
|
const lineStrokeSelected = '3px';
|
|
@@ -221,20 +212,9 @@ const RawUtilizationMetrics = ({ data, addLabelMatcher, setTimeRange, width, hei
|
|
|
221
212
|
}), _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: 0, x2: 0, y1: 0, y2: height - margin }), _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: xScale(to), x2: xScale(to), y1: 0, y2: height - margin }), _jsx("g", { transform: `translate(${-margin}, ${(height - margin) / 2}) rotate(270)`, children: _jsx("text", { fill: "currentColor", dy: "-0.7em", className: "text-sm capitalize", textAnchor: "middle", children: humanReadableName }) })] }), _jsxs("g", { className: "x axis", fill: "none", fontSize: "10", textAnchor: "middle", transform: `translate(0,${height - margin})`, children: [xScale.ticks(5).map((d, i) => (_jsxs(Fragment, { children: [_jsxs("g", { className: "tick",
|
|
222
213
|
/* eslint-disable-next-line @typescript-eslint/restrict-template-expressions */
|
|
223
214
|
transform: `translate(${xScale(d)}, 0)`, children: [_jsx("line", { y2: 6, className: "stroke-gray-300 dark:stroke-gray-500" }), _jsx("text", { fill: "currentColor", dy: ".71em", y: 9, children: formatDate(d, formatForTimespan(from, to), timezone) })] }, `tick-${i}`), _jsx("g", { children: _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: xScale(d), x2: xScale(d), y1: 0, y2: -height + margin }) }, `grid-${i}`)] }, `${i.toString()}-${d.toString()}`))), _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: 0, x2: graphWidth, y1: 0, y2: 0 }), _jsx("g", { transform: `translate(${(width - 2.5 * margin) / 2}, ${margin / 2})`, children: _jsx("text", { fill: "currentColor", dy: ".71em", y: 5, className: "text-sm", children: "Time" }) })] }), _jsx("g", { className: "lines fill-transparent", children: series.map((s, i) => {
|
|
224
|
-
let isSelected = false;
|
|
225
|
-
if (parsedSelectedSeries != null && parsedSelectedSeries.length > 0) {
|
|
226
|
-
isSelected = parsedSelectedSeries.every(m => {
|
|
227
|
-
for (let i = 0; i < s.metric.length; i++) {
|
|
228
|
-
if (s.metric[i].name === m.key && s.metric[i].value === m.value) {
|
|
229
|
-
return true;
|
|
230
|
-
}
|
|
231
|
-
}
|
|
232
|
-
return false;
|
|
233
|
-
});
|
|
234
|
-
}
|
|
235
215
|
const isLimit = s.metric.findIndex(m => m.name === '__type__' && m.value === 'limit') > -1;
|
|
236
216
|
const strokeDasharray = isLimit ? '8 4' : '';
|
|
237
|
-
return (_jsx("g", { className: "line cursor-pointer", children: _jsx(MetricsSeries, { data: s, line: l, color: getSeriesColor(s.metric), strokeWidth: isSelected
|
|
217
|
+
return (_jsx("g", { className: "line cursor-pointer", children: _jsx(MetricsSeries, { data: s, line: l, color: getSeriesColor(s.metric), strokeWidth: s.isSelected === true
|
|
238
218
|
? lineStrokeSelected
|
|
239
219
|
: hovering && highlighted != null && i === highlighted.seriesIndex
|
|
240
220
|
? lineStrokeHover
|
|
@@ -250,9 +230,9 @@ const RawUtilizationMetrics = ({ data, addLabelMatcher, setTimeRange, width, hei
|
|
|
250
230
|
} }) }, i));
|
|
251
231
|
}) })] })] }) })] }));
|
|
252
232
|
};
|
|
253
|
-
const UtilizationMetrics = ({ data, addLabelMatcher, setTimeRange, utilizationMetricsLoading, name, humanReadableName, from, to,
|
|
233
|
+
const UtilizationMetrics = ({ data, addLabelMatcher, setTimeRange, utilizationMetricsLoading, name, humanReadableName, from, to, onSelectedSeriesChange, }) => {
|
|
254
234
|
const { isDarkMode } = useParcaContext();
|
|
255
235
|
const { width, height, margin, heightStyle } = useMetricsGraphDimensions(false, true);
|
|
256
|
-
return (_jsx(AnimatePresence, { children: _jsx(motion.div, { className: "w-full relative", initial: { display: 'none', opacity: 0 }, animate: { display: 'block', opacity: 1 }, transition: { duration: 0.5 }, children: utilizationMetricsLoading === true ? (_jsx(MetricsGraphSkeleton, { heightStyle: heightStyle, isDarkMode: isDarkMode, isMini: true })) : (_jsx(RawUtilizationMetrics, { data: data, addLabelMatcher: addLabelMatcher, setTimeRange: setTimeRange, width: width, height: height, margin: margin, name: name, humanReadableName: humanReadableName, from: from, to: to,
|
|
236
|
+
return (_jsx(AnimatePresence, { children: _jsx(motion.div, { className: "w-full relative", initial: { display: 'none', opacity: 0 }, animate: { display: 'block', opacity: 1 }, transition: { duration: 0.5 }, children: utilizationMetricsLoading === true ? (_jsx(MetricsGraphSkeleton, { heightStyle: heightStyle, isDarkMode: isDarkMode, isMini: true })) : (_jsx(RawUtilizationMetrics, { data: data, addLabelMatcher: addLabelMatcher, setTimeRange: setTimeRange, width: width, height: height, margin: margin, name: name, humanReadableName: humanReadableName, from: from, to: to, onSelectedSeriesChange: onSelectedSeriesChange })) }, "utilization-metrics-graph-loaded") }));
|
|
257
237
|
};
|
|
258
238
|
export default UtilizationMetrics;
|
|
@@ -36,6 +36,7 @@ export interface Series {
|
|
|
36
36
|
metric: Label[];
|
|
37
37
|
values: number[][];
|
|
38
38
|
labelset: string;
|
|
39
|
+
isSelected?: boolean;
|
|
39
40
|
}
|
|
40
41
|
declare const MetricsGraph: ({ data, from, to, profile, onSampleClick, addLabelMatcher, setTimeRange, sampleType, sampleUnit, width, height, margin, sumBy, }: Props) => JSX.Element;
|
|
41
42
|
export default MetricsGraph;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MetricsGraph/index.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAAC,KAAK,EAAiB,aAAa,IAAI,eAAe,EAAC,MAAM,eAAe,CAAC;AACrF,OAAO,EAAC,aAAa,EAAkB,MAAM,mBAAmB,CAAC;AASjE,OAAO,EAAC,sBAAsB,EAAC,MAAM,IAAI,CAAC;AAO1C,UAAU,KAAK;IACb,IAAI,EAAE,eAAe,EAAE,CAAC;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,sBAAsB,GAAG,IAAI,CAAC;IACvC,aAAa,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7F,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,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7C,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;CAClB;AAED,MAAM,WAAW,iBAAiB;IAChC,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,MAAM;IACrB,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,MAAM,EAAE,MAAM,EAAE,EAAE,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MetricsGraph/index.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAAC,KAAK,EAAiB,aAAa,IAAI,eAAe,EAAC,MAAM,eAAe,CAAC;AACrF,OAAO,EAAC,aAAa,EAAkB,MAAM,mBAAmB,CAAC;AASjE,OAAO,EAAC,sBAAsB,EAAC,MAAM,IAAI,CAAC;AAO1C,UAAU,KAAK;IACb,IAAI,EAAE,eAAe,EAAE,CAAC;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,sBAAsB,GAAG,IAAI,CAAC;IACvC,aAAa,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7F,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,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7C,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;CAClB;AAED,MAAM,WAAW,iBAAiB;IAChC,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,MAAM;IACrB,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,MAAM,EAAE,MAAM,EAAE,EAAE,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,QAAA,MAAM,YAAY,qIAcf,KAAK,KAAG,GAAG,CAAC,OA2Bd,CAAC;AAEF,eAAe,YAAY,CAAC;AAE5B,eAAO,MAAM,UAAU,UAAW,MAAM,KAAG,MAAM,GAAG,IAKnD,CAAC;AAKF,eAAO,MAAM,eAAe,qIAczB,KAAK,KAAG,GAAG,CAAC,OAmfd,CAAC"}
|
|
@@ -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,EAAC,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAC,KAAK,EAAC,MAAM,eAAe,CAAC;AAEpC,OAAO,EAAyB,gBAAgB,EAAC,MAAM,IAAI,CAAC;AAI5D,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,aAAa,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAClD,KAAK,EAAE,KAAK,CAAC;IACb,qBAAqB,EAAE,CAAC,eAAe,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,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,MAAM,EAAE,KAAK,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC,KAAK,IAAI,CAAC;CACnF;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,aAAa,EACb,KAAK,EACL,qBAAqB,EACrB,kBAAkB,EAClB,yBAAyB,EACzB,yBAAyB,GAC1B,EAAE,wBAAwB,GAAG,GAAG,CAAC,OAAO,
|
|
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,EAAC,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAC,KAAK,EAAC,MAAM,eAAe,CAAC;AAEpC,OAAO,EAAyB,gBAAgB,EAAC,MAAM,IAAI,CAAC;AAI5D,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,aAAa,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAClD,KAAK,EAAE,KAAK,CAAC;IACb,qBAAqB,EAAE,CAAC,eAAe,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,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,MAAM,EAAE,KAAK,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC,KAAK,IAAI,CAAC;CACnF;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,aAAa,EACb,KAAK,EACL,qBAAqB,EACrB,kBAAkB,EAClB,yBAAyB,EACzB,yBAAyB,GAC1B,EAAE,wBAAwB,GAAG,GAAG,CAAC,OAAO,CAmMxC"}
|
|
@@ -85,7 +85,7 @@ export function MetricsGraphSection({ showMetricsGraph, setDisplayHideMetricsGra
|
|
|
85
85
|
return (_jsxs("div", { children: [utilizationMetrics.map(({ name, humanReadableName, data }) => {
|
|
86
86
|
if (name !== 'gpu_pcie_throughput_transmit_bytes' &&
|
|
87
87
|
name !== 'gpu_pcie_throughput_receive_bytes') {
|
|
88
|
-
return (_jsx(_Fragment, { children: _jsx(UtilizationMetricsGraph, { data: data, addLabelMatcher: addLabelMatcher, setTimeRange: handleTimeRangeChange, utilizationMetricsLoading: utilizationMetricsLoading, name: name, humanReadableName: humanReadableName, from: querySelection.from, to: querySelection.to,
|
|
88
|
+
return (_jsx(_Fragment, { children: _jsx(UtilizationMetricsGraph, { data: data, addLabelMatcher: addLabelMatcher, setTimeRange: handleTimeRangeChange, utilizationMetricsLoading: utilizationMetricsLoading, name: name, humanReadableName: humanReadableName, from: querySelection.from, to: querySelection.to, onSelectedSeriesChange: onUtilizationSeriesSelect }, name) }));
|
|
89
89
|
}
|
|
90
90
|
return null;
|
|
91
91
|
}), throughputMetrics.length > 0 && (_jsx(AreaChart, { transmitData: throughputMetrics.find(metric => metric.name === 'gpu_pcie_throughput_transmit_bytes')
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileSelector/index.tsx"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileSelector/index.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@parca/profile",
|
|
3
|
-
"version": "0.18.
|
|
3
|
+
"version": "0.18.2",
|
|
4
4
|
"description": "Profile viewing libraries",
|
|
5
5
|
"dependencies": {
|
|
6
6
|
"@headlessui/react": "^1.7.19",
|
|
@@ -77,5 +77,5 @@
|
|
|
77
77
|
"access": "public",
|
|
78
78
|
"registry": "https://registry.npmjs.org/"
|
|
79
79
|
},
|
|
80
|
-
"gitHead": "
|
|
80
|
+
"gitHead": "d32c2be676d39ea179551b46c464324627be27d0"
|
|
81
81
|
}
|
|
@@ -20,7 +20,6 @@ import throttle from 'lodash.throttle';
|
|
|
20
20
|
import {useContextMenu} from 'react-contexify';
|
|
21
21
|
|
|
22
22
|
import {DateTimeRange, MetricsGraphSkeleton, useParcaContext, useURLState} from '@parca/components';
|
|
23
|
-
import {Matcher} from '@parca/parser';
|
|
24
23
|
import {formatDate, formatForTimespan, getPrecision, valueFormatter} from '@parca/utilities';
|
|
25
24
|
|
|
26
25
|
import MetricsSeries from '../../MetricsSeries';
|
|
@@ -41,7 +40,6 @@ interface CommonProps {
|
|
|
41
40
|
humanReadableName: string;
|
|
42
41
|
from: number;
|
|
43
42
|
to: number;
|
|
44
|
-
selectedSeries?: Array<{key: string; value: string}>;
|
|
45
43
|
onSelectedSeriesChange?: (series: Array<{key: string; value: string}>) => void;
|
|
46
44
|
}
|
|
47
45
|
|
|
@@ -71,6 +69,7 @@ function transformToSeries(data: MetricSeries[]): Series[] {
|
|
|
71
69
|
const metric = s.labelset.labels.sort((a, b) => a.name.localeCompare(b.name));
|
|
72
70
|
agg.push({
|
|
73
71
|
metric,
|
|
72
|
+
isSelected: s.isSelected ?? false,
|
|
74
73
|
values: s.samples.reduce<number[][]>(function (agg: number[][], d: MetricsSample) {
|
|
75
74
|
if (d.timestamp !== undefined && d.value !== undefined) {
|
|
76
75
|
agg.push([d.timestamp, d.value]);
|
|
@@ -114,7 +113,6 @@ const RawUtilizationMetrics = ({
|
|
|
114
113
|
humanReadableName,
|
|
115
114
|
from,
|
|
116
115
|
to,
|
|
117
|
-
selectedSeries,
|
|
118
116
|
onSelectedSeriesChange,
|
|
119
117
|
}: RawUtilizationMetricsProps): JSX.Element => {
|
|
120
118
|
const {timezone} = useParcaContext();
|
|
@@ -127,18 +125,6 @@ const RawUtilizationMetrics = ({
|
|
|
127
125
|
const idForContextMenu = useId();
|
|
128
126
|
const [_, setSelectedTimeframe] = useURLState('gpu_selected_timeframe');
|
|
129
127
|
|
|
130
|
-
const parsedSelectedSeries: Matcher[] = useMemo(() => {
|
|
131
|
-
if (selectedSeries == null || selectedSeries.length === 0) {
|
|
132
|
-
return [];
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
return selectedSeries.map(s => ({
|
|
136
|
-
key: s.key,
|
|
137
|
-
value: s.value,
|
|
138
|
-
matcherType: '=' as const,
|
|
139
|
-
}));
|
|
140
|
-
}, [selectedSeries]);
|
|
141
|
-
|
|
142
128
|
const lineStroke = '1px';
|
|
143
129
|
const lineStrokeHover = '2px';
|
|
144
130
|
const lineStrokeSelected = '3px';
|
|
@@ -477,18 +463,6 @@ const RawUtilizationMetrics = ({
|
|
|
477
463
|
</g>
|
|
478
464
|
<g className="lines fill-transparent">
|
|
479
465
|
{series.map((s, i) => {
|
|
480
|
-
let isSelected = false;
|
|
481
|
-
if (parsedSelectedSeries != null && parsedSelectedSeries.length > 0) {
|
|
482
|
-
isSelected = parsedSelectedSeries.every(m => {
|
|
483
|
-
for (let i = 0; i < s.metric.length; i++) {
|
|
484
|
-
if (s.metric[i].name === m.key && s.metric[i].value === m.value) {
|
|
485
|
-
return true;
|
|
486
|
-
}
|
|
487
|
-
}
|
|
488
|
-
return false;
|
|
489
|
-
});
|
|
490
|
-
}
|
|
491
|
-
|
|
492
466
|
const isLimit =
|
|
493
467
|
s.metric.findIndex(m => m.name === '__type__' && m.value === 'limit') > -1;
|
|
494
468
|
const strokeDasharray = isLimit ? '8 4' : '';
|
|
@@ -500,7 +474,7 @@ const RawUtilizationMetrics = ({
|
|
|
500
474
|
line={l}
|
|
501
475
|
color={getSeriesColor(s.metric)}
|
|
502
476
|
strokeWidth={
|
|
503
|
-
isSelected
|
|
477
|
+
s.isSelected === true
|
|
504
478
|
? lineStrokeSelected
|
|
505
479
|
: hovering && highlighted != null && i === highlighted.seriesIndex
|
|
506
480
|
? lineStrokeHover
|
|
@@ -542,7 +516,6 @@ const UtilizationMetrics = ({
|
|
|
542
516
|
humanReadableName,
|
|
543
517
|
from,
|
|
544
518
|
to,
|
|
545
|
-
selectedSeries,
|
|
546
519
|
onSelectedSeriesChange,
|
|
547
520
|
}: Props): JSX.Element => {
|
|
548
521
|
const {isDarkMode} = useParcaContext();
|
|
@@ -571,7 +544,6 @@ const UtilizationMetrics = ({
|
|
|
571
544
|
humanReadableName={humanReadableName}
|
|
572
545
|
from={from}
|
|
573
546
|
to={to}
|
|
574
|
-
selectedSeries={selectedSeries}
|
|
575
547
|
onSelectedSeriesChange={onSelectedSeriesChange}
|
|
576
548
|
/>
|
|
577
549
|
)}
|