Fix preview chart in APM error rate and error count rules

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

@@ -40,6 +40,9 @@ export enum AggregationType {
   P99 = '99th',
 }
 
+export const NUMBER_OF_TIME_SERIES_FOR_PREVIEW_CHART = 5;
+export const INTERVAL_MULTIPLIER_FOR_LOOKBACK = 5;
+
 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/common/rules/get_all_groupby_fields.ts

@@ -0,0 +1,33 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { union } from 'lodash';
+import { ApmRuleType } from './apm_rule_types';
+import {
+  SERVICE_ENVIRONMENT,
+  SERVICE_NAME,
+  TRANSACTION_TYPE,
+} from '../es_fields/apm';
+
+export const getAllGroupByFields = (
+  ruleType: string,
+  ruleParamsGroupBy: string[] | undefined = []
+) => {
+  let predefinedGroupBy: string[] = [];
+
+  switch (ruleType) {
+    case ApmRuleType.TransactionDuration:
+    case ApmRuleType.TransactionErrorRate:
+      predefinedGroupBy = [SERVICE_NAME, SERVICE_ENVIRONMENT, TRANSACTION_TYPE];
+      break;
+    case ApmRuleType.ErrorCount:
+      predefinedGroupBy = [SERVICE_NAME, SERVICE_ENVIRONMENT];
+      break;
+  }
+
+  return union(predefinedGroupBy, ruleParamsGroupBy);
+};

x-pack/plugins/apm/public/components/alerting/rule_types/error_count_rule_type/index.tsx

@@ -18,7 +18,11 @@ import { EuiFormRow } from '@elastic/eui';
 import { EuiSpacer } from '@elastic/eui';
 import { ENVIRONMENT_ALL } from '../../../../../common/environment_filter_values';
 import { asInteger } from '../../../../../common/utils/formatters';
