ref(insights): Refactor Insights -> LLM charts (#90094)

Refactors the Insights -> LLM charts to better support deep linking in a
[future PR](#88562).

Notable in this PR is that these widgets are used in 3 different
sections:

1) Landing Page - no additional args
2) Details Page - takes a `groupId` from URL parameters
3) "LLM Monitor Section" (group details page) - The wrapping components
takes in an `event` argument, which uses the trace (span id + trace id)
to query for a groupId to pass to widgets

We're going to refactor the 3 widgets into:
- ~(3) base widgets that accept an optional `groupId` (referring to AI
Pipeline Group, and not our normal Issues Group)~
- (3) widgets that do not require a groupId from URL params. These
widgets handle point 1) above
- (3) widgets that use `groupId` from URL parameters. These widgets
handle points ~1) and~ 2) above.
- (2) widgets (`llmEvent*`) that take `groupId` (Issues Group!) and
`eventId` from URL parameters to fetch the Issues Group, and then tries
to find the AI Pipeline Group id via the event's trace. This AI Pipeline
Group ID is then used in the query and renders the appropriate charts.
These widgets account for point 3) above.

~In order to handle this[^1] (and for future widgets), this PR
introduces a `chartProperties` prop for `LoadableChartWidgetProps`.
These are to be used as URL query params when linking to the Releases
Drawer, but also used to render the chart as well. They are
chart-specific, which is the reason for the additional level of object
nesting. Think of it as these two stages:~

~- "Serialization": we have a chart, and want to "serialize" it into a
URL. This will involve 2 steps~
~- taking the *keys* of `chartProperties` object and using a known query
parameter key (e.g. `rdChartPropertyKey`) to create a list of query
parameters (e.g. `rdChartPropertyKey=foo&rdChartPropertyKey=bar`)~
~- turning `chartProperties` into query parameters (e.g.
`foo=val1&bar=val2`)~

~- "Parsing": inverse of "serialization" -- we have a URL and want to
render a chart.~
~- using known key (`rdChartPropertyKey`), we're able to fetch the keys
of `chartProperties` (which can vary from chart to chart)~
~- with the keys, we can again look through the query parameters to get
the values for each key~
  
~The known key (e.g. `rdChartPropertKey`) acts as an indirect pointer to
the `chartProperties` object which has dynamic keys. See [this
commit](00d9fd6#diff-0269df2be334787a8238014bd4dae87472c3adf1b5f8021a7a151fc464427c3fR33-R42)
for an example.~


Part of #88560


[^1]: There is another solution, since (1) and (2) can be handled
without any changes, we would just need slightly diff widgets for (3)
where it's mostly the same except it expects `eventId` to available via
URL params and it fetches the event to get the trace and then fetches
the group id

Author: billyvg

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}
+    />
+  );
+}