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 index dfc6a046186c5..fdaa18c36d601 100644 --- 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 = (props) => { - const { alertParams, hasFilters, isOldAlert, setAlertParams } = props; + const { + alertParams, + hasFilters, + isOldAlert, + setAlertParams, + snapshotCount, + snapshotLoading, + } = props; const alertFilters = alertParams?.filters ?? {}; const [newFilters, setNewFilters] = useState( @@ -50,7 +59,7 @@ export const AlertMonitorStatusComponent: React.FC = (p size="s" title={ } @@ -108,6 +117,24 @@ export const AlertMonitorStatusComponent: React.FC = (p /> + + {!snapshotLoading ? ( + + } + iconType="iInCircle" + /> + ) : ( + + )} + + ); }; diff --git a/x-pack/plugins/uptime/public/components/overview/alerts/alerts_containers/alert_monitor_status.tsx b/x-pack/plugins/uptime/public/components/overview/alerts/alerts_containers/alert_monitor_status.tsx index 64d15dc01b445..d665c98c434e0 100644 --- a/x-pack/plugins/uptime/public/components/overview/alerts/alerts_containers/alert_monitor_status.tsx +++ b/x-pack/plugins/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 = ({ 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 = ({ }, [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 = ({ () => !isRight(AtomicStatusCheckParamsType.decode(alertParams)), [alertParams] ); + useEffect(() => { + dispatch( + getSnapshotCountAction({ dateRangeStart: 'now-24h', dateRangeEnd: 'now', filters: esKuery }) + ); + }, [dispatch, esKuery]); return ( = ({ 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 index f259b815d70ac..1e2751a4ac388 100644 --- 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 ( - - - {' '} - - - {!loading ? ( - - {count.total} monitors - - ) : ( - - )} - - + ); };