feat(insights): http module to EAP

static/app/views/insights/http/components/httpSamplesPanel.tsx

@@ -32,6 +32,7 @@ import * as ModuleLayout from 'sentry/views/insights/common/components/moduleLay
 import {ReadoutRibbon} from 'sentry/views/insights/common/components/ribbon';
 import {getTimeSpentExplanation} from 'sentry/views/insights/common/components/tableCells/timeSpentCell';
 import {
+  useEAPSpans,
   useSpanMetrics,
   useSpansIndexed,
 } from 'sentry/views/insights/common/queries/useDiscover';
@@ -54,6 +55,7 @@ import {BASE_FILTERS} from 'sentry/views/insights/http/settings';
 import decodePanel from 'sentry/views/insights/http/utils/queryParameterDecoders/panel';
 import decodeResponseCodeClass from 'sentry/views/insights/http/utils/queryParameterDecoders/responseCodeClass';
 import {useDebouncedState} from 'sentry/views/insights/http/utils/useDebouncedState';
+import {USE_EAP_HTTP_MODULE} from 'sentry/views/insights/http/views/httpLandingPage';
 import {useDomainViewFilters} from 'sentry/views/insights/pages/useFilters';
 import {
   ModuleName,
@@ -78,6 +80,7 @@ export function HTTPSamplesPanel() {
       panel: decodePanel,
       responseCodeClass: decodeResponseCodeClass,
       spanSearchQuery: decodeScalar,
+      url: decodeScalar,
       [SpanMetricsField.USER_GEO_SUBREGION]: decodeList,
     },
   });
