From a358c5768ea4f378270140d4e480fece98e8e103 Mon Sep 17 00:00:00 2001 From: Shahzad Date: Thu, 27 Aug 2020 07:02:28 +0200 Subject: [PATCH] [Uptime] One click simple monitor down alert (#73835) * WIP * added anomaly alert * update types * update types * update * types * types * update ML part * update ML part * update ML part * unnecessary change * icon for disable * update test * update api * update labels * resolve conflicts * fix types * fix editing alert * fix types * added actions column * added code to add alert * update anomaly message * added anomaly alert test * update * update type * fix ml legacy scoped client * update * WIP * fix conflict * added aria label * Added deleteion loading * fix type * update * update tests * update * update type * fix types * WIP * added enabled alerts section * add data * update * update tests * fix test * update i18n * update i18n * update i18n * fix * update message * update * update * update * revert * update types * added component * update test * incorporate PR feedback * fix focus * update drawer * handle edge case * improve btn text * improve btn text * use switch instead of icons * update snapshot * use compressed form * fix type * update snapshot * update snapshot * update test * update test * PR feedback * fix test and type * remove delete action * remove unnecessary function Co-authored-by: Elastic Machine --- .../triggers_actions_ui/public/index.ts | 1 + .../uptime/common/constants/rest_api.ts | 3 + .../common/constants/settings_defaults.ts | 1 + .../runtime_types/alerts/status_check.ts | 2 + .../common/runtime_types/dynamic_settings.ts | 1 + .../common/runtime_types/monitor/details.ts | 3 +- .../__tests__/link_for_eui.test.tsx | 4 +- .../components/monitor/ml/manage_ml_job.tsx | 4 +- .../monitor/ml/use_anomaly_alert.ts | 8 +- .../__mocks__/{mock.ts => poly_layer_mock.ts} | 0 .../embeddables/__tests__/map_config.test.ts | 2 +- .../__snapshots__/monitor_list.test.tsx.snap | 111 ++++++++++- .../__snapshots__/enable_alert.test.tsx.snap | 89 +++++++++ .../columns/__tests__/enable_alert.test.tsx | 90 +++++++++ .../columns/define_connectors.tsx | 55 ++++++ .../monitor_list/columns/enable_alert.tsx | 130 +++++++++++++ .../monitor_list/columns/translations.ts | 15 ++ .../overview/monitor_list/monitor_list.tsx | 24 ++- .../monitor_list_drawer.test.tsx.snap | 2 + .../most_recent_error.test.tsx.snap | 2 +- .../__tests__/monitor_list_drawer.test.tsx | 24 ++- .../monitor_list_drawer/enabled_alerts.tsx | 57 ++++++ .../list_drawer_container.tsx | 58 +++--- .../monitor_list_drawer.tsx | 13 +- .../overview/monitor_list/translations.ts | 4 + .../certificate_form.test.tsx.snap | 1 + .../__snapshots__/indices_form.test.tsx.snap | 1 + .../__tests__/certificate_form.test.tsx | 3 + .../settings/__tests__/indices_form.test.tsx | 1 + .../settings/add_connector_flyout.tsx | 70 +++++++ .../settings/alert_defaults_form.tsx | 182 ++++++++++++++++++ .../components/settings/translations.ts | 9 + .../use_url_params.test.tsx.snap | 4 +- .../uptime/public/hooks/use_init_app.ts | 18 ++ .../uptime/public/lib/__mocks__/index.ts | 7 - .../public/lib/__mocks__/uptime_store.mock.ts | 120 ++++++++++++ ...tory.mock.ts => ut_router_history.mock.ts} | 0 .../__tests__/monitor_status.test.ts | 10 +- .../public/lib/alert_types/alert_messages.tsx | 28 +++ .../public/lib/helper/helper_with_redux.tsx | 5 +- .../public/lib/helper/helper_with_router.tsx | 37 +++- .../get_supported_url_params.test.ts.snap | 5 + .../get_supported_url_params.test.ts | 2 + .../url_params/get_supported_url_params.ts | 3 + x-pack/plugins/uptime/public/lib/index.ts | 2 +- .../__snapshots__/page_header.test.tsx.snap | 46 ++--- .../plugins/uptime/public/pages/monitor.tsx | 23 ++- .../plugins/uptime/public/pages/overview.tsx | 12 ++ .../uptime/public/pages/page_header.tsx | 10 +- .../plugins/uptime/public/pages/settings.tsx | 17 +- .../uptime/public/state/actions/monitor.ts | 12 +- .../uptime/public/state/actions/types.ts | 8 + .../uptime/public/state/alerts/alerts.ts | 165 ++++++++++++++++ .../plugins/uptime/public/state/api/alerts.ts | 77 +++++++- .../public/state/certificates/certificates.ts | 8 +- .../uptime/public/state/effects/alerts.ts | 4 +- .../uptime/public/state/effects/index.ts | 2 +- .../uptime/public/state/effects/ml_anomaly.ts | 5 +- .../uptime/public/state/effects/monitor.ts | 8 +- .../uptime/public/state/reducers/alerts.ts | 29 --- .../uptime/public/state/reducers/index.ts | 2 +- .../public/state/reducers/index_status.ts | 8 +- .../public/state/reducers/ml_anomaly.ts | 24 +-- .../uptime/public/state/reducers/monitor.ts | 9 +- .../uptime/public/state/reducers/types.ts | 2 +- .../uptime/public/state/reducers/utils.ts | 22 ++- .../state/selectors/__tests__/index.test.ts | 6 +- .../uptime/public/state/selectors/index.ts | 4 +- x-pack/plugins/uptime/server/kibana.index.ts | 8 +- .../lib/adapters/framework/adapter_types.ts | 10 +- .../telemetry/kibana_telemetry_adapter.ts | 6 +- .../lib/alerts/__tests__/status_check.test.ts | 8 + .../uptime/server/lib/alerts/status_check.ts | 74 ++++--- .../lib/requests/__tests__/get_certs.test.ts | 1 + .../__tests__/get_latest_monitor.test.ts | 2 +- .../server/lib/requests/get_latest_monitor.ts | 10 +- .../lib/requests/get_monitor_details.ts | 75 +++++++- .../server/lib/requests/get_monitor_status.ts | 2 +- .../uptime/server/lib/saved_objects.ts | 3 + .../__tests__/dynamic_settings.test.ts | 5 + .../server/rest_api/dynamic_settings.ts | 1 + .../rest_api/monitors/monitors_details.ts | 6 +- .../rest_api/monitors/monitors_durations.ts | 1 + .../apis/uptime/rest/dynamic_settings.ts | 1 + x-pack/test/functional/apps/uptime/index.ts | 42 ++-- .../test/functional/apps/uptime/settings.ts | 1 + .../functional/page_objects/uptime_page.ts | 1 + .../test/functional/services/uptime/common.ts | 6 +- .../functional/services/uptime/navigation.ts | 1 + .../functional/services/uptime/overview.ts | 4 + .../functional/services/uptime/settings.ts | 1 + .../apps/uptime/index.ts | 1 + .../apps/uptime/simple_down_alert.ts | 109 +++++++++++ 93 files changed, 1828 insertions(+), 265 deletions(-) rename x-pack/plugins/uptime/public/components/monitor/status_details/location_map/embeddables/__tests__/__mocks__/{mock.ts => poly_layer_mock.ts} (100%) create mode 100644 x-pack/plugins/uptime/public/components/overview/monitor_list/columns/__tests__/__snapshots__/enable_alert.test.tsx.snap create mode 100644 x-pack/plugins/uptime/public/components/overview/monitor_list/columns/__tests__/enable_alert.test.tsx create mode 100644 x-pack/plugins/uptime/public/components/overview/monitor_list/columns/define_connectors.tsx create mode 100644 x-pack/plugins/uptime/public/components/overview/monitor_list/columns/enable_alert.tsx create mode 100644 x-pack/plugins/uptime/public/components/overview/monitor_list/columns/translations.ts create mode 100644 x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/enabled_alerts.tsx create mode 100644 x-pack/plugins/uptime/public/components/settings/add_connector_flyout.tsx create mode 100644 x-pack/plugins/uptime/public/components/settings/alert_defaults_form.tsx create mode 100644 x-pack/plugins/uptime/public/hooks/use_init_app.ts delete mode 100644 x-pack/plugins/uptime/public/lib/__mocks__/index.ts create mode 100644 x-pack/plugins/uptime/public/lib/__mocks__/uptime_store.mock.ts rename x-pack/plugins/uptime/public/lib/__mocks__/{react_router_history.mock.ts => ut_router_history.mock.ts} (100%) create mode 100644 x-pack/plugins/uptime/public/lib/alert_types/alert_messages.tsx create mode 100644 x-pack/plugins/uptime/public/state/alerts/alerts.ts delete mode 100644 x-pack/plugins/uptime/public/state/reducers/alerts.ts create mode 100644 x-pack/test/functional_with_es_ssl/apps/uptime/simple_down_alert.ts diff --git a/x-pack/plugins/triggers_actions_ui/public/index.ts b/x-pack/plugins/triggers_actions_ui/public/index.ts index 7808e2a7f608d1..f73fac22590671 100644 --- a/x-pack/plugins/triggers_actions_ui/public/index.ts +++ b/x-pack/plugins/triggers_actions_ui/public/index.ts @@ -21,6 +21,7 @@ export { AlertTypeParamsExpressionProps, ValidationResult, ActionVariable, + ActionConnector, } from './types'; export { ConnectorAddFlyout, diff --git a/x-pack/plugins/uptime/common/constants/rest_api.ts b/x-pack/plugins/uptime/common/constants/rest_api.ts index f3f06f776260dc..be1f498c2e75dd 100644 --- a/x-pack/plugins/uptime/common/constants/rest_api.ts +++ b/x-pack/plugins/uptime/common/constants/rest_api.ts @@ -24,6 +24,9 @@ export enum API_URLS { ML_DELETE_JOB = `/api/ml/jobs/delete_jobs`, ML_CAPABILITIES = '/api/ml/ml_capabilities', ML_ANOMALIES_RESULT = `/api/ml/results/anomalies_table_data`, + + ALERT_ACTIONS = '/api/actions', + CREATE_ALERT = '/api/alerts/alert', ALERT = '/api/alerts/alert/', ALERTS_FIND = '/api/alerts/_find', } diff --git a/x-pack/plugins/uptime/common/constants/settings_defaults.ts b/x-pack/plugins/uptime/common/constants/settings_defaults.ts index b9e99a54b3b11a..6eb2a1913b8714 100644 --- a/x-pack/plugins/uptime/common/constants/settings_defaults.ts +++ b/x-pack/plugins/uptime/common/constants/settings_defaults.ts @@ -10,4 +10,5 @@ export const DYNAMIC_SETTINGS_DEFAULTS: DynamicSettings = { heartbeatIndices: 'heartbeat-8*', certAgeThreshold: 730, certExpirationThreshold: 30, + defaultConnectors: [], }; diff --git a/x-pack/plugins/uptime/common/runtime_types/alerts/status_check.ts b/x-pack/plugins/uptime/common/runtime_types/alerts/status_check.ts index 5a355dc576c0aa..971a9f51bfae15 100644 --- a/x-pack/plugins/uptime/common/runtime_types/alerts/status_check.ts +++ b/x-pack/plugins/uptime/common/runtime_types/alerts/status_check.ts @@ -25,6 +25,7 @@ export const AtomicStatusCheckParamsType = t.intersection([ search: t.string, filters: StatusCheckFiltersType, shouldCheckStatus: t.boolean, + isAutoGenerated: t.boolean, }), ]); @@ -34,6 +35,7 @@ export const StatusCheckParamsType = t.intersection([ t.partial({ filters: t.string, shouldCheckStatus: t.boolean, + isAutoGenerated: t.boolean, }), t.type({ locations: t.array(t.string), diff --git a/x-pack/plugins/uptime/common/runtime_types/dynamic_settings.ts b/x-pack/plugins/uptime/common/runtime_types/dynamic_settings.ts index a0ec92f7d869b7..3621827b294a6e 100644 --- a/x-pack/plugins/uptime/common/runtime_types/dynamic_settings.ts +++ b/x-pack/plugins/uptime/common/runtime_types/dynamic_settings.ts @@ -10,6 +10,7 @@ export const DynamicSettingsType = t.type({ heartbeatIndices: t.string, certAgeThreshold: t.number, certExpirationThreshold: t.number, + defaultConnectors: t.array(t.string), }); export const DynamicSettingsSaveType = t.intersection([ diff --git a/x-pack/plugins/uptime/common/runtime_types/monitor/details.ts b/x-pack/plugins/uptime/common/runtime_types/monitor/details.ts index bf81c91bae6339..c622d4f19bade4 100644 --- a/x-pack/plugins/uptime/common/runtime_types/monitor/details.ts +++ b/x-pack/plugins/uptime/common/runtime_types/monitor/details.ts @@ -18,7 +18,6 @@ export type MonitorError = t.TypeOf; export const MonitorDetailsType = t.intersection([ t.type({ monitorId: t.string }), - t.partial({ error: MonitorErrorType }), - t.partial({ timestamp: t.string }), + t.partial({ error: MonitorErrorType, timestamp: t.string, alerts: t.unknown }), ]); export type MonitorDetails = t.TypeOf; diff --git a/x-pack/plugins/uptime/public/components/common/react_router_helpers/__tests__/link_for_eui.test.tsx b/x-pack/plugins/uptime/public/components/common/react_router_helpers/__tests__/link_for_eui.test.tsx index 4a681f6fa60bf1..845b597a8ad18c 100644 --- a/x-pack/plugins/uptime/public/components/common/react_router_helpers/__tests__/link_for_eui.test.tsx +++ b/x-pack/plugins/uptime/public/components/common/react_router_helpers/__tests__/link_for_eui.test.tsx @@ -8,10 +8,10 @@ import React from 'react'; import { shallow, mount } from 'enzyme'; import { EuiLink, EuiButton } from '@elastic/eui'; -import '../../../../lib/__mocks__/react_router_history.mock'; +import '../../../../lib/__mocks__/ut_router_history.mock'; import { ReactRouterEuiLink, ReactRouterEuiButton } from '../link_for_eui'; -import { mockHistory } from '../../../../lib/__mocks__'; +import { mockHistory } from '../../../../lib/__mocks__/ut_router_history.mock'; describe('EUI & React Router Component Helpers', () => { beforeEach(() => { diff --git a/x-pack/plugins/uptime/public/components/monitor/ml/manage_ml_job.tsx b/x-pack/plugins/uptime/public/components/monitor/ml/manage_ml_job.tsx index f4382b37b3d308..7971c4eb583504 100644 --- a/x-pack/plugins/uptime/public/components/monitor/ml/manage_ml_job.tsx +++ b/x-pack/plugins/uptime/public/components/monitor/ml/manage_ml_job.tsx @@ -22,7 +22,7 @@ import { useMonitorId } from '../../../hooks'; import { setAlertFlyoutType, setAlertFlyoutVisible } from '../../../state/actions'; import { useAnomalyAlert } from './use_anomaly_alert'; import { ConfirmAlertDeletion } from './confirm_alert_delete'; -import { deleteAlertAction } from '../../../state/actions/alerts'; +import { deleteAnomalyAlertAction } from '../../../state/alerts/alerts'; interface Props { hasMLJob: boolean; @@ -52,7 +52,7 @@ export const ManageMLJobComponent = ({ hasMLJob, onEnableJob, onJobDelete }: Pro const [isConfirmAlertDeleteOpen, setIsConfirmAlertDeleteOpen] = useState(false); const deleteAnomalyAlert = () => - dispatch(deleteAlertAction.get({ alertId: anomalyAlert?.id as string })); + dispatch(deleteAnomalyAlertAction.get({ alertId: anomalyAlert?.id as string })); const showLoading = isMLJobCreating || isMLJobLoading; diff --git a/x-pack/plugins/uptime/public/components/monitor/ml/use_anomaly_alert.ts b/x-pack/plugins/uptime/public/components/monitor/ml/use_anomaly_alert.ts index d204cdf10012a5..949bbadfc9d26a 100644 --- a/x-pack/plugins/uptime/public/components/monitor/ml/use_anomaly_alert.ts +++ b/x-pack/plugins/uptime/public/components/monitor/ml/use_anomaly_alert.ts @@ -6,10 +6,10 @@ import { useContext, useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; -import { getExistingAlertAction } from '../../../state/actions/alerts'; -import { alertSelector, selectAlertFlyoutVisibility } from '../../../state/selectors'; +import { selectAlertFlyoutVisibility } from '../../../state/selectors'; import { UptimeRefreshContext } from '../../../contexts'; import { useMonitorId } from '../../../hooks'; +import { anomalyAlertSelector, getAnomalyAlertAction } from '../../../state/alerts/alerts'; export const useAnomalyAlert = () => { const { lastRefresh } = useContext(UptimeRefreshContext); @@ -18,12 +18,12 @@ export const useAnomalyAlert = () => { const monitorId = useMonitorId(); - const { data: anomalyAlert } = useSelector(alertSelector); + const { data: anomalyAlert } = useSelector(anomalyAlertSelector); const alertFlyoutVisible = useSelector(selectAlertFlyoutVisibility); useEffect(() => { - dispatch(getExistingAlertAction.get({ monitorId })); + dispatch(getAnomalyAlertAction.get({ monitorId })); }, [monitorId, lastRefresh, dispatch, alertFlyoutVisible]); return anomalyAlert; diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/embeddables/__tests__/__mocks__/mock.ts b/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/embeddables/__tests__/__mocks__/poly_layer_mock.ts similarity index 100% rename from x-pack/plugins/uptime/public/components/monitor/status_details/location_map/embeddables/__tests__/__mocks__/mock.ts rename to x-pack/plugins/uptime/public/components/monitor/status_details/location_map/embeddables/__tests__/__mocks__/poly_layer_mock.ts diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/embeddables/__tests__/map_config.test.ts b/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/embeddables/__tests__/map_config.test.ts index 18b43434da24b1..582c60f048bed6 100644 --- a/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/embeddables/__tests__/map_config.test.ts +++ b/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/embeddables/__tests__/map_config.test.ts @@ -5,7 +5,7 @@ */ import { getLayerList } from '../map_config'; -import { mockLayerList } from './__mocks__/mock'; +import { mockLayerList } from './__mocks__/poly_layer_mock'; import { LocationPoint } from '../embedded_map'; import { UptimeAppColors } from '../../../../../../apps/uptime_app'; diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap b/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap index 4898ec00b38e24..e177f1cf011479 100644 --- a/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap +++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap @@ -1055,9 +1055,26 @@ exports[`MonitorList component renders the monitor list 1`] = ` + +
+ + Status alert + +
+ + +
+ Status alert +
+
+
+
+
+ +
+
+
+
+ + +
+ Status alert +
+
+
+
+
+ +
+
+
+
+ +
+
+ +
+
+ +`; + +exports[`EnableAlertComponent shallow renders without errors for valid props 1`] = ` + + + + + +`; diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/__tests__/enable_alert.test.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/__tests__/enable_alert.test.tsx new file mode 100644 index 00000000000000..4f41ea4c0b8958 --- /dev/null +++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/__tests__/enable_alert.test.tsx @@ -0,0 +1,90 @@ +/* + * 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 React from 'react'; +import { EnableMonitorAlert } from '../enable_alert'; +import * as redux from 'react-redux'; +import { + mountWithRouterRedux, + renderWithRouterRedux, + shallowWithRouterRedux, +} from '../../../../../lib'; +import { EuiPopover, EuiText } from '@elastic/eui'; +import { DYNAMIC_SETTINGS_DEFAULTS } from '../../../../../../common/constants'; + +describe('EnableAlertComponent', () => { + let defaultConnectors: string[] = []; + let alerts: any = []; + + beforeEach(() => { + jest.spyOn(redux, 'useDispatch').mockReturnValue(jest.fn()); + + jest.spyOn(redux, 'useSelector').mockImplementation((fn, d) => { + if (fn.name === 'selectDynamicSettings') { + return { + settings: Object.assign(DYNAMIC_SETTINGS_DEFAULTS, { + defaultConnectors, + }), + }; + } + if (fn.name === 'alertsSelector') { + return { + data: { + data: alerts, + }, + loading: false, + }; + } + return {}; + }); + }); + + it('shallow renders without errors for valid props', () => { + const wrapper = shallowWithRouterRedux( + + ); + expect(wrapper).toMatchSnapshot(); + }); + + it('renders without errors for valid props', () => { + const wrapper = renderWithRouterRedux( + + ); + expect(wrapper).toMatchSnapshot(); + }); + + it('displays define connectors when there is none', () => { + defaultConnectors = []; + const wrapper = mountWithRouterRedux( + + ); + expect(wrapper.find(EuiPopover)).toHaveLength(1); + wrapper.find('button').simulate('click'); + expect(wrapper.find(EuiText).text()).toBe( + 'To start enabling alerts, please define a default alert action connector in Settings' + ); + }); + + it('does not displays define connectors when there is connector', () => { + defaultConnectors = ['infra-slack-connector-id']; + const wrapper = mountWithRouterRedux( + + ); + + expect(wrapper.find(EuiPopover)).toHaveLength(0); + }); + + it('displays disable when alert is there', () => { + alerts = [{ id: 'test-alert', params: { search: 'testMonitor' } }]; + defaultConnectors = ['infra-slack-connector-id']; + + const wrapper = mountWithRouterRedux( + + ); + + expect(wrapper.find('button').prop('aria-label')).toBe('Disable status alert'); + }); +}); diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/define_connectors.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/define_connectors.tsx new file mode 100644 index 00000000000000..673588688db84f --- /dev/null +++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/define_connectors.tsx @@ -0,0 +1,55 @@ +/* + * 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 React, { useState } from 'react'; +import { EuiPopover, EuiSwitch, EuiText } from '@elastic/eui'; +import { useRouteMatch } from 'react-router-dom'; +import { FormattedMessage } from '@kbn/i18n/react'; +import { ReactRouterEuiLink } from '../../../common/react_router_helpers'; +import { MONITOR_ROUTE, SETTINGS_ROUTE } from '../../../../../common/constants'; +import { ENABLE_STATUS_ALERT } from './translations'; +import { SETTINGS_LINK_TEXT } from '../../../../pages/page_header'; + +export const DefineAlertConnectors = () => { + const [isPopoverOpen, setIsPopoverOpen] = useState(false); + + const onButtonClick = () => setIsPopoverOpen((val) => !val); + const closePopover = () => setIsPopoverOpen(false); + + const isMonitorPage = useRouteMatch(MONITOR_ROUTE); + + return ( + + } + isOpen={isPopoverOpen} + closePopover={closePopover} + > + + {' '} + + {SETTINGS_LINK_TEXT} + + + + ); +}; diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/enable_alert.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/enable_alert.tsx new file mode 100644 index 00000000000000..8a5a72891c3e76 --- /dev/null +++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/enable_alert.tsx @@ -0,0 +1,130 @@ +/* + * 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 React, { useEffect, useState } from 'react'; +import { EuiLoadingSpinner, EuiToolTip, EuiSwitch } from '@elastic/eui'; +import { useRouteMatch } from 'react-router-dom'; +import { useDispatch, useSelector } from 'react-redux'; +import { selectDynamicSettings } from '../../../../state/selectors'; +import { + alertsSelector, + connectorsSelector, + createAlertAction, + deleteAlertAction, + isAlertDeletedSelector, + newAlertSelector, +} from '../../../../state/alerts/alerts'; +import { MONITOR_ROUTE } from '../../../../../common/constants'; +import { DefineAlertConnectors } from './define_connectors'; +import { DISABLE_STATUS_ALERT, ENABLE_STATUS_ALERT } from './translations'; + +interface Props { + monitorId: string; + monitorName?: string; +} + +export const EnableMonitorAlert = ({ monitorId, monitorName }: Props) => { + const [isLoading, setIsLoading] = useState(false); + + const { settings } = useSelector(selectDynamicSettings); + + const isMonitorPage = useRouteMatch(MONITOR_ROUTE); + + const dispatch = useDispatch(); + + const { data: actionConnectors } = useSelector(connectorsSelector); + + const { data: alerts, loading: alertsLoading } = useSelector(alertsSelector); + + const { data: deletedAlertId } = useSelector(isAlertDeletedSelector); + + const { data: newAlert } = useSelector(newAlertSelector); + + const isNewAlert = newAlert?.params.search.includes(monitorId); + + let hasAlert = (alerts?.data ?? []).find((alert) => alert.params.search.includes(monitorId)); + + if (isNewAlert) { + // if it's newly created alert, we assign that quickly without waiting for find alert result + hasAlert = newAlert!; + } + if (deletedAlertId === hasAlert?.id) { + // if it just got deleted, we assign that quickly without waiting for find alert result + hasAlert = undefined; + } + + const defaultActions = (actionConnectors ?? []).filter((act) => + settings?.defaultConnectors?.includes(act.id) + ); + + const enableAlert = () => { + dispatch( + createAlertAction.get({ + defaultActions, + monitorId, + monitorName, + }) + ); + setIsLoading(true); + }; + + const disableAlert = () => { + if (hasAlert) { + dispatch( + deleteAlertAction.get({ + alertId: hasAlert.id, + }) + ); + setIsLoading(true); + } + }; + + useEffect(() => { + setIsLoading(false); + }, [hasAlert, deletedAlertId]); + + const hasDefaultConnectors = (settings?.defaultConnectors ?? []).length > 0; + + const showSpinner = isLoading || (alertsLoading && !alerts); + + const onAlertClick = () => { + if (hasAlert) { + disableAlert(); + } else { + enableAlert(); + } + }; + const btnLabel = hasAlert ? DISABLE_STATUS_ALERT : ENABLE_STATUS_ALERT; + + return hasDefaultConnectors || hasAlert ? ( +
+ { + + <> + {' '} + {showSpinner && } + + + } +
+ ) : ( + + ); +}; diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/translations.ts b/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/translations.ts new file mode 100644 index 00000000000000..421072ab603c2c --- /dev/null +++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/translations.ts @@ -0,0 +1,15 @@ +/* + * 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 { i18n } from '@kbn/i18n'; + +export const ENABLE_STATUS_ALERT = i18n.translate('xpack.uptime.monitorList.enableDownAlert', { + defaultMessage: 'Enable status alert', +}); + +export const DISABLE_STATUS_ALERT = i18n.translate('xpack.uptime.monitorList.disableDownAlert', { + defaultMessage: 'Disable status alert', +}); diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx index ce4c518d82255c..718e9e99480811 100644 --- a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx +++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx @@ -31,6 +31,8 @@ import { MonitorList } from '../../../state/reducers/monitor_list'; import { CertStatusColumn } from './cert_status_column'; import { MonitorListHeader } from './monitor_list_header'; import { URL_LABEL } from '../../common/translations'; +import { EnableMonitorAlert } from './columns/enable_alert'; +import { STATUS_ALERT_COLUMN } from './translations'; interface Props extends MonitorListProps { pageSize: number; @@ -49,7 +51,13 @@ export const noItemsMessage = (loading: boolean, filters?: string) => { return !!filters ? labels.NO_MONITOR_ITEM_SELECTED : labels.NO_DATA_MESSAGE; }; -export const MonitorListComponent: React.FC = ({ +export const MonitorListComponent: ({ + filters, + monitorList: { list, error, loading }, + linkParameters, + pageSize, + setPageSize, +}: Props) => any = ({ filters, monitorList: { list, error, loading }, linkParameters, @@ -69,7 +77,7 @@ export const MonitorListComponent: React.FC = ({ ...map, [id]: ( monitorId === id)} + summary={items.find(({ monitor_id: monitorId }) => monitorId === id)!} /> ), }; @@ -135,6 +143,18 @@ export const MonitorListComponent: React.FC = ({ ), }, + { + align: 'center' as const, + field: '', + name: STATUS_ALERT_COLUMN, + width: '150px', + render: (item: MonitorSummary) => ( + + ), + }, { align: 'right' as const, field: 'monitor_id', diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/__tests__/__snapshots__/monitor_list_drawer.test.tsx.snap b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/__tests__/__snapshots__/monitor_list_drawer.test.tsx.snap index 42c885dfaf515f..e4450e67ae5b3b 100644 --- a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/__tests__/__snapshots__/monitor_list_drawer.test.tsx.snap +++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/__tests__/__snapshots__/monitor_list_drawer.test.tsx.snap @@ -86,6 +86,7 @@ exports[`MonitorListDrawer component renders a MonitorListDrawer when there are } > Get https://expired.badssl.com: x509: certificate has expired or is not yet valid diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/__tests__/monitor_list_drawer.test.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/__tests__/monitor_list_drawer.test.tsx index 502ccd53ef80ca..302137199276bf 100644 --- a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/__tests__/monitor_list_drawer.test.tsx +++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/__tests__/monitor_list_drawer.test.tsx @@ -52,7 +52,11 @@ describe('MonitorListDrawer component', () => { it('renders nothing when no summary data is present', () => { const component = shallowWithRouter( - + ); expect(component).toEqual({}); }); @@ -60,14 +64,22 @@ describe('MonitorListDrawer component', () => { it('renders nothing when no check data is present', () => { delete summary.state.summaryPings; const component = shallowWithRouter( - + ); expect(component).toEqual({}); }); it('renders a MonitorListDrawer when there is only one check', () => { const component = shallowWithRouter( - + ); expect(component).toMatchSnapshot(); }); @@ -88,7 +100,11 @@ describe('MonitorListDrawer component', () => { } const component = shallowWithRouter( - + ); expect(component).toMatchSnapshot(); }); diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/enabled_alerts.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/enabled_alerts.tsx new file mode 100644 index 00000000000000..d869c6d78ec11d --- /dev/null +++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/enabled_alerts.tsx @@ -0,0 +1,57 @@ +/* + * 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 React, { useContext } from 'react'; +import { EuiCallOut, EuiListGroup, EuiLoadingSpinner, EuiSpacer, EuiText } from '@elastic/eui'; +import { EuiListGroupItemProps } from '@elastic/eui/src/components/list_group/list_group_item'; +import { i18n } from '@kbn/i18n'; +import { UptimeSettingsContext } from '../../../../contexts'; +import { Alert } from '../../../../../../triggers_actions_ui/public'; + +interface Props { + monitorAlerts: Alert[]; + loading: boolean; +} + +export const EnabledAlerts = ({ monitorAlerts, loading }: Props) => { + const { basePath } = useContext(UptimeSettingsContext); + + const listItems: EuiListGroupItemProps[] = []; + + (monitorAlerts ?? []).forEach((alert, ind) => { + listItems.push({ + label: alert.name, + href: basePath + '/app/management/insightsAndAlerting/triggersActions/alert/' + alert.id, + size: 's', + 'data-test-subj': 'uptimeMonitorListDrawerAlert' + ind, + }); + }); + + return ( + <> + + + +

