Просмотр исходного кода

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 год назад
Родитель
Сommit
ff7bb29275
1 измененных файлов с 28 добавлено и 11 удалено
  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,