[Metrics UI] Add preview feature for metric threshold alerts

x-pack/plugins/infra/public/alerting/metric_threshold/components/expression.tsx

@@ -4,25 +4,38 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { debounce } from 'lodash';
+import { debounce, pick } from 'lodash';
+import * as rt from 'io-ts';
+import { HttpSetup } from 'src/core/public';
 import React, { ChangeEvent, useCallback, useMemo, useEffect, useState } from 'react';
 import {
   EuiSpacer,
   EuiText,
   EuiFormRow,
+  EuiButton,
   EuiButtonEmpty,
   EuiCheckbox,
   EuiToolTip,
   EuiIcon,
   EuiFieldSearch,
+  EuiSelect,
+  EuiFlexGroup,
+  EuiFlexItem,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 import {
   Comparator,
   Aggregators,
+  METRIC_THRESHOLD_ALERT_TYPE_ID,
   // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 } from '../../../../server/lib/alerting/metric_threshold/types';
+import {
+  INFRA_ALERT_PREVIEW_PATH,
+  alertPreviewRequestParamsRT,
+  alertPreviewSuccessResponsePayloadRT,
+  // eslint-disable-next-line @kbn/eslint/no-restricted-paths
+} from '../../../../server/routes/alerting/preview';
 import {
   ForLastExpression,
   // eslint-disable-next-line @kbn/eslint/no-restricted-paths
@@ -40,6 +53,7 @@ import { convertKueryToElasticSearchQuery } from '../../../utils/kuery';
 import { ExpressionRow } from './expression_row';
 import { AlertContextMeta, TimeUnit, MetricExpression } from '../types';
 import { ExpressionChart } from './expression_chart';
+import { validateMetricThreshold } from './validation';
 
 const FILTER_TYPING_DEBOUNCE_MS = 500;
 
@@ -66,6 +80,22 @@ const defaultExpression = {
   timeUnit: 'm',
 } as MetricExpression;
 
+async function getAlertPreview({
+  fetch,
+  params,
+}: {
+  fetch: HttpSetup['fetch'];
+  params: rt.TypeOf<typeof alertPreviewRequestParamsRT>;
+}): Promise<rt.TypeOf<typeof alertPreviewSuccessResponsePayloadRT>> {
+  return await fetch(`${INFRA_ALERT_PREVIEW_PATH}`, {
+    method: 'POST',
+    body: JSON.stringify({
+      ...params,
+      alertType: METRIC_THRESHOLD_ALERT_TYPE_ID,
+    }),
+  });
+}
+
 export const Expressions: React.FC<Props> = (props) => {
   const { setAlertParams, alertParams, errors, alertsContext } = props;
   const { source, createDerivedIndexPattern } = useSourceViaHttp({
@@ -75,6 +105,13 @@ export const Expressions: React.FC<Props> = (props) => {
     toastWarning: alertsContext.toastNotifications.addWarning,
   });
 
+  const [previewLookbackInterval, setPreviewLookbackInterval] = useState<string>('h');
+  const [isPreviewLoading, setIsPreviewLoading] = useState<boolean>(false);
+  const [previewError, setPreviewError] = useState<boolean>(false);
+  const [previewResult, setPreviewResult] = useState<rt.TypeOf<
+    typeof alertPreviewSuccessResponsePayloadRT
+  > | null>(null);
+
   const [timeSize, setTimeSize] = useState<number | undefined>(1);
   const [timeUnit, setTimeUnit] = useState<TimeUnit>('m');
   const derivedIndexPattern = useMemo(() => createDerivedIndexPattern('metrics'), [
@@ -240,6 +277,13 @@ export const Expressions: React.FC<Props> = (props) => {
     [onFilterChange]
   );
 
+  const isPreviewDisabled = useMemo(() => {
+    const validationResult = validateMetricThreshold({ criteria: alertParams.criteria } as any);
+    return Object.values(validationResult.errors).some((result) =>
+      Object.values(result).some((arr) => Array.isArray(arr) && arr.length)
+    );
+  }, [alertParams.criteria]);
+
   return (
     <>
       <EuiSpacer size={'m'} />
@@ -374,6 +418,168 @@ export const Expressions: React.FC<Props> = (props) => {
           }}
         />
       </EuiFormRow>
+
+      <EuiSpacer size={'m'} />
+      <EuiFormRow
+        label={i18n.translate('xpack.infra.metrics.alertFlyout.previewLabel', {
+          defaultMessage: 'Preview',
+        })}
+        fullWidth
+        compressed
+      >
+        <>
+          <EuiFlexGroup>
+            <EuiFlexItem>
+              <EuiSelect
+                id="selectPreviewLookbackInterval"
+                value={previewLookbackInterval}
+                onChange={(e) => {
+                  setPreviewLookbackInterval(e.target.value);
+                  setPreviewResult(null);
+                }}
+                options={previewOptions}
+              />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiButton
+                isLoading={isPreviewLoading}
+                isDisabled={isPreviewDisabled}
+                onClick={async () => {
+                  setIsPreviewLoading(true);
+                  setPreviewResult(null);
+                  setPreviewError(false);
+                  try {
+                    const result = await getAlertPreview({
+                      fetch: alertsContext.http.fetch,
+                      params: {
+                        ...pick(alertParams, 'criteria', 'groupBy', 'filterQuery'),
+                        sourceId: alertParams.sourceId,
+                        lookback: previewLookbackInterval as 'h' | 'd' | 'w' | 'M',
+                      },
+                    });
+                    setPreviewResult(result);
+                  } catch (e) {
+                    setPreviewError(true);
+                  } finally {
+                    setIsPreviewLoading(false);
+                  }
+                }}
+              >
+                {i18n.translate('xpack.infra.metrics.alertFlyout.testAlertTrigger', {
+                  defaultMessage: 'Test alert trigger',
+                })}
+              </EuiButton>
+            </EuiFlexItem>
+            <EuiSpacer size={'s'} />
+          </EuiFlexGroup>
+          {previewResult && (
+            <>
+              <EuiSpacer size={'s'} />
+              <EuiText>
+                <FormattedMessage
+                  id="xpack.infra.metrics.alertFlyout.alertPreviewResult"
+                  defaultMessage="This alert would have fired {fired} {timeOrTimes} in the past {lookback}"
+                  values={{
+                    timeOrTimes:
+                      previewResult.resultTotals.fired === 1 ? firedTimeLabel : firedTimesLabel,
+                    fired: <strong>{previewResult.resultTotals.fired}</strong>,
+                    lookback: previewOptions.find((e) => e.value === previewLookbackInterval)
+                      ?.shortText,
+                  }}
+                />{' '}
+                {alertParams.groupBy ? (
+                  <FormattedMessage
+                    id="xpack.infra.metrics.alertFlyout.alertPreviewGroups"
+                    defaultMessage="across {numberOfGroups} {groupName}{plural}."
+                    values={{
+                      numberOfGroups: <strong>{previewResult.numberOfGroups}</strong>,
+                      groupName: alertParams.groupBy,
+                      plural: previewResult.numberOfGroups !== 1 ? 's' : '',
+                    }}
+                  />
+                ) : (
+                  <FormattedMessage
+                    id="xpack.infra.metrics.alertFlyout.alertPreviewAllData"
+                    defaultMessage="across the entire infrastructure."
+                  />
+                )}
+              </EuiText>
+              {alertParams.alertOnNoData && previewResult.resultTotals.noData && (
+                <>
+                  <EuiSpacer size={'s'} />
+                  <EuiText>
+                    <FormattedMessage
+                      id="xpack.infra.metrics.alertFlyout.alertPreviewNoDataResult"
+                      defaultMessage="There were {noData} results of no data."
+                      values={{
+                        noData: <strong>{previewResult.resultTotals.noData}</strong>,
+                      }}
+                    />
+                  </EuiText>
+                </>
+              )}
+            </>
+          )}
+          {previewError && (
+            <>
+              <EuiSpacer size={'s'} />
+              <EuiText>
+                <FormattedMessage
+                  id="xpack.infra.metrics.alertFlyout.alertPreviewError"
+                  defaultMessage="An error occurred when trying to preview this alert trigger."
+                />
+              </EuiText>
+            </>
+          )}
+        </>
+      </EuiFormRow>
+      <EuiSpacer size={'m'} />
     </>
   );
 };
+
+const previewOptions = [
+  {
+    value: 'h',
+    text: i18n.translate('xpack.infra.metrics.alertFlyout.lastHourLabel', {
+      defaultMessage: 'Last hour',
+    }),
+    shortText: i18n.translate('xpack.infra.metrics.alertFlyout.hourLabel', {
+      defaultMessage: 'hour',
+    }),
+  },
+  {
+    value: 'd',
+    text: i18n.translate('xpack.infra.metrics.alertFlyout.lastDayLabel', {
+      defaultMessage: 'Last day',
+    }),
+    shortText: i18n.translate('xpack.infra.metrics.alertFlyout.dayLabel', {
+      defaultMessage: 'day',
+    }),
+  },
+  {
+    value: 'w',
+    text: i18n.translate('xpack.infra.metrics.alertFlyout.lastWeekLabel', {
+      defaultMessage: 'Last week',
+    }),
+    shortText: i18n.translate('xpack.infra.metrics.alertFlyout.weekLabel', {
+      defaultMessage: 'week',
+    }),
+  },
+  {
+    value: 'M',
+    text: i18n.translate('xpack.infra.metrics.alertFlyout.lastMonthLabel', {
+      defaultMessage: 'Last month',
+    }),
+    shortText: i18n.translate('xpack.infra.metrics.alertFlyout.monthLabel', {
+      defaultMessage: 'month',
+    }),
+  },
+];
+
+const firedTimeLabel = i18n.translate('xpack.infra.metrics.alertFlyout.firedTime', {
+  defaultMessage: 'time',
+});
+const firedTimesLabel = i18n.translate('xpack.infra.metrics.alertFlyout.firedTimes', {
+  defaultMessage: 'times',
+});

x-pack/plugins/infra/server/infra_server.ts

@@ -32,6 +32,7 @@ import {
 import { initInventoryMetaRoute } from './routes/inventory_metadata';
 import { initLogSourceConfigurationRoutes, initLogSourceStatusRoutes } from './routes/log_sources';
 import { initSourceRoute } from './routes/source';
+import { initAlertPreviewRoute } from './routes/alerting';
 
 export const initInfraServer = (libs: InfraBackendLibs) => {
   const schema = makeExecutableSchema({
@@ -64,4 +65,5 @@ export const initInfraServer = (libs: InfraBackendLibs) => {
   initInventoryMetaRoute(libs);
   initLogSourceConfigurationRoutes(libs);
   initLogSourceStatusRoutes(libs);
+  initAlertPreviewRoute(libs);
 };

x-pack/plugins/infra/server/lib/alerting/metric_threshold/create_percentile_aggregation.ts → x-pack/plugins/infra/server/lib/alerting/metric_threshold/lib/create_percentile_aggregation.ts

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { Aggregators } from './types';
+import { Aggregators } from '../types';
 export const createPercentileAggregation = (
   type: Aggregators.P95 | Aggregators.P99,
   field: string