diff --git a/ui/packages/shared/components/src/ParcaContext/index.tsx b/ui/packages/shared/components/src/ParcaContext/index.tsx index e952a836053..4214eb61145 100644 --- a/ui/packages/shared/components/src/ParcaContext/index.tsx +++ b/ui/packages/shared/components/src/ParcaContext/index.tsx @@ -100,6 +100,7 @@ interface Props { checkDebuginfoStatusHandler?: (buildId: string) => void; flamechartHelpText?: ReactNode; additionalMetricsGraph?: (props: AdditionalMetricsGraphProps) => ReactNode; + enableFlamechartFiltering?: boolean; } export const defaultValue: Props = { diff --git a/ui/packages/shared/profile/src/ProfileFlameChart/index.tsx b/ui/packages/shared/profile/src/ProfileFlameChart/index.tsx index c46f60fd2ce..4c3d5a1dad4 100644 --- a/ui/packages/shared/profile/src/ProfileFlameChart/index.tsx +++ b/ui/packages/shared/profile/src/ProfileFlameChart/index.tsx @@ -14,13 +14,19 @@ import {useEffect, useMemo, useRef} from 'react'; import {LabelSet, QueryRequest_ReportType, QueryServiceClient} from '@parca/client'; -import {useURLState, useURLStateCustom, type OptionsCustom} from '@parca/components'; +import { + useParcaContext, + useURLState, + useURLStateCustom, + type OptionsCustom, +} from '@parca/components'; import {Matcher, MatcherTypes, ProfileType, Query} from '@parca/parser'; import {TimeUnits, formatDate, formatDuration} from '@parca/utilities'; import ProfileFlameGraph, {validateFlameChartQuery} from '../ProfileFlameGraph'; import {boundsFromProfileSource} from '../ProfileFlameGraph/FlameGraphArrow/utils'; import {MergedProfileSource, ProfileSource, timeFormat} from '../ProfileSource'; +import {useProfileFilters} from '../ProfileView/components/ProfileFilters/useProfileFilters'; import type {SamplesData} from '../ProfileView/types/visualization'; import {useQuery} from '../useQuery'; import {NumberDuo} from '../utils'; @@ -119,6 +125,8 @@ export const ProfileFlameChart = ({ metadataMappingFiles, metadataLoading, }: ProfileFlameChartProps): JSX.Element => { + const {enableFlamechartFiltering} = useParcaContext(); + const {protoFilters} = useProfileFilters(); const zoomControlsRef = useRef(null); const [selectedTimeframe, setSelectedTimeframe] = useURLStateCustom< @@ -176,6 +184,7 @@ export const ProfileFlameChart = ({ QueryRequest_ReportType.FLAMECHART, { skip: selectedTimeframe == null || filteredProfileSource == null, + ...(enableFlamechartFiltering === true ? {protoFilters} : {}), } ); diff --git a/ui/packages/shared/profile/src/ProfileView/components/Toolbars/index.tsx b/ui/packages/shared/profile/src/ProfileView/components/Toolbars/index.tsx index 9e98d59e670..9c36f8e775b 100644 --- a/ui/packages/shared/profile/src/ProfileView/components/Toolbars/index.tsx +++ b/ui/packages/shared/profile/src/ProfileView/components/Toolbars/index.tsx @@ -16,7 +16,7 @@ import {FC} from 'react'; import {Icon} from '@iconify/react'; import {QueryServiceClient} from '@parca/client'; -import {Button} from '@parca/components'; +import {Button, useParcaContext} from '@parca/components'; import {ProfileType} from '@parca/parser'; import {TEST_IDS, testId} from '@parca/test-utils'; @@ -165,6 +165,8 @@ export const VisualisationToolbar: FC = ({ const isFlamechartViz = dashboardItems?.includes('flamechart'); const isFlamechartVizOnly = dashboardItems?.length === 1 && isFlamechartViz; + const {enableFlamechartFiltering} = useParcaContext(); + const req = profileSource?.QueryRequest(); if (req !== null && req !== undefined) { req.groupBy = { @@ -202,7 +204,7 @@ export const VisualisationToolbar: FC = ({ )}
- {!isFlamechartVizOnly && } + {(!isFlamechartVizOnly || enableFlamechartFiltering === true) && } {profileViewExternalSubActions != null ? profileViewExternalSubActions : null}