feat(alerts): on demand metric alert chart (#52962)

static/app/actionCreators/events.tsx

@@ -54,6 +54,7 @@ type Options = {
   start?: DateString;
   team?: Readonly<string | string[]>;
   topEvents?: number;
+  useOnDemandMetrics?: boolean;
   withoutZerofill?: boolean;
   yAxis?: string | string[];
 };
@@ -105,6 +106,7 @@ export const doEventsRequest = <IncludeAllArgsType extends boolean = false>(
     excludeOther,
     includeAllArgs,
     dataset,
+    useOnDemandMetrics,
   }: {includeAllArgs?: IncludeAllArgsType} & Options
 ): IncludeAllArgsType extends true
   ? Promise<
@@ -133,6 +135,7 @@ export const doEventsRequest = <IncludeAllArgsType extends boolean = false>(
       referrer: referrer ? referrer : 'api.organization-event-stats',
       excludeOther: excludeOther ? '1' : undefined,
       dataset,
+      useOnDemandMetrics,
     }).filter(([, value]) => typeof value !== 'undefined')
   );
 

static/app/components/charts/eventsRequest.tsx

@@ -209,6 +209,11 @@ type EventsRequestPartialProps = {
    * in the `results` child render function.
    */
   topEvents?: number;
+  /**
+   * Whether or not to use on demand metrics
+   * This is a temporary flag to allow us to test on demand metrics
+   */
+  useOnDemandMetrics?: boolean;
   /**
    * Whether or not to zerofill results
    */

static/app/views/alerts/rules/metric/create.spec.tsx

@@ -66,6 +66,7 @@ describe('Incident Rules Create', function () {
           statsPeriod: '10000m',
           yAxis: 'count()',
           referrer: 'api.organization-event-stats',
+          useOnDemandMetrics: false,
         },
       })
     );

static/app/views/alerts/rules/metric/details/body.tsx

@@ -21,6 +21,7 @@ import {RuleActionsCategories} from 'sentry/types/alerts';
 import MetricHistory from 'sentry/views/alerts/rules/metric/details/metricHistory';
 import {Dataset, MetricRule, TimePeriod} from 'sentry/views/alerts/rules/metric/types';
 import {extractEventTypeFilterFromRule} from 'sentry/views/alerts/rules/metric/utils/getEventTypeFilter';
+import {isOnDemandMetricAlert} from 'sentry/views/alerts/rules/metric/utils/onDemandMetricAlert';
 import {getAlertRuleActionCategory} from 'sentry/views/alerts/rules/utils';
 
 import {AlertRuleStatus, Incident} from '../../../types';
@@ -216,6 +217,7 @@ export default class DetailsBody extends Component<Props> {
               interval={this.getInterval()}
               query={isCrashFreeAlert(dataset) ? query : queryWithTypeFilter}
               filter={this.getFilter()}
+              isOnDemandMetricAlert={isOnDemandMetricAlert(dataset, query)}
             />
             <DetailWrapper>
               <ActivityWrapper>

static/app/views/alerts/rules/metric/details/metricChart.tsx

@@ -55,7 +55,6 @@ import {
   MetricRule,
   TimePeriod,
 } from 'sentry/views/alerts/rules/metric/types';
-import {isOnDemandMetricAlert} from 'sentry/views/alerts/rules/metric/utils/onDemandMetricAlert';
 import {getChangeStatus} from 'sentry/views/alerts/utils/getChangeStatus';
 import {AlertWizardAlertNames} from 'sentry/views/alerts/wizard/options';
 import {getAlertTypeFromAggregateDataset} from 'sentry/views/alerts/wizard/utils';
@@ -86,6 +85,7 @@ type Props = WithRouterProps & {
   rule: MetricRule;
   timePeriod: TimePeriodType;
   incidents?: Incident[];
+  isOnDemandMetricAlert?: boolean;
   selectedIncident?: Incident | null;
 };
 
@@ -466,8 +466,17 @@ class MetricChart extends PureComponent<Props, State> {
   }
 
   render() {
-    const {api, rule, organization, timePeriod, project, interval, query, location} =
-      this.props;
+    const {
+      api,
+      rule,
+      organization,
+      timePeriod,
+      project,
+      interval,
+      query,
+      location,
+      isOnDemandMetricAlert,
+    } = this.props;
     const {aggregate, timeWindow, environment, dataset} = rule;
 
     // Fix for 7 days * 1m interval being over the max number of results from events api
@@ -503,14 +512,6 @@ class MetricChart extends PureComponent<Props, State> {
       newAlertOrQuery: false,
     });
 
-    if (isOnDemandMetricAlert(rule.dataset, rule.query)) {
-      return this.renderEmpty(
-        t(
-          'This alert includes advanced conditions, which is a feature that is currently in early access. Charts are not yet supported at this time.'
-        )
-      );
-    }
-
     return isCrashFreeAlert(dataset) ? (
       <SessionsRequest
         api={api}
@@ -549,6 +550,7 @@ class MetricChart extends PureComponent<Props, State> {
         partial={false}
         queryExtras={queryExtras}
         referrer="api.alerts.alert-rule-chart"
+        useOnDemandMetrics={isOnDemandMetricAlert}
       >
         {({loading, timeseriesData, comparisonTimeseriesData}) =>
           this.renderChart(loading, timeseriesData, undefined, comparisonTimeseriesData)

static/app/views/alerts/rules/metric/triggers/chart/index.tsx

@@ -448,6 +448,7 @@ class TriggersChart extends PureComponent<Props, State> {
         partial={false}
         queryExtras={queryExtras}
         dataLoadedCallback={handleMEPAlertDataset}
+        useOnDemandMetrics={isOnDemandMetricAlert}
       >
         {({
           loading,