refactoring as per feedback

x-pack/plugins/apm/common/rules/apm_rule_types.ts

@@ -40,11 +40,6 @@ export enum AggregationType {
   P99 = '99th',
 }
 
-export interface PreviewChartResponseItem {
-  name: string;
-  data: Array<{ x: number; y: number | null }>;
-}
-
 export const THRESHOLD_MET_GROUP_ID = 'threshold_met';
 export type ThresholdMetActionGroupId = typeof THRESHOLD_MET_GROUP_ID;
 const THRESHOLD_MET_GROUP: ActionGroup<ThresholdMetActionGroupId> = {

x-pack/plugins/apm/public/components/alerting/ui_components/chart_preview/chart_preview_helper.tsx

@@ -5,13 +5,11 @@
  * 2.0.
  */
 
-import React, { useMemo } from 'react';
+import React from 'react';
 import { EuiLoadingChart } from '@elastic/eui';
 import { EuiText } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
-import { niceTimeFormatter } from '@elastic/charts';
-import { min as getMin, max as getMax } from 'lodash';
 import { Coordinate } from '../../../../../typings/timeseries';
 
 export const TIME_LABELS = {
@@ -29,51 +27,16 @@ export const TIME_LABELS = {
   }),
 };
 
-export const useDateFormatter = (xMin?: number, xMax?: number) => {
-  const dateFormatter = useMemo(() => {
-    if (typeof xMin === 'number' && typeof xMax === 'number') {
-      return niceTimeFormatter([xMin, xMax]);
-    } else {
-      return (value: number) => `${value}`;
-    }
-  }, [xMin, xMax]);
-  return dateFormatter;
-};
-
 export const getDomain = (
   series: Array<{ name?: string; data: Coordinate[] }>
 ) => {
-  let min: number | null = null;
-  let max: number | null = null;
-  const valuesByTimestamp = series.reduce<{ [timestamp: number]: number[] }>(
-    (acc, serie) => {
-      serie.data.forEach((point) => {
-        const valuesForTimestamp = acc[point.x] || [];
-        acc[point.x] = [...valuesForTimestamp, point.y ?? 0];
-      });
-      return acc;
-    },
-    {}
-  );
-  const pointValues = Object.values(valuesByTimestamp);
-  pointValues.forEach((results) => {
-    const maxResult = getMax(results);
-    const minResult = getMin(results);
-    if (maxResult && (!max || maxResult > max)) {
-      max = maxResult;
-    }
-    if (minResult && (!min || minResult < min)) {
-      min = minResult;
-    }
-  });
-  const timestampValues = Object.keys(valuesByTimestamp).map(Number);
-  const minTimestamp = getMin(timestampValues) || 0;
-  const maxTimestamp = getMax(timestampValues) || 0;
+  const xValues = series.flatMap((item) => item.data.map((d) => d.x));
+  const yValues = series.flatMap((item) => item.data.map((d) => d.y || 0));
   return {
-    yMin: min || 0,
-    yMax: max || 0,
-    xMin: minTimestamp,
-    xMax: maxTimestamp,
+    xMax: Math.max(...xValues),
+    xMin: Math.min(...xValues),
+    yMax: Math.max(...yValues),
+    yMin: Math.min(...yValues),
   };
 };
 

x-pack/plugins/apm/public/components/alerting/ui_components/chart_preview/index.tsx

@@ -11,6 +11,7 @@ import {
   BarSeries,
   Chart,
   LineAnnotation,
+  niceTimeFormatter,
   Position,
   RectAnnotation,
   RectAnnotationDatum,
@@ -31,7 +32,6 @@ import {
   TimeLabelForData,
   TIME_LABELS,
   getDomain,
-  useDateFormatter,
 } from './chart_preview_helper';
 import { ALERT_PREVIEW_BUCKET_SIZE } from '../../utils/helper';
 import { Coordinate } from '../../../../../typings/timeseries';
@@ -106,7 +106,10 @@ export function ChartPreview({
     min: Math.min(yMin, threshold) * 0.9, // Add 10% headroom.
   };
 
-  const dateFormatter = useDateFormatter(xMin, xMax);
+  const dateFormatter = useMemo(
+    () => niceTimeFormatter([xMin, xMax]),
+    [xMin, xMax]
+  );
 
   const lookback = timeSize * ALERT_PREVIEW_BUCKET_SIZE;
   const timeLabel = TIME_LABELS[timeUnit as keyof typeof TIME_LABELS];

x-pack/plugins/apm/server/routes/alerts/route.ts

@@ -14,10 +14,7 @@ import { getTransactionErrorCountChartPreview } from './rule_types/error_count/g
 import { getTransactionErrorRateChartPreview } from './rule_types/transaction_error_rate/get_transaction_error_rate_chart_preview';
 import { createApmServerRoute } from '../apm_routes/create_apm_server_route';
 import { environmentRt, rangeRt } from '../default_api_types';
-import {
-  AggregationType,
-  PreviewChartResponseItem,
-} from '../../../common/rules/apm_rule_types';
+import { AggregationType } from '../../../common/rules/apm_rule_types';
 import { getApmEventClient } from '../../lib/helpers/get_apm_event_client';
 
 const alertParamsRt = t.intersection([
@@ -42,6 +39,11 @@ const alertParamsRt = t.intersection([
   }),
 ]);
 
+export interface PreviewChartResponseItem {
+  name: string;
+  data: Array<{ x: number; y: number | null }>;
+}
+
 export interface PreviewChartResponse {
   series: PreviewChartResponseItem[];
   totalGroups: number;

x-pack/test/apm_api_integration/tests/alerts/preview_chart_error_count.spec.ts

@@ -10,7 +10,7 @@ import {
   SERVICE_NAME,
   ERROR_GROUP_ID,
 } from '@kbn/apm-plugin/common/es_fields/apm';
-import { PreviewChartResponseItem } from '@kbn/apm-plugin/common/rules/apm_rule_types';
+import type { PreviewChartResponseItem } from '@kbn/apm-plugin/server/routes/alerts/route';
 import expect from '@kbn/expect';
 import { FtrProviderContext } from '../../common/ftr_provider_context';
 import { generateErrorData } from './generate_data';

x-pack/test/apm_api_integration/tests/alerts/preview_chart_error_rate.spec.ts

@@ -11,7 +11,7 @@ import {
   TRANSACTION_NAME,
   TRANSACTION_TYPE,
 } from '@kbn/apm-plugin/common/es_fields/apm';
-import { PreviewChartResponseItem } from '@kbn/apm-plugin/common/rules/apm_rule_types';
+import type { PreviewChartResponseItem } from '@kbn/apm-plugin/server/routes/alerts/route';
 import expect from '@kbn/expect';
 import { FtrProviderContext } from '../../common/ftr_provider_context';
 import { generateErrorData } from './generate_data';