Fix preview chart in APM error rate and error count rules

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

@@ -40,6 +40,11 @@ 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/common/rules/get_all_groupby_fields.ts

@@ -0,0 +1,37 @@
+/*
+ * 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,
+  ruleParamsGroupByFields: string[] | undefined = []
+) => {
+  let predefinedGroupByFields: string[] = [];
+
+  switch (ruleType) {
+    case ApmRuleType.TransactionDuration:
+    case ApmRuleType.TransactionErrorRate:
+      predefinedGroupByFields = [
+        SERVICE_NAME,
+        SERVICE_ENVIRONMENT,
+        TRANSACTION_TYPE,
+      ];
+      break;
+    case ApmRuleType.ErrorCount:
+      predefinedGroupByFields = [SERVICE_NAME, SERVICE_ENVIRONMENT];
+      break;
+  }
+
+  return union(predefinedGroupByFields, ruleParamsGroupByFields);
+};

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,13 +81,13 @@ export function ErrorCountRuleType(props: Props) {
     }
   );
 
-  const { data } = useFetcher(
+  const { data, status } = useFetcher(
     (callApmApi) => {
       const { interval, start, end } = getIntervalAndTimeRange({
         windowSize: params.windowSize,
         windowUnit: params.windowUnit,
       });
-      if (interval && start && end) {
+      if (params.windowSize && start && end) {
         return callApmApi(
           'GET /internal/apm/rule_types/error_count/chart_preview',
           {
@@ -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,28 @@ 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 series = errorCountChartPreview?.series ?? [];
+  const hasData = series.length > 0;
+  const totalGroups = errorCountChartPreview?.totalGroups ?? 0;
+
+  const chartPreview = isPending(status) ? (
+    <LoadingState />
+  ) : !hasData ? (
+    <NoDataState />
+  ) : status === FETCH_STATUS.SUCCESS ? (
     <ChartPreview
-      series={[{ data: data?.errorCountChartPreview ?? [] }]}
+      series={series}
       threshold={params.threshold}
       yTickFormat={asInteger}
       uiSettings={services.uiSettings}
+      timeSize={params.windowSize}
+      timeUnit={params.windowUnit}
+      totalGroups={totalGroups}
     />
-  ) : null;
+  ) : (
+    <ErrorState />
+  );
 
   const groupAlertsBy = (
     <>

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

@@ -155,6 +155,7 @@ export function TransactionDurationRuleType(props: Props) {
       threshold={thresholdMs}
       yTickFormat={yTickFormat}
       uiSettings={services.uiSettings}
+      totalGroups={0} // TODO: will be updated in https://github.com/elastic/kibana/pull/158439
     />
   ) : null;
 

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,15 +83,13 @@ 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,
         windowUnit: params.windowUnit,
       });
-      if (interval && start && end) {
+      if (params.windowSize && start && end) {
         return callApmApi(
           'GET /internal/apm/rule_types/transaction_error_rate/chart_preview',
           {
@@ -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,28 @@ 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 series = errorRateChartPreview?.series ?? [];
+  const hasData = series.length > 0;
+  const totalGroups = errorRateChartPreview?.totalGroups ?? 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={series}
+      yTickFormat={(d: number | null) => asPercent(d, 100)}
+      threshold={params.threshold}
       uiSettings={services.uiSettings}
+      timeSize={params.windowSize}
+      timeUnit={params.windowUnit}
+      totalGroups={totalGroups}
     />
-  ) : null;
+  ) : (
+    <ErrorState />
+  );
 
   const groupAlertsBy = (
     <>