feat(insights): explore link from http module

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

@@ -46,6 +46,7 @@ import {
 import {useSampleScatterPlotSeries} from 'sentry/views/insights/common/views/spanSummaryPage/sampleList/durationChart/useSampleScatterPlotSeries';
 import {DurationChart} from 'sentry/views/insights/http/components/charts/durationChart';
 import {ResponseCodeCountChart} from 'sentry/views/insights/http/components/charts/responseCodeCountChart';
+import {OpenInExploreButton} from 'sentry/views/insights/http/components/openInDiscoverButton';
 import {SpanSamplesTable} from 'sentry/views/insights/http/components/tables/spanSamplesTable';
 import {HTTP_RESPONSE_STATUS_CODES} from 'sentry/views/insights/http/data/definitions';
 import {useSpanSamples} from 'sentry/views/insights/http/queries/useSpanSamples';
@@ -518,6 +519,7 @@ export function HTTPSamplesPanel() {
                 >
                   {t('Try Different Samples')}
                 </Button>
+                <OpenInExploreButton query={search} />
               </ModuleLayout.Full>
             </Fragment>
           )}

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

@@ -0,0 +1,27 @@
+import * as qs from 'query-string';
+
+import {LinkButton} from 'sentry/components/button';
+import {t} from 'sentry/locale';
+import type {MutableSearch} from 'sentry/utils/tokenizeSearch';
+import normalizeUrl from 'sentry/utils/url/normalizeUrl';
+import useOrganization from 'sentry/utils/useOrganization';
+import type {EAPSpanProperty} from 'sentry/views/insights/types';
+
+export function OpenInExploreButton({query}: {query: MutableSearch}) {
+  const organization = useOrganization();
+
+  const queryObj = {
+    query: query.formatString(),
+    groupBy: 'span.description' satisfies EAPSpanProperty,
+    visualize: {
+      chartType: 1,
+      yAxes: ['avg(span.duration)', 'count(span.duration)'] satisfies EAPSpanProperty[],
+    },
+    mode: 'aggregate',
+  };
+  const url = normalizeUrl(
+    `/organizations/${organization.slug}/traces/?${qs.stringify(queryObj)}`
+  );
+
+  return <LinkButton to={url}>{t('Go to Explore')}</LinkButton>;
+}

static/app/views/insights/http/views/httpDomainSummaryPage.tsx

@@ -37,6 +37,7 @@ import {ResponseRateChart} from 'sentry/views/insights/http/components/charts/re
 import {ThroughputChart} from 'sentry/views/insights/http/components/charts/throughputChart';
 import {DomainStatusLink} from 'sentry/views/insights/http/components/domainStatusLink';
 import {HTTPSamplesPanel} from 'sentry/views/insights/http/components/httpSamplesPanel';
+import {OpenInExploreButton} from 'sentry/views/insights/http/components/openInDiscoverButton';
 import {
   DomainTransactionsTable,
   isAValidSort,
@@ -196,6 +197,7 @@ export function HTTPDomainSummaryPage() {
       },
     ],
     module: ModuleName.HTTP,
+    headerActions: <OpenInExploreButton query={MutableSearch.fromQueryObject(filters)} />,
   };
 
   return (

static/app/views/insights/http/views/httpLandingPage.tsx

@@ -26,6 +26,7 @@ import SubregionSelector from 'sentry/views/insights/common/views/spans/selector
 import {DurationChart} from 'sentry/views/insights/http/components/charts/durationChart';
 import {ResponseRateChart} from 'sentry/views/insights/http/components/charts/responseRateChart';
 import {ThroughputChart} from 'sentry/views/insights/http/components/charts/throughputChart';
+import {OpenInExploreButton} from 'sentry/views/insights/http/components/openInDiscoverButton';
 import {
   DomainsTable,
   isAValidSort,
@@ -172,6 +173,9 @@ export function HTTPLandingPage() {
   const headerProps = {
     headerTitle,
     module: ModuleName.HTTP,
+    headerActions: (
+      <OpenInExploreButton query={MutableSearch.fromQueryObject(tableFilters)} />
+    ),
   };
 
   return (

static/app/views/insights/types.tsx

@@ -110,7 +110,7 @@ export type SpanIndexedQueryFilters = {
 
 export type SpanStringArrayFields = 'span.domain';
 
-export const COUNTER_AGGREGATES = ['sum', 'avg', 'min', 'max', 'p100'] as const;
+export const COUNTER_AGGREGATES = ['sum', 'avg', 'min', 'max', 'p100', 'count'] as const;
 export const DISTRIBUTION_AGGREGATES = ['p50', 'p75', 'p95', 'p99'] as const;
 
 export const AGGREGATES = [...COUNTER_AGGREGATES, ...DISTRIBUTION_AGGREGATES] as const;