[Synthetics] Added alerts page

x-pack/plugins/observability_solution/synthetics/common/constants/ui.ts

@@ -12,6 +12,7 @@ export const MONITOR_NOT_FOUND_ROUTE = '/monitor-not-found/:monitorId';
 export const MONITOR_HISTORY_ROUTE = '/monitor/:monitorId/history';
 
 export const MONITOR_ERRORS_ROUTE = '/monitor/:monitorId/errors';
+export const MONITOR_ALERTS_ROUTE = '/monitor/:monitorId/alerts';
 
 export const MONITOR_ADD_ROUTE = '/add-monitor';
 

x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitor_details/hooks/use_fetch_active_alerts.ts

@@ -0,0 +1,63 @@
+/*
+ * 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 { BASE_RAC_ALERTS_API_PATH } from '@kbn/rule-registry-plugin/common';
+import { AlertConsumers } from '@kbn/rule-registry-plugin/common/technical_rule_data_field_names';
+import { useFetcher } from '@kbn/observability-shared-plugin/public';
+import { useKibana } from '@kbn/kibana-react-plugin/public';
+import { useParams } from 'react-router-dom';
+import type { ESSearchResponse } from '@kbn/es-types';
+import { useSelectedLocation } from './use_selected_location';
+
+import { ClientPluginsStart } from '../../../../../plugin';
+
+export function useFetchActiveAlerts() {
+ const { http } = useKibana<ClientPluginsStart>().services;
+
+ const { monitorId: configId } = useParams<{ monitorId: string }>();
+
+ const selectedLocation = useSelectedLocation();
+
+ const { loading, data } = useFetcher(async () => {
+ return await http.post<ESSearchResponse>(`${BASE_RAC_ALERTS_API_PATH}/find`, {
+ body: JSON.stringify({
+ feature_ids: [AlertConsumers.UPTIME, AlertConsumers.OBSERVABILITY],
+ size: 0,
+ track_total_hits: true,
+ query: {
+ bool: {
+ filter: [
+ {
+ range: {
+ '@timestamp': {
+ gte: 'now-24h/h',
+ },
+ },
+ },
+ {
+ term: {
+ configId,
+ },
+ },
+ {
+ term: {
+ 'location.id': selectedLocation?.id,
+ },
+ },
+ ],
+ },
+ },
+ }),
+ });
+ }, [configId, http, selectedLocation?.id]);
+
+ return {
+ loading,
+ data,
+ numberOfAlerts: data?.hits?.total.value ?? 0,
+ };
+}

x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitor_details/monitor_alerts/alerts_icon.tsx

@@ -0,0 +1,15 @@
+/*
+ * 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 from 'react';
+import { EuiBadge } from '@elastic/eui';
+import { useFetchActiveAlerts } from '../hooks/use_fetch_active_alerts';
+
+export const MonitorAlertsIcon = () => {
+ const { numberOfAlerts } = useFetchActiveAlerts();
+
+ return numberOfAlerts > 0 ? <EuiBadge color="danger">{numberOfAlerts}</EuiBadge> : null;
+};

x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitor_details/monitor_alerts/monitor_detail_alerts.tsx

@@ -0,0 +1,55 @@
+/*
+ * 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 { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiLoadingSpinner } from '@elastic/eui';
+import React from 'react';
+import { AlertConsumers } from '@kbn/rule-data-utils';
+import { useKibana } from '@kbn/kibana-react-plugin/public';
+import { useParams } from 'react-router-dom';
+import { useSelectedLocation } from '../hooks/use_selected_location';
+import { ClientPluginsStart } from '../../../../../plugin';
+
+export const MONITOR_ALERTS_TABLE_ID = 'xpack.observability.slo.sloDetails.alertTable';
+
+export function MonitorDetailsAlerts() {
+ const {
+ triggersActionsUi: { alertsTableConfigurationRegistry, getAlertsStateTable: AlertsStateTable },
+ observability: { observabilityRuleTypeRegistry },
+ } = useKibana<ClientPluginsStart>().services;
+
+ const { monitorId: configId } = useParams<{ monitorId: string }>();
+
+ const selectedLocation = useSelectedLocation();
+
+ if (!selectedLocation) {
+ return <EuiLoadingSpinner size="xl" />;
+ }
+
+ return (
+ <>
+ <EuiSpacer size="l" />
+ <EuiFlexGroup direction="column" gutterSize="xl">
+ <EuiFlexItem>
+ <AlertsStateTable
+ alertsTableConfigurationRegistry={alertsTableConfigurationRegistry}
+ configurationId={AlertConsumers.OBSERVABILITY}
+ id={MONITOR_ALERTS_TABLE_ID}
+ data-test-subj="monitorAlertsTable"
+ featureIds={[AlertConsumers.UPTIME, AlertConsumers.OBSERVABILITY]}
+ query={{
+ bool: {
+ filter: [{ term: { configId } }, { term: { 'location.id': selectedLocation?.id } }],
+ },
+ }}
+ showAlertStatusWithFlapping
+ pageSize={100}
+ cellContext={{ observabilityRuleTypeRegistry }}
+ />
+ </EuiFlexItem>
+ </EuiFlexGroup>
+ </>
+ );
+}

x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitor_details/monitor_details_location.tsx

@@ -9,7 +9,11 @@ import React, { useCallback } from 'react';
 import { useParams, useRouteMatch } from 'react-router-dom';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { useGetUrlParams } from '../../hooks';
-import { MONITOR_ERRORS_ROUTE, MONITOR_HISTORY_ROUTE } from '../../../../../common/constants';
+import {
+ MONITOR_ALERTS_ROUTE,
+ MONITOR_ERRORS_ROUTE,
+ MONITOR_HISTORY_ROUTE,
+} from '../../../../../common/constants';
 import { ClientPluginsStart } from '../../../../plugin';
 import { PLUGIN } from '../../../../../common/constants/plugin';
 import { useSelectedLocation } from './hooks/use_selected_location';
@@ -28,6 +32,7 @@ export const MonitorDetailsLocation = ({ isDisabled }: { isDisabled?: boolean })
 
  const isErrorsTab = useRouteMatch(MONITOR_ERRORS_ROUTE);
  const isHistoryTab = useRouteMatch(MONITOR_HISTORY_ROUTE);
+ const isAlertsTab = useRouteMatch(MONITOR_ALERTS_ROUTE);
 
  const params = `&dateRangeStart=${dateRangeStart}&dateRangeEnd=${dateRangeEnd}`;
 
@@ -39,7 +44,11 @@ export const MonitorDetailsLocation = ({ isDisabled }: { isDisabled?: boolean })
  selectedLocation={selectedLocation}
  onChange={useCallback(
  (id, label) => {
- if (isErrorsTab) {
+ if (isAlertsTab) {
+ services.application.navigateToApp(PLUGIN.SYNTHETICS_PLUGIN_ID, {
+ path: `/monitor/${monitorId}/alerts?locationId=${id}${params}`,
+ });
+ } else if (isErrorsTab) {
  services.application.navigateToApp(PLUGIN.SYNTHETICS_PLUGIN_ID, {
  path: `/monitor/${monitorId}/errors?locationId=${id}${params}`,
  });
@@ -53,7 +62,7 @@ export const MonitorDetailsLocation = ({ isDisabled }: { isDisabled?: boolean })
  });
  }
  },
- [isErrorsTab, isHistoryTab, monitorId, params, services.application]
+ [isAlertsTab, isErrorsTab, isHistoryTab, monitorId, params, services.application]
  )}
  />
  );

x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitor_details/route_config.tsx

@@ -10,6 +10,8 @@ import React from 'react';
 import { useHistory, useRouteMatch } from 'react-router-dom';
 import { EuiIcon, EuiPageHeaderProps } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
+import { MonitorDetailsAlerts } from './monitor_alerts/monitor_detail_alerts';
+import { MonitorAlertsIcon } from './monitor_alerts/alerts_icon';
 import { RefreshButton } from '../common/components/refresh_button';
 import { MonitorNotFoundPage } from './monitor_not_found_page';
 import { MonitorDetailsPageTitle } from './monitor_details_page_title';
@@ -23,6 +25,7 @@ import { MonitorHistory } from './monitor_history/monitor_history';
 import { MonitorSummary } from './monitor_summary/monitor_summary';
 import { EditMonitorLink } from './monitor_summary/edit_monitor_link';
 import {
+ MONITOR_ALERTS_ROUTE,
  MONITOR_ERRORS_ROUTE,
  MONITOR_HISTORY_ROUTE,
  MONITOR_NOT_FOUND_ROUTE,
@@ -67,6 +70,16 @@ export const getMonitorDetailsRoute = (
  dataTestSubj: 'syntheticsMonitorHistoryPage',
  pageHeader: getMonitorSummaryHeader(history, syntheticsPath, 'errors'),
  },
+ {
+ title: i18n.translate('xpack.synthetics.monitorErrors.title', {
+ defaultMessage: 'Synthetics Monitor Alerts | {baseTitle}',
+ values: { baseTitle },
+ }),
+ path: MONITOR_ALERTS_ROUTE,
+ component: MonitorDetailsAlerts,
+ dataTestSubj: 'syntheticsMonitorAlertsPage',
+ pageHeader: getMonitorSummaryHeader(history, syntheticsPath, 'alerts'),
+ },
  {
  title: i18n.translate('xpack.synthetics.monitorNotFound.title', {
  defaultMessage: 'Synthetics Monitor Not Found | {baseTitle}',
@@ -100,7 +113,7 @@ const getMonitorsBreadcrumb = (syntheticsPath: string) => ({
 const getMonitorSummaryHeader = (
  history: ReturnType<typeof useHistory>,
  syntheticsPath: string,
- selectedTab: 'overview' | 'history' | 'errors'
+ selectedTab: 'overview' | 'history' | 'errors' | 'alerts'
 ): EuiPageHeaderProps => {
  // Not a component, but it doesn't matter. Hooks are just functions
  const match = useRouteMatch<{ monitorId: string }>(MONITOR_ROUTE); // eslint-disable-line react-hooks/rules-of-hooks
@@ -149,6 +162,15 @@ const getMonitorSummaryHeader = (
  href: `${syntheticsPath}${MONITOR_ERRORS_ROUTE.replace(':monitorId', monitorId)}${search}`,
  'data-test-subj': 'syntheticsMonitorErrorsTab',
  },
+ {
+ label: i18n.translate('xpack.synthetics.monitorAlertsTab.title', {
+ defaultMessage: 'Alerts',
+ }),
+ prepend: <MonitorAlertsIcon />,
+ isSelected: selectedTab === 'alerts',
+ href: `${syntheticsPath}${MONITOR_ALERTS_ROUTE.replace(':monitorId', monitorId)}${search}`,
+ 'data-test-subj': 'syntheticsMonitorAlertsTab',
+ },
  ],
  };
 };