fix(metrics): create span metrics alert (#75049)

Adds the ability to span based alerts from metrics page
- closes: #75037
- closes: #75039

static/app/views/metrics/metricQueryContextMenu.tsx

@@ -59,10 +59,8 @@ export function MetricQueryContextMenu({
   const router = useRouter();
 
   const {removeWidget, duplicateWidget, widgets, updateWidget} = useMetricsContext();
-  const createAlert = useMemo(
-    () => getCreateAlert(organization, metricsQuery),
-    [metricsQuery, organization]
-  );
+  const createAlert = getCreateAlert(organization, metricsQuery);
+
   const createDashboardWidget = useCreateDashboardWidget(
     organization,
     metricsQuery,
@@ -91,10 +89,7 @@ export function MetricQueryContextMenu({
         leadingItems: [<IconSiren key="icon" />],
         key: 'add-alert',
         label: <CreateMetricAlertFeature>{t('Create Alert')}</CreateMetricAlertFeature>,
-        disabled:
-          !createAlert ||
-          !hasMetricAlertFeature(organization) ||
-          isVirtualMetric(metricsQuery),
+        disabled: !createAlert || !hasMetricAlertFeature(organization),
         onAction: () => {
           trackAnalytics('ddm.create-alert', {
             organization,
@@ -224,6 +219,20 @@ export function MetricQueryContextMenu({
 }
 
 export function getCreateAlert(organization: Organization, metricsQuery: MetricsQuery) {
+  const {resolveVirtualMRI} = useVirtualMetricsContext();
+
+  const queryCopy = {...metricsQuery};
+
+  if (isVirtualMetric(metricsQuery) && metricsQuery.condition) {
+    const {mri, aggregation} = resolveVirtualMRI(
+      metricsQuery.mri,
+      metricsQuery.condition,
+      metricsQuery.aggregation
+    );
+    queryCopy.mri = mri;
+    queryCopy.aggregation = aggregation;
+  }
+
   if (
     !metricsQuery.mri ||
     !metricsQuery.aggregation ||
@@ -235,7 +244,7 @@ export function getCreateAlert(organization: Organization, metricsQuery: Metrics
   return function () {
     return openModal(deps => (
       <OrganizationContext.Provider value={organization}>
-        <CreateAlertModal metricsQuery={metricsQuery} {...deps} />
+        <CreateAlertModal metricsQuery={queryCopy} {...deps} />
       </OrganizationContext.Provider>
     ));
   };

static/app/views/metrics/pageHeaderActions.tsx

@@ -120,6 +120,7 @@ export function PageHeaderActions({showAddMetricButton, addCustomMetric}: Props)
             mri: widget.mri,
             groupBy: widget.groupBy,
             aggregation: widget.aggregation,
+            condition: widget.condition,
           });
           return {
             leadingItems: showQuerySymbols