[Uptime] Create state store at plugin setup time

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

@@ -3,15 +3,26 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
+
+import { Store } from 'redux';
 import { CoreSetup, CoreStart, Plugin, PluginInitializerContext } from 'kibana/public';
 import { AppMountParameters, DEFAULT_APP_CATEGORIES } from '../../../../../src/core/public';
 import { UMFrontendLibs } from '../lib/lib';
 import { PLUGIN } from '../../common/constants';
 import { FeatureCatalogueCategory } from '../../../../../src/plugins/home/public';
 import { HomePublicPluginSetup } from '../../../../../src/plugins/home/public';
 import { EmbeddableStart } from '../../../../../src/plugins/embeddable/public';
-import { TriggersAndActionsUIPublicPluginSetup } from '../../../triggers_actions_ui/public';
-import { DataPublicPluginSetup } from '../../../../../src/plugins/data/public';
+import {
+  TriggersAndActionsUIPublicPluginSetup,
+  TriggersAndActionsUIPublicPluginStart,
+} from '../../../triggers_actions_ui/public';
+import {
+  DataPublicPluginSetup,
+  DataPublicPluginStart,
+} from '../../../../../src/plugins/data/public';
+import { alertTypeInitializers } from '../lib/alert_types';
+import { initializeStore } from '../state';
+import { kibanaService } from '../state/kibana_service';
 
 export interface ClientPluginsSetup {
   data: DataPublicPluginSetup;
@@ -21,10 +32,16 @@ export interface ClientPluginsSetup {
 
 export interface ClientPluginsStart {
   embeddable: EmbeddableStart;
+  data: DataPublicPluginStart;
+  triggers_actions_ui: TriggersAndActionsUIPublicPluginStart;
 }
 
 export class UptimePlugin implements Plugin<void, void, ClientPluginsSetup, ClientPluginsStart> {
-  constructor(_context: PluginInitializerContext) {}
+  private _store: Store<any, any>;
+
+  constructor(_context: PluginInitializerContext) {
+    this._store = initializeStore();
+  }
 
   public async setup(
     core: CoreSetup<ClientPluginsStart, unknown>,
@@ -42,6 +59,7 @@ export class UptimePlugin implements Plugin<void, void, ClientPluginsSetup, Clie
       });
     }
 
+    const self = this;
     core.application.register({
       appRoute: '/app/uptime#/',
       id: PLUGIN.ID,
@@ -56,16 +74,32 @@ export class UptimePlugin implements Plugin<void, void, ClientPluginsSetup, Clie
         );
 
         const { element } = params;
+
         const libs: UMFrontendLibs = {
-          framework: getKibanaFrameworkAdapter(coreStart, plugins, corePlugins),
+          framework: getKibanaFrameworkAdapter(coreStart, plugins, corePlugins, self._store),
         };
         libs.framework.render(element);
         return () => {};
       },
     });
   }
 
-  public start(_start: CoreStart, _plugins: {}): void {}
+  public start(start: CoreStart, plugins: ClientPluginsStart): void {
+    kibanaService.core = start;
+    alertTypeInitializers.forEach(init => {
+      const alertInitializer = init({
+        store: this._store,
+        core: start,
+        plugins,
+      });
+      if (
+        plugins.triggers_actions_ui &&
+        !plugins.triggers_actions_ui.alertTypeRegistry.has(alertInitializer.id)
+      ) {
+        plugins.triggers_actions_ui.alertTypeRegistry.register(alertInitializer);
+      }
+    });
+  }
 
   public stop(): void {}
 }

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

@@ -4,11 +4,11 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { EuiLink } from '@elastic/eui';
 import { EuiExpression, EuiPopover } from '@elastic/eui';
-import { Link } from 'react-router-dom';
 import React, { useState } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { SETTINGS_ROUTE } from '../../../../common/constants';
