add in banners and warnings for old alerts UI

nikkikapadia · nikkikapadia · commit 392ff418c499 · 2025-11-27T14:06:38.000-05:00
diff --git a/static/app/views/alerts/rules/metric/details/body.tsx b/static/app/views/alerts/rules/metric/details/body.tsx
@@ -21,13 +21,15 @@ import {shouldShowOnDemandMetricAlertUI} from 'sentry/utils/onDemandMetrics/feat
 import {useLocation} from 'sentry/utils/useLocation';
 import {useNavigate} from 'sentry/utils/useNavigate';
 import useOrganization from 'sentry/utils/useOrganization';
+import {makeAlertsPathname} from 'sentry/views/alerts/pathnames';
 import AnomalyDetectionFeedbackBanner from 'sentry/views/alerts/rules/metric/details/anomalyDetectionFeedbackBanner';
 import {ErrorMigrationWarning} from 'sentry/views/alerts/rules/metric/details/errorMigrationWarning';
 import MetricHistory from 'sentry/views/alerts/rules/metric/details/metricHistory';
 import type {MetricRule} from 'sentry/views/alerts/rules/metric/types';
 import {
   AlertRuleComparisonType,
   Dataset,
+  ExtrapolationMode,
   TimePeriod,
 } from 'sentry/views/alerts/rules/metric/types';
 import {extractEventTypeFilterFromRule} from 'sentry/views/alerts/rules/metric/utils/getEventTypeFilter';
