[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}