Browse Source

perf(chartcuterie): optimize min/max domain search (#62476)

Outside of chartcuterie's rendering procedure, this is coming up as the
most common slow fn. We sadly don't have have many samples so cant tell
exactly what is the issue, but I suspect iterating many times over the
series data points could be one of the issues.
Jonas 1 year ago
parent
commit
ff7bb29275
1 changed files with 28 additions and 11 deletions
  1. 28 11
      static/app/views/alerts/rules/metric/details/metricChartOption.tsx

+ 28 - 11
static/app/views/alerts/rules/metric/details/metricChartOption.tsx

@@ -19,6 +19,7 @@ import {
   AlertRuleTriggerType,
   Dataset,
   MetricRule,
+  Trigger,
 } from 'sentry/views/alerts/rules/metric/types';
 import {Incident, IncidentActivityType, IncidentStatus} from 'sentry/views/alerts/types';
 import {
@@ -164,12 +165,20 @@ export function getMetricAlertChartOption({
   handleIncidentClick,
   showWaitingForData,
 }: MetricChartData): MetricChartOption {
-  const criticalTrigger = rule.triggers.find(
-    ({label}) => label === AlertRuleTriggerType.CRITICAL
-  );
-  const warningTrigger = rule.triggers.find(
-    ({label}) => label === AlertRuleTriggerType.WARNING
-  );
+  let criticalTrigger: Trigger | undefined;
+  let warningTrigger: Trigger | undefined;
+
+  for (const trigger of rule.triggers) {
+    if (trigger.label === AlertRuleTriggerType.CRITICAL) {
+      criticalTrigger ??= trigger;
+    }
+    if (trigger.label === AlertRuleTriggerType.WARNING) {
+      warningTrigger ??= trigger;
+    }
+    if (criticalTrigger && warningTrigger) {
+      break;
+    }
+  }
 
   const series: AreaChartSeries[] = timeseriesData.map(s => ({
     ...s,
@@ -181,16 +190,24 @@ export function getMetricAlertChartOption({
   series[0].color = CHART_PALETTE[0][0];
 
   const dataArr = timeseriesData[0].data;
-  const maxSeriesValue = dataArr.reduce(
-    (currMax, coord) => Math.max(currMax, coord.value),
-    0
-  );
+
+  let maxSeriesValue = Number.NEGATIVE_INFINITY;
+  let minSeriesValue = Number.POSITIVE_INFINITY;
+
+  for (const coord of dataArr) {
+    if (coord.value > maxSeriesValue) {
+      maxSeriesValue = coord.value;
+    }
+    if (coord.value < minSeriesValue) {
+      minSeriesValue = coord.value;
+    }
+  }
   // find the lowest value between chart data points, warning threshold,
   // critical threshold and then apply some breathing space
   const minChartValue = shouldScaleAlertChart(rule.aggregate)
     ? Math.floor(
         Math.min(
-          dataArr.reduce((currMax, coord) => Math.min(currMax, coord.value), Infinity),
+          minSeriesValue,
           typeof warningTrigger?.alertThreshold === 'number'
             ? warningTrigger.alertThreshold
             : Infinity,