[Uptime] Edit uptime alerts

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

@@ -3,6 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
+
 import {
   CoreSetup,
   CoreStart,
@@ -16,8 +17,16 @@ import { PLUGIN } from '../../common/constants';
 import { FeatureCatalogueCategory } from '../../../../../src/plugins/home/public';
 import { HomePublicPluginSetup } from '../../../../../src/plugins/home/public';
 import { EmbeddableStart } from '../../../../../src/plugins/embeddable/public';
-import { TriggersAndActionsUIPublicPluginSetup } from '../../../triggers_actions_ui/public';
-import { DataPublicPluginSetup } from '../../../../../src/plugins/data/public';
+import {
+  TriggersAndActionsUIPublicPluginSetup,
+  TriggersAndActionsUIPublicPluginStart,
+} from '../../../triggers_actions_ui/public';
+import {
+  DataPublicPluginSetup,
+  DataPublicPluginStart,
+} from '../../../../../src/plugins/data/public';
+import { alertTypeInitializers } from '../lib/alert_types';
+import { kibanaService } from '../state/kibana_service';
 
 export interface ClientPluginsSetup {
   data: DataPublicPluginSetup;
@@ -27,6 +36,8 @@ export interface ClientPluginsSetup {
 
 export interface ClientPluginsStart {
   embeddable: EmbeddableStart;
+  data: DataPublicPluginStart;
+  triggers_actions_ui: TriggersAndActionsUIPublicPluginStart;
 }
 
 export type ClientSetup = void;
@@ -66,6 +77,7 @@ export class UptimePlugin
         );
 
         const { element } = params;
+
         const libs: UMFrontendLibs = {
           framework: getKibanaFrameworkAdapter(coreStart, plugins, corePlugins),
         };
@@ -74,7 +86,21 @@ export class UptimePlugin
     });
   }
 
-  public start(_start: CoreStart, _plugins: {}): void {}
+  public start(start: CoreStart, plugins: ClientPluginsStart): void {
+    kibanaService.core = start;
+    alertTypeInitializers.forEach((init) => {
+      const alertInitializer = init({
+        core: start,
+        plugins,
+      });
+      if (
+        plugins.triggers_actions_ui &&
+        !plugins.triggers_actions_ui.alertTypeRegistry.has(alertInitializer.id)
+      ) {
+        plugins.triggers_actions_ui.alertTypeRegistry.register(alertInitializer);
+      }
+    });
+  }
 
   public stop(): void {}
 }

x-pack/plugins/uptime/public/components/overview/alerts/add_filter_btn.tsx

@@ -6,20 +6,18 @@
 
 import React, { useState } from 'react';
 import { EuiButtonEmpty, EuiContextMenuItem, EuiContextMenuPanel, EuiPopover } from '@elastic/eui';
-import { useFilterUpdate } from '../../../hooks/use_filter_update';
 import * as labels from './translations';
 
 interface Props {
   newFilters: string[];
   onNewFilter: (val: string) => void;
+  alertFilters: { [key: string]: string[] };
 }
 
-export const AddFilterButton: React.FC<Props> = ({ newFilters, onNewFilter }) => {
+export const AddFilterButton: React.FC<Props> = ({ newFilters, onNewFilter, alertFilters }) => {
   const [isPopoverOpen, setPopover] = useState(false);
 
-  const { selectedFilters } = useFilterUpdate();
-
-  const getSelectedItems = (fieldName: string) => selectedFilters.get(fieldName) || [];
+  const getSelectedItems = (fieldName: string) => alertFilters?.[fieldName] ?? [];
 
   const onButtonClick = () => {
     setPopover(!isPopoverOpen);

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

@@ -5,7 +5,8 @@
  */
 
 import React, { useState } from 'react';
-import { EuiSpacer } from '@elastic/eui';
+import { EuiCallOut, EuiSpacer } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
 import { DataPublicPluginSetup } from 'src/plugins/data/public';
 import * as labels from './translations';
 import {
@@ -18,10 +19,14 @@ import { AddFilterButton } from './add_filter_btn';
 import { KueryBar } from '..';
 
 interface AlertMonitorStatusProps {
+  alertParams: { [key: string]: any };
   autocomplete: DataPublicPluginSetup['autocomplete'];
   enabled: boolean;
-  filters: string;
+  hasFilters: boolean;
+  isOldAlert: boolean;
   locations: string[];
+  snapshotCount: number;
+  snapshotLoading: boolean;
   numTimes: number;
   setAlertParams: (key: string, value: any) => void;
   timerange: {
@@ -31,31 +36,69 @@ interface AlertMonitorStatusProps {
 }
 
 export const AlertMonitorStatusComponent: React.FC<AlertMonitorStatusProps> = (props) => {
-  const { filters, setAlertParams } = props;
+  const {
+    alertParams,
+    hasFilters,
+    isOldAlert,
+    setAlertParams,
+    snapshotCount,
+    snapshotLoading,
+  } = props;
 
-  const [newFilters, setNewFilters] = useState<string[]>([]);
+  const alertFilters = alertParams?.filters ?? {};
+  const [newFilters, setNewFilters] = useState<string[]>(
+    Object.keys(alertFilters).filter((f) => alertFilters[f].length)
+  );
 
   return (
     <>
       <EuiSpacer size="m" />
+
+      {isOldAlert && (
+        <EuiCallOut
+          size="s"
+          title={
+            <FormattedMessage
+              id="xpack.uptime.alerts.monitorStatus.oldAlertCallout.title"
+              defaultMessage="You are editing an older alert, some fields may not auto-populate."
+            />
+          }
+          iconType="alert"
+        />
+      )}
+
+      <EuiSpacer size="m" />
+
       <KueryBar
         aria-label={labels.ALERT_KUERY_BAR_ARIA}
         autocomplete={props.autocomplete}
+        defaultKuery={alertParams.search}
+        shouldUpdateUrl={false}
+        updateDefaultKuery={(value: string) => setAlertParams('search', value)}
         data-test-subj="xpack.uptime.alerts.monitorStatus.filterBar"
       />
 
       <EuiSpacer size="s" />
 
-      <DownNoExpressionSelect filters={filters} setAlertParams={setAlertParams} />
+      <DownNoExpressionSelect
+        defaultNumTimes={alertParams.numTimes}
+        hasFilters={hasFilters}
+        setAlertParams={setAlertParams}
+      />
 
       <EuiSpacer size="xs" />
 
-      <TimeExpressionSelect setAlertParams={setAlertParams} />
+      <TimeExpressionSelect
+        defaultTimerangeUnit={alertParams.timerangeUnit}
+        defaultTimerangeCount={alertParams.timerangeCount}
+        setAlertParams={setAlertParams}
+      />
 
       <EuiSpacer size="xs" />
 
       <FiltersExpressionsSelect
         setAlertParams={setAlertParams}
+        alertParams={alertParams}
         newFilters={newFilters}
         onRemoveFilter={(removeFiler) => {
           if (newFilters.includes(removeFiler)) {
@@ -67,13 +110,28 @@ export const AlertMonitorStatusComponent: React.FC<AlertMonitorStatusProps> = (p
       <EuiSpacer size="xs" />
 
       <AddFilterButton
+        alertFilters={alertParams.filters}
         newFilters={newFilters}
         onNewFilter={(newFilter) => {
           setNewFilters([...newFilters, newFilter]);
         }}
       />
 
       <EuiSpacer size="m" />
+
+      <EuiCallOut
+        size="s"
+        title={
+          <FormattedMessage
+            id="xpack.uptime.alerts.monitorStatus.monitorCallOut.title"
+            defaultMessage="This alert will apply to approximately {snapshotCount} monitors."
+            values={{ snapshotCount: snapshotLoading ? '...' : snapshotCount }}
+          />
+        }
+        iconType="iInCircle"
+      />
+
+      <EuiSpacer size="m" />
     </>
   );
 };

x-pack/plugins/uptime/public/components/overview/alerts/alerts_containers/alert_monitor_status.tsx

@@ -5,12 +5,29 @@
  */
 
 import React, { useEffect } from 'react';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import { DataPublicPluginSetup } from 'src/plugins/data/public';
-import { selectMonitorStatusAlert, searchTextSelector } from '../../../../state/selectors';
+import { isRight } from 'fp-ts/lib/Either';
+import {
+  selectMonitorStatusAlert,
+  overviewFiltersSelector,
+  snapshotDataSelector,
+  esKuerySelector,
+  selectedFiltersSelector,
+} from '../../../../state/selectors';
 import { AlertMonitorStatusComponent } from '../index';
+import {
+  fetchOverviewFilters,
+  setSearchTextAction,
+  setEsKueryString,
+  getSnapshotCountAction,
+} from '../../../../state/actions';
+import { AtomicStatusCheckParamsType } from '../../../../../common/runtime_types';
+import { useIndexPattern } from '../../kuery_bar/use_index_pattern';
+import { useUpdateKueryString } from '../../../../hooks';
 
 interface Props {
+  alertParams: { [key: string]: any };
   autocomplete: DataPublicPluginSetup['autocomplete'];
   enabled: boolean;
   numTimes: number;
@@ -27,22 +44,83 @@ export const AlertMonitorStatus: React.FC<Props> = ({
   numTimes,
   setAlertParams,
   timerange,
+  alertParams,
 }) => {
-  const { filters, locations } = useSelector(selectMonitorStatusAlert);
-  const searchText = useSelector(searchTextSelector);
+  const dispatch = useDispatch();
+  useEffect(() => {
+    dispatch(
+      fetchOverviewFilters({
+        dateRangeStart: 'now-24h',
+        dateRangeEnd: 'now',
+        locations: alertParams.filters?.['observer.geo.name'] ?? [],
+        ports: alertParams.filters?.['url.port'] ?? [],
+        tags: alertParams.filters?.tags ?? [],
+        schemes: alertParams.filters?.['monitor.type'] ?? [],
+      })
+    );
+  }, [alertParams, dispatch]);
+
+  const overviewFilters = useSelector(overviewFiltersSelector);
+  const { locations } = useSelector(selectMonitorStatusAlert);
+  useEffect(() => {
+    if (alertParams.search) {
+      dispatch(setSearchTextAction(alertParams.search));
+    }
+  }, [alertParams, dispatch]);
+
+  const { index_pattern: indexPattern } = useIndexPattern();
+
+  const { count, loading } = useSelector(snapshotDataSelector);
+  const esKuery = useSelector(esKuerySelector);
+  const [esFilters] = useUpdateKueryString(
+    indexPattern,
+    alertParams.search,
+    alertParams.filters === undefined || typeof alertParams.filters === 'string'
+      ? ''
+      : JSON.stringify(Array.from(Object.entries(alertParams.filters)))
+  );
+  useEffect(() => {
+    dispatch(setEsKueryString(esFilters ?? ''));
+  }, [dispatch, esFilters]);
+
+  const isOldAlert = React.useMemo(
+    () => !isRight(AtomicStatusCheckParamsType.decode(alertParams)),
+    [alertParams]
+  );
+  useEffect(() => {
+    dispatch(
+      getSnapshotCountAction({ dateRangeStart: 'now-24h', dateRangeEnd: 'now', filters: esKuery })
+    );
+  }, [dispatch, esKuery]);
 
+  const selectedFilters = useSelector(selectedFiltersSelector);
   useEffect(() => {
-    setAlertParams('search', searchText);
-  }, [setAlertParams, searchText]);
+    if (!alertParams.filters && selectedFilters !== null) {
+      setAlertParams('filters', {
+        // @ts-ignore
+        'url.port': selectedFilters?.ports ?? [],
+        // @ts-ignore
+        'observer.geo.name': selectedFilters?.locations ?? [],
+        // @ts-ignore
+        'monitor.type': selectedFilters?.schemes ?? [],
+        // @ts-ignore
+        tags: selectedFilters?.tags ?? [],
+      });
+    }
+  }, [alertParams, setAlertParams, selectedFilters]);
 
   return (
     <AlertMonitorStatusComponent
+      alertParams={alertParams}
       autocomplete={autocomplete}
       enabled={enabled}
-      filters={filters}
+      hasFilters={!!overviewFilters?.filters}
+      isOldAlert={isOldAlert}
       locations={locations}
       numTimes={numTimes}
       setAlertParams={setAlertParams}
+      snapshotCount={count.total}
+      snapshotLoading={loading}
       timerange={timerange}
     />
   );

x-pack/plugins/uptime/public/components/overview/alerts/monitor_expressions/__tests__/down_number_select.test.tsx

@@ -9,20 +9,16 @@ import { renderWithIntl, shallowWithIntl } from 'test_utils/enzyme_helpers';
 import { DownNoExpressionSelect } from '../down_number_select';
 
 describe('DownNoExpressionSelect component', () => {
-  const filters =
-    '"{"bool":{"filter":[{"bool":{"should":[{"match":{"observer.geo.name":"US-West"}}],"minimum_should_match":1}},' +
-    '{"bool":{"should":[{"match":{"url.port":443}}],"minimum_should_match":1}}]}}"';
-
   it('should shallow renders against props', function () {
     const component = shallowWithIntl(
-      <DownNoExpressionSelect filters={filters} setAlertParams={jest.fn()} />
+      <DownNoExpressionSelect hasFilters={true} setAlertParams={jest.fn()} />
     );
     expect(component).toMatchSnapshot();
   });
 
   it('should renders against props', function () {
     const component = renderWithIntl(
-      <DownNoExpressionSelect filters={filters} setAlertParams={jest.fn()} />
+      <DownNoExpressionSelect hasFilters={true} setAlertParams={jest.fn()} />
     );
     expect(component).toMatchSnapshot();
   });

x-pack/plugins/uptime/public/components/overview/alerts/monitor_expressions/down_number_select.tsx

@@ -10,12 +10,17 @@ import * as labels from '../translations';
 import { AlertFieldNumber } from '../alert_field_number';
 
 interface Props {
+  defaultNumTimes?: number;
+  hasFilters: boolean;
   setAlertParams: (key: string, value: any) => void;
-  filters: string;
 }
 
-export const DownNoExpressionSelect: React.FC<Props> = ({ filters, setAlertParams }) => {
-  const [numTimes, setNumTimes] = useState<number>(5);
+export const DownNoExpressionSelect: React.FC<Props> = ({
+  defaultNumTimes,
+  hasFilters,
+  setAlertParams,
+}) => {
+  const [numTimes, setNumTimes] = useState<number>(defaultNumTimes ?? 5);
 
   useEffect(() => {
     setAlertParams('numTimes', numTimes);
@@ -34,7 +39,7 @@ export const DownNoExpressionSelect: React.FC<Props> = ({ filters, setAlertParam
         />
       }
       data-test-subj="xpack.uptime.alerts.monitorStatus.numTimesExpression"
-      description={filters ? labels.MATCHING_MONITORS_DOWN : labels.ANY_MONITOR_DOWN}
+      description={hasFilters ? labels.MATCHING_MONITORS_DOWN : labels.ANY_MONITOR_DOWN}
       id="ping-count"
       value={`${numTimes} times`}
     />