Move snapshot count in monitor status alert to callout.

elastic · Jun 5, 2020 · abc7e07 · abc7e07
1 parent 18846c9
commit abc7e07
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 38 deletions.
diff --git a/x-pack/plugins/uptime/public/components/overview/alerts/alert_monitor_status.tsx b/x-pack/plugins/uptime/public/components/overview/alerts/alert_monitor_status.tsx
@@ -5,7 +5,7 @@
  */
 
 import React, { useState } from 'react';
-import { EuiCallOut, EuiSpacer } from '@elastic/eui';
+import { EuiCallOut, EuiLoadingSpinner, EuiSpacer } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { DataPublicPluginSetup } from 'src/plugins/data/public';
 import * as labels from './translations';
@@ -25,6 +25,8 @@ interface AlertMonitorStatusProps {
   hasFilters: boolean;
   isOldAlert: boolean;
   locations: string[];
+  snapshotCount: number;
+  snapshotLoading: boolean;
   numTimes: number;
   setAlertParams: (key: string, value: any) => void;
   timerange: {
@@ -34,7 +36,14 @@ interface AlertMonitorStatusProps {
 }
 
 export const AlertMonitorStatusComponent: React.FC<AlertMonitorStatusProps> = (props) => {
-  const { alertParams, hasFilters, isOldAlert, setAlertParams } = props;
+  const {
+    alertParams,
+    hasFilters,
+    isOldAlert,
+    setAlertParams,
+    snapshotCount,
+    snapshotLoading,
+  } = props;
 
   const alertFilters = alertParams?.filters ?? {};
   const [newFilters, setNewFilters] = useState<string[]>(
@@ -50,7 +59,7 @@ export const AlertMonitorStatusComponent: React.FC<AlertMonitorStatusProps> = (p
           size="s"
           title={
             <FormattedMessage
-              id="xpack.uptime.alerts.monitorStatus.oldAlertCallout.Title"
+              id="xpack.uptime.alerts.monitorStatus.oldAlertCallout.title"
               defaultMessage="You are editing an older alert, some fields may not auto-populate."
             />
           }
@@ -108,6 +117,24 @@ export const AlertMonitorStatusComponent: React.FC<AlertMonitorStatusProps> = (p
       />
 
       <EuiSpacer size="m" />
+
+      {!snapshotLoading ? (
+        <EuiCallOut
+          size="s"
+          title={
+            <FormattedMessage
+              id="xpack.uptime.alerts.monitorStatus.monitorCallOut.title"
+              defaultMessage="This alert will apply to approximately {snapshotCount} monitors."
+              values={{ snapshotCount }}
+            />
+          }
+          iconType="iInCircle"
+        />
+      ) : (
+        <EuiLoadingSpinner size="m" />
+      )}
+
+      <EuiSpacer size="m" />
     </>
   );
 };
diff --git a/...ugins/uptime/public/components/overview/alerts/alerts_containers/alert_monitor_status.tsx b/...ugins/uptime/public/components/overview/alerts/alerts_containers/alert_monitor_status.tsx
@@ -8,12 +8,18 @@ import React, { useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { DataPublicPluginSetup } from 'src/plugins/data/public';
 import { isRight } from 'fp-ts/lib/Either';
-import { selectMonitorStatusAlert, overviewFiltersSelector } from '../../../../state/selectors';
+import {
+  selectMonitorStatusAlert,
+  overviewFiltersSelector,
+  snapshotDataSelector,
+  esKuerySelector,
+} 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';
@@ -43,7 +49,7 @@ export const AlertMonitorStatus: React.FC<Props> = ({
   useEffect(() => {
     dispatch(
       fetchOverviewFilters({
-        dateRangeStart: 'now-15m',
+        dateRangeStart: 'now-24h',
         dateRangeEnd: 'now',
         locations: alertParams.filters?.['observer.geo.name'] ?? [],
         ports: alertParams.filters?.['url.port'] ?? [],
@@ -62,12 +68,16 @@ export const AlertMonitorStatus: React.FC<Props> = ({
   }, [alertParams, dispatch]);
 
   const { index_pattern: indexPattern } = useIndexPattern();
+
+  const { count, loading } = useSelector(snapshotDataSelector);
+  const esKuery = useSelector(esKuerySelector);
   const [esFilters] = useUpdateKueryString(
     indexPattern,
     alertParams.search,
-    typeof alertParams.filters === 'string' ? {} : alertParams.filters
+    alertParams.filters === undefined || typeof alertParams.filters === 'string'
+      ? ''
+      : JSON.stringify(Array.from(Object.entries(alertParams.filters)))
   );
-
   useEffect(() => {
     dispatch(setEsKueryString(esFilters ?? ''));
   }, [dispatch, esFilters]);
@@ -76,6 +86,11 @@ export const AlertMonitorStatus: React.FC<Props> = ({
     () => !isRight(AtomicStatusCheckParamsType.decode(alertParams)),
     [alertParams]
   );
+  useEffect(() => {
+    dispatch(
+      getSnapshotCountAction({ dateRangeStart: 'now-24h', dateRangeEnd: 'now', filters: esKuery })
+    );
+  }, [dispatch, esKuery]);
 
   return (
     <AlertMonitorStatusComponent
@@ -87,6 +102,8 @@ export const AlertMonitorStatus: React.FC<Props> = ({
       locations={locations}
       numTimes={numTimes}
       setAlertParams={setAlertParams}
+      snapshotCount={count.total}
+      snapshotLoading={loading}
       timerange={timerange}
     />
   );

diff --git a/x-pack/plugins/uptime/public/lib/alert_types/monitor_status_title.tsx b/x-pack/plugins/uptime/public/lib/alert_types/monitor_status_title.tsx
@@ -4,40 +4,14 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useEffect } from 'react';
-import { useSelector, useDispatch } from 'react-redux';
+import React from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner, EuiText } from '@elastic/eui';
-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>
-        <FormattedMessage
-          id="xpack.uptime.alerts.monitorStatus.title.label"
-          defaultMessage="Uptime monitor status"
-        />{' '}
-      </EuiFlexItem>
-      <EuiFlexItem grow={false} style={{ alignSelf: 'center' }}>
-        {!loading ? (
-          <EuiText size="s" color="subdued">
-            {count.total} monitors
-          </EuiText>
-        ) : (
-          <EuiLoadingSpinner size="m" />
-        )}
-      </EuiFlexItem>
-    </EuiFlexGroup>
+    <FormattedMessage
+      id="xpack.uptime.alerts.monitorStatus.title.label"
+      defaultMessage="Uptime monitor status"
+    />
   );
 };