feat(agents-insights): traffic, duration, issues widgets

static/app/components/charts/chartWidgetLoader.tsx

@@ -165,6 +165,14 @@ const CHART_MAP = {
     ),
   overviewRequestsChartWidget: () =>
     import('sentry/views/insights/common/components/widgets/overviewRequestsChartWidget'),
+  overviewAgentsRunsChartWidget: () =>
+    import(
+      'sentry/views/insights/common/components/widgets/overviewAgentsRunsChartWidget'
+    ),
+  overviewAgentsDurationChartWidget: () =>
+    import(
+      'sentry/views/insights/common/components/widgets/overviewAgentsDurationChartWidget'
+    ),
 } satisfies Record<string, () => Promise<{default: React.FC<LoadableChartWidgetProps>}>>;
 
 /**

static/app/views/insights/agentMonitoring/utils/query.tsx

@@ -0,0 +1,7 @@
+// These are the span op we are currently ingesting.
+// They will probably change.
+const AI_PIPELINE_OPS = ['ai.pipeline.generateText', 'ai.pipeline.generateObject'];
+
+export const getAgentRunsFilter = () => {
+  return `span.op:[${AI_PIPELINE_OPS.join(',')}]`;
+};

static/app/views/insights/agentMonitoring/views/agentsOverviewPage.tsx

@@ -26,8 +26,11 @@ import * as ModuleLayout from 'sentry/views/insights/common/components/moduleLay
 import {ModulePageProviders} from 'sentry/views/insights/common/components/modulePageProviders';
 import {ModuleBodyUpsellHook} from 'sentry/views/insights/common/components/moduleUpsellHookWrapper';
 import {ToolRibbon} from 'sentry/views/insights/common/components/ribbon';
+import OverviewAgentsDurationChartWidget from 'sentry/views/insights/common/components/widgets/overviewAgentsDurationChartWidget';
+import OverviewAgentsRunsChartWidget from 'sentry/views/insights/common/components/widgets/overviewAgentsRunsChartWidget';
 import {useOnboardingProject} from 'sentry/views/insights/common/queries/useOnboardingProject';
 import {AgentsPageHeader} from 'sentry/views/insights/pages/agents/agentsPageHeader';
+import {IssuesWidget} from 'sentry/views/insights/pages/platform/shared/issuesWidget';
 import {WidgetGrid} from 'sentry/views/insights/pages/platform/shared/styles';
 import {useTransactionNameQuery} from 'sentry/views/insights/pages/platform/shared/useTransactionNameQuery';
 import {ModuleName} from 'sentry/views/insights/types';
@@ -76,13 +79,13 @@ function AgentsMonitoringPage() {
               <ModuleLayout.Full>
                 <WidgetGrid>
                   <WidgetGrid.Position1>
-                    <PlaceholderWidget title="Traffic" />
+                    <OverviewAgentsRunsChartWidget />
                   </WidgetGrid.Position1>
                   <WidgetGrid.Position2>
-                    <PlaceholderWidget title="Duration" />
+                    <OverviewAgentsDurationChartWidget />
                   </WidgetGrid.Position2>
                   <WidgetGrid.Position3>
-                    <PlaceholderWidget title="Issues" />
+                    <IssuesWidget />
                   </WidgetGrid.Position3>
                   <WidgetGrid.Position4>
                     <PlaceholderWidget title="LLM Generations" />

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

@@ -0,0 +1,17 @@
+import {t} from 'sentry/locale';
+import {getAgentRunsFilter} from 'sentry/views/insights/agentMonitoring/utils/query';
+import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types';
+import BaseLatencyWidget from 'sentry/views/insights/pages/platform/shared/baseLatencyWidget';
+
+export default function OverviewAgentsDurationChartWidget(
+  props: LoadableChartWidgetProps
+) {
+  return (
+    <BaseLatencyWidget
+      id="overviewAgentsDurationChartWidget"
+      title={t('Duration')}
+      baseQuery={getAgentRunsFilter()}
+      {...props}
+    />
+  );
+}

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

@@ -0,0 +1,16 @@
+import {t} from 'sentry/locale';
+import {getAgentRunsFilter} from 'sentry/views/insights/agentMonitoring/utils/query';
+import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types';
+import {BaseTrafficWidget} from 'sentry/views/insights/pages/platform/shared/baseTrafficWidget';
+
+export default function OverviewAgentsRunsChartWidget(props: LoadableChartWidgetProps) {
+  return (
+    <BaseTrafficWidget
+      id="overviewAgentsRunsChartWidget"
+      title={t('Traffic')}
+      trafficSeriesName={t('Runs')}
+      baseQuery={getAgentRunsFilter()}
+      {...props}
+    />
+  );
+}

static/app/views/insights/pages/platform/shared/baseLatencyWidget.tsx

@@ -0,0 +1,107 @@
+import {useMemo} from 'react';
+
+import {openInsightChartModal} from 'sentry/actionCreators/modal';
+import {t} from 'sentry/locale';
+import useOrganization from 'sentry/utils/useOrganization';
+import {Line} from 'sentry/views/dashboards/widgets/timeSeriesWidget/plottables/line';
+import {TimeSeriesWidgetVisualization} from 'sentry/views/dashboards/widgets/timeSeriesWidget/timeSeriesWidgetVisualization';
+import {Widget} from 'sentry/views/dashboards/widgets/widget/widget';
+import {Mode} from 'sentry/views/explore/contexts/pageParamsContext/mode';
+import {ChartType} from 'sentry/views/insights/common/components/chart';
+import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types';
+import {useEAPSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries';
+import {convertSeriesToTimeseries} from 'sentry/views/insights/common/utils/convertSeriesToTimeseries';
+import {Referrer} from 'sentry/views/insights/pages/platform/laravel/referrers';
+import {usePageFilterChartParams} from 'sentry/views/insights/pages/platform/laravel/utils';
+import {WidgetVisualizationStates} from 'sentry/views/insights/pages/platform/laravel/widgetVisualizationStates';
+import {useReleaseBubbleProps} from 'sentry/views/insights/pages/platform/shared/getReleaseBubbleProps';
+import {ModalChartContainer} from 'sentry/views/insights/pages/platform/shared/styles';
+import {Toolbar} from 'sentry/views/insights/pages/platform/shared/toolbar';
+import {useTransactionNameQuery} from 'sentry/views/insights/pages/platform/shared/useTransactionNameQuery';
+
+interface BaseLatencyWidgetProps extends LoadableChartWidgetProps {
+  title: string;
+  baseQuery?: string;
+}
+
+export default function BaseLatencyWidget({
+  title,
+  baseQuery,
+  ...props
+}: BaseLatencyWidgetProps) {
+  const organization = useOrganization();
+  const {query} = useTransactionNameQuery();
+  const pageFilterChartParams = usePageFilterChartParams({
+    pageFilters: props.pageFilters,
+  });
+  const releaseBubbleProps = useReleaseBubbleProps(props);
+
+  const fullQuery = `${baseQuery} ${query}`.trim();
+
+  const {data, isLoading, error} = useEAPSeries(
+    {
+      ...pageFilterChartParams,
+      search: fullQuery,
+      yAxis: ['avg(span.duration)', 'p95(span.duration)'],
+      referrer: Referrer.DURATION_CHART,
+    },
+    Referrer.DURATION_CHART,
+    props.pageFilters
+  );
+
+  const plottables = useMemo(() => {
+    return Object.keys(data).map(key => {
+      const series = data[key as keyof typeof data];
+      return new Line(convertSeriesToTimeseries(series));
+    });
+  }, [data]);
+
+  const isEmpty = plottables.every(plottable => plottable.isEmpty);
+
+  const visualization = (
+    <WidgetVisualizationStates
+      isLoading={isLoading}
+      error={error}
+      isEmpty={isEmpty}
+      VisualizationType={TimeSeriesWidgetVisualization}
+      visualizationProps={{
+        id: props.id,
+        plottables,
+        ...props,
+        ...releaseBubbleProps,
+      }}
+    />
+  );
+
+  return (
+    <Widget
+      Title={<Widget.WidgetTitle title={title} />}
+      Visualization={visualization}
+      Actions={
+        organization.features.includes('visibility-explore-view') &&
+        !isEmpty && (
+          <Toolbar
+            exploreParams={{
+              mode: Mode.SAMPLES,
+              visualize: [
+                {
+                  chartType: ChartType.LINE,
+                  yAxes: ['avg(span.duration)', 'p95(span.duration)'],
+                },
+              ],
+              query: fullQuery,
+              interval: pageFilterChartParams.interval,
+            }}
+            loaderSource={props.loaderSource}
+            onOpenFullScreen={() => {
+              openInsightChartModal({
+                title: t('API Latency'),
+                children: <ModalChartContainer>{visualization}</ModalChartContainer>,
+              });
+            }}
+          />
+        )
+      }
+    />
+  );
+}