[Uptime] Consume core startup services

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',
 };

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);

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 () => {};
+ },
  });
  }
 }

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(<UptimeApp {...props} />, node);
+ render: async (element: any) => {
+ if (element) {
+ ReactDOM.render(<UptimeApp {...props} />, element);
  }
  },
  };

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<NormalizedCacheObject>; // | OtherCli
 export type BootstrapUptimeApp = (props: UptimeAppProps) => React.ReactElement<any>;
 
 export interface UMFrameworkAdapter {
- render(createComponent: BootstrapUptimeApp, createGraphQLClient: CreateGraphQLClient): void;
+ render(element: any): void;
 }

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) => {
  <EuiPage className="app-wrapper-panel " data-test-subj="uptimeApp">
  <main>
  <PageRouter
+ // @ts-ignore we need to update the type of this prop
  autocomplete={plugins.data.autocomplete}
  basePath={basePath}
  setBreadcrumbs={setBreadcrumbs}