feat(aci): Register new metric detector chartcuterie chart in frontend (#101171)

Author: malwilley

static/app/chartcuterie/config.tsx

@@ -13,6 +13,7 @@ import {lightTheme} from 'sentry/utils/theme/theme';
 
 import {makeDiscoverCharts} from './discover';
 import {makeMetricAlertCharts} from './metricAlert';
+import {makeMetricDetectorCharts} from './metricDetector';
 import {makePerformanceCharts} from './performance';
 import type {
   ChartcuterieConfig,
@@ -42,6 +43,7 @@ const register = (renderDescriptor: RenderDescriptor<ChartType>) =>
 
 makeDiscoverCharts(lightTheme).forEach(register);
 makeMetricAlertCharts(lightTheme).forEach(register);
+makeMetricDetectorCharts(lightTheme).forEach(register);
 makePerformanceCharts(lightTheme).forEach(register);
 
 export default config;

static/app/chartcuterie/metricDetector.tsx

@@ -0,0 +1,129 @@
+import type {Theme} from '@emotion/react';
+import type {LineSeriesOption, YAXisComponentOption} from 'echarts';
+
+import type {AreaChartSeries} from 'sentry/components/charts/areaChart';
+import XAxis from 'sentry/components/charts/components/xAxis';
+import AreaSeries from 'sentry/components/charts/series/areaSeries';
+import type {SessionApiResponse} from 'sentry/types/organization';
+import {
+  getMetricDetectorChartOption,
+  transformSessionResponseToSeries,
+  type MetricDetectorChartData,
+} from 'sentry/views/detectors/components/details/metric/charts/metricDetectorChartOptions';
+
+import {DEFAULT_FONT_FAMILY, makeSlackChartDefaults, slackChartSize} from './slack';
+import type {RenderDescriptor} from './types';
+import {ChartType} from './types';
+
+function transformAreaSeries(series: AreaChartSeries[]): LineSeriesOption[] {
+  return series.map(({seriesName, data, ...otherSeriesProps}) => {
+    const areaSeries = AreaSeries({
+      name: seriesName,
+      data: data.map(({name, value}) => [name, value]),
+      lineStyle: {
+        opacity: 1,
+        width: 0.4,
+      },
+      areaStyle: {
+        opacity: 1.0,
+      },
+      animation: false,
+      animationThreshold: 1,
+      animationDuration: 0,
+      ...otherSeriesProps,
+    });
+
+    // Fix incident label font family, cannot use Rubik
+    if (areaSeries.markLine?.label) {
+      areaSeries.markLine.label.fontFamily = DEFAULT_FONT_FAMILY;
+    }
+
+    return areaSeries;
+  });
+}
+
+export function makeMetricDetectorCharts(
+  theme: Theme
+): Array<RenderDescriptor<ChartType>> {
+  const slackChartDefaults = makeSlackChartDefaults(theme);
+  const metricDetectorCharts: Array<RenderDescriptor<ChartType>> = [];
+
+  const metricDetectorXaxis = XAxis({
+    theme,
+    splitNumber: 3,
+    isGroupedByDate: true,
+    axisLabel: {fontSize: 11, fontFamily: DEFAULT_FONT_FAMILY},
+  });
+  const metricDetectorYaxis: YAXisComponentOption = {
+    axisLabel: {fontSize: 11, fontFamily: DEFAULT_FONT_FAMILY},
+    splitLine: {
+      lineStyle: {
+        color: theme.chartLineColor,
+        opacity: 0.3,
+      },
+    },
+  };
+
+  metricDetectorCharts.push({
+    key: ChartType.SLACK_METRIC_DETECTOR_EVENTS,
+    getOption: (data: MetricDetectorChartData) => {
+      const {chartOption} = getMetricDetectorChartOption(data, theme);
+
+      return {
+        ...chartOption,
+        backgroundColor: theme.background,
+        series: transformAreaSeries(chartOption.series),
+        xAxis: metricDetectorXaxis,
+        yAxis: {
+          ...chartOption.yAxis,
+          ...metricDetectorYaxis,
+          axisLabel: {
+            ...chartOption.yAxis!.axisLabel,
+            ...metricDetectorYaxis.axisLabel,
+          },
+        },
+        grid: slackChartDefaults.grid,
+      };
+    },
+    ...slackChartSize,
+  });
+
+  interface MetricDetectorSessionData
+    extends Omit<MetricDetectorChartData, 'timeseriesData'> {
+    sessionResponse: SessionApiResponse;
+  }
+
+  metricDetectorCharts.push({
+    key: ChartType.SLACK_METRIC_DETECTOR_SESSIONS,
+    getOption: (data: MetricDetectorSessionData) => {
+      const {sessionResponse, detector, ...rest} = data;
+      const {chartOption} = getMetricDetectorChartOption(
+        {
+          ...rest,
+          detector,
+          timeseriesData: transformSessionResponseToSeries(sessionResponse, detector),
+        },
+        theme
+      );
+
+      return {
+        ...chartOption,
+        backgroundColor: theme.background,
+        series: transformAreaSeries(chartOption.series),
+        xAxis: metricDetectorXaxis,
+        yAxis: {
+          ...chartOption.yAxis,
+          ...metricDetectorYaxis,
+          axisLabel: {
+            ...chartOption.yAxis!.axisLabel,
+            ...metricDetectorYaxis.axisLabel,
+          },
+        },
+        grid: slackChartDefaults.grid,
+      };
+    },
+    ...slackChartSize,
+  });
+
+  return metricDetectorCharts;
+}

static/app/chartcuterie/types.tsx

@@ -16,6 +16,8 @@ export enum ChartType {
   SLACK_DISCOVER_PREVIOUS_PERIOD = 'slack:discover.previousPeriod',
   SLACK_METRIC_ALERT_EVENTS = 'slack:metricAlert.events',
   SLACK_METRIC_ALERT_SESSIONS = 'slack:metricAlert.sessions',
+  SLACK_METRIC_DETECTOR_EVENTS = 'slack:metricDetector.events',
+  SLACK_METRIC_DETECTOR_SESSIONS = 'slack:metricDetector.sessions',
   SLACK_PERFORMANCE_ENDPOINT_REGRESSION = 'slack:performance.endpointRegression',
   SLACK_PERFORMANCE_FUNCTION_REGRESSION = 'slack:performance.functionRegression',
 }

static/app/types/workflowEngine/detectors.tsx

@@ -48,7 +48,7 @@ export interface SnubaQueryDataSource extends BaseDataSource {
     snubaQuery: SnubaQuery;
     status: number;
     subscription: string;
-  } | null;
+  };
   type: 'snuba_query_subscription';
 }