[ML] Register NP ML plugin for Kibana management section.

elastic · Mar 10, 2020 · 3303de6 · 3303de6
1 parent eb533c8
commit 3303de6
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 61 deletions.
diff --git a/x-pack/legacy/plugins/ml/public/application/app.tsx b/x-pack/legacy/plugins/ml/public/application/app.tsx
@@ -12,6 +12,7 @@ import 'ace';
 import { AppMountParameters, CoreStart } from 'kibana/public';
 
 import { DataPublicPluginStart } from 'src/plugins/data/public';
+import { ManagementSetup } from 'src/plugins/management/public';
 import { SecurityPluginSetup } from '../../../../../plugins/security/public';
 import { LicensingPluginSetup } from '../../../../../plugins/licensing/public';
 
@@ -25,6 +26,7 @@ export interface MlDependencies extends AppMountParameters {
   data: DataPublicPluginStart;
   security: SecurityPluginSetup;
   licensing: LicensingPluginSetup;
+  management: ManagementSetup;
 }
 
 interface AppProps {

diff --git a/x-pack/legacy/plugins/ml/public/application/management/index.ts b/x-pack/legacy/plugins/ml/public/application/management/index.ts
@@ -11,14 +11,12 @@
  */
 
 import { npSetup } from 'ui/new_platform';
-import { management } from 'ui/management';
 import { i18n } from '@kbn/i18n';
 import chrome from 'ui/chrome';
 import { metadata } from 'ui/metadata';
 import { take } from 'rxjs/operators';
-import { JOBS_LIST_PATH } from './management_urls';
 import { setDependencyCache } from '../util/dependency_cache';
-import './jobs_list';
+import { renderApp } from './jobs_list';
 import {
   LicensingPluginSetup,
   LICENSE_CHECK_STATE,
@@ -36,11 +34,12 @@ const plugins = npSetup.plugins as PluginsSetupExtended;
 const licensing = plugins.licensing.license$.pipe(take(1));
 licensing.subscribe(license => {
   if (license.check(PLUGIN_ID, MINIMUM_FULL_LICENSE).state === LICENSE_CHECK_STATE.Valid) {
-    initManagementSection();
+    // initManagementSection();
   }
 });
+const { management } = plugins;
 
-function initManagementSection() {
+export function initManagementSection() {
   const legacyBasePath = {
     prepend: chrome.addBasePath,
     get: chrome.getBasePath,
@@ -56,20 +55,23 @@ function initManagementSection() {
     basePath: legacyBasePath as any,
   });
 
-  management.register('ml', {
-    display: i18n.translate('xpack.ml.management.mlTitle', {
+  const mlSection = management.sections.register({
+    id: 'ml',
+    title: i18n.translate('xpack.ml.management.mlTitle', {
       defaultMessage: 'Machine Learning',
     }),
     order: 100,
     icon: 'machineLearningApp',
   });
 
-  management.getSection('ml').register('jobsList', {
-    name: 'jobsListLink',
-    order: 10,
-    display: i18n.translate('xpack.ml.management.jobsListTitle', {
+  mlSection.registerApp({
+    id: 'jobsListLink',
+    title: i18n.translate('xpack.ml.management.jobsListTitle', {
       defaultMessage: 'Jobs list',
     }),
-    url: `#${JOBS_LIST_PATH}`,
+    order: 10,
+    async mount(params) {
+      return renderApp(params.element, {});
+    },
   });
 }
diff --git a/x-pack/legacy/plugins/ml/public/application/management/jobs_list/index.ts b/x-pack/legacy/plugins/ml/public/application/management/jobs_list/index.ts
@@ -4,52 +4,23 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import ReactDOM, { render, unmountComponentAtNode } from 'react-dom';
+import ReactDOM, { unmountComponentAtNode } from 'react-dom';
 import React from 'react';
-import routes from 'ui/routes';
-import { canGetManagementMlJobs } from '../../privilege/check_privilege';
-import { JOBS_LIST_PATH, ACCESS_DENIED_PATH } from '../management_urls';
-import { JobsListPage, AccessDeniedPage } from './components';
-import { getJobsListBreadcrumbs } from '../breadcrumbs';
+// import { canGetManagementMlJobs } from '../../privilege/check_privilege';
+// import { JOBS_LIST_PATH, ACCESS_DENIED_PATH } from '../management_urls';
+// import { JobsListPage, AccessDeniedPage } from './components';
+import { JobsListPage } from './components';
+// import { getJobsListBreadcrumbs } from '../breadcrumbs';
 
-const template = `<kbn-management-app section="ml/jobs-list">
-<div id="kibanaManagementMLSection" />
-</kbn-management-app>`;
+export const renderApp = (element: HTMLElement, appDependencies: any) => {
+  // const { mlFeatureEnabledInSpace } = checkPrivilege;
+  const mlFeatureEnabledInSpace = true;
+  ReactDOM.render(
+    React.createElement(JobsListPage, { isMlEnabledInSpace: mlFeatureEnabledInSpace }),
+    element
+  );
 
-routes.when(JOBS_LIST_PATH, {
-  template,
-  k7Breadcrumbs: getJobsListBreadcrumbs,
-  resolve: {
-    checkPrivilege: canGetManagementMlJobs,
-  },
-  controller($scope, checkPrivilege) {
-    const { mlFeatureEnabledInSpace } = checkPrivilege;
-
-    $scope.$on('$destroy', () => {
-      const elem = document.getElementById('kibanaManagementMLSection');
-      if (elem) unmountComponentAtNode(elem);
-    });
-    $scope.$$postDigest(() => {
-      const element = document.getElementById('kibanaManagementMLSection');
-      ReactDOM.render(
-        React.createElement(JobsListPage, { isMlEnabledInSpace: mlFeatureEnabledInSpace }),
-        element
-      );
-    });
-  },
-});
-
-routes.when(ACCESS_DENIED_PATH, {
-  template,
-  k7Breadcrumbs: getJobsListBreadcrumbs,
-  controller($scope) {
-    $scope.$on('$destroy', () => {
-      const elem = document.getElementById('kibanaManagementMLSection');
-      if (elem) unmountComponentAtNode(elem);
-    });
-    $scope.$$postDigest(() => {
-      const element = document.getElementById('kibanaManagementMLSection');
-      render(AccessDeniedPage(), element);
-    });
-  },
-});
+  return () => {
+    unmountComponentAtNode(element);
+  };
+};
diff --git a/x-pack/legacy/plugins/ml/public/plugin.ts b/x-pack/legacy/plugins/ml/public/plugin.ts
@@ -4,29 +4,55 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { i18n } from '@kbn/i18n';
+
 import { Plugin, CoreStart, CoreSetup } from 'src/core/public';
 import { MlDependencies } from './application/app';
 
 export class MlPlugin implements Plugin<Setup, Start> {
-  setup(core: CoreSetup, { data, security, licensing }: MlDependencies) {
+  setup(core: CoreSetup, { data, security, licensing, management }: MlDependencies) {
     core.application.register({
       id: 'ml',
       title: 'Machine learning',
       async mount(context, params) {
         const [coreStart, depsStart] = await core.getStartServices();
-        const { renderApp } = await import('./application/app');
-        return renderApp(coreStart, depsStart, {
+        const { renderApp: renderMlApp } = await import('./application/app');
+        return renderMlApp(coreStart, depsStart, {
           element: params.element,
           appBasePath: params.appBasePath,
           onAppLeave: params.onAppLeave,
           history: params.history,
           data,
           security,
           licensing,
+          management,
         });
       },
     });
 
+    const mlSection = management.sections.register({
+      id: 'ml',
+      title: i18n.translate('xpack.ml.management.mlTitle', {
+        defaultMessage: 'Machine Learning',
+      }),
+      order: 100,
+      icon: 'machineLearningApp',
+    });
+
+    mlSection.registerApp({
+      id: 'jobsListLink',
+      title: i18n.translate('xpack.ml.management.jobsListTitle', {
+        defaultMessage: 'Jobs list',
+      }),
+      order: 10,
+      async mount(params) {
+        const { renderApp: renderManagementApp } = await import(
+          './application/management/jobs_list'
+        );
+        return renderManagementApp(params.element, {});
+      },
+    });
+
     return {};
   }