@@ -137,9 +140,13 @@ export function HTTPSamplesPanel() {
   const isPanelOpen = Boolean(detailKey);
 
   const ADDITONAL_FILTERS = {
-    'span.domain':
-      query.domain === '' ? EMPTY_OPTION_VALUE : escapeFilterValue(query.domain),
-    transaction: query.transaction,
+    ...(query.url
+      ? {url: query.url}
+      : {
+          'span.domain':
+            query.domain === '' ? EMPTY_OPTION_VALUE : escapeFilterValue(query.domain),
+          transaction: query.transaction,
+        }),
     ...(query[SpanMetricsField.USER_GEO_SUBREGION].length > 0
       ? {
           [SpanMetricsField.USER_GEO_SUBREGION]: `[${query[SpanMetricsField.USER_GEO_SUBREGION].join(',')}]`,
@@ -228,12 +235,28 @@ export function HTTPSamplesPanel() {
 
   const durationAxisMax = computeAxisMax([durationData?.[`avg(span.self_time)`]]);
 
-  const {
-    data: durationSamplesData,
-    isFetching: isDurationSamplesDataFetching,
-    error: durationSamplesDataError,
-    refetch: refetchDurationSpanSamples,
-  } = useSpanSamples({
+  const durationEAPSamplesRes = useEAPSpans(
+    {
+      search,
+      fields: [
+        SpanIndexedField.TRACE,
+        SpanIndexedField.TRANSACTION_ID,
+        SpanIndexedField.SPAN_DESCRIPTION,
+        SpanIndexedField.RESPONSE_CODE,
+        SpanIndexedField.PROJECT,
+        SpanIndexedField.TRANSACTION_ID,
+        SpanIndexedField.TIMESTAMP,
+        SpanIndexedField.ID,
+        SpanIndexedField.SPAN_SELF_TIME,
+      ],
+      sorts: [SPAN_SAMPLES_SORT],
+      limit: SPAN_SAMPLE_LIMIT,
+      enabled: isPanelOpen && query.panel === 'duration' && USE_EAP_HTTP_MODULE,
+    },
+    Referrer.SAMPLES_PANEL_DURATION_SAMPLES
+  );
+
+  const durationSamples = useSpanSamples({
     search,
     fields: [
       SpanIndexedField.TRACE,
@@ -243,16 +266,22 @@ export function HTTPSamplesPanel() {
     ],
     min: 0,
     max: durationAxisMax,
-    enabled: isPanelOpen && query.panel === 'duration' && durationAxisMax > 0,
+    enabled:
+      isPanelOpen &&
+      query.panel === 'duration' &&
+      durationAxisMax > 0 &&
+      !USE_EAP_HTTP_MODULE,
     referrer: Referrer.SAMPLES_PANEL_DURATION_SAMPLES,
   });
 
   const {
-    data: responseCodeSamplesData,
-    isFetching: isResponseCodeSamplesDataFetching,
-    error: responseCodeSamplesDataError,
-    refetch: refetchResponseCodeSpanSamples,
-  } = useSpansIndexed(
+    data: durationSamplesData,
+    isFetching: isDurationSamplesDataFetching,
+    error: durationSamplesDataError,
+    refetch: refetchDurationSpanSamples,
+  } = USE_EAP_HTTP_MODULE ? durationEAPSamplesRes : durationSamples;
+
+  const eapResponse = useEAPSpans(
     {
       search,
       fields: [
@@ -266,11 +295,37 @@ export function HTTPSamplesPanel() {
       ],
       sorts: [SPAN_SAMPLES_SORT],
       limit: SPAN_SAMPLE_LIMIT,
-      enabled: isPanelOpen && query.panel === 'status',
+      enabled: isPanelOpen && query.panel === 'status' && USE_EAP_HTTP_MODULE,
     },
     Referrer.SAMPLES_PANEL_RESPONSE_CODE_SAMPLES
   );
 
+  const spanIndexedResponse = useSpansIndexed(
+    {
+      search,
+      fields: [
+        SpanIndexedField.PROJECT,
+        SpanIndexedField.TRACE,
+        SpanIndexedField.TRANSACTION_ID,
+        SpanIndexedField.ID,
+        SpanIndexedField.TIMESTAMP,
+        SpanIndexedField.SPAN_DESCRIPTION,
+        SpanIndexedField.RESPONSE_CODE,
+      ],
+      sorts: [SPAN_SAMPLES_SORT],
+      limit: SPAN_SAMPLE_LIMIT,
+      enabled: isPanelOpen && query.panel === 'status' && !USE_EAP_HTTP_MODULE,
+    },
+    Referrer.SAMPLES_PANEL_RESPONSE_CODE_SAMPLES
+  );
+
+  const {
+    data: responseCodeSamplesData,
+    isFetching: isResponseCodeSamplesDataFetching,
+    error: responseCodeSamplesDataError,
+    refetch: refetchResponseCodeSpanSamples,
+  } = USE_EAP_HTTP_MODULE ? spanIndexedResponse : eapResponse;
+
   const sampledSpanDataSeries = useSampleScatterPlotSeries(
     durationSamplesData,
     domainTransactionMetrics?.[0]?.['avg(span.self_time)'],

static/app/views/insights/http/components/tables/domainCell.tsx

@@ -11,25 +11,27 @@ import {NULL_DOMAIN_DESCRIPTION} from 'sentry/views/insights/http/settings';
 interface Props {
   domain?: string[];
   projectId?: string;
+  url?: string;
 }
 
-export function DomainCell({projectId, domain}: Props) {
+export function DomainCell({projectId, domain, url}: Props) {
   const moduleURL = useModuleURL('http');
   const location = useLocation();
 
   const queryString = {
     ...location.query,
     project: projectId,
     'span.domain': undefined,
+    url,
     domain,
   };
 
+  const text = url ? url : domain && domain.length > 0 ? domain : NULL_DOMAIN_DESCRIPTION;
+
   return (
     <DomainDescription>
       <OverflowEllipsisTextContainer>
-        <Link to={`${moduleURL}/domains/?${qs.stringify(queryString)}`}>
-          {domain && domain.length > 0 ? domain : NULL_DOMAIN_DESCRIPTION}
-        </Link>
+        <Link to={`${moduleURL}/domains/?${qs.stringify(queryString)}`}>{text}</Link>
       </OverflowEllipsisTextContainer>
     </DomainDescription>
   );

static/app/views/insights/http/components/tables/domainsTable.tsx

@@ -19,6 +19,7 @@
 import {QueryParameterNames} from 'sentry/views/insights/common/views/queryParameters';
 import {DataTitles} from 'sentry/views/insights/common/views/spans/types';
 import {DomainCell} from 'sentry/views/insights/http/components/tables/domainCell';
+import {HTTP_MODULE_URL_FIELD} from 'sentry/views/insights/http/views/httpLandingPage';
 import {ModuleName, type SpanMetricsResponse} from 'sentry/views/insights/types';
 
 type Row = Pick<
@@ -37,6 +38,7 @@
 
 type Column = GridColumnHeader<
   | 'span.domain'
+  | 'span.description'
   | 'project'
   | 'spm()'
   | 'http_response_rate(3)'
@@ -46,49 +48,6 @@
   | 'time_spent_percentage()'
 >;
 
-const COLUMN_ORDER: Column[] = [
-  {
-    key: 'span.domain',
-    name: t('Domain'),
-    width: COL_WIDTH_UNDEFINED,
-  },
-  {
-    key: 'project',
-    name: t('Project'),
-    width: COL_WIDTH_UNDEFINED,
-  },
-  {
-    key: 'spm()',
-    name: `${t('Requests')} ${RATE_UNIT_TITLE[RateUnit.PER_MINUTE]}`,
-    width: COL_WIDTH_UNDEFINED,
-  },
-  {
-    key: `http_response_rate(3)`,
-    name: t('3XXs'),
-    width: 50,
-  },
-  {
-    key: `http_response_rate(4)`,
-    name: t('4XXs'),
-    width: 50,
-  },
-  {
-    key: `http_response_rate(5)`,
-    name: t('5XXs'),
-    width: 50,
-  },
-  {
-    key: `avg(span.self_time)`,
-    name: DataTitles.avg,
-    width: COL_WIDTH_UNDEFINED,
-  },
-  {
-    key: 'time_spent_percentage()',
-    name: DataTitles.timeSpent,
-    width: COL_WIDTH_UNDEFINED,
-  },
-];
-
 const SORTABLE_FIELDS = [
   'avg(span.self_time)',
   'spm()',
@@ -114,14 +73,68 @@
     meta?: EventsMetaType;
     pageLinks?: string;
   };
+  showRoutes: boolean;
   sort: ValidSort;
 }
 
-export function DomainsTable({response, sort}: Props) {
+export function DomainsTable({response, showRoutes, sort}: Props) {
   const {data, isLoading, meta, pageLinks} = response;
   const location = useLocation();
   const organization = useOrganization();
 
+  const COLUMN_ORDER: Column[] = [
+    ...(showRoutes
+      ? [
+          {
+            key: HTTP_MODULE_URL_FIELD,
+            name: t('URL'),
+            width: COL_WIDTH_UNDEFINED,
+          },
+        ]
+      : [
+          {
+            key: 'span.domain',
+            name: t('Domain'),
+            width: COL_WIDTH_UNDEFINED,
+          },
+        ]),
+    {
+      key: 'project',
+      name: t('Project'),
+      width: COL_WIDTH_UNDEFINED,
+    },
+    {
+      key: 'spm()',
+      name: `${t('Requests')} ${RATE_UNIT_TITLE[RateUnit.PER_MINUTE]}`,
+      width: COL_WIDTH_UNDEFINED,
+    },
+    {
+      key: `http_response_rate(3)`,
+      name: t('3XXs'),
+      width: 50,
+    },
+    {
+      key: `http_response_rate(4)`,
+      name: t('4XXs'),
+      width: 50,
+    },
+    {
+      key: `http_response_rate(5)`,
+      name: t('5XXs'),
+      width: 50,
+    },
+    {
+      key: `avg(span.self_time)`,
+      name: DataTitles.avg,
+      width: COL_WIDTH_UNDEFINED,
+    },
+    {
+      key: 'time_spent_percentage()',
+      name: DataTitles.timeSpent,
+      width: COL_WIDTH_UNDEFINED,
+    },
+  ];
+
   const handleCursor: CursorHandler = (newCursor, pathname, query) => {
     browserHistory.push({
       pathname,
@@ -187,6 +200,16 @@
     );
   }
 
+  if (column.key === HTTP_MODULE_URL_FIELD) {
+    return (
+      <DomainCell
+        projectId={row['project.id']?.toString()}
+        domain={row['span.domain']}
+        url={row[HTTP_MODULE_URL_FIELD]}
+      />
+    );
+  }
+
   if (!meta?.fields) {
     return row[column.key];
   }