feat(insights): Adds create alert buttons to Total tokens used and Pipeline duration charts. Also fix bug with isForLlmMetric prop (#77031)

Adds create alert buttons to Total tokens used and Pipeline duration
charts.
Also fixes a bug with the `isForLlmMetric` prop not properly picking up
aggregates belonging to the LLM Monitoring alert category.

Didn't add an alert to the `Number of AI pipelines` chart yet, because
that chart uses `count()` on the spans dataset, but `count()` in
discover `metrics` points to the transactions dataset. Will update this
later.

Author: edwardgou-sentry

static/app/views/alerts/rules/metric/ruleForm.tsx

@@ -1263,7 +1263,10 @@ class RuleFormContainer extends DeprecatedAsyncComponent<Props, State> {
               isEditing={Boolean(ruleId)}
               isErrorMigration={showErrorMigrationWarning}
               isExtrapolatedChartData={isExtrapolatedChartData}
-              isForLlmMetric={aggregate.includes(':spans/ai.')}
+              isForLlmMetric={[
+                'sum(ai.total_tokens.used)',
+                'sum(ai.total_cost)',
+              ].includes(aggregate)}
               isTransactionMigration={isMigration && !showErrorMigrationWarning}
               monitorType={monitorType}
               onComparisonDeltaChange={value =>

static/app/views/alerts/rules/metric/utils/isInsightsMetricAlert.tsx

@@ -24,6 +24,8 @@ export const INSIGHTS_METRICS = [
   'g:spans/mobile.total_frames@none',
   'g:spans/mobile.frozen_frames@none',
   'g:spans/mobile.slow_frames@none',
+  'c:spans/ai.total_tokens.used@none',
+  'c:spans/ai.total_cost@usd',
 ];
 
 export const isInsightsMetricAlert = (aggregate: string) => {

static/app/views/insights/llmMonitoring/alerts.ts

@@ -0,0 +1,14 @@
+import type {AlertConfig} from 'sentry/views/insights/common/components/chartPanel';
+import {SpanMetricsField} from 'sentry/views/insights/types';
+
+export const ALERTS: Record<string, AlertConfig> = {
+  spm: {
+    aggregate: 'spm()',
+  },
+  duration: {
+    aggregate: 'avg(d:spans/duration@millisecond)',
+  },
+  tokensUsed: {
+    aggregate: `sum(c:spans/${SpanMetricsField.AI_TOTAL_TOKENS_USED}@none)`,
+  },
+};

static/app/views/insights/llmMonitoring/components/charts/llmMonitoringCharts.tsx

@@ -4,6 +4,7 @@ import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import Chart, {ChartType} from 'sentry/views/insights/common/components/chart';
 import ChartPanel from 'sentry/views/insights/common/components/chartPanel';
 import {useSpanMetricsSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries';
+import {ALERTS} from 'sentry/views/insights/llmMonitoring/alerts';
 
 interface TotalTokensUsedChartProps {
   groupId?: string;
@@ -25,7 +26,10 @@ export function TotalTokensUsedChart({groupId}: TotalTokensUsedChartProps) {
   );
 
   return (
-    <ChartPanel title={t('Total tokens used')}>
+    <ChartPanel
+      title={t('Total tokens used')}
+      alertConfigs={[{...ALERTS.tokensUsed, query}]}
+    >
       <Chart
         height={200}
         grid={{
@@ -100,7 +104,10 @@ export function PipelineDurationChart({groupId}: PipelineDurationChartProps) {
   );
 
   return (
-    <ChartPanel title={t('Pipeline Duration')}>
+    <ChartPanel
+      title={t('Pipeline Duration')}
+      alertConfigs={[{...ALERTS.duration, query}]}
+    >
       <Chart
         height={200}
         grid={{