[Actionable Observability] - Add latency alert history chart on the Alert details page for APM

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

@@ -15,6 +15,7 @@ import { EuiIconTip } from '@elastic/eui';
 import {
   ALERT_DURATION,
   ALERT_END,
+  ALERT_RULE_UUID,
   ALERT_EVALUATION_THRESHOLD,
   ALERT_RULE_TYPE_ID,
 } from '@kbn/rule-data-utils';
@@ -48,6 +49,7 @@ import {
 import { getAggsTypeFromRule, isLatencyThresholdRuleType } from './helpers';
 import { filterNil } from '../../../shared/charts/latency_chart';
 import { errorRateI18n } from '../../../shared/charts/failed_transaction_rate_chart';
+import { LatencyAlertsHistoryChart } from './latency_alerts_history_chart';
 import {
   AlertActiveRect,
   AlertAnnotation,
@@ -443,6 +445,18 @@ export function AlertDetailsAppSection({
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <LatencyAlertsHistoryChart
+            ruleId={alert.fields[ALERT_RULE_UUID]}
+            serviceName={serviceName}
+            start={start}
+            end={end}
+            transactionType={transactionType}
+            latencyAggregationType={latencyAggregationType}
+            environment={environment}
+            timeZone={timeZone}
+          />
+        </EuiFlexItem>
       </ChartPointerEventContextProvider>
     </EuiFlexGroup>
   );

x-pack/plugins/apm/public/components/alerting/ui_components/alert_details_app_section/latency_alerts_history_chart.tsx

@@ -0,0 +1,182 @@
+/*
+ * 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 moment from 'moment';
+import { EuiPanel, EuiSpacer } from '@elastic/eui';
+import { EuiFlexGroup } from '@elastic/eui';
+import { EuiFlexItem } from '@elastic/eui';
+import { EuiTitle } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { EuiText } from '@elastic/eui';
+import { useFetchTriggeredAlertsHistory } from '@kbn/observability-plugin/public';
+import { getDurationFormatter } from '../../../../../common/utils/formatters';
+import { getLatencyChartSelector } from '../../../../selectors/latency_chart_selectors';
+import { LatencyAggregationType } from '../../../../../common/latency_aggregation_types';
+import { useFetcher } from '../../../../hooks/use_fetcher';
+import { TimeseriesChart } from '../../../shared/charts/timeseries_chart';
+import { filterNil } from '../../../shared/charts/latency_chart';
+import {
+  getMaxY,
+  getResponseTimeTickFormatter,
+} from '../../../shared/charts/transaction_charts/helper';
+
+interface LatencyAlertsHistoryChartProps {
+  serviceName: string;
+  start: string;
+  end: string;
+  transactionType?: string;
+  latencyAggregationType: LatencyAggregationType;
+  environment: string;
+  timeZone: string;
+  ruleId: string;
+}
+export function LatencyAlertsHistoryChart({
+  serviceName,
+  start,
+  end,
+  transactionType,
+  latencyAggregationType,
+  environment,
+  timeZone,
+  ruleId,
+}: LatencyAlertsHistoryChartProps) {
+  const { data, status } = useFetcher(
+    (callApmApi) => {
+      if (
+        serviceName &&
+        start &&
+        end &&
+        transactionType &&
+        latencyAggregationType
+      ) {
+        return callApmApi(
+          `GET /internal/apm/services/{serviceName}/transactions/charts/latency`,
+          {
+            params: {
+              path: { serviceName },
+              query: {
+                environment,
+                kuery: '',
+                start: moment().subtract(30, 'days').toISOString(),
+                end: moment().toISOString(),
+                transactionType,
+                transactionName: undefined,
+                latencyAggregationType,
+              },
+            },
+          }
+        );
+      }
+    },
+    [
+      end,
+      environment,
+      latencyAggregationType,
+      serviceName,
+      start,
+      transactionType,
+    ]
+  );
+  const memoizedData = useMemo(
+    () =>
+      getLatencyChartSelector({
+        latencyChart: data,
+        latencyAggregationType,
+        previousPeriodLabel: '',
+      }),
+    // It should only update when the data has changed
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [data]
+  );
+  const { currentPeriod, previousPeriod } = memoizedData;
+  const timeseriesLatency = [currentPeriod, previousPeriod].filter(filterNil);
+  const latencyMaxY = getMaxY(timeseriesLatency);
+  const latencyFormatter = getDurationFormatter(latencyMaxY);
+  const { triggeredAlertsData } = useFetchTriggeredAlertsHistory({
+    features: 'apm',
+    ruleId,
+  });
+  return (
+    <EuiPanel hasBorder={true}>
+      <EuiFlexGroup direction="column" gutterSize="none" responsive={false}>
+        <EuiFlexItem grow={false}>
+          <EuiTitle size="xs">
+            <h2>
+              {i18n.translate('xpack.apm.latencyChartHistory.chartTitle', {
+                defaultMessage: 'Kibana latency alerts history',
+              })}
+            </h2>
+          </EuiTitle>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiText size="s" color="subdued">
+            {i18n.translate('xpack.apm.latencyChartHistory.last30days', {
+              defaultMessage: 'Last 30 days',
+            })}
+          </EuiText>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiSpacer size="s" />
+
+      <EuiFlexGroup gutterSize="l">
+        <EuiFlexItem grow={false}>
+          <EuiFlexGroup gutterSize="xs" direction="column">
+            <EuiFlexItem grow={false}>
+              <EuiText color="danger">
+                <EuiTitle size="s">
+                  <h3>{triggeredAlertsData?.totalTriggeredAlerts}</h3>
+                </EuiTitle>
+              </EuiText>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiText size="s" color="subdued">
+                {i18n.translate(
+                  'xpack.apm.latencyChartHistory.alertsTriggered',
+                  {
+                    defaultMessage: 'Alerts triggered',
+                  }
+                )}
+              </EuiText>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFlexItem>
+        <EuiFlexGroup gutterSize="xs" direction="column">
+          <EuiFlexItem grow={false}>
+            <EuiText>
+              <EuiTitle size="s">
+                <h3>45 minutes</h3>
+              </EuiTitle>
+            </EuiText>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiText size="s" color="subdued">
+              {i18n.translate(
+                'xpack.apm.latencyChartHistory.avgTimeToRecover',
+                {
+                  defaultMessage: 'Avg time to recover',
+                }
+              )}
+            </EuiText>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlexGroup>
+      <EuiSpacer size="s" />
+
+      <TimeseriesChart
+        id="latencyChart"
+        height={200}
+        comparisonEnabled={false}
+        offset={''}
+        fetchStatus={status}
+        timeseries={timeseriesLatency}
+        yLabelFormat={getResponseTimeTickFormatter(latencyFormatter)}
+        timeZone={timeZone}
+      />
+    </EuiPanel>
+  );
+}

x-pack/plugins/observability/public/hooks/use_fetch_triggered_alert_history.ts

@@ -0,0 +1,175 @@
+/*
+ * 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 { AsApiContract } from '@kbn/actions-plugin/common';
+import { HttpSetup } from '@kbn/core/public';
+import { ALERT_RULE_UUID, ALERT_START, ALERT_TIME_RANGE } from '@kbn/rule-data-utils';
+import { BASE_RAC_ALERTS_API_PATH } from '@kbn/rule-registry-plugin/common';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useKibana } from '../utils/kibana_react';
+
+interface UseFetchTriggeredAlertsHistoryProps {
+  features: string;
+  ruleId: string;
+}
+interface FetchTriggeredAlertsHistory {
+  totalTriggeredAlerts: number;
+  histogramTriggeredAlerts: Array<{
+    key_as_string: string;
+    key: number;
+    doc_count: number;
+  }>;
+  error?: string;
+}
+
+interface TriggeredAlertsHistory {
+  isLoadingTriggeredAlertHistory: boolean;
+  errorTriggeredAlertHistory?: string;
+  triggeredAlertsData?: FetchTriggeredAlertsHistory;
+}
+export function useFetchTriggeredAlertsHistory({
+  features,
+  ruleId,
+}: UseFetchTriggeredAlertsHistoryProps) {
+  const { http } = useKibana().services;
+  const [triggeredAlertsHistory, setTriggeredAlertsHistory] = useState<TriggeredAlertsHistory>({
+    isLoadingTriggeredAlertHistory: true,
+  });
+  const isCancelledRef = useRef(false);
+  const abortCtrlRef = useRef(new AbortController());
+  const loadRuleAlertsAgg = useCallback(async () => {
+    isCancelledRef.current = false;
+    abortCtrlRef.current.abort();
+    abortCtrlRef.current = new AbortController();
+
+    try {
+      if (!features) return;
+      const { index } = await fetchIndexNameAPI({
+        http,
+        features,
+      });
+
+      const { totalTriggeredAlerts, histogramTriggeredAlerts, error } =
+        await fetchTriggeredAlertsHistory({
+          http,
+          index,
+          ruleId,
+          signal: abortCtrlRef.current.signal,
+        });
+
+      if (error) throw error;
+      if (!isCancelledRef.current) {
+        setTriggeredAlertsHistory((oldState: TriggeredAlertsHistory) => ({
+          ...oldState,
+          triggeredAlertsData: { totalTriggeredAlerts, histogramTriggeredAlerts },
+          isLoadingRuleAlertsAggs: false,
+        }));
+      }
+    } catch (error) {
+      if (!isCancelledRef.current) {
+        if (error.name !== 'AbortError') {
+          setTriggeredAlertsHistory((oldState: TriggeredAlertsHistory) => ({
+            ...oldState,
+            isLoadingRuleAlertsAggs: false,
+            errorTriggeredAlertHistory: error,
+            triggeredAlertsData: undefined,
+          }));
+        }
+      }
+    }
+  }, [features, http, ruleId]);
+  useEffect(() => {
+    loadRuleAlertsAgg();
+  }, [loadRuleAlertsAgg]);
+
+  return triggeredAlertsHistory;
+}
+
+interface IndexName {
+  index: string;
+}
+
+export async function fetchIndexNameAPI({
+  http,
+  features,
+}: {
+  http: HttpSetup;
+  features: string;
+}): Promise<IndexName> {
+  const res = await http.get<{ index_name: string[] }>(`${BASE_RAC_ALERTS_API_PATH}/index`, {
+    query: { features },
+  });
+  return {
+    index: res.index_name[0],
+  };
+}
+
+export async function fetchTriggeredAlertsHistory({
+  http,
+  index,
+  ruleId,
+  signal,
+}: {
+  http: HttpSetup;
+  index: string;
+  ruleId: string;
+  signal: AbortSignal;
+}): Promise<FetchTriggeredAlertsHistory> {
+  try {
+    const res = await http.post<AsApiContract<any>>(`${BASE_RAC_ALERTS_API_PATH}/find`, {
+      signal,
+      body: JSON.stringify({
+        index,
+        size: 0,
+        query: {
+          bool: {
+            must: [
+              {
+                term: {
+                  [ALERT_RULE_UUID]: ruleId,
+                },
+              },
+              {
+                range: {
+                  [ALERT_TIME_RANGE]: {
+                    gte: 'now-30d',
+                    lt: 'now',
+                  },
+                },
+              },
+            ],
+          },
+        },
+        aggs: {
+          histogramTriggeredAlerts: {
+            date_histogram: {
+              field: ALERT_START,
+              fixed_interval: '1d',
+              extended_bounds: {
+                min: 'now-30d',
+                max: 'now',
+              },
+            },
+          },
+        },
+      }),
+    });
+    const totalTriggeredAlerts = res?.hits.total.value;
+    const histogramTriggeredAlerts = res?.aggregations?.histogramTriggeredAlerts.buckets;
+    return {
+      totalTriggeredAlerts,
+      histogramTriggeredAlerts,
+    };
+  } catch (error) {
+    console.error(error);
+    return {
+      error,
+      totalTriggeredAlerts: 0,
+      histogramTriggeredAlerts: [],
+    };
+  }
+}

x-pack/plugins/observability/public/index.ts

@@ -121,3 +121,4 @@ export { ExploratoryViewContextProvider } from './components/shared/exploratory_
 export { fromQuery, toQuery } from './utils/url';
 
 export type { NavigationSection } from './services/navigation_registry';
+export { useFetchTriggeredAlertsHistory } from './hooks/use_fetch_triggered_alert_history';