@@ -69,10 +71,6 @@ export default function MetricDetailsBody({
   const organization = useOrganization();
   const location = useLocation();
   const navigate = useNavigate();
-  const [showTransactionsDeprecationAlert, setShowTransactionsDeprecationAlert] =
-    useState(
-      organization.features.includes('performance-transaction-deprecation-banner')
-    );
 
   const handleTimePeriodChange = (datetime: ChangeData) => {
     const {start, end, relative} = datetime;
@@ -146,6 +144,13 @@ export default function MetricDetailsBody({
   const deprecateTransactionsAlertsWarning =
     ruleType && DEPRECATED_TRANSACTION_ALERTS.includes(ruleType);
 
+  const showExtrapolationModeWarning = !!(
+    rule.dataset === Dataset.EVENTS_ANALYTICS_PLATFORM &&
+    rule.extrapolationMode &&
+    (rule.extrapolationMode === ExtrapolationMode.SERVER_WEIGHTED ||
+      rule.extrapolationMode === ExtrapolationMode.NONE)
+  );
+
   return (
     <Fragment>
       {selectedIncident?.alertRule.status === AlertRuleStatus.SNAPSHOT && (
@@ -173,33 +178,12 @@ export default function MetricDetailsBody({
               )}
             </Alert.Container>
           )}
-          {deprecateTransactionsAlertsWarning && showTransactionsDeprecationAlert && (
-            <Alert.Container>
-              <Alert
-                type="warning"
-                trailingItems={
-                  <StyledCloseButton
-                    icon={<IconClose size="sm" />}
-                    aria-label={t('Close')}
-                    onClick={() => {
-                      setShowTransactionsDeprecationAlert(false);
-                    }}
-                    size="zero"
-                    borderless
-                  />
-                }
-              >
-                {tctCode(
-                  'The transaction dataset is being deprecated. Please use Span alerts instead. Spans are a superset of transactions, you can isolate transactions by using the [code:is_transaction:true] filter. Please read these [FAQLink:FAQs] for more information.',
-                  {
-                    FAQLink: (
-                      <ExternalLink href="https://sentry.zendesk.com/hc/en-us/articles/40366087871515-FAQ-Transactions-Spans-Migration" />
-                    ),
-                  }
-                )}
-              </Alert>
-            </Alert.Container>
-          )}
+          <TransactionsDeprecationAlert isEnabled={deprecateTransactionsAlertsWarning} />
+          <MigratedAlertWarning
+            isEnabled={showExtrapolationModeWarning}
+            rule={rule}
+            project={project}
+          />
           <StyledSubHeader>
             <StyledTimeRangeSelector
               relative={timePeriod.period ?? ''}
@@ -301,6 +285,79 @@ export default function MetricDetailsBody({
   );
 }
 
+function TransactionsDeprecationAlert({isEnabled}: {isEnabled: boolean}) {
+  const organization = useOrganization();
+  const [showTransactionsDeprecationAlert, setShowTransactionsDeprecationAlert] =
+    useState(
+      organization.features.includes('performance-transaction-deprecation-banner')
+    );
+
+  if (isEnabled && showTransactionsDeprecationAlert) {
+    return (
+      <Alert.Container>
+        <Alert
+          type="warning"
+          trailingItems={
+            <StyledCloseButton
+              icon={<IconClose size="sm" />}
+              aria-label={t('Close')}
+              onClick={() => {
+                setShowTransactionsDeprecationAlert(false);
+              }}
+              size="zero"
+              borderless
+            />
+          }
+        >
+          {tctCode(
+            'The transaction dataset is being deprecated. Please use Span alerts instead. Spans are a superset of transactions, you can isolate transactions by using the [code:is_transaction:true] filter. Please read these [FAQLink:FAQs] for more information.',
+            {
+              FAQLink: (
+                <ExternalLink href="https://sentry.zendesk.com/hc/en-us/articles/40366087871515-FAQ-Transactions-Spans-Migration" />
+              ),
+            }
+          )}
+        </Alert>
+      </Alert.Container>
+    );
+  }
+  return null;
+}
+
+function MigratedAlertWarning({
+  isEnabled,
+  rule,
+  project,
+}: {
+  isEnabled: boolean;
+  rule: MetricRule;
+  project?: Project;
+}) {
+  const organization = useOrganization();
+  const editLink = rule
+    ? makeAlertsPathname({
+        path: `/metric-rules/${project?.slug ?? rule?.projects?.[0]}/${rule.id}/`,
+        organization,
+      })
+    : '#';
+
+  if (isEnabled) {
+    return (
+      <Alert.Container>
+        <Alert type="warning">
+          {tctCode(
+            'This alert has been migrated from a transaction-based alert to a span-based alert. We have set a different extrapolation mode to mimic the previous alert behavior but this mode will be deprecated. Please [editLink:edit] the thresholds to match the regular extrapolation mode.',
+            {
+              editLink: <Link to={editLink} />,
+            }
+          )}
+        </Alert>
+      </Alert.Container>
+    );
+  }
+  return null;
+}
+
 const DetailWrapper = styled('div')`
   display: flex;
   flex: 1;
diff --git a/static/app/views/alerts/rules/metric/ruleConditionsForm.tsx b/static/app/views/alerts/rules/metric/ruleConditionsForm.tsx
@@ -3,6 +3,8 @@ import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 import omit from 'lodash/omit';
 
+import {Button} from '@sentry/scraps/button/button';
+
 import {addErrorMessage} from 'sentry/actionCreators/indicator';
 import {fetchTagValues} from 'sentry/actionCreators/tags';
 import type {Client} from 'sentry/api';
@@ -83,8 +85,13 @@ import {
   DEFAULT_TRANSACTION_AGGREGATE,
   getTimeWindowOptions,
 } from './constants';
-import type {EventTypes} from './types';
-import {AlertRuleComparisonType, Dataset, Datasource} from './types';
+import {
+  AlertRuleComparisonType,
+  Dataset,
+  Datasource,
+  ExtrapolationMode,
+  type EventTypes,
+} from './types';
 
 type Props = {
   aggregate: string;
@@ -109,6 +116,7 @@ type Props = {
   allowChangeEventTypes?: boolean;
   comparisonDelta?: number;
   disableProjectSelector?: boolean;
+  extrapolationMode?: ExtrapolationMode;
   isErrorMigration?: boolean;
   isExtrapolatedChartData?: boolean;
   isLowConfidenceChartData?: boolean;
@@ -554,6 +562,7 @@ class RuleConditionsForm extends PureComponent<Props, State> {
       isLowConfidenceChartData,
       isOnDemandLimitReached,
       eventTypes,
+      extrapolationMode,
     } = this.props;
 
     const {environments, filterKeys} = this.state;
@@ -574,6 +583,13 @@ class RuleConditionsForm extends PureComponent<Props, State> {
       organization.features.includes('performance-transaction-deprecation-banner') &&
       DEPRECATED_TRANSACTION_ALERTS.includes(alertType);
 
+    const showExtrapolationModeChangeWarning = !!(
+      dataset === Dataset.EVENTS_ANALYTICS_PLATFORM &&
+      extrapolationMode &&
+      (extrapolationMode === ExtrapolationMode.SERVER_WEIGHTED ||
+        extrapolationMode === ExtrapolationMode.NONE)
+    );
+
     return (
       <Fragment>
         {deprecateTransactionsAlertsWarning && (
@@ -590,6 +606,29 @@ class RuleConditionsForm extends PureComponent<Props, State> {
             </Alert>
           </Alert.Container>
         )}
+        {showExtrapolationModeChangeWarning && (
+          <Alert.Container>
+            <Alert type="info">
+              {tct(
+                'This chart may look different from the alert details chart. This is expected as the extrapolation mode has been changed. Once the alert has been saved, your alert will be switched to use the extrapolation mode represented here. To be alerted correctly, please edit your [thresholdsLink:thresholds]. For more information, check out this FAQ!',
+                {
+                  thresholdsLink: (
+                    <Button
+                      priority="link"
+                      aria-label="Go to thresholds"
+                      onClick={() => {
+                        document
+                          .getElementById('thresholds-warning-icon')
+                          ?.scrollIntoView({behavior: 'smooth'});
+                      }}
+                    />
+                  ),
+                }
+              )}
+            </Alert>
+          </Alert.Container>
+        )}
+
         <ChartPanel>
           <StyledPanelBody>{this.props.thresholdChart}</StyledPanelBody>
         </ChartPanel>
diff --git a/static/app/views/alerts/rules/metric/ruleForm.tsx b/static/app/views/alerts/rules/metric/ruleForm.tsx
@@ -3,6 +3,8 @@ import type {Theme} from '@emotion/react';
 import styled from '@emotion/styled';
 import * as Sentry from '@sentry/react';
 
+import {Tooltip} from '@sentry/scraps/tooltip/tooltip';
+
 import type {Indicator} from 'sentry/actionCreators/indicator';
 import {
   addErrorMessage,
@@ -23,8 +25,10 @@ import FormModel from 'sentry/components/forms/model';
 import * as Layout from 'sentry/components/layouts/thirds';
 import List from 'sentry/components/list';
 import ListItem from 'sentry/components/list/listItem';
+import {IconWarning} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
 import IndicatorStore from 'sentry/stores/indicatorStore';
+import {pulse} from 'sentry/styles/animations';
 import {space} from 'sentry/styles/space';
 import type {PlainRoute, RouteComponentProps} from 'sentry/types/legacyReactRouter';
 import type {
@@ -87,22 +91,20 @@ import {
   getTimeWindowOptions,
 } from './constants';
 import RuleConditionsForm from './ruleConditionsForm';
-import type {
-  EventTypes,
-  ExtrapolationMode,
-  MetricActionTemplate,
-  MetricRule,
-  Trigger,
-  UnsavedMetricRule,
-} from './types';
 import {
   AlertRuleComparisonType,
   AlertRuleSeasonality,
   AlertRuleSensitivity,
   AlertRuleThresholdType,
   AlertRuleTriggerType,
   Dataset,
+  ExtrapolationMode,
   TimeWindow,
+  type EventTypes,
+  type MetricActionTemplate,
+  type MetricRule,
+  type Trigger,
+  type UnsavedMetricRule,
 } from './types';
 
 const POLLING_MAX_TIME_LIMIT = 3 * 60000;
@@ -1320,6 +1322,7 @@ class RuleFormContainer extends DeprecatedAsyncComponent<Props, State> {
       alertType,
       isExtrapolatedChartData,
       triggersHaveChanged,
+      extrapolationMode,
     } = this.state;
 
     const wizardBuilderChart = this.renderTriggerChart();
@@ -1374,6 +1377,13 @@ class RuleFormContainer extends DeprecatedAsyncComponent<Props, State> {
     const showErrorMigrationWarning =
       !!ruleId && isMigration && ruleNeedsErrorMigration(rule);
 
+    const showExtrapolationModeChangeWarning = !!(
+      dataset === Dataset.EVENTS_ANALYTICS_PLATFORM &&
+      extrapolationMode &&
+      (extrapolationMode === ExtrapolationMode.SERVER_WEIGHTED ||
+        extrapolationMode === ExtrapolationMode.NONE)
+    );
+
     // Rendering the main form body
     return (
       <Main width="full">
@@ -1471,8 +1481,24 @@ class RuleFormContainer extends DeprecatedAsyncComponent<Props, State> {
                     thresholdChart={wizardBuilderChart}
                     timeWindow={timeWindow}
                     eventTypes={eventTypes}
+                    extrapolationMode={extrapolationMode}
                   />
-                  <AlertListItem>{t('Set thresholds')}</AlertListItem>
+
+                  <AlertListItem>
+                    {
+                      <HeadingContainer>
+                        {t('Set thresholds')}
+                        {showExtrapolationModeChangeWarning && (
+                          <WarningIcon
+                            title={t(
+                              'Your thresholds may need to be adjusted after the change in extrapolation mode'
+                            )}
+                            id="thresholds-warning-icon"
+                          />
+                        )}
+                      </HeadingContainer>
+                    }
+                  </AlertListItem>
                   {thresholdTypeForm(formDisabled)}
                   {showErrorMigrationWarning && (
                     <Alert.Container>
@@ -1527,6 +1553,14 @@ function getTimeWindowFromDataset(
   return defaultWindow;
 }
 
+function WarningIcon({title, id}: {id: string; title: ReactNode}) {
+  return (
+    <Tooltip title={title} skipWrapper>
+      <StyledIconWarning id={id} size="md" color="warning" />
+    </Tooltip>
+  );
+}
+
 const Main = styled(Layout.Main)`
   max-width: 1000px;
 `;
@@ -1563,4 +1597,14 @@ const Aggregate = styled('span')`
   margin-right: ${space(1)};
 `;
 
+const HeadingContainer = styled('div')`
+  display: flex;
+  align-items: center;
+  gap: ${p => p.theme.space.sm};
+`;
+
+const StyledIconWarning = styled(IconWarning)`
+  animation: ${() => pulse(1.15)} 1s ease infinite;
+`;
+
 export default withProjects(RuleFormContainer);
