@parca/profile 0.16.466 → 0.16.468

package/dist/contexts/SimpleMatchersLabelContext.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { createContext, useContext, useMemo } from 'react';
+import { useLabelNames } from '../MatchersInput';
+import { transformLabelsForSelect } from '../SimpleMatchers';
+import { useUtilizationLabels } from './UtilizationLabelsContext';
+const LabelContext = createContext(null);
+// With there being the possibility of having utilization labels, we need to be able to determine whether the labels to be used are utilization labels or profiling data labels.
+// This context is used to determine this.
+export function LabelProvider({ children, queryClient, profileType, labelNameFromMatchers, }) {
+    const utilizationLabels = useUtilizationLabels();
+    const { loading, result } = useLabelNames(queryClient, profileType);
+    const value = useMemo(() => {
+        const baseLabels = result.error != null ? [] : result.response?.labelNames.filter(e => e !== '__name__') ?? [];
+        const labelsToUse = utilizationLabels?.utilizationLabelNames?.length !== undefined
+            ? utilizationLabels?.utilizationLabelNames ?? []
+            : baseLabels;
+        const uniqueLabels = Array.from(new Set([...labelsToUse, ...labelNameFromMatchers]));
+        const shouldTrimPrefix = Boolean(utilizationLabels?.utilizationLabelNames);
+        return {
+            labelNameOptions: transformLabelsForSelect(uniqueLabels, shouldTrimPrefix),
+            isLoading: loading,
+            error: result.error ?? null,
+        };
+    }, [result, loading, utilizationLabels, labelNameFromMatchers]);
+    return _jsx(LabelContext.Provider, { value: value, children: children });
+}
+export function useLabels() {
+    const context = useContext(LabelContext);
+    if (context === null) {
+        throw new Error('useLabels must be used within a LabelProvider');
+    }
+    return context;
+}

package/dist/contexts/UtilizationLabelsContext.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+export interface UtilizationLabels {
+    utilizationLabelNames?: string[];
+    utilizationFetchLabelValues?: (key: string) => Promise<string[]>;
+    utilizationLabelValues?: string[];
+}
+interface UtilizationLabelsProviderProps {
+    children: ReactNode;
+    value: UtilizationLabels | undefined;
+}
+export declare function UtilizationLabelsProvider({ children, value, }: UtilizationLabelsProviderProps): JSX.Element;
+export declare function useUtilizationLabels(): UtilizationLabels | undefined;
+export {};
+//# sourceMappingURL=UtilizationLabelsContext.d.ts.map

package/dist/contexts/UtilizationLabelsContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UtilizationLabelsContext.d.ts","sourceRoot":"","sources":["../../src/contexts/UtilizationLabelsContext.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,SAAS,EAA4B,MAAM,OAAO,CAAC;AAE3D,MAAM,WAAW,iBAAiB;IAChC,qBAAqB,CAAC,EAAE,MAAM,EAAE,CAAC;IACjC,2BAA2B,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;IACjE,sBAAsB,CAAC,EAAE,MAAM,EAAE,CAAC;CACnC;AAED,UAAU,8BAA8B;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,iBAAiB,GAAG,SAAS,CAAC;CACtC;AAOD,wBAAgB,yBAAyB,CAAC,EACxC,QAAQ,EACR,KAAK,GACN,EAAE,8BAA8B,GAAG,GAAG,CAAC,OAAO,CAI9C;AAED,wBAAgB,oBAAoB,IAAI,iBAAiB,GAAG,SAAS,CAGpE"}

