[Uptime] Create new atomic params type for status alerts (#67720)

* Create new atomic params type for status alerts.

* Update executor params typing to support both alert params types.

* Update snapshot for alert factory function.

* Fix broken types and refresh snapshots.

* Clean up naming of action/selector.

* Fix a bug and add tests.

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

x-pack/plugins/uptime/public/lib/helper/__tests__/stringify_kueries.test.ts → x-pack/plugins/uptime/common/lib/__tests__/stringify_kueries.test.ts

@@ -59,4 +59,32 @@ describe('stringifyKueries', () => {
     kueries.set('monitor.id', ['https://elastic.co', 'https://example.com']);
     expect(stringifyKueries(kueries)).toMatchSnapshot();
   });
+
+  it('handles precending empty array', () => {
+    kueries = new Map<string, string[]>(
+      Object.entries({
+        'monitor.type': [],
+        'observer.geo.name': ['us-east', 'apj', 'sydney', 'us-west'],
+        tags: [],
+        'url.port': [],
+      })
+    );
+    expect(stringifyKueries(kueries)).toMatchInlineSnapshot(
+      `"(observer.geo.name:us-east or observer.geo.name:apj or observer.geo.name:sydney or observer.geo.name:us-west)"`
+    );
+  });
+
+  it('handles skipped empty arrays', () => {
+    kueries = new Map<string, string[]>(
+      Object.entries({
+        tags: [],
+        'monitor.type': ['http'],
+        'url.port': [],
+        'observer.geo.name': ['us-east', 'apj', 'sydney', 'us-west'],
+      })
+    );
+    expect(stringifyKueries(kueries)).toMatchInlineSnapshot(
+      `"monitor.type:http and (observer.geo.name:us-east or observer.geo.name:apj or observer.geo.name:sydney or observer.geo.name:us-west)"`
+    );
+  });
 });

x-pack/plugins/uptime/common/lib/index.ts

