ref(insights): Refactor Insights -> LLM charts

static/app/components/events/interfaces/llm-monitoring/llmMonitoringSection.tsx

@@ -2,38 +2,15 @@ import {LinkButton} from 'sentry/components/core/button';
 import {ButtonBar} from 'sentry/components/core/button/buttonBar';
 import {IconOpen} from 'sentry/icons';
 import {t} from 'sentry/locale';
-import type {Event} from 'sentry/types/event';
-import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import * as ModuleLayout from 'sentry/views/insights/common/components/moduleLayout';
-import {useSpansIndexed} from 'sentry/views/insights/common/queries/useDiscover';
+import LlmEventNumberOfPipelinesChartWidget from 'sentry/views/insights/common/components/widgets/llmEventNumberOfPipelinesChartWidget';
+import LlmEventTotalTokensUsedChartWidget from 'sentry/views/insights/common/components/widgets/llmEventTotalTokensUsedChartWidget';
 import {useModuleURL} from 'sentry/views/insights/common/utils/useModuleURL';
-import {
-  NumberOfPipelinesChart,
-  TotalTokensUsedChart,
-} from 'sentry/views/insights/llmMonitoring/components/charts/llmMonitoringCharts';
-import {SpanIndexedField} from 'sentry/views/insights/types';
 import {SectionKey} from 'sentry/views/issueDetails/streamline/context';
 import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection';
 
