feat(on-demand): conditionally show on-demand UI

static/app/components/modals/widgetViewerModal.tsx

@@ -42,10 +42,8 @@ import {
   isEquation,
   isEquationAlias,
 } from 'sentry/utils/discover/fields';
-import {
-  createOnDemandFilterWarning,
-  hasOnDemandMetricWidgetFeature,
-} from 'sentry/utils/onDemandMetrics';
+import {createOnDemandFilterWarning} from 'sentry/utils/onDemandMetrics';
+import {hasOnDemandMetricWidgetFeature} from 'sentry/utils/onDemandMetrics/features';
 import parseLinkHeader from 'sentry/utils/parseLinkHeader';
 import {MetricsCardinalityProvider} from 'sentry/utils/performance/contexts/metricsCardinality';
 import {MEPSettingProvider} from 'sentry/utils/performance/contexts/metricsEnhancedSetting';

static/app/utils/onDemandMetrics/features.tsx

@@ -0,0 +1,20 @@
+import {Organization} from 'sentry/types';
+
+export function hasOnDemandMetricAlertFeature(organization: Organization) {
+  return organization.features.includes('on-demand-metrics-extraction');
+}
+
+export function shouldShowOnDemandMetricAlertUI(organization: Organization) {
+  // we want to show the UI only for orgs that can create new on-demand metric alerts
+  return (
+    hasOnDemandMetricAlertFeature(organization) &&
+    organization.features.includes('on-demand-metrics-ui')
+  );
+}
+
+export function hasOnDemandMetricWidgetFeature(organization: Organization) {
+  return (
+    organization.features.includes('on-demand-metrics-extraction') &&
+    organization.features.includes('on-demand-metrics-extraction-experimental')
+  );
+}

static/app/utils/onDemandMetrics/index.tsx

@@ -6,7 +6,6 @@ import {
   Token,
   TokenResult,
 } from 'sentry/components/searchSyntax/parser';
-import {Organization} from 'sentry/types';
 import {AggregationKey, FieldKey, getFieldDefinition} from 'sentry/utils/fields';
 import {
   ON_DEMAND_METRICS_UNSUPPORTED_TAGS,
@@ -102,14 +101,3 @@ export function getOnDemandKeys(query: string): string[] {
   const searchFilterKeys = getSearchFilterKeys(query);
   return searchFilterKeys.filter(isOnDemandSearchKey);
 }
-
-export function hasOnDemandMetricAlertFeature(organization: Organization) {
-  return organization.features.includes('on-demand-metrics-extraction');
-}
-
-export function hasOnDemandMetricWidgetFeature(organization: Organization) {
-  return (
-    organization.features.includes('on-demand-metrics-extraction') &&
-    organization.features.includes('on-demand-metrics-extraction-experimental')
-  );
-}

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

@@ -19,6 +19,7 @@ import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Organization, Project} from 'sentry/types';
 import {RuleActionsCategories} from 'sentry/types/alerts';
+import {shouldShowOnDemandMetricAlertUI} from 'sentry/utils/onDemandMetrics/features';
 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';
