ref(insights): pass in search to http sample panel charts (#92503)

Same as #92337 but for web
vitals sample charts

Additionally change to the above:
1. made some changes so that the the `yAxis` is named in a way is
correctly picked up by the widget when generating the explore url.
2. Add a `groupBy` prop to the insight chart to propagate that to
explore.

Author: DominikB2014

static/app/views/insights/common/components/insightsTimeSeriesWidget.tsx

@@ -40,6 +40,7 @@ import type {DiscoverSeries} from 'sentry/views/insights/common/queries/useDisco
 import {convertSeriesToTimeseries} from 'sentry/views/insights/common/utils/convertSeriesToTimeseries';
 import {useInsightsEap} from 'sentry/views/insights/common/utils/useEap';
 import {INGESTION_DELAY} from 'sentry/views/insights/settings';
+import {type SpanFields} from 'sentry/views/insights/types';
 
 export interface InsightsTimeSeriesWidgetProps
   extends WidgetTitleProps,
@@ -50,6 +51,7 @@ export interface InsightsTimeSeriesWidgetProps
   visualizationType: 'line' | 'area' | 'bar';
   aliases?: Record<string, string>;
   description?: React.ReactNode;
+  groupBy?: SpanFields[];
   height?: string | number;
   interactiveTitle?: () => React.ReactNode;
   legendSelection?: LegendSelection | undefined;
@@ -191,6 +193,7 @@ export function InsightsTimeSeriesWidget(props: InsightsTimeSeriesWidgetProps) {
               <OpenInExploreButton
                 chartType={chartType}
                 yAxes={yAxisArray}
+                groupBy={props.groupBy}
                 title={props.title}
                 search={props.search}
               />

static/app/views/insights/common/components/openInExploreButton.tsx

@@ -5,15 +5,17 @@ import useOrganization from 'sentry/utils/useOrganization';
 import {Mode} from 'sentry/views/explore/contexts/pageParamsContext/mode';
 import {getExploreUrl} from 'sentry/views/explore/utils';
 import type {ChartType} from 'sentry/views/insights/common/components/chart';
+import {type SpanFields} from 'sentry/views/insights/types';
 
 type Props = {
   chartType: ChartType;
   yAxes: string[];
+  groupBy?: SpanFields[];
   search?: MutableSearch;
   title?: string;
 };
 
-export function OpenInExploreButton({yAxes, title, search, chartType}: Props) {
+export function OpenInExploreButton({yAxes, title, search, chartType, groupBy}: Props) {
   const organization = useOrganization();
 
   const url = getExploreUrl({
@@ -28,7 +30,7 @@ export function OpenInExploreButton({yAxes, title, search, chartType}: Props) {
     title: title ?? yAxes[0],
     query: search?.formatString(),
     sort: undefined,
-    groupBy: undefined,
+    groupBy,
   });
 
   return (

static/app/views/insights/http/components/charts/responseCodeCountChart.tsx

@@ -1,26 +1,45 @@
 import {t} from 'sentry/locale';
+import {type MutableSearch} from 'sentry/utils/tokenizeSearch';
 // TODO(release-drawer): Only used in httpSamplesPanel, should be easy to move data fetching in here
 // eslint-disable-next-line no-restricted-imports
 import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget';
 import type {DiscoverSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries';
+import {type SpanFields} from 'sentry/views/insights/types';
 
 interface Props {
+  groupBy: SpanFields[];
   isLoading: boolean;
+  search: MutableSearch;
   series: DiscoverSeries[];
   error?: Error | null;
 }
 
-export function ResponseCodeCountChart({series, isLoading, error}: Props) {
+export function ResponseCodeCountChart({
+  series,
+  isLoading,
+  error,
+  search,
+  groupBy,
+}: Props) {
   // TODO: Temporary hack. `DiscoverSeries` meta field and the series name don't
   // match. This is annoying to work around, and will become irrelevant soon
   // enough. For now, just specify the correct meta for these series since
   // they're known and simple
+
+  const yAxis = 'count()';
+
+  const fieldAliases: Record<string, string> = {};
   const seriesWithMeta: DiscoverSeries[] = series.map(discoverSeries => {
+    const newSeriesName = `${yAxis} ${discoverSeries.seriesName}`;
+
+    fieldAliases[newSeriesName] = discoverSeries.seriesName;
+
     const transformedSeries: DiscoverSeries = {
       ...discoverSeries,
+      seriesName: newSeriesName,
       meta: {
         fields: {
-          [discoverSeries.seriesName]: 'integer',
+          [newSeriesName]: 'integer',
         },
         units: {},
       },
@@ -31,10 +50,13 @@ export function ResponseCodeCountChart({series, isLoading, error}: Props) {
 
   return (
     <InsightsLineChartWidget
+      search={search}
+      groupBy={groupBy}
       title={t('Top 5 Response Codes')}
       series={seriesWithMeta}
       isLoading={isLoading}
       error={error ?? null}
+      aliases={fieldAliases}
     />
   );
 }

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

@@ -58,6 +58,7 @@ import decodeResponseCodeClass from 'sentry/views/insights/http/utils/queryParam
 import {InsightsSpanTagProvider} from 'sentry/views/insights/pages/insightsSpanTagProvider';
 import {
   ModuleName,
+  SpanFields,
   SpanFunction,
   SpanIndexedField,
   SpanMetricsField,
@@ -211,7 +212,7 @@ export function HTTPSamplesPanel() {
   } = useTopNSpanMetricsSeries(
     {
       search,
-      fields: ['span.status_code', 'count()'],
+      fields: [SpanFields.RESPONSE_CODE, 'count()'],
       yAxis: ['count()'],
       topN: 5,
       sort: {
@@ -418,6 +419,7 @@ export function HTTPSamplesPanel() {
                 <ModuleLayout.Full>
                   <InsightsLineChartWidget
                     showLegend="never"
+                    search={search}
                     title={getDurationChartTitle('http')}
                     isLoading={isDurationDataFetching}
                     error={durationError}
@@ -432,6 +434,8 @@ export function HTTPSamplesPanel() {
               <Fragment>
                 <ModuleLayout.Full>
                   <ResponseCodeCountChart
+                    search={search}
+                    groupBy={[SpanFields.RESPONSE_CODE]}
                     series={Object.values(responseCodeData).filter(Boolean)}
                     isLoading={isResponseCodeDataLoading}
                     error={responseCodeError}

static/app/views/insights/types.tsx

@@ -91,6 +91,7 @@ export enum SpanFields {
   SPAN_OP = 'span.op',
   RELEASE = 'release',
   PROJECT_ID = 'project.id',
+  RESPONSE_CODE = 'span.status_code',
 }
 
 type WebVitalsMeasurements =