ref(insights): Refactor Insights -> LLM charts

Refactors the Insights -> LLM charts to better support deep linking in a
future PR.

Notable in this PR is the introduction of 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.

Part of #88560

Author: billyvg

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

@@ -5,12 +5,10 @@ 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 LlmNumberOfPipelinesChartWidget from 'sentry/views/insights/common/components/widgets/llmNumberOfPipelinesChartWidget';
+import LlmTotalTokensUsedChart from 'sentry/views/insights/common/components/widgets/llmTotalTokensUsedChartWidget';
 import {useSpansIndexed} from 'sentry/views/insights/common/queries/useDiscover';
 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';
@@ -53,10 +51,12 @@ export default function LLMMonitoringSection({event}: Props) {
       {aiPipelineGroup ? (
         <ModuleLayout.Layout>
           <ModuleLayout.Half>
-            <TotalTokensUsedChart groupId={aiPipelineGroup} />
+            <LlmTotalTokensUsedChart chartProperties={{groupId: aiPipelineGroup}} />
           </ModuleLayout.Half>
           <ModuleLayout.Half>
-            <NumberOfPipelinesChart groupId={aiPipelineGroup} />
+            <LlmNumberOfPipelinesChartWidget
+              chartProperties={{groupId: aiPipelineGroup}}
+            />
           </ModuleLayout.Half>
         </ModuleLayout.Layout>
       ) : (

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

@@ -36,7 +36,8 @@ import {INGESTION_DELAY} from 'sentry/views/insights/settings';
 
 export interface InsightsTimeSeriesWidgetProps
   extends WidgetTitleProps,
-    LoadableChartWidgetProps {
+    Omit<LoadableChartWidgetProps, 'chartProperties'>,
+    Partial<Pick<LoadableChartWidgetProps, 'chartProperties'>> {
   error: Error | null;
   isLoading: boolean;
   series: DiscoverSeries[];

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

@@ -0,0 +1,39 @@
+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<{groupId?: string}>
+) {
+  const theme = useTheme();
+  const aggregate = 'count()';
+
+  let query = 'span.category:"ai.pipeline"';
+  if (props.chartProperties?.groupId) {
+    query = `${query} span.group:"${props.chartProperties?.groupId}"`;
+  }
+  const {data, isPending, error} = useSpanMetricsSeries(
+    {
+      yAxis: [aggregate],
+      search: new MutableSearch(query),
+      transformAliasToInputFormat: true,
+    },
+    'api.ai-pipelines.view'
+  );
+
+  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}
+    />
+  );
+}

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

@@ -0,0 +1,39 @@
+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 LlmPipelineDurationChartWidget(
+  props: LoadableChartWidgetProps<{groupId?: string}>
+) {
+  const theme = useTheme();
+  const aggregate = 'avg(span.duration)';
+
+  let query = 'span.category:"ai.pipeline"';
+  if (props.chartProperties?.groupId) {
+    query = `${query} span.group:"${props.chartProperties?.groupId}"`;
+  }
+  const {data, isPending, error} = useSpanMetricsSeries(
+    {
+      yAxis: [aggregate],
+      search: new MutableSearch(query),
+      transformAliasToInputFormat: true,
+    },
+    'api.ai-pipelines.view'
+  );
+
+  const colors = theme.chart.getColorPalette(2);
+  return (
+    <InsightsLineChartWidget
+      {...props}
+      id="llmPipelineDurationChartWidget"
+      title={t('Pipeline Duration')}
+      series={[{...data[aggregate], color: colors[2]}]}
+      isLoading={isPending}
+      error={error}
+    />
+  );
+}

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

@@ -0,0 +1,39 @@
+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 LlmTotalTokensUsedChartWidget(
+  props: LoadableChartWidgetProps<{groupId?: string}>
+) {
+  const theme = useTheme();
+  const aggregate = 'sum(ai.total_tokens.used)';
+
+  let query = 'span.category:"ai"';
+  if (props.chartProperties?.groupId) {
+    query = `${query} span.ai.pipeline.group:"${props.chartProperties.groupId}"`;
+  }
+  const {data, isPending, error} = useSpanMetricsSeries(
+    {
+      yAxis: [aggregate],
+      search: new MutableSearch(query),
+      transformAliasToInputFormat: true,
+    },
+    'api.ai-pipelines.view'
+  );
+
+  const colors = theme.chart.getColorPalette(2);
+  return (
+    <InsightsLineChartWidget
+      {...props}
+      id="llmTotalTokensUsedChart"
+      title={t('Total tokens used')}
+      series={[{...data[aggregate], color: colors[0]}]}
+      isLoading={isPending}
+      error={error}
+    />
+  );
+}

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

@@ -4,10 +4,20 @@ import type {PageFilters} from 'sentry/types/core';
  * These props are common across components that are required to dynamically
  * render an Insight Chart Widget
  */
-export interface LoadableChartWidgetProps {
-  // TODO(billy): This should be required when all chart widgets are converted
+export interface LoadableChartWidgetProps<T = Record<string, string> | undefined> {
+  /**
+   * Additional chart-specific properties that are required to render the
+   * chart. `chartProperties` should be of type Record<string, string> as it
+   * will be appended to the URL as query parameters so that the chart can be
+   * linked.
+   */
+
+  chartProperties?: T;
+
   /**
    * Unique ID for the widget
+   *
+   * TODO(billy): This should be required when all chart widgets are converted
    */
   id?: string;
 

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

@@ -16,12 +16,10 @@ import {ModulePageFilterBar} from 'sentry/views/insights/common/components/modul
 import {ModulePageProviders} from 'sentry/views/insights/common/components/modulePageProviders';
 import {ModuleBodyUpsellHook} from 'sentry/views/insights/common/components/moduleUpsellHookWrapper';
 import {ReadoutRibbon, ToolRibbon} from 'sentry/views/insights/common/components/ribbon';
+import LlmNumberOfPipelinesChartWidget from 'sentry/views/insights/common/components/widgets/llmNumberOfPipelinesChartWidget';
+import LlmPipelineDurationChartWidget from 'sentry/views/insights/common/components/widgets/llmPipelineDurationChartWidget';
+import LlmTotalTokensUsedChartWidget from 'sentry/views/insights/common/components/widgets/llmTotalTokensUsedChartWidget';
 import {useSpanMetrics} from 'sentry/views/insights/common/queries/useDiscover';
-import {
-  NumberOfPipelinesChart,
-  PipelineDurationChart,
-  TotalTokensUsedChart,
-} from 'sentry/views/insights/llmMonitoring/components/charts/llmMonitoringCharts';
 import {PipelineSpansTable} from 'sentry/views/insights/llmMonitoring/components/tables/pipelineSpansTable';
 import {RELEASE_LEVEL} from 'sentry/views/insights/llmMonitoring/settings';
 import {AiHeader} from 'sentry/views/insights/pages/ai/aiPageHeader';
@@ -148,13 +146,13 @@ function LLMMonitoringPage({params}: Props) {
                   </HeaderContainer>
                 </ModuleLayout.Full>
                 <ModuleLayout.Third>
-                  <TotalTokensUsedChart groupId={groupId} />
+                  <LlmTotalTokensUsedChartWidget chartProperties={{groupId}} />
                 </ModuleLayout.Third>
                 <ModuleLayout.Third>
-                  <NumberOfPipelinesChart groupId={groupId} />
+                  <LlmNumberOfPipelinesChartWidget chartProperties={{groupId}} />
                 </ModuleLayout.Third>
                 <ModuleLayout.Third>
-                  <PipelineDurationChart groupId={groupId} />
+                  <LlmPipelineDurationChartWidget chartProperties={{groupId}} />
                 </ModuleLayout.Third>
                 <ModuleLayout.Full>
                   <PipelineSpansTable groupId={groupId} />

static/app/views/insights/llmMonitoring/views/llmMonitoringDetailsPage.tsx

@@ -4,11 +4,9 @@ import {ModulePageFilterBar} from 'sentry/views/insights/common/components/modul
 import {ModulePageProviders} from 'sentry/views/insights/common/components/modulePageProviders';
 import {ModulesOnboarding} from 'sentry/views/insights/common/components/modulesOnboarding';
 import {ModuleBodyUpsellHook} from 'sentry/views/insights/common/components/moduleUpsellHookWrapper';
-import {
-  NumberOfPipelinesChart,
-  PipelineDurationChart,
-  TotalTokensUsedChart,
-} from 'sentry/views/insights/llmMonitoring/components/charts/llmMonitoringCharts';
+import LlmNumberOfPipelinesChartWidget from 'sentry/views/insights/common/components/widgets/llmNumberOfPipelinesChartWidget';
+import LlmPipelineDurationChartWidget from 'sentry/views/insights/common/components/widgets/llmPipelineDurationChartWidget';
+import LlmTotalTokensUsedChart from 'sentry/views/insights/common/components/widgets/llmTotalTokensUsedChartWidget';
 import {PipelinesTable} from 'sentry/views/insights/llmMonitoring/components/tables/pipelinesTable';
 import {AiHeader} from 'sentry/views/insights/pages/ai/aiPageHeader';
 import {ModuleName} from 'sentry/views/insights/types';
@@ -26,13 +24,13 @@ function LLMMonitoringPage() {
               </ModuleLayout.Full>
               <ModulesOnboarding moduleName={ModuleName.AI}>
                 <ModuleLayout.Third>
-                  <TotalTokensUsedChart />
+                  <LlmTotalTokensUsedChart />
                 </ModuleLayout.Third>
                 <ModuleLayout.Third>
-                  <NumberOfPipelinesChart />
+                  <LlmNumberOfPipelinesChartWidget />
                 </ModuleLayout.Third>
                 <ModuleLayout.Third>
-                  <PipelineDurationChart />
+                  <LlmPipelineDurationChartWidget />
                 </ModuleLayout.Third>
                 <ModuleLayout.Full>
                   <PipelinesTable />