diff --git a/x-pack/plugins/uptime/public/apps/plugin.ts b/x-pack/plugins/uptime/public/apps/plugin.ts index b589bd64591fc..58467cb311d1f 100644 --- a/x-pack/plugins/uptime/public/apps/plugin.ts +++ b/x-pack/plugins/uptime/public/apps/plugin.ts @@ -3,6 +3,8 @@ * 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'; @@ -10,8 +12,17 @@ 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 { - constructor(_context: PluginInitializerContext) {} + private _store: Store; + + constructor(_context: PluginInitializerContext) { + this._store = initializeStore(); + } public async setup( core: CoreSetup, @@ -42,6 +59,7 @@ export class UptimePlugin implements Plugin {}; @@ -65,7 +84,22 @@ export class UptimePlugin implements Plugin { + 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 {} } diff --git a/x-pack/plugins/uptime/public/components/overview/alerts/settings_message_expression_popover.tsx b/x-pack/plugins/uptime/public/components/overview/alerts/settings_message_expression_popover.tsx index 8d9de08751eee..fe65b5fa75766 100644 --- a/x-pack/plugins/uptime/public/components/overview/alerts/settings_message_expression_popover.tsx +++ b/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 { + const kibana = useKibana(); + const path = kibana.services?.application?.getUrlForApp('uptime', { path: 'settings' }); const [isOpen, setIsOpen] = useState(false); return ( + { setAlertFlyoutVisible(false); @@ -63,7 +65,7 @@ export const SettingsMessageExpressionPopover: React.FC settings page - + ), }} /> diff --git a/x-pack/plugins/uptime/public/contexts/uptime_refresh_context.tsx b/x-pack/plugins/uptime/public/contexts/uptime_refresh_context.tsx index 8e406f621f648..e06038ac6cde7 100644 --- a/x-pack/plugins/uptime/public/contexts/uptime_refresh_context.tsx +++ b/x-pack/plugins/uptime/public/contexts/uptime_refresh_context.tsx @@ -5,7 +5,7 @@ */ import React, { createContext, useMemo, useState } from 'react'; -import { store } from '../state'; +import { Store } from 'redux'; import { triggerAppRefresh } from '../state/actions'; interface UptimeRefreshContext { @@ -13,6 +13,10 @@ interface UptimeRefreshContext { refreshApp: () => void; } +interface RefreshContextProps { + store: Store; +} + 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 = ({ + children, + store, +}) => { const [lastRefresh, setLastRefresh] = useState(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 ; }; diff --git a/x-pack/plugins/uptime/public/lib/adapters/framework/new_platform_adapter.tsx b/x-pack/plugins/uptime/public/lib/adapters/framework/new_platform_adapter.tsx index f7f9e056f41af..ee13a48b82e99 100644 --- a/x-pack/plugins/uptime/public/lib/adapters/framework/new_platform_adapter.tsx +++ b/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 ): 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 { diff --git a/x-pack/plugins/uptime/public/lib/alert_types/__tests__/monitor_status.test.ts b/x-pack/plugins/uptime/public/lib/alert_types/__tests__/monitor_status.test.ts index b06a7cc93f628..e9162a0e609c8 100644 --- a/x-pack/plugins/uptime/public/lib/alert_types/__tests__/monitor_status.test.ts +++ b/x-pack/plugins/uptime/public/lib/alert_types/__tests__/monitor_status.test.ts @@ -166,7 +166,18 @@ 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}} @@ -174,7 +185,19 @@ describe('monitor status alert type', () => { {{context.downMonitorsWithGeo}}", "iconClass": "uptimeApp", "id": "xpack.uptime.alerts.monitorStatus", - "name": , + "name": + + , "requiresAppContext": true, "validate": [Function], } diff --git a/x-pack/plugins/uptime/public/lib/alert_types/index.ts b/x-pack/plugins/uptime/public/lib/alert_types/index.ts index 9a0151e95748c..4c62b24fa2b0e 100644 --- a/x-pack/plugins/uptime/public/lib/alert_types/index.ts +++ b/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; + core: CoreStart; + plugins: ClientPluginsStart; +}) => AlertTypeModel; export const alertTypeInitializers: AlertTypeInitializer[] = [ initMonitorStatusAlertType, 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 index bba7907d79c5d..5b17a94d7f32b 100644 --- a/x-pack/plugins/uptime/public/lib/alert_types/monitor_status.tsx +++ b/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 = {}; @@ -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: , - iconClass: 'uptimeApp', - alertParamsExpression: (params: any) => ( - + name: ( + + + ), + iconClass: 'uptimeApp', + alertParamsExpression: (params: any) => { + return ( + + + + + + ); + }, validate, defaultActionMessage, - requiresAppContext: true, + requiresAppContext: false, }); diff --git a/x-pack/plugins/uptime/public/lib/alert_types/tls.tsx b/x-pack/plugins/uptime/public/lib/alert_types/tls.tsx index 5e1b8cf233d70..e35a6727c0085 100644 --- a/x-pack/plugins/uptime/public/lib/alert_types/tls.tsx +++ b/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: () => , + alertParamsExpression: () => ( + + + + + + ), name, validate: () => ({ errors: {} }), defaultActionMessage, - requiresAppContext: true, + requiresAppContext: false, }); diff --git a/x-pack/plugins/uptime/public/state/index.ts b/x-pack/plugins/uptime/public/state/index.ts index e3563c74294d2..fa9979d7436bb 100644 --- a/x-pack/plugins/uptime/public/state/index.ts +++ b/x-pack/plugins/uptime/public/state/index.ts @@ -9,12 +9,16 @@ import createSagaMiddleware from 'redux-saga'; import { rootEffect } from './effects'; import { rootReducer } from './reducers'; -const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; +export type AppState = ReturnType; -const sagaMW = createSagaMiddleware(); +export const initializeStore = () => { + const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; -export const store = createStore(rootReducer, composeEnhancers(applyMiddleware(sagaMW))); + const sagaMW = createSagaMiddleware(); -export type AppState = ReturnType; + const store = createStore(rootReducer, composeEnhancers(applyMiddleware(sagaMW))); + + sagaMW.run(rootEffect); -sagaMW.run(rootEffect); + return store; +}; diff --git a/x-pack/plugins/uptime/public/uptime_app.tsx b/x-pack/plugins/uptime/public/uptime_app.tsx index 2891a15510f31..81db62aa45df7 100644 --- a/x-pack/plugins/uptime/public/uptime_app.tsx +++ b/x-pack/plugins/uptime/public/uptime_app.tsx @@ -10,6 +10,7 @@ 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 { Store } from 'redux'; import { KibanaContextProvider } from '../../../../src/plugins/kibana_react/public'; import { ClientPluginsSetup, ClientPluginsStart } from './apps/plugin'; import { UMUpdateBadge } from './lib/lib'; @@ -20,14 +21,12 @@ import { UptimeStartupPluginsContextProvider, } from './contexts'; import { CommonlyUsedRange } from './components/common/uptime_date_picker'; -import { store } from './state'; import { setBasePath } from './state/actions'; import { PageRouter } from './routes'; import { UptimeAlertsContextProvider, UptimeAlertsFlyoutWrapper, } from './components/overview/alerts'; -import { kibanaService } from './state/kibana_service'; export interface UptimeAppColors { danger: string; @@ -55,6 +54,7 @@ export interface UptimeAppProps { renderGlobalHelpControls(): void; commonlyUsedRanges: CommonlyUsedRange[]; setBreadcrumbs: (crumbs: ChromeBreadcrumb[]) => void; + store: Store; } const Application = (props: UptimeAppProps) => { @@ -69,6 +69,7 @@ const Application = (props: UptimeAppProps) => { routerBasename, setBadge, startPlugins, + store, } = props; useEffect(() => { @@ -88,8 +89,6 @@ const Application = (props: UptimeAppProps) => { ); }, [canSave, renderGlobalHelpControls, setBadge]); - kibanaService.core = core; - store.dispatch(setBasePath(basePath)); return ( @@ -98,7 +97,7 @@ const Application = (props: UptimeAppProps) => { - +