-interface Props {
-  event: Event;
-}
-
-export default function LLMMonitoringSection({event}: Props) {
+export default function LLMMonitoringSection() {
   const moduleUrl = useModuleURL('ai');
-  const trace = event.contexts.trace;
-
-  const {data} = useSpansIndexed(
-    {
-      limit: 1,
-      fields: [SpanIndexedField.SPAN_AI_PIPELINE_GROUP],
-      search: new MutableSearch(`trace:${trace?.trace_id} id:"${trace?.span_id}"`),
-      enabled: Boolean(trace?.span_id) && Boolean(trace?.trace_id),
-    },
-    'api.ai-pipelines.view'
-  );
-
-  const aiPipelineGroup = data[0]?.[SpanIndexedField.SPAN_AI_PIPELINE_GROUP];
 
   const actions = (
     <ButtonBar gap={1}>
@@ -50,18 +27,14 @@ export default function LLMMonitoringSection({event}: Props) {
       help={t('Charts showing how many tokens are being used')}
       actions={actions}
     >
-      {aiPipelineGroup ? (
-        <ModuleLayout.Layout>
-          <ModuleLayout.Half>
-            <TotalTokensUsedChart groupId={aiPipelineGroup} />
-          </ModuleLayout.Half>
-          <ModuleLayout.Half>
-            <NumberOfPipelinesChart groupId={aiPipelineGroup} />
-          </ModuleLayout.Half>
-        </ModuleLayout.Layout>
-      ) : (
-        'loading'
-      )}
+      <ModuleLayout.Layout>
+        <ModuleLayout.Half>
+          <LlmEventTotalTokensUsedChartWidget />
+        </ModuleLayout.Half>
+        <ModuleLayout.Half>
+          <LlmEventNumberOfPipelinesChartWidget />
+        </ModuleLayout.Half>
+      </ModuleLayout.Layout>
     </InterimSection>
   );
 }

static/app/views/insights/common/components/widgets/hooks/useAiPipelineGroup.tsx

@@ -0,0 +1,43 @@
+import {MutableSearch} from 'sentry/utils/tokenizeSearch';
+import {useSpansIndexed} from 'sentry/views/insights/common/queries/useDiscover';
+import {SpanIndexedField} from 'sentry/views/insights/types';
+import {useGroupEvent} from 'sentry/views/issueDetails/useGroupEvent';
+
+/**
+ * Given an issue's groupId + eventId, fetch the AI
+ * Pipeline's group ID via event's trace
+ */
+export function useAiPipelineGroup({
+  groupId,
+  eventId,
+}: {
+  groupId: string;
+  eventId?: string;
+}) {
+  const {
+    data: event,
+    isPending: isGroupPending,
+    error: groupError,
+  } = useGroupEvent({groupId, eventId});
+
+  const trace = event?.contexts.trace;
+  const {
+    data,
+    isPending: isSpanPending,
+    error: spanError,
+  } = useSpansIndexed(
+    {
+      limit: 1,
+      fields: [SpanIndexedField.SPAN_AI_PIPELINE_GROUP],
+      search: new MutableSearch(`trace:${trace?.trace_id} id:"${trace?.span_id}"`),
+      enabled: Boolean(trace?.span_id) && Boolean(trace?.trace_id),
+    },
+    'api.ai-pipelines.view'
+  );
+
+  return {
+    groupId: data[0]?.[SpanIndexedField.SPAN_AI_PIPELINE_GROUP],
+    isPending: isGroupPending || isSpanPending,
+    error: groupError || spanError,
+  };
+}

static/app/views/insights/common/components/widgets/llmEventNumberOfPipelinesChartWidget.tsx

@@ -0,0 +1,50 @@
+import {useTheme} from '@emotion/react';
+
+import {t} from 'sentry/locale';
+import {MutableSearch} from 'sentry/utils/tokenizeSearch';
+import {useParams} from 'sentry/utils/useParams';
+import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget';
+import {useAiPipelineGroup} from 'sentry/views/insights/common/components/widgets/hooks/useAiPipelineGroup';
+import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types';
+import {useSpanMetricsSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries';
+
+export default function LlmEventNumberOfPipelinesChartWidget(
+  props: LoadableChartWidgetProps
+) {
+  const params = useParams<{groupId: string; eventId?: string}>();
+  const {groupId, isPending, error} = useAiPipelineGroup(params);
+
+  const theme = useTheme();
+  const aggregate = 'count()';
+
+  let query = 'span.category:"ai.pipeline"';
+  if (groupId) {
+    query = `${query} span.group:"${groupId}"`;
+  }
+  const {
+    data,
+    isPending: spanMetricsSeriesIsPending,
+    error: spanMetricsSeriesError,
+  } = useSpanMetricsSeries(
+    {
+      yAxis: [aggregate],
+      search: new MutableSearch(query),
+      transformAliasToInputFormat: true,
+      enabled: !!groupId,
+    },
+    'api.ai-pipelines.view',
+    props.pageFilters
+  );
+
+  const colors = theme.chart.getColorPalette(2);
+  return (
+    <InsightsLineChartWidget
+      {...props}
+      id="llmEventNumberOfPipelinesChartWidget"
+      isLoading={isPending || spanMetricsSeriesIsPending}
+      error={error || spanMetricsSeriesError}
+      title={t('Number of AI pipelines')}
+      series={[{...data[aggregate], color: colors[1]}]}
+    />
+  );
+}

static/app/views/insights/common/components/widgets/llmEventTotalTokensUsedChartWidget.tsx

@@ -0,0 +1,50 @@
+import {useTheme} from '@emotion/react';
+
+import {t} from 'sentry/locale';
+import {MutableSearch} from 'sentry/utils/tokenizeSearch';
+import {useParams} from 'sentry/utils/useParams';
+import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget';
+import {useAiPipelineGroup} from 'sentry/views/insights/common/components/widgets/hooks/useAiPipelineGroup';
+import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types';
+import {useSpanMetricsSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries';
+
+export default function LlmEventTotalTokensUsedChartWidget(
+  props: LoadableChartWidgetProps
+) {
+  const params = useParams<{groupId: string; eventId?: string}>();
+  const {groupId, isPending, error} = useAiPipelineGroup(params);
+
+  const theme = useTheme();
+  const aggregate = 'sum(ai.total_tokens.used)';
+
+  let query = 'span.category:"ai"';
+  if (groupId) {
+    query = `${query} span.ai.pipeline.group:"${groupId}"`;
+  }
+  const {
+    data,
+    isPending: spanMetricsSeriesIsPending,
+    error: spanMetricsSeriesError,
+  } = useSpanMetricsSeries(
+    {
+      yAxis: [aggregate],
+      search: new MutableSearch(query),
+      transformAliasToInputFormat: true,
+      enabled: !!groupId,
+    },
+    'api.ai-pipelines.view',
+    props.pageFilters
+  );
+
+  const colors = theme.chart.getColorPalette(2);
+  return (
+    <InsightsLineChartWidget
+      {...props}
+      id="llmEventTotalTokensUsedChartWidget"
+      isLoading={isPending || spanMetricsSeriesIsPending}
+      error={error || spanMetricsSeriesError}
+      title={t('Total tokens used')}
+      series={[{...data[aggregate], color: colors[0]}]}
+    />
+  );
+}

static/app/views/insights/common/components/widgets/llmGroupNumberOfPipelinesChartWidget.tsx

@@ -0,0 +1,39 @@
+import {useTheme} from '@emotion/react';
+
+import {t} from 'sentry/locale';
+import {MutableSearch} from 'sentry/utils/tokenizeSearch';
+import {useParams} from 'sentry/utils/useParams';
+import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget';
+import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types';
+import {useSpanMetricsSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries';
+
+export default function LlmGroupNumberOfPipelinesChartWidget(
+  props: LoadableChartWidgetProps
+) {
+  const {groupId} = useParams<{groupId: string}>();
+  const theme = useTheme();
+  const aggregate = 'count()';
+
+  const query = `span.category:"ai.pipeline" span.group:"${groupId}"`;
+  const {data, isPending, error} = useSpanMetricsSeries(
+    {
+      yAxis: [aggregate],
+      search: new MutableSearch(query),
+      transformAliasToInputFormat: true,
+    },
+    'api.ai-pipelines.view',
+    props.pageFilters
+  );
+
+  const colors = theme.chart.getColorPalette(2);
+  return (
+    <InsightsLineChartWidget
+      {...props}
+      id="llmGroupNumberOfPipelinesChartWidget"
+      title={t('Number of AI pipelines')}
+      series={[{...data[aggregate], color: colors[1]}]}
+      isLoading={isPending}
+      error={error}
+    />
+  );
+}

static/app/views/insights/common/components/widgets/llmGroupPipelineDurationChartWidget.tsx

@@ -0,0 +1,39 @@
+import {useTheme} from '@emotion/react';
+
+import {t} from 'sentry/locale';
+import {MutableSearch} from 'sentry/utils/tokenizeSearch';
+import {useParams} from 'sentry/utils/useParams';
+import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget';
+import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types';
+import {useSpanMetricsSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries';
+
+export default function LlmGroupPipelineDurationChartWidget(
+  props: LoadableChartWidgetProps
+) {
+  const {groupId} = useParams<{groupId: string}>();
+  const theme = useTheme();
+  const aggregate = 'avg(span.duration)';
+
+  const query = `span.category:"ai.pipeline" span.group:"${groupId}"`;
+  const {data, isPending, error} = useSpanMetricsSeries(
+    {
+      yAxis: [aggregate],
+      search: new MutableSearch(query),
+      transformAliasToInputFormat: true,
+    },
+    'api.ai-pipelines.view',
+    props.pageFilters
+  );
+
+  const colors = theme.chart.getColorPalette(2);
+  return (
+    <InsightsLineChartWidget
+      {...props}
+      id="llmGroupPipelineDurationChartWidget"
+      title={t('Pipeline duration')}
+      series={[{...data[aggregate], color: colors[2]}]}
+      isLoading={isPending}
+      error={error}
+    />
+  );
+}

static/app/views/insights/common/components/widgets/llmGroupTotalTokensUsedChartWidget.tsx

@@ -0,0 +1,39 @@
+import {useTheme} from '@emotion/react';
+
+import {t} from 'sentry/locale';
+import {MutableSearch} from 'sentry/utils/tokenizeSearch';
+import {useParams} from 'sentry/utils/useParams';
+import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget';
+import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types';
+import {useSpanMetricsSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries';
+
+export default function LlmGroupTotalTokensUsedChartWidget(
+  props: LoadableChartWidgetProps
+) {
+  const {groupId} = useParams<{groupId: string}>();
+  const theme = useTheme();
+  const aggregate = 'sum(ai.total_tokens.used)';
+
+  const query = `span.category:"ai" span.ai.pipeline.group:"${groupId}"`;
+  const {data, isPending, error} = useSpanMetricsSeries(
+    {
+      yAxis: [aggregate],
+      search: new MutableSearch(query),
+      transformAliasToInputFormat: true,
+    },
+    'api.ai-pipelines.view',
+    props.pageFilters
+  );
+
+  const colors = theme.chart.getColorPalette(2);
+  return (
+    <InsightsLineChartWidget
+      {...props}
+      id="llmGroupTotalTokensUsedChartWidget"
+      title={t('Total tokens used')}
+      series={[{...data[aggregate], color: colors[0]}]}
+      isLoading={isPending}
+      error={error}
+    />
+  );
+}

static/app/views/insights/common/components/widgets/llmNumberOfPipelinesChartWidget.tsx

@@ -0,0 +1,35 @@
+import {useTheme} from '@emotion/react';
+
+import {t} from 'sentry/locale';
+import {MutableSearch} from 'sentry/utils/tokenizeSearch';
+import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget';
+import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types';
+import {useSpanMetricsSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries';
+
+export default function LlmNumberOfPipelinesChartWidget(props: LoadableChartWidgetProps) {
+  const theme = useTheme();
+  const aggregate = 'count()';
+
+  const query = 'span.category:"ai.pipeline"';
+  const {data, isPending, error} = useSpanMetricsSeries(
+    {
+      yAxis: [aggregate],
+      search: new MutableSearch(query),
+      transformAliasToInputFormat: true,
+    },
+    'api.ai-pipelines.view',
+    props.pageFilters
+  );
+
+  const colors = theme.chart.getColorPalette(2);
+  return (
+    <InsightsLineChartWidget
+      {...props}
+      id="llmNumberOfPipelinesChartWidget"
+      title={t('Number of AI pipelines')}
+      series={[{...data[aggregate], color: colors[1]}]}
+      isLoading={isPending}
+      error={error}
+    />
+  );
+}