[Uptime] Use React.lazy for alert type registration (#66829) (#67054)

justinkambic · elasticmachine · web-flow · commit d7da2c820c58 · 2020-05-26T11:48:41.000-04:00
* Use React.lazy for alert type registration.

* Add typing to TLS alert component.

Co-authored-by: Elastic Machine &lt;elasticmachine@users.noreply.github.com&gt;

Co-authored-by: Elastic Machine &lt;elasticmachine@users.noreply.github.com&gt;
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
@@ -21,13 +21,13 @@ interface Props {
   };
 }
 
-export const AlertMonitorStatus = ({
+export const AlertMonitorStatus: React.FC<Props> = ({
   autocomplete,
   enabled,
   numTimes,
   setAlertParams,
   timerange,
-}: Props) => {
+}) => {
   const { filters, locations } = useSelector(selectMonitorStatusAlert);
   return (
     <AlertMonitorStatusComponent
@@ -41,3 +41,6 @@ export const AlertMonitorStatus = ({
     />
   );
 };
+
+// eslint-disable-next-line import/no-default-export
+export { AlertMonitorStatus as default };
diff --git a/x-pack/plugins/uptime/public/components/overview/alerts/alerts_containers/alert_tls.tsx b/x-pack/plugins/uptime/public/components/overview/alerts/alerts_containers/alert_tls.tsx
@@ -10,7 +10,7 @@ import { AlertTlsComponent } from '../alert_tls';
 import { setAlertFlyoutVisible } from '../../../../state/actions';
 import { selectDynamicSettings } from '../../../../state/selectors';
 
-export const AlertTls = () => {
+export const AlertTls: React.FC<{}> = () => {
   const dispatch = useDispatch();
   const setFlyoutVisible = useCallback((value: boolean) => dispatch(setAlertFlyoutVisible(value)), [
     dispatch,
@@ -24,3 +24,6 @@ export const AlertTls = () => {
     />
   );
 };
+
+// eslint-disable-next-line import/no-default-export
+export { AlertTls as default };
diff --git a/x-pack/plugins/uptime/public/lib/alert_types/monitor_status.tsx b/x-pack/plugins/uptime/public/lib/alert_types/monitor_status.tsx
@@ -11,7 +11,6 @@ import { isRight } from 'fp-ts/lib/Either';
 import { AlertTypeModel } from '../../../../triggers_actions_ui/public';
 import { AlertTypeInitializer } from '.';
 import { StatusCheckExecutorParamsType } from '../../../common/runtime_types';
-import { AlertMonitorStatus } from '../../components/overview/alerts/alerts_containers';
 import { MonitorStatusTitle } from './monitor_status_title';
 import { CLIENT_ALERT_TYPES } from '../../../common/constants';
 import { MonitorStatusTranslations } from './translations';
@@ -57,6 +56,10 @@ export const validate = (alertParams: any) => {
 
 const { defaultActionMessage } = MonitorStatusTranslations;
 
+const AlertMonitorStatus = React.lazy(() =>
+  import('../../components/overview/alerts/alerts_containers/alert_monitor_status')
+);
+
 export const initMonitorStatusAlertType: AlertTypeInitializer = ({
   autocomplete,
 }): AlertTypeModel => ({
diff --git a/x-pack/plugins/uptime/public/lib/alert_types/tls.tsx b/x-pack/plugins/uptime/public/lib/alert_types/tls.tsx
@@ -9,14 +9,15 @@ import { AlertTypeModel } from '../../../../triggers_actions_ui/public';
 import { CLIENT_ALERT_TYPES } from '../../../common/constants';
 import { TlsTranslations } from './translations';
 import { AlertTypeInitializer } from '.';
-import { AlertTls } from '../../components/overview/alerts/alerts_containers/alert_tls';
 
 const { name, defaultActionMessage } = TlsTranslations;
 
 export const initTlsAlertType: AlertTypeInitializer = (): AlertTypeModel => ({
   id: CLIENT_ALERT_TYPES.TLS,
   iconClass: 'uptimeApp',
-  alertParamsExpression: () => <AlertTls />,
+  alertParamsExpression: React.lazy(() =>
+    import('../../components/overview/alerts/alerts_containers/alert_tls')
+  ),
   name,
   validate: () => ({ errors: {} }),
   defaultActionMessage,
