ref(trace-items): Pull useGetTraceItemAttributeKeys into hook (#93739)

Zylphrex · web-flow · commit 9f840496b643 · 2025-06-20T15:36:46.000-04:00
We'll need the `useGetTraceItemAttributeKeys` hook in other places so
refactoring it so that it can exported.
diff --git a/static/app/views/explore/components/traceItemSearchQueryBuilder.tsx b/static/app/views/explore/components/traceItemSearchQueryBuilder.tsx
@@ -8,7 +8,7 @@ import {SavedSearchType, type TagCollection} from 'sentry/types/group';
 import type {AggregationKey} from 'sentry/utils/fields';
 import {FieldKind, getFieldDefinition} from 'sentry/utils/fields';
 import useOrganization from 'sentry/utils/useOrganization';
-import {useTraceItemAttributeValues} from 'sentry/views/explore/hooks/useTraceItemAttributeValues';
+import {useGetTraceItemAttributeValues} from 'sentry/views/explore/hooks/useGetTraceItemAttributeValues';
 import {LOGS_FILTER_KEY_SECTIONS} from 'sentry/views/explore/logs/constants';
 import {TraceItemDataset} from 'sentry/views/explore/types';
 import {SPANS_FILTER_KEY_SECTIONS} from 'sentry/views/insights/constants';
@@ -68,10 +68,8 @@ export function useSearchQueryBuilderProps({
   const filterKeySections = useFilterKeySections(itemType, stringAttributes);
   const filterTags = useFilterTags(numberAttributes, stringAttributes, functionTags);
 
-  const getTraceItemAttributeValues = useTraceItemAttributeValues({
+  const getTraceItemAttributeValues = useGetTraceItemAttributeValues({
     traceItemType: itemType,
-    attributeKey: '',
-    enabled: true,
     type: 'string',
     projectIds: projects,
   });
diff --git a/static/app/views/explore/hooks/useGetTraceItemAttributeKeys.tsx b/static/app/views/explore/hooks/useGetTraceItemAttributeKeys.tsx
@@ -0,0 +1,133 @@
+import {useCallback} from 'react';
+
+import {normalizeDateTimeParams} from 'sentry/components/organizations/pageFilters/parse';
+import type {PageFilters} from 'sentry/types/core';
+import type {Tag, TagCollection} from 'sentry/types/group';
+import {FieldKind} from 'sentry/utils/fields';
+import useApi from 'sentry/utils/useApi';
+import useOrganization from 'sentry/utils/useOrganization';
+import usePageFilters from 'sentry/utils/usePageFilters';
+import type {
+  TraceItemDataset,
+  UseTraceItemAttributeBaseProps,
+} from 'sentry/views/explore/types';
+
+interface UseGetTraceItemAttributeKeysProps extends UseTraceItemAttributeBaseProps {
+  projectIds?: Array<string | number>;
+}
+
+type TraceItemAttributeKeyOptions = Pick<
+  ReturnType<typeof normalizeDateTimeParams>,
+  'end' | 'start' | 'statsPeriod' | 'utc'
+> & {
+  attributeType: 'string' | 'number';
+  itemType: TraceItemDataset;
+  project?: string[];
+  substringMatch?: string;
+};
+
+export function makeTraceItemAttributeKeysQueryOptions({
+  traceItemType,
+  type,
+  datetime,
+  projectIds,
+  search,
+}: {
+  datetime: PageFilters['datetime'];
+  traceItemType: TraceItemDataset;
+  type: 'string' | 'number';
+  projectIds?: Array<string | number>;
+  search?: string;
+}): TraceItemAttributeKeyOptions {
+  const options: TraceItemAttributeKeyOptions = {
+    itemType: traceItemType,
+    attributeType: type,
+    project: projectIds?.map(String),
+    substringMatch: search,
+    ...normalizeDateTimeParams(datetime),
+  };
+
+  // environment left out intentionally as it's not supported
+
+  return options;
+}
+
+export function useGetTraceItemAttributeKeys({
+  traceItemType,
+  projectIds,
+  type,
+}: UseGetTraceItemAttributeKeysProps) {
+  const api = useApi();
+  const organization = useOrganization();
+  const {selection} = usePageFilters();
+
+  const getTraceItemAttributeKeys = useCallback(
+    async (queryString?: string): Promise<TagCollection> => {
+      const options = makeTraceItemAttributeKeysQueryOptions({
+        traceItemType,
+        type,
+        datetime: selection.datetime,
+        projectIds: projectIds ?? selection.projects,
+        search: queryString,
+      });
+
+      let result: Tag[];
+
+      try {
+        result = await api.requestPromise(
+          `/organizations/${organization.slug}/trace-items/attributes/`,
+          {
+            method: 'GET',
+            query: options,
+          }
+        );
+      } catch (e) {
+        throw new Error(`Unable to fetch trace item attribute keys: ${e}`);
+      }
+
+      const attributes: TagCollection = {};
+
+      for (const attribute of result ?? []) {
+        if (isKnownAttribute(attribute)) {
+          continue;
+        }
+
+        // EAP spans contain tags with illegal characters
+        // SnQL forbids `-` but is allowed in RPC. So add it back later
+        if (
+          !/^[a-zA-Z0-9_.:-]+$/.test(attribute.key) &&
+          !/^tags\[[a-zA-Z0-9_.:-]+,number\]$/.test(attribute.key)
+        ) {
+          continue;
+        }
+
+        attributes[attribute.key] = {
+          key: attribute.key,
+          name: attribute.name,
+          kind: type === 'number' ? FieldKind.MEASUREMENT : FieldKind.TAG,
+        };
+      }
+
+      return attributes;
+    },
+    [api, organization, selection, traceItemType, projectIds, type]
+  );
+
+  return getTraceItemAttributeKeys;
+}
+
+function isKnownAttribute(attribute: Tag) {
+  // For now, skip all the sentry. prefixed attributes as they
+  // should be covered by the static attributes that will be
+  // merged with these results.
+
+  // For logs we include sentry.message.* since it contains params etc.
+  if (
+    attribute.key.startsWith('sentry.message.') ||
+    attribute.key.startsWith('tags[sentry.message.')
+  ) {
+    return false;
+  }
+
+  return attribute.key.startsWith('sentry.') || attribute.key.startsWith('tags[sentry.');
+}
diff --git a/static/app/views/explore/hooks/useGetTraceItemAttributeValues.spec.tsx b/static/app/views/explore/hooks/useGetTraceItemAttributeValues.spec.tsx
@@ -10,7 +10,7 @@ import type {Organization} from 'sentry/types/organization';
 import {FieldKind} from 'sentry/utils/fields';
 import {QueryClientProvider} from 'sentry/utils/queryClient';
 import {useLocation} from 'sentry/utils/useLocation';
-import {useTraceItemAttributeValues} from 'sentry/views/explore/hooks/useTraceItemAttributeValues';
+import {useGetTraceItemAttributeValues} from 'sentry/views/explore/hooks/useGetTraceItemAttributeValues';
 import {TraceItemDataset} from 'sentry/views/explore/types';
 import {OrganizationContext} from 'sentry/views/organizationContext';
 
@@ -27,7 +27,7 @@ function createWrapper(organization: Organization) {
   };
 }
 
-describe('useTraceItemAttributeValues', () => {
+describe('useGetTraceItemAttributeValues', () => {
   const organization = OrganizationFixture({slug: 'org-slug'});
   const attributeKey = 'test.attribute';
 
@@ -77,9 +77,8 @@ describe('useTraceItemAttributeValues', () => {
 
     const {result} = renderHook(
       () =>
-        useTraceItemAttributeValues({
+        useGetTraceItemAttributeValues({
           traceItemType: TraceItemDataset.LOGS,
-          attributeKey,
           type: 'string',
         }),
       {
@@ -125,9 +124,8 @@ describe('useTraceItemAttributeValues', () => {
 
     const {result} = renderHook(
       () =>
-        useTraceItemAttributeValues({
+        useGetTraceItemAttributeValues({
           traceItemType: TraceItemDataset.LOGS,
-          attributeKey,
           type: 'number',
         }),
       {
diff --git a/static/app/views/explore/hooks/useGetTraceItemAttributeValues.tsx b/static/app/views/explore/hooks/useGetTraceItemAttributeValues.tsx
@@ -9,8 +9,10 @@ import type {ApiQueryKey} from 'sentry/utils/queryClient';
 import useApi from 'sentry/utils/useApi';
 import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
-import type {UseTraceItemAttributeBaseProps} from 'sentry/views/explore/hooks/useTraceItemAttributeKeys';
-import type {TraceItemDataset} from 'sentry/views/explore/types';
+import type {
+  TraceItemDataset,
+  UseTraceItemAttributeBaseProps,
+} from 'sentry/views/explore/types';
 
 interface TraceItemAttributeValue {
   first_seen: null;
@@ -20,15 +22,9 @@ interface TraceItemAttributeValue {
   value: string;
 }
 
-interface UseTraceItemAttributeValuesProps extends UseTraceItemAttributeBaseProps {
-  /**
-   * The attribute key for which to fetch values
-   */
-  attributeKey: string;
+interface UseGetTraceItemAttributeValuesProps extends UseTraceItemAttributeBaseProps {
   datetime?: PageFilters['datetime'];
-  enabled?: boolean;
   projectIds?: PageFilters['projects'];
-  search?: string;
 }
 
 function traceItemAttributeValuesQueryKey({
@@ -79,12 +75,12 @@ function traceItemAttributeValuesQueryKey({
  * Hook to fetch trace item attribute values for the Explore interface.
  * This is designed to be used with the organization_trace_item_attributes endpoint.
  */
-export function useTraceItemAttributeValues({
+export function useGetTraceItemAttributeValues({
   traceItemType,
   projectIds,
   datetime,
   type = 'string',
-}: UseTraceItemAttributeValuesProps) {
+}: UseGetTraceItemAttributeValuesProps) {
   const api = useApi();
   const organization = useOrganization();
   const {selection} = usePageFilters();
diff --git a/static/app/views/explore/hooks/useTraceItemAttributeKeys.tsx b/static/app/views/explore/hooks/useTraceItemAttributeKeys.tsx
@@ -1,30 +1,15 @@
 import {useMemo} from 'react';
 
-import {normalizeDateTimeParams} from 'sentry/components/organizations/pageFilters/parse';
-import type {Tag, TagCollection} from 'sentry/types/group';
-import type {Project} from 'sentry/types/project';
+import type {TagCollection} from 'sentry/types/group';
 import {defined} from 'sentry/utils';
-import {FieldKind} from 'sentry/utils/fields';
-import {useApiQuery} from 'sentry/utils/queryClient';
-import useOrganization from 'sentry/utils/useOrganization';
+import {useQuery} from 'sentry/utils/queryClient';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import usePrevious from 'sentry/utils/usePrevious';
-import type {TraceItemDataset} from 'sentry/views/explore/types';
-
-export interface UseTraceItemAttributeBaseProps {
-  /**
-   * The trace item type supported by the endpoint, currently only supports LOGS.
-   */
-  traceItemType: TraceItemDataset;
-  /**
-   * The attribute type supported by the endpoint, currently only supports string and number.
-   */
-  type: 'number' | 'string';
-  /**
-   * Optional list of projects to search. If not provided, it'll use the page filters.
-   */
-  projects?: Project[];
-}
+import {
+  makeTraceItemAttributeKeysQueryOptions,
+  useGetTraceItemAttributeKeys,
+} from 'sentry/views/explore/hooks/useGetTraceItemAttributeKeys';
+import type {UseTraceItemAttributeBaseProps} from 'sentry/views/explore/types';
 
 interface UseTraceItemAttributeKeysProps extends UseTraceItemAttributeBaseProps {
   enabled?: boolean;
@@ -36,76 +21,43 @@ export function useTraceItemAttributeKeys({
   traceItemType,
   projects,
 }: UseTraceItemAttributeKeysProps) {
-  const organization = useOrganization();
   const {selection} = usePageFilters();
 
-  const path = `/organizations/${organization.slug}/trace-items/attributes/`;
-  const endpointOptions = {
-    query: {
-      project: defined(projects)
-        ? projects.map(project => project.id)
-        : selection.projects,
-      environment: selection.environments,
-      ...normalizeDateTimeParams(selection.datetime),
-      itemType: traceItemType,
-      attributeType: type,
-    },
-  };
+  const projectIds = defined(projects)
+    ? projects.map(project => project.id)
+    : selection.projects;
+
+  const queryOptions = useMemo(() => {
+    return makeTraceItemAttributeKeysQueryOptions({
+      traceItemType,
+      type,
+      datetime: selection.datetime,
+      projectIds,
+    });
+  }, [selection, traceItemType, type, projectIds]);
+
+  const queryKey = useMemo(
+    () => ['use-trace-item-attribute-keys', queryOptions],
+    [queryOptions]
+  );
+
+  const getTraceItemAttributeKeys = useGetTraceItemAttributeKeys({
+    traceItemType,
+    type,
+    projectIds,
+  });
 
-  const result = useApiQuery<Tag[]>([path, endpointOptions], {
+  const {data, isFetching, error} = useQuery<TagCollection>({
     enabled,
-    staleTime: 0,
-    refetchOnWindowFocus: false,
-    retry: false,
+    queryKey,
+    queryFn: () => getTraceItemAttributeKeys(),
   });
 
-  const attributes: TagCollection = useMemo(() => {
-    const allAttributes: TagCollection = {};
-
-    for (const attribute of result.data ?? []) {
-      if (isKnownAttribute(attribute)) {
-        continue;
-      }
-
-      // EAP spans contain tags with illegal characters
-      // SnQL forbids `-` but is allowed in RPC. So add it back later
-      if (
-        !/^[a-zA-Z0-9_.:-]+$/.test(attribute.key) &&
-        !/^tags\[[a-zA-Z0-9_.:-]+,number\]$/.test(attribute.key)
-      ) {
-        continue;
-      }
-
-      allAttributes[attribute.key] = {
-        key: attribute.key,
-        name: attribute.name,
-        kind: type === 'number' ? FieldKind.MEASUREMENT : FieldKind.TAG,
-      };
-    }
-
-    return allAttributes;
-  }, [result.data, type]);
-
-  const previousAttributes = usePrevious(attributes, result.isLoading);
+  const previous = usePrevious(data, isFetching);
 
   return {
-    attributes: result.isLoading ? previousAttributes : attributes,
-    isLoading: result.isLoading,
+    attributes: isFetching ? previous : data,
+    error,
+    isLoading: isFetching,
   };
 }
-
-function isKnownAttribute(attribute: Tag) {
-  // For now, skip all the sentry. prefixed attributes as they
-  // should be covered by the static attributes that will be
-  // merged with these results.
-
-  // For logs we include sentry.message.* since it contains params etc.
-  if (
-    attribute.key.startsWith('sentry.message.') ||
-    attribute.key.startsWith('tags[sentry.message.')
-  ) {
-    return false;
-  }
-
-  return attribute.key.startsWith('sentry.') || attribute.key.startsWith('tags[sentry.');
-}
diff --git a/static/app/views/explore/types.tsx b/static/app/views/explore/types.tsx
diff --git a/static/app/views/insights/pages/transactionNameSearchBar.tsx b/static/app/views/insights/pages/transactionNameSearchBar.tsx