package/dist/contexts/UtilizationLabelsContext.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { createContext, useContext } from 'react';
+// The UtilizationLabelsContext is used to store the utilization label names and values. It also
+// contains the function utilizationFetchLabelValues to fetch the utilization label values.
+// This context was created so as to avoid props drilling.
+const UtilizationLabelsContext = createContext(undefined);
+export function UtilizationLabelsProvider({ children, value, }) {
+    return (_jsx(UtilizationLabelsContext.Provider, { value: value, children: children }));
+}
+export function useUtilizationLabels() {
+    const context = useContext(UtilizationLabelsContext);
+    return context;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.466",
+  "version": "0.16.468",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@headlessui/react": "^1.7.19",
@@ -75,5 +75,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "52e2c4c6308b962fd0b4d87acc9b0dc4614812f3"
+  "gitHead": "1c8eeeff45c162e0c93a59b2cab77f21615e5397"
 }

package/src/MatchersInput/SuggestionsList.tsx

@@ -52,6 +52,7 @@ interface Props {
   focusedInput: boolean;
   isLabelNamesLoading: boolean;
   isLabelValuesLoading: boolean;
+  shouldTrimPrefix: boolean;
 }
 
 const LoadingSpinner = (): JSX.Element => {
@@ -60,6 +61,11 @@ const LoadingSpinner = (): JSX.Element => {
   return <div className="pt-2 pb-4">{Spinner}</div>;
 };
 
+const transformLabelsForSuggestions = (labelNames: string, shouldTrimPrefix = false): string => {
+  const trimmedLabel = shouldTrimPrefix ? labelNames.split('.').pop() ?? labelNames : labelNames;
+  return trimmedLabel;
+};
+
 const SuggestionsList = ({
   suggestions,
   applySuggestion,
@@ -68,6 +74,7 @@ const SuggestionsList = ({
   focusedInput,
   isLabelNamesLoading,
   isLabelValuesLoading,
+  shouldTrimPrefix = false,
 }: Props): JSX.Element => {
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
   const {styles, attributes} = usePopper(inputRef, popperElement, {
@@ -234,8 +241,8 @@ const SuggestionsList = ({
                       onHighlight={() => setHighlightedSuggestionIndex(i)}
                       onApplySuggestion={() => applySuggestionWithIndex(i)}
                       onResetHighlight={() => resetHighlight()}
-                      value={l.value}
-                      key={l.value}
+                      value={transformLabelsForSuggestions(l.value, shouldTrimPrefix)}
+                      key={transformLabelsForSuggestions(l.value, shouldTrimPrefix)}
                     />
                   ))}
                 </>

package/src/MatchersInput/index.tsx

@@ -13,6 +13,7 @@
 
 import React, {useMemo, useRef, useState} from 'react';
 
+import {useQuery} from '@tanstack/react-query';
 import cx from 'classnames';
 import TextareaAutosize from 'react-textarea-autosize';
 
@@ -21,6 +22,8 @@ import {useGrpcMetadata} from '@parca/components';
 import {Query} from '@parca/parser';
 import {millisToProtoTimestamp, sanitizeLabelValue} from '@parca/utilities';
 
+import {UtilizationLabels} from '../ProfileSelector';
+import {LabelsProvider, useLabels} from '../contexts/MatchersInputLabelsContext';
 import useGrpcQuery from '../useGrpcQuery';
 import SuggestionsList, {Suggestion, Suggestions} from './SuggestionsList';
 
@@ -111,33 +114,39 @@ export const useLabelValues = (
   return {result: {response: data ?? [], error: error as Error}, loading: isLoading};
 };
 
+export const useFetchUtilizationLabelValues = (
+  labelName: string,
+  utilizationLabels?: UtilizationLabels
+): string[] => {
+  const {data} = useQuery({
+    queryKey: ['utilizationLabelValues', labelName],
+    queryFn: async () => {
+      return await utilizationLabels?.utilizationFetchLabelValues?.(labelName);
+    },
+  });
+
+  return data ?? [];
+};
+
 const MatchersInput = ({
-  queryClient,
   setMatchersString,
   runQuery,
   currentQuery,
-  profileType,
 }: MatchersInputProps): JSX.Element => {
   const inputRef = useRef<HTMLTextAreaElement | null>(null);
   const [focusedInput, setFocusedInput] = useState(false);
   const [lastCompleted, setLastCompleted] = useState<Suggestion>(new Suggestion('', '', ''));
-  const [currentLabelName, setCurrentLabelName] = useState<string | null>(null);
-
-  const {loading: labelNamesLoading, result} = useLabelNames(queryClient, profileType);
-  const {response: labelNamesResponse, error: labelNamesError} = result;
 
   const {
-    loading: labelValuesLoading,
-    result: {response: labelValues},
-  } = useLabelValues(queryClient, currentLabelName ?? '', profileType);
-
-  const labelNames = useMemo(() => {
-    return (labelNamesError === undefined || labelNamesError == null) &&
-      labelNamesResponse !== undefined &&
-      labelNamesResponse != null
-      ? labelNamesResponse.labelNames.filter(e => e !== '__name__')
-      : [];
-  }, [labelNamesError, labelNamesResponse]);
+    labelNames,
+    labelValues,
+    labelNameMappings,
+    isLabelNamesLoading,
+    isLabelValuesLoading,
+    currentLabelName,
+    setCurrentLabelName,
+    shouldHandlePrefixes,
+  } = useLabels();
 
   const value = currentQuery.matchersString();
 
@@ -168,18 +177,36 @@ const MatchersInput = ({
           return label.toLowerCase().slice(0, inputLength) === inputValue;
         });
 
-        matches.forEach(m =>
-          suggestionSections.labelNames.push({
+        matches.forEach(m => {
+          const suggestion = {
             type: s.type,
             typeahead: s.typeahead,
             value: m,
-          })
-        );
+          };
+
+          if (shouldHandlePrefixes) {
+            const mapping = labelNameMappings.find(l => l.displayName === m);
+            if (mapping != null) {
+              (suggestion as any).fullName = mapping.fullName;
+            }
+          }
+
+          suggestionSections.labelNames.push(suggestion);
+        });
       }
 
       if (s.type === 'labelValue') {
-        if (currentLabelName === null || s.labelName !== currentLabelName) {
-          setCurrentLabelName(s.labelName);
+        let labelNameForQuery = s.labelName;
+
+        if (shouldHandlePrefixes) {
+          const mapping = labelNameMappings.find(l => l.displayName === s.labelName);
+          if (mapping != null) {
+            labelNameForQuery = mapping.fullName;
+          }
+        }
+
+        if (currentLabelName === null || labelNameForQuery !== currentLabelName) {
+          setCurrentLabelName(labelNameForQuery);
           return;
         }
 
@@ -197,7 +224,17 @@ const MatchersInput = ({
       }
     });
     return suggestionSections;
-  }, [currentQuery, lastCompleted, labelNames, labelValues, currentLabelName, value]);
+  }, [
+    currentQuery,
+    lastCompleted,
+    labelNames,
+    labelValues,
+    currentLabelName,
+    value,
+    shouldHandlePrefixes,
+    labelNameMappings,
+    setCurrentLabelName,
+  ]);
 
   const resetLastCompleted = (): void => setLastCompleted(new Suggestion('', '', ''));
 
@@ -269,16 +306,23 @@ const MatchersInput = ({
         id="matchers-input"
       />
       <SuggestionsList
-        isLabelNamesLoading={labelNamesLoading}
+        isLabelNamesLoading={isLabelNamesLoading}
         suggestions={suggestionSections}
         applySuggestion={applySuggestion}
         inputRef={inputRef.current}
         runQuery={runQuery}
         focusedInput={focusedInput}
-        isLabelValuesLoading={labelValuesLoading && lastCompleted.type === 'literal'}
+        isLabelValuesLoading={isLabelValuesLoading && lastCompleted.type === 'literal'}
+        shouldTrimPrefix={shouldHandlePrefixes}
       />
     </div>
   );
 };
 
-export default MatchersInput;
+export default function MatchersInputWithProvider(props: MatchersInputProps): JSX.Element {
+  return (
+    <LabelsProvider queryClient={props.queryClient} profileType={props.profileType}>
+      <MatchersInput {...props} />
+    </LabelsProvider>
+  );
+}

package/src/ProfileIcicleGraph/IcicleGraphArrow/IcicleChartRootNode.tsx

@@ -87,9 +87,9 @@ export const IcicleChartRootNode = React.memo(function IcicleChartRootNodeNonMem
           groupByMetadata?.get(row) as StructRow<Record<string, Binary>>
         ).toJSON();
 
-        const tsStr = arrowToString(groupByFields.timestamp) as string;
+        const tsStr = arrowToString(groupByFields.time_nanos) as string;
 
-        const tsNanos = BigInt(parseInt(tsStr, 10)) * 1000000n;
+        const tsNanos = BigInt(parseInt(tsStr, 10));
         const durationStr = arrowToString(groupByFields.duration) as string;
         const duration = parseInt(durationStr, 10);
 

package/src/ProfileSelector/index.tsx

@@ -30,6 +30,7 @@ import {type NavigateFunction} from '@parca/utilities';
 import {ProfileSelection} from '..';
 import {useLabelNames} from '../MatchersInput/index';
 import {useMetricsGraphDimensions} from '../MetricsGraph/useMetricsGraphDimensions';
+import {UtilizationLabelsProvider} from '../contexts/UtilizationLabelsContext';
 import {useDefaultSumBy, useSumBySelection} from '../useSumBy';
 import {MetricsGraphSection} from './MetricsGraphSection';
 import {QueryControls} from './QueryControls';
@@ -64,6 +65,12 @@ export interface UtilizationMetrics {
   };
 }
 