+import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
 
 interface SettingsMessageExpressionPopoverProps {
   'aria-label': string;
@@ -25,6 +25,8 @@ export const SettingsMessageExpressionPopover: React.FC<SettingsMessageExpressio
   value,
   id,
 }) => {
+  const kibana = useKibana();
+  const path = kibana.services?.application?.getUrlForApp('uptime', { path: 'settings' });
   const [isOpen, setIsOpen] = useState(false);
   return (
     <EuiPopover
@@ -50,7 +52,7 @@ export const SettingsMessageExpressionPopover: React.FC<SettingsMessageExpressio
           settingsPageLink: (
             // this link is wrapped around a span so we can also change the UI state
             // and hide the alert flyout before triggering the navigation to the settings page
-            <Link to={SETTINGS_ROUTE} data-test-subj="xpack.uptime.alerts.tlsFlyout.linkToSettings">
+            <EuiLink href={path} data-test-subj="xpack.uptime.alerts.tlsFlyout.linkToSettings">
               <span
                 onClick={() => {
                   setAlertFlyoutVisible(false);
@@ -63,7 +65,7 @@ export const SettingsMessageExpressionPopover: React.FC<SettingsMessageExpressio
               >
                 settings page
               </span>
-            </Link>
+            </EuiLink>
           ),
         }}
       />

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

@@ -5,14 +5,18 @@
  */
 
 import React, { createContext, useMemo, useState } from 'react';
-import { store } from '../state';
+import { Store } from 'redux';
 import { triggerAppRefresh } from '../state/actions';
 
 interface UptimeRefreshContext {
   lastRefresh: number;
   refreshApp: () => void;
 }
 
+interface RefreshContextProps {
+  store: Store<any>;
+}
+
 const defaultContext: UptimeRefreshContext = {
   lastRefresh: 0,
   refreshApp: () => {
@@ -22,19 +26,20 @@ const defaultContext: UptimeRefreshContext = {
 
 export const UptimeRefreshContext = createContext(defaultContext);
 
-export const UptimeRefreshContextProvider: React.FC = ({ children }) => {
+export const UptimeRefreshContextProvider: React.FC<RefreshContextProps> = ({
+  children,
+  store,
+}) => {
   const [lastRefresh, setLastRefresh] = useState<number>(Date.now());
 
-  const refreshApp = () => {
-    const refreshTime = Date.now();
-    setLastRefresh(refreshTime);
-    // @ts-ignore
-    store.dispatch(triggerAppRefresh(refreshTime));
-  };
-
   const value = useMemo(() => {
+    const refreshApp = () => {
+      const refreshTime = Date.now();
+      setLastRefresh(refreshTime);
+      store.dispatch(triggerAppRefresh(refreshTime));
+    };
     return { lastRefresh, refreshApp };
-  }, [lastRefresh]);
+  }, [lastRefresh, store]);
 
   return <UptimeRefreshContext.Provider value={value} children={children} />;
 };

x-pack/plugins/uptime/public/lib/adapters/framework/new_platform_adapter.tsx

@@ -9,7 +9,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { get } from 'lodash';
 import { i18n as i18nFormatter } from '@kbn/i18n';
-import { alertTypeInitializers } from '../../alert_types';
+import { Store } from 'redux';
 import { UptimeApp, UptimeAppProps } from '../../../uptime_app';
 import { getIntegratedAppAvailability } from './capabilities_adapter';
 import {
@@ -20,11 +20,13 @@ import {
 } from '../../../../common/constants';
 import { UMFrameworkAdapter } from '../../lib';
 import { ClientPluginsStart, ClientPluginsSetup } from '../../../apps/plugin';
+import { AppState } from '../../../state';
 
 export const getKibanaFrameworkAdapter = (
   core: CoreStart,
   plugins: ClientPluginsSetup,
-  startPlugins: ClientPluginsStart
+  startPlugins: ClientPluginsStart,
+  store: Store<AppState>
 ): UMFrameworkAdapter => {
   const {
     application: { capabilities },
@@ -34,18 +36,6 @@ export const getKibanaFrameworkAdapter = (
     i18n,
   } = core;
 
-  const {
-    data: { autocomplete },
-    triggers_actions_ui,
-  } = plugins;
-
-  alertTypeInitializers.forEach(init => {
-    const alertInitializer = init({ autocomplete });
-    if (!triggers_actions_ui.alertTypeRegistry.has(alertInitializer.id)) {
-      triggers_actions_ui.alertTypeRegistry.register(init({ autocomplete }));
-    }
-  });
-
   let breadcrumbs: ChromeBreadcrumb[] = [];
   core.chrome.getBreadcrumbs$().subscribe((nextBreadcrumbs?: ChromeBreadcrumb[]) => {
     breadcrumbs = nextBreadcrumbs || [];
@@ -90,6 +80,7 @@ export const getKibanaFrameworkAdapter = (
     routerBasename: basePath.prepend(PLUGIN.ROUTER_BASE_NAME),
     setBadge,
     setBreadcrumbs: core.chrome.setBreadcrumbs,
+    store,
   };
 
   return {

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

@@ -166,15 +166,38 @@ describe('monitor status alert type', () => {
   });
 
   describe('initMonitorStatusAlertType', () => {
-    expect(initMonitorStatusAlertType({ autocomplete: {} })).toMatchInlineSnapshot(`
+    expect(
+      initMonitorStatusAlertType({
+        autocomplete: {},
+        store: {
+          dispatch: jest.fn(),
+          getState: jest.fn(),
+          replaceReducer: jest.fn(),
+          subscribe: jest.fn(),
+          [Symbol.observable]: jest.fn(),
+        },
+      })
+    ).toMatchInlineSnapshot(`
       Object {
         "alertParamsExpression": [Function],
         "defaultActionMessage": "{{context.message}}
       Last triggered at: {{state.lastTriggeredAt}}
       {{context.downMonitorsWithGeo}}",
         "iconClass": "uptimeApp",
         "id": "xpack.uptime.alerts.monitorStatus",
-        "name": <MonitorStatusTitle />,
+        "name": <Provider
+          store={
+            Object {
+              "dispatch": [MockFunction],
+              "getState": [MockFunction],
+              "replaceReducer": [MockFunction],
+              "subscribe": [MockFunction],
+              Symbol(observable): [MockFunction],
+            }
+          }
+        >
+          <MonitorStatusTitle />
+        </Provider>,
         "requiresAppContext": true,
         "validate": [Function],
       }

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

@@ -4,11 +4,18 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { Store } from 'redux';
+import { CoreStart } from 'kibana/public';
 import { AlertTypeModel } from '../../../../triggers_actions_ui/public';
 import { initMonitorStatusAlertType } from './monitor_status';
 import { initTlsAlertType } from './tls';
+import { ClientPluginsStart } from '../../apps/plugin';
 
-export type AlertTypeInitializer = (dependenies: { autocomplete: any }) => AlertTypeModel;
+export type AlertTypeInitializer = (dependenies: {
+  store: Store<any>;
+  core: CoreStart;
+  plugins: ClientPluginsStart;
+}) => AlertTypeModel;
 
 export const alertTypeInitializers: AlertTypeInitializer[] = [
   initMonitorStatusAlertType,

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

@@ -5,6 +5,7 @@
  */
 
 import { PathReporter } from 'io-ts/lib/PathReporter';
+import { Provider as ReduxProvider } from 'react-redux';
 import React from 'react';
 import DateMath from '@elastic/datemath';
 import { isRight } from 'fp-ts/lib/Either';
@@ -15,6 +16,7 @@ import { AlertMonitorStatus } from '../../components/overview/alerts/alerts_cont
 import { MonitorStatusTitle } from './monitor_status_title';
 import { CLIENT_ALERT_TYPES } from '../../../common/constants';
 import { MonitorStatusTranslations } from './translations';
+import { KibanaContextProvider } from '../../../../../../src/plugins/kibana_react/public';
 
 export const validate = (alertParams: any) => {
   const errors: Record<string, any> = {};
@@ -58,15 +60,27 @@ export const validate = (alertParams: any) => {
 const { defaultActionMessage } = MonitorStatusTranslations;
 
 export const initMonitorStatusAlertType: AlertTypeInitializer = ({
-  autocomplete,
+  store,
+  core,
+  plugins,
 }): AlertTypeModel => ({
   id: CLIENT_ALERT_TYPES.MONITOR_STATUS,
-  name: <MonitorStatusTitle />,
-  iconClass: 'uptimeApp',
-  alertParamsExpression: (params: any) => (
-    <AlertMonitorStatus {...params} autocomplete={autocomplete} />
+  name: (
+    <ReduxProvider store={store}>
+      <MonitorStatusTitle />
+    </ReduxProvider>
   ),
+  iconClass: 'uptimeApp',
+  alertParamsExpression: (params: any) => {
+    return (
+      <ReduxProvider store={store}>
+        <KibanaContextProvider services={{ ...core, ...plugins }}>
+          <AlertMonitorStatus {...params} autocomplete={plugins.data.autocomplete} />
+        </KibanaContextProvider>
+      </ReduxProvider>
+    );
+  },
   validate,
   defaultActionMessage,
-  requiresAppContext: true,
+  requiresAppContext: false,
 });

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

@@ -5,20 +5,32 @@
  */
 
 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 { TlsTranslations } from './translations';
 import { AlertTypeInitializer } from '.';
 import { AlertTls } from '../../components/overview/alerts/alerts_containers/alert_tls';
+import { KibanaContextProvider } from '../../../../../../src/plugins/kibana_react/public';
 
 const { name, defaultActionMessage } = TlsTranslations;
 
-export const initTlsAlertType: AlertTypeInitializer = (): AlertTypeModel => ({
+export const initTlsAlertType: AlertTypeInitializer = ({
+  store,
+  core,
+  plugins,
+}): AlertTypeModel => ({
   id: CLIENT_ALERT_TYPES.TLS,
   iconClass: 'uptimeApp',
-  alertParamsExpression: () => <AlertTls />,
+  alertParamsExpression: () => (
+    <ReduxProvider store={store}>
+      <KibanaContextProvider services={{ ...core, ...plugins }}>
+        <AlertTls />
+      </KibanaContextProvider>
+    </ReduxProvider>
+  ),
   name,
   validate: () => ({ errors: {} }),
   defaultActionMessage,
-  requiresAppContext: true,
+  requiresAppContext: false,
 });