feat(aci): Add metric detector chart previews (#95011)

Author: scttcper

static/app/views/detectors/components/forms/editDetectorLayout.tsx

@@ -32,6 +32,7 @@ type EditDetectorLayoutProps = {
   detector: Detector;
   detectorType: EditableDetectorType;
   handleSubmit?: OnSubmitCallback;
+  previewChart?: React.ReactNode;
 };
 
 function DetectorBreadcrumbs({detector}: {detector: Detector}) {
@@ -55,6 +56,7 @@ function DetectorDocumentTitle({detector}: {detector: Detector}) {
 }
 
 export function EditDetectorLayout({
+  previewChart,
   detector,
   children,
   detectorType,
@@ -101,7 +103,10 @@ export function EditDetectorLayout({
         <StyledLayoutHeader>
           <Layout.HeaderContent>
             <DetectorBreadcrumbs detector={detector} />
-            <DetectorBaseFields />
+            <Flex direction="column" gap={space(2)}>
+              <DetectorBaseFields />
+              {previewChart}
+            </Flex>
           </Layout.HeaderContent>
           <EditDetectorActions detectorId={detector.id} />
         </StyledLayoutHeader>

static/app/views/detectors/components/forms/metric/metric.tsx

@@ -35,6 +35,7 @@ import {
   METRIC_DETECTOR_FORM_FIELDS,
   useMetricDetectorFormField,
 } from 'sentry/views/detectors/components/forms/metric/metricFormData';
+import {MetricDetectorPreviewChart} from 'sentry/views/detectors/components/forms/metric/previewChart';
 import {Visualize} from 'sentry/views/detectors/components/forms/metric/visualize';
 import {NewDetectorLayout} from 'sentry/views/detectors/components/forms/newDetectorLayout';
 import {SectionLabel} from 'sentry/views/detectors/components/forms/sectionLabel';
@@ -56,15 +57,22 @@ function MetricDetectorForm() {
 
 export function EditExistingMetricDetectorForm({detector}: {detector: Detector}) {
   return (
-    <EditDetectorLayout detector={detector} detectorType="metric_issue">
+    <EditDetectorLayout
+      detectorType="metric_issue"
+      detector={detector}
+      previewChart={<MetricDetectorPreviewChart />}
+    >
       <MetricDetectorForm />
     </EditDetectorLayout>
   );
 }
 
 export function NewMetricDetectorForm() {
   return (
-    <NewDetectorLayout detectorType="metric_issue">
+    <NewDetectorLayout
+      detectorType="metric_issue"
+      previewChart={<MetricDetectorPreviewChart />}
+    >
       <MetricDetectorForm />
     </NewDetectorLayout>
   );

static/app/views/detectors/components/forms/metric/previewChart.tsx

@@ -0,0 +1,92 @@
+import {useMemo} from 'react';
+import styled from '@emotion/styled';
+
+import {AreaChart} from 'sentry/components/charts/areaChart';
+import ErrorPanel from 'sentry/components/charts/errorPanel';
+import {Flex} from 'sentry/components/core/layout';
+import Placeholder from 'sentry/components/placeholder';
+import {IconWarning} from 'sentry/icons';
+import {t} from 'sentry/locale';
+import {useApiQuery} from 'sentry/utils/queryClient';
+import useOrganization from 'sentry/utils/useOrganization';
+import {
+  METRIC_DETECTOR_FORM_FIELDS,
+  useMetricDetectorFormField,
+} from 'sentry/views/detectors/components/forms/metric/metricFormData';
+import {getDatasetConfig} from 'sentry/views/detectors/datasetConfig/getDatasetConfig';
+import {DETECTOR_DATASET_TO_DISCOVER_DATASET_MAP} from 'sentry/views/detectors/datasetConfig/utils/discoverDatasetMap';
+
+const CHART_HEIGHT = 175;
+
+export function MetricDetectorPreviewChart() {
+  const organization = useOrganization();
+  const dataset = useMetricDetectorFormField(METRIC_DETECTOR_FORM_FIELDS.dataset);
+  const aggregate = useMetricDetectorFormField(
+    METRIC_DETECTOR_FORM_FIELDS.aggregateFunction
+  );
+  const interval = useMetricDetectorFormField(METRIC_DETECTOR_FORM_FIELDS.interval);
+  const query = useMetricDetectorFormField(METRIC_DETECTOR_FORM_FIELDS.query);
+  const environment = useMetricDetectorFormField(METRIC_DETECTOR_FORM_FIELDS.environment);
+  const projectId = useMetricDetectorFormField(METRIC_DETECTOR_FORM_FIELDS.projectId);
+
+  const datasetConfig = useMemo(() => getDatasetConfig(dataset), [dataset]);
+  const seriesQueryOptions = datasetConfig.getSeriesQueryOptions({
+    organization,
+    aggregate,
+    interval,
+    query,
+    environment,
+    projectId: Number(projectId),
+    dataset: DETECTOR_DATASET_TO_DISCOVER_DATASET_MAP[dataset],
+  });
+
+  const {data, isPending, isError} = useApiQuery<
+    Parameters<typeof datasetConfig.transformSeriesQueryData>[0]
+  >(seriesQueryOptions, {
+    // 5 minutes
+    staleTime: 5 * 60 * 1000,
+  });
+
+  const series = useMemo(() => {
+    // TypeScript can't infer that each dataset config expects its own specific response type
+    return datasetConfig.transformSeriesQueryData(data as any, aggregate);
+  }, [datasetConfig, data, aggregate]);
+
+  if (isPending) {
+    return (
+      <PreviewChartContainer>
+        <Placeholder height={`${CHART_HEIGHT}px`} />
+      </PreviewChartContainer>
+    );
+  }
+
+  if (isError) {
+    return (
+      <PreviewChartContainer>
+        <Flex style={{height: CHART_HEIGHT}} justify="center" align="center">
+          <ErrorPanel>
+            <IconWarning color="gray300" size="lg" />
+            <div>{t('Error loading chart data')}</div>
+          </ErrorPanel>
+        </Flex>
+      </PreviewChartContainer>
+    );
+  }
+
+  return (
+    <PreviewChartContainer>
+      <AreaChart
+        series={series}
+        height={CHART_HEIGHT}
+        stacked={false}
+        isGroupedByDate
+        showTimeInTooltip
+      />
+    </PreviewChartContainer>
+  );
+}
+
+const PreviewChartContainer = styled('div')`
+  max-width: 1440px;
+  border-top: 1px solid ${p => p.theme.border};
+`;

static/app/views/detectors/components/forms/metric/queryFilterBuilder.tsx

@@ -6,10 +6,7 @@ import {Tooltip} from 'sentry/components/core/tooltip';
 import FormContext from 'sentry/components/forms/formContext';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
-import {DiscoverDatasets} from 'sentry/utils/discover/types';
-import {unreachable} from 'sentry/utils/unreachable';
 import {
-  DetectorDataset,
   METRIC_DETECTOR_FORM_FIELDS,
   useMetricDetectorFormField,
 } from 'sentry/views/detectors/components/forms/metric/metricFormData';
@@ -18,24 +15,7 @@ import {
   SectionLabelSecondary,
 } from 'sentry/views/detectors/components/forms/sectionLabel';
 import {getDatasetConfig} from 'sentry/views/detectors/datasetConfig/getDatasetConfig';
-
-function getDiscoverDataset(dataset: DetectorDataset): DiscoverDatasets {
-  switch (dataset) {
-    case DetectorDataset.ERRORS:
-      return DiscoverDatasets.ERRORS;
-    case DetectorDataset.TRANSACTIONS:
-      return DiscoverDatasets.TRANSACTIONS;
-    case DetectorDataset.SPANS:
-      return DiscoverDatasets.SPANS_EAP;
-    case DetectorDataset.LOGS:
-      return DiscoverDatasets.OURLOGS;
-    case DetectorDataset.RELEASES:
-      return DiscoverDatasets.DISCOVER;
-    default:
-      unreachable(dataset);
-      return DiscoverDatasets.ERRORS;
-  }
-}
+import {DETECTOR_DATASET_TO_DISCOVER_DATASET_MAP} from 'sentry/views/detectors/datasetConfig/utils/discoverDatasetMap';
 
 export function DetectorQueryFilterBuilder() {
   const currentQuery = useMetricDetectorFormField(METRIC_DETECTOR_FORM_FIELDS.query);
@@ -76,7 +56,7 @@ export function DetectorQueryFilterBuilder() {
           projectIds={projectIds}
           onClose={handleQueryChange}
           onSearch={handleQueryChange}
-          dataset={getDiscoverDataset(dataset)}
+          dataset={DETECTOR_DATASET_TO_DISCOVER_DATASET_MAP[dataset]}
         />
       </QueryFieldRowWrapper>
     </Flex>

static/app/views/detectors/components/forms/newDetectorLayout.tsx

@@ -38,12 +38,14 @@ type NewDetectorLayoutProps = {
   detectorType: EditableDetectorType;
   handleSubmit?: OnSubmitCallback;
   initialFormData?: Partial<DetectorFormData>;
+  previewChart?: React.ReactNode;
 };
 
 export function NewDetectorLayout({
   children,
   handleSubmit,
   initialFormData,
+  previewChart,
   detectorType,
 }: NewDetectorLayoutProps) {
   const location = useLocation();
@@ -117,7 +119,10 @@ export function NewDetectorLayout({
                 },
               ]}
             />
-            <DetectorBaseFields />
+            <Flex direction="column" gap={space(2)}>
+              <DetectorBaseFields />
+              {previewChart}
+            </Flex>
           </Layout.HeaderContent>
         </StyledLayoutHeader>
         <Layout.Body>

static/app/views/detectors/datasetConfig/base.tsx

@@ -1,9 +1,11 @@
 import type {SelectValue} from 'sentry/types/core';
+import type {Series} from 'sentry/types/echarts';
 import type {TagCollection} from 'sentry/types/group';
 import type {Organization} from 'sentry/types/organization';
 import type {CustomMeasurementCollection} from 'sentry/utils/customMeasurements/customMeasurements';
 import type {QueryFieldValue} from 'sentry/utils/discover/fields';
 import type {DiscoverDatasets} from 'sentry/utils/discover/types';
+import type {ApiQueryKey} from 'sentry/utils/queryClient';
 import type {FieldValue} from 'sentry/views/discover/table/types';
 
 export interface DetectorSearchBarProps {
@@ -14,11 +16,30 @@ export interface DetectorSearchBarProps {
   dataset?: DiscoverDatasets;
 }
 
+export interface DetectorSeriesQueryOptions {
+  /**
+   * The aggregate to use for the series query. eg: `count()`
+   */
+  aggregate: string;
+  dataset: DiscoverDatasets;
+  environment: string;
+  /**
+   * example: `1h`
+   */
+  interval: number;
+  organization: Organization;
+  projectId: number;
+  /**
+   * The filter query. eg: `span.op:http`
+   */
+  query: string;
+}
+
 /**
  * Minimal configuration interface for detector dataset configs.
  * Contains only the properties actually used by the detectors form.
  */
-export interface DetectorDatasetConfig {
+export interface DetectorDatasetConfig<SeriesResponse> {
   /**
    * Dataset specific search bar for the 'Filter' step in the
    * widget builder.
@@ -36,4 +57,9 @@ export interface DetectorDatasetConfig {
     tags?: TagCollection,
     customMeasurements?: CustomMeasurementCollection
   ) => Record<string, SelectValue<FieldValue>>;
+  getSeriesQueryOptions: (options: DetectorSeriesQueryOptions) => ApiQueryKey;
+  transformSeriesQueryData: (
+    data: SeriesResponse | undefined,
+    aggregate: string
+  ) => Series[];
 }

static/app/views/detectors/datasetConfig/errors.tsx

@@ -1,10 +1,26 @@
+import type {EventsStats} from 'sentry/types/organization';
+import {DiscoverDatasets} from 'sentry/utils/discover/types';
 import {ErrorsConfig} from 'sentry/views/dashboards/datasetConfig/errors';
 import {EventsSearchBar} from 'sentry/views/detectors/datasetConfig/components/eventSearchBar';
+import {
+  getDiscoverSeriesQueryOptions,
+  transformEventsStatsToSeries,
+} from 'sentry/views/detectors/datasetConfig/utils/discoverSeries';
 
 import type {DetectorDatasetConfig} from './base';
 
-export const DetectorErrorsConfig: DetectorDatasetConfig = {
+type ErrorsSeriesResponse = EventsStats;
+
+export const DetectorErrorsConfig: DetectorDatasetConfig<ErrorsSeriesResponse> = {
   defaultField: ErrorsConfig.defaultField,
   getAggregateOptions: ErrorsConfig.getTableFieldOptions,
   SearchBar: EventsSearchBar,
+  getSeriesQueryOptions: options =>
+    getDiscoverSeriesQueryOptions({
+      ...options,
+      dataset: DiscoverDatasets.ERRORS,
+    }),
+  transformSeriesQueryData: (data, aggregate) => {
+    return [transformEventsStatsToSeries(data, aggregate)];
+  },
 };

static/app/views/detectors/datasetConfig/getDatasetConfig.tsx

@@ -1,26 +1,20 @@
-import {unreachable} from 'sentry/utils/unreachable';
 import {DetectorDataset} from 'sentry/views/detectors/components/forms/metric/metricFormData';
-import type {DetectorDatasetConfig} from 'sentry/views/detectors/datasetConfig/base';
 import {DetectorErrorsConfig} from 'sentry/views/detectors/datasetConfig/errors';
 import {DetectorLogsConfig} from 'sentry/views/detectors/datasetConfig/logs';
 import {DetectorReleasesConfig} from 'sentry/views/detectors/datasetConfig/releases';
 import {DetectorSpansConfig} from 'sentry/views/detectors/datasetConfig/spans';
 import {DetectorTransactionsConfig} from 'sentry/views/detectors/datasetConfig/transactions';
 
-export function getDatasetConfig(dataset: DetectorDataset): DetectorDatasetConfig {
-  switch (dataset) {
-    case DetectorDataset.ERRORS:
-      return DetectorErrorsConfig;
-    case DetectorDataset.TRANSACTIONS:
-      return DetectorTransactionsConfig;
-    case DetectorDataset.RELEASES:
-      return DetectorReleasesConfig;
-    case DetectorDataset.SPANS:
-      return DetectorSpansConfig;
-    case DetectorDataset.LOGS:
-      return DetectorLogsConfig;
-    default:
-      unreachable(dataset);
-      return DetectorErrorsConfig;
-  }
+const DATASET_CONFIG_MAP = {
+  [DetectorDataset.ERRORS]: DetectorErrorsConfig,
+  [DetectorDataset.TRANSACTIONS]: DetectorTransactionsConfig,
+  [DetectorDataset.RELEASES]: DetectorReleasesConfig,
+  [DetectorDataset.SPANS]: DetectorSpansConfig,
+  [DetectorDataset.LOGS]: DetectorLogsConfig,
+} as const satisfies Record<DetectorDataset, any>;
+
+export function getDatasetConfig<T extends DetectorDataset>(
+  dataset: T
+): (typeof DATASET_CONFIG_MAP)[T] {
+  return DATASET_CONFIG_MAP[dataset];
 }

static/app/views/detectors/datasetConfig/logs.tsx

@@ -1,10 +1,21 @@
+import type {EventsStats} from 'sentry/types/organization';
 import {LogsConfig} from 'sentry/views/dashboards/datasetConfig/logs';
 import {TraceSearchBar} from 'sentry/views/detectors/datasetConfig/components/traceSearchBar';
+import {
+  getDiscoverSeriesQueryOptions,
+  transformEventsStatsToSeries,
+} from 'sentry/views/detectors/datasetConfig/utils/discoverSeries';
 
 import type {DetectorDatasetConfig} from './base';
 
-export const DetectorLogsConfig: DetectorDatasetConfig = {
+type LogsSeriesRepsonse = EventsStats;
+
+export const DetectorLogsConfig: DetectorDatasetConfig<LogsSeriesRepsonse> = {
   defaultField: LogsConfig.defaultField,
   getAggregateOptions: LogsConfig.getTableFieldOptions,
   SearchBar: TraceSearchBar,
+  getSeriesQueryOptions: getDiscoverSeriesQueryOptions,
+  transformSeriesQueryData: (data, aggregate) => {
+    return [transformEventsStatsToSeries(data, aggregate)];
+  },
 };

static/app/views/detectors/datasetConfig/releases.tsx

@@ -1,10 +1,21 @@
+import type {SessionApiResponse} from 'sentry/types/organization';
 import {ReleasesConfig} from 'sentry/views/dashboards/datasetConfig/releases';
 import {ReleaseSearchBar} from 'sentry/views/detectors/datasetConfig/components/releaseSearchBar';
+import {
+  getReleasesSeriesQueryOptions,
+  transformMetricsResponseToSeries,
+} from 'sentry/views/detectors/datasetConfig/utils/releasesSeries';
 
 import type {DetectorDatasetConfig} from './base';
 
-export const DetectorReleasesConfig: DetectorDatasetConfig = {
+type ReleasesSeriesResponse = SessionApiResponse;
+
+export const DetectorReleasesConfig: DetectorDatasetConfig<ReleasesSeriesResponse> = {
   defaultField: ReleasesConfig.defaultField,
   getAggregateOptions: ReleasesConfig.getTableFieldOptions,
   SearchBar: ReleaseSearchBar,
+  getSeriesQueryOptions: getReleasesSeriesQueryOptions,
+  transformSeriesQueryData: (data, aggregate) => {
+    return [transformMetricsResponseToSeries(data, aggregate)];
+  },
 };