feat(insights): update useIndexedResourcesQuery to use useIndexedSpans (#89087)

Author: DominikB2014

static/app/views/insights/browser/resources/components/sampleImages.tsx

@@ -53,7 +53,7 @@ function SampleImages({groupId, projectId}: Props) {
 
   const filteredResources = imageResources
     .filter(resource => {
-      const fileName = getFileNameFromDescription(resource[SPAN_DESCRIPTION]!);
+      const fileName = getFileNameFromDescription(resource[SPAN_DESCRIPTION]);
       if (uniqueResources.has(fileName)) {
         return false;
       }
@@ -126,11 +126,11 @@ function SampleImagesChartPanelBody(props: {
     <ImageWrapper>
       {images.map(resource => {
         const hasRawDomain = Boolean(resource[RAW_DOMAIN]);
-        const isRelativeUrl = resource[SPAN_DESCRIPTION]!.startsWith('/');
-        let src = resource[SPAN_DESCRIPTION]!;
+        const isRelativeUrl = resource[SPAN_DESCRIPTION].startsWith('/');
+        let src = resource[SPAN_DESCRIPTION];
         if (isRelativeUrl && hasRawDomain) {
           try {
-            const url = new URL(resource[SPAN_DESCRIPTION]!, resource[RAW_DOMAIN]);
+            const url = new URL(resource[SPAN_DESCRIPTION], resource[RAW_DOMAIN]);
             src = url.href;
           } catch {
             Sentry.setContext('resource', {
@@ -146,7 +146,7 @@ function SampleImagesChartPanelBody(props: {
           <ImageContainer
             src={src}
             showImage={isImagesEnabled}
-            fileName={getFileNameFromDescription(resource[SPAN_DESCRIPTION]!)}
+            fileName={getFileNameFromDescription(resource[SPAN_DESCRIPTION])}
             size={resource[`measurements.${HTTP_RESPONSE_CONTENT_LENGTH}`]}
             key={resource[SPAN_DESCRIPTION]}
           />

static/app/views/insights/browser/resources/queries/useIndexedResourceQuery.ts

@@ -1,19 +1,12 @@
-import {useDiscoverQuery} from 'sentry/utils/discover/discoverQuery';
-import EventView from 'sentry/utils/discover/eventView';
 import type {Sort} from 'sentry/utils/discover/fields';
-import {DiscoverDatasets} from 'sentry/utils/discover/types';
-import {useLocation} from 'sentry/utils/useLocation';
-import useOrganization from 'sentry/utils/useOrganization';
-import usePageFilters from 'sentry/utils/usePageFilters';
+import {useSpansIndexed} from 'sentry/views/insights/common/queries/useDiscover';
 import {SpanIndexedField} from 'sentry/views/insights/types';
 
-const {SPAN_DESCRIPTION, HTTP_RESPONSE_CONTENT_LENGTH, RAW_DOMAIN} = SpanIndexedField;
-
 type Options = {
+  referrer: string;
   enabled?: boolean;
   limit?: number;
   queryConditions?: string[];
-  referrer?: string;
   sorts?: Sort[];
 };
 
@@ -24,55 +17,21 @@ export const useIndexedResourcesQuery = ({
   referrer,
   enabled = true,
 }: Options) => {
-  const pageFilters = usePageFilters();
-  const location = useLocation();
-  const {slug: orgSlug} = useOrganization();
-
-  // TODO - we should be using metrics data here
-  const eventView = EventView.fromNewQueryWithPageFilters(
+  return useSpansIndexed(
     {
       fields: [
         `any(id)`,
-        'project',
-        'span.group',
-        RAW_DOMAIN,
-        SPAN_DESCRIPTION,
-        `measurements.${HTTP_RESPONSE_CONTENT_LENGTH}`,
+        SpanIndexedField.PROJECT,
+        SpanIndexedField.SPAN_GROUP,
+        SpanIndexedField.RAW_DOMAIN,
+        SpanIndexedField.SPAN_DESCRIPTION,
+        SpanIndexedField.MEASUREMENT_HTTP_RESPONSE_CONTENT_LENGTH,
       ],
-      name: 'Indexed Resource Query',
-      query: queryConditions.join(' '),
-      version: 2,
-      dataset: DiscoverDatasets.SPANS_INDEXED,
-    },
-    pageFilters.selection
-  );
-
-  if (sorts) {
-    eventView.sorts = sorts;
-  }
-
-  const result = useDiscoverQuery({
-    eventView,
-    limit,
-    location,
-    orgSlug,
-    referrer,
-    options: {
+      limit,
+      sorts,
+      search: queryConditions.join(' '),
       enabled,
-      refetchOnWindowFocus: false,
     },
-  });
-
-  const data =
-    result?.data?.data.map(row => ({
-      project: row.project as string,
-      'transaction.id': row['transaction.id'] as string,
-      [SPAN_DESCRIPTION]: row[SPAN_DESCRIPTION]?.toString(),
-      [RAW_DOMAIN]: row[RAW_DOMAIN]?.toString(),
-      'measurements.http.response_content_length': row[
-        `measurements.${HTTP_RESPONSE_CONTENT_LENGTH}`
-      ] as number,
-    })) ?? [];
-
-  return {...result, data};
+    referrer
+  );
 };

static/app/views/insights/types.tsx

@@ -302,6 +302,7 @@ export enum SpanIndexedField {
   LCP_ELEMENT = 'lcp.element',
   CLS_SOURCE = 'cls.source.1',
   NORMALIZED_DESCRIPTION = 'sentry.normalized_description',
+  MEASUREMENT_HTTP_RESPONSE_CONTENT_LENGTH = 'measurements.http.response_content_length',
 }
 
 export type SpanIndexedResponse = {
@@ -391,6 +392,10 @@ export type SpanIndexedResponse = {
   [SpanIndexedField.USER_GEO_SUBREGION]: string;
   [SpanIndexedField.LCP_ELEMENT]: string;
   [SpanIndexedField.CLS_SOURCE]: string;
+  [SpanIndexedField.MEASUREMENT_HTTP_RESPONSE_CONTENT_LENGTH]: number;
+  [SpanIndexedField.PROJECT]: string;
+  [SpanIndexedField.SPAN_GROUP]: string;
+  'any(id)': string;
 };
 
 export type SpanIndexedProperty = keyof SpanIndexedResponse;