From f5251bbedafd048d6a51b6d6eb0b78e193b29a15 Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Tue, 11 Feb 2020 17:25:54 -0500 Subject: [PATCH] Consume core startup services. (#57259) (#57314) --- .../plugins/uptime/common/constants/plugin.ts | 2 + .../plugins/uptime/public/apps/index.ts | 12 ++-- .../plugins/uptime/public/apps/plugin.ts | 71 +++++++++++-------- .../framework/new_platform_adapter.tsx | 19 +++-- .../legacy/plugins/uptime/public/lib/lib.ts | 3 +- .../plugins/uptime/public/uptime_app.tsx | 9 +-- 6 files changed, 64 insertions(+), 52 deletions(-) diff --git a/x-pack/legacy/plugins/uptime/common/constants/plugin.ts b/x-pack/legacy/plugins/uptime/common/constants/plugin.ts index 93c3f00a0a45c..f6fa569a50315 100644 --- a/x-pack/legacy/plugins/uptime/common/constants/plugin.ts +++ b/x-pack/legacy/plugins/uptime/common/constants/plugin.ts @@ -6,7 +6,9 @@ export const PLUGIN = { APP_ROOT_ID: 'react-uptime-root', + DESCRIPTION: 'Uptime monitoring', ID: 'uptime', ROUTER_BASE_NAME: '/app/uptime#', LOCAL_STORAGE_KEY: 'xpack.uptime', + TITLE: 'uptime', }; diff --git a/x-pack/legacy/plugins/uptime/public/apps/index.ts b/x-pack/legacy/plugins/uptime/public/apps/index.ts index 06776842aa6de..d322c35364d1a 100644 --- a/x-pack/legacy/plugins/uptime/public/apps/index.ts +++ b/x-pack/legacy/plugins/uptime/public/apps/index.ts @@ -4,12 +4,12 @@ * you may not use this file except in compliance with the Elastic License. */ -import chrome from 'ui/chrome'; -import { npStart } from 'ui/new_platform'; +import { npSetup } from 'ui/new_platform'; import { Plugin } from './plugin'; import 'uiExports/embeddableFactories'; -new Plugin( - { opaqueId: Symbol('uptime'), env: {} as any, config: { get: () => ({} as any) } }, - chrome -).start(npStart); +new Plugin({ + opaqueId: Symbol('uptime'), + env: {} as any, + config: { get: () => ({} as any) }, +}).setup(npSetup); diff --git a/x-pack/legacy/plugins/uptime/public/apps/plugin.ts b/x-pack/legacy/plugins/uptime/public/apps/plugin.ts index c09fdf116e790..1aed459cece41 100644 --- a/x-pack/legacy/plugins/uptime/public/apps/plugin.ts +++ b/x-pack/legacy/plugins/uptime/public/apps/plugin.ts @@ -4,49 +4,62 @@ * you may not use this file except in compliance with the Elastic License. */ -import { LegacyCoreStart, PluginInitializerContext } from 'src/core/public'; -import { PluginsStart } from 'ui/new_platform/new_platform'; -import { Chrome } from 'ui/chrome'; +import { + LegacyCoreStart, + LegacyCoreSetup, + PluginInitializerContext, + AppMountParameters, +} from 'src/core/public'; +import { PluginsStart, PluginsSetup } from 'ui/new_platform/new_platform'; +import { FeatureCatalogueCategory } from '../../../../../../src/plugins/home/public'; import { UMFrontendLibs } from '../lib/lib'; import { PLUGIN } from '../../common/constants'; import { getKibanaFrameworkAdapter } from '../lib/adapters/framework/new_platform_adapter'; -import template from './template.html'; -import { UptimeApp } from '../uptime_app'; -import { createApolloClient } from '../lib/adapters/framework/apollo_client_adapter'; export interface StartObject { core: LegacyCoreStart; plugins: PluginsStart; } +export interface SetupObject { + core: LegacyCoreSetup; + plugins: PluginsSetup; +} + export class Plugin { constructor( // @ts-ignore this is added to satisfy the New Platform typing constraint, // but we're not leveraging any of its functionality yet. - private readonly initializerContext: PluginInitializerContext, - private readonly chrome: Chrome - ) { - this.chrome = chrome; - } + private readonly initializerContext: PluginInitializerContext + ) {} - public start(start: StartObject): void { - const libs: UMFrontendLibs = { - framework: getKibanaFrameworkAdapter(start.core, start.plugins), - }; - // @ts-ignore improper type description - this.chrome.setRootTemplate(template); - const checkForRoot = () => { - return new Promise(resolve => { - const ready = !!document.getElementById(PLUGIN.APP_ROOT_ID); - if (ready) { - resolve(); - } else { - setTimeout(() => resolve(checkForRoot()), 10); - } - }); - }; - checkForRoot().then(() => { - libs.framework.render(UptimeApp, createApolloClient); + public setup(setup: SetupObject) { + const { core, plugins } = setup; + const { home } = plugins; + home.featureCatalogue.register({ + category: FeatureCatalogueCategory.DATA, + description: PLUGIN.DESCRIPTION, + icon: 'uptimeApp', + id: PLUGIN.ID, + path: '/app/uptime#/', + showOnHomePage: true, + title: PLUGIN.TITLE, + }); + core.application.register({ + appRoute: '/app/uptime#/', + id: PLUGIN.ID, + euiIconType: 'uptimeApp', + order: 8900, + title: 'Uptime', + async mount(params: AppMountParameters) { + const [coreStart] = await core.getStartServices(); + const { element } = params; + const libs: UMFrontendLibs = { + framework: getKibanaFrameworkAdapter(coreStart, plugins), + }; + libs.framework.render(element); + return () => {}; + }, }); } } diff --git a/x-pack/legacy/plugins/uptime/public/lib/adapters/framework/new_platform_adapter.tsx b/x-pack/legacy/plugins/uptime/public/lib/adapters/framework/new_platform_adapter.tsx index 28179c229013b..a377b9ed1507b 100644 --- a/x-pack/legacy/plugins/uptime/public/lib/adapters/framework/new_platform_adapter.tsx +++ b/x-pack/legacy/plugins/uptime/public/lib/adapters/framework/new_platform_adapter.tsx @@ -4,13 +4,12 @@ * you may not use this file except in compliance with the Elastic License. */ -import { ChromeBreadcrumb, LegacyCoreStart } from 'src/core/public'; +import { ChromeBreadcrumb, CoreStart } from 'src/core/public'; import React from 'react'; import ReactDOM from 'react-dom'; import { get } from 'lodash'; import { i18n as i18nFormatter } from '@kbn/i18n'; -import { PluginsStart } from 'ui/new_platform/new_platform'; -import { CreateGraphQLClient } from './framework_adapter_types'; +import { PluginsSetup } from 'ui/new_platform/new_platform'; import { UptimeApp, UptimeAppProps } from '../../../uptime_app'; import { getIntegratedAppAvailability } from './capabilities_adapter'; import { @@ -19,12 +18,12 @@ import { DEFAULT_DARK_MODE, DEFAULT_TIMEPICKER_QUICK_RANGES, } from '../../../../common/constants'; -import { UMFrameworkAdapter, BootstrapUptimeApp } from '../../lib'; +import { UMFrameworkAdapter } from '../../lib'; import { createApolloClient } from './apollo_client_adapter'; export const getKibanaFrameworkAdapter = ( - core: LegacyCoreStart, - plugins: PluginsStart + core: CoreStart, + plugins: PluginsSetup ): UMFrameworkAdapter => { const { application: { capabilities }, @@ -77,11 +76,9 @@ export const getKibanaFrameworkAdapter = ( }; return { - // TODO: these parameters satisfy the interface but are no longer needed - render: async (createComponent: BootstrapUptimeApp, cgc: CreateGraphQLClient) => { - const node = await document.getElementById('react-uptime-root'); - if (node) { - ReactDOM.render(, node); + render: async (element: any) => { + if (element) { + ReactDOM.render(, element); } }, }; diff --git a/x-pack/legacy/plugins/uptime/public/lib/lib.ts b/x-pack/legacy/plugins/uptime/public/lib/lib.ts index 0a744bff815c7..aba151bf5aab3 100644 --- a/x-pack/legacy/plugins/uptime/public/lib/lib.ts +++ b/x-pack/legacy/plugins/uptime/public/lib/lib.ts @@ -10,7 +10,6 @@ import React from 'react'; import { ChromeBreadcrumb } from 'src/core/public'; import { UMBadge } from '../badge'; import { UptimeAppProps } from '../uptime_app'; -import { CreateGraphQLClient } from './adapters/framework/framework_adapter_types'; export interface UMFrontendLibs { framework: UMFrameworkAdapter; @@ -25,5 +24,5 @@ export type UMGraphQLClient = ApolloClient; // | OtherCli export type BootstrapUptimeApp = (props: UptimeAppProps) => React.ReactElement; export interface UMFrameworkAdapter { - render(createComponent: BootstrapUptimeApp, createGraphQLClient: CreateGraphQLClient): void; + render(element: any): void; } diff --git a/x-pack/legacy/plugins/uptime/public/uptime_app.tsx b/x-pack/legacy/plugins/uptime/public/uptime_app.tsx index 513faa3eb4bc2..baaed6616b653 100644 --- a/x-pack/legacy/plugins/uptime/public/uptime_app.tsx +++ b/x-pack/legacy/plugins/uptime/public/uptime_app.tsx @@ -10,8 +10,8 @@ import React, { useEffect } from 'react'; import { ApolloProvider } from 'react-apollo'; import { Provider as ReduxProvider } from 'react-redux'; import { BrowserRouter as Router } from 'react-router-dom'; -import { I18nStart, ChromeBreadcrumb, LegacyCoreStart } from 'src/core/public'; -import { PluginsStart } from 'ui/new_platform/new_platform'; +import { I18nStart, ChromeBreadcrumb, CoreStart } from 'src/core/public'; +import { PluginsSetup } from 'ui/new_platform/new_platform'; import { KibanaContextProvider } from '../../../../../src/plugins/kibana_react/public'; import { UMGraphQLClient, UMUpdateBreadcrumbs, UMUpdateBadge } from './lib/lib'; import { @@ -37,14 +37,14 @@ export interface UptimeAppProps { basePath: string; canSave: boolean; client: UMGraphQLClient; - core: LegacyCoreStart; + core: CoreStart; darkMode: boolean; i18n: I18nStart; isApmAvailable: boolean; isInfraAvailable: boolean; isLogsAvailable: boolean; kibanaBreadcrumbs: ChromeBreadcrumb[]; - plugins: PluginsStart; + plugins: PluginsSetup; routerBasename: string; setBreadcrumbs: UMUpdateBreadcrumbs; setBadge: UMUpdateBadge; @@ -99,6 +99,7 @@ const Application = (props: UptimeAppProps) => {