@@ -151,7 +152,10 @@ export default function MetricDetailsBody({
   const isSnoozed = rule.snooze;
   const ruleActionCategory = getAlertRuleActionCategory(rule);
 
-  const isOnDemandAlert = isOnDemandMetricAlert(dataset, aggregate, query);
+  const showOnDemandMetricAlertUI =
+    isOnDemandMetricAlert(dataset, aggregate, query) &&
+    shouldShowOnDemandMetricAlertUI(organization);
+
   const showMigrationWarning =
     hasMigrationFeatureFlag(organization) && ruleNeedsMigration(rule);
 
@@ -228,7 +232,7 @@ export default function MetricDetailsBody({
             interval={getPeriodInterval()}
             query={isCrashFreeAlert(dataset) ? query : queryWithTypeFilter}
             filter={getFilter()}
-            isOnDemandAlert={isOnDemandAlert}
+            isOnDemandAlert={isOnDemandMetricAlert(dataset, aggregate, query)}
           />
           <DetailWrapper>
             <ActivityWrapper>
@@ -263,7 +267,10 @@ export default function MetricDetailsBody({
           </DetailWrapper>
         </Layout.Main>
         <Layout.Side>
-          <MetricDetailsSidebar rule={rule} isOnDemandMetricAlert={isOnDemandAlert} />
+          <MetricDetailsSidebar
+            rule={rule}
+            showOnDemandMetricAlertUI={showOnDemandMetricAlertUI}
+          />
         </Layout.Side>
       </Layout.Body>
     </Fragment>

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

@@ -45,6 +45,7 @@ import {ReactEchartsRef, Series} from 'sentry/types/echarts';
 import {getUtcDateString} from 'sentry/utils/dates';
 import {getDuration} from 'sentry/utils/formatters';
 import getDynamicText from 'sentry/utils/getDynamicText';
+import {shouldShowOnDemandMetricAlertUI} from 'sentry/utils/onDemandMetrics/features';
 import {MINUTES_THRESHOLD_TO_DISPLAY_SECONDS} from 'sentry/utils/sessions';
 import theme from 'sentry/utils/theme';
 import toArray from 'sentry/utils/toArray';
@@ -315,7 +316,8 @@ class MetricChart extends PureComponent<Props, State> {
       rule,
       incidents,
       selectedIncident,
-      isOnDemandMetricAlert: this.props.isOnDemandAlert,
+      showWaitingForData:
+        shouldShowOnDemandMetricAlertUI(organization) && this.props.isOnDemandAlert,
       handleIncidentClick,
     });
 
@@ -496,8 +498,17 @@ class MetricChart extends PureComponent<Props, State> {
     );
   }
 
-  renderEmptyOnDemandAlert(timeseriesData: Series[] = [], loading?: boolean) {
-    if (loading || !this.props.isOnDemandAlert || !isEmptySeries(timeseriesData[0])) {
+  renderEmptyOnDemandAlert(
+    organization: Organization,
+    timeseriesData: Series[] = [],
+    loading?: boolean
+  ) {
+    if (
+      loading ||
+      !this.props.isOnDemandAlert ||
+      !shouldShowOnDemandMetricAlertUI(organization) ||
+      !isEmptySeries(timeseriesData[0])
+    ) {
       return null;
     }
 
@@ -610,7 +621,7 @@ class MetricChart extends PureComponent<Props, State> {
       >
         {({loading, timeseriesData, comparisonTimeseriesData}) => (
           <Fragment>
-            {this.renderEmptyOnDemandAlert(timeseriesData, loading)}
+            {this.renderEmptyOnDemandAlert(organization, timeseriesData, loading)}
             {this.renderChart(
               loading,
               timeseriesData,

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

@@ -143,8 +143,8 @@ export type MetricChartData = {
   timeseriesData: Series[];
   handleIncidentClick?: (incident: Incident) => void;
   incidents?: Incident[];
-  isOnDemandMetricAlert?: boolean;
   selectedIncident?: Incident | null;
+  showWaitingForData?: boolean;
 };
 
 type MetricChartOption = {
@@ -161,7 +161,7 @@ export function getMetricAlertChartOption({
   incidents,
   selectedIncident,
   handleIncidentClick,
-  isOnDemandMetricAlert,
+  showWaitingForData,
 }: MetricChartData): MetricChartOption {
   const criticalTrigger = rule.triggers.find(
     ({label}) => label === AlertRuleTriggerType.CRITICAL
@@ -207,7 +207,7 @@ export function getMetricAlertChartOption({
     createStatusAreaSeries(theme.green300, firstPoint, lastPoint, minChartValue)
   );
 
-  if (isOnDemandMetricAlert) {
+  if (showWaitingForData) {
     const {startIndex, endIndex} = getWaitingForDataRange(dataArr);
     const startTime = new Date(dataArr[startIndex]?.name).getTime();
     const endTime = new Date(dataArr[endIndex]?.name).getTime();

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

@@ -28,8 +28,8 @@ import {AlertWizardAlertNames} from 'sentry/views/alerts/wizard/options';
 import {getAlertTypeFromAggregateDataset} from 'sentry/views/alerts/wizard/utils';
 
 interface MetricDetailsSidebarProps {
-  isOnDemandMetricAlert: boolean;
   rule: MetricRule;
+  showOnDemandMetricAlertUI: boolean;
 }
 
 function TriggerDescription({
@@ -123,7 +123,7 @@ function TriggerDescription({
 
 export function MetricDetailsSidebar({
   rule,
-  isOnDemandMetricAlert,
+  showOnDemandMetricAlertUI,
 }: MetricDetailsSidebarProps) {
   // get current status
   const latestIncident = rule.latestIncident;
@@ -184,7 +184,7 @@ export function MetricDetailsSidebar({
           />
         )}
       </SidebarGroup>
-      {isOnDemandMetricAlert && (
+      {showOnDemandMetricAlertUI && (
         <SidebarGroup>
           <Heading>{t('Filters Used')}</Heading>
           <KeyValueTable>

static/app/views/alerts/rules/metric/ruleConditionsForm.tsx

@@ -25,11 +25,8 @@ import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {Environment, Organization, Project, SelectValue} from 'sentry/types';
 import {getDisplayName} from 'sentry/utils/environment';
-import {
-  getOnDemandKeys,
-  hasOnDemandMetricAlertFeature,
-  isOnDemandQueryString,
-} from 'sentry/utils/onDemandMetrics';
+import {getOnDemandKeys, isOnDemandQueryString} from 'sentry/utils/onDemandMetrics';
+import {hasOnDemandMetricAlertFeature} from 'sentry/utils/onDemandMetrics/features';
 import withApi from 'sentry/utils/withApi';
 import withProjects from 'sentry/utils/withProjects';
 import WizardField from 'sentry/views/alerts/rules/metric/wizardField';

static/app/views/alerts/rules/metric/ruleForm.tsx

@@ -30,10 +30,11 @@ import {EventsStats, MultiSeriesEventsStats, Organization, Project} from 'sentry
 import {defined} from 'sentry/utils';
 import {metric, trackAnalytics} from 'sentry/utils/analytics';
 import type EventView from 'sentry/utils/discover/eventView';
+import {isOnDemandQueryString} from 'sentry/utils/onDemandMetrics';
 import {
   hasOnDemandMetricAlertFeature,
-  isOnDemandQueryString,
-} from 'sentry/utils/onDemandMetrics';
+  shouldShowOnDemandMetricAlertUI,
+} from 'sentry/utils/onDemandMetrics/features';
 import {normalizeUrl} from 'sentry/utils/withDomainRequired';
 import withProjects from 'sentry/utils/withProjects';
 import {IncompatibleAlertQuery} from 'sentry/views/alerts/rules/metric/incompatibleAlertQuery';
@@ -798,7 +799,9 @@ class RuleFormContainer extends DeprecatedAsyncComponent<Props, State> {
   handleTimeSeriesDataFetched = (data: EventsStats | MultiSeriesEventsStats | null) => {
     const {isExtrapolatedData} = data ?? {};
 
-    this.setState({isExtrapolatedChartData: Boolean(isExtrapolatedData)});
+    if (shouldShowOnDemandMetricAlertUI(this.props.organization)) {
+      this.setState({isExtrapolatedChartData: Boolean(isExtrapolatedData)});
+    }
 
     const {dataset, aggregate, query} = this.state;
     if (!isOnDemandMetricAlert(dataset, aggregate, query)) {
@@ -826,7 +829,7 @@ class RuleFormContainer extends DeprecatedAsyncComponent<Props, State> {
     const {ruleId, organization} = this.props;
     const hasMetricsFeatureFlags =
       organization.features.includes('mep-rollout-flag') ||
-      organization.features.includes('on-demand-metrics-extraction');
+      hasOnDemandMetricAlertFeature(organization);
 
     const isCreatingRule = !ruleId;
 

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

@@ -34,6 +34,7 @@ import type {
 } from 'sentry/types';
 import type {Series} from 'sentry/types/echarts';
 import type {DiscoverDatasets} from 'sentry/utils/discover/types';
+import {shouldShowOnDemandMetricAlertUI} from 'sentry/utils/onDemandMetrics/features';
 import {
   getCrashFreeRateSeries,
   MINUTES_THRESHOLD_TO_DISPLAY_SECONDS,
@@ -282,6 +283,7 @@ class TriggersChart extends PureComponent<Props, State> {
       timeWindow,
       aggregate,
       comparisonType,
+      organization,
     } = this.props;
     const {statsPeriod, totalCount} = this.state;
     const statsPeriodOptions = this.availableTimePeriods[timeWindow];
@@ -291,12 +293,13 @@ class TriggersChart extends PureComponent<Props, State> {
       ? errored || errorMessage
       : errored || errorMessage || !isQueryValid;
 
-    const isExtrapolatedChartData =
+    const showExtrapolatedChartData =
+      shouldShowOnDemandMetricAlertUI(organization) &&
       seriesAdditionalInfo?.[timeseriesData[0]?.seriesName]?.isExtrapolatedData;
 
     const totalCountLabel = isSessionAggregate(aggregate)
       ? SESSION_AGGREGATE_TO_HEADING[aggregate]
-      : isExtrapolatedChartData
+      : showExtrapolatedChartData
       ? t('Estimated Transactions')
       : t('Total Transactions');
 
@@ -327,7 +330,7 @@ class TriggersChart extends PureComponent<Props, State> {
             thresholdType={thresholdType}
             aggregate={aggregate}
             minutesThresholdToDisplaySeconds={minutesThresholdToDisplaySeconds}
-            isExtrapolatedData={isExtrapolatedChartData}
+            isExtrapolatedData={showExtrapolatedChartData}
           />
         )}
 

static/app/views/dashboards/widgetBuilder/buildSteps/filterResultsStep/index.tsx

@@ -16,9 +16,9 @@ import {space} from 'sentry/styles/space';
 import {Organization, PageFilters} from 'sentry/types';
 import {
   createOnDemandFilterWarning,
-  hasOnDemandMetricWidgetFeature,
   isOnDemandQueryString,
 } from 'sentry/utils/onDemandMetrics';
+import {hasOnDemandMetricWidgetFeature} from 'sentry/utils/onDemandMetrics/features';
 import {decodeList} from 'sentry/utils/queryString';
 import {ReleasesProvider} from 'sentry/utils/releases/releasesProvider';
 import {getDatasetConfig} from 'sentry/views/dashboards/datasetConfig/base';

static/app/views/dashboards/widgetBuilder/onDemandMetricWidget/utils.tsx

@@ -1,9 +1,7 @@
 import {Organization} from 'sentry/types';
 import {AggregationKey} from 'sentry/utils/fields';
-import {
-  hasOnDemandMetricWidgetFeature,
-  isOnDemandQueryString,
-} from 'sentry/utils/onDemandMetrics';
+import {isOnDemandQueryString} from 'sentry/utils/onDemandMetrics';
+import {hasOnDemandMetricWidgetFeature} from 'sentry/utils/onDemandMetrics/features';
 import {Widget, WidgetType} from 'sentry/views/dashboards/types';
 
 /**