Make monitor counter function while editing alerts.

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

@@ -10,8 +10,14 @@ import { DataPublicPluginSetup } from 'src/plugins/data/public';
 import { isRight } from 'fp-ts/lib/Either';
 import { selectMonitorStatusAlert, overviewFiltersSelector } from '../../../../state/selectors';
 import { AlertMonitorStatusComponent } from '../index';
-import { fetchOverviewFilters, setSearchTextAction } from '../../../../state/actions';
+import {
+  fetchOverviewFilters,
+  setSearchTextAction,
+  setEsKueryString,
+} 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 };
@@ -54,6 +60,18 @@ export const AlertMonitorStatus: React.FC<Props> = ({
       dispatch(setSearchTextAction(alertParams.search));
     }
   }, [alertParams, dispatch]);
+
+  const { index_pattern: indexPattern } = useIndexPattern();
+  const [esFilters] = useUpdateKueryString(
+    indexPattern,
+    alertParams.search,
+    typeof alertParams.filters === 'string' ? {} : alertParams.filters
+  );
+
+  useEffect(() => {
+    dispatch(setEsKueryString(esFilters ?? ''));
+  }, [dispatch, esFilters]);
+
   const isOldAlert = React.useMemo(
     () => !isRight(AtomicStatusCheckParamsType.decode(alertParams)),
     [alertParams]

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

@@ -74,15 +74,9 @@ export function KueryBar({
       return;
     }
 
-    updateSearchText(inputValue);
-
     setIsLoadingSuggestions(true);
     setState({ ...state, suggestions: [] });
 
-    if (updateDefaultKuery) {
-      updateDefaultKuery(inputValue);
-    }
-
     const currentRequest = uniqueId();
     currentRequestCheck = currentRequest;
 
@@ -125,6 +119,10 @@ export function KueryBar({
       if (shouldUpdateUrl !== false) {
         updateUrlParams({ search: inputValue.trim() });
       }
+      updateSearchText(inputValue);
+      if (updateDefaultKuery) {
+        updateDefaultKuery(inputValue);
+      }
     } catch (e) {
       console.log('Invalid kuery syntax'); // eslint-disable-line no-console
     }

x-pack/plugins/uptime/public/lib/alert_types/monitor_status_title.tsx

@@ -4,14 +4,23 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
-import { useSelector } from 'react-redux';
+import React, { useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner, EuiText } from '@elastic/eui';
-import { snapshotDataSelector } from '../../state/selectors';
+import { snapshotDataSelector, esKuerySelector } from '../../state/selectors';
+import { getSnapshotCountAction } from '../../state/actions';
 
 export const MonitorStatusTitle = () => {
   const { count, loading } = useSelector(snapshotDataSelector);
+  const esKuery = useSelector(esKuerySelector);
+  const dispatch = useDispatch();
+  useEffect(() => {
+    dispatch(
+      getSnapshotCountAction({ dateRangeStart: 'now-15m', dateRangeEnd: 'now', filters: esKuery })
+    );
+  }, [dispatch, esKuery]);
+
   return (
     <EuiFlexGroup>
       <EuiFlexItem>