[Uptime] Shim UI exports for new platform

x-pack/legacy/plugins/uptime/common/constants/plugin.ts

@@ -5,6 +5,7 @@
  */
 
 export const PLUGIN = {
+  APP_ROOT_ID: 'react-uptime-root',
   ID: 'uptime',
   ROUTER_BASE_NAME: '/app/uptime#/',
   LOCAL_STORAGE_KEY: 'xpack.uptime',

x-pack/legacy/plugins/uptime/public/app.ts

@@ -4,4 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import './apps/kibana_app';
+import './apps/index';

x-pack/legacy/plugins/uptime/public/apps/kibana_app.ts → x-pack/legacy/plugins/uptime/public/apps/index.ts

@@ -4,7 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { compose } from '../lib/compose/kibana_compose';
-import { startApp } from './start_app';
+import chrome from 'ui/chrome';
+import { npStart } from 'ui/new_platform';
+import { Plugin } from './plugin';
 
-startApp(compose());
+new Plugin({ opaqueId: Symbol('uptime') }, chrome).start(npStart);

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

@@ -0,0 +1,50 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * 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 { 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 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;
+  }
+
+  public start({ core }: StartObject): void {
+    const libs: UMFrontendLibs = { framework: getKibanaFrameworkAdapter(core) };
+    // @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);
+    });
+  }
+}

x-pack/legacy/plugins/uptime/public/apps/template.html

@@ -0,0 +1 @@
+<div id="react-uptime-root"></div>

x-pack/legacy/plugins/uptime/public/badge.ts

@@ -4,5 +4,5 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { Badge } from 'ui/chrome/api/badge';
-export type UMBadge = Badge | undefined;
+import { ChromeBadge } from 'src/core/public';
+export type UMBadge = ChromeBadge | undefined;

x-pack/legacy/plugins/uptime/public/breadcrumbs.ts

@@ -5,24 +5,20 @@
  */
 
 import { i18n } from '@kbn/i18n';
+import { ChromeBreadcrumb } from 'src/core/public';
 
-export interface UMBreadcrumb {
-  text: string;
-  href?: string;
-}
-
-const makeOverviewBreadcrumb = (search?: string): UMBreadcrumb => ({
+const makeOverviewBreadcrumb = (search?: string): ChromeBreadcrumb => ({
   text: i18n.translate('xpack.uptime.breadcrumbs.overviewBreadcrumbText', {
     defaultMessage: 'Uptime',
   }),
   href: `#/${search ? search : ''}`,
 });
 
-export const getOverviewPageBreadcrumbs = (search?: string): UMBreadcrumb[] => [
+export const getOverviewPageBreadcrumbs = (search?: string): ChromeBreadcrumb[] => [
   makeOverviewBreadcrumb(search),
 ];
 
-export const getMonitorPageBreadcrumb = (name: string, search?: string): UMBreadcrumb[] => [
+export const getMonitorPageBreadcrumb = (name: string, search?: string): ChromeBreadcrumb[] => [
   makeOverviewBreadcrumb(search),
   { text: name },
 ];

x-pack/legacy/plugins/uptime/public/lib/adapters/framework/capabilities_adapter.ts

@@ -4,16 +4,14 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { capabilities as uiCapabilities } from 'ui/capabilities';
-
 interface IntegratedAppsAvailability {
   [key: string]: boolean;
 }
 
 export const getIntegratedAppAvailability = (
+  capabilities: any,
   integratedApps: string[]
 ): IntegratedAppsAvailability => {
-  const capabilities = uiCapabilities.get();
   return integratedApps.reduce((supportedSolutions: IntegratedAppsAvailability, solutionName) => {
     supportedSolutions[solutionName] =
       capabilities[solutionName] && capabilities[solutionName].show === true;

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

@@ -0,0 +1,71 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { ChromeBreadcrumb, CoreStart } from 'src/core/public';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { get } from 'lodash';
+import { CreateGraphQLClient } from './framework_adapter_types';
+import { UptimeApp, UptimeAppProps } from '../../../uptime_app';
+import { getIntegratedAppAvailability } from './capabilities_adapter';
+import { INTEGRATED_SOLUTIONS, PLUGIN } from '../../../../common/constants';
+import { getTelemetryMonitorPageLogger, getTelemetryOverviewPageLogger } from '../telemetry';
+import { renderUptimeKibanaGlobalHelp } from './kibana_global_help';
+import { UMFrameworkAdapter, BootstrapUptimeApp } from '../../lib';
+import { createApolloClient } from './apollo_client_adapter';
+
+export const getKibanaFrameworkAdapter = (core: CoreStart): UMFrameworkAdapter => {
+  const {
+    application: { capabilities },
+    chrome: { setBadge, setHelpExtension },
+    docLinks: { DOC_LINK_VERSION, ELASTIC_WEBSITE_URL },
+    http: { basePath },
+    i18n,
+  } = core;
+  let breadcrumbs: ChromeBreadcrumb[] = [];
+  core.chrome.getBreadcrumbs$().subscribe((nextBreadcrumbs?: ChromeBreadcrumb[]) => {
+    breadcrumbs = nextBreadcrumbs || [];
+  });
+  const { apm, infrastructure, logs } = getIntegratedAppAvailability(
+    capabilities,
+    INTEGRATED_SOLUTIONS
+  );
+  const canSave = get(capabilities, 'uptime.save', false);
+  const props: UptimeAppProps = {
+    basePath: basePath.get(),
+    canSave,
+    client: createApolloClient(`${basePath.get()}/api/uptime/graphql`, 'true'),
+    darkMode: core.uiSettings.get('theme:darkMode'),
+    i18n,
+    isApmAvailable: apm,
+    isInfraAvailable: infrastructure,
+    isLogsAvailable: logs,
+    kibanaBreadcrumbs: breadcrumbs,
+    logMonitorPageLoad: getTelemetryMonitorPageLogger('true', basePath.get()),
+    logOverviewPageLoad: getTelemetryOverviewPageLogger('true', basePath.get()),
+    renderGlobalHelpControls: () =>
+      setHelpExtension((element: HTMLElement) => {
+        ReactDOM.render(
+          renderUptimeKibanaGlobalHelp(ELASTIC_WEBSITE_URL, DOC_LINK_VERSION),
+          element
+        );
+        return () => ReactDOM.unmountComponentAtNode(element);
+      }),
+    routerBasename: basePath.prepend(PLUGIN.ROUTER_BASE_NAME),
+    setBadge,
+    setBreadcrumbs: core.chrome.setBreadcrumbs,
+  };
+
+  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);
+      }
+    },
+  };
+};