Graph logic for AI analytics page (getsentry#68296)

Adds time series graphs for prompt tokens and completion tokens

static/app/routes.tsx

@@ -1493,10 +1493,10 @@ function buildRoutes() {
   const aiAnalyticsRoutes = (
     <Route
       path="/ai-analytics/"
-      component={make(() => import('sentry/views/ai-analytics'))}
+      component={make(() => import('sentry/views/aiAnalytics'))}
       withOrgPath
     >
-      <IndexRoute component={make(() => import('sentry/views/ai-analytics/landing'))} />
+      <IndexRoute component={make(() => import('sentry/views/aiAnalytics/landing'))} />
     </Route>
   );
 

static/app/views/ai-analytics/index.tsx → static/app/views/aiAnalytics/index.tsx

@@ -9,7 +9,8 @@ import PageFiltersContainer from 'sentry/components/organizations/pageFilters/co
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import useOrganization from 'sentry/utils/useOrganization';
-import AiAnalyticsFilters from 'sentry/views/ai-analytics/filters';
+import AiAnalyticsFilters from 'sentry/views/aiAnalytics/filters';
+import TokenUsageChart from 'sentry/views/aiAnalytics/tokenUsageChart';
 
 function NoAccessComponent() {
   return (
@@ -35,6 +36,10 @@ function AiAnalyticsContainer() {
               <PageFiltersContainer>
                 <AiAnalyticsFilters onSearch={x => setSearch(x)} query={search} />
               </PageFiltersContainer>
+              <TwoColumns>
+                <TokenUsageChart metric="ai.prompt_tokens.used" />
+                <TokenUsageChart metric="ai.completion_tokens.used" />
+              </TwoColumns>
             </StyledMain>
           </StyledBody>
         </Layout.Page>
@@ -56,6 +61,11 @@ const StyledBody = styled('div')`
   grid-template-areas: 'content saved-searches';
 `;
 
+const TwoColumns = styled('div')`
+  display: flex;
+  gap: ${space(2)};
+`;
+
 const StyledMain = styled('section')`
   grid-area: content;
   padding: ${space(2)};

static/app/views/aiAnalytics/tokenUsageChart.tsx

@@ -0,0 +1,64 @@
+import styled from '@emotion/styled';
+
+import type {PageFilters} from 'sentry/types';
+import {MetricDisplayType} from 'sentry/utils/metrics/types';
+import {useMetricsQuery} from 'sentry/utils/metrics/useMetricsQuery';
+import withPageFilters from 'sentry/utils/withPageFilters';
+import {MetricChartContainer} from 'sentry/views/dashboards/metrics/chart';
+
+interface TokenUsageChartProps {
+  metric: 'ai.total_tokens.used' | 'ai.prompt_tokens.used' | 'ai.completion_tokens.used';
+  selection: PageFilters;
+  isGlobalSelectionReady?: boolean;
+}
+
+function TokenUsageChart({selection, metric}: TokenUsageChartProps) {
+  const {
+    data: timeseriesData,
+    isLoading,
+    isError,
+    error,
+  } = useMetricsQuery(
+    [
+      {
+        name: 'a',
+        mri: `c:custom/${metric}@tokens`,
+        op: 'sum',
+      },
+    ],
+    selection,
+    {
+      intervalLadder: 'dashboard',
+    }
+  );
+
+  if (isError) {
+    return <div>{'' + error}</div>;
+  }
+
+  return (
+    <TokenChartContainer>
+      <MetricChartContainer
+        timeseriesData={timeseriesData}
+        isLoading={isLoading}
+        metricQueries={[
+          {
+            name: 'mql',
+            formula: '$a',
+          },
+        ]}
+        displayType={MetricDisplayType.AREA}
+        chartHeight={200}
+      />
+    </TokenChartContainer>
+  );
+}
+
+const TokenChartContainer = styled('div')`
+  overflow: hidden;
+  border: 1px solid ${p => p.theme.border};
+  border-radius: ${p => p.theme.borderRadius};
+  flex: 1 1 content;
+`;
+
+export default withPageFilters(TokenUsageChart);