add lazy loading

x-pack/plugins/triggers_actions_ui/public/index.ts

@@ -19,6 +19,7 @@ export {
   ActionType,
   ActionTypeRegistryContract,
   AlertTypeParamsExpressionProps,
+  ValidationResult,
 } from './types';
 export {
   ConnectorAddFlyout,

x-pack/plugins/uptime/common/constants/index.ts

@@ -4,13 +4,11 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export * from './alerts';
 export { CHART_FORMAT_LIMITS } from './chart_format_limits';
 export { CLIENT_DEFAULTS } from './client_defaults';
 export { CONTEXT_DEFAULTS } from './context_defaults';
 export * from './capabilities';
 export * from './settings_defaults';
-export { PLUGIN } from './plugin';
 export { QUERY } from './query';
 export * from './ui';
 export * from './rest_api';

x-pack/plugins/uptime/public/apps/plugin.ts

@@ -12,9 +12,11 @@ import {
   AppMountParameters,
 } from 'kibana/public';
 import { DEFAULT_APP_CATEGORIES } from '../../../../../src/core/public';
-import { PLUGIN } from '../../common/constants';
-import { FeatureCatalogueCategory } from '../../../../../src/plugins/home/public';
-import { HomePublicPluginSetup } from '../../../../../src/plugins/home/public';
+
+import {
+  FeatureCatalogueCategory,
+  HomePublicPluginSetup,
+} from '../../../../../src/plugins/home/public';
 import { EmbeddableStart } from '../../../../../src/plugins/embeddable/public';
 import {
   TriggersAndActionsUIPublicPluginSetup,
@@ -25,10 +27,8 @@ import {
   DataPublicPluginStart,
 } from '../../../../../src/plugins/data/public';
 import { alertTypeInitializers } from '../lib/alert_types';
-import { kibanaService } from '../state/kibana_service';
-import { fetchIndexStatus } from '../state/api';
-import { ObservabilityPluginSetup } from '../../../observability/public';
-import { fetchUptimeOverviewData } from './uptime_overview_fetcher';
+import { FetchDataParams, ObservabilityPluginSetup } from '../../../observability/public';
+import { PLUGIN } from '../../common/constants/plugin';
 
 export interface ClientPluginsSetup {
   data: DataPublicPluginSetup;
@@ -65,14 +65,23 @@ export class UptimePlugin
         category: FeatureCatalogueCategory.DATA,
       });
     }