+ {i18n.translate('xpack.uptime.monitorList.enabledAlerts.title', { + defaultMessage: 'Enabled alerts:', + description: 'Alerts enabled for this monitor', + })} +

+ + + {listItems.length === 0 && !loading && ( + + )} + {loading ? : } + + ); +}; diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/list_drawer_container.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/list_drawer_container.tsx index bec32ace27f2b2..fd68a487a21e40 100644 --- a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/list_drawer_container.tsx +++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/list_drawer_container.tsx @@ -4,44 +4,52 @@ * you may not use this file except in compliance with the Elastic License. */ -import React, { useEffect } from 'react'; -import { connect } from 'react-redux'; +import React, { useContext, useEffect } from 'react'; +import { useDispatch, useSelector } from 'react-redux'; import { AppState } from '../../../../state'; -import { monitorDetailsSelector } from '../../../../state/selectors'; -import { MonitorDetailsActionPayload } from '../../../../state/actions/types'; +import { monitorDetailsLoadingSelector, monitorDetailsSelector } from '../../../../state/selectors'; import { getMonitorDetailsAction } from '../../../../state/actions/monitor'; import { MonitorListDrawerComponent } from './monitor_list_drawer'; import { useGetUrlParams } from '../../../../hooks'; -import { MonitorDetails, MonitorSummary } from '../../../../../common/runtime_types'; +import { MonitorSummary } from '../../../../../common/runtime_types'; +import { alertsSelector } from '../../../../state/alerts/alerts'; +import { UptimeRefreshContext } from '../../../../contexts'; interface ContainerProps { summary: MonitorSummary; - monitorDetails: MonitorDetails; - loadMonitorDetails: typeof getMonitorDetailsAction; } -const Container: React.FC = ({ summary, loadMonitorDetails, monitorDetails }) => { +export const MonitorListDrawer: React.FC = ({ summary }) => { + const { lastRefresh } = useContext(UptimeRefreshContext); + const monitorId = summary?.monitor_id; const { dateRangeStart: dateStart, dateRangeEnd: dateEnd } = useGetUrlParams(); - useEffect(() => { - loadMonitorDetails({ - dateStart, - dateEnd, - monitorId, - }); - }, [dateStart, dateEnd, monitorId, loadMonitorDetails]); - return ; -}; + const monitorDetails = useSelector((state: AppState) => monitorDetailsSelector(state, summary)); + + const isLoading = useSelector(monitorDetailsLoadingSelector); -const mapStateToProps = (state: AppState, { summary }: any) => ({ - monitorDetails: monitorDetailsSelector(state, summary), -}); + const dispatch = useDispatch(); -const mapDispatchToProps = (dispatch: any) => ({ - loadMonitorDetails: (actionPayload: MonitorDetailsActionPayload) => - dispatch(getMonitorDetailsAction(actionPayload)), -}); + const { data: alerts, loading: alertsLoading } = useSelector(alertsSelector); -export const MonitorListDrawer = connect(mapStateToProps, mapDispatchToProps)(Container); + const hasAlert = (alerts?.data ?? []).find((alert) => alert.params.search.includes(monitorId)); + + useEffect(() => { + dispatch( + getMonitorDetailsAction.get({ + dateStart, + dateEnd, + monitorId, + }) + ); + }, [dateStart, dateEnd, monitorId, dispatch, hasAlert, lastRefresh]); + return ( + + ); +}; diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/monitor_list_drawer.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/monitor_list_drawer.tsx index 305455c8ba573f..4b359099bc58c9 100644 --- a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/monitor_list_drawer.tsx +++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/monitor_list_drawer.tsx @@ -6,11 +6,13 @@ import React from 'react'; import styled from 'styled-components'; -import { EuiLink, EuiSpacer, EuiFlexGroup, EuiFlexItem, EuiIcon, EuiText } from '@elastic/eui'; +import { EuiLink, EuiFlexGroup, EuiFlexItem, EuiIcon, EuiText } from '@elastic/eui'; import { MostRecentError } from './most_recent_error'; import { MonitorStatusList } from './monitor_status_list'; import { MonitorDetails, MonitorSummary } from '../../../../../common/runtime_types'; import { ActionsPopover } from './actions_popover/actions_popover_container'; +import { EnabledAlerts } from './enabled_alerts'; +import { Alert } from '../../../../../../triggers_actions_ui/public'; const ContainerDiv = styled.div` padding: 10px; @@ -27,13 +29,18 @@ interface MonitorListDrawerProps { * Monitor details to be fetched from rest api using monitorId */ monitorDetails: MonitorDetails; + loading: boolean; } /** * The elements shown when the user expands the monitor list rows. */ -export function MonitorListDrawerComponent({ summary, monitorDetails }: MonitorListDrawerProps) { +export function MonitorListDrawerComponent({ + summary, + monitorDetails, + loading, +}: MonitorListDrawerProps) { const monitorUrl = summary?.state?.url?.full || ''; return summary && summary.state.summaryPings ? ( @@ -51,8 +58,8 @@ export function MonitorListDrawerComponent({ summary, monitorDetails }: MonitorL - + {monitorDetails && monitorDetails.error && ( { heartbeatIndices: 'heartbeat-8*', certExpirationThreshold: 7, certAgeThreshold: 36, + defaultConnectors: [], }} fieldErrors={null} isDisabled={false} @@ -37,6 +38,7 @@ describe('CertificateForm', () => { heartbeatIndices: 'heartbeat-8*', certExpirationThreshold: 7, certAgeThreshold: 36, + defaultConnectors: [], }} fieldErrors={null} isDisabled={false} @@ -90,6 +92,7 @@ describe('CertificateForm', () => { heartbeatIndices: 'heartbeat-8*', certExpirationThreshold: 7, certAgeThreshold: 36, + defaultConnectors: [], }} fieldErrors={null} isDisabled={false} diff --git a/x-pack/plugins/uptime/public/components/settings/__tests__/indices_form.test.tsx b/x-pack/plugins/uptime/public/components/settings/__tests__/indices_form.test.tsx index 68a0d96d491b64..01b66263d3e933 100644 --- a/x-pack/plugins/uptime/public/components/settings/__tests__/indices_form.test.tsx +++ b/x-pack/plugins/uptime/public/components/settings/__tests__/indices_form.test.tsx @@ -19,6 +19,7 @@ describe('CertificateForm', () => { heartbeatIndices: 'heartbeat-8*', certAgeThreshold: 36, certExpirationThreshold: 7, + defaultConnectors: [], }} fieldErrors={null} isDisabled={false} diff --git a/x-pack/plugins/uptime/public/components/settings/add_connector_flyout.tsx b/x-pack/plugins/uptime/public/components/settings/add_connector_flyout.tsx new file mode 100644 index 00000000000000..60c0807ae89a89 --- /dev/null +++ b/x-pack/plugins/uptime/public/components/settings/add_connector_flyout.tsx @@ -0,0 +1,70 @@ +/* + * 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 React, { useEffect, useState } from 'react'; +import { FormattedMessage } from '@kbn/i18n/react'; +import { useDispatch } from 'react-redux'; +import { EuiButtonEmpty } from '@elastic/eui'; +import { + ActionsConnectorsContextProvider, + ConnectorAddFlyout, +} from '../../../../triggers_actions_ui/public'; + +import { useKibana } from '../../../../../../src/plugins/kibana_react/public'; +import { getConnectorsAction } from '../../state/alerts/alerts'; + +interface Props { + focusInput: () => void; +} +export const AddConnectorFlyout = ({ focusInput }: Props) => { + const [addFlyoutVisible, setAddFlyoutVisibility] = useState(false); + + const { + services: { + triggers_actions_ui: { actionTypeRegistry }, + application, + docLinks, + http, + notifications, + }, + } = useKibana(); + + const dispatch = useDispatch(); + + useEffect(() => { + dispatch(getConnectorsAction.get()); + focusInput(); + }, [addFlyoutVisible, dispatch, focusInput]); + + return ( + <> + setAddFlyoutVisibility(true)} + > + + + + + + + ); +}; diff --git a/x-pack/plugins/uptime/public/components/settings/alert_defaults_form.tsx b/x-pack/plugins/uptime/public/components/settings/alert_defaults_form.tsx new file mode 100644 index 00000000000000..b3b38a84e4f22a --- /dev/null +++ b/x-pack/plugins/uptime/public/components/settings/alert_defaults_form.tsx @@ -0,0 +1,182 @@ +/* + * 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 React, { useEffect, useState, useRef, useCallback } from 'react'; +import { FormattedMessage } from '@kbn/i18n/react'; +import { + EuiDescribedFormGroup, + EuiFormRow, + EuiTitle, + EuiSpacer, + EuiComboBox, + EuiIcon, + EuiComboBoxOptionOption, +} from '@elastic/eui'; +import { useSelector } from 'react-redux'; +import styled from 'styled-components'; +import { SettingsFormProps } from '../../pages/settings'; +import { connectorsSelector } from '../../state/alerts/alerts'; +import { AddConnectorFlyout } from './add_connector_flyout'; +import { useGetUrlParams, useUrlParams } from '../../hooks'; +import { alertFormI18n } from './translations'; +import { useInitApp } from '../../hooks/use_init_app'; +import { useKibana } from '../../../../../../src/plugins/kibana_react/public'; + +type ConnectorOption = EuiComboBoxOptionOption; + +const ConnectorSpan = styled.span` + .euiIcon { + margin-right: 5px; + } + > img { + width: 16px; + height: 20px; + } +`; + +export const AlertDefaultsForm: React.FC = ({ + onChange, + loading, + formFields, + fieldErrors, + isDisabled, +}) => { + const { + services: { + triggers_actions_ui: { actionTypeRegistry }, + }, + } = useKibana(); + const { focusConnectorField } = useGetUrlParams(); + + const updateUrlParams = useUrlParams()[1]; + + const inputRef = useRef(null); + + useInitApp(); + + useEffect(() => { + if (focusConnectorField && inputRef.current && !loading) { + inputRef.current.focus(); + } + }, [focusConnectorField, inputRef, loading]); + + const { data = [] } = useSelector(connectorsSelector); + + const [error, setError] = useState(undefined); + + const onBlur = () => { + if (inputRef.current) { + const { value } = inputRef.current; + setError(value.length === 0 ? undefined : `"${value}" is not a valid option`); + } + if (inputRef.current && !loading && focusConnectorField) { + updateUrlParams({ focusConnectorField: undefined }); + } + }; + + const onSearchChange = (value: string, hasMatchingOptions?: boolean) => { + setError( + value.length === 0 || hasMatchingOptions ? undefined : `"${value}" is not a valid option` + ); + }; + + const options = (data ?? []).map((connectorAction) => ({ + value: connectorAction.id, + label: connectorAction.name, + 'data-test-subj': connectorAction.name, + })); + + const renderOption = (option: ConnectorOption) => { + const { label, value } = option; + + const { actionTypeId: type } = data?.find((dt) => dt.id === value) ?? {}; + return ( + + + {label} + + ); + }; + + const onOptionChange = (selectedOptions: ConnectorOption[]) => { + onChange({ + defaultConnectors: selectedOptions.map((item) => { + const conOpt = data?.find((dt) => dt.id === item.value)!; + return conOpt.id; + }), + }); + }; + + return ( + <> + +

+ +

+ + + + + + } + description={ + + } + > + + } + > + + formFields?.defaultConnectors?.includes(opt.value) + )} + inputRef={(input) => { + inputRef.current = input; + }} + onSearchChange={onSearchChange} + onBlur={onBlur} + isLoading={loading} + isDisabled={isDisabled} + onChange={onOptionChange} + data-test-subj={`default-connectors-input-${loading ? 'loading' : 'loaded'}`} + renderOption={renderOption} + /> + + + { + if (inputRef.current) { + inputRef.current.focus(); + } + }, [])} + /> + + + + ); +}; diff --git a/x-pack/plugins/uptime/public/components/settings/translations.ts b/x-pack/plugins/uptime/public/components/settings/translations.ts index 2de25a44165c6c..f9f3b0b6af9a99 100644 --- a/x-pack/plugins/uptime/public/components/settings/translations.ts +++ b/x-pack/plugins/uptime/public/components/settings/translations.ts @@ -22,3 +22,12 @@ export const certificateFormTranslations = { } ), }; + +export const alertFormI18n = { + inputPlaceHolder: i18n.translate( + 'xpack.uptime.sourceConfiguration.alertDefaultForm.selectConnector', + { + defaultMessage: 'Please select one or more connectors', + } + ), +}; diff --git a/x-pack/plugins/uptime/public/hooks/__tests__/__snapshots__/use_url_params.test.tsx.snap b/x-pack/plugins/uptime/public/hooks/__tests__/__snapshots__/use_url_params.test.tsx.snap index 5d2565b7210da8..5bbb606b6142fe 100644 --- a/x-pack/plugins/uptime/public/hooks/__tests__/__snapshots__/use_url_params.test.tsx.snap +++ b/x-pack/plugins/uptime/public/hooks/__tests__/__snapshots__/use_url_params.test.tsx.snap @@ -209,7 +209,7 @@ exports[`useUrlParams deletes keys that do not have truthy values 1`] = ` } >
- {"absoluteDateRangeStart":20,"absoluteDateRangeEnd":20,"autorefreshInterval":60000,"autorefreshIsPaused":false,"dateRangeStart":"now-12","dateRangeEnd":"now","filters":"","search":"","selectedPingStatus":"","statusFilter":"","pagination":"foo"} + {"absoluteDateRangeStart":20,"absoluteDateRangeEnd":20,"autorefreshInterval":60000,"autorefreshIsPaused":false,"dateRangeStart":"now-12","dateRangeEnd":"now","filters":"","search":"","selectedPingStatus":"","statusFilter":"","pagination":"foo","focusConnectorField":false}