[Uptime] One click simple monitor down alert (#73835)

* WIP

* added anomaly alert

* update types

* update types

* update

* types

* types

* update ML part

* update ML part

* update ML part

* unnecessary change

* icon for disable

* update test

* update api

* update labels

* resolve conflicts

* fix types

* fix editing alert

* fix types

* added actions column

* added code to add alert

* update anomaly message

* added anomaly alert test

* update

* update type

* fix ml legacy scoped client

* update

* WIP

* fix conflict

* added aria label

* Added deleteion loading

* fix type

* update

* update tests

* update

* update type

* fix types

* WIP

* added enabled alerts section

* add data

* update

* update tests

* fix test

* update i18n

* update i18n

* update i18n

* fix

* update message

* update

* update

* update

* revert

* update types

* added component

* update test

* incorporate PR feedback

* fix focus

* update drawer

* handle edge case

* improve btn text

* improve btn text

* use switch instead of icons

* update snapshot

* use compressed form

* fix type

* update snapshot

* update snapshot

* update test

* update test

* PR feedback

* fix test and type

* remove delete action

* remove unnecessary function

Co-authored-by: Elastic Machine <[email protected]>

Author: shahzad31

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

@@ -21,6 +21,7 @@ export {
   AlertTypeParamsExpressionProps,
   ValidationResult,
   ActionVariable,
+  ActionConnector,
 } from './types';
 export {
   ConnectorAddFlyout,

x-pack/plugins/uptime/common/constants/rest_api.ts

@@ -24,6 +24,9 @@ export enum API_URLS {
   ML_DELETE_JOB = `/api/ml/jobs/delete_jobs`,
   ML_CAPABILITIES = '/api/ml/ml_capabilities',
   ML_ANOMALIES_RESULT = `/api/ml/results/anomalies_table_data`,
+
+  ALERT_ACTIONS = '/api/actions',
+  CREATE_ALERT = '/api/alerts/alert',
   ALERT = '/api/alerts/alert/',
   ALERTS_FIND = '/api/alerts/_find',
 }

x-pack/plugins/uptime/common/constants/settings_defaults.ts

@@ -10,4 +10,5 @@ export const DYNAMIC_SETTINGS_DEFAULTS: DynamicSettings = {
   heartbeatIndices: 'heartbeat-8*',
   certAgeThreshold: 730,
   certExpirationThreshold: 30,
+  defaultConnectors: [],
 };

x-pack/plugins/uptime/common/runtime_types/alerts/status_check.ts

@@ -25,6 +25,7 @@ export const AtomicStatusCheckParamsType = t.intersection([
     search: t.string,
     filters: StatusCheckFiltersType,
     shouldCheckStatus: t.boolean,
+    isAutoGenerated: t.boolean,
   }),
 ]);
 
@@ -34,6 +35,7 @@ export const StatusCheckParamsType = t.intersection([
   t.partial({
     filters: t.string,
     shouldCheckStatus: t.boolean,
+    isAutoGenerated: t.boolean,
   }),
   t.type({
     locations: t.array(t.string),

x-pack/plugins/uptime/common/runtime_types/dynamic_settings.ts

@@ -10,6 +10,7 @@ export const DynamicSettingsType = t.type({
   heartbeatIndices: t.string,
   certAgeThreshold: t.number,
   certExpirationThreshold: t.number,
+  defaultConnectors: t.array(t.string),
 });
 
 export const DynamicSettingsSaveType = t.intersection([

x-pack/plugins/uptime/common/runtime_types/monitor/details.ts

@@ -18,7 +18,6 @@ export type MonitorError = t.TypeOf<typeof MonitorErrorType>;
 
 export const MonitorDetailsType = t.intersection([
   t.type({ monitorId: t.string }),
-  t.partial({ error: MonitorErrorType }),
-  t.partial({ timestamp: t.string }),
+  t.partial({ error: MonitorErrorType, timestamp: t.string, alerts: t.unknown }),
 ]);
 export type MonitorDetails = t.TypeOf<typeof MonitorDetailsType>;

x-pack/plugins/uptime/public/components/common/react_router_helpers/__tests__/link_for_eui.test.tsx

@@ -8,10 +8,10 @@ import React from 'react';
 import { shallow, mount } from 'enzyme';
 import { EuiLink, EuiButton } from '@elastic/eui';
 
-import '../../../../lib/__mocks__/react_router_history.mock';
+import '../../../../lib/__mocks__/ut_router_history.mock';
 
 import { ReactRouterEuiLink, ReactRouterEuiButton } from '../link_for_eui';
-import { mockHistory } from '../../../../lib/__mocks__';
+import { mockHistory } from '../../../../lib/__mocks__/ut_router_history.mock';
 
 describe('EUI & React Router Component Helpers', () => {
   beforeEach(() => {

x-pack/plugins/uptime/public/components/monitor/ml/manage_ml_job.tsx

@@ -22,7 +22,7 @@ import { useMonitorId } from '../../../hooks';
 import { setAlertFlyoutType, setAlertFlyoutVisible } from '../../../state/actions';
 import { useAnomalyAlert } from './use_anomaly_alert';
 import { ConfirmAlertDeletion } from './confirm_alert_delete';
-import { deleteAlertAction } from '../../../state/actions/alerts';
+import { deleteAnomalyAlertAction } from '../../../state/alerts/alerts';
 
 interface Props {
   hasMLJob: boolean;
@@ -52,7 +52,7 @@ export const ManageMLJobComponent = ({ hasMLJob, onEnableJob, onJobDelete }: Pro
   const [isConfirmAlertDeleteOpen, setIsConfirmAlertDeleteOpen] = useState(false);
 
   const deleteAnomalyAlert = () =>
-    dispatch(deleteAlertAction.get({ alertId: anomalyAlert?.id as string }));
+    dispatch(deleteAnomalyAlertAction.get({ alertId: anomalyAlert?.id as string }));
 
   const showLoading = isMLJobCreating || isMLJobLoading;
 

x-pack/plugins/uptime/public/components/monitor/ml/use_anomaly_alert.ts

@@ -6,10 +6,10 @@
 
 import { useContext, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { getExistingAlertAction } from '../../../state/actions/alerts';
-import { alertSelector, selectAlertFlyoutVisibility } from '../../../state/selectors';
+import { selectAlertFlyoutVisibility } from '../../../state/selectors';
 import { UptimeRefreshContext } from '../../../contexts';
 import { useMonitorId } from '../../../hooks';
+import { anomalyAlertSelector, getAnomalyAlertAction } from '../../../state/alerts/alerts';
 
 export const useAnomalyAlert = () => {
   const { lastRefresh } = useContext(UptimeRefreshContext);
@@ -18,12 +18,12 @@ export const useAnomalyAlert = () => {
 
   const monitorId = useMonitorId();
 
-  const { data: anomalyAlert } = useSelector(alertSelector);
+  const { data: anomalyAlert } = useSelector(anomalyAlertSelector);
 
   const alertFlyoutVisible = useSelector(selectAlertFlyoutVisibility);
 
   useEffect(() => {
-    dispatch(getExistingAlertAction.get({ monitorId }));
+    dispatch(getAnomalyAlertAction.get({ monitorId }));
   }, [monitorId, lastRefresh, dispatch, alertFlyoutVisible]);
 
   return anomalyAlert;