feat: Add Activated Alert Rules to alert rule index (#69124)

Duplicates the AlertRuleRow component to enable Activated Alert Rule
rows.

<img width="1418" alt="Screenshot 2024-04-17 at 11 24 44 AM"
src="https://github.com/getsentry/sentry/assets/6186377/3d07f663-84a2-412c-bc98-602b794b15cc">

Moves Alert Badge next to the rule status
Introduces a new "active state" to determine whether we are "ready to
monitor" or "actively monitoring" states
cleans up the status logic

fixtures/js-stubs/metricRule.ts

@@ -7,6 +7,7 @@ export function MetricRuleFixture(
  params: Partial<SavedMetricRule> = {}
 ): SavedMetricRule {
  return {
+ activations: [],
  status: 0,
  dateCreated: '2019-07-31T23:02:02.731Z',
  dataset: Dataset.ERRORS,

static/app/components/badge/alertBadge.tsx

@@ -1,14 +1,25 @@
 import styled from '@emotion/styled';
 
 import {DiamondStatus} from 'sentry/components/diamondStatus';
-import {IconCheckmark, IconExclamation, IconFire, IconIssues} from 'sentry/icons';
+import {
+ IconCheckmark,
+ IconEllipsis,
+ IconExclamation,
+ IconFire,
+ IconIssues,
+ IconShow,
+} from 'sentry/icons';
 import type {SVGIconProps} from 'sentry/icons/svgIcon';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {ColorOrAlias} from 'sentry/utils/theme';
-import {IncidentStatus} from 'sentry/views/alerts/types';
+import {ActivationStatus, IncidentStatus} from 'sentry/views/alerts/types';
 
 type Props = {
+ /**
+ * The rule is actively monitoring
+ */
+ activationStatus?: ActivationStatus;
  /**
  * @deprecated use withText
  */
@@ -31,7 +42,7 @@ type Props = {
  * This badge is a composition of DiamondStatus specifically used for incident
  * alerts.
  */
-function AlertBadge({status, withText, isIssue}: Props) {
+function AlertBadge({status, withText, isIssue, activationStatus}: Props) {
  let statusText = t('Resolved');
  let Icon: React.ComponentType<SVGIconProps> = IconCheckmark;
  let color: ColorOrAlias = 'successText';
@@ -50,6 +61,15 @@ function AlertBadge({status, withText, isIssue}: Props) {
  color = 'warningText';
  }
 
+ if (activationStatus === ActivationStatus.WAITING) {
+ statusText = t('Ready');
+ Icon = IconEllipsis;
+ color = 'purple300';
+ } else if (activationStatus === ActivationStatus.MONITORING) {
+ statusText = t('Monitoring');
+ Icon = IconShow;
+ }
+
  return (
  <Wrapper data-test-id="alert-badge">
  <DiamondStatus