[7.x] [Uptime] Add Alerting UI (#57919) (#60657)

Backports the following commits to 7.x:

    [Uptime] Add Alerting UI (#57919)

x-pack/.i18nrc.json

@@ -42,7 +42,7 @@
     "xpack.transform": "plugins/transform",
     "xpack.triggersActionsUI": "plugins/triggers_actions_ui",
     "xpack.upgradeAssistant": "plugins/upgrade_assistant",
-    "xpack.uptime": "legacy/plugins/uptime",
+    "xpack.uptime": ["plugins/uptime", "legacy/plugins/uptime"],
     "xpack.watcher": "plugins/watcher"
   },
   "translations": [

x-pack/legacy/plugins/uptime/README.md

@@ -63,3 +63,13 @@ You can login with username `elastic` and password `changeme` by default.
 
 If you want to freeze a UI or API test you can include an async call like `await new Promise(r => setTimeout(r, 1000 * 60))`
 to freeze the execution for 60 seconds if you need to click around or check things in the state that is loaded.
+
+#### Running --ssl tests
+
+Some of our tests require there to be an SSL connection between Kibana and Elasticsearch.
+
+We can run these tests like described above, but with some special config.
+
+`node scripts/functional_tests_server.js --config=test/functional_with_es_ssl/config.ts`
+
+`node scripts/functional_test_runner.js --config=test/functional_with_es_ssl/config.ts`

x-pack/legacy/plugins/uptime/common/constants/alerts.ts

@@ -0,0 +1,19 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+interface ActionGroupDefinition {
+  id: string;
+  name: string;
+}
+
+type ActionGroupDefinitions = Record<string, ActionGroupDefinition>;
+
+export const ACTION_GROUP_DEFINITIONS: ActionGroupDefinitions = {
+  MONITOR_STATUS: {
+    id: 'xpack.uptime.alerts.actionGroups.monitorStatus',
+    name: 'Uptime Down Monitor',
+  },
+};

x-pack/legacy/plugins/uptime/common/constants/index.ts

@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+export { ACTION_GROUP_DEFINITIONS } from './alerts';
 export { CHART_FORMAT_LIMITS } from './chart_format_limits';
 export { CLIENT_DEFAULTS } from './client_defaults';
 export { CONTEXT_DEFAULTS } from './context_defaults';

x-pack/legacy/plugins/uptime/common/constants/index_names.ts

@@ -6,5 +6,4 @@
 
 export const INDEX_NAMES = {
   HEARTBEAT: 'heartbeat*',
-  HEARTBEAT_STATES: 'heartbeat-states-7*',
 };

x-pack/legacy/plugins/uptime/common/runtime_types/alerts/index.ts

@@ -0,0 +1,12 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export {
+  StatusCheckAlertStateType,
+  StatusCheckAlertState,
+  StatusCheckExecutorParamsType,
+  StatusCheckExecutorParams,
+} from './status_check';

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

@@ -0,0 +1,39 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import * as t from 'io-ts';
+
+export const StatusCheckAlertStateType = t.intersection([
+  t.partial({
+    currentTriggerStarted: t.string,
+    firstTriggeredAt: t.string,
+    lastTriggeredAt: t.string,
+    lastResolvedAt: t.string,
+  }),
+  t.type({
+    firstCheckedAt: t.string,
+    lastCheckedAt: t.string,
+    isTriggered: t.boolean,
+  }),
+]);
+
+export type StatusCheckAlertState = t.TypeOf<typeof StatusCheckAlertStateType>;
+
+export const StatusCheckExecutorParamsType = t.intersection([
+  t.partial({
+    filters: t.string,
+  }),
+  t.type({
+    locations: t.array(t.string),
+    numTimes: t.number,
+    timerange: t.type({
+      from: t.string,
+      to: t.string,
+    }),
+  }),
+]);
+
+export type StatusCheckExecutorParams = t.TypeOf<typeof StatusCheckExecutorParamsType>;

x-pack/legacy/plugins/uptime/common/runtime_types/index.ts

@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+export * from './alerts';
 export * from './common';
 export * from './monitor';
 export * from './overview_filters';

x-pack/legacy/plugins/uptime/index.ts

@@ -14,7 +14,7 @@ export const uptime = (kibana: any) =>
     configPrefix: 'xpack.uptime',
     id: PLUGIN.ID,
     publicDir: resolve(__dirname, 'public'),
-    require: ['kibana', 'elasticsearch', 'xpack_main'],
+    require: ['alerting', 'kibana', 'elasticsearch', 'xpack_main'],
     uiExports: {
       app: {
         description: i18n.translate('xpack.uptime.pluginDescription', {

x-pack/legacy/plugins/uptime/public/apps/index.ts

@@ -8,8 +8,9 @@ import { npSetup } from 'ui/new_platform';
 import { Plugin } from './plugin';
 import 'uiExports/embeddableFactories';
 
-new Plugin({
+const plugin = new Plugin({
   opaqueId: Symbol('uptime'),
   env: {} as any,
   config: { get: () => ({} as any) },
-}).setup(npSetup);
+});
+plugin.setup(npSetup);

x-pack/legacy/plugins/uptime/public/apps/plugin.ts

@@ -36,6 +36,7 @@ export class Plugin {
   public setup(setup: SetupObject) {
     const { core, plugins } = setup;
     const { home } = plugins;
+
     home.featureCatalogue.register({
       category: FeatureCatalogueCategory.DATA,
       description: PLUGIN.DESCRIPTION,
@@ -45,6 +46,7 @@ export class Plugin {
       showOnHomePage: true,
       title: PLUGIN.TITLE,
     });
+
     core.application.register({
       id: PLUGIN.ID,
       euiIconType: 'uptimeApp',

x-pack/legacy/plugins/uptime/public/components/connected/alerts/alert_monitor_status.tsx

@@ -0,0 +1,43 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { DataPublicPluginSetup } from 'src/plugins/data/public';
+import { selectMonitorStatusAlert } from '../../../state/selectors';
+import { AlertMonitorStatusComponent } from '../../functional/alerts/alert_monitor_status';
+
+interface Props {
+  autocomplete: DataPublicPluginSetup['autocomplete'];
+  enabled: boolean;
+  numTimes: number;
+  setAlertParams: (key: string, value: any) => void;
+  timerange: {
+    from: string;
+    to: string;
+  };
+}
+
+export const AlertMonitorStatus = ({
+  autocomplete,
+  enabled,
+  numTimes,
+  setAlertParams,
+  timerange,
+}: Props) => {
+  const { filters, locations } = useSelector(selectMonitorStatusAlert);
+  return (
+    <AlertMonitorStatusComponent
+      autocomplete={autocomplete}
+      enabled={enabled}
+      filters={filters}
+      locations={locations}
+      numTimes={numTimes}
+      setAlertParams={setAlertParams}
+      timerange={timerange}
+    />
+  );
+};

x-pack/legacy/plugins/uptime/public/components/connected/alerts/index.ts

@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export { AlertMonitorStatus } from './alert_monitor_status';
+export { ToggleAlertFlyoutButton } from './toggle_alert_flyout_button';
+export { UptimeAlertsFlyoutWrapper } from './uptime_alerts_flyout_wrapper';

x-pack/legacy/plugins/uptime/public/components/connected/alerts/toggle_alert_flyout_button.tsx

@@ -0,0 +1,19 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import { ToggleAlertFlyoutButtonComponent } from '../../functional';
+import { setAlertFlyoutVisible } from '../../../state/actions';
+
+export const ToggleAlertFlyoutButton = () => {
+  const dispatch = useDispatch();
+  return (
+    <ToggleAlertFlyoutButtonComponent
+      setAlertFlyoutVisible={(value: boolean) => dispatch(setAlertFlyoutVisible(value))}
+    />
+  );
+};

x-pack/legacy/plugins/uptime/public/components/connected/alerts/uptime_alerts_flyout_wrapper.tsx

@@ -0,0 +1,34 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { UptimeAlertsFlyoutWrapperComponent } from '../../functional';
+import { setAlertFlyoutVisible } from '../../../state/actions';
+import { selectAlertFlyoutVisibility } from '../../../state/selectors';
+
+interface Props {
+  alertTypeId?: string;
+  canChangeTrigger?: boolean;
+}
+
+export const UptimeAlertsFlyoutWrapper = ({ alertTypeId, canChangeTrigger }: Props) => {
+  const dispatch = useDispatch();
+  const setAddFlyoutVisiblity = (value: React.SetStateAction<boolean>) =>
+    // @ts-ignore the value here is a boolean, and it works with the action creator function
+    dispatch(setAlertFlyoutVisible(value));
+
+  const alertFlyoutVisible = useSelector(selectAlertFlyoutVisibility);
+
+  return (
+    <UptimeAlertsFlyoutWrapperComponent
+      alertFlyoutVisible={alertFlyoutVisible}
+      alertTypeId={alertTypeId}
+      canChangeTrigger={canChangeTrigger}
+      setAlertFlyoutVisibility={setAddFlyoutVisiblity}
+    />
+  );
+};

x-pack/legacy/plugins/uptime/public/components/connected/index.ts

@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+export { AlertMonitorStatus, ToggleAlertFlyoutButton, UptimeAlertsFlyoutWrapper } from './alerts';
 export { PingHistogram } from './charts/ping_histogram';
 export { Snapshot } from './charts/snapshot_container';
 export { KueryBar } from './kuerybar/kuery_bar_container';

x-pack/legacy/plugins/uptime/public/components/connected/kuerybar/kuery_bar_container.tsx

@@ -8,7 +8,7 @@ import { connect } from 'react-redux';
 import { AppState } from '../../../state';
 import { selectIndexPattern } from '../../../state/selectors';
 import { getIndexPattern } from '../../../state/actions';
-import { KueryBarComponent } from '../../functional';
+import { KueryBarComponent } from '../../functional/kuery_bar/kuery_bar';
 
 const mapStateToProps = (state: AppState) => ({ ...selectIndexPattern(state) });