Revert "[APM] Alerting: Show preview as chart of threshold (#84080)"

This reverts commit 9986aff.

Author: Tyler Smalley

x-pack/plugins/apm/public/application/action_menu/alerting_popover_flyout.tsx

@@ -14,7 +14,7 @@ import { i18n } from '@kbn/i18n';
 import React, { useState } from 'react';
 import { IBasePath } from '../../../../../../src/core/public';
 import { AlertType } from '../../../common/alert_types';
-import { AlertingFlyout } from '../../components/alerting/alerting_flyout';
+import { AlertingFlyout } from '../../components/alerting/AlertingFlyout';
 
 const alertLabel = i18n.translate('xpack.apm.home.alertsMenu.alerts', {
   defaultMessage: 'Alerts',

x-pack/plugins/apm/public/components/alerting/alerting_flyout/index.tsx renamed to x-pack/plugins/apm/public/components/alerting/AlertingFlyout/index.tsx

@@ -8,17 +8,12 @@ import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { useParams } from 'react-router-dom';
 import { ForLastExpression } from '../../../../../triggers_actions_ui/public';
-import { AlertType, ALERT_TYPES_CONFIG } from '../../../../common/alert_types';
+import { ALERT_TYPES_CONFIG, AlertType } from '../../../../common/alert_types';
 import { ENVIRONMENT_ALL } from '../../../../common/environment_filter_values';
-import { asInteger } from '../../../../common/utils/formatters';
-import { useUrlParams } from '../../../context/url_params_context/use_url_params';
 import { useEnvironmentsFetcher } from '../../../hooks/use_environments_fetcher';
-import { useFetcher } from '../../../hooks/use_fetcher';
-import { callApmApi } from '../../../services/rest/createCallApmApi';
-import { ChartPreview } from '../chart_preview';
-import { EnvironmentField, IsAboveField, ServiceField } from '../fields';
-import { getAbsoluteTimeRange } from '../helper';
-import { ServiceAlertTrigger } from '../service_alert_trigger';
+import { useUrlParams } from '../../../context/url_params_context/use_url_params';
+import { EnvironmentField, ServiceField, IsAboveField } from '../fields';
+import { ServiceAlertTrigger } from '../ServiceAlertTrigger';
 
 export interface AlertParams {
   windowSize: number;
@@ -45,23 +40,6 @@ export function ErrorCountAlertTrigger(props: Props) {
     end,
   });
 
-  const { threshold, windowSize, windowUnit, environment } = alertParams;
-
-  const { data } = useFetcher(() => {
-    if (windowSize && windowUnit) {
-      return callApmApi({
-        endpoint: 'GET /api/apm/alerts/chart_preview/transaction_error_count',
-        params: {
-          query: {
-            ...getAbsoluteTimeRange(windowSize, windowUnit),
-            environment,
-            serviceName,
-          },
-        },
-      });
-    }
-  }, [windowSize, windowUnit, environment, serviceName]);
-
   const defaults = {
     threshold: 25,
     windowSize: 1,
@@ -86,14 +64,14 @@ export function ErrorCountAlertTrigger(props: Props) {
       unit={i18n.translate('xpack.apm.errorCountAlertTrigger.errors', {
         defaultMessage: ' errors',
       })}
-      onChange={(value) => setAlertParams('threshold', value || 0)}
+      onChange={(value) => setAlertParams('threshold', value)}
     />,
     <ForLastExpression
-      onChangeWindowSize={(timeWindowSize) =>
-        setAlertParams('windowSize', timeWindowSize || '')
+      onChangeWindowSize={(windowSize) =>
+        setAlertParams('windowSize', windowSize || '')
       }
-      onChangeWindowUnit={(timeWindowUnit) =>
-        setAlertParams('windowUnit', timeWindowUnit)
+      onChangeWindowUnit={(windowUnit) =>
+        setAlertParams('windowUnit', windowUnit)
       }
       timeWindowSize={params.windowSize}
       timeWindowUnit={params.windowUnit}
@@ -104,18 +82,13 @@ export function ErrorCountAlertTrigger(props: Props) {
     />,
   ];
 
-  const chartPreview = (
-    <ChartPreview data={data} threshold={threshold} yTickFormat={asInteger} />
-  );
-
   return (
     <ServiceAlertTrigger
       alertTypeName={ALERT_TYPES_CONFIG[AlertType.ErrorCount].name}
       defaults={defaults}
       fields={fields}
       setAlertParams={setAlertParams}
       setAlertProperty={setAlertProperty}
-      chartPreview={chartPreview}
     />
   );
 }

x-pack/plugins/apm/public/components/alerting/error_count_alert_trigger/index.stories.tsx renamed to x-pack/plugins/apm/public/components/alerting/ErrorCountAlertTrigger/index.stories.tsx

@@ -4,8 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiFlexGrid, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 import React, { useEffect } from 'react';
+import { EuiSpacer, EuiFlexGrid, EuiFlexItem } from '@elastic/eui';
 import { useParams } from 'react-router-dom';
 
 interface Props {
@@ -14,7 +14,6 @@ interface Props {
   setAlertProperty: (key: string, value: any) => void;
   defaults: Record<string, any>;
   fields: React.ReactNode[];
-  chartPreview?: React.ReactNode;
 }
 
 export function ServiceAlertTrigger(props: Props) {
@@ -26,7 +25,6 @@ export function ServiceAlertTrigger(props: Props) {
     setAlertProperty,
     alertTypeName,
     defaults,
-    chartPreview,
   } = props;
 
   const params: Record<string, any> = {
@@ -63,7 +61,6 @@ export function ServiceAlertTrigger(props: Props) {
           </EuiFlexItem>
         ))}
       </EuiFlexGrid>
-      {chartPreview}
       <EuiSpacer size="m" />
     </>
   );

x-pack/plugins/apm/public/components/alerting/error_count_alert_trigger/index.tsx renamed to x-pack/plugins/apm/public/components/alerting/ErrorCountAlertTrigger/index.tsx

@@ -4,31 +4,24 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import { EuiSelect } from '@elastic/eui';
+import { useParams } from 'react-router-dom';
 import { i18n } from '@kbn/i18n';
 import { map } from 'lodash';
 import React from 'react';
-import { useParams } from 'react-router-dom';
-import { useFetcher } from '../../../../../observability/public';
 import { ForLastExpression } from '../../../../../triggers_actions_ui/public';
 import { ALERT_TYPES_CONFIG } from '../../../../common/alert_types';
-import { ENVIRONMENT_ALL } from '../../../../common/environment_filter_values';
-import { TimeSeries } from '../../../../typings/timeseries';
-import { useApmServiceContext } from '../../../context/apm_service/use_apm_service_context';
-import { useUrlParams } from '../../../context/url_params_context/use_url_params';
 import { useEnvironmentsFetcher } from '../../../hooks/use_environments_fetcher';
-import { callApmApi } from '../../../services/rest/createCallApmApi';
-import { getResponseTimeTickFormatter } from '../../shared/charts/transaction_charts/helper';
-import { useFormatter } from '../../shared/charts/transaction_charts/use_formatter';
-import { ChartPreview } from '../chart_preview';
+import { useUrlParams } from '../../../context/url_params_context/use_url_params';
+import { ServiceAlertTrigger } from '../ServiceAlertTrigger';
+import { PopoverExpression } from '../ServiceAlertTrigger/PopoverExpression';
+import { ENVIRONMENT_ALL } from '../../../../common/environment_filter_values';
 import {
   EnvironmentField,
-  IsAboveField,
   ServiceField,
   TransactionTypeField,
+  IsAboveField,
 } from '../fields';
-import { getAbsoluteTimeRange } from '../helper';
-import { ServiceAlertTrigger } from '../service_alert_trigger';
-import { PopoverExpression } from '../service_alert_trigger/popover_expression';
+import { useApmServiceContext } from '../../../context/apm_service/use_apm_service_context';
 
 interface AlertParams {
   windowSize: number;
@@ -70,58 +63,14 @@ interface Props {
 export function TransactionDurationAlertTrigger(props: Props) {
   const { setAlertParams, alertParams, setAlertProperty } = props;
   const { urlParams } = useUrlParams();
-  const { transactionTypes, transactionType } = useApmServiceContext();
+  const { transactionTypes } = useApmServiceContext();
   const { serviceName } = useParams<{ serviceName?: string }>();
-  const { start, end } = urlParams;
+  const { start, end, transactionType } = urlParams;
   const { environmentOptions } = useEnvironmentsFetcher({
     serviceName,
     start,
     end,
   });
-  const {
-    aggregationType,
-    environment,
-    threshold,
-    windowSize,
-    windowUnit,
-  } = alertParams;
-
-  const { data } = useFetcher(() => {
-    if (windowSize && windowUnit) {
-      return callApmApi({
-        endpoint: 'GET /api/apm/alerts/chart_preview/transaction_duration',
-        params: {
-          query: {
-            ...getAbsoluteTimeRange(windowSize, windowUnit),
-            aggregationType,
-            environment,
-            serviceName,
-            transactionType: alertParams.transactionType,
-          },
-        },
-      });
-    }
-  }, [
-    aggregationType,
-    environment,
-    serviceName,
-    alertParams.transactionType,
-    windowSize,
-    windowUnit,
-  ]);
-
-  const { formatter } = useFormatter([{ data: data ?? [] } as TimeSeries]);
-  const yTickFormat = getResponseTimeTickFormatter(formatter);
-  // The threshold from the form is in ms. Convert to µs.
-  const thresholdMs = threshold * 1000;
-
-  const chartPreview = (
-    <ChartPreview
-      data={data}
-      threshold={thresholdMs}
-      yTickFormat={yTickFormat}
-    />
-  );
 
   if (!transactionTypes.length || !serviceName) {
     return null;
@@ -132,7 +81,9 @@ export function TransactionDurationAlertTrigger(props: Props) {
     aggregationType: 'avg',
     windowSize: 5,
     windowUnit: 'm',
-    transactionType,
+
+    // use the current transaction type or default to the first in the list
+    transactionType: transactionType || transactionTypes[0],
     environment: urlParams.environment || ENVIRONMENT_ALL.value,
   };
 
@@ -176,7 +127,7 @@ export function TransactionDurationAlertTrigger(props: Props) {
       unit={i18n.translate('xpack.apm.transactionDurationAlertTrigger.ms', {
         defaultMessage: 'ms',
       })}
-      onChange={(value) => setAlertParams('threshold', value || 0)}
+      onChange={(value) => setAlertParams('threshold', value)}
     />,
     <ForLastExpression
       onChangeWindowSize={(timeWindowSize) =>
@@ -197,9 +148,8 @@ export function TransactionDurationAlertTrigger(props: Props) {
   return (
     <ServiceAlertTrigger
       alertTypeName={ALERT_TYPES_CONFIG['apm.transaction_duration'].name}
-      chartPreview={chartPreview}
-      defaults={defaults}
       fields={fields}
+      defaults={defaults}
       setAlertParams={setAlertParams}
       setAlertProperty={setAlertProperty}
     />

x-pack/plugins/apm/public/components/alerting/service_alert_trigger/popover_expression/index.tsx renamed to x-pack/plugins/apm/public/components/alerting/ServiceAlertTrigger/PopoverExpression/index.tsx

@@ -11,8 +11,8 @@ import { ANOMALY_SEVERITY } from '../../../../../ml/common';
 import { ALERT_TYPES_CONFIG } from '../../../../common/alert_types';
 import { useEnvironmentsFetcher } from '../../../hooks/use_environments_fetcher';
 import { useUrlParams } from '../../../context/url_params_context/use_url_params';
-import { ServiceAlertTrigger } from '../service_alert_trigger';
-import { PopoverExpression } from '../service_alert_trigger/popover_expression';
+import { ServiceAlertTrigger } from '../ServiceAlertTrigger';
+import { PopoverExpression } from '../ServiceAlertTrigger/PopoverExpression';
 import {
   AnomalySeverity,
   SelectAnomalySeverity,