+export interface UtilizationLabels {
+  utilizationLabelNames?: string[];
+  utilizationFetchLabelValues?: (key: string) => Promise<string[]>;
+  utilizationLabelValues?: string[];
+}
+
 interface ProfileSelectorProps extends ProfileSelectorFeatures {
   queryClient: QueryServiceClient;
   querySelection: QuerySelection;
@@ -78,6 +85,7 @@ interface ProfileSelectorProps extends ProfileSelectorFeatures {
   suffix?: string;
   utilizationMetrics?: UtilizationMetrics[];
   utilizationMetricsLoading?: boolean;
+  utilizationLabels?: UtilizationLabels;
 }
 
 export interface IProfileTypesResult {
@@ -123,6 +131,7 @@ const ProfileSelector = ({
   setDisplayHideMetricsGraphButton,
   utilizationMetrics,
   utilizationMetricsLoading,
+  utilizationLabels,
 }: ProfileSelectorProps): JSX.Element => {
   const {
     loading: profileTypesLoading,
@@ -268,62 +277,64 @@ const ProfileSelector = ({
   const sumByRef = useRef(null);
 
   return (
-    <>
-      <div className="mb-2 flex">
-        <QueryControls
-          showProfileTypeSelector={showProfileTypeSelector}
-          showSumBySelector={showSumBySelector}
-          disableExplorativeQuerying={disableExplorativeQuerying}
-          profileTypesData={profileTypesData}
-          profileTypesLoading={profileTypesLoading}
-          selectedProfileName={selectedProfileName}
-          setProfileName={setProfileName}
-          setMatchersString={setMatchersString}
-          setQueryExpression={setQueryExpression}
-          query={query}
-          queryBrowserRef={queryBrowserRef}
-          timeRangeSelection={timeRangeSelection}
-          setTimeRangeSelection={setTimeRangeSelection}
-          searchDisabled={searchDisabled}
-          queryBrowserMode={queryBrowserMode as string}
-          setQueryBrowserMode={setQueryBrowserMode}
-          advancedModeForQueryBrowser={advancedModeForQueryBrowser}
-          setAdvancedModeForQueryBrowser={setAdvancedModeForQueryBrowser}
+    <UtilizationLabelsProvider value={utilizationLabels}>
+      <>
+        <div className="mb-2 flex">
+          <QueryControls
+            showProfileTypeSelector={showProfileTypeSelector}
+            showSumBySelector={showSumBySelector}
+            disableExplorativeQuerying={disableExplorativeQuerying}
+            profileTypesData={profileTypesData}
+            profileTypesLoading={profileTypesLoading}
+            selectedProfileName={selectedProfileName}
+            setProfileName={setProfileName}
+            setMatchersString={setMatchersString}
+            setQueryExpression={setQueryExpression}
+            query={query}
+            queryBrowserRef={queryBrowserRef}
+            timeRangeSelection={timeRangeSelection}
+            setTimeRangeSelection={setTimeRangeSelection}
+            searchDisabled={searchDisabled}
+            queryBrowserMode={queryBrowserMode as string}
+            setQueryBrowserMode={setQueryBrowserMode}
+            advancedModeForQueryBrowser={advancedModeForQueryBrowser}
+            setAdvancedModeForQueryBrowser={setAdvancedModeForQueryBrowser}
+            queryClient={queryClient}
+            sumByRef={sumByRef}
+            labels={labels}
+            sumBySelection={sumBySelection ?? []}
+            setUserSumBySelection={setUserSumBySelection}
+            profileType={profileType}
+            profileTypesError={error}
+          />
+          {comparing && (
+            <div>
+              <IconButton onClick={() => closeProfile()} icon={<CloseIcon />} />
+            </div>
+          )}
+        </div>
+        <MetricsGraphSection
+          showMetricsGraph={showMetricsGraph}
+          setDisplayHideMetricsGraphButton={setDisplayHideMetricsGraphButton}
+          heightStyle={heightStyle}
+          querySelection={querySelection}
+          profileSelection={profileSelection}
+          comparing={comparing}
+          sumBy={querySelection.sumBy ?? defaultSumBy ?? []}
+          defaultSumByLoading={defaultSumByLoading}
           queryClient={queryClient}
-          sumByRef={sumByRef}
-          labels={labels}
-          sumBySelection={sumBySelection ?? []}
-          setUserSumBySelection={setUserSumBySelection}
-          profileType={profileType}
-          profileTypesError={error}
+          queryExpressionString={queryExpressionString}
+          setTimeRangeSelection={setTimeRangeSelection}
+          selectQuery={selectQuery}
+          selectProfile={selectProfile}
+          query={query}
+          setQueryExpression={setQueryExpression}
+          setNewQueryExpression={setNewQueryExpression}
+          utilizationMetrics={utilizationMetrics}
+          utilizationMetricsLoading={utilizationMetricsLoading}
         />
-        {comparing && (
-          <div>
-            <IconButton onClick={() => closeProfile()} icon={<CloseIcon />} />
-          </div>
-        )}
-      </div>
-      <MetricsGraphSection
-        showMetricsGraph={showMetricsGraph}
-        setDisplayHideMetricsGraphButton={setDisplayHideMetricsGraphButton}
-        heightStyle={heightStyle}
-        querySelection={querySelection}
-        profileSelection={profileSelection}
-        comparing={comparing}
-        sumBy={querySelection.sumBy ?? defaultSumBy ?? []}
-        defaultSumByLoading={defaultSumByLoading}
-        queryClient={queryClient}
-        queryExpressionString={queryExpressionString}
-        setTimeRangeSelection={setTimeRangeSelection}
-        selectQuery={selectQuery}
-        selectProfile={selectProfile}
-        query={query}
-        setQueryExpression={setQueryExpression}
-        setNewQueryExpression={setNewQueryExpression}
-        utilizationMetrics={utilizationMetrics}
-        utilizationMetricsLoading={utilizationMetricsLoading}
-      />
-    </>
+      </>
+    </UtilizationLabelsProvider>
   );
 };
 

package/src/SimpleMatchers/index.tsx

@@ -22,7 +22,8 @@ import {useGrpcMetadata} from '@parca/components';
 import {Query} from '@parca/parser';
 import {sanitizeLabelValue} from '@parca/utilities';
 
-import {useLabelNames} from '../MatchersInput';
+import {LabelProvider, useLabels} from '../contexts/SimpleMatchersLabelContext';
+import {useUtilizationLabels} from '../contexts/UtilizationLabelsContext';
 import Select, {type SelectItem} from './Select';
 
 interface Props {
@@ -42,10 +43,16 @@ interface QueryRow {
   isLoading: boolean;
 }
 
-const transformLabelsForSelect = (labelNames: string[]): SelectItem[] => {
+export const transformLabelsForSelect = (
+  labelNames: string[],
+  shouldTrimPrefix = false
+): SelectItem[] => {
   return labelNames.map(labelName => ({
     key: labelName,
-    element: {active: <>{labelName}</>, expanded: <>{labelName}</>},
+    element: {
+      active: <>{shouldTrimPrefix ? labelName.split('.').pop() : labelName}</>,
+      expanded: <>{shouldTrimPrefix ? labelName.split('.').pop() : labelName}</>,
+    },
   }));
 };
 
@@ -99,19 +106,17 @@ const operatorOptions = [
 const SimpleMatchers = ({
   queryClient,
   setMatchersString,
-  // runQuery,
   currentQuery,
   profileType,
   queryBrowserRef,
 }: Props): JSX.Element => {
+  const utilizationLabels = useUtilizationLabels();
   const [queryRows, setQueryRows] = useState<QueryRow[]>([
     {labelName: '', operator: '=', labelValue: '', labelValues: [], isLoading: false},
   ]);
   const reactQueryClient = useQueryClient();
   const metadata = useGrpcMetadata();
 
-  const {loading: labelNamesLoading, result} = useLabelNames(queryClient, profileType);
-  const {response: labelNamesResponse, error: labelNamesError} = result;
   const [showAll, setShowAll] = useState(false);
 
   const visibleRows = showAll ? queryRows : queryRows.slice(0, 3);
@@ -121,14 +126,6 @@ const SimpleMatchers = ({
 
   const currentMatchers = currentQuery.matchersString();
 
-  const labelNameFromMatchers = useMemo(() => {
-    if (currentQuery === undefined) return [];
-
-    const matchers = currentQuery.matchers;
-
-    return matchers.map(matcher => matcher.key);
-  }, [currentQuery]);
-
   const fetchLabelValues = useCallback(
     async (labelName: string): Promise<string[]> => {
       if (labelName == null || labelName === '' || profileType == null || profileType === '') {
@@ -158,6 +155,13 @@ const SimpleMatchers = ({
     [queryClient, metadata, profileType, reactQueryClient]
   );
 
+  const fetchLabelValuesUtilization = useCallback(
+    async (labelName: string): Promise<string[]> => {
+      return (await utilizationLabels?.utilizationFetchLabelValues?.(labelName)) ?? [];
+    },
+    [utilizationLabels]
+  );
+
   const updateMatchersString = useCallback(
     (rows: QueryRow[]) => {
       const matcherString = rows
@@ -184,7 +188,10 @@ const SimpleMatchers = ({
           const trimmedLabelName = labelName.trim();
           if (trimmedLabelName === '') return null;
 
-          const labelValues = await fetchLabelValues(trimmedLabelName);
+          const labelValues =
+            utilizationLabels?.utilizationFetchLabelValues !== undefined
+              ? await fetchLabelValuesUtilization(trimmedLabelName)
+              : await fetchLabelValues(trimmedLabelName);
           const sanitizedLabelValue =
             labelValue.startsWith('"') && labelValue.endsWith('"')
               ? labelValue.slice(1, -1)
@@ -205,20 +212,15 @@ const SimpleMatchers = ({
     };
 
     void fetchAndSetQueryRows();
-  }, [currentMatchers, fetchLabelValues, updateMatchersString]);
-
-  const labelNames = useMemo(() => {
-    return (labelNamesError === undefined || labelNamesError == null) &&
-      labelNamesResponse !== undefined &&
-      labelNamesResponse != null
-      ? labelNamesResponse.labelNames.filter(e => e !== '__name__')
-      : [];
-  }, [labelNamesError, labelNamesResponse]);
+  }, [
+    currentMatchers,
+    fetchLabelValues,
+    updateMatchersString,
+    fetchLabelValuesUtilization,
+    utilizationLabels,
+  ]);
 
-  const labelNameOptions = useMemo(() => {
-    const uniqueLabelNames = Array.from(new Set([...labelNames, ...labelNameFromMatchers]));
-    return transformLabelsForSelect(uniqueLabelNames);
-  }, [labelNames, labelNameFromMatchers]);
+  const {labelNameOptions, isLoading: labelNamesLoading} = useLabels();
 
   const updateRow = useCallback(
     async (index: number, field: keyof QueryRow, value: string): Promise<void> => {
@@ -232,7 +234,10 @@ const SimpleMatchers = ({
         updatedRows[index].isLoading = true;
         setQueryRows([...updatedRows]);
 
-        const labelValues = await fetchLabelValues(value);
+        const labelValues =
+          utilizationLabels?.utilizationFetchLabelValues !== undefined
+            ? await fetchLabelValuesUtilization(value)
+            : await fetchLabelValues(value);
         updatedRows[index].labelValues = labelValues;
         updatedRows[index].isLoading = false;
       }
@@ -240,7 +245,13 @@ const SimpleMatchers = ({
       setQueryRows([...updatedRows]);
       updateMatchersString(updatedRows);
     },
-    [queryRows, fetchLabelValues, updateMatchersString]
+    [
+      queryRows,
+      fetchLabelValues,
+      updateMatchersString,
+      fetchLabelValuesUtilization,
+      utilizationLabels,
+    ]
   );
 
   const handleUpdateRow = useCallback(
@@ -290,7 +301,10 @@ const SimpleMatchers = ({
           setQueryRows([...updatedRows]);
 
           try {
-            const labelValues = await fetchLabelValues(updatedRows[index].labelName);
+            const labelValues =
+              utilizationLabels?.utilizationFetchLabelValues !== undefined
+                ? await fetchLabelValuesUtilization(updatedRows[index].labelName)
+                : await fetchLabelValues(updatedRows[index].labelName);
             updatedRows[index].labelValues = labelValues;
           } catch (error) {
             console.error('Error fetching label values:', error);
@@ -303,7 +317,7 @@ const SimpleMatchers = ({
         }
       };
     },
-    [queryRows, fetchLabelValues]
+    [queryRows, fetchLabelValues, fetchLabelValuesUtilization, utilizationLabels]
   );
 
   const isRowRegex = (row: QueryRow): boolean => row.operator === '=~' || row.operator === '!~';
@@ -375,4 +389,22 @@ const SimpleMatchers = ({
   );
 };
 
-export default SimpleMatchers;
+export default function SimpleMathersWithProvider(props: Props): JSX.Element {
+  const labelNameFromMatchers = useMemo(() => {
+    if (props.currentQuery === undefined) return [];
+
+    const matchers = props.currentQuery.matchers;
+
+    return matchers.map(matcher => matcher.key);
+  }, [props.currentQuery]);
+
+  return (
+    <LabelProvider
+      queryClient={props.queryClient}
+      profileType={props.profileType}
+      labelNameFromMatchers={labelNameFromMatchers}
+    >
+      <SimpleMatchers {...props} />
+    </LabelProvider>
+  );
+}