fix(ddm-alerts): Fix timestamp formatting in chart and alerts edit form resetting MRI (#61030)

`CreateAlertModal`: Fix formatting on timestamp in chart tooltip
`MRIField`: Don't reset value while metrics are loading

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

@@ -49,7 +49,7 @@ function MriField({aggregate, project, onChange}: Props) {
 
   useEffect(() => {
     // Auto-select the first mri if none of the available ones is selected
-    if (!selectedMriMeta) {
+    if (!selectedMriMeta && !isLoading) {
       const newSelection = metaArr[0];
       if (newSelection) {
         onChange(

static/app/views/ddm/createAlertModal.tsx

@@ -5,6 +5,7 @@ import * as qs from 'query-string';
 import {ModalRenderProps} from 'sentry/actionCreators/modal';
 import {Button} from 'sentry/components/button';
 import {AreaChart} from 'sentry/components/charts/areaChart';
+import {getFormatter} from 'sentry/components/charts/components/tooltip';
 import {HeaderTitleLegend} from 'sentry/components/charts/styles';
 import CircleIndicator from 'sentry/components/circleIndicator';
 import SelectControl from 'sentry/components/forms/controls/selectControl';
@@ -240,12 +241,22 @@ export function CreateAlertModal({Header, Body, Footer, metricsQuery}: Props) {
   const unit = parseMRI(metricsQuery.mri)?.unit ?? 'none';
   const operation = metricsQuery.op;
   const chartOptions = useMemo(() => {
+    const bucketSize =
+      (chartSeries?.[0]?.data[1]?.name ?? 0) - (chartSeries?.[0]?.data[0]?.name ?? 0);
+
+    const formatters = {
+      valueFormatter: value => formatMetricUsingFixedUnit(value, unit, operation),
+      isGroupedByDate: true,
+      bucketSize,
+      showTimeInTooltip: true,
+    };
+
     return {
       isGroupedByDate: true,
       height: 200,
       grid: {top: 20, bottom: 20, left: 15, right: 25},
       tooltip: {
-        valueFormatter: value => formatMetricUsingFixedUnit(value, unit, operation),
+        formatter: getFormatter(formatters),
       },
       yAxis: {
         axisLabel: {
@@ -253,7 +264,7 @@ export function CreateAlertModal({Header, Body, Footer, metricsQuery}: Props) {
         },
       },
     };
-  }, [operation, unit]);
+  }, [chartSeries, operation, unit]);
 
   return (
     <Fragment>