diff --git a/ui/packages/shared/components/src/ParcaContext/index.tsx b/ui/packages/shared/components/src/ParcaContext/index.tsx index 90aa36d25cc..e952a836053 100644 --- a/ui/packages/shared/components/src/ParcaContext/index.tsx +++ b/ui/packages/shared/components/src/ParcaContext/index.tsx @@ -52,6 +52,14 @@ export interface AdditionalMetricsGraphProps { selectTimeRange: (range: DateTimeRange) => void; } +interface ExternalProfilerComponentProps { + disableProfileTypesDropdown?: boolean; + defaultProfileType?: string; + configuredLabelNames?: string[]; + disableExplorativeQuerying?: boolean; + profileFilterDefaults?: unknown[]; +} + interface Props { Spinner: FC; loader?: ReactNode; @@ -82,15 +90,7 @@ interface Props { authenticationErrorMessage?: string; isDarkMode: boolean; flamegraphHint?: ReactNode; - viewComponent?: { - emitQuery: (query: string) => void; - createViewComponent?: ReactNode; - disableProfileTypesDropdown?: boolean; - defaultProfileType?: string; - labelnames?: string[]; - disableExplorativeQuerying?: boolean; - profileFilterDefaults?: unknown[]; - }; + externalProfilerComponent?: ExternalProfilerComponentProps; profileViewExternalMainActions?: ReactNode; profileViewExternalSubActions?: ReactNode; sourceViewContextMenuItems?: SourceViewContextMenuItem[]; diff --git a/ui/packages/shared/profile/src/ViewMatchers/index.tsx b/ui/packages/shared/profile/src/PreSelectedMatchers/index.tsx similarity index 98% rename from ui/packages/shared/profile/src/ViewMatchers/index.tsx rename to ui/packages/shared/profile/src/PreSelectedMatchers/index.tsx index c0390081cdb..eb3d66ac0fd 100644 --- a/ui/packages/shared/profile/src/ViewMatchers/index.tsx +++ b/ui/packages/shared/profile/src/PreSelectedMatchers/index.tsx @@ -28,7 +28,7 @@ interface Props { labelNames: string[]; } -const ViewMatchers: React.FC = ({labelNames}) => { +const PreSelectedMatchers: React.FC = ({labelNames}) => { const [labelValuesMap, setLabelValuesMap] = useState>({}); const [isLoading, setIsLoading] = useState>({}); const metadata = useGrpcMetadata(); @@ -198,4 +198,4 @@ const ViewMatchers: React.FC = ({labelNames}) => { ); }; -export default ViewMatchers; +export default PreSelectedMatchers; diff --git a/ui/packages/shared/profile/src/ProfileSelector/index.tsx b/ui/packages/shared/profile/src/ProfileSelector/index.tsx index 985311e2741..e44d2185c5f 100644 --- a/ui/packages/shared/profile/src/ProfileSelector/index.tsx +++ b/ui/packages/shared/profile/src/ProfileSelector/index.tsx @@ -117,11 +117,13 @@ const ProfileSelector = ({ suffix, onSearchHook, }: ProfileSelectorProps): JSX.Element => { - const {viewComponent, additionalMetricsGraph} = useParcaContext(); + const {externalProfilerComponent, additionalMetricsGraph} = useParcaContext(); const [queryBrowserMode, setQueryBrowserMode] = useURLState('query_browser_mode'); const batchUpdates = useURLStateBatch(); - const profileFilterDefaults = viewComponent?.profileFilterDefaults as ProfileFilter[] | undefined; + const profileFilterDefaults = externalProfilerComponent?.profileFilterDefaults as + | ProfileFilter[] + | undefined; const {forceApplyFilters} = useProfileFilters(); const handleProfileTypeChange = useCallback(() => { @@ -262,12 +264,6 @@ const ProfileSelector = ({ } }; - useEffect(() => { - if (viewComponent !== undefined) { - viewComponent.emitQuery(query.toString()); - } - }, [query, viewComponent]); - useAutoQuerySelector({ selectedProfileName, profileTypesData, @@ -276,7 +272,7 @@ const ProfileSelector = ({ querySelection, navigateTo, loading: sumByLoading, - defaultProfileType: viewComponent?.defaultProfileType, + defaultProfileType: externalProfilerComponent?.defaultProfileType, }); const searchDisabled = @@ -341,7 +337,7 @@ const ProfileSelector = ({ setUserSumBySelection={setDraftSumBy} profileType={profileType} profileTypesError={error} - viewComponent={viewComponent} + externalProfilerComponent={externalProfilerComponent} draftSelection={draftSelection} setDraftMatchers={setDraftMatchers} draftParsedQuery={draftParsedQuery} diff --git a/ui/packages/shared/profile/src/QueryControls/index.tsx b/ui/packages/shared/profile/src/QueryControls/index.tsx index 9983358b39c..e414b40da82 100644 --- a/ui/packages/shared/profile/src/QueryControls/index.tsx +++ b/ui/packages/shared/profile/src/QueryControls/index.tsx @@ -23,13 +23,21 @@ import {ProfileType, Query} from '@parca/parser'; import {TEST_IDS, testId} from '@parca/test-utils'; import MatchersInput from '../MatchersInput'; +import PreSelectedMatchers from '../PreSelectedMatchers'; import {QuerySelection} from '../ProfileSelector'; import ProfileTypeSelector from '../ProfileTypeSelector'; import {SelectWithRefresh} from '../SelectWithRefresh'; import SimpleMatchers from '../SimpleMatchers/'; -import ViewMatchers from '../ViewMatchers'; import {useLabelNames} from '../hooks/useLabels'; +export interface ExternalProfilerComponentProps { + disableProfileTypesDropdown?: boolean; + defaultProfileType?: string; + configuredLabelNames?: string[]; + disableExplorativeQuerying?: boolean; + profileFilterDefaults?: unknown[]; +} + interface SelectOption { label: string; value: string; @@ -53,12 +61,7 @@ interface QueryControlsProps { selectedProfileName?: string; setProfileName?: (name: string | undefined) => void; profileTypesError?: RpcError; - viewComponent?: { - disableProfileTypesDropdown?: boolean; - disableExplorativeQuerying?: boolean; - labelnames?: string[]; - createViewComponent?: React.ReactNode; - }; + externalProfilerComponent?: ExternalProfilerComponentProps; setQueryBrowserMode?: (mode: string) => void; advancedModeForQueryBrowser?: boolean; setAdvancedModeForQueryBrowser?: (mode: boolean) => void; @@ -88,7 +91,7 @@ export function QueryControls({ selectedProfileName, setProfileName, profileTypesError, - viewComponent, + externalProfilerComponent, setQueryBrowserMode, advancedModeForQueryBrowser = false, setAdvancedModeForQueryBrowser, @@ -132,7 +135,7 @@ export function QueryControls({ selectedKey={selectedProfileName} onSelection={setProfileName ?? (() => {})} error={profileTypesError} - disabled={viewComponent?.disableProfileTypesDropdown} + disabled={externalProfilerComponent?.disableProfileTypesDropdown} /> )} @@ -147,7 +150,7 @@ export function QueryControls({ - {showAdvancedMode && viewComponent?.disableExplorativeQuerying !== true && ( + {showAdvancedMode && externalProfilerComponent?.disableExplorativeQuerying !== true && ( <> )} - {viewComponent?.createViewComponent} - {viewComponent?.labelnames !== undefined && viewComponent?.labelnames.length >= 1 ? ( - + {externalProfilerComponent?.configuredLabelNames !== undefined && + externalProfilerComponent?.configuredLabelNames.length >= 1 ? ( + ) : showAdvancedMode && advancedModeForQueryBrowser ? (