From f54311040e6661c699b6468fa1936fc318337021 Mon Sep 17 00:00:00 2001 From: Yomi Eluwande Date: Wed, 26 Feb 2025 14:18:06 +0100 Subject: [PATCH 1/2] revert using transformUtilizationLabels fn --- .../src/MetricsGraph/MetricsContextMenu/index.tsx | 2 +- .../src/MetricsGraph/UtilizationMetrics/index.tsx | 10 ++++------ 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/ui/packages/shared/profile/src/MetricsGraph/MetricsContextMenu/index.tsx b/ui/packages/shared/profile/src/MetricsGraph/MetricsContextMenu/index.tsx index b511ddd313b..c072894fe61 100644 --- a/ui/packages/shared/profile/src/MetricsGraph/MetricsContextMenu/index.tsx +++ b/ui/packages/shared/profile/src/MetricsGraph/MetricsContextMenu/index.tsx @@ -78,7 +78,7 @@ const MetricsContextMenu = ({ id={label.name} onClick={() => { onAddLabelMatcher({ - key: transformUtilizationLabels(label.name, utilizationMetrics), + key: label.name, value: label.value, }); }} diff --git a/ui/packages/shared/profile/src/MetricsGraph/UtilizationMetrics/index.tsx b/ui/packages/shared/profile/src/MetricsGraph/UtilizationMetrics/index.tsx index 1d9b45d27ff..4dac0d6fb3d 100644 --- a/ui/packages/shared/profile/src/MetricsGraph/UtilizationMetrics/index.tsx +++ b/ui/packages/shared/profile/src/MetricsGraph/UtilizationMetrics/index.tsx @@ -480,12 +480,10 @@ const RawUtilizationMetrics = ({ onClick={() => { if (highlighted != null) { addLabelMatcher( - highlighted.labels - .filter(l => l.name.startsWith('attributes_resource.')) - .map(l => ({ - key: l.name.replace('attributes_resource.', ''), - value: l.value, - })) + highlighted.labels.map(l => ({ + key: l.name, + value: l.value, + })) ); } }} From bd0925f861cc996729c37392bae4fdbb5ba0f39b Mon Sep 17 00:00:00 2001 From: Yomi Eluwande Date: Wed, 26 Feb 2025 15:49:41 +0100 Subject: [PATCH 2/2] use a new queryparam `selectedSeries` to query for cpu strips and flamechart --- .../MetricsGraph/UtilizationMetrics/index.tsx | 38 ++++++++++--------- .../ProfileSelector/MetricsGraphSection.tsx | 8 ---- 2 files changed, 20 insertions(+), 26 deletions(-) diff --git a/ui/packages/shared/profile/src/MetricsGraph/UtilizationMetrics/index.tsx b/ui/packages/shared/profile/src/MetricsGraph/UtilizationMetrics/index.tsx index 4dac0d6fb3d..b2ddff43bf8 100644 --- a/ui/packages/shared/profile/src/MetricsGraph/UtilizationMetrics/index.tsx +++ b/ui/packages/shared/profile/src/MetricsGraph/UtilizationMetrics/index.tsx @@ -19,7 +19,7 @@ import {AnimatePresence, motion} from 'framer-motion'; import throttle from 'lodash.throttle'; import {useContextMenu} from 'react-contexify'; -import {DateTimeRange, MetricsGraphSkeleton, useParcaContext} from '@parca/components'; +import {DateTimeRange, MetricsGraphSkeleton, useParcaContext, useURLState} from '@parca/components'; import {Matcher} from '@parca/parser'; import {formatDate, formatForTimespan, getPrecision, valueFormatter} from '@parca/utilities'; @@ -36,7 +36,6 @@ interface CommonProps { labels: {key: string; value: string} | Array<{key: string; value: string}> ) => void; setTimeRange: (range: DateTimeRange) => void; - selectedSeriesMatchers?: Matcher[]; } type RawUtilizationMetricsProps = CommonProps & { @@ -91,7 +90,6 @@ const RawUtilizationMetrics = ({ width, height, margin, - selectedSeriesMatchers, }: RawUtilizationMetricsProps): JSX.Element => { const {timezone} = useParcaContext(); const graph = useRef(null); @@ -101,6 +99,15 @@ const RawUtilizationMetrics = ({ const [pos, setPos] = useState([0, 0]); const [isContextMenuOpen, setIsContextMenuOpen] = useState(false); const idForContextMenu = useId(); + const [selectedSeries, setSelectedSeries] = useURLState('selectedSeries'); + + const parsedSelectedSeries: Matcher[] = useMemo(() => { + if (selectedSeries === undefined) { + return []; + } + + return JSON.parse(decodeURIComponent(selectedSeries)); + }, [selectedSeries]); const lineStroke = '1px'; const lineStrokeHover = '2px'; @@ -446,15 +453,10 @@ const RawUtilizationMetrics = ({ {series.map((s, i) => { let isSelected = false; - if (selectedSeriesMatchers != null && selectedSeriesMatchers.length > 0) { - isSelected = selectedSeriesMatchers.every(m => { + if (parsedSelectedSeries != null && parsedSelectedSeries.length > 0) { + isSelected = parsedSelectedSeries.every(m => { for (let i = 0; i < s.metric.length; i++) { - if ( - s.metric[i].name - .replace('attributes_resource.', '') - .replace('attributes.', '') === m.key && - s.metric[i].value === m.value - ) { + if (s.metric[i].name === m.key && s.metric[i].value === m.value) { return true; } } @@ -479,11 +481,13 @@ const RawUtilizationMetrics = ({ yScale={yScale} onClick={() => { if (highlighted != null) { - addLabelMatcher( - highlighted.labels.map(l => ({ - key: l.name, - value: l.value, - })) + setSelectedSeries( + JSON.stringify( + highlighted.labels.map(l => ({ + key: l.name, + value: l.value, + })) + ) ); } }} @@ -504,7 +508,6 @@ const UtilizationMetrics = ({ addLabelMatcher, setTimeRange, utilizationMetricsLoading, - selectedSeriesMatchers, }: Props): JSX.Element => { const {isDarkMode} = useParcaContext(); const {width, height, margin, heightStyle} = useMetricsGraphDimensions(false, true); @@ -528,7 +531,6 @@ const UtilizationMetrics = ({ width={width} height={height} margin={margin} - selectedSeriesMatchers={selectedSeriesMatchers} /> )} diff --git a/ui/packages/shared/profile/src/ProfileSelector/MetricsGraphSection.tsx b/ui/packages/shared/profile/src/ProfileSelector/MetricsGraphSection.tsx index 763699868a1..9f55c5149f6 100644 --- a/ui/packages/shared/profile/src/ProfileSelector/MetricsGraphSection.tsx +++ b/ui/packages/shared/profile/src/ProfileSelector/MetricsGraphSection.tsx @@ -11,8 +11,6 @@ // See the License for the specific language governing permissions and // limitations under the License. -import {useMemo} from 'react'; - import cx from 'classnames'; import {Label, QueryServiceClient} from '@parca/client'; @@ -135,11 +133,6 @@ export function MetricsGraphSection({ selectProfile(new MergedProfileSelection(mergeFrom, mergeTo, query)); }; - const selectedMatchers = useMemo( - () => Query.parse(querySelection.expression).matchers, - [querySelection.expression] - ); - return (
{setDisplayHideMetricsGraphButton != null ? ( @@ -167,7 +160,6 @@ export function MetricsGraphSection({ addLabelMatcher={addLabelMatcher} setTimeRange={handleTimeRangeChange} utilizationMetricsLoading={utilizationMetricsLoading} - selectedSeriesMatchers={selectedMatchers} /> ) : ( <>