fix(ui): Fix start end times for alert rule details status areas (#24726)

* fix(ui): Metric alert detail percentages

* fix(ui): Fix start end times for alert rule details status areas

* style(lint): Auto commit lint changes

Co-authored-by: sentry-internal-tools[bot] <66042841+sentry-internal-tools[bot]@users.noreply.github.com>

src/sentry/static/sentry/app/views/alerts/rules/details/metricChart.tsx

@@ -66,7 +66,9 @@ function createThresholdSeries(lineColor: string, threshold: number): LineChartS
 function createStatusAreaSeries(
   lineColor: string,
   startTime: number,
-  endTime: number
+  endTime: number,
+  startLimit?: number,
+  endLimit?: number
 ): LineChartSeries {
   return {
     seriesName: 'Status Area',
@@ -74,7 +76,12 @@ function createStatusAreaSeries(
     markLine: MarkLine({
       silent: true,
       lineStyle: {color: lineColor, type: 'solid', width: 4},
-      data: [[{coord: [startTime, 0]}, {coord: [endTime, 0]}] as any],
+      data: [
+        [
+          {coord: [startLimit ? Math.max(startTime, startLimit) : startTime, 0]},
+          {coord: [endLimit ? Math.min(endLimit, endTime) : endTime, 0]},
+        ] as any,
+      ],
     }),
     data: [],
   };
@@ -216,11 +223,15 @@ export default class MetricChart extends React.PureComponent<Props, State> {
       : makeDefaultCta(ctaOpts);
 
     const resolvedPercent = (
-      (100 * (totalDuration - criticalDuration - warningDuration)) /
+      (100 * Math.max(totalDuration - criticalDuration - warningDuration, 0)) /
       totalDuration
     ).toFixed(2);
-    const criticalPercent = ((100 * criticalDuration) / totalDuration).toFixed(2);
-    const warningPercent = ((100 * warningDuration) / totalDuration).toFixed(2);
+    const criticalPercent = (100 * Math.min(criticalDuration / totalDuration, 1)).toFixed(
+      2
+    );
+    const warningPercent = (100 * Math.min(warningDuration / totalDuration, 1)).toFixed(
+      2
+    );
 
     return (
       <ChartActions>
@@ -394,7 +405,15 @@ export default class MetricChart extends React.PureComponent<Props, State> {
                     ? moment(statusChanges[0].dateCreated).valueOf() - timeWindowMs
                     : moment(incidentEnd).valueOf();
                 const areaColor = warningTrigger ? theme.yellow300 : theme.red300;
-                series.push(createStatusAreaSeries(areaColor, areaStart, areaEnd));
+                series.push(
+                  createStatusAreaSeries(
+                    areaColor,
+                    areaStart,
+                    areaEnd,
+                    firstPoint,
+                    lastPoint
+                  )
+                );
                 if (areaColor === theme.yellow300) {
                   warningDuration += areaEnd - areaStart;
                 } else {
@@ -414,7 +433,13 @@ export default class MetricChart extends React.PureComponent<Props, State> {
                       : moment(statusChanges[idx + 1].dateCreated).valueOf() -
                         timeWindowMs;
                   series.push(
-                    createStatusAreaSeries(statusAreaColor, areaStart, statusAreaEnd)
+                    createStatusAreaSeries(
+                      statusAreaColor,
+                      areaStart,
+                      statusAreaEnd,
+                      firstPoint,
+                      lastPoint
+                    )
                   );
                   if (statusAreaColor === theme.yellow300) {
                     warningDuration += statusAreaEnd - statusAreaStart;