@@ -0,0 +1,8 @@
+/*
+ * 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 * from './combine_filters_and_user_search';
+export * from './stringify_kueries';

x-pack/plugins/uptime/public/lib/helper/stringify_kueries.ts → x-pack/plugins/uptime/common/lib/stringify_kueries.ts

@@ -35,6 +35,10 @@ export const stringifyKueries = (kueries: Map<string, Array<number | string>>):
     .reduce((prev, cur, index, array) => {
       if (array.length === 1 || index === 0) {
         return cur;
+      } else if (cur === '') {
+        return prev;
+      } else if (prev === '' && !!cur) {
+        return cur;
       }
       return `${prev} and ${cur}`;
     }, '');

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

@@ -6,7 +6,30 @@
 
 import * as t from 'io-ts';
 
-export const StatusCheckExecutorParamsType = t.intersection([
+export const StatusCheckFiltersType = t.type({
+  'monitor.type': t.array(t.string),
+  'observer.geo.name': t.array(t.string),
+  tags: t.array(t.string),
+  'url.port': t.array(t.string),
+});
+
+export type StatusCheckFilters = t.TypeOf<typeof StatusCheckFiltersType>;
+
+export const AtomicStatusCheckParamsType = t.intersection([
+  t.type({
+    numTimes: t.number,
+    timerangeCount: t.number,
+    timerangeUnit: t.string,
+  }),
+  t.partial({
+    search: t.string,
+    filters: StatusCheckFiltersType,
+  }),
+]);
+
+export type AtomicStatusCheckParams = t.TypeOf<typeof AtomicStatusCheckParamsType>;
+
+export const StatusCheckParamsType = t.intersection([
   t.partial({
     filters: t.string,
   }),
@@ -20,4 +43,4 @@ export const StatusCheckExecutorParamsType = t.intersection([
   }),
 ]);
 
-export type StatusCheckExecutorParams = t.TypeOf<typeof StatusCheckExecutorParamsType>;
+export type StatusCheckParams = t.TypeOf<typeof StatusCheckParamsType>;

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

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { EuiSpacer } from '@elastic/eui';
 import { DataPublicPluginSetup } from 'src/plugins/data/public';
 import * as labels from './translations';
@@ -35,10 +35,6 @@ export const AlertMonitorStatusComponent: React.FC<AlertMonitorStatusProps> = (p
 
   const [newFilters, setNewFilters] = useState<string[]>([]);
 
-  useEffect(() => {
-    setAlertParams('filters', filters);
-  }, [filters, setAlertParams]);
-
   return (
     <>
       <EuiSpacer size="m" />

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

@@ -4,10 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { DataPublicPluginSetup } from 'src/plugins/data/public';
-import { selectMonitorStatusAlert } from '../../../../state/selectors';
+import { selectMonitorStatusAlert, searchTextSelector } from '../../../../state/selectors';
 import { AlertMonitorStatusComponent } from '../index';
 
 interface Props {
@@ -29,6 +29,12 @@ export const AlertMonitorStatus: React.FC<Props> = ({
   timerange,
 }) => {
   const { filters, locations } = useSelector(selectMonitorStatusAlert);
+  const searchText = useSelector(searchTextSelector);
+
+  useEffect(() => {
+    setAlertParams('search', searchText);
+  }, [setAlertParams, searchText]);
+
   return (
     <AlertMonitorStatusComponent
       autocomplete={autocomplete}

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

@@ -12,6 +12,7 @@ import { overviewFiltersSelector } from '../../../../state/selectors';
 import { useFilterUpdate } from '../../../../hooks/use_filter_update';
 import { filterLabels } from '../../filter_group/translations';
 import { alertFilterLabels } from './translations';
+import { StatusCheckFilters } from '../../../../../common/runtime_types';
 
 interface Props {
   newFilters: string[];
@@ -38,19 +39,22 @@ export const FiltersExpressionsSelect: React.FC<Props> = ({
     updatedFieldValues.values
   );
 
-  useEffect(() => {
-    if (updatedFieldValues.fieldName === 'observer.geo.name') {
-      setAlertParams('locations', updatedFieldValues.values);
-    }
-  }, [setAlertParams, updatedFieldValues]);
+  const [filters, setFilters] = useState<StatusCheckFilters>({
+    'observer.geo.name': selectedLocations,
+    'url.port': selectedPorts,
+    tags: selectedTags,
+    'monitor.type': selectedSchemes,
+  });
 
   useEffect(() => {
-    setAlertParams('locations', []);
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+    setAlertParams('filters', filters);
+  }, [filters, setAlertParams]);
 
   const onFilterFieldChange = (fieldName: string, values: string[]) => {
+    setFilters({
+      ...filters,
+      [fieldName]: values,
+    });
     setUpdatedFieldValues({ fieldName, values });
   };
 

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

@@ -51,7 +51,8 @@ export const TimeExpressionSelect: React.FC<Props> = ({ setAlertParams }) => {
 
   useEffect(() => {
     const timerangeUnit = timerangeUnitOptions.find(({ checked }) => checked === 'on')?.key ?? 'm';
-    setAlertParams('timerange', { from: `now-${numUnits}${timerangeUnit}`, to: 'now' });
+    setAlertParams('timerangeUnit', timerangeUnit);
+    setAlertParams('timerangeCount', numUnits);
   }, [numUnits, timerangeUnitOptions, setAlertParams]);
 
   return (

x-pack/plugins/uptime/public/components/overview/kuery_bar/kuery_bar.tsx

@@ -4,13 +4,13 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { uniqueId, startsWith } from 'lodash';
 import { EuiCallOut } from '@elastic/eui';
 import styled from 'styled-components';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { Typeahead } from './typeahead';
-import { useUrlParams } from '../../../hooks';
+import { useSearchText, useUrlParams } from '../../../hooks';
 import {
   esKuery,
   IIndexPattern,
@@ -45,6 +45,7 @@ export function KueryBar({
   'data-test-subj': dataTestSubj,
 }: Props) {
   const { loading, index_pattern: indexPattern } = useIndexPattern();
+  const { updateSearchText } = useSearchText();
 
   const [state, setState] = useState<State>({
     suggestions: [],
@@ -56,13 +57,19 @@ export function KueryBar({
   const [getUrlParams, updateUrlParams] = useUrlParams();
   const { search: kuery } = getUrlParams();
 
+  useEffect(() => {
+    updateSearchText(kuery);
+  }, [kuery, updateSearchText]);
+
   const indexPatternMissing = loading && !indexPattern;
 
   async function onChange(inputValue: string, selectionStart: number) {
     if (!indexPattern) {
       return;
     }
 
+    updateSearchText(inputValue);
+
     setIsLoadingSuggestions(true);
     setState({ ...state, suggestions: [] });
 

x-pack/plugins/uptime/public/hooks/index.ts

@@ -9,3 +9,4 @@ export * from './use_url_params';
 export * from './use_telemetry';
 export * from './update_kuery_string';
 export * from './use_cert_status';
+export * from './use_search_text';

x-pack/plugins/uptime/public/hooks/update_kuery_string.ts

@@ -4,8 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { combineFiltersAndUserSearch, stringifyKueries } from '../lib/helper';
 import { esKuery, IIndexPattern } from '../../../../../src/plugins/data/public';
+import { combineFiltersAndUserSearch, stringifyKueries } from '../../common/lib';
 
 const getKueryString = (urlFilters: string): string => {
   let kueryString = '';

x-pack/plugins/uptime/public/hooks/use_search_text.ts

@@ -0,0 +1,22 @@
+/*
+ * 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 { useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { setSearchTextAction } from '../state/actions';
+import { searchTextSelector } from '../state/selectors';
+
+export const useSearchText = () => {
+  const dispatch = useDispatch();
+  const searchText = useSelector(searchTextSelector);
+
+  const updateSearchText = useCallback(
+    (nextSearchText: string) => dispatch(setSearchTextAction(nextSearchText)),
+    [dispatch]
+  );
+
+  return { searchText, updateSearchText };
+};