+    const getUptimeDataHelper = async () => {
+      const [coreStart] = await core.getStartServices();
+      const { UptimeDataHelper } = await import('./uptime_overview_fetcher');
 
+      return UptimeDataHelper(coreStart);
+    };
     plugins.observability.dashboard.register({
       appName: 'uptime',
       hasData: async () => {
-        const status = await fetchIndexStatus();
+        const dataHelper = await getUptimeDataHelper();
+        const status = await dataHelper.indexStatus();
         return status.docCount > 0;
       },
-      fetchData: fetchUptimeOverviewData,
+      fetchData: async (params: FetchDataParams) => {
+        const dataHelper = await getUptimeDataHelper();
+        return await dataHelper.overviewData(params);
+      },
     });
 
     core.application.register({
@@ -93,7 +102,6 @@ export class UptimePlugin
   }
 
   public start(start: CoreStart, plugins: ClientPluginsStart): void {
-    kibanaService.core = start;
     alertTypeInitializers.forEach((init) => {
       const alertInitializer = init({
         core: start,

x-pack/plugins/uptime/public/apps/render_app.tsx

@@ -13,10 +13,10 @@ import {
   DEFAULT_DARK_MODE,
   DEFAULT_TIMEPICKER_QUICK_RANGES,
   INTEGRATED_SOLUTIONS,
-  PLUGIN,
 } from '../../common/constants';
-import { UptimeApp, UptimeAppProps } from '../uptime_app';
+import { UptimeApp, UptimeAppProps } from './uptime_app';
 import { ClientPluginsSetup, ClientPluginsStart } from './plugin';
+import { PLUGIN } from '../../common/constants/plugin';
 
 export function renderApp(
   core: CoreStart,

x-pack/plugins/uptime/public/uptime_app.tsx → x-pack/plugins/uptime/public/apps/uptime_app.tsx

@@ -9,24 +9,25 @@ import { i18n } from '@kbn/i18n';
 import React, { useEffect } from 'react';
 import { Provider as ReduxProvider } from 'react-redux';
 import { BrowserRouter as Router } from 'react-router-dom';
-import { I18nStart, ChromeBreadcrumb, CoreStart } from 'src/core/public';
-import { KibanaContextProvider } from '../../../../src/plugins/kibana_react/public';
-import { ClientPluginsSetup, ClientPluginsStart } from './apps/plugin';
-import { UMUpdateBadge } from './lib/lib';
+import { I18nStart, ChromeBreadcrumb, CoreStart } from 'kibana/public';
+import { KibanaContextProvider } from '../../../../../src/plugins/kibana_react/public';
+import { ClientPluginsSetup, ClientPluginsStart } from './plugin';
+import { UMUpdateBadge } from '../lib/lib';
 import {
   UptimeRefreshContextProvider,
   UptimeSettingsContextProvider,
   UptimeThemeContextProvider,
   UptimeStartupPluginsContextProvider,
-} from './contexts';
-import { CommonlyUsedRange } from './components/common/uptime_date_picker';
-import { setBasePath } from './state/actions';
-import { PageRouter } from './routes';
+} from '../contexts';
+import { CommonlyUsedRange } from '../components/common/uptime_date_picker';
+import { setBasePath } from '../state/actions';
+import { PageRouter } from '../routes';
 import {
   UptimeAlertsContextProvider,
   UptimeAlertsFlyoutWrapper,
-} from './components/overview/alerts';
-import { store } from './state';
+} from '../components/overview/alerts';
+import { store } from '../state';
+import { kibanaService } from '../state/kibana_service';
 
 export interface UptimeAppColors {
   danger: string;
@@ -86,6 +87,8 @@ const Application = (props: UptimeAppProps) => {
     );
   }, [canSave, renderGlobalHelpControls, setBadge]);
 
+  kibanaService.core = core;
+
   store.dispatch(setBasePath(basePath));
 
   return (

x-pack/plugins/uptime/public/apps/uptime_overview_fetcher.ts

@@ -4,10 +4,12 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { fetchPingHistogram, fetchSnapshotCount } from '../state/api';
+import { CoreStart } from 'kibana/public';
 import { UptimeFetchDataResponse, FetchDataParams } from '../../../observability/public';
+import { fetchIndexStatus, fetchPingHistogram, fetchSnapshotCount } from '../state/api';
+import { kibanaService } from '../state/kibana_service';
 
-export async function fetchUptimeOverviewData({
+async function fetchUptimeOverviewData({
   absoluteTime,
   relativeTime,
   bucketSize,
@@ -52,3 +54,12 @@ export async function fetchUptimeOverviewData({
   };
   return response;
 }
+
+export function UptimeDataHelper(coreStart: CoreStart | null) {
+  kibanaService.core = coreStart!;
+
+  return {
+    indexStatus: fetchIndexStatus,
+    overviewData: fetchUptimeOverviewData,
+  };
+}

x-pack/plugins/uptime/public/components/monitor/ml/manage_ml_job.tsx

@@ -8,7 +8,7 @@ import React, { useContext, useState } from 'react';
 
 import { EuiButtonEmpty, EuiContextMenu, EuiIcon, EuiPopover } from '@elastic/eui';
 import { useSelector, useDispatch } from 'react-redux';
-import { CLIENT_ALERT_TYPES } from '../../../../common/constants';
+import { CLIENT_ALERT_TYPES } from '../../../../common/constants/alerts';
 import {
   canDeleteMLJobSelector,
   hasMLJobSelector,

x-pack/plugins/uptime/public/components/monitor/ml/ml_flyout_container.tsx

@@ -22,13 +22,14 @@ import {
 import { MLJobLink } from './ml_job_link';
 import * as labels from './translations';
 import { MLFlyoutView } from './ml_flyout';
-import { CLIENT_ALERT_TYPES, ML_JOB_ID } from '../../../../common/constants';
+import { ML_JOB_ID } from '../../../../common/constants';
 import { UptimeRefreshContext, UptimeSettingsContext } from '../../../contexts';
 import { useGetUrlParams } from '../../../hooks';
 import { getDynamicSettings } from '../../../state/actions/dynamic_settings';
 import { useMonitorId } from '../../../hooks';
 import { kibanaService } from '../../../state/kibana_service';
 import { toMountPoint } from '../../../../../../../src/plugins/kibana_react/public';
+import { CLIENT_ALERT_TYPES } from '../../../../common/constants/alerts';
 
 interface Props {
   onClose: () => void;

x-pack/plugins/uptime/public/components/monitor/status_details/location_map/embeddables/__tests__/map_config.test.ts

@@ -7,7 +7,7 @@
 import { getLayerList } from '../map_config';
 import { mockLayerList } from './__mocks__/mock';
 import { LocationPoint } from '../embedded_map';
-import { UptimeAppColors } from '../../../../../../uptime_app';
+import { UptimeAppColors } from '../../../../../../apps/uptime_app';
 
 jest.mock('uuid', () => {
   return {

x-pack/plugins/uptime/public/components/monitor/status_details/location_map/embeddables/map_config.ts

@@ -6,7 +6,7 @@
 
 import lowPolyLayerFeatures from './low_poly_layer.json';
 import { LocationPoint } from './embedded_map';
-import { UptimeAppColors } from '../../../../../uptime_app';
+import { UptimeAppColors } from '../../../../../apps/uptime_app';
 
 /**
  * Returns `Source/Destination Point-to-point` Map LayerList configuration, with a source,

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

@@ -24,6 +24,3 @@ export const AlertTls: React.FC<{}> = () => {
     />
   );
 };
-
-// eslint-disable-next-line import/no-default-export
-export { AlertTls as default };

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

@@ -25,8 +25,7 @@ interface Props {
   setAlertParams: (key: string, value: any) => void;
 }
 
-// eslint-disable-next-line import/no-default-export
-export default function AnomalyAlertComponent({ setAlertParams, alertParams }: Props) {
+export function AnomalyAlertComponent({ setAlertParams, alertParams }: Props) {
   const [severity, setSeverity] = useState(DEFAULT_SEVERITY);
 
   const monitorIdStore = useSelector(monitorIdSelector);

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

@@ -15,7 +15,7 @@ import {
 import React, { useState } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
-import { CLIENT_ALERT_TYPES } from '../../../../common/constants';
+import { CLIENT_ALERT_TYPES } from '../../../../common/constants/alerts';
 import { ToggleFlyoutTranslations } from './translations';
 import { ToggleAlertFlyoutButtonProps } from './alerts_containers';
 

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

@@ -5,8 +5,7 @@
  */
 
 import React, { useState, useEffect } from 'react';
-import { EuiCallOut } from '@elastic/eui';
-import { htmlIdGenerator } from '@elastic/eui/lib/services';
+import { EuiCallOut, htmlIdGenerator } from '@elastic/eui';
 import styled from 'styled-components';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { Typeahead } from './typeahead';

x-pack/plugins/uptime/public/contexts/uptime_settings_context.tsx

@@ -5,7 +5,7 @@
  */
 
 import React, { createContext, useMemo } from 'react';
-import { UptimeAppProps } from '../uptime_app';
+import { UptimeAppProps } from '../apps/uptime_app';
 import { CLIENT_DEFAULTS, CONTEXT_DEFAULTS } from '../../common/constants';
 import { CommonlyUsedRange } from '../components/common/uptime_date_picker';
 import { useGetUrlParams } from '../hooks';

x-pack/plugins/uptime/public/contexts/uptime_theme_context.tsx

@@ -9,7 +9,7 @@ import React, { createContext, useMemo } from 'react';
 import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
 import { EUI_CHARTS_THEME_DARK, EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme';
 import { DARK_THEME, LIGHT_THEME, PartialTheme, Theme } from '@elastic/charts';
-import { UptimeAppColors } from '../uptime_app';
+import { UptimeAppColors } from '../apps/uptime_app';
 
 export interface UptimeThemeContextValues {
   colors: UptimeAppColors;

x-pack/plugins/uptime/public/index.ts

@@ -5,7 +5,7 @@
  */
 
 import { PluginInitializerContext } from 'kibana/public';
-import { UptimePlugin } from './apps';
+import { UptimePlugin } from './apps/plugin';
 
 export const plugin = (initializerContext: PluginInitializerContext) =>
   new UptimePlugin(initializerContext);

x-pack/plugins/uptime/public/lib/alert_types/__tests__/monitor_status.test.ts

@@ -4,7 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { validate, initMonitorStatusAlertType } from '../monitor_status';
+import { initMonitorStatusAlertType } from '../monitor_status';
+import { validateMonitorStatusParams as validate } from '../lazy_wrapper/validate_monitor_status';
 
 describe('monitor status alert type', () => {
   describe('validate', () => {
@@ -206,19 +207,11 @@ describe('monitor status alert type', () => {
       ",
         "iconClass": "uptimeApp",
         "id": "xpack.uptime.alerts.monitorStatus",
-        "name": <Provider
-          store={
-            Object {
-              "dispatch": [Function],
-              "getState": [Function],
-              "replaceReducer": [Function],
-              "subscribe": [Function],
-              Symbol(observable): [Function],
-            }
-          }
-        >
-          <MonitorStatusTitle />
-        </Provider>,
+        "name": <FormattedMessage
+          defaultMessage="Uptime monitor status"
+          id="xpack.uptime.alerts.monitorStatus.title.label"
+          values={Object {}}
+        />,
         "requiresAppContext": false,
         "validate": [Function],
       }

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

@@ -5,30 +5,22 @@
  */
 
 import React from 'react';
-import { Provider as ReduxProvider } from 'react-redux';
 import { AlertTypeModel } from '../../../../triggers_actions_ui/public';
-import { CLIENT_ALERT_TYPES } from '../../../common/constants';
+import { CLIENT_ALERT_TYPES } from '../../../common/constants/alerts';
 import { DurationAnomalyTranslations } from './translations';
 import { AlertTypeInitializer } from '.';
-import { KibanaContextProvider } from '../../../../../../src/plugins/kibana_react/public';
-import { store } from '../../state';
 
 const { name, defaultActionMessage } = DurationAnomalyTranslations;
-const AnomalyAlertExpression = React.lazy(() =>
-  import('../../components/overview/alerts/anomaly_alert/anomaly_alert')
-);
+const DurationAnomalyAlert = React.lazy(() => import('./lazy_wrapper/duration_anomaly'));
+
 export const initDurationAnomalyAlertType: AlertTypeInitializer = ({
   core,
   plugins,
 }): AlertTypeModel => ({
   id: CLIENT_ALERT_TYPES.DURATION_ANOMALY,
   iconClass: 'uptimeApp',
-  alertParamsExpression: (params: any) => (
-    <ReduxProvider store={store}>
-      <KibanaContextProvider services={{ ...core, ...plugins }}>
-        <AnomalyAlertExpression {...params} />
-      </KibanaContextProvider>
-    </ReduxProvider>
+  alertParamsExpression: (params: unknown) => (
+    <DurationAnomalyAlert core={core} plugins={plugins} params={params} />
   ),
   name,
   validate: () => ({ errors: {} }),

x-pack/plugins/uptime/public/lib/alert_types/lazy_wrapper/duration_anomaly.tsx

@@ -0,0 +1,32 @@
+/*
+ * 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 { Provider as ReduxProvider } from 'react-redux';
+import { CoreStart } from 'kibana/public';
+import { store } from '../../../state';
+import { AnomalyAlertComponent } from '../../../components/overview/alerts/anomaly_alert/anomaly_alert';
+import { KibanaContextProvider } from '../../../../../../../src/plugins/kibana_react/public';
+import { ClientPluginsStart } from '../../../apps/plugin';
+import { kibanaService } from '../../../state/kibana_service';
+
+interface Props {
+  core: CoreStart;
+  plugins: ClientPluginsStart;
+  params: any;
+}
+
+// eslint-disable-next-line import/no-default-export
+export default function DurationAnomalyAlert({ core, plugins, params }: Props) {
+  kibanaService.core = core;
+  return (
+    <ReduxProvider store={store}>
+      <KibanaContextProvider services={{ ...core, ...plugins }}>
+        <AnomalyAlertComponent {...params} />
+      </KibanaContextProvider>
+    </ReduxProvider>
+  );
+}