-import { useFetcher } from '../../../../hooks/use_fetcher';
+import {
+  FETCH_STATUS,
+  isPending,
+  useFetcher,
+} from '../../../../hooks/use_fetcher';
 import { createCallApmApi } from '../../../../services/rest/create_call_apm_api';
 import { ChartPreview } from '../../ui_components/chart_preview';
 import {
@@ -36,6 +40,11 @@ import {
   TRANSACTION_NAME,
   ERROR_GROUP_ID,
 } from '../../../../../common/es_fields/apm';
+import {
+  ErrorState,
+  LoadingState,
+  NoDataState,
+} from '../../ui_components/chart_preview/chart_preview_helper';
 
 export interface RuleParams {
   windowSize?: number;
@@ -72,7 +81,7 @@ export function ErrorCountRuleType(props: Props) {
     }
   );
 
-  const { data } = useFetcher(
+  const { data, status } = useFetcher(
     (callApmApi) => {
       const { interval, start, end } = getIntervalAndTimeRange({
         windowSize: params.windowSize,
@@ -90,6 +99,7 @@ export function ErrorCountRuleType(props: Props) {
                 interval,
                 start,
                 end,
+                groupBy: params.groupBy,
               },
             },
           }
@@ -102,6 +112,7 @@ export function ErrorCountRuleType(props: Props) {
       params.environment,
       params.serviceName,
       params.errorGroupingKey,
+      params.groupBy,
     ]
   );
 
@@ -162,16 +173,26 @@ export function ErrorCountRuleType(props: Props) {
     />,
   ];
 
-  // hide preview chart until https://github.com/elastic/kibana/pull/156625 gets merged
-  const showChartPreview = false;
-  const chartPreview = showChartPreview ? (
+  const errorCountChartPreview = data?.errorCountChartPreview ?? [];
+
+  const hasData = errorCountChartPreview.length > 0;
+
+  const chartPreview = isPending(status) ? (
+    <LoadingState />
+  ) : !hasData ? (
+    <NoDataState />
+  ) : status === FETCH_STATUS.SUCCESS ? (
     <ChartPreview
-      series={[{ data: data?.errorCountChartPreview ?? [] }]}
+      series={errorCountChartPreview}
       threshold={params.threshold}
       yTickFormat={asInteger}
       uiSettings={services.uiSettings}
+      timeSize={params.windowSize}
+      timeUnit={params.windowUnit}
     />
-  ) : null;
+  ) : (
+    <ErrorState />
+  );
 
   const groupAlertsBy = (
     <>

x-pack/plugins/apm/public/components/alerting/rule_types/transaction_error_rate_rule_type/index.tsx

@@ -18,7 +18,11 @@ import { EuiFormRow } from '@elastic/eui';
 import { EuiSpacer } from '@elastic/eui';
 import { ENVIRONMENT_ALL } from '../../../../../common/environment_filter_values';
 import { asPercent } from '../../../../../common/utils/formatters';
-import { useFetcher } from '../../../../hooks/use_fetcher';
+import {
+  FETCH_STATUS,
+  isPending,
+  useFetcher,
+} from '../../../../hooks/use_fetcher';
 import { createCallApmApi } from '../../../../services/rest/create_call_apm_api';
 import { ChartPreview } from '../../ui_components/chart_preview';
 import {
@@ -37,6 +41,11 @@ import {
   TRANSACTION_TYPE,
   TRANSACTION_NAME,
 } from '../../../../../common/es_fields/apm';
+import {
+  ErrorState,
+  LoadingState,
+  NoDataState,
+} from '../../ui_components/chart_preview/chart_preview_helper';
 
 export interface RuleParams {
   windowSize?: number;
@@ -74,9 +83,7 @@ export function TransactionErrorRateRuleType(props: Props) {
     }
   );
 
-  const thresholdAsPercent = (params.threshold ?? 0) / 100;
-
-  const { data } = useFetcher(
+  const { data, status } = useFetcher(
     (callApmApi) => {
       const { interval, start, end } = getIntervalAndTimeRange({
         windowSize: params.windowSize,
@@ -95,6 +102,7 @@ export function TransactionErrorRateRuleType(props: Props) {
                 interval,
                 start,
                 end,
+                groupBy: params.groupBy,
               },
             },
           }
@@ -108,6 +116,7 @@ export function TransactionErrorRateRuleType(props: Props) {
       params.serviceName,
       params.windowSize,
       params.windowUnit,
+      params.groupBy,
     ]
   );
 
@@ -171,16 +180,26 @@ export function TransactionErrorRateRuleType(props: Props) {
     />,
   ];
 
-  // hide preview chart until https://github.com/elastic/kibana/pull/156625 gets merged
-  const showChartPreview = false;
-  const chartPreview = showChartPreview ? (
+  const errorRateChartPreview = data?.errorRateChartPreview ?? [];
+
+  const hasData = errorRateChartPreview.length > 0;
+
+  const chartPreview = isPending(status) ? (
+    <LoadingState />
+  ) : !hasData ? (
+    <NoDataState />
+  ) : status === FETCH_STATUS.SUCCESS ? (
     <ChartPreview
-      series={[{ data: data?.errorRateChartPreview ?? [] }]}
-      yTickFormat={(d: number | null) => asPercent(d, 1)}
-      threshold={thresholdAsPercent}
+      series={errorRateChartPreview}
+      yTickFormat={(d: number | null) => asPercent(d, 100)}
+      threshold={params.threshold}
       uiSettings={services.uiSettings}
+      timeSize={params.windowSize}
+      timeUnit={params.windowUnit}
     />
-  ) : null;
+  ) : (
+    <ErrorState />
+  );
 
   const groupAlertsBy = (
     <>

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

@@ -0,0 +1,159 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useMemo } 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 = {
+  s: i18n.translate('xpack.apm.alerts.timeLabels.seconds', {
+    defaultMessage: 'seconds',
+  }),
+  m: i18n.translate('xpack.apm.alerts.timeLabels.minutes', {
+    defaultMessage: 'minutes',
+  }),
+  h: i18n.translate('xpack.apm.alerts.timeLabels.hours', {
+    defaultMessage: 'hours',
+  }),
+  d: i18n.translate('xpack.apm.alerts.timeLabels.days', {
+    defaultMessage: 'days',
+  }),
+};
+
+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;
+  return {
+    yMin: min || 0,
+    yMax: max || 0,
+    xMin: minTimestamp,
+    xMax: maxTimestamp,
+  };
+};
+
+const EmptyContainer: React.FC = ({ children }) => (
+  <div
+    style={{
+      width: '100%',
+      height: 150,
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+    }}
+  >
+    {children}
+  </div>
+);
+
+export function NoDataState() {
+  return (
+    <EmptyContainer>
+      <EuiText color="subdued" data-test-subj="noChartData">
+        <FormattedMessage
+          id="xpack.apm.alerts.charts.noDataMessage"
+          defaultMessage="No chart data available"
+        />
+      </EuiText>
+    </EmptyContainer>
+  );
+}
+
+export function LoadingState() {
+  return (
+    <EmptyContainer>
+      <EuiText color="subdued" data-test-subj="loadingData">
+        <EuiLoadingChart size="m" />
+      </EuiText>
+    </EmptyContainer>
+  );
+}
+
+export function ErrorState() {
+  return (
+    <EmptyContainer>
+      <EuiText color="subdued" data-test-subj="chartErrorState">
+        <FormattedMessage
+          id="xpack.apm.alerts.charts.errorMessage"
+          defaultMessage="Uh oh, something went wrong"
+        />
+      </EuiText>
+    </EmptyContainer>
+  );
+}
+
+interface PreviewChartLabel {
+  lookback: number;
+  timeLabel: string;
+  displayedGroups: number;
+  totalGroups: number;
+}
+
+export function TimeLabelForData({
+  lookback,
+  timeLabel,
+  displayedGroups,
+  totalGroups,
+}: PreviewChartLabel) {
+  return (
+    <div style={{ textAlign: 'center' }}>
+      <EuiText size="xs" color="subdued">
+        <FormattedMessage
+          id="xpack.apm.alerts.timeLabelForData"
+          defaultMessage="Last {lookback} {timeLabel} of data, showing {displayedGroups}/{totalGroups} groups"
+          values={{
+            lookback,
+            timeLabel,
+            displayedGroups,
+            totalGroups,
+          }}
+        />
+      </EuiText>
+    </div>
+  );
+}