feat(insights): update alert behaviour for top 5 response code chart (#93607)

The top 5 response code chart now dynamically creates alert options
based on the response.
Before
<img width="743" alt="image"
src="https://github.com/user-attachments/assets/f7a05d25-ac1b-4fd5-866e-cdfa27623a60"
/>

After
<img width="728" alt="image"
src="https://github.com/user-attachments/assets/def468b9-dd87-48fc-bfba-16610152bb78"
/>

Author: DominikB2014

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

@@ -1,10 +1,19 @@
 import {t} from 'sentry/locale';
 import {type MutableSearch} from 'sentry/utils/tokenizeSearch';
+import useOrganization from 'sentry/utils/useOrganization';
+import usePageFilters from 'sentry/utils/usePageFilters';
+import {Dataset} from 'sentry/views/alerts/rules/metric/types';
+import {Mode} from 'sentry/views/explore/contexts/pageParamsContext/mode';
+import {getExploreUrl} from 'sentry/views/explore/utils';
+import {ChartType} from 'sentry/views/insights/common/components/chart';
+import {BaseChartActionDropdown} from 'sentry/views/insights/common/components/chartActionDropdown';
 // 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';
+import {getAlertsUrl} from 'sentry/views/insights/common/utils/getAlertsUrl';
+import {useAlertsProject} from 'sentry/views/insights/common/utils/useAlertsProject';
+import {SpanFields} from 'sentry/views/insights/types';
 
 interface Props {
   groupBy: SpanFields[];
@@ -23,13 +32,17 @@ export function ResponseCodeCountChart({
   groupBy,
   referrer,
 }: Props) {
+  const organization = useOrganization();
+  const project = useAlertsProject();
+  const {selection} = usePageFilters();
+
+  const yAxis = 'count()';
+  const title = t('Top 5 Response Codes');
+
   // 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}`;
@@ -50,9 +63,60 @@ export function ResponseCodeCountChart({
     return transformedSeries;
   });
 
+  // TODO: kinda ugly, the series names have the format `count() 200` for 200 reponse codes
+  const topResponseCodes = seriesWithMeta
+    .map(s => s.seriesName.replace('count()', '').trim())
+    .filter(isNumeric);
+  const stringifiedSearch = search.formatString();
+
+  const queries = topResponseCodes.map(code => ({
+    label: code,
+    query: `${stringifiedSearch} ${SpanFields.RESPONSE_CODE}:${code}`,
+  }));
+
+  queries.push({
+    label: t('Other'),
+    query: `${stringifiedSearch} !${SpanFields.RESPONSE_CODE}:[${topResponseCodes.join(',')}]`,
+  });
+
+  const exploreUrl = getExploreUrl({
+    organization,
+    visualize: [
+      {
+        chartType: ChartType.LINE,
+        yAxes: [yAxis],
+      },
+    ],
+    mode: Mode.AGGREGATE,
+    title,
+    query: search?.formatString(),
+    sort: undefined,
+    groupBy,
+  });
+
+  const extraActions = [
+    <BaseChartActionDropdown
+      key="http response chart widget"
+      exploreUrl={exploreUrl}
+      referrer={referrer}
+      alertMenuOptions={queries.map(query => ({
+        key: query.label,
+        label: query.label,
+        to: getAlertsUrl({
+          project,
+          aggregate: yAxis,
+          organization,
+          pageFilters: selection,
+          dataset: Dataset.EVENTS_ANALYTICS_PLATFORM,
+          query: query.query,
+        }),
+      }))}
+    />,
+  ];
+
   return (
     <InsightsLineChartWidget
-      queryInfo={{search, groupBy, referrer}}
+      extraActions={extraActions}
       title={t('Top 5 Response Codes')}
       series={seriesWithMeta}
       isLoading={isLoading}
@@ -61,3 +125,7 @@ export function ResponseCodeCountChart({
     />
   );
 }
+
+function isNumeric(maybeNumber: string) {
+  return /^\d+$/.test(maybeNumber);
+}