Revert "Refactor ProfileSelector and MetricsGraphSection components (#6025)" (#6072)

This reverts commit 7e22b1c.

Author: yomete

ui/packages/shared/profile/src/MatchersInput/index.tsx

@@ -11,44 +11,179 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, {useMemo, useRef, useState} from 'react';
+import React, {useEffect, useMemo, useRef, useState} from 'react';
 
+import {useQuery} from '@tanstack/react-query';
 import cx from 'classnames';
 import TextareaAutosize from 'react-textarea-autosize';
 
+import {LabelsRequest, LabelsResponse, QueryServiceClient, ValuesRequest} from '@parca/client';
+import {useGrpcMetadata} from '@parca/components';
 import {Query} from '@parca/parser';
 import {TEST_IDS, testId} from '@parca/test-utils';
+import {millisToProtoTimestamp, sanitizeLabelValue} from '@parca/utilities';
 
-import {useUnifiedLabels} from '../contexts/UnifiedLabelsContext';
-import {useQueryState} from '../hooks/useQueryState';
+import {UtilizationLabels} from '../ProfileSelector';
+import {LabelsProvider, useLabels} from '../contexts/MatchersInputLabelsContext';
+import useGrpcQuery from '../useGrpcQuery';
 import SuggestionsList, {Suggestion, Suggestions} from './SuggestionsList';
 
-const MatchersInput = (): JSX.Element => {
+interface MatchersInputProps {
+  queryClient: QueryServiceClient;
+  setMatchersString: (arg: string) => void;
+  runQuery: () => void;
+  currentQuery: Query;
+  profileType: string;
+  start?: number;
+  end?: number;
+}
+
+export interface ILabelNamesResult {
+  response?: LabelsResponse;
+  error?: Error;
+}
+
+interface UseLabelNames {
+  result: ILabelNamesResult;
+  loading: boolean;
+  refetch: () => Promise<void>;
+}
+
+export const useLabelNames = (
+  client: QueryServiceClient,
+  profileType: string,
+  start?: number,
+  end?: number,
+  match?: string[]
+): UseLabelNames => {
+  const metadata = useGrpcMetadata();
+
+  const {data, isLoading, error, refetch} = useGrpcQuery<LabelsResponse>({
+    key: ['labelNames', profileType, match?.join(','), start, end],
+    queryFn: async signal => {
+      const request: LabelsRequest = {match: match !== undefined ? match : []};
+      if (start !== undefined && end !== undefined) {
+        request.start = millisToProtoTimestamp(start);
+        request.end = millisToProtoTimestamp(end);
+      }
+      if (profileType !== undefined) {
+        request.profileType = profileType;
+      }
+      const {response} = await client.labels(request, {meta: metadata, abort: signal});
+      return response;
+    },
+    options: {
+      enabled: profileType !== undefined && profileType !== '',
+      keepPreviousData: false,
+    },
+  });
+
+  useEffect(() => {
+    console.log('Label names query result:', {data, error, isLoading});
+  }, [data, error, isLoading]);
+
+  return {
+    result: {response: data, error: error as Error},
+    loading: isLoading,
+    refetch: async () => {
+      await refetch();
+    },
+  };
+};
+
+interface UseLabelValues {
+  result: {
+    response: string[];
+    error?: Error;
+  };
+  loading: boolean;
+  refetch: () => Promise<void>;
+}
+
+export const useLabelValues = (
+  client: QueryServiceClient,
+  labelName: string,
+  profileType: string,
+  start?: number,
+  end?: number
+): UseLabelValues => {
+  const metadata = useGrpcMetadata();
+
+  const {data, isLoading, error, refetch} = useGrpcQuery<string[]>({
+    key: ['labelValues', labelName, profileType, start, end],
+    queryFn: async signal => {
+      const request: ValuesRequest = {labelName, match: [], profileType};
+      if (start !== undefined && end !== undefined) {
+        request.start = millisToProtoTimestamp(start);
+        request.end = millisToProtoTimestamp(end);
+      }
+      const {response} = await client.values(request, {meta: metadata, abort: signal});
+      return sanitizeLabelValue(response.labelValues);
+    },
+    options: {
+      enabled:
+        profileType !== undefined &&
+        profileType !== '' &&
+        labelName !== undefined &&
+        labelName !== '',
+      keepPreviousData: false,
+    },
+  });
+
+  console.log('Label values query result:', {data, error, isLoading, labelName});
+
+  return {
+    result: {response: data ?? [], error: error as Error},
+    loading: isLoading,
+    refetch: async () => {
+      await refetch();
+    },
+  };
+};
+
+export const useFetchUtilizationLabelValues = (
+  labelName: string,
+  utilizationLabels?: UtilizationLabels
+): string[] => {
+  const {data} = useQuery({
+    queryKey: ['utilizationLabelValues', labelName],
+    queryFn: async () => {
+      const result = await utilizationLabels?.utilizationFetchLabelValues?.(labelName);
+      return result ?? [];
+    },
+    enabled: utilizationLabels?.utilizationFetchLabelValues != null && labelName !== '',
+  });
+
+  return data ?? [];
+};
+
+const MatchersInput = ({
+  setMatchersString,
+  runQuery,
+  currentQuery,
+}: MatchersInputProps): JSX.Element => {
   const inputRef = useRef<HTMLTextAreaElement | null>(null);
   const [focusedInput, setFocusedInput] = useState(false);
   const [lastCompleted, setLastCompleted] = useState<Suggestion>(new Suggestion('', '', ''));
 
   const {
     labelNames,
     labelValues,
-    labelNameMappingsForMatchersInput: labelNameMappings,
+    labelNameMappings,
     isLabelNamesLoading,
     isLabelValuesLoading,
     currentLabelName,
     setCurrentLabelName,
     shouldHandlePrefixes,
     refetchLabelValues,
     refetchLabelNames,
-    suffix,
-  } = useUnifiedLabels();
-
-  const {setDraftMatchers, commitDraft, draftParsedQuery} = useQueryState({suffix});
+  } = useLabels();
 
-  const value = draftParsedQuery != null ? draftParsedQuery.matchersString() : '';
+  const value = currentQuery.matchersString();
 
   const suggestionSections = useMemo(() => {
     const suggestionSections = new Suggestions();
-    Query.suggest(`${draftParsedQuery?.profileName() as string}{${value}`).forEach(function (s) {
+    Query.suggest(`${currentQuery.profileName()}{${value}`).forEach(function (s) {
       // Skip suggestions that we just completed. This really only works,
       // because we know the language is not repetitive. For a language that
       // has a repeating word, this would not work.
@@ -121,7 +256,7 @@ const MatchersInput = (): JSX.Element => {
     });
     return suggestionSections;
   }, [
-    draftParsedQuery,
+    currentQuery,
     lastCompleted,
     labelNames,
     labelValues,
@@ -136,7 +271,7 @@ const MatchersInput = (): JSX.Element => {
 
   const onChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {
     const newValue = e.target.value;
-    setDraftMatchers(newValue);
+    setMatchersString(newValue);
     resetLastCompleted();
   };
 
@@ -159,7 +294,7 @@ const MatchersInput = (): JSX.Element => {
   const applySuggestion = (suggestion: Suggestion): void => {
     const newValue = complete(suggestion);
     setLastCompleted(suggestion);
-    setDraftMatchers(newValue);
+    setMatchersString(newValue);
     if (inputRef.current !== null) {
       inputRef.current.value = newValue;
       inputRef.current.focus();
@@ -174,7 +309,7 @@ const MatchersInput = (): JSX.Element => {
     setFocusedInput(false);
   };
 
-  const profileSelected = draftParsedQuery?.profileName() === '';
+  const profileSelected = currentQuery.profileName() === '';
 
   return (
     <div
@@ -210,7 +345,7 @@ const MatchersInput = (): JSX.Element => {
         suggestions={suggestionSections}
         applySuggestion={applySuggestion}
         inputRef={inputRef.current}
-        runQuery={commitDraft}
+        runQuery={runQuery}
         focusedInput={focusedInput}
         isLabelValuesLoading={
           isLabelValuesLoading && lastCompleted.type === 'literal' && lastCompleted.value !== ','
@@ -223,4 +358,15 @@ const MatchersInput = (): JSX.Element => {
   );
 };
 
-export default MatchersInput;
+export default function MatchersInputWithProvider(props: MatchersInputProps): JSX.Element {
+  return (
+    <LabelsProvider
+      queryClient={props.queryClient}
+      profileType={props.profileType}
+      start={props.start}
+      end={props.end}
+    >
+      <MatchersInput {...props} />
+    </LabelsProvider